// pages.jsx — Header, Footer และหน้าเพจทั้งหมด
const { useState: useStateP, useEffect: useEffectP } = React;

// ---------- Header ----------
function Header({ route, go, t }) {
  const [open, setOpen] = useStateP(false);
  const nav = [
    { id: "home", label: "หน้าแรก" },
    { id: "articles", label: "บทความ" },
    { id: "ebooks", label: "อีบุ๊ก" },
    { id: "about", label: "เกี่ยวกับ" },
  ];
  const active = (id) =>
    id === route.page ||
    (id === "articles" && route.page === "article") ||
    (id === "ebooks" && route.page === "ebook");
  return (
    <header className="site-header">
      <div className="container header-inner">
        <Logo onClick={() => go({ page: "home" })} />
        <nav className="header-nav">
          {nav.map((n) => (
            <button key={n.id} className={`navlink${active(n.id) ? " is-active" : ""}`}
              onClick={() => go({ page: n.id })}>
              {n.label}
            </button>
          ))}
        </nav>
        <div className="header-cta">
          <Button size="sm" icon="book" onClick={() => go({ page: "ebooks" })}>ดูหนังสือ</Button>
        </div>
        <button className="header-burger" onClick={() => setOpen(!open)} aria-label="เมนู">
          <Icon name="menu" />
        </button>
      </div>
      {open && (
        <div className="header-mobile">
          {nav.map((n) => (
            <button key={n.id} className={`navlink${active(n.id) ? " is-active" : ""}`}
              onClick={() => { go({ page: n.id }); setOpen(false); }}>
              {n.label}
            </button>
          ))}
        </div>
      )}
    </header>
  );
}

// ---------- Footer ----------
function Footer({ go }) {
  return (
    <footer className="site-footer">
      <div className="container footer-inner">
        <div className="footer-brand">
          <Logo onClick={() => go({ page: "home" })} />
          <p className="footer-tag">บทความและคู่มือสาย AI &amp; IT ที่อ่านเข้าใจง่าย เริ่มต้นได้จริง</p>
        </div>
        <div className="footer-cols">
          <div className="footer-col">
            <h4>เนื้อหา</h4>
            <button onClick={() => go({ page: "articles" })}>บทความทั้งหมด</button>
            <button onClick={() => go({ page: "ebooks" })}>อีบุ๊ก</button>
            <button onClick={() => go({ page: "about" })}>เกี่ยวกับผู้จัดทำ</button>
          </div>
          <div className="footer-col">
            <h4>ติดตาม</h4>
            <a href="https://www.facebook.com/profile.php?id=61576826848889" target="_blank" rel="noreferrer">Facebook</a>
          </div>
        </div>
      </div>
      <div className="container footer-base">
        <span>© 2026 Pulse · AI &amp; IT</span>
        <span>สร้างเพื่อคนที่อยากเริ่มต้นสาย AI อย่างเป็นระบบ</span>
      </div>
    </footer>
  );
}

// ---------- Hero (3 เลย์เอาต์) ----------
function Hero({ go, t, articles, ebooks }) {
  const book = (ebooks || [])[0];
  const featured = (articles || []).filter((a) => a.featured)[0] || (articles || [])[0];

  const cta = (
    <div className="hero-cta">
      <Button size="lg" iconRight="arrow" onClick={() => go({ page: "articles" })}>อ่านบทความ</Button>
      <Button size="lg" variant="ghost" icon="book" onClick={() => go({ page: "ebooks" })}>ดูอีบุ๊ก</Button>
    </div>
  );
  const eyebrow = (
    <span className="hero-eyebrow"><Icon name="spark" size={15} /> ความรู้ AI &amp; IT ฉบับเข้าใจง่าย</span>
  );

  if (t.heroLayout === "split") {
    return (
      <section className="hero hero-split">
        <div className="container hero-split-grid">
          <div className="hero-split-text">
            {eyebrow}
            <h1 className="hero-title">เข้าใจ AI<br />อย่างเป็นระบบ<br /><span className="hero-accent">ลงมือทำได้จริง</span></h1>
            <p className="hero-lead">รวมบทความและคู่มือสาย AI Engineering ที่พาคุณจากผู้ใช้ AI ไปสู่คนที่สร้างระบบ AI ได้เอง โดยไม่จมกับทฤษฎี</p>
            {cta}
          </div>
          <div className="hero-split-visual">
            {book && (
              <div className="hero-book-stage" onClick={() => go({ page: "ebook", id: book.id })} role="button">
                <BookCover book={book} size="lg" />
                <div className="hero-book-badge">
                  <span className="hero-book-badge-label">หนังสือเล่มแรก</span>
                  <span className="hero-book-badge-price">{book.price} {book.currency}</span>
                </div>
              </div>
            )}
          </div>
        </div>
      </section>
    );
  }

  if (t.heroLayout === "editorial") {
    return (
      <section className="hero hero-editorial">
        <div className="container hero-edi-grid">
          <div className="hero-edi-left">
            {eyebrow}
            <h1 className="hero-title hero-title-xl">จากผู้ใช้ AI<br />สู่คนที่<span className="hero-accent">สร้างระบบ AI</span></h1>
          </div>
          <div className="hero-edi-right">
            <p className="hero-lead">บทความและคู่มือเชิงลึกสำหรับนักพัฒนา ผู้บริหาร และนักศึกษาที่อยากเข้าใจ AI อย่างถ่องแท้ — เขียนให้อ่านง่าย เริ่มต้นได้จริง</p>
            {cta}
            <button className="hero-edi-feature" onClick={() => go({ page: "article", id: featured.id })}>
              <span className="hero-edi-feature-kicker">บทความเด่น</span>
              <span className="hero-edi-feature-title">{featured.title}</span>
              <span className="hero-edi-feature-go">อ่านต่อ <Icon name="arrow" size={15} /></span>
            </button>
          </div>
        </div>
      </section>
    );
  }

  // centered (default)
  return (
    <section className="hero hero-centered">
      <div className="container hero-centered-inner">
        {eyebrow}
        <h1 className="hero-title hero-title-center">เข้าใจ AI &amp; IT อย่างเป็นระบบ<br /><span className="hero-accent">แล้วลงมือสร้างได้จริง</span></h1>
        <p className="hero-lead hero-lead-center">รวมบทความและคู่มือสาย AI Engineering ที่พาคุณจาก “ใช้ AI เป็น” ไปสู่ “สร้างระบบ AI ได้เอง” เขียนให้อ่านง่าย ไม่จมกับทฤษฎี</p>
        {cta}
        <div className="hero-chips">
          <span className="hero-chip"><Icon name="layers" size={16} /> RAG &amp; Embeddings</span>
          <span className="hero-chip"><Icon name="spark" size={16} /> Prompt Engineering</span>
          <span className="hero-chip"><Icon name="book" size={16} /> Local LLM</span>
          <span className="hero-chip"><Icon name="check" size={16} /> Evals</span>
        </div>
      </div>
    </section>
  );
}

// ---------- แถบหนังสือแนะนำบน Landing ----------
function FeaturedBookBand({ go, ebooks }) {
  const book = (ebooks || [])[0];
  if (!book) return null;
  return (
    <section className="bookband">
      <div className="container bookband-inner">
        <div className="bookband-cover" onClick={() => go({ page: "ebook", id: book.id })} role="button">
          <BookCover book={book} size="md" />
        </div>
        <div className="bookband-text">
          <Pill tone="warm">หนังสือแนะนำ</Pill>
          <h2 className="bookband-title">{book.title}</h2>
          <p className="bookband-desc">{book.shortDesc}</p>
          <div className="bookband-row">
            <span className="bookband-price">{book.price} <small>{book.currency}</small></span>
            <Button iconRight="arrow" onClick={() => go({ page: "ebook", id: book.id })}>ดูรายละเอียด</Button>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Section header ----------
function SectionHead({ kicker, title, action, onAction }) {
  return (
    <div className="sechead">
      <div>
        {kicker && <span className="sechead-kicker">{kicker}</span>}
        <h2 className="sechead-title">{title}</h2>
      </div>
      {action && <button className="sechead-action" onClick={onAction}>{action} <Icon name="arrow" size={16} /></button>}
    </div>
  );
}

// ---------- About ----------
function AboutSection({ compact }) {
  return (
    <section className={`about${compact ? " about-compact" : ""}`}>
      <div className="container about-inner">
        <div className="about-portrait">
          <img className="about-photo" src={AUTHOR.image} alt={AUTHOR.name} loading="lazy" />
        </div>
        <div className="about-text">
          <span className="sechead-kicker">เกี่ยวกับผู้จัดทำ</span>
          <h2 className="about-name">{AUTHOR.name}</h2>
          <p className="about-role">{AUTHOR.role}</p>
          <p className="about-bio">
            {AUTHOR.bio.map((line, i) => (
              <React.Fragment key={i}>{i > 0 && <br />}{line}</React.Fragment>
            ))}
          </p>
        </div>
      </div>
    </section>
  );
}

// ---------- หน้า Landing ----------
function Landing({ go, t, articles, ebooks }) {
  const all = articles || [];
  const featured = all.filter((a) => a.featured);
  const latest = all.slice(0, 3);
  return (
    <main>
      <Hero go={go} t={t} articles={all} ebooks={ebooks} />
      <section className="section">
        <div className="container">
          <SectionHead kicker="คัดมาแล้ว" title="บทความเด่น"
            action="ดูทั้งหมด" onAction={() => go({ page: "articles" })} />
          <div className="grid-articles">
            {featured.map((a) => <ArticleCard key={a.id} article={a} onOpen={(x) => go({ page: "article", id: x.id })} />)}
            {latest.filter((a) => !a.featured).slice(0, 1).map((a) => (
              <ArticleCard key={a.id} article={a} onOpen={(x) => go({ page: "article", id: x.id })} />
            ))}
          </div>
        </div>
      </section>
      <FeaturedBookBand go={go} ebooks={ebooks} />
      <AboutSection />
    </main>
  );
}

// ---------- หน้ารายการบทความ ----------
function ArticlesPage({ go, articles }) {
  const all = articles || [];
  const cats = orderedCategories(all); // ลำดับหมวดร่วม (ดู ui.jsx)
  const [cat, setCat] = useStateP("ทั้งหมด");
  const list = cat === "ทั้งหมด" ? all : all.filter((a) => a.category === cat);
  return (
    <main className="page-pad">
      <div className="container">
        <div className="pagehead">
          <span className="sechead-kicker">บทความ</span>
          <h1 className="pagehead-title">คลังความรู้ AI &amp; IT</h1>
          <p className="pagehead-lead">อ่านบทความเชิงลึกที่เขียนให้เข้าใจง่าย ตั้งแต่พื้นฐานจนถึงการนำไปใช้จริง</p>
        </div>
        <div className="filterbar">
          {cats.map((c) => (
            <button key={c} className={`filterchip${cat === c ? " is-active" : ""}`} onClick={() => setCat(c)}>{c}</button>
          ))}
        </div>
        <div className="article-list">
          {list.map((a) => <ArticleCard key={a.id} article={a} layout="row" onOpen={(x) => go({ page: "article", id: x.id })} />)}
        </div>
      </div>
    </main>
  );
}

// ---------- อ่านบทความเต็ม ----------
function ArticleDetail({ id, go, articles }) {
  const all = articles || [];
  const a = all.find((x) => x.id === id) || all[0];
  useEffectP(() => { window.scrollTo(0, 0); }, [id]);
  if (!a) return (
    <main className="page-pad"><div className="container"><div className="pagehead">
      <p className="pagehead-lead">ไม่พบบทความ</p>
    </div></div></main>
  );
  const more = all.filter((x) => x.id !== a.id).slice(0, 2);
  return (
    <main className="page-pad">
      <article className="reader">
        <button className="backlink" onClick={() => go({ page: "articles" })}><Icon name="arrowLeft" size={16} /> กลับไปบทความ</button>
        <div className="reader-meta">
          <Pill tone="accent">{a.category}</Pill>
          <span className="acard-dot">·</span>
          <span>{a.date}</span>
          <span className="acard-dot">·</span>
          <span className="acard-time"><Icon name="clock" size={14} /> {a.readTime}</span>
        </div>
        <h1 className="reader-title">{a.title}</h1>
        <div className="reader-tags">{(a.tags || []).map((tg) => <span key={tg} className="reader-tag">#{tg}</span>)}</div>
        <div className="reader-hero">
          {a.image
            ? <img className="reader-hero-img" src={a.image} alt={a.title} loading="lazy" />
            : <ImgSlot label={`ภาพประกอบ: ${a.category}`} ratio="16 / 7" round={18} />}
        </div>
        <div className="reader-body" dangerouslySetInnerHTML={{ __html: a.bodyHtml || "" }} />
        <div className="reader-author">
          <div className="reader-author-pic"><img src={AUTHOR.image} alt={AUTHOR.name} loading="lazy" /></div>
          <div>
            <strong>{AUTHOR.name}</strong>
            <span>{AUTHOR.role}</span>
          </div>
        </div>
      </article>
      <section className="section section-tight">
        <div className="container">
          <SectionHead title="อ่านต่อ" />
          <div className="grid-articles grid-2">
            {more.map((m) => <ArticleCard key={m.id} article={m} onOpen={(x) => go({ page: "article", id: x.id })} />)}
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { Header, Footer, Hero, FeaturedBookBand, SectionHead, AboutSection, Landing, ArticlesPage, ArticleDetail });