/* eslint-disable */
// Resource Hub, filterable article library.

const RES_CATEGORIES = [
{ key: "all", label: "All" },
{ key: "news", label: "AI News" },
{ key: "trends", label: "AI Trends & Perspectives" },
{ key: "reviews", label: "AI Tool Review" }];

// Live posts migrated from intelligenceassist.com.au/blog (page 1, most recent first).
// Titles, categories, dates and URLs are the real ones. Summaries are not carried over
// yet, so cards show title + category + date only.
const ARTICLES = [
{ slug: "quantum-vs-ai-two-paths-to-smarter-machines", img: "https://www.intelligenceassist.com.au/wp-content/uploads/2025/10/Quantum_Computing_Image.jpg", cat: "trends", date: "October 27, 2025", featured: true,
  title: "Quantum vs AI: Two Paths to Smarter Machines",
  url: "https://www.intelligenceassist.com.au/quantum-vs-ai-two-paths-to-smarter-machines/" },
{ slug: "openais-agentkit-what-australian-smes-actually-need-to-know", img: "https://www.intelligenceassist.com.au/wp-content/uploads/2025/10/AgentKit-Logo.webp", cat: "news", date: "October 22, 2025",
  title: "OpenAI's AgentKit: What Australian SMEs Actually Need to Know",
  url: "https://www.intelligenceassist.com.au/openais-agentkit-what-australian-smes-actually-need-to-know/" },
{ slug: "tool-of-the-week-julius-for-data-ai", img: "https://www.intelligenceassist.com.au/wp-content/uploads/2025/09/Julius-AI-Blog-Website-Feature.png", cat: "reviews", date: "September 23, 2025",
  title: "Tool of the Week: Julius for Data AI",
  url: "https://www.intelligenceassist.com.au/tool-of-the-week-julius-for-data-ai/" },
{ slug: "tool-of-the-week-ai-enhanced-productivity-gains-with-notion", img: "https://www.intelligenceassist.com.au/wp-content/uploads/2025/09/website-resize-notion-blog-image.png", cat: "reviews", date: "September 19, 2025",
  title: "Tool of the Week: AI-Enhanced Productivity Gains with Notion",
  url: "https://www.intelligenceassist.com.au/tool-of-the-week-ai-enhanced-productivity-gains-with-notion/" },
{ slug: "grounding-why-ai-needs-it-why-you-need-it", img: "https://www.intelligenceassist.com.au/wp-content/uploads/2025/09/grounding-blog-featured-image.png", cat: "trends", date: "September 15, 2025",
  title: "Grounding: Why AI Needs It, Why YOU Need It",
  url: "https://www.intelligenceassist.com.au/grounding-why-ai-needs-it-why-you-need-it/" },
{ slug: "how-to-choose-the-right-chatbot-for-your-business", img: "https://www.intelligenceassist.com.au/wp-content/uploads/2025/09/Chatbot-blog-blue-background.png", cat: "trends", date: "September 3, 2025",
  title: "How to Choose the Right Chatbot for Your Business",
  url: "https://www.intelligenceassist.com.au/how-to-choose-the-right-chatbot-for-your-business/" },
{ slug: "tool-of-the-week-gumshoe-ai", img: "https://www.intelligenceassist.com.au/wp-content/uploads/2025/08/Socials-Blog-Image-Facebook-GS-eep.png", cat: "reviews", date: "August 26, 2025",
  title: "Tool of the Week: Gumshoe AI",
  url: "https://www.intelligenceassist.com.au/tool-of-the-week-gumshoe-ai/" },
{ slug: "brands-that-adapt-get-seen", img: "https://www.intelligenceassist.com.au/wp-content/uploads/2025/08/ChatGPT-Image-Aug-25-2025-03_15_17-PM.png", cat: "trends", date: "August 25, 2025",
  title: "Brands that Adapt Get Seen: How to Get Your Business Discovered in the Age of Generative AI Search",
  url: "https://www.intelligenceassist.com.au/brands-that-adapt-get-seen-how-to-get-your-business-discovered-in-the-age-of-generative-ai-search/" },
{ slug: "the-hidden-cost-of-ai-why-every-prompt-matters", img: "https://www.intelligenceassist.com.au/wp-content/uploads/2025/07/2025-The-Year-of-AI-Agents-1-1.png", cat: "trends", date: "July 23, 2025",
  title: "The Hidden Cost of AI: Why Every Prompt Matters",
  url: "https://www.intelligenceassist.com.au/the-hidden-cost-of-ai-why-every-prompt-matters-2/" },
{ slug: "why-you-cant-just-throw-a-spreadsheet-into-ai-and-expect-magic", img: "https://www.intelligenceassist.com.au/wp-content/uploads/2025/06/Spreadsheets-.png", cat: "trends", date: "June 3, 2025",
  title: "Why You Can't Just Throw a Spreadsheet into AI and Expect Magic",
  url: "https://www.intelligenceassist.com.au/why-you-cant-just-throw-a-spreadsheet-into-ai-and-expect-magic/" },
{ slug: "copilot-practical-ai-in-microsoft-365", img: "https://www.intelligenceassist.com.au/wp-content/uploads/2025/05/Mircrosoft-Copilot-Building-a-Practical-AI-Foundation-in-Your-Microsoft-365-Environment.png", cat: "trends", date: "May 16, 2025",
  title: "Copilot: Practical AI in Microsoft 365",
  url: "https://www.intelligenceassist.com.au/copilot-practical-ai-in-microsoft-365/" },
{ slug: "battle-of-the-base-agents", img: "https://www.intelligenceassist.com.au/wp-content/uploads/2025/04/ChatGPT-Image-Apr-16-2025-03_46_01-PM.png", cat: "trends", date: "April 16, 2025",
  title: "Battle of the Base Agents: Finding the Right Core AI Tool for Your Business",
  url: "https://www.intelligenceassist.com.au/battle-of-the-base-agents-finding-the-right-core-ai-tool-for-your-business/" }];

function ResourcesScreen({ go, t }) {
  const [active, setActive] = React.useState("all");
  const featured = ARTICLES.find((a) => a.featured);
  const rest = ARTICLES.filter((a) => !a.featured);

  const filtered = active === "all" ? rest : rest.filter((a) => a.cat === active);

  return (
    <div data-screen-label="08 Blog">
      {/* HERO */}
      <section className="hero dot-grid acc-hero">
        <div className="container">
          <Crumbs items={[{ label: "Home", to: "home" }, "Blog"]} go={go} />
          <div style={{ marginTop: 22, maxWidth: 760 }}>
            <h1 className="h-display" style={{ marginTop: 16, maxWidth: "18ch" }}>
               <em>Blog</em>
            </h1>
            <p className="lede" style={{ marginTop: 22 }}>
              Stay ahead with AI insights for small businesses. Expert tips, success stories,
              and practical guides to simplify AI adoption.
            </p>
          </div>
        </div>
      </section>

      {/* FEATURED */}
      {featured &&
      <section className="section section--white" style={{ paddingTop: 32, paddingBottom: 48 }}>
          <div className="container">
            <FeaturedCard article={featured} go={go} />
          </div>
        </section>
      }

      {/* TOOLBAR */}
      <section className="wk-filterbar">
        <div className="container" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, padding: "18px 28px", flexWrap: "wrap" }}>
          <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
            {RES_CATEGORIES.map((c) => {
              const count = c.key === "all" ? rest.length : rest.filter((a) => a.cat === c.key).length;
              return (
                <button
                  key={c.key}
                  onClick={() => setActive(c.key)}
                  className={`filter-chip ${active === c.key ? "filter-chip--active" : ""}`}>

                  <span>{c.label}</span>
                  <span className="filter-count">{count}</span>
                </button>);

            })}
          </div>
          <div style={{ fontSize: 13, color: "#5C6172" }}>
            <a href="#" style={{ color: "var(--ia-blue)", fontWeight: 500 }}>
              <Icon name="rss" size={13} style={{ verticalAlign: "middle", marginRight: 6 }} />
              Subscribe via RSS
            </a>
          </div>
        </div>
      </section>

      {/* GRID */}
      <section className="section section--paper" style={{ paddingTop: 40, paddingBottom: 80 }}>
        <div className="container">
          {filtered.length === 0 ?
          <div style={{ background: "#fff", border: "1px dashed var(--hairline)", borderRadius: 18, padding: 48, textAlign: "center", color: "#5C6172", fontSize: 15 }}>
              No articles in this category yet. Check back next week.
            </div> :

          <div className="grid grid--3" style={{ gap: 20 }}>
              {filtered.map((a) => <ArticleCard key={a.slug} article={a} go={go} />)}
            </div>
          }
        </div>
      </section>

      {/* CLOSER, matching the service pages */}
      <section className="section section--paper tbx-closer" style={{ paddingTop: 32, paddingBottom: 88 }}>
        <div className="container">
          <div className="hww-closer" style={{ marginTop: 18 }}>
            <p className="hww-closer-t">
              New writing lands here regularly. <em>If you'd rather talk it through than read about it,
              the first conversation is a good place to start.</em>
            </p>
            <Button variant="primary" size="lg" onClick={() => go("contact")}>
              Talk to us <Icon name="arrow-right" size={16} className="arrow" />
            </Button>
          </div>
        </div>
      </section>
    </div>);

}

// ---------- Featured card ----------
function FeaturedCard({ article, go }) {
  const cat = RES_CATEGORIES.find((c) => c.key === article.cat);
  return (
    <div className="card" style={{
      padding: 0, overflow: "hidden", flexDirection: "row", alignItems: "stretch",
      borderColor: "var(--hairline)", gap: 0
    }}>
      <div style={{ flex: "0 0 44%", background: "var(--ink)", position: "relative", overflow: "hidden", minHeight: 320 }}>
        {article.img ?
          <img src={article.img} alt="" className="post-cover-img" /> :
          <image-slot
            id={`hub-${article.slug}`}
            placeholder={`Cover image for "${article.title}"`}
            shape="rect"
            style={{ height: "100%", width: "100%" }} />}

      </div>
      <div style={{ flex: 1, padding: 40, display: "flex", flexDirection: "column", gap: 18, justifyContent: "center" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <span className="cat-chip cat-chip--featured">Featured</span>
          <span className="cat-chip">{cat.label}</span>
        </div>
        <h2 className="h-section" style={{ fontSize: 36, fontWeight: 600, letterSpacing: "-0.02em", maxWidth: "20ch", margin: 0, lineHeight: 1.1 }}>
          {article.title}
        </h2>
        <div style={{ display: "flex", alignItems: "center", gap: 12, fontSize: 13, color: "#5C6172", marginTop: 4 }}>
          <span>{article.date}</span>
        </div>
        <div>
          <Button variant="primary" size="md" onClick={() => go("post/" + article.slug)}>
            Read the article <Icon name="arrow-right" size={14} className="arrow" />
          </Button>
        </div>
      </div>
    </div>);

}

// ---------- Article card ----------
function ArticleCard({ article, go }) {
  const cat = RES_CATEGORIES.find((c) => c.key === article.cat);
  return (
    <div className="article-card article-card--link" role="link" tabIndex={0}
      onClick={() => go("post/" + article.slug)}
      onKeyDown={(e) => { if (e.key === "Enter") go("post/" + article.slug); }}>
      <div className="article-cover">
        {article.img ?
          <img src={article.img} alt="" className="post-cover-img" /> :
          <image-slot
            id={`hub-${article.slug}`}
            placeholder={`Cover for "${article.title}"`}
            shape="rect"
            style={{ height: "100%", width: "100%" }} />}

      </div>
      <div className="article-body">
        <span className="cat-chip">{cat.label}</span>
        <h3 className="article-title">{article.title}</h3>
        <div className="article-meta">
          <span>{article.date}</span>
        </div>
      </div>
    </div>);

}

// ---------- Subscribe strip ----------
function SubscribeStrip() {
  const [email, setEmail] = React.useState("");
  const [sent, setSent] = React.useState(false);
  return (
    <div style={{
      background: "var(--paper)", border: "1px solid var(--hairline)",
      borderRadius: 22, padding: 40,
      display: "grid", gridTemplateColumns: "1.2fr auto", gap: 32, alignItems: "center"
    }}>
      <div>
        <Eyebrow>Subscribe</Eyebrow>
        <h3 style={{ margin: "10px 0 6px", fontSize: 24, fontWeight: 600, letterSpacing: "-0.015em" }}>One email a week?

        </h3>
        <p style={{ margin: 0, color: "#5C6172", fontSize: 15, lineHeight: 1.5, maxWidth: 560 }}>
          A short Monday-morning round-up of what's worth your attention in AI this week, written for Australian SMB owners.
        </p>
      </div>
      <form
        onSubmit={(e) => {e.preventDefault();if (email) setSent(true);}}
        style={{ display: "flex", gap: 8, alignItems: "center" }}>

        {sent ?
        <div style={{
          display: "flex", alignItems: "center", gap: 8, padding: "12px 18px",
          background: "#fff", border: "1px solid var(--hairline)", borderRadius: 999, color: "var(--ink)"
        }}>
            <Icon name="check-circle-2" size={16} color="var(--ia-success)" />
            Subscribed, confirmation in your inbox.
          </div> :

        <>
            <input
            type="email"
            required
            value={email}
            placeholder="you@yourbusiness.com.au"
            onChange={(e) => setEmail(e.target.value)}
            style={{
              fontFamily: "inherit", fontSize: 14, color: "var(--ink)",
              background: "#fff", border: "1px solid var(--hairline)",
              borderRadius: 999, padding: "12px 18px", outline: 0,
              minWidth: 260
            }} />

            <Button type="submit" variant="primary">Subscribe <Icon name="arrow-right" size={14} className="arrow" /></Button>
          </>
        }
      </form>
    </div>);

}

window.ResourcesScreen = ResourcesScreen;
// ---------- Article reader ----------
function PostScreen({ go, t, slug }) {
  const article = ARTICLES.find((a) => a.slug === slug);
  const body = (window.POST_BODIES || {})[slug];
  React.useEffect(() => { window.scrollTo(0, 0); }, [slug]);

  if (!article) {
    return (
      <div data-screen-label="Article">
        <section className="section section--paper" style={{ paddingTop: 120, paddingBottom: 120 }}>
          <div className="container">
            <p className="lede">That article isn't here.</p>
            <div style={{ marginTop: 20 }}>
              <Button variant="primary" onClick={() => go("resources")}>Back to the blog</Button>
            </div>
          </div>
        </section>
      </div>);
  }

  const cat = RES_CATEGORIES.find((c) => c.key === article.cat);
  const more = ARTICLES.filter((a) => a.slug !== slug).slice(0, 3);

  return (
    <div data-screen-label={"Article \u00b7 " + article.title}>
      <section className="hero dot-grid acc-hero">
        <div className="container">
          <button className="linkout" onClick={() => go("resources")}>
            <Icon name="arrow-left" size={14} /> All articles
          </button>
          <div style={{ marginTop: 20, maxWidth: 820 }}>
            <span className="cat-chip">{cat.label}</span>
            <h1 className="h-display" style={{ marginTop: 16, fontSize: 46, lineHeight: 1.12 }}>{article.title}</h1>
            <div className="post-meta">
              <span>{(body && body.author) || "Intelligence Assist"}</span>
              <span className="post-meta-dot" />
              <span>{article.date}</span>
              {body && body.read && <><span className="post-meta-dot" /><span>{body.read} min read</span></>}
            </div>
          </div>
        </div>
      </section>

      <section className="section section--white" style={{ paddingTop: 40, paddingBottom: 56 }}>
        <div className="container">
          {article.img && <div className="post-hero-img"><img src={article.img} alt="" /></div>}
          <article className="post-body">
            {body ?
              body.blocks.map((b, i) => <PostBlock key={i} b={b} />) :
              <p>This article hasn't been migrated yet.</p>}
          </article>
        </div>
      </section>

      <section className="section section--paper" style={{ paddingTop: 8, paddingBottom: 56 }}>
        <div className="container">
          <div className="section-head"><h2 className="h-section" style={{ fontSize: 26 }}>More from the blog</h2></div>
          <div className="grid grid--3" style={{ gap: 20, marginTop: 20 }}>
            {more.map((a) => <ArticleCard key={a.slug} article={a} go={go} />)}
          </div>
        </div>
      </section>

      <section className="section section--paper tbx-closer" style={{ paddingTop: 8, paddingBottom: 88 }}>
        <div className="container">
          <div className="hww-closer">
            <p className="hww-closer-t">
              New writing lands here regularly. <em>If you'd rather talk it through than read about it,
              the first conversation is a good place to start.</em>
            </p>
            <Button variant="primary" size="lg" onClick={() => go("contact")}>
              Talk to us <Icon name="arrow-right" size={16} className="arrow" />
            </Button>
          </div>
        </div>
      </section>
    </div>);
}

function PostBlock({ b }) {
  if (b.t === "h3") return <h2 className="post-h">{b.x}</h2>;
  if (b.t === "ul") return <ul className="post-list">{b.x.map((li, i) => <li key={i} dangerouslySetInnerHTML={{ __html: li }} />)}</ul>;
  if (b.t === "ol") return <ol className="post-list post-list--num">{b.x.map((li, i) => <li key={i} dangerouslySetInnerHTML={{ __html: li }} />)}</ol>;
  if (b.t === "note") return <div className="post-note" dangerouslySetInnerHTML={{ __html: b.x }} />;
  if (b.t === "table") return (
    <div className="post-table-wrap">
      <table className="post-table">
        <thead><tr>{b.head.map((h, i) => <th key={i}>{h}</th>)}</tr></thead>
        <tbody>{b.rows.map((row, i) => <tr key={i}>{row.map((cc, j) => <td key={j}>{cc}</td>)}</tr>)}</tbody>
      </table>
    </div>);
  return <p dangerouslySetInnerHTML={{ __html: b.x }} />;
}