// Editorial layout — cover-forward, typographic, numbered
function EditorialLayout({ 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" ? "ed-compact" : "ed-airy";

  return (
    <div className={"editorial " + pad}>
      <EdNav />
      <EdHero latest={latest} />
      <EdLatest latest={latest} onOpen={() => setSelectedBook(latest)} />
      <EdCatalog title="The Barry Mackay Series" books={mackay} onOpen={setSelectedBook} />
      <EdCatalog title="The Todd Winters Series" books={winters} onOpen={setSelectedBook} accent="todd" />
      <EdAbout />
      {/* <EdEvents /> */}
      <EdNewsletter />
      <EdFooter />
      {selectedBook && <BookModal book={selectedBook} onClose={() => setSelectedBook(null)} />}
    </div>
  );
}

function EdNav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={"ed-nav" + (scrolled ? " scrolled" : "")}>
      <div className="ed-nav-inner">
        <a href="#top" className="ed-logo">
          <window.Logo variant={window.__logo || "mono"} />
          <span className="ed-logo-name">John G Lesley</span>
        </a>
        <div className="ed-nav-links">
          <a href="#latest">Latest</a>
          <a href="#books">Books</a>
          <a href="#about">About</a>
          <a href="#newsletter" className="ed-nav-cta">Newsletter →</a>
        </div>
      </div>
    </nav>
  );
}

function EdHero({ latest }) {
  const [mouse, setMouse] = useState({ x: 0, y: 0 });
  const heroRef = useRef(null);
  useEffect(() => {
    const el = heroRef.current;
    if (!el) return;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      setMouse({ x: (e.clientX - r.left) / r.width - 0.5, y: (e.clientY - r.top) / r.height - 0.5 });
    };
    el.addEventListener("mousemove", onMove);
    return () => el.removeEventListener("mousemove", onMove);
  }, []);

  return (
    <section id="top" className="ed-hero" ref={heroRef}>
      <div className="ed-hero-grid">
        <div className="ed-hero-meta">
          <div className="ed-ticker">
            <span className="ed-ticker-dot" />
            <span>NEW RELEASE · 2026</span>
          </div>
        </div>
        <div className="ed-hero-title-wrap">
          <h1 className="ed-hero-title">
            <span className="ed-hero-line ed-hero-line-1">
              <span>Seven&nbsp;Barry Mackay</span>
            </span>
            <span className="ed-hero-line ed-hero-line-2">
              <span><em>thrillers</em> and counting.</span>
            </span>
            <span className="ed-hero-line ed-hero-line-3">
              <span>A new series begins.</span>
            </span>
          </h1>
        </div>
        <div className="ed-hero-side" style={{ transform: `translate(${mouse.x * -12}px, ${mouse.y * -8}px)` }}>
          <div className="ed-hero-cover-wrap">
            <div className="ed-hero-cover-shadow" />
            <Cover book={latest} className="ed-hero-cover" />
          </div>
          <div className="ed-hero-cover-caption">
            <span className="ed-mono-small">Latest · Todd Winters #1</span>
            <span className="ed-hero-cover-title">One Mistake</span>
          </div>
        </div>
        <div className="ed-hero-foot">
          <a href="#latest" className="ed-hero-cta">
            <span>Read the first chapter</span>
            <svg width="14" height="14" viewBox="0 0 14 14"><path d="M1 7h12M8 2l5 5-5 5" stroke="currentColor" fill="none" strokeWidth="1.5"/></svg>
          </a>
          <div className="ed-hero-quote">
            <span className="ed-quote-mark">"</span>
            <span>A plot more real than you can imagine.</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function EdLatest({ latest, onOpen }) {
  return (
    <section id="latest" className="ed-latest">
      <div className="ed-section-head">
        <h2>The latest release.</h2>
      </div>
      <div className="ed-latest-grid">
        <div className="ed-latest-cover">
          <Cover book={latest} className="ed-latest-cover-img" />
        </div>
        <div className="ed-latest-body">
          <div className="ed-latest-meta">
            <span>{latest.year}</span>
            <span>·</span>
            <span>{latest.series} — Book {latest.num}</span>
            <span>·</span>
            <span>{latest.setting}</span>
          </div>
          <h3 className="ed-latest-title">{latest.title}</h3>
          <p className="ed-latest-tagline">{latest.tagline}</p>
          <p className="ed-latest-blurb">{latest.blurb}</p>
          <div className="ed-pull">
            <span className="ed-pull-bar" />
            <span className="ed-pull-text">{latest.pull}</span>
          </div>
          <div className="ed-buy-row">
            <BuyButton label="Amazon" href={latest.amazon} primary />
            {latest.goodreads && <BuyButton label="Goodreads" href={latest.goodreads} />}
          </div>
        </div>
      </div>
    </section>
  );
}

function BuyButton({ label, primary, href }) {
  const isAmazon = href && href.includes('amazon.com');
  const [resolvedHref, setResolvedHref] = useState(
    isAmazon ? window.localAmazonUrl(href) : href
  );
  useEffect(() => {
    if (!isAmazon) return;
    if (window.__amazonDomain) {
      setResolvedHref(window.localAmazonUrl(href));
    } else if (window.__amazonGeoReady) {
      window.__amazonGeoReady.then(() => setResolvedHref(window.localAmazonUrl(href)));
    }
  }, [href]);
  return (
    <a href={resolvedHref || "#"} className={"ed-buy" + (primary ? " ed-buy-primary" : "")} target="_blank" rel="noopener noreferrer">
      <span>{label}</span>
      <svg width="10" height="10" viewBox="0 0 10 10"><path d="M2 8L8 2M3 2h5v5" stroke="currentColor" fill="none" strokeWidth="1.2"/></svg>
    </a>
  );
}

function EdCatalog({ title, books, onOpen, accent }) {
  return (
    <section id={accent === "todd" ? "todd" : "books"} className={"ed-catalog" + (accent ? " ed-catalog-" + accent : "")}>
      <div className="ed-section-head">
        <h2>{title}</h2>
      </div>
      <ol className="ed-catalog-list">
        {books.map((b, i) => (
          <EdCatalogRow key={b.series + b.num} book={b} onOpen={() => onOpen(b)} />
        ))}
      </ol>
    </section>
  );
}

function EdCatalogRow({ book, onOpen }) {
  const [hover, setHover] = useState(false);
  return (
    <li
      className={"ed-row" + (hover ? " hover" : "")}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      onClick={onOpen}
    >
      <span className="ed-row-num">{String(book.num).padStart(2, "0")}</span>
      <div className="ed-row-main">
        {book.comingSoon && (
          <span className="ed-row-coming">
            <span className="ed-row-coming-dot" />Coming soon
          </span>
        )}
        <h3 className="ed-row-title">{book.title}</h3>
        <p className="ed-row-tagline">{book.tagline}</p>
      </div>
      <div className="ed-row-meta">
        <span className="ed-mono-small">{book.setting}</span>
        <span className="ed-mono-small ed-row-year">{book.comingSoon ? "" : book.year}</span>
      </div>
      <div className="ed-row-hover">
        <Cover book={book} className="ed-row-hover-cover" />
      </div>
      <svg className="ed-row-arrow" width="20" height="20" viewBox="0 0 20 20">
        <path d="M2 10h16M11 3l7 7-7 7" stroke="currentColor" fill="none" strokeWidth="1.3"/>
      </svg>
    </li>
  );
}

window.EditorialLayout = EditorialLayout;