// Dossier layout — case-file / investigative, monospace-heavy, redacted bars
function DossierLayout({ density, logo }) {
  window.__logo = logo;
  const books = window.BOOKS;
  const latest = books.find(b => b.isLatest);
  const mackay = books.filter(b => b.series === "Barry Mackay");
  const winters = books.filter(b => b.series === "Todd Winters");
  const [selectedBook, setSelectedBook] = useState(null);
  const pad = density === "compact" ? "ds-compact" : "ds-airy";

  return (
    <div className={"dossier " + pad}>
      <DsNav />
      <DsHero latest={latest} />
      <DsLatest latest={latest} onOpen={() => setSelectedBook(latest)} />
      <DsCatalog caseNum="A" title="CASE FILES — BARRY MACKAY" books={mackay} onOpen={setSelectedBook} />
      <DsCatalog caseNum="B" title="CASE FILES — TODD WINTERS" books={winters} onOpen={setSelectedBook} />
      <DsAbout />
      {/* <DsEvents /> */}
      <DsNewsletter />
      <DsFooter />
      {selectedBook && <BookModal book={selectedBook} onClose={() => setSelectedBook(null)} />}
    </div>
  );
}

function DsNav() {
  const [now, setNow] = useState(new Date());
  useEffect(() => {
    const t = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(t);
  }, []);
  const hhmm = now.toTimeString().slice(0, 8);
  return (
    <div className="ds-nav">
      <div className="ds-nav-top">
        <div className="ds-nav-brand">
          <window.Logo variant={window.__logo || "mono"} small />
          <span>· DOSSIER</span>
        </div>
        <div className="ds-nav-mono">
          <span>FILE // AUTHOR_RECORD</span>
          <span>CLASSIFICATION: PUBLIC</span>
          <span>{hhmm} UTC</span>
        </div>
      </div>
      <div className="ds-nav-bottom">
        <a href="#top">00 · COVER</a>
        <a href="#latest">01 · LATEST</a>
        <a href="#books">02 · ARCHIVE</a>
        <a href="#about">03 · SUBJECT</a>
        <a href="#newsletter" className="ds-nav-cta">04 · DISPATCH →</a>
      </div>
    </div>
  );
}

function DsHero({ latest }) {
  return (
    <section id="top" className="ds-hero">
      <div className="ds-hero-stamp">
        <svg viewBox="0 0 200 200" width="180" height="180">
          <circle cx="100" cy="100" r="90" fill="none" stroke="currentColor" strokeWidth="1.5"/>
          <circle cx="100" cy="100" r="78" fill="none" stroke="currentColor" strokeWidth="0.8"/>
          <defs>
            <path id="stamp-path" d="M 100,100 m -70,0 a 70,70 0 1,1 140,0 a 70,70 0 1,1 -140,0"/>
          </defs>
          <text fontFamily="'JetBrains Mono', monospace" fontSize="11" letterSpacing="4" fill="currentColor">
            <textPath href="#stamp-path" startOffset="0">· CASE PENDING · INVESTIGATIVE FICTION · SINCE 2020 ·</textPath>
          </text>
          <text x="100" y="95" textAnchor="middle" fontFamily="'Instrument Serif', serif" fontSize="20" fill="currentColor" fontStyle="italic">John G</text>
          <text x="100" y="118" textAnchor="middle" fontFamily="'Instrument Serif', serif" fontSize="20" fill="currentColor" fontStyle="italic">Lesley</text>
        </svg>
      </div>

      <div className="ds-hero-grid">
        <div className="ds-hero-label">
          <span className="ds-label-lg">SUBJECT: LESLEY, JOHN G.</span>
          <span>ALIAS: "The Author"</span>
          <span>KNOWN LOCATIONS: Scotland · Canada</span>
          <span>OCCUPATION: Thriller novelist (fmr. academic)</span>
          <span>OUTPUT: 08 novels · 02 series · ongoing</span>
        </div>

        <h1 className="ds-hero-title">
          <span className="ds-redact">Investigative</span>
          <span className="ds-hero-em">thrillers</span>
          <span>from a writer</span>
          <span>who <em>means it.</em></span>
        </h1>

        <div className="ds-hero-right">
          <div className="ds-file-tab">
            <span>EXHIBIT A</span>
            <span>↓</span>
          </div>
          <div className="ds-hero-cover-wrap">
            <Cover book={latest} className="ds-hero-cover" />
            <div className="ds-evidence-tag">
              <span className="ds-evidence-num">E-001</span>
              <span>ONE MISTAKE</span>
              <span>·</span>
              <span>2026</span>
            </div>
          </div>
          <div className="ds-hero-excerpt">
            <span className="ds-mono-small">// OPENING LINE</span>
            <p>"The electricity went out. The cell phones stopped working. Planes dropped from the sky."</p>
          </div>
        </div>
      </div>

      <div className="ds-hero-strip">
        <span>◉ REC</span>
        <span>·</span>
        <span>LAT 43.6532° N</span>
        <span>·</span>
        <span>LONG 79.3832° W</span>
        <span>·</span>
        <span>TORONTO</span>
        <span>·</span>
        <span>EIGHT VOLUMES ON RECORD</span>
        <span>·</span>
        <span>TWO SERIES ACTIVE</span>
        <span>·</span>
        <span>◉ REC</span>
        <span>·</span>
        <span>LAT 43.6532° N</span>
        <span>·</span>
        <span>LONG 79.3832° W</span>
        <span>·</span>
        <span>TORONTO</span>
        <span>·</span>
        <span>EIGHT VOLUMES ON RECORD</span>
        <span>·</span>
        <span>TWO SERIES ACTIVE</span>
      </div>
    </section>
  );
}

function DsLatest({ latest, onOpen }) {
  return (
    <section id="latest" className="ds-latest">
      <DsSectionHead kicker="LATEST EXHIBIT" title="Recently entered into evidence." />
      <div className="ds-latest-grid">
        <div className="ds-latest-cover-col">
          <div className="ds-corner-frame">
            <Cover book={latest} className="ds-latest-cover" />
            <div className="ds-stamp-red">
              <span>NEW</span>
              <span>2026</span>
            </div>
          </div>
          <div className="ds-buy-stack">
            <BuyButton label="Amazon" href={latest.amazon} primary />
            {latest.goodreads && <BuyButton label="Goodreads" href={latest.goodreads} />}
          </div>
        </div>
        <div className="ds-latest-body">
          <table className="ds-datasheet">
            <tbody>
              <tr><td>TITLE</td><td>{latest.title}</td></tr>
              <tr><td>SERIES</td><td>{latest.series}, Vol. {latest.num}</td></tr>
              <tr><td>YEAR</td><td>{latest.year}</td></tr>
              <tr><td>THEATER</td><td>{latest.setting}</td></tr>
              <tr><td>GENRE</td><td>Post-apocalyptic thriller</td></tr>
              <tr><td>STATUS</td><td><span className="ds-pulse" /> IN PRINT</td></tr>
            </tbody>
          </table>
          <p className="ds-latest-tagline">{latest.tagline}</p>
          <p className="ds-latest-blurb">{latest.blurb}</p>
          <div className="ds-pull">
            <span className="ds-pull-bars">│││</span>
            <span>{latest.pull}</span>
          </div>
          <button className="ds-buy-ghost" onClick={onOpen}>// OPEN FULL FILE</button>
        </div>
      </div>
    </section>
  );
}

function DsCatalog({ caseNum, title, books, onOpen }) {
  return (
    <section id="books" className="ds-catalog">
      <DsSectionHead kicker={`DOSSIER ${caseNum}`} title={title} />
      <div className="ds-archive">
        {books.map((b, i) => (
          <DsCard key={b.series + b.num} book={b} onOpen={() => onOpen(b)} idx={i} />
        ))}
      </div>
    </section>
  );
}

function DsCard({ book, onOpen, idx }) {
  const [open, setOpen] = useState(false);
  return (
    <article className={"ds-card" + (open ? " open" : "")} onClick={() => { setOpen(!open); }}>
      <header className="ds-card-head">
        <span className="ds-card-num">{book.series === "Todd Winters" ? "B" : "A"}-{String(book.num).padStart(3, "0")}</span>
        <span className={"ds-card-year" + (book.comingSoon ? " ds-card-coming" : "")}>{book.comingSoon ? "COMING SOON" : book.year}</span>
      </header>
      <div className="ds-card-main">
        <div className="ds-card-cover">
          <Cover book={book} className="ds-card-cover-img" />
        </div>
        <div className="ds-card-info">
          <h3>{book.title}</h3>
          <p className="ds-card-tagline">{book.tagline}</p>
          <div className="ds-card-meta">
            <span>{book.setting}</span>
          </div>
          {open && (
            <>
              <p className="ds-card-blurb">{book.blurb}</p>
              <button className="ds-card-open" onClick={e => { e.stopPropagation(); onOpen(); }}>OPEN FILE →</button>
            </>
          )}
        </div>
      </div>
      <footer className="ds-card-foot">
        <span className="ds-mono-small">{open ? "CLASSIFIED · EXPANDED" : "CLICK TO EXPAND"}</span>
        <span className={"ds-card-chev" + (open ? " open" : "")}>▾</span>
      </footer>
    </article>
  );
}

function DsSectionHead({ kicker, title }) {
  return (
    <div className="ds-section-head">
      <span className="ds-head-kicker">{kicker}</span>
      <h2>{title}</h2>
      <div className="ds-head-rule" />
    </div>
  );
}

function DsAbout() {
  return (
    <section id="about" className="ds-about">
      <DsSectionHead kicker="SUBJECT PROFILE" title="Known facts about the author." />
      <div className="ds-about-grid">
        <div className="ds-about-portrait">
          <div className="ds-portrait-frame">
            <img src="assets/author-portrait.jpg" alt="John G Lesley" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
            <div className="ds-portrait-corners"><i/><i/><i/><i/></div>
          </div>
          <table className="ds-datasheet ds-datasheet-sm">
            <tbody>
              <tr><td>BORN</td><td>Scotland</td></tr>
              <tr><td>LIVES</td><td>Canada</td></tr>
              <tr><td>PRIOR</td><td>Medical researcher</td></tr>
              <tr><td>DEBUT</td><td>2020</td></tr>
              <tr><td>VOLUMES</td><td>08</td></tr>
            </tbody>
          </table>
        </div>
        <div className="ds-about-body">
          <p className="ds-about-lede">
            Educated in an unforgiving school system in Scotland, John G Lesley was told he'd never get to university.
          </p>
          <p>
            He proved them wrong and then some. After over thirty years in Canadian academia — publishing extensively on medical research and winning numerous awards — he gets a chance to finally explore a different kind of writing.
          </p>
          <p>
            Join him as Barry Mackay comes face to face with some of the world's injustices.
          </p>
          <div className="ds-quote-block">
            <span className="ds-mono-small">// NOTED</span>
            <p>"He writes the way an investigator writes — looking for the detail everyone else missed."</p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* EVENTS SECTION — commented out, restore when ready
function DsEvents() {
  const events = [
    { date: "14.MAY.2026", time: "19:00", city: "TORONTO, ON", venue: "Ben McNally Books", detail: "One Mistake · launch reading & signing", status: "CONFIRMED" },
    { date: "02.JUN.2026", time: "18:30", city: "EDINBURGH, UK", venue: "Blackwell's South Bridge", detail: "In conversation with Ian Rankin", status: "CONFIRMED" },
    { date: "18.JUN.2026", time: "19:00", city: "GLASGOW, UK", venue: "Waterstones Argyle St.", detail: "Homecoming reading", status: "CONFIRMED" },
    { date: "09.SEP.2026", time: "TBD", city: "SHETLAND, UK", venue: "Lerwick Library", detail: "In Search of Souls · location tour", status: "PLANNING" },
    { date: "22.OCT.2026", time: "20:00", city: "NEW YORK, NY", venue: "The Mysterious Bookshop", detail: "Thriller Week panel", status: "PLANNING" }
  ];
  return (
    <section id="events" className="ds-events">
      <DsSectionHead num="05" kicker="CONFIRMED SIGHTINGS" title="Upcoming appearances." />
      <table className="ds-events-table">
        <thead>
          <tr><th>DATE</th><th>TIME</th><th>LOCATION</th><th>VENUE</th><th>BRIEF</th><th>STATUS</th></tr>
        </thead>
        <tbody>
          {events.map((e, i) => (
            <tr key={i}>
              <td className="ds-evt-date">{e.date}</td>
              <td className="ds-evt-time">{e.time}</td>
              <td className="ds-evt-city">{e.city}</td>
              <td>{e.venue}</td>
              <td>{e.detail}</td>
              <td><span className={"ds-evt-badge ds-evt-" + e.status.toLowerCase()}>{e.status}</span></td>
            </tr>
          ))}
        </tbody>
      </table>
    </section>
  );
}
END EVENTS SECTION */

function DsNewsletter() {
  const [email, setEmail] = useState("");
  const [state, setState] = useState("idle"); // idle | loading | done | error
  const [message, setMessage] = useState("");
  const submit = async (e) => {
    e.preventDefault();
    if (!email.includes("@")) return;
    setState("loading");
    setMessage("");
    try {
      const res = await fetch("/api/subscribe", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email }),
      });
      if (!res.ok) {
        const data = await res.json().catch(() => ({}));
        throw new Error(data.error || "subscribe_failed");
      }
      setState("done");
    } catch {
      setState("error");
      setMessage("TRANSMISSION FAILED — please try again.");
    }
  };
  return (
    <section id="newsletter" className="ds-newsletter">
      <div className="ds-newsletter-frame">
        <div className="ds-newsletter-head">
          <span className="ds-mono-small">FORM 06-NL · REV 2026</span>
        </div>
        <div className="ds-newsletter-body">
          <div>
            <h2>Request intel.</h2>
            <p>A quarterly dispatch from the field: new releases, location notes, the occasional excerpt. Unsubscribe anytime.</p>
            <ul className="ds-nl-bullets">
              <li>— New books, first</li>
              <li>— Research notes from location scouts</li>
              <li>— Subscriber-only excerpts</li>
            </ul>
          </div>
          <form className="ds-nl-form" onSubmit={submit}>
            {state !== "done" ? (
              <>
                <label className="ds-nl-label">
                  <span>SUBJECT · EMAIL</span>
                  <input
                    type="email"
                    name="email"
                    value={email}
                    onChange={e => setEmail(e.target.value)}
                    placeholder="subject@domain.ext"
                    required
                    disabled={state === "loading"}
                  />
                </label>
                <button type="submit" className="ds-nl-submit" disabled={state === "loading"}>
                  {state === "loading" ? "TRANSMITTING…" : "TRANSMIT →"}
                </button>
                <span className="ds-mono-small ds-nl-note">
                  {state === "error" ? message : "By submitting you agree to be periodically dispatched."}
                </span>
              </>
            ) : (
              <div className="ds-nl-done">
                <span>✓</span>
                <div>
                  <strong>TRANSMISSION RECEIVED</strong>
                  <span className="ds-mono-small">Confirmation en route to {email}</span>
                </div>
              </div>
            )}
          </form>
        </div>
      </div>
    </section>
  );
}

function DsFooter() {
  const AUTHOR_AMZ = "https://www.amazon.com/John-G-Lesley/e/B08CHKLWMH";
  const [amazonHref, setAmazonHref] = useState(window.localAmazonUrl(AUTHOR_AMZ));
  useEffect(() => {
    if (window.__amazonDomain) {
      setAmazonHref(window.localAmazonUrl(AUTHOR_AMZ));
    } else if (window.__amazonGeoReady) {
      window.__amazonGeoReady.then(() => setAmazonHref(window.localAmazonUrl(AUTHOR_AMZ)));
    }
  }, []);
  return (
    <footer className="ds-footer">
      <div className="ds-footer-grid">
        <div>
          <div className="ds-footer-brand">JOHN G LESLEY</div>
          <p>Investigative thrillers. London. Born in Scotland.</p>
        </div>
        <div>
          <span className="ds-mono-small">CONTACT</span>
          {/* <a href="mailto:hello@johnglesley.com">hello@johnglesley.com</a> */}
          {/* <a href="mailto:press@johnglesley.com">press@johnglesley.com</a> */}
          {/* <a href="mailto:agent@johnglesley.com">agent@johnglesley.com</a> */}
        </div>
        <div>
          <span className="ds-mono-small">RETAIL</span>
          <a href={amazonHref} target="_blank" rel="noopener noreferrer">Amazon</a>
        </div>
        <div>
          <span className="ds-mono-small">SOCIAL</span>
          <a href="https://www.goodreads.com/author/show/21665162.John_G_Lesley" target="_blank" rel="noopener noreferrer">Goodreads</a>
          <a href="#">Instagram</a>
          <a href="#">BookBub</a>
        </div>
      </div>
      <div className="ds-footer-base">
        <span>© MMXXVI · JOHN G LESLEY · ALL RIGHTS RESERVED</span>
        <span>FILE CLOSED · END OF DOSSIER</span>
      </div>
    </footer>
  );
}

Object.assign(window, { DossierLayout });
