// Page components — each is a full page body (between Header and Footer).

const { useState: useStateP, useRef: useRefP, useMemo: useMemoP } = React;

/* =========================================================
   HOMEPAGE — stripped to two CTAs:
   1. Join the newsletter
   2. Pre-order (or notify-when-live)
   ========================================================= */
function HomePage({ featured, onSignup, onOpenBook }) {
  return (
    <>
      <Hero
        featured={featured}
        seriesMode="all"
        onSignup={onSignup}
        onOpenBook={onOpenBook} />
      

      <Newsletter />
    </>);

}

/* =========================================================
   ABOUT PAGE
   ========================================================= */
function AboutPage() {
  return (
    <>
      <PageHero
        eyebrow="The authors"
        title={<>Two authors. <em>One</em> trench coat.</>}
        kicker="They write dark why-choose romance about people who kill together, love fiercely, and refuse to apologize for either." />
      

      <Authors />

      <section className="er-section er-section--narrow">
        <div className="er-section__head">
          <div>
            <div className="er-section__chapter"><span>What we write</span></div>
            <h2 className="display display--lg" style={{ marginTop: 20 }}>
              The <em>house style.</em>
            </h2>
          </div>
        </div>

        <div className="er-about-grid">
          <div>
            <h3>Why choose</h3>
            <p>Lose any one of the men and you lose the shape of the whole. Each relationship has to matter on its own terms — and it will. No interchangeable boys.</p>
          </div>
          <div>
            <h3>Dark humor</h3>
            <p>It’s always funny until someone loses a head… then it’s funnier.</p>
          </div>
          <div>
            <h3>Spicy</h3>
            <p>Explicit. Intimate. Sometimes feral. Always consensual. The setting is dangerous; the intimacy is not. Knife play, breath play, praise, degradation — pick your flavor.</p>
          </div>
          <div>
            <h3>Morally black</h3>
            <p>Our men kill people. Sometimes the women do too. Nobody redeems on schedule. Everyone gets interiority, vulnerability, the confession scene at 2am — and a soul-deep reason for what they’ve done.</p>
          </div>
          <div>
            <h3>My boyfriends are boyfriends</h3>
            <p>Why choose means everyone is involved — including the men with each other. The romance isn’t a hub-and-spoke; it’s a constellation. They love her. They love each other. Everyone is invited.</p>
          </div>
          <div>
            <h3>Content warnings — always</h3>
            <p>We write dark on purpose and we list every reason out loud. Every book ships with its own content-warning sheet. The <a href="warnings.html" style={{ color: 'var(--er-oxblood)', textDecoration: 'underline' }}>list is the gift, not the gate</a>.</p>
          </div>
        </div>
      </section>

      <Newsletter />
    </>);

}

/* =========================================================
   BOOKS PAGE
   ========================================================= */
function BooksPage({ seriesMode, onPickSeries, onOpenBook }) {
  return (
    <>
      <PageHero
        eyebrow=""
        title={<>Searching for <em>killer</em> romance?</>}
        kicker="" />
      
      <Books
        seriesMode={seriesMode}
        onPickSeries={onPickSeries}
        onOpenBook={onOpenBook} />
      
      <Newsletter />
    </>);

}

/* =========================================================
   SERIES PAGE
   ========================================================= */
function SeriesPage({ onPickSeries, onOpenBook }) {
  return (
    <>
      <PageHero
        eyebrow="The universe"
        title={<>One <em>world.</em> Three <em>doors</em> in.</>}
        kicker="Read in any order — they braid in the middle. Every series shares the same heart and the same body count." />
      
      <SeriesRows onPickSeries={onPickSeries} />

      {/* per-series details */}
      <section className="er-section er-section--narrow">
        <div className="er-section__head">
          <div>
            <div className="er-section__chapter"><span>How they connect</span></div>
            <h2 className="display display--lg" style={{ marginTop: 20 }}>
              The <em>braid.</em>
            </h2>
          </div>
        </div>
        <div className="er-series-detail">
          <p className="serif-body" style={{ fontSize: 19, maxWidth: '60ch', margin: '0 auto' }}>
            <strong>The Hangmen Trilogy</strong> is the launch — one woman, five men, the rope they tied together that they're not ready to call a noose. Read this first if you want the most intense, most intimate, most feral entry point.
          </p>
          <p className="serif-body" style={{ fontSize: 19, maxWidth: '60ch', margin: '24px auto' }}>
            <strong>Gods of Corruption</strong> follows the billionaires who fund the work — old money, new sin, couture and casualties. Read this if you want vigilante billionaires, gala dresses, and corruption arcs.
          </p>
          <p className="serif-body" style={{ fontSize: 19, maxWidth: '60ch', margin: '0 auto' }}>
            <strong>Clean Up Crew</strong> — also known as the Hanged Men, also known as the Murder Puppies. The men who do the work. This series is allowed to be funny. Banter, devotion, tattooed everything, soft for her.
          </p>
        </div>
      </section>

      <Newsletter />
    </>);

}

/* =========================================================
   BONUSES PAGE
   ========================================================= */
function BonusesPage() {
  return (
    <>
      <PageHero
        eyebrow="Bonus material"
        title={<>Extras for the <em>devoted.</em></>}
        kicker="" />

      <Bonus showHeader={false} />
      <Newsletter />
    </>);

}

/* =========================================================
   WARNINGS PAGE
   ========================================================= */
/* =========================================================
   WARNINGS PAGE — per-book accordion
   ========================================================= */
function WarningsAccordion({ series }) {
  const [openId, setOpenId] = useStateP(series.books[0]?.id || null);

  return (
    <div className="er-cw-series">
      <h3 className="er-cw-series__title">{series.series}</h3>
      <div className="er-cw-accordion">
        {series.books.map((book) => {
          const isOpen = openId === book.id;
          return (
            <div key={book.id} className={`er-cw-item ${isOpen ? 'is-open' : ''}`}>
              <button
                className="er-cw-item__head"
                aria-expanded={isOpen}
                onClick={() => setOpenId(isOpen ? null : book.id)}>
                
                <span className="er-cw-item__title">{book.title}</span>
                <span className="er-cw-item__date">{book.date}</span>
                <span className="er-cw-item__chev" aria-hidden="true">{isOpen ? '−' : '+'}</span>
              </button>
              {isOpen &&
              <div className="er-cw-item__body">
                  {book.intro && <p className="er-cw-item__intro">{book.intro}</p>}
                  {book.items && book.items.length > 0 ?
                <ul className="er-cw__list">
                      {book.items.map((w, i) => <li key={i}>{w}</li>)}
                    </ul> :

                <p className="er-cw-item__pending">
                      {book.pending || 'The full content-warning sheet for this book will be published closer to release.'}
                    </p>
                }
                  {book.whyChoose &&
                <p className="er-cw-item__why">
                      <strong>This book is a why-choose romance</strong> — the heroine ends the series with multiple partners, and romantic / sexual scenes include more than two people. If any of the above are triggering for you, please prioritize your wellbeing.
                    </p>
                }
                </div>
              }
            </div>);

        })}
      </div>
    </div>);

}

function WarningsPage() {
  return (
    <>
      <PageHero
        eyebrow="Read this before you read us"
        title={<>Content <em>warnings.</em></>}
        kicker="" />
      

      <section className="er-section er-section--narrow">
        <div className="er-warnings-body">
          <p className="er-modal__lede">
            Eve Riche writes adult dark romance intended for readers 18+. It contains on-page depictions of subject matter that some readers may find distressing. Please read with care.
          </p>
          <p className="er-modal__lede" style={{ marginBottom: 40 }}>
            We write dark romance that is actually dark. Not aestheticized darkness where everyone’s hot and brooding and nobody does anything morally reprehensible. Our men kill people. Sometimes the women do too. The on-page intimacy is enthusiastic; the on-page violence is not. Every book has its own content-warning sheet, read below for more information.
          </p>

          {BOOK_WARNINGS.map((series, i) =>
          <WarningsAccordion key={i} series={series} />
          )}

          <div className="er-modal__final" style={{ marginTop: 32 }}>We’d rather you don’t read us than read us underprepared.
The list is the gift, not the gate.
          </div>
        </div>
      </section>

      <Newsletter />
    </>);

}

/* =========================================================
   PAGE HERO — shared compact hero for non-home pages
   ========================================================= */
function PageHero({ eyebrow, title, kicker }) {
  return (
    <section className="er-page-hero">
      <div className="er-page-hero__inner">
        {eyebrow &&
        <div className="er-page-hero__eyebrow">
            <DaggerRose size={14} />
            <span>{eyebrow}</span>
          </div>
        }
        <h1 className="display display--xl">{title}</h1>
        {kicker && <p className="er-page-hero__kicker">{kicker}</p>}
      </div>
    </section>);

}

/* =========================================================
   LEGAL PAGES — Privacy, Terms, Accessibility
   These are placeholder shells. Replace body copy with
   a lawyer-reviewed policy before going live.
   ========================================================= */
function PrivacyPage() {
  return (
    <>
      <PageHero
        eyebrow="Privacy policy"
        title={<>How we handle <em>your data.</em></>}
        kicker="Last updated: 19 May 2026." />
      
      <section className="er-section er-section--narrow">
        <div className="er-legal-body">
          <p><em>This is a placeholder. Replace with a lawyer-reviewed privacy policy before launch.</em></p>
          <h3>What we collect</h3>
          <p>When you join the newsletter we collect your email address. That is the only personal data we hold. We do not collect IP addresses, run third-party tracking, or place advertising cookies.</p>
          <h3>Who holds it</h3>
          <p>This site is operated by Velvet and Vice Press Pty Ltd, the publishing company behind the Eve Riche pen name. Your data is held by us and our newsletter provider; no one else.</p>
          <h3>How we use it</h3>
          <p>To send you the first chapter, occasional updates from us, and launch-day notifications. That is it. We never sell your address.</p>
          <h3>Where it lives</h3>
          <p>Our newsletter is hosted by [provider — Mailerlite / Beehiiv / etc.]. Their privacy policy applies in addition to this one.</p>
          <h3>How to delete it</h3>
          <p>One-click unsubscribe in every email. You can also email us at EveRicheWrites@gmail.com and we’ll remove you within 48 hours.</p>
          <h3>Cookies</h3>
          <p>We use a small set of essential cookies for site functionality. No advertising or analytics cookies.</p>
          <h3>Contact</h3>
          <p>Privacy questions: EveRicheWrites@gmail.com</p>
        </div>
      </section>
    </>);

}

function TermsPage() {
  return (
    <>
      <PageHero
        eyebrow="Terms of service"
        title={<>The fine <em>print.</em></>}
        kicker="Last updated: 19 May 2026." />
      
      <section className="er-section er-section--narrow">
        <div className="er-legal-body">
          <p><em>This is a placeholder. Replace with a lawyer-reviewed terms of service before launch.</em></p>
          <h3>Who we are</h3>
          <p>This site is operated by Velvet and Vice Press Pty Ltd, the publishing company behind the Eve Riche pen name. By using this site you agree to these terms.</p>
          <h3>Intellectual property</h3>
          <p>All written content, cover art, photography, and design on this site is the property of Velvet and Vice Press Pty Ltd and the authors writing as Eve Riche. You may share excerpts and quotes with attribution; you may not reproduce or redistribute without written permission.</p>
          <h3>Age requirement</h3>
          <p>Our books contain explicit content. You must be 18 or over to subscribe or to purchase our work. By signing up you confirm you are.</p>
          <h3>Content warnings</h3>
          <p>We list every content warning we know to list. Read them before you read us. See <a href="warnings.html">content warnings</a>.</p>
          <h3>Newsletter and bonuses</h3>
          <p>The first chapter download is a gift. All bonus material — Club exclusives, bonus POVs, the interactive quiz, the immersion guide — is delivered through the Eve Riche Club newsletter or as a free download on this site.</p>
          <h3>Disclaimers</h3>
          <p>We make no warranty about the site being uninterrupted or error-free. We are not liable for any indirect loss arising from your use of the site.</p>
          <h3>Changes</h3>
          <p>We may update these terms. Material changes will be announced in the newsletter.</p>
          <h3>Contact</h3>
          <p>Questions: EveRicheWrites@gmail.com</p>
        </div>
      </section>
    </>);

}

function AccessibilityPage() {
  return (
    <>
      <PageHero
        eyebrow="Accessibility"
        title={<>For <em>everyone.</em></>}
        kicker="We want this site to work for you. Tell us when it does not." />
      
      <section className="er-section er-section--narrow">
        <div className="er-legal-body">
          <p><em>This is a placeholder. Replace with a reviewed accessibility statement before launch.</em></p>
          <h3>Our standard</h3>
          <p>We aim to meet WCAG 2.1 Level AA. The site uses semantic HTML, keyboard-navigable controls, descriptive link text, and sufficient color contrast.</p>
          <h3>Where we know we fall short</h3>
          <p>The custom cursor on desktop is decorative; the default cursor is restored on touch devices and for users with reduced motion preferences.</p>
          <h3>Tell us</h3>
          <p>If something on this site is preventing you from reading or signing up, please email EveRicheWrites@gmail.com and we will fix it.</p>
          <h3>Alternative formats</h3>
          <p>Content-warning sheets and the first-chapter preview can be sent in plain-text or screen-reader-friendly format on request.</p>
        </div>
      </section>
    </>);

}

/* =========================================================
   ARC PAGE — application form for advance reader copies
   ========================================================= */
function ArcPage() {
  const [form, setForm] = useStateP({
    name: '',
    email: '',
    handle: '',
    platform: 'instagram',
    audience: '',
    why: ''
  });
  const [submitted, setSubmitted] = useStateP(false);
  const [error, setError] = useStateP('');

  function submit(e) {
    e.preventDefault();
    if (!form.name.trim()) {setError('We need a name to address you by.');return;}
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) {setError('That doesn’t look like an email.');return;}
    if (!form.why.trim() || form.why.trim().length < 30) {setError('Tell us a little more about why you want this one (at least a sentence or two).');return;}
    setError('');
    setSubmitted(true);
  }

  function update(k) {
    return (e) => setForm({ ...form, [k]: e.target.value });
  }

  return (
    <>
      <PageHero
        eyebrow="Advance reader copies"
        title={<>Read it <em>first.</em></>}
        kicker="Apply for an ARC of What We Bury. Selected readers receive a digital copy roughly four weeks ahead of release in exchange for an honest review on launch day." />
      

      <section className="er-section er-section--narrow">
        <div className="er-legal-body">
          {submitted ?
          <div className="er-form--success" style={{ marginTop: 0 }}>
              <strong>You’re on the list.</strong>
              <span>We’ll review applications about six weeks before release and email selected readers with the ARC, the content-warning sheet, and review guidelines. Either way, you’ll hear from us.</span>
            </div> :

          <>
              <h3>How it works</h3>
              <p>We send a small batch of digital ARCs four weeks ahead of each release. In exchange we ask for an honest review on launch day — Goodreads, Amazon, BookTok, Bookstagram, or your platform of choice. You don’t have to love the book. You do have to be honest.</p>
              <h3>Who we look for</h3>
              <p>Romance readers with a public review presence and a track record in dark romance, why-choose, or adjacent. New reviewers welcome — we read every application.</p>

              <form className="er-arc-form" onSubmit={submit}>
                <label className="er-arc-field">
                  <span>Your name</span>
                  <input value={form.name} onChange={update('name')} required />
                </label>

                <label className="er-arc-field">
                  <span>Email</span>
                  <input type="email" value={form.email} onChange={update('email')} required />
                </label>

                <div className="er-arc-row">
                  <label className="er-arc-field">
                    <span>Platform</span>
                    <select value={form.platform} onChange={update('platform')}>
                      <option value="instagram">Bookstagram</option>
                      <option value="tiktok">BookTok</option>
                      <option value="goodreads">Goodreads</option>
                      <option value="blog">Book blog</option>
                      <option value="amazon">Amazon reviews</option>
                      <option value="other">Other</option>
                    </select>
                  </label>
                  <label className="er-arc-field">
                    <span>Handle or URL</span>
                    <input value={form.handle} onChange={update('handle')} placeholder="@yourhandle or link" />
                  </label>
                </div>

                <label className="er-arc-field">
                  <span>Approximate audience size</span>
                  <input value={form.audience} onChange={update('audience')} placeholder="optional — followers, page views, average review count" />
                </label>

                <label className="er-arc-field">
                  <span>Why this book?</span>
                  <textarea
                  rows={5}
                  value={form.why}
                  onChange={update('why')}
                  placeholder="Tell us a sentence or two. What dark romance have you loved lately? What makes you want this one?" />
                
                </label>

                <p className="er-arc-fineprint">
                  By submitting you confirm you are 18 or over, you’ve read the <a href="warnings.html">content warnings</a>, and you understand selection is not guaranteed.
                </p>

                <button type="submit" className="er-cta er-cta--filled" style={{ alignSelf: 'flex-start' }}>
                  Apply for the ARC
                </button>

                {error && <div className="er-fineprint" style={{ color: 'var(--er-oxblood)' }}>{error}</div>}
              </form>
            </>
          }
        </div>
      </section>

      <Newsletter />
    </>);

}

/* =========================================================
   READING ORDER PAGE
   ========================================================= */
function ReadingOrderPage({ onOpenBook }) {
  const tracks = [
  {
    key: 'launch',
    title: 'The launch order',
    sub: 'How we recommend reading if you’re new to Eve Riche.',
    items: [
    { idx: 1, title: 'What We Bury', sub: 'The Hangmen Trilogy · Book One', when: '8 August 2026', id: 'what-we-bury' },
    { idx: 2, title: 'What We Burn', sub: 'The Hangmen Trilogy · Book Two', when: '8 September 2026', id: 'what-we-burn' },
    { idx: 3, title: 'What We Become', sub: 'The Hangmen Trilogy · Book Three', when: '8 October 2026', id: 'what-we-become' }]


  }];


  return (
    <>
      <PageHero
        eyebrow="Reading order"
        title={<>Where to <em>start.</em></>}
        kicker="Each series stands alone, but if you want the full braid, read in the order below. New readers should always begin with the Hangmen Trilogy." />
      

      <section className="er-section er-section--narrow">
        {tracks.map((track) =>
        <div key={track.key} style={{ marginBottom: 48 }}>
            <div className="er-section__head">
              <div>
                <div className="er-section__chapter"><span>{track.title}</span></div>
                <p className="serif-body" style={{ maxWidth: '46ch', marginTop: 8 }}>{track.sub}</p>
              </div>
            </div>

            <ol className="er-reading-order">
              {track.items.map((it) => {
              const book = BOOKS.find((b) => b.id === it.id);
              return (
                <li
                  key={it.idx}
                  className="er-reading-order__row"
                  onClick={() => book && onOpenBook && onOpenBook(book)}>
                  
                    <span className="er-reading-order__num">{String(it.idx).padStart(2, '0')}</span>
                    <div className="er-reading-order__body">
                      <h4>{it.title}</h4>
                      <p>{it.sub}</p>
                    </div>
                    <span className="er-reading-order__when">{it.when}</span>
                  </li>);

            })}
            </ol>
          </div>
        )}

        <p className="serif-body" style={{ textAlign: 'center', maxWidth: '46ch', margin: '0 auto', color: 'var(--er-ink-dim)' }}>
          The series can also be read in publication order, or by mood — but the braid is most satisfying read straight through.
        </p>
      </section>

      <Newsletter />
    </>);

}

/* =========================================================
   MEDIA CONTACT PAGE
   ========================================================= */
function MediaPage() {
  return (
    <>
      <PageHero
        eyebrow="Media contact"
        title={<>Press, podcasts, <em>permissions.</em></>}
        kicker="Reach us directly. We answer everything that includes a clear ask — usually within a week." />
      

      <section className="er-section er-section--narrow">
        <div className="er-legal-body">
          <h3>General media &amp; interviews</h3>
          <p>For interviews, podcast appearances, panels, festival invites and feature pieces, email <a href="mailto:EveRicheWrites@gmail.com">EveRicheWrites@gmail.com</a> with the subject line <em>“Media — [outlet name]”</em>.</p>
          <p>Please include the outlet, format, audience size, your timeline, and what you’d like to cover. We are a pen name — we do not give live video interviews on camera, but we are happy with audio, written Q&amp;A, or text-only podcasts.</p>

          <h3>Foreign &amp; translation rights</h3>
          <p>Foreign rights enquiries are handled through Velvet and Vice Press Pty Ltd. Email <a href="mailto:EveRicheWrites@gmail.com">EveRicheWrites@gmail.com</a> with the subject line <em>“Rights — [territory]”</em>.</p>

          <h3>Audio &amp; film/TV</h3>
          <p>All audio, audiobook narration, dramatic, film and TV rights enquiries also through <a href="mailto:EveRicheWrites@gmail.com">EveRicheWrites@gmail.com</a> with subject line <em>“Audio/Screen — [project]”</em>.</p>

          <h3>Permissions &amp; quoting</h3>
          <p>Short quotations with attribution don’t need permission. For excerpts longer than 300 words, please email us first.</p>

          <h3>Press kit</h3>
          <p>Available on request. The standard kit includes high-resolution cover art, the official synopsis, content-warning sheet, author bio (no photographs), and a list of comparable titles. Email and tell us what you need.</p>

          <h3>Speaking &amp; events</h3>
          <p>Selectively. We do a small number of online and in-person events each year. Pitch the audience, the venue, and the date.</p>
        </div>
      </section>
    </>);

}

Object.assign(window, {
  HomePage, AboutPage, BooksPage, SeriesPage, BonusesPage, WarningsPage, PageHero,
  PrivacyPage, TermsPage, AccessibilityPage, ArcPage, ReadingOrderPage, MediaPage
});