/* global React */
/* TORI STONE — v2 components */

const { useState, useEffect, useRef } = React;

/* ============================================================
   DATA
   ============================================================ */
const SERIES_TAGLINE = "In New Orleans, the Santoros don't fall in love. They survive it.";

const HERO_TROPES = [
  "Mafia",
  "Touch Her & Die",
  "He Falls First",
  "Morally Gray",
  "Forced Proximity",
  "Survivor to Lover",
  "Possessive Hero",
  "Slow Burn",
];

// Per-book content warnings. Edit freely — these are dark mafia romance defaults.
const CONTENT_WARNINGS = {
  0: ["On-page violence", "Captivity / arranged claim", "Explicit sex", "Period-typical patriarchal violence"],
  1: ["On-page violence", "Poisoning / attempted murder", "Explicit sex", "Toxic family dynamics", "Grief"],
  2: ["On-page violence + torture", "Trafficking (off-page, referenced)", "Captivity", "Explicit sex", "Knife violence", "Trauma"],
  3: ["On-page violence + torture", "Trafficking aftermath (on-page)", "PTSD, mutism, dissociation", "Explicit sex", "Captivity flashbacks", "Knife / gun violence"],
};

const BONUS_SCENES = [
  {
    id: "vows",
    title: "Ruthless Vows Bonus",
    sub: "A scene that didn't make the final cut. Dante's POV.",
    href: "https://BookHip.com/BFLCMGJ",
  },
];

const RUTHLESS = [
  {
    id: 0, n: "0", title: "Ruthless Ruin", subtitle: "The Prequel",
    cover: "assets/ruthless-ruin.jpg",
    status: "read",
    statusLabel: "Free Prequel",
    blurb: "Before the empire. Before the vows. The night the Don took what he was told he couldn't have.",
    pages: 142, release: "Out Now",
    heat: 4,
    link: "https://BookHip.com/FKFWLBL",
  },
  {
    id: 1, n: "I", title: "Ruthless Vows", subtitle: "Book One",
    cover: "assets/ruthless-vows.jpg",
    status: "read",
    statusLabel: "Available Now",
    blurb: "He believed love killed his father. Then her sister vanished, and the replacement bride walked into his study.",
    pages: 412, release: "March 12, 2026",
    heat: 5,
    link: "https://www.amazon.com/dp/B0GHGZHBR1",
  },
  {
    id: 2, n: "II", title: "Ruthless Scar", subtitle: "Book Two",
    cover: "assets/ruthless-scar.jpg",
    status: "read",
    statusLabel: "Available Now",
    blurb: "He's the weapon his family forgot how to put down. She's the ghost in the system, and she didn't come for him.",
    pages: 438, release: "April 2, 2026",
    heat: 5,
    link: "https://www.amazon.com/dp/B0GT2FM3FJ",
  },
  {
    id: 3, n: "III", title: "Ruthless Sin", subtitle: "Book Three",
    cover: "assets/ruthless-sin.jpg",
    coverIsTemp: true,
    status: "here",
    statusLabel: "Pre-Order Now",
    blurb: "He wears charm like a knife. She heard his Russian and went still.",
    pages: null, release: "June 11, 2026",
    heat: 4,
    link: "https://www.amazon.com/dp/B0DYPDXKC1",
  },
];

const STANDALONES = [
  { id: "a", n: "01", title: "Bound by Honor",   sub: "Mafia · Arranged",  year: "Feb 6, 2025",   cover: "assets/bound-by-honor.jpg",   link: "https://www.amazon.com/dp/B0DQP251VX" },
  { id: "b", n: "02", title: "Volkov's Vow",     sub: "Bratva · Forbidden",year: "Sep 25, 2025",  cover: "assets/volkovs-vow.jpg",      link: "https://www.amazon.com/dp/B0FFPKPJW5" },
  { id: "c", n: "03", title: "Christmas Rivals", sub: "Enemies · Holiday", year: "Nov 26, 2025",  cover: "assets/christmas-rivals.jpg", link: "https://www.amazon.com/dp/B0G1V3V85Q" },
];

const READER_QUOTES = [
  { stars: 5, text: "What happens when the ice-cold Don meets the one woman who can see right through his facade?", src: "Ruthless Vows" },
  { stars: 5, text: "If you love your MMC silent and lethal, this is the book for you. Renzo's actions absolutely speak louder than his words.", src: "Ruthless Scar" },
  { stars: 5, text: "Beautifully written, emotionally gripping. Had me in my feelings from the very first page to the final full stop.", src: "Ruthless Vows" },
  { stars: 5, text: "Lorenzo grieves by closing himself off. Isabella is his kryptonite. How far will he fall?", src: "Ruthless Scar" },
  { stars: 5, text: "Tension so thick you could cut it with a knife. Ugh, it was so good.", src: "Ruthless Vows" },
  { stars: 5, text: "Had me losing sleep and addicted to the final page.", src: "Ruthless Scar" },
  { stars: 5, text: "Fantastic, bloody, broody. Everything you want in a mafia love story.", src: "Ruthless Scar" },
];

const MOODBOARDS = {
  3: {
    title: "Ruthless Sin",
    quote: "He learned Russian the hard way. She heard it, and went still.",
    items: [
      { heading: "The smile",       caption: "Charm worn like a knife. Sharper than it looks.",      kind: "altar", size: "big" },
      { heading: "Hardwood floor",  caption: "He sat down outside her door. He has not moved since.", kind: "ember" },
      { heading: "Russian",         caption: "A language he never chose to learn.",                  kind: "blood" },
      { heading: "Twenty seconds",  caption: "The door cracked three inches. She looked.",           kind: "veil",  size: "tall" },
    ],
  },
  2: {
    title: "Ruthless Scar",
    quote: "Every scar is a sentence he wrote in someone else's blood.",
    items: [
      { heading: "The blade",   caption: "Old wound. Fresh memory.",            kind: "cold",   size: "big" },
      { heading: "Whiskey",     caption: "Three fingers. No water.",            kind: "amber" },
      { heading: "Cigarette",   caption: "Slow burn. Steady hand.",             kind: "smoke" },
      { heading: "Four inches", caption: "Above the heart. Below the ribs.",    kind: "blood",  size: "tall" },
    ],
  },
  1: {
    title: "Ruthless Vows",
    quote: "He said the vow. He meant the threat.",
    items: [
      { heading: "Cold rings",  caption: "Her grandmother's gold. Bought back in blood.",    kind: "ember",  size: "big" },
      { heading: "Black tulle", caption: "Worn instead of white. He didn't ask why.",        kind: "veil" },
      { heading: "Pearls",      caption: "Around her throat. His thumb at her pulse.",       kind: "pearl" },
      { heading: "The vow",     caption: "Said under his breath. Meant in his blood.",       kind: "altar",  size: "tall" },
    ],
  },
};

const CHAPTER_EXCERPT = [
  "My wrists are zip-tied to the chair.",
  "Concrete behind and beneath me. One bulb hangs from a wire overhead, swinging. My ribs grind when I breathe. Three knife slashes across my back, still bleeding. A fourth cut on my left side, seeping through my shirt.",
  "A few feet away, another chair. A woman.",
  "Yelena.",
  "Hands zip-tied to the armrests. Hair down. Blood at her temple where the guard hit her coming in.",
  "Still breathing.",
  "Keep her there.",
  "The door slams open.",
];

/* ============================================================
   Countdown hook
   ============================================================ */
function useCountdown(targetIso) {
  const [now, setNow] = useState(() => Date.now());
  useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);
  const target = new Date(targetIso).getTime();
  const diff = Math.max(0, target - now);
  const days    = Math.floor(diff / 86_400_000);
  const hours   = Math.floor((diff % 86_400_000) / 3_600_000);
  const minutes = Math.floor((diff % 3_600_000) / 60_000);
  const seconds = Math.floor((diff % 60_000) / 1000);
  return { days, hours, minutes, seconds, diff };
}

/* ============================================================
   Announcement bar (with live countdown)
   ============================================================ */
function AnnouncementBar() {
  const c = useCountdown("2026-06-11T00:00:00");
  return (
    <div className="bar">
      <div className="bar__inner">
        <span className="bar__pulse"></span>
        <span>Ruthless Sin · Pre-Order Now</span>
        <span style={{opacity:0.5}}>·</span>
        <span className="bar__cd">
          {String(c.days).padStart(2,"0")}d {String(c.hours).padStart(2,"0")}h {String(c.minutes).padStart(2,"0")}m {String(c.seconds).padStart(2,"0")}s
        </span>
        <span style={{opacity:0.5}}>·</span>
        <a href="https://www.amazon.com/dp/B0DYPDXKC1" target="_blank" rel="noopener noreferrer" className="bar__link">Reserve Copy</a>
      </div>
    </div>
  );
}

/* ============================================================
   Nav
   ============================================================ */
function Nav() {
  return (
    <nav className="nav">
      <div className="nav__inner">
        <a href="index.html" className="nav__brand">Tori <span className="last">Stone</span></a>
        <div className="nav__links">
          <a href="Library.html">Library</a>
          <a href="https://www.amazon.com/dp/B0GRGBGZ7B" target="_blank" rel="noopener noreferrer">The Series</a>
          <a href="Sneak Peek.html">Sneak Peek</a>
          <a href="Bonus.html">Bonus</a>
          <a href="About.html">About</a>
        </div>
        <div className="nav__cta">
          <a href="https://dl.bookfunnel.com/skd0b0otv9" target="_blank" rel="noopener noreferrer" className="nav__free">Free Prequel</a>
        </div>
      </div>
    </nav>
  );
}

/* ============================================================
   Heat meter
   ============================================================ */
function HeatMeter({ level = 5, max = 5 }) {
  return (
    <span className="heat" aria-label={`Heat ${level} out of ${max}`}>
      {Array.from({ length: max }, (_, i) => (
        <span key={i} className={"heat__pip " + (i < level ? "is-on" : "")} aria-hidden="true">🔥</span>
      ))}
    </span>
  );
}

/* ============================================================
   Typographic placeholder cover
   ============================================================ */
function PlaceholderCover({ title, series = "The Ruthless Series", num, book, date }) {
  return (
    <div className="placeholder-cover">
      <span className="placeholder-cover__chip">Cover · Soon</span>
      <span className="placeholder-cover__top">Tori Stone</span>
      <div className="placeholder-cover__main">
        <div className="placeholder-cover__roman">{num}</div>
        <div className="placeholder-cover__divider"></div>
        <div className="placeholder-cover__title">{title}</div>
        <div className="placeholder-cover__sub">{book}</div>
      </div>
      <div className="placeholder-cover__author">{date || series}</div>
    </div>
  );
}

/* ============================================================
   Atmosphere — drifting embers (CSS-only, GPU compositor)
   ============================================================ */
function Atmosphere() {
  return (
    <div className="embers" aria-hidden="true">
      {Array.from({ length: 15 }, (_, i) => <span key={i} />)}
    </div>
  );
}

/* ============================================================
   Hero — Book 3 spotlight
   ============================================================ */
function Hero() {
  const c = useCountdown("2026-06-11T00:00:00");

  return (
    <section id="top" className="hero" data-section-label="Hero">
      <div className="hero__atmos">
        <div className="glow1"></div>
        <div className="glow2"></div>
      </div>

      <div className="frame">
        <div className="hero__grid">
          <div className="hero__left">
            <div className="hero__eyebrow"><span className="pulse"></span> The Next Chapter · June 11, 2026</div>
            <h1 className="hero__title">
              Ruthless <span className="ital">Sin</span>
            </h1>
            <p className="hero__series-line">{SERIES_TAGLINE}</p>
            <p className="hero__tagline">
              Book Three of the Ruthless Series. He charms because he can't afford to feel. She heard his Russian, and went still.
            </p>

            <div className="hero__tropes">
              {HERO_TROPES.map((t, i) => (
                <span key={i} className="trope-chip">{t}</span>
              ))}
            </div>

            <div className="hero__meta">
              <div className="item">
                <span className="label">Series</span>
                <div className="val">Book III</div>
              </div>
              <div className="item">
                <span className="label">Setting</span>
                <div className="val">New Orleans</div>
              </div>
              <div className="item">
                <span className="label">Heat</span>
                <div className="val">
                  <HeatMeter level={4} />
                </div>
              </div>
            </div>

            <details className="hero__cw">
              <summary>
                <span className="hero__cw-icon" aria-hidden="true">!</span>
                Content warnings before you start
              </summary>
              <ul>
                {CONTENT_WARNINGS[3].map((cw, i) => <li key={i}>{cw}</li>)}
              </ul>
            </details>

            <div className="countdown" aria-label="Pre-order countdown">
              <div className="countdown__cell">
                <div className="num">{String(c.days).padStart(2,"0")}</div>
                <div className="lab">Days</div>
              </div>
              <div className="countdown__cell">
                <div className="num">{String(c.hours).padStart(2,"0")}</div>
                <div className="lab">Hours</div>
              </div>
              <div className="countdown__cell">
                <div className="num">{String(c.minutes).padStart(2,"0")}</div>
                <div className="lab">Minutes</div>
              </div>
              <div className="countdown__cell">
                <div className="num">{String(c.seconds).padStart(2,"0")}</div>
                <div className="lab">Seconds</div>
              </div>
            </div>

            <div className="hero__cta">
              <a href="https://www.amazon.com/dp/B0DYPDXKC1" target="_blank" rel="noopener noreferrer" className="btn">Pre-Order Now <span className="arrow"></span></a>
              <a href="#peek" className="btn btn--ghost">Read Chapter One</a>
            </div>
          </div>

          <div className="hero__cover">
            <a href="https://www.amazon.com/dp/B0DYPDXKC1" target="_blank" rel="noopener noreferrer" className="hero__cover-frame" aria-label="Pre-order Ruthless Sin on Amazon">
              <span className="hero__cover-tape">Temporary Cover · Final Reveal Soon</span>
              <img src="assets/ruthless-sin.jpg" alt="Ruthless Sin by Tori Stone" className="hero__cover-img" />
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Start Here — three paths for new visitors
   ============================================================ */
function StartHere() {
  return (
    <section id="start" className="section section--alt">
      <div className="frame">
        <div className="section__head">
          <div className="section__eyebrow">Where to Start</div>
          <h2 className="section__title">Pick your <span className="ital">entrance</span></h2>
          <p className="section__sub">Three doors into the Santoro empire. Choose the one that fits where you are.</p>
        </div>

        <div className="start">
          <a href="https://dl.bookfunnel.com/skd0b0otv9" target="_blank" rel="noopener noreferrer" className="start__card">
            <span className="start__no">01</span>
            <h3 className="start__h">Free taste</h3>
            <p className="start__sub">Start with the prequel, Ruthless Ruin. The night the empire began. Free, no strings.</p>
            <span className="start__link">Send me the prequel <span className="arrow"></span></span>
          </a>
          <a href="https://www.amazon.com/dp/B0GHGZHBR1" target="_blank" rel="noopener noreferrer" className="start__card">
            <span className="start__no">02</span>
            <h3 className="start__h">Start the series</h3>
            <p className="start__sub">Begin with Book One, Ruthless Vows. Dante and Cassia. The replacement bride who saw the Don.</p>
            <span className="start__link">Read Book One <span className="arrow"></span></span>
          </a>
          <a href="https://www.amazon.com/dp/B0DYPDXKC1" target="_blank" rel="noopener noreferrer" className="start__card start__card--feature">
            <span className="start__no">03</span>
            <h3 className="start__h">The next event</h3>
            <p className="start__sub">Pre-order Book Three, Ruthless Sin. Nico and Mila. Releases June 11, 2026.</p>
            <span className="start__link">Pre-order Sin <span className="arrow"></span></span>
          </a>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Reading order timeline
   ============================================================ */
function ReadingOrder() {
  return (
    <section id="series" className="section section--alt">
      <div className="frame">
        <div className="section__head">
          <div className="section__eyebrow">The Reading Order</div>
          <h2 className="section__title">Where to <span className="ital">begin</span></h2>
          <p className="section__sub">Start free with the prequel, or jump straight into Book One. The series is best in order, but each story has its own ending.</p>
        </div>

        <div className="reading">
          {RUTHLESS.map((b) => (
            <div key={b.id} className="read-card" data-status={b.status}>
              <span className="read-card__chip">{b.statusLabel}</span>
              <a href={b.link} target={b.link.startsWith("http")?"_blank":undefined} rel="noopener noreferrer" className="read-card__cover">
                {b.cover
                  ? <img src={b.cover} alt={b.title} />
                  : <PlaceholderCover title={b.title} num={b.n} book={`Book ${b.n}`} date={b.release} />}
              </a>
              <h3 className="read-card__title">{b.title}</h3>
              <p className="read-card__sub">{b.subtitle}</p>
              <span className="read-card__date">{b.release}</span>
              <div className="read-card__heat">
                <HeatMeter level={b.heat || 4} />
              </div>
              <details className="read-card__cw">
                <summary>Content warnings</summary>
                <ul>
                  {(CONTENT_WARNINGS[b.id] || []).map((cw, i) => <li key={i}>{cw}</li>)}
                </ul>
              </details>
              <a href={b.link} target={b.link.startsWith("http")?"_blank":undefined} rel="noopener noreferrer" className={"read-card__cta btn" + (b.status === "here" ? "" : " btn--ghost")}>
                {b.status === "here" ? "Pre-Order" : "Read"}
                <span className="arrow"></span>
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Sneak peek — chapter one
   ============================================================ */
function SneakPeek() {
  return (
    <section id="peek" className="section">
      <div className="frame">
        <div className="section__head">
          <div className="section__eyebrow">Sneak Peek · Prologue</div>
          <h2 className="section__title">Moscow, three <span className="ital">years ago</span></h2>
          <p className="section__sub">The opening of Ruthless Sin. Read it now. Finish it June 11.</p>
        </div>

        <div className="peek">
          <div className="peek__left">
            <div className="peek__chapter">
              <span className="num">Prologue</span>
              Moscow
            </div>
            <p className="peek__book"><b>From</b><br/>Ruthless Sin, Book III<br/>Releases June 11, 2026</p>
          </div>

          <div>
            <div className="peek__body peek__fade">
              {CHAPTER_EXCERPT.map((p, i) => <p key={i}>{p}</p>)}
            </div>
            <div className="peek__cta">
              <a href="https://www.amazon.com/dp/B0DYPDXKC1" target="_blank" rel="noopener noreferrer" className="btn">Pre-Order to Read More <span className="arrow"></span></a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Mood tile — typographic atmospheric cell
   ============================================================ */
function MoodTile({ heading, caption, kind = "blood" }) {
  return (
    <div className={"mood-tile mood-tile--" + kind}>
      <div className="mood-tile__inner">
        <div className="mood-tile__heading">{heading}</div>
        <div className="mood-tile__caption">{caption}</div>
      </div>
    </div>
  );
}

/* ============================================================
   Moodboard — per book, tabs
   ============================================================ */
function Moodboard() {
  const bookIds = Object.keys(MOODBOARDS).map(Number).sort((a,b) => b - a); // 3, 2, 1
  const [active, setActive] = useState(bookIds[0]);
  const mb = MOODBOARDS[active];

  const sizeClass = (size) => {
    if (size === "big")  return "mood__cell mood__cell--big";
    if (size === "tall") return "mood__cell mood__cell--tall";
    if (size === "wide") return "mood__cell mood__cell--wide";
    return "mood__cell";
  };

  return (
    <section id="moodboard" className="section section--ink">
      <div className="frame">
        <div className="section__head">
          <div className="section__eyebrow">The Visual World</div>
          <h2 className="section__title">Mood <span className="ital">boards</span></h2>
          <p className="section__sub">The textures, light, and small obsessions that shaped each story.</p>
        </div>

        <div className="mood-tabs" role="tablist">
          {bookIds.map((id) => (
            <button key={id} className={active === id ? "is-on" : ""} onClick={() => setActive(id)}>
              {MOODBOARDS[id].title}
            </button>
          ))}
        </div>

        <div className="mood" key={active}>
          {mb.items.map((it, i) => (
            <div key={i} className={sizeClass(it.size)}>
              <MoodTile heading={it.heading} caption={it.caption} kind={it.kind} />
            </div>
          ))}
          <div className="mood__cell mood__cell--quote mood__cell--wide">
            <p>"{mb.quote}"<span className="att">from {mb.title}</span></p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Bonus Scenes — reader extras
   ============================================================ */
function BonusScenes() {
  return (
    <section id="bonus" className="section">
      <div className="frame">
        <div className="section__head">
          <div className="section__eyebrow">For the Obsessed</div>
          <h2 className="section__title">Bonus <span className="ital">scenes</span></h2>
          <p className="section__sub">Deleted scenes, extended endings, and POVs that didn't make the final cut. Free for readers.</p>
        </div>

        <div className="bonus">
          {BONUS_SCENES.map((b) => (
            <a key={b.id} href={b.href} target="_blank" rel="noopener noreferrer" className="bonus__card">
              <span className="bonus__tag">Free Download</span>
              <h3 className="bonus__title">{b.title}</h3>
              <p className="bonus__sub">{b.sub}</p>
              <span className="bonus__link">Get the scene <span className="arrow"></span></span>
            </a>
          ))}
          <div className="bonus__card bonus__card--soon">
            <span className="bonus__tag">After Release</span>
            <h3 className="bonus__title">Ruthless Sin Bonus</h3>
            <p className="bonus__sub">Coming June 2026. A scene only the newsletter gets first.</p>
            <a href="#newsletter" className="bonus__link">Join the list <span className="arrow"></span></a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Reader quotes carousel
   ============================================================ */
function QuotesCarousel() {
  const [i, setI] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setI((x) => (x + 1) % READER_QUOTES.length), 6000);
    return () => clearInterval(id);
  }, []);

  return (
    <section id="readers" className="section section--alt">
      <div className="frame">
        <div className="section__head">
          <div className="section__eyebrow">What Readers Say</div>
          <h2 className="section__title">They are <span className="ital">unhinged</span></h2>
          <p className="section__sub">And we love them for it.</p>
        </div>

        <div className="quotes">
          <div className="quotes__viewport">
            {READER_QUOTES.map((q, idx) => (
              <div key={idx} className={"quote " + (idx === i ? "is-on" : "")}>
                <div className="stars">{"★".repeat(q.stars)}</div>
                <p>"{q.text}"</p>
                <div className="att">{q.src}</div>
              </div>
            ))}
          </div>
          <div className="quotes__dots">
            {READER_QUOTES.map((_, idx) => (
              <button key={idx} className={idx === i ? "is-on" : ""} onClick={() => setI(idx)} aria-label={`Quote ${idx+1}`}></button>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Standalones
   ============================================================ */
function Library() {
  return (
    <section id="books" className="section">
      <div className="frame">
        <div className="section__head">
          <div className="section__eyebrow">Outside the Series</div>
          <h2 className="section__title"><span className="ital">Standalones</span></h2>
          <p className="section__sub">Other dark romances from the Tori Stone universe.</p>
        </div>
        <div className="shelf">
          {STANDALONES.map((b) => (
            <a key={b.id} href={b.link} target="_blank" rel="noopener noreferrer" className="book">
              <div className="book__cover"><img src={b.cover} alt={b.title} /></div>
              <h3 className="book__title">{b.title}</h3>
              <p className="book__sub">{b.sub} · {b.year}</p>
            </a>
          ))}
        </div>
        <div className="library-tail">
          <a href="Library.html" className="btn btn--ghost">See the full library <span className="arrow"></span></a>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   About
   ============================================================ */
function About() {
  return (
    <section id="about" className="section section--alt">
      <div className="frame">
        <div className="section__head">
          <div className="section__eyebrow">About</div>
          <h2 className="section__title">Hi, I'm <span className="ital">Tori</span></h2>
        </div>

        <div className="about">
          <div>
            <p className="about__lede">"I write the men we shouldn't want and the women who make them earn it."</p>
            <p className="about__line">{SERIES_TAGLINE}</p>
            <div className="about__sig">Tori</div>
          </div>
          <div className="about__body">
            <p>I write men with anger issues and excellent forearms and the women who bring them to their knees.</p>
            <p>When I'm not writing, I'm probably reading something I shouldn't be. My coffee is always cold. My TBR is a disaster I refuse to fix.</p>
            <p>I love candles that smell like a confessional. Violins on loop. Books that ruin me in the best way.</p>
            <p>If you found me here, welcome in. Pour something dark. Stay a while.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Newsletter
   ============================================================ */
function Newsletter() {
  const [email, setEmail] = useState("");
  const [sent, setSent] = useState(false);
  const submit = (e) => { e.preventDefault(); if (email) setSent(true); };
  return (
    <section id="newsletter" className="news">
      <div className="frame">
        <div className="news__inner">
          <p className="eyebrow"><span className="dot"></span>Tori's Inner Circle<span className="dot"></span></p>
          <h2 className="news__title">Get Ruthless Ruin <span className="ital">free</span></h2>
          <p className="news__body">The free prequel. Early chapters. Deleted scenes I shouldn't have written. The occasional unhinged voice memo from me.</p>
          {sent ? (
            <div style={{padding:"1.4rem", border:"1px solid var(--blood)", color:"var(--cream)", fontFamily:"var(--f-italic)", fontStyle:"italic", fontSize:"20px"}}>
              ✦ You're in. Check your inbox for the prequel.
            </div>
          ) : (
            <form className="news__form" action="https://preview.mailerlite.io/forms/1679445/177991505887102522/share" method="post" target="_blank" onSubmit={submit}>
              <input type="email" name="fields[email]" required placeholder="your@email.com" value={email} onChange={(e)=>setEmail(e.target.value)} />
              <button type="submit">Send My Free Book</button>
            </form>
          )}
          <div className="news__perks">
            <span>Free Prequel</span>
            <span>Early Chapters</span>
            <span>Cover Reveals</span>
            <span>No Spam, Ever</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Footer
   ============================================================ */
function Footer() {
  return (
    <footer className="foot">
      <div className="frame">
        <div className="foot__grid">
          <div>
            <div className="foot__brand">Tori Stone</div>
            <p>Dark romance. Morally gray men, fierce women, and the empires that burn around them.</p>
          </div>
          <div className="foot__col">
            <span className="label">Read</span>
            <ul>
              <li><a href="index.html#series">The Ruthless Series</a></li>
              <li><a href="Library.html">Standalones</a></li>
              <li><a href="Sneak Peek.html">Chapter One</a></li>
              <li><a href="Bonus.html">Bonus Scenes</a></li>
              <li><a href="https://dl.bookfunnel.com/skd0b0otv9" target="_blank" rel="noopener noreferrer">Free Prequel</a></li>
            </ul>
          </div>
          <div className="foot__col">
            <span className="label">Connect</span>
            <ul>
              <li><a href="index.html#newsletter">Newsletter</a></li>
              <li><a href="https://instagram.com/toristoneauthor" target="_blank" rel="noopener noreferrer">Instagram</a></li>
              <li><a href="https://tiktok.com/@toristoneauthor" target="_blank" rel="noopener noreferrer">TikTok</a></li>
              <li><a href="https://facebook.com/toristoneauthor" target="_blank" rel="noopener noreferrer">Facebook</a></li>
            </ul>
          </div>
          <div className="foot__col">
            <span className="label">Press</span>
            <ul>
              <li><a href="About.html">About</a></li>
              <li><a href="Media Kit.html">Media Kit</a></li>
              <li><a href="Contact.html">Contact</a></li>
              <li><a href="Rights.html">Rights</a></li>
            </ul>
          </div>
        </div>
        <div className="foot__bottom">
          <span>© 2026 Tori Stone · All Rights Reserved</span>
          <div className="foot__socials">
            <a href="https://instagram.com/toristoneauthor" target="_blank" rel="noopener noreferrer">Instagram</a>
            <a href="https://tiktok.com/@toristoneauthor" target="_blank" rel="noopener noreferrer">TikTok</a>
            <a href="https://facebook.com/toristoneauthor" target="_blank" rel="noopener noreferrer">Facebook</a>
          </div>
          <span>Made with care</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  AnnouncementBar, Nav, Hero, StartHere, ReadingOrder, SneakPeek, BonusScenes, Moodboard,
  QuotesCarousel, Library, About, Newsletter, Footer,
  PlaceholderCover, HeatMeter, useCountdown,
  RUTHLESS, STANDALONES, READER_QUOTES, SERIES_TAGLINE, HERO_TROPES, CONTENT_WARNINGS, BONUS_SCENES,
});