// About, Events, Newsletter, Footer, Modal

function EdAbout() {
  return (
    <section id="about" className="ed-about">
      <div className="ed-section-head">
        <h2>A long way from Scotland.</h2>
      </div>
      <div className="ed-about-grid">
        <div className="ed-about-portrait">
          <div className="ed-portrait-frame">
            <img src="assets/author-portrait.jpg" alt="John G Lesley" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
          </div>
          <div className="ed-portrait-caption">
            <span>John G Lesley, photographed in London.</span>
          </div>
        </div>
        <div className="ed-about-body">
          <p className="ed-about-lede">
            Educated in an unforgiving school system in Scotland, John G Lesley was told he'd never get to university.
          </p>
          <p className="ed-about-body-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 className="ed-about-body-p">
            Join him as Barry Mackay comes face to face with some of the world's injustices.
          </p>
          <dl className="ed-about-facts">
            <div><dt>Born</dt><dd>Scotland</dd></div>
            <div><dt>Lives</dt><dd>Canada</dd></div>
            <div><dt>Prior life</dt><dd>Medical researcher, academic</dd></div>
            <div><dt>First novel</dt><dd>The Table of Nine, 2020</dd></div>
            <div><dt>Books in print</dt><dd>Eight across two series</dd></div>
          </dl>
        </div>
      </div>
    </section>
  );
}

/* EVENTS SECTION — commented out, restore when ready
function EdEvents() {
  const events = [
    { date: "May 14 · 2026", city: "Toronto, ON", venue: "Ben McNally Books", detail: "One Mistake — launch reading & signing", status: "upcoming" },
    { date: "Jun 02 · 2026", city: "Edinburgh, UK", venue: "Blackwell's South Bridge", detail: "In conversation with Ian Rankin", status: "upcoming" },
    { date: "Jun 18 · 2026", city: "Glasgow, UK", venue: "Waterstones Argyle St.", detail: "Homecoming reading", status: "upcoming" },
    { date: "Sep 09 · 2026", city: "Shetland, UK", venue: "Lerwick Library", detail: "In Search of Souls — location tour", status: "planning" },
    { date: "Oct 22 · 2026", city: "New York, NY", venue: "The Mysterious Bookshop", detail: "Thriller Week panel", status: "planning" }
  ];
  return (
    <section id="events" className="ed-events">
      <div className="ed-section-head">
        <span className="ed-mono-small">§ 05 — Appearances</span>
        <h2>Events &amp; readings.</h2>
      </div>
      <ul className="ed-events-list">
        {events.map((e, i) => (
          <li key={i} className="ed-event">
            <span className="ed-event-date">{e.date}</span>
            <div className="ed-event-main">
              <span className="ed-event-city">{e.city}</span>
              <span className="ed-event-venue">{e.venue}</span>
              <span className="ed-event-detail">{e.detail}</span>
            </div>
            <span className={"ed-event-status ed-event-" + e.status}>
              {e.status === "upcoming" ? "● Confirmed" : "○ Planning"}
            </span>
          </li>
        ))}
      </ul>
    </section>
  );
}
END EVENTS SECTION */

function EdNewsletter() {
  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("Something went wrong. Please try again.");
    }
  };
  return (
    <section id="newsletter" className="ed-newsletter">
      <div className="ed-newsletter-inner">
        <div className="ed-newsletter-left">
          <h2>A letter from the desk.</h2>
          <p>New books, location notes, and the occasional excerpt. No spam, no filler. One dispatch per season, at most.</p>
        </div>
        <form className="ed-newsletter-form" onSubmit={submit}>
          {state !== "done" ? (
            <>
              <div className="ed-input-wrap">
                <label>Your email</label>
                <input
                  type="email"
                  name="email"
                  value={email}
                  onChange={e => setEmail(e.target.value)}
                  placeholder="you@somewhere.com"
                  required
                  disabled={state === "loading"}
                />
              </div>
              <button type="submit" className="ed-newsletter-submit" disabled={state === "loading"}>
                {state === "loading" ? "Subscribing…" : "Subscribe"}
                <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>
              </button>
              <p className="ed-newsletter-note">
                {state === "error" ? message : "Unsubscribe in one click. Privacy is sacred."}
              </p>
            </>
          ) : (
            <div className="ed-newsletter-done">
              <span className="ed-check">✓</span>
              <div>
                <h4>You're on the list.</h4>
                <p>Check <em>{email}</em> for a confirmation.</p>
              </div>
            </div>
          )}
        </form>
      </div>
    </section>
  );
}

function EdFooter() {
  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="ed-footer">
      <div className="ed-footer-grid">
        <div className="ed-footer-brand">
          <div className="ed-logo-mono big">JGL</div>
          <p>John G Lesley writes investigative thrillers from London. Born in Scotland.</p>
        </div>
        <div className="ed-footer-col">
          <span className="ed-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 className="ed-footer-col">
          <span className="ed-mono-small">Buy</span>
          <a href={amazonHref} target="_blank" rel="noopener noreferrer">Amazon</a>
        </div>
        <div className="ed-footer-col">
          <span className="ed-mono-small">Follow</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="ed-footer-base">
        <span className="ed-mono-small">© 2026 John G Lesley · All rights reserved</span>
        <span className="ed-mono-small">Site · MMXXVI · v1.0</span>
      </div>
    </footer>
  );
}

function BookModal({ book, onClose }) {
  useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, []);
  return (
    <div className="ed-modal" onClick={onClose}>
      <div className="ed-modal-panel" onClick={e => e.stopPropagation()}>
        <button className="ed-modal-close" onClick={onClose}>✕</button>
        <div className="ed-modal-grid">
          <div className="ed-modal-cover-wrap">
            <Cover book={book} className="ed-modal-cover" />
          </div>
          <div className="ed-modal-body">
            <span className="ed-mono-small">{book.series} · Book {book.num} · {book.year}</span>
            <h3>{book.title}</h3>
            <p className="ed-modal-tagline">{book.tagline}</p>
            <p className="ed-modal-blurb">{book.blurb}</p>
            <div className="ed-pull">
              <span className="ed-pull-bar" />
              <span className="ed-pull-text">{book.pull}</span>
            </div>
            <div className="ed-buy-row">
              {book.comingSoon ? (
                <span className="ed-mono-small">Coming soon</span>
              ) : (
                <>
                  <BuyButton label="Amazon" href={book.amazon} primary />
                  {book.goodreads && <BuyButton label="Goodreads" href={book.goodreads} />}
                </>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { EdAbout, EdNewsletter, EdFooter, BookModal, BuyButton });