// pages.jsx — pagina's bereikbaar via het hamburgermenu.

const { useState: useState_pg } = React;

// ── Page header ──────────────────────────────────────────────────────────────
function PageHeader({ eyebrow, title, lead }) {
  return (
    <header className="page-head">
      <div className="container">
        <div className="mono page-eyebrow">— {eyebrow}</div>
        <h1 className="page-title">{title}</h1>
        {lead && <p className="page-lead">{lead}</p>}
      </div>
    </header>
  );
}

// ── Biografie ────────────────────────────────────────────────────────────────
function BiografiePage() {
  return (
    <article data-screen-label="Biografie">
      <PageHeader
        eyebrow="Biografie"
        title="Over Gerard Legerstee"
      />
      <div className="container page-body">
        <div className="bio-grid">
          <div className="bio-photo">
            <img src="assets/bio-gerard-2024.jpg" alt="Gerard Legerstee" />
          </div>
          <div className="bio-text">
            {AUTHOR.langeBio.map((p, i) => <p key={i}>{p}</p>)}
          </div>
        </div>
      </div>
    </article>
  );
}

// ── Interviews ───────────────────────────────────────────────────────────────
function InterviewsPage() {
  const [openIv, setOpenIv] = useState_pg(null);

  return (
    <article data-screen-label="Interviews">
      <PageHeader
        eyebrow="Interviews"
        title="In gesprek met de auteur"
        lead="Gepubliceerde interviews en artikelen in landelijke en lokale media rondom de boeken van Gerard Legerstee."
      />
      <div className="container page-body">
        <div className="interviews-list">
          {INTERVIEWS.map((iv, i) => (
            <article key={i} className="interview-item">
              <div className="interview-meta-col">
                <div className="interview-meta mono">
                  <span>{iv.datum}</span>
                  <span className="dot">·</span>
                  <span>{iv.type}</span>
                </div>
                <div className="interview-bron">{iv.bron}</div>
                {iv.auteur && <div className="mono interview-auteur">door {iv.auteur}</div>}
                <div className="mono interview-boek">Over {iv.boek}</div>
              </div>
              <div className="interview-body-col">
                <h3 className="interview-titel">{iv.titel}</h3>
                {iv.foto && (
                  <img src={iv.foto} alt={`Foto ${iv.titel}`} className="interview-foto" />
                )}
                <p className="interview-body">{iv.body}</p>
                {iv.quote && (
                  <blockquote className="interview-quote">
                    "{iv.quote}"
                  </blockquote>
                )}
                {iv.artikelId && (
                  <button className="link-arrow" onClick={()=>setOpenIv(iv)}>
                    Lees het hele artikel
                    <svg width="12" height="12" viewBox="0 0 14 14" fill="none"><path d="M3 7h8M7 3l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  </button>
                )}
                {iv.artikelScan && (
                  <button className="link-arrow" onClick={()=>setOpenIv(iv)}>
                    Bekijk de originele scan
                    <svg width="12" height="12" viewBox="0 0 14 14" fill="none"><path d="M3 7h8M7 3l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  </button>
                )}
                {iv.url && (iv.url.startsWith("http")) && (
                  <a href={iv.url} target="_blank" rel="noopener noreferrer" className="link-arrow">
                    Lees op {iv.bron} ↗
                  </a>
                )}
              </div>
            </article>
          ))}
        </div>
      </div>

      {openIv && <ArtikelModal iv={openIv} onClose={()=>setOpenIv(null)} />}
    </article>
  );
}

function ArtikelModal({ iv, onClose }) {
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      window.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [onClose]);

  const html = iv.artikelId && window.ARTICLES ? window.ARTICLES[iv.artikelId] : null;

  return (
    <div className="modal-bg" onClick={onClose}>
      <div className="modal artikel-modal" onClick={e=>e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label="Sluiten">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M5 5l10 10M15 5L5 15" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
        </button>
        <div className="artikel-modal-inner">
          {iv.artikelScan ? (
            <>
              <div className="mono artikel-eyebrow">{iv.bron} · {iv.datum}</div>
              <h2 className="artikel-h">{iv.titel}</h2>
              <p className="artikel-sub mono">Door {iv.auteur} · Over {iv.boek}</p>
              <img src={iv.artikelScan} alt={`Krantenscan van ${iv.titel}`} className="artikel-scan" />
            </>
          ) : html ? (
            <div className="artikel-html" dangerouslySetInnerHTML={{__html: html}} />
          ) : (
            <p>Artikel niet beschikbaar.</p>
          )}
        </div>
      </div>
    </div>
  );
}

// ── Vragen aan auteur ────────────────────────────────────────────────────────
function VragenPage() {
  const [open, setOpen] = useState_pg(-1);
  return (
    <article data-screen-label="Vragen aan auteur">
      <PageHeader
        eyebrow="Vragen aan auteur"
        title="Vragen aan de auteur"
        lead="Antwoorden op de meest gestelde vragen over het schrijven, de boeken en het werk van Gerard Legerstee. Klik op een vraag om het antwoord te lezen."
      />
      <div className="container page-body">
        <div className="faq-list big">
          {FAQ.map((f, i) => (
            <div key={i} className={`faq-item ${open===i?"is-open":""}`}>
              <button className="faq-q" onClick={()=>setOpen(open===i?-1:i)}>
                <span className="faq-num mono">{String(i+1).padStart(2,"0")}</span>
                <span className="faq-q-text">{f.v}</span>
                <span className="faq-icon">{open===i?"–":"+"}</span>
              </button>
              {open===i && (
                <div className="faq-a">
                  {f.a.split("\n").map((line, li) => <p key={li}>{line}</p>)}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </article>
  );
}

// ── Agenda ───────────────────────────────────────────────────────────────────
function AgendaPage() {
  // Datum-gesorteerde agendapunten (dichtstbij eerst)
  const items = [
    {
      datum: "1 juni 2026",
      titel: "Verwachte datum sturen manuscript Pil des doods naar uitgever Elikser",
    },
    {
      datum: "24 juni 2026",
      titel: "Themabijeenkomst uitgever Elikser in Utrecht",
    },
    {
      datum: "1 augustus 2026",
      titel: "Verwachte datum publicatie Pil des doods (persbericht, verzending recensie-exemplaren)",
    },
  ];

  // Format datum -> { dag, restant }
  const formatDate = (s) => {
    const parts = s.split(" ");
    return { dag: parts[0], rest: parts.slice(1).join(" ") };
  };

  return (
    <article data-screen-label="Agenda">
      <PageHeader
        eyebrow="Agenda"
        title="Aankomende activiteiten"
      />
      <div className="container page-body">
        <div className="agenda-list-big">
          {items.map((a, i) => {
            const d = formatDate(a.datum);
            return (
              <article key={i} className="agenda-row">
                <div className="agenda-row-date">
                  <div className="agenda-day-big">{d.dag}</div>
                  <div className="mono">{d.rest}</div>
                </div>
                <div className="agenda-row-body">
                  <h3>{a.titel}</h3>
                </div>
              </article>
            );
          })}
        </div>
      </div>
    </article>
  );
}

// ── Contact ──────────────────────────────────────────────────────────────────
function ContactPage() {
  const [form, setForm] = useState_pg({ naam: "", email: "", onderwerp: "Algemeen", bericht: "" });
  const [sent, setSent] = useState_pg(false);
  const [persOpen, setPersOpen] = useState_pg(null);

  const submit = (e) => {
    e.preventDefault();
    if (!form.naam || !form.email || !form.bericht) return;
    setSent(true);
  };

  return (
    <article data-screen-label="Contact">
      <PageHeader
        eyebrow="Contact"
        title="Schrijf de auteur"
        lead="Voor lezersvragen, leesclub-afspraken, pers- en interviewverzoeken — of gewoon een korte reactie op een boek."
      />
      <div className="container page-body">
        <div className="contact-grid">
          <form className="contact-form" onSubmit={submit}>
            {sent ? (
              <div className="contact-sent">
                <div className="mono">Bericht ontvangen</div>
                <h3>Bedankt, {form.naam.split(" ")[0]}.</h3>
                <p>Je bericht is verstuurd. De auteur (of zijn uitgever) reageert doorgaans binnen een week.</p>
                <button type="button" className="btn btn-ghost" onClick={()=>{setSent(false); setForm({naam:"",email:"",onderwerp:"Algemeen",bericht:""});}}>Nieuw bericht</button>
              </div>
            ) : (
              <>
                <Field label="Naam">
                  <input type="text" value={form.naam} onChange={e=>setForm({...form, naam: e.target.value})} placeholder="Voor- en achternaam" />
                </Field>
                <Field label="E-mail">
                  <input type="email" value={form.email} onChange={e=>setForm({...form, email: e.target.value})} placeholder="je@email.nl" />
                </Field>
                <Field label="Onderwerp">
                  <div className="seg">
                    {["Algemeen","Leesclub","Pers","Lezing"].map(o => (
                      <button key={o} type="button"
                        className={`seg-btn ${form.onderwerp===o?"is-active":""}`}
                        onClick={()=>setForm({...form, onderwerp: o})}>
                        {o}
                      </button>
                    ))}
                  </div>
                </Field>
                <Field label="Bericht">
                  <textarea rows={5} value={form.bericht} onChange={e=>setForm({...form, bericht: e.target.value})} placeholder="Waar gaat het over?" />
                </Field>
                <button className="btn btn-primary" type="submit">Versturen
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7h8M7 3l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </button>
              </>
            )}
          </form>

          <aside className="contact-aside">
            <div>
              <div className="mono col-label">Uitgever</div>
              <div className="contact-block">
                <div className="contact-strong">Uitgeverij Elikser</div>
                <div>Leeuwarden · NL</div>
                <a href="https://www.elikser.nl" target="_blank" rel="noopener noreferrer">elikser.nl ↗</a>
              </div>
            </div>
            <div>
              <div className="mono col-label">Volg de auteur</div>
              <div className="socials">
                {SOCIALS.map(s => {
                  const isMail = s.url.startsWith("mailto:");
                  return (
                    <a key={s.naam} href={s.url} className="social"
                       target={isMail ? undefined : "_blank"}
                       rel={isMail ? undefined : "noopener noreferrer"}
                       referrerPolicy="no-referrer">
                      <span>{s.naam}</span>
                      <span className="mono">{s.handle} ↗</span>
                    </a>
                  );
                })}
              </div>
            </div>
            <div>
              <div className="mono col-label">Perscontact</div>
              <div className="contact-block">
                <div className="contact-strong">{PERS.contact.naam}</div>
                <a href={`mailto:${PERS.contact.email}`}>{PERS.contact.email}</a>
                <div>{PERS.contact.telefoon}</div>
              </div>
            </div>
          </aside>
        </div>

        <div className="page-divider"><span className="mono">— Persmap</span></div>

        <p className="pers-intro">{PERS.intro}</p>
        <div className="pers-files">
          {PERS.bestanden.map((b, i) => (
            <button key={i} className="pers-file" onClick={()=>setPersOpen(b)}>
              <div className="pers-file-ico mono">{b.type}</div>
              <div className="pers-file-body">
                <div className="pers-file-title">{b.titel}</div>
                <div className="mono pers-file-meta">Bekijk</div>
              </div>
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                <path d="M6 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </button>
          ))}
        </div>
      </div>

      {persOpen && <PersFileModal item={persOpen} onClose={()=>setPersOpen(null)} />}
    </article>
  );
}

function PersFileModal({ item, onClose }) {
  const [pdfPages, setPdfPages] = useState_pg([]);
  const [loading, setLoading] = useState_pg(false);
  const [loadError, setLoadError] = useState_pg(false);

  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      window.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [onClose]);

  // For PDFs: render with pdf.js (loaded on-demand) directly as <img> data URLs.
  // This avoids iframe/embed which Chrome blocks in some preview contexts.
  React.useEffect(() => {
    if (item.kind !== "pdf") return;
    setLoading(true);
    setLoadError(false);
    setPdfPages([]);

    const loadPdfJs = () => new Promise((resolve, reject) => {
      if (window.pdfjsLib) return resolve(window.pdfjsLib);
      const s = document.createElement("script");
      s.src = "https://cdn.jsdelivr.net/npm/pdfjs-dist@3.11.174/build/pdf.min.js";
      s.onload = () => {
        window.pdfjsLib.GlobalWorkerOptions.workerSrc =
          "https://cdn.jsdelivr.net/npm/pdfjs-dist@3.11.174/build/pdf.worker.min.js";
        resolve(window.pdfjsLib);
      };
      s.onerror = reject;
      document.head.appendChild(s);
    });

    (async () => {
      try {
        const pdfjs = await loadPdfJs();
        const res = await fetch(item.bestand);
        const buf = await res.arrayBuffer();
        const pdf = await pdfjs.getDocument({ data: buf }).promise;
        const pages = [];
        for (let n = 1; n <= pdf.numPages; n++) {
          const page = await pdf.getPage(n);
          const viewport = page.getViewport({ scale: 1.8 });
          const canvas = document.createElement("canvas");
          canvas.width = viewport.width;
          canvas.height = viewport.height;
          const ctx = canvas.getContext("2d");
          await page.render({ canvasContext: ctx, viewport }).promise;
          pages.push(canvas.toDataURL("image/png"));
        }
        setPdfPages(pages);
        setLoading(false);
      } catch (err) {
        console.error("PDF render failed:", err);
        setLoadError(true);
        setLoading(false);
      }
    })();
  }, [item]);

  const html = item.artikelId && window.ARTICLES ? window.ARTICLES[item.artikelId] : null;

  return (
    <div className="modal-bg" onClick={onClose}>
      <div className={`modal artikel-modal ${item.kind==="pdf"?"pdf-modal":""}`} onClick={e=>e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label="Sluiten">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M5 5l10 10M15 5L5 15" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
        </button>
        <div className="artikel-modal-inner">
          <div className="mono artikel-eyebrow">Persmap · {item.type}</div>
          <h2 className="artikel-h">{item.titel}</h2>
          {item.kind === "image" && (
            <img src={item.bestand} alt={item.titel} className="persfile-image" />
          )}
          {item.kind === "pdf" && (
            <>
              {loading && <div className="persfile-loading mono">PDF wordt geladen…</div>}
              {loadError && <div className="persfile-loading mono">PDF kon niet worden geladen.</div>}
              <div className="persfile-pdf-pages">
                {pdfPages.map((src, i) => (
                  <img key={i} src={src} alt={`Pagina ${i+1}`} className="persfile-pdf-page" />
                ))}
              </div>
            </>
          )}
          {item.kind === "article" && html && (
            <div className="artikel-html" dangerouslySetInnerHTML={{__html: html}} />
          )}
        </div>
      </div>
    </div>
  );
}

// ── Single book page (vanuit homepage-klik) ──────────────────────────────────
function SingleBookPage({ book, onBackHome, onSeeAll }) {
  const [trailerOpen, setTrailerOpen] = useState_pg(false);
  return (
    <article data-screen-label={`Boek · ${book.titel}`}>
      <div className="container single-book">
        <div className="single-book-back">
          <button className="link-arrow link-arrow-muted" onClick={onBackHome}>
            <svg width="12" height="12" viewBox="0 0 14 14" fill="none">
              <path d="M11 7H3M7 3L3 7l4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
            Terug naar home
          </button>
        </div>

        <div className="single-book-grid">
          <div className="single-book-cover">
            <BookCover book={book} size="lg" />
            <div className="mono single-book-isbn">ISBN {book.isbn}</div>
          </div>

          <div className="single-book-body">
            <div className="mono single-book-meta">
              <span>{book.jaar}</span>
              <span className="dot">·</span>
              <span>{book.genre}</span>
              {book.paginas && <><span className="dot">·</span><span>{book.paginas} p.</span></>}
            </div>
            <h1 className="single-book-title">{book.titel}</h1>
            <div className="single-book-badges">
              {book.isLatest && <span className="badge badge-accent">Nieuwste</span>}
              {book.isUpcoming && <span className="badge badge-accent">Aankomend</span>}
              {book.isFirstBook && <span className="badge">Debuut</span>}
              {book.isFirstThriller && <span className="badge">Eerste thriller</span>}
              {book.isDebut && <span className="badge">Eerste Elikser-thriller</span>}
              {book.gratis && <span className="badge">Gratis · EPUB</span>}
            </div>

            <div className="single-book-flap">
              {book.flap.split("\n\n").map((para, i) => (
                <p key={i}>{para}</p>
              ))}
            </div>

            {book.quote && (
              <blockquote className="single-book-quote">
                <span className="quote-mark">"</span>
                <p>{book.quote}</p>
                <cite className="mono">— {book.quoteBron}</cite>
              </blockquote>
            )}

            <div className="single-book-cta">
              {book.elikserUrl && (
                <a className="btn btn-primary" href={book.elikserUrl} target="_blank" rel="noopener noreferrer">
                  Koop paperback
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                    <path d="M3 7h8M7 3l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </a>
              )}
              {book.elikserEpubUrl && (
                <a className="btn btn-ghost" href={book.elikserEpubUrl} target="_blank" rel="noopener noreferrer">
                  Koop epub
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                    <path d="M3 7h8M7 3l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </a>
              )}
              {book.elikserUrl && (
                <a className="btn btn-ghost"
                   href="https://www.bibliotheek.nl/catalogus.catalogus.html?q=Gerard%20Legerstee"
                   target="_blank" rel="noopener noreferrer">
                  Leen via bibliotheek
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                    <path d="M3 7h8M7 3l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </a>
              )}
              {book.trailerUrl && (
                <button className="btn btn-ghost btn-trailer" onClick={()=>setTrailerOpen(true)}>
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
                    <path d="M4 2.5v9l7-4.5-7-4.5z" fill="currentColor"/>
                  </svg>
                  Bekijk de trailer
                </button>
              )}
              {book.smashwordsUrl && (
                <a className="btn btn-primary" href={book.smashwordsUrl} target="_blank" rel="noopener noreferrer">
                  Gratis downloaden (epub)
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                    <path d="M3 7h8M7 3l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </a>
              )}
            </div>

            <div className="single-book-more">
              <button className="link-arrow" onClick={onSeeAll}>
                Bekijk alle boeken
                <svg width="12" height="12" viewBox="0 0 14 14" fill="none">
                  <path d="M3 7h8M7 3l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </button>
            </div>
          </div>
        </div>
      </div>

      {trailerOpen && book.trailerUrl && (
        <TrailerModal book={book} onClose={()=>setTrailerOpen(false)} />
      )}
    </article>
  );
}

Object.assign(window, { BiografiePage, InterviewsPage, VragenPage, AgendaPage, ContactPage, SingleBookPage, PageHeader });