// book-content.jsx — contenu des chapitres + petites primitives de page
// Chaque export attaché à window pour pouvoir être consommé depuis book.jsx

// ─── Petites primitives décoratives ──────────────────────────────────────────

function Ornament({ variant = "centered" }) {
  if (variant === "rule") {
    return (
      <div className="ornament-rule">
        <span></span>
        <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
          <path d="M12 2 L13.5 10.5 L22 12 L13.5 13.5 L12 22 L10.5 13.5 L2 12 L10.5 10.5 Z"
                fill="currentColor" opacity="0.55" />
        </svg>
        <span></span>
      </div>
    );
  }
  return (
    <div className="ornament" aria-hidden="true">
      ❦
    </div>
  );
}

function Folio({ n, side }) {
  // numéro de page + filet courant
  return (
    <div className={`folio folio-${side}`}>
      <span className="folio-rule"></span>
      <span className="folio-num">{n}</span>
    </div>
  );
}

function RunningHead({ label, side }) {
  return (
    <div className={`running-head running-head-${side}`}>
      <span>{label}</span>
    </div>
  );
}

function Marginalia({ side, top, children, rotation = -2 }) {
  return (
    <div
      className={`marginalia marginalia-${side}`}
      style={{ top, transform: `rotate(${rotation}deg)` }}
    >
      {children}
    </div>
  );
}

// ─── COVER ───────────────────────────────────────────────────────────────────

function Cover() {
  return (
    <div className="page-content cover-page">
      <div className="cover-frame">
        <div className="cover-top">
          <div className="cover-mark">L'Encre Douce</div>
          <div className="cover-subline">— romans relus, choyés, polis —</div>
        </div>

        <div className="cover-center">
          <div className="cover-eyebrow">un roman en sept chapitres</div>
          <h1 className="cover-title">
            Les mots,<br/><em>autrement.</em>
          </h1>
          <div className="cover-ornament" aria-hidden="true">
            <svg viewBox="0 0 80 14" width="160" height="28">
              <path d="M2 7 H30 M50 7 H78" stroke="currentColor" strokeWidth="0.6" fill="none"/>
              <path d="M40 1.5 L42 7 L40 12.5 L38 7 Z" fill="currentColor" opacity="0.7"/>
              <circle cx="32" cy="7" r="1" fill="currentColor" opacity="0.5"/>
              <circle cx="48" cy="7" r="1" fill="currentColor" opacity="0.5"/>
            </svg>
          </div>
        </div>

        <div className="cover-bottom">
          <div className="cover-author">
            <span className="cover-by">par</span>
            <span className="cover-name">Camille Aubert</span>
            <span className="cover-role">Lectrice · Correctrice</span>
          </div>
        </div>

        <div className="cover-corner cover-corner-tl" aria-hidden="true"></div>
        <div className="cover-corner cover-corner-tr" aria-hidden="true"></div>
        <div className="cover-corner cover-corner-bl" aria-hidden="true"></div>
        <div className="cover-corner cover-corner-br" aria-hidden="true"></div>
      </div>
    </div>
  );
}

function BackCover() {
  return (
    <div className="page-content cover-page back-cover-page">
      <div className="cover-frame">
        <div className="back-cover-inner">
          <div className="back-quote">
            «&nbsp;Un manuscrit n'est jamais fini.<br/>
            Il s'apaise quand on a su l'écouter.&nbsp;»
          </div>
          <Ornament variant="rule" />
          <div className="back-meta">
            <div>L'Encre Douce · 2026</div>
            <div className="back-meta-sub">Lectrice-Correctrice · France</div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── INSIDE COVER / HALF-TITLE ───────────────────────────────────────────────

function HalfTitle() {
  return (
    <div className="page-content half-title">
      <Folio n="i" side="left" />
      <div className="half-title-inner">
        <div className="half-title-line">— L'Encre Douce —</div>
        <Ornament />
        <p className="dedication">
          <em>Pour celles et ceux qui écrivent la nuit,<br/>
          et doutent au petit matin.</em>
        </p>
      </div>
    </div>
  );
}

// ─── TABLE OF CONTENTS ───────────────────────────────────────────────────────

function TOC({ onGoTo }) {
  const items = [
    { n: "I",   title: "Qui suis-je",          page: 9,  spread: 2 },
    { n: "II",  title: "Mes services",         page: 21, spread: 3 },
    { n: "III", title: "Mes tarifs",           page: 37, spread: 4 },
    { n: "IV",  title: "Ma méthode",           page: 53, spread: 5 },
    { n: "V",   title: "Questions fréquentes", page: 71, spread: 6 },
    { n: "VI",  title: "Écrivons-nous",        page: 89, spread: 7 },
  ];
  return (
    <div className="page-content toc-page">
      <RunningHead label="Sommaire" side="right" />
      <h2 className="toc-title">Sommaire</h2>
      <Ornament variant="rule" />
      <ol className="toc-list">
        {items.map((it) => (
          <li key={it.n} className="toc-item">
            <button
              type="button"
              className="toc-row"
              onClick={() => onGoTo && onGoTo(it.spread)}
            >
              <span className="toc-num">Chapitre {it.n}</span>
              <span className="toc-dots" aria-hidden="true"></span>
              <span className="toc-title-text">{it.title}</span>
              <span className="toc-page">{it.page}</span>
            </button>
          </li>
        ))}
      </ol>
      <Folio n="1" side="right" />
    </div>
  );
}

// ─── CHAPTER INTRO (left page) ───────────────────────────────────────────────

function ChapterIntro({ num, title, lead, dropcap, folio, head }) {
  return (
    <div className="page-content chapter-intro">
      <RunningHead label={head} side="left" />
      <div className="chapter-intro-inner">
        <div className="chapter-num">Chapitre {num}</div>
        <h2 className="chapter-title">{title}</h2>
        <Ornament variant="rule" />
        <p className="chapter-lead">
          <span className="dropcap">{dropcap}</span>
          {lead}
        </p>
      </div>
      <Folio n={folio} side="left" />
    </div>
  );
}

// ─── ABOUT BODY (right of chapter II spread) ────────────────────────────────

function AboutBody() {
  return (
    <div className="page-content body-page">
      <RunningHead label="L'Encre Douce" side="right" />
      <div className="body-inner">
        <p>
          Je m'appelle <strong>Camille</strong>. Je lis des romans pour les aider à
          devenir eux-mêmes. C'est un métier de patience, de tendresse — et d'un peu
          d'audace, parfois, pour proposer la coupe qui fera respirer un paragraphe.
        </p>
        <p>
          Depuis bientôt huit ans, j'accompagne des autrices et des auteurs
          indépendants. Romance, littérature blanche, young adult, témoignages :
          j'aime toutes les voix, du moment qu'elles ont une&nbsp;chose à dire.
        </p>
        <p>
          Mon bureau, c'est une petite pièce qui sent le thé tiède et le papier.
          Mes outils&nbsp;: un crayon HB, le Bescherelle, le Robert, et une oreille
          que je tâche de garder neuve à chaque manuscrit.
        </p>
        <Ornament variant="rule" />
        <p className="signature">
          <span className="signature-name">Camille</span>
          <span className="signature-place">— quelque part en Bretagne</span>
        </p>
      </div>
      <Folio n="20" side="right" />
    </div>
  );
}

// ─── SERVICES BODY ───────────────────────────────────────────────────────────

function ServicesBody() {
  const services = [
    {
      title: "Correction orthographique",
      sub: "La couche essentielle",
      body: "Orthographe, grammaire, conjugaison, ponctuation. Je traque les coquilles avec une douceur d'horloger — sans jamais toucher à votre voix.",
      tag: "à partir de 4,50 €/page",
    },
    {
      title: "Relecture stylistique",
      sub: "Pour que votre texte respire",
      body: "Répétitions, lourdeurs, glissements de point de vue, rythme. Je note en marge, je propose, je ne réécris jamais à votre place.",
      tag: "à partir de 7 €/page",
    },
    {
      title: "Mise en page",
      sub: "Prêt à imprimer ou publier",
      body: "Mise en forme intérieure soignée pour broché, ePub ou PDF. Typographie, veuves, orphelines, sommaire — un texte qui se lit déjà avec les yeux.",
      tag: "sur devis",
    },
  ];
  return (
    <div className="page-content body-page services-body">
      <RunningHead label="Mes services" side="right" />
      <div className="body-inner">
        <p className="body-lede">
          Trois manières de m'occuper de votre manuscrit. À choisir seules, ou à
          combiner — beaucoup de textes traversent les trois.
        </p>
        <ul className="service-list">
          {services.map((s, i) => (
            <li key={i} className="service-card">
              <div className="service-head">
                <span className="service-num">{String(i + 1).padStart(2, "0")}</span>
                <div>
                  <h4 className="service-title">{s.title}</h4>
                  <div className="service-sub"><em>{s.sub}</em></div>
                </div>
              </div>
              <p className="service-body">{s.body}</p>
              <div className="service-tag">{s.tag}</div>
            </li>
          ))}
        </ul>
      </div>
      <Folio n="36" side="right" />
    </div>
  );
}

// ─── PRICING BODY ────────────────────────────────────────────────────────────

function PricingBody() {
  return (
    <div className="page-content body-page pricing-body">
      <RunningHead label="Mes tarifs" side="right" />
      <div className="body-inner">
        <p className="body-lede">
          Les tarifs s'entendent par page standardisée (1&nbsp;500 signes, espaces
          comprises). Un devis personnalisé suit toujours un échange — votre projet
          n'est pas une grille.
        </p>

        <table className="price-table">
          <thead>
            <tr><th>Prestation</th><th>Tarif</th></tr>
          </thead>
          <tbody>
            <tr><td>Correction simple<br/><em>orthographe & grammaire</em></td><td>4,50&nbsp;€&nbsp;<span>/ page</span></td></tr>
            <tr><td>Relecture stylistique<br/><em>style, rythme, cohérence</em></td><td>7,00&nbsp;€&nbsp;<span>/ page</span></td></tr>
            <tr><td>Pack complet<br/><em>correction + style</em></td><td>9,50&nbsp;€&nbsp;<span>/ page</span></td></tr>
            <tr><td>Mise en page intérieure</td><td>sur devis</td></tr>
          </tbody>
        </table>

        <div className="price-note">
          <strong>Première page offerte.</strong> Pour que vous puissiez voir
          comment je travaille, et moi entendre votre voix, avant de nous engager.
        </div>
      </div>
      <Folio n="52" side="right" />
    </div>
  );
}

// ─── PROCESS BODY ────────────────────────────────────────────────────────────

function ProcessBody() {
  const steps = [
    { n: "1", title: "Un mot, un café", body: "Vous m'écrivez. Je lis les premières pages, et on échange — par mail ou en visio — sur votre projet et vos attentes." },
    { n: "2", title: "Le devis",        body: "Je vous renvoie un devis précis, gratuit, sans engagement. Vous prenez le temps qu'il vous faut." },
    { n: "3", title: "La lecture",      body: "Je travaille en deux passes : d'abord la voix d'ensemble, ensuite le détail. J'annote en marge, jamais sur le texte." },
    { n: "4", title: "Le retour",       body: "Vous recevez votre manuscrit annoté, accompagné d'une lettre de lecture qui explique mes choix." },
    { n: "5", title: "L'envol",         body: "On reste en lien pour les dernières questions. Votre texte est prêt — il vous appartient, plus que jamais." },
  ];
  return (
    <div className="page-content body-page process-body">
      <RunningHead label="Ma méthode" side="right" />
      <div className="body-inner">
        <ol className="process-list">
          {steps.map((s) => (
            <li key={s.n} className="process-step">
              <div className="process-num">{s.n}</div>
              <div className="process-content">
                <h4 className="process-title">{s.title}</h4>
                <p>{s.body}</p>
              </div>
            </li>
          ))}
        </ol>
      </div>
      <Folio n="70" side="right" />
    </div>
  );
}

// ─── FAQ BODY ────────────────────────────────────────────────────────────────

function FAQBody() {
  const qs = [
    {
      q: "Combien de temps pour un manuscrit ?",
      a: "Comptez deux à quatre semaines pour un texte de 300 pages, selon mon planning. Je m'engage toujours sur une date au moment du devis.",
    },
    {
      q: "Travaillez-vous sur Word ou autre ?",
      a: "Sur Word et sur LibreOffice, avec le suivi des modifications. Sur demande, j'annote aussi des PDF, ou je travaille sur Scrivener.",
    },
    {
      q: "Et si je n'aime pas vos retours ?",
      a: "Mes annotations sont des propositions, jamais des verdicts. Vous gardez la main sur chaque virgule. On en parle, on ajuste — c'est votre texte.",
    },
    {
      q: "Acceptez-vous les genres « difficiles » ?",
      a: "Romance, érotique, fantasy, autobiographie, témoignage : j'accueille tous les genres dès lors qu'on s'y respecte. J'ai juste besoin que ce soit honnête.",
    },
  ];
  return (
    <div className="page-content body-page faq-body">
      <RunningHead label="Questions" side="right" />
      <div className="body-inner">
        <dl className="faq-list">
          {qs.map((it, i) => (
            <div key={i} className="faq-item">
              <dt>
                <span className="faq-q-mark">Q.</span>
                {it.q}
              </dt>
              <dd>{it.a}</dd>
            </div>
          ))}
        </dl>
      </div>
      <Folio n="88" side="right" />
    </div>
  );
}

// ─── CONTACT BODY ────────────────────────────────────────────────────────────

function ContactBody() {
  const [sent, setSent] = React.useState(false);
  const [form, setForm] = React.useState({ name: "", email: "", project: "" });

  const submit = (e) => {
    e.preventDefault();
    if (!form.name || !form.email) return;
    setSent(true);
  };

  return (
    <div className="page-content body-page contact-body">
      <RunningHead label="Écrivons-nous" side="right" />
      <div className="body-inner">
        {!sent ? (
          <>
            <p className="body-lede">
              Une question, un manuscrit à confier, ou simplement l'envie de
              discuter d'un projet&nbsp;? Écrivez-moi, je lis tout.
            </p>
            <form className="contact-form" onSubmit={submit}>
              <label className="field">
                <span>Votre prénom</span>
                <input
                  type="text"
                  value={form.name}
                  onChange={(e) => setForm({ ...form, name: e.target.value })}
                  placeholder="Camille"
                />
              </label>
              <label className="field">
                <span>Votre adresse</span>
                <input
                  type="email"
                  value={form.email}
                  onChange={(e) => setForm({ ...form, email: e.target.value })}
                  placeholder="vous@exemple.fr"
                />
              </label>
              <label className="field">
                <span>Quelques mots sur votre texte</span>
                <textarea
                  rows="3"
                  value={form.project}
                  onChange={(e) => setForm({ ...form, project: e.target.value })}
                  placeholder="Un roman de 280 pages, romance contemporaine…"
                />
              </label>
              <button type="submit" className="contact-submit">
                Envoyer le pli
              </button>
            </form>
          </>
        ) : (
          <div className="contact-sent">
            <Ornament />
            <h3>Merci, {form.name || "vous"}.</h3>
            <p>
              Votre message m'est arrivé. Je vous réponds sous 48&nbsp;heures,
              parfois moins quand le thé est déjà chaud.
            </p>
            <p className="signature">
              <span className="signature-name">Camille</span>
            </p>
          </div>
        )}
      </div>
      <Folio n="104" side="right" />
    </div>
  );
}

function ContactSideInfo() {
  // left page of contact spread — sober coordinates
  return (
    <div className="page-content body-page contact-side">
      <RunningHead label="Coordonnées" side="left" />
      <div className="body-inner">
        <div className="chapter-num">Chapitre VI</div>
        <h2 className="chapter-title">Écrivons-nous</h2>
        <Ornament variant="rule" />
        <p className="chapter-lead">
          <span className="dropcap">U</span>n manuscrit voyage mieux quand
          il est attendu. Voici comment me trouver — j'aime autant la première
          ligne d'un mail qu'une feuille pliée dans une enveloppe.
        </p>
        <ul className="contact-coords">
          <li><span className="coord-label">Courriel</span><span>camille@lencredouce.fr</span></li>
          <li><span className="coord-label">Téléphone</span><span>+33 6 12 34 56 78</span></li>
          <li><span className="coord-label">Instagram</span><span>@lencredouce</span></li>
          <li><span className="coord-label">Adresse</span><span>Quimper, Bretagne</span></li>
        </ul>
      </div>
      <Folio n="103" side="left" />
    </div>
  );
}

// ─── END / SIGNATURE PAGE ────────────────────────────────────────────────────

function EndPage() {
  return (
    <div className="page-content end-page">
      <div className="end-inner">
        <div className="end-fin">— Fin —</div>
        <Ornament />
        <p className="end-thanks">
          Merci d'avoir tourné ces pages.<br/>
          À bientôt, peut-être, autour d'un manuscrit.
        </p>
        <div className="end-signature">
          <div className="signature-script">Camille</div>
          <div className="signature-rule"></div>
          <div className="signature-meta">Camille Aubert · L'Encre Douce</div>
        </div>
      </div>
      <Folio n="∞" side="left" />
    </div>
  );
}

// expose to window
Object.assign(window, {
  Cover, BackCover,
  HalfTitle, TOC,
  ChapterIntro,
  AboutBody, ServicesBody, PricingBody, ProcessBody, FAQBody,
  ContactBody, ContactSideInfo,
  EndPage,
  Ornament, Folio, RunningHead, Marginalia,
});