// ╔════════════════════════════════════════════════════════════╗
// ║  BSB · Pages génériques — partie 2                        ║
// ║  Breeding · Science · About · Network · Contact · Legal   ║
// ╚════════════════════════════════════════════════════════════╝

// ─── Breeding (B2B custom) ──────────────────────────────────
function PageBreeding({ theme, t, lang, setRoute }) {
  return (
    <main style={{ background: theme.bg, color: theme.ink, fontFamily: theme.body, minHeight: "100vh" }}>
      <PageHeader theme={theme}
        eyebrow={lang==="fr"?"04 / Production & Services · 4 métiers complémentaires":"04 / Production & Services · 4 complementary lines"}
        title={lang==="fr"
          ? <>Quatre métiers, <em style={{ color: theme.primary, fontStyle: theme.italic?"italic":"normal", fontWeight: theme.id==="C"?500:800 }}>une seule maison.</em></>
          : <>Four crafts, <em style={{ color: theme.primary, fontStyle: theme.italic?"italic":"normal", fontWeight: theme.id==="C"?500:800 }}>one house.</em></>}
        subtitle={lang==="fr"
          ? "Vente de semences certifiées · programmes de sélection sur mesure · prestations agronomiques · expertise logistique internationale. Une organisation pensée pour les filières tabac et chanvre, à toutes échelles."
          : "Certified seed sales · custom breeding programmes · agronomic services · international logistics expertise. Built for tobacco and hemp value-chains, at every scale."}
        action={
          <div style={{ background: theme.primary, color: theme.surface,
            borderRadius: theme.radiusLg, padding: 28 }}>
            {[
              { n: "70%", l: lang==="fr"?"vente semences":"seed sales" },
              { n: "30%", l: lang==="fr"?"programmes sur mesure":"custom breeding" },
              { n: "7", l: lang==="fr"?"pays · 1 service export":"countries · 1 export desk" },
            ].map((s, i) => (
              <div key={i} style={{ display: "flex", justifyContent: "space-between",
                alignItems: "baseline", padding: "10px 0",
                borderBottom: i < 2 ? "1px solid rgba(248,245,238,.15)" : "none" }}>
                <span style={{ fontFamily: theme.display, fontSize: 32,
                  fontWeight: theme.displayWeight, letterSpacing: "-.02em" }}>{s.n}</span>
                <span style={{ fontFamily: theme.body, fontSize: 13, opacity: .8 }}>{s.l}</span>
              </div>
            ))}
            <div style={{ marginTop: 20, paddingTop: 18,
              borderTop: "1px solid rgba(248,245,238,.18)",
              display: "flex", flexDirection: "column", gap: 8 }}>
              <a onClick={() => setRoute({ name: "contact", subject: "quote" })}
                style={{ cursor: "pointer", color: theme.surface,
                  fontFamily: theme.body, fontSize: 13, fontWeight: 700,
                  textDecoration: "underline", textUnderlineOffset: 4 }}>
                {lang==="fr"?"→ Demander un devis semences":"→ Request a seed quote"}
              </a>
              <a onClick={() => setRoute({ name: "contact", subject: "breeding" })}
                style={{ cursor: "pointer", color: theme.surface,
                  fontFamily: theme.body, fontSize: 13, fontWeight: 700,
                  textDecoration: "underline", textUnderlineOffset: 4 }}>
                {lang==="fr"?"→ Discuter d'un programme sur mesure":"→ Discuss a custom programme"}
              </a>
            </div>
          </div>
        }/>

      {/* 4 services overview */}
      <section style={{ padding: "72px 32px", background: theme.bg2,
        borderBottom: `1px solid ${theme.line}` }}>
        <div style={{ maxWidth: 1320, margin: "0 auto" }}>
          <Eyebrow theme={theme}>{lang==="fr"?"01 / Périmètre · 4 lignes de service":"01 / Scope · 4 service lines"}</Eyebrow>
          <h2 style={{ fontFamily: theme.display, fontSize: theme.h2Size, lineHeight: .95,
            fontWeight: theme.displayWeight, letterSpacing: theme.letterSpacing,
            margin: "0 0 40px", color: theme.ink, maxWidth: 820, textWrap: "pretty" }}>
            {lang==="fr"?"Le périmètre BSB — bien au-delà de la semence.":"BSB's scope — well beyond the seed."}
          </h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16 }}>
            {[
              { tag: "A", subject: "quote",
                t: lang==="fr"?"Vente de semences certifiées":"Certified seed sales",
                d: lang==="fr"
                  ? "16 variétés tabac (Virginie, Burley, Brun, Oriental, Kentucky) + 3 lignées chanvre. Semences brutes ou enrobées. Contrôle OGM systématique, tests laboratoire par lot, traçabilité complète. Expédition vers 7 pays, accompagnement administratif inclus."
                  : "16 tobacco cultivars (Virginia, Burley, Dark, Oriental, Kentucky) + 3 hemp lines. Bare or coated. Systematic GMO check, per-lot lab testing, full traceability. Shipping to 7 countries, admin support included.",
                cta: lang==="fr"?"Demander un devis":"Request a quote" },
              { tag: "B", subject: "breeding",
                t: lang==="fr"?"Programmes de sélection sur mesure":"Custom breeding programmes",
                d: lang==="fr"
                  ? "Pour cigarettiers, manufactures, instituts publics : développement de variétés à profil ciblé — nicotine, sucres, arômes, résistances spécifiques, débouché. 5 à 7 ans du brief à l'inscription. NDA standard, livrables contractualisés. 30 % de notre activité."
                  : "For cigarette makers, manufacturers and public institutes: targeted-profile cultivars — nicotine, sugars, aromas, specific resistances, end-use. 5–7 years brief to release. Standard NDA, contractual deliverables. 30% of revenue.",
                cta: lang==="fr"?"Déposer un brief":"Submit a brief" },
              { tag: "C", subject: "trials",
                t: lang==="fr"?"Prestations agronomiques":"Agronomic services",
                d: lang==="fr"
                  ? "Essais variétaux toutes cultures, essais plateaux, analyses chimiques (nicotine, sucres réducteurs, alcaloïdes mineurs), suivi sanitaire, audits de filière. Notre laboratoire interne et notre réseau de 14 sites d'essais ouverts à la prestation."
                  : "Variety trials across crops, plateau trials, chemical analyses (nicotine, reducing sugars, minor alkaloids), health monitoring, supply-chain audits. Our in-house lab and 14-site trial network open to service work.",
                cta: lang==="fr"?"Discuter d'un essai":"Discuss a trial" },
              { tag: "D", subject: "export",
                t: lang==="fr"?"Expertise logistique internationale":"International logistics expertise",
                d: lang==="fr"
                  ? "Réglementations export, phytosanitaire, douane, traçabilité, conditionnement adapté aux marchés cibles, accompagnement administratif sur les 7 pays principaux (Italie, Espagne, Allemagne, Belgique, Maroc, Tunisie, Bénin) et au-delà sur demande."
                  : "Export regulations, phytosanitary, customs, traceability, packaging tailored to target markets, admin support across the 7 main destinations (Italy, Spain, Germany, Belgium, Morocco, Tunisia, Benin) and beyond on request.",
                cta: lang==="fr"?"Accompagnement export":"Export support" },
            ].map((s, i) => (
              <article key={i} style={{ background: theme.surface, padding: 32,
                borderRadius: theme.radiusLg, border: `1px solid ${theme.line}`,
                display: "flex", flexDirection: "column", gap: 14 }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                  <span style={{ fontFamily: theme.mono, fontSize: 11, letterSpacing: ".22em",
                    color: theme.primary, fontWeight: 700 }}>SERVICE.{s.tag}</span>
                  <span style={{ fontFamily: theme.mono, fontSize: 10, color: theme.inkMuted,
                    letterSpacing: ".15em", fontWeight: 700 }}>BSB · 24100</span>
                </div>
                <h3 style={{ fontFamily: theme.display, fontSize: 26,
                  fontWeight: theme.id==="C"?500:700, color: theme.ink, margin: 0,
                  letterSpacing: "-.015em", lineHeight: 1.1 }}>{s.t}</h3>
                <p style={{ fontFamily: theme.body, fontSize: 14.5, lineHeight: 1.55,
                  color: theme.inkSoft, margin: 0, textWrap: "pretty" }}>{s.d}</p>
                <div style={{ marginTop: "auto", paddingTop: 12,
                  borderTop: `1px solid ${theme.line}`, display: "flex", gap: 12 }}>
                  <a onClick={() => setRoute({ name: "contact", subject: s.subject })}
                    style={{ cursor: "pointer", fontFamily: theme.body, fontSize: 13.5,
                      fontWeight: 700, color: theme.primary,
                      textDecoration: "underline", textUnderlineOffset: 4 }}>
                    {s.cta} →
                  </a>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* 4 steps */}
      <section style={{ padding: "80px 32px",
        borderBottom: `1px solid ${theme.line}` }}>
        <div style={{ maxWidth: 1320, margin: "0 auto" }}>
          <Eyebrow theme={theme}>{lang==="fr"?"02 / Process · Programmes sur mesure · 5–7 ans":"02 / Process · Custom breeding · 5–7 years"}</Eyebrow>
          <h2 style={{ fontFamily: theme.display, fontSize: theme.h2Size, lineHeight: .95,
            fontWeight: theme.displayWeight, letterSpacing: theme.letterSpacing,
            margin: "0 0 48px", color: theme.ink, maxWidth: 800, textWrap: "pretty" }}>
            {lang==="fr"?"Programmes sur mesure : de votre brief à l'inscription.":"Custom breeding: from brief to release."}
          </h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
            {BREEDING_STEPS.map((s, i) => (
              <div key={s.id} style={{ background: theme.surface,
                border: `1px solid ${theme.line}`, borderRadius: theme.radiusLg,
                padding: 28, minHeight: 240 }}>
                <div style={{ fontFamily: theme.mono, fontSize: 10, letterSpacing: ".22em",
                  color: theme.primary, fontWeight: 700 }}>STEP.0{i+1}</div>
                <div style={{ fontFamily: theme.display, fontSize: 40,
                  fontWeight: theme.displayWeight, color: theme.ink, marginTop: 12,
                  letterSpacing: "-.025em" }}>
                  {s.durationMo}<span style={{ fontSize: 14, opacity: .6,
                    marginLeft: 4, fontWeight: 500 }}>mo</span>
                </div>
                <h3 style={{ fontFamily: theme.display, fontSize: 21,
                  fontWeight: theme.id==="C"?500:700, color: theme.ink,
                  margin: "16px 0 8px", letterSpacing: "-.01em" }}>
                  {lang==="fr"?s.label_fr:s.label_en}
                </h3>
                <p style={{ fontFamily: theme.body, fontSize: 13, lineHeight: 1.5,
                  color: theme.inkSoft, margin: 0, textWrap: "pretty" }}>
                  {lang==="fr"?s.desc_fr:s.desc_en}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Cases */}
      <section style={{ padding: "80px 32px", background: theme.bg2 }}>
        <div style={{ maxWidth: 1320, margin: "0 auto" }}>
          <Eyebrow theme={theme}>{lang==="fr"?"03 / Cas anonymisés":"03 / Anonymous cases"}</Eyebrow>
          <h2 style={{ fontFamily: theme.display, fontSize: theme.h2Size, lineHeight: .95,
            fontWeight: theme.displayWeight, letterSpacing: theme.letterSpacing,
            margin: "0 0 32px", color: theme.ink, maxWidth: 800 }}>
            {lang==="fr"?"Trois projets récents.":"Three recent projects."}
          </h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
            {[
              { client: lang==="fr"?"Manufacture européenne":"European manufacturer", year: 2019,
                brief: lang==="fr"?"Profil orobanche-tolérant + nicotine maîtrisée":"Orobanche-tolerant + controlled nicotine",
                outcome: "RUBY · BSB×NiCoTa · 2019", status: lang==="fr"?"✓ INSCRITE":"✓ RELEASED" },
              { client: lang==="fr"?"Cigarettier US":"US cigarette maker", year: 2017,
                brief: lang==="fr"?"Black shank race 0 + nématodes à kystes":"Black shank race 0 + cyst nematodes",
                outcome: "BSB 6218 · 2022", status: lang==="fr"?"✓ INSCRITE":"✓ RELEASED" },
              { client: lang==="fr"?"Manufacture française":"French manufacturer", year: 2021,
                brief: lang==="fr"?"TMV + qualité Virginie aromatique":"TMV + aromatic Virginia quality",
                outcome: "BSB-XX · 2027", status: lang==="fr"?"● EN COURS":"● IN PROGRESS" },
            ].map((c, i) => (
              <article key={i} style={{ background: theme.surface, padding: 28,
                borderRadius: theme.radiusLg, border: `1px solid ${theme.line}`,
                display: "flex", flexDirection: "column", gap: 12 }}>
                <div style={{ fontFamily: theme.mono, fontSize: 10, letterSpacing: ".18em",
                  color: theme.primary, fontWeight: 700 }}>CASE.0{i+1} · {c.year}</div>
                <h3 style={{ fontFamily: theme.display, fontSize: 22,
                  fontWeight: theme.id==="C"?500:700, color: theme.ink,
                  margin: 0, letterSpacing: "-.01em" }}>{c.client}</h3>
                <div style={{ fontFamily: theme.mono, fontSize: 10, color: theme.inkMuted,
                  letterSpacing: ".15em", textTransform: "uppercase", marginTop: 4,
                  fontWeight: 700 }}>BRIEF</div>
                <p style={{ fontFamily: theme.body, fontSize: 14, lineHeight: 1.55,
                  color: theme.inkSoft, margin: 0, fontStyle: "italic", textWrap: "pretty" }}>
                  « {c.brief} »
                </p>
                <div style={{ marginTop: "auto", paddingTop: 14,
                  borderTop: `1px solid ${theme.line}` }}>
                  <div style={{ fontFamily: theme.mono, fontSize: 10, color: theme.inkMuted,
                    letterSpacing: ".15em", textTransform: "uppercase", fontWeight: 700,
                    marginBottom: 4 }}>OUTCOME</div>
                  <div style={{ fontFamily: theme.display, fontSize: 18,
                    fontWeight: theme.id==="C"?500:700, color: theme.ink }}>{c.outcome}</div>
                  <div style={{ fontFamily: theme.mono, fontSize: 11, letterSpacing: ".12em",
                    marginTop: 6, color: c.status.startsWith("✓") ? theme.primary : theme.accent,
                    fontWeight: 700 }}>
                    {c.status}
                  </div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* Brief form */}
      <section id="brief-form" style={{ padding: "80px 32px",
        borderTop: `1px solid ${theme.line}` }}>
        <div style={{ maxWidth: 1320, margin: "0 auto",
          display: "grid", gridTemplateColumns: "320px 1fr", gap: 56 }}>
          <div>
            <Eyebrow theme={theme}>{lang==="fr"?"04 / Brief":"04 / Brief"}</Eyebrow>
            <h2 style={{ fontFamily: theme.display, fontSize: 40, lineHeight: .95,
              fontWeight: theme.displayWeight, letterSpacing: theme.letterSpacing,
              margin: 0, color: theme.ink }}>
              {lang==="fr"?"Déposer un brief technique.":"Submit a technical brief."}
            </h2>
            <p style={{ fontFamily: theme.body, fontSize: 14, lineHeight: 1.55,
              color: theme.inkSoft, marginTop: 16, textWrap: "pretty" }}>
              {lang==="fr"
                ? "Pour pré-qualifier votre projet. Pas de réponse automatique : un de nos sélectionneurs revient vers vous sous 5 jours ouvrés."
                : "To pre-qualify your project. No automated reply: one of our breeders gets back within 5 working days."}
            </p>
          </div>
          <BriefForm theme={theme} lang={lang}/>
        </div>
      </section>
    </main>
  );
}

function BriefForm({ theme, lang }) {
  const [sent, setSent] = React.useState(false);
  const [crop, setCrop] = React.useState("tobacco");
  return (
    <form onSubmit={e => { e.preventDefault(); setSent(true); }}
      style={{ display: "flex", flexDirection: "column", gap: 18 }}>
      <Field theme={theme} label={"01 · " + (lang==="fr"?"Culture":"Crop")}>
        <PillGroup theme={theme} value={crop} onChange={setCrop}
          options={[
            ["tobacco", lang==="fr"?"Tabac":"Tobacco"],
            ["hemp", lang==="fr"?"Chanvre":"Hemp"],
            ["other", lang==="fr"?"Autre":"Other"],
          ]}/>
      </Field>
      <Field theme={theme} required full
        label={"02 · " + (lang==="fr"?"Profil cible (alcaloïdes, sucres, arômes…)":"Target profile (alkaloids, sugars, aroma…)")}>
        <Input theme={theme} required
          placeholder={lang==="fr"?"Ex. nicotine ≤ 1.6 %, sucres ≥ 18 %":"e.g. nicotine ≤ 1.6%, sugars ≥ 18%"}/>
      </Field>
      <Field theme={theme} full
        label={"03 · " + (lang==="fr"?"Résistances ciblées":"Targeted resistances")}>
        <Input theme={theme} placeholder="TMV, PVY, orobanche…"/>
      </Field>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
        <Field theme={theme} label={"04 · " + (lang==="fr"?"Zone de production":"Production area")}>
          <Input theme={theme} placeholder={lang==="fr"?"Sud-Ouest France…":"South-West France…"}/>
        </Field>
        <Field theme={theme} label={"05 · " + (lang==="fr"?"Débouché final":"End use")}>
          <Input theme={theme} placeholder="Cigarette, shisha…"/>
        </Field>
        <Field theme={theme} label={"06 · " + (lang==="fr"?"Volumes annuels":"Annual volumes")}>
          <Input theme={theme} placeholder={lang==="fr"?"Tonnes/an":"Tons/year"}/>
        </Field>
        <Field theme={theme} label={"07 · " + (lang==="fr"?"Horizon":"Horizon")}>
          <Input theme={theme} placeholder="2030+"/>
        </Field>
        <Field theme={theme} required label={"08 · " + (lang==="fr"?"Société":"Company")}>
          <Input theme={theme} required/>
        </Field>
        <Field theme={theme} required label={"09 · " + (lang==="fr"?"Nom + fonction":"Name + role")}>
          <Input theme={theme} required/>
        </Field>
        <Field theme={theme} required label="10 · Email">
          <Input theme={theme} type="email" required/>
        </Field>
        <Field theme={theme} label={"11 · " + (lang==="fr"?"Téléphone":"Phone")}>
          <Input theme={theme} type="tel"/>
        </Field>
      </div>
      <label style={{ display: "flex", alignItems: "center", gap: 12,
        fontFamily: theme.body, fontSize: 14, color: theme.inkSoft, cursor: "pointer" }}>
        <input type="checkbox" style={{ accentColor: theme.primary }}/>
        {lang==="fr"
          ? "Le projet est confidentiel — NDA souhaité avant échange."
          : "Project is confidential — NDA preferred before discussion."}
      </label>
      <Btn theme={theme} kind={sent ? "primary" : "primary"} type="submit" disabled={sent}>
        {sent
          ? `✓ ${lang==="fr"?"Brief reçu · Réponse sous 5 jours":"Brief received · Reply within 5 days"}`
          : `${lang==="fr"?"Transmettre le brief":"Submit brief"} →`}
      </Btn>
    </form>
  );
}

// ─── Science ─────────────────────────────────────────────────
function PageScience({ theme, t, lang, setRoute }) {
  const [yearFilter, setYearFilter] = React.useState("all");
  const years = [...new Set(PUBLICATIONS.map(p => p.year))].sort((a,b) => b-a);
  const filtered = yearFilter === "all" ? PUBLICATIONS : PUBLICATIONS.filter(p => p.year === parseInt(yearFilter));
  return (
    <main style={{ background: theme.bg, color: theme.ink, fontFamily: theme.body, minHeight: "100vh" }}>
      <PageHeader theme={theme}
        eyebrow={lang==="fr"?"04 / Science & R&D · 25 ans de données":"04 / Science & R&D · 25 years of data"}
        title={lang==="fr"
          ? <>Autorité <em style={{ color: theme.secondary, fontStyle: theme.italic?"italic":"normal", fontWeight: theme.id==="C"?500:800 }}>scientifique.</em></>
          : <>Scientific <em style={{ color: theme.secondary, fontStyle: theme.italic?"italic":"normal", fontWeight: theme.id==="C"?500:800 }}>authority.</em></>}
        subtitle={t("section_science_sub")}
        hero={theme.id==="B" ? { url: PHOTOS.lab_microscope, caption: lang==="fr"?"Laboratoire BSB · Génotypage":"BSB Lab · Genotyping"} : undefined}/>

      {/* Stats */}
      <section style={{ padding: "48px 32px", background: theme.bg2,
        borderBottom: `1px solid ${theme.line}` }}>
        <div style={{ maxWidth: 1320, margin: "0 auto",
          display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24 }}>
          {[
            { n: "25", l: lang==="fr"?"années de données":"years of data" },
            { n: "14", l: lang==="fr"?"sites d'essais 2026":"trial sites 2026" },
            { n: PUBLICATIONS.length, l: lang==="fr"?"publications":"publications" },
            { n: "7", l: lang==="fr"?"partenaires R&D":"R&D partners" },
          ].map((s, i) => (
            <div key={i}>
              <div style={{ fontFamily: theme.display, fontSize: 72, lineHeight: 1,
                fontWeight: theme.displayWeight, color: theme.secondary,
                letterSpacing: "-.035em" }}>{s.n}</div>
              <div style={{ fontFamily: theme.body, fontSize: 13, color: theme.inkSoft,
                marginTop: 12 }}>{s.l}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Trial network grid */}
      <section style={{ padding: "80px 32px" }}>
        <div style={{ maxWidth: 1320, margin: "0 auto" }}>
          <Eyebrow theme={theme} color={theme.secondary}>
            {lang==="fr"?"02 / Réseau d'essais · 2026":"02 / Trial network · 2026"}
          </Eyebrow>
          <h2 style={{ fontFamily: theme.display, fontSize: theme.h2Size, lineHeight: .95,
            fontWeight: theme.displayWeight, letterSpacing: theme.letterSpacing,
            margin: "0 0 40px", color: theme.ink, maxWidth: 800 }}>
            {lang==="fr"?"14 sites · 6 régions · 1 protocole.":"14 sites · 6 regions · 1 protocol."}
          </h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 12 }}>
            {["Bergerac", "Périgueux", "Sarlat", "Mirande", "Auch", "Agen", "Marmande",
              "Cahors", "Albi", "Toulouse", "Carcassonne", "Nîmes", "Avignon", "Salon"].map((city, i) => (
              <div key={i} style={{ aspectRatio: "1", background: theme.surface,
                border: `1px solid ${theme.secondary}`, borderRadius: theme.radius,
                padding: 12, position: "relative" }}>
                <div style={{ fontFamily: theme.mono, fontSize: 9, letterSpacing: ".1em",
                  color: theme.secondary, fontWeight: 700 }}>S.{String(i+1).padStart(2,"0")}</div>
                <div style={{ position: "absolute", bottom: 12, left: 12, right: 12,
                  fontFamily: theme.body, fontSize: 11, color: theme.ink, fontWeight: 600 }}>
                  {city}
                </div>
                <svg style={{ position: "absolute", top: "30%", right: "30%", width: 16, height: 16 }}>
                  <circle cx="8" cy="8" r="3" fill={theme.secondary}>
                    <animate attributeName="r" values="2;5;2" dur="2s" repeatCount="indefinite"/>
                  </circle>
                </svg>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Publications */}
      <section style={{ padding: "80px 32px", background: theme.bg2,
        borderTop: `1px solid ${theme.line}` }}>
        <div style={{ maxWidth: 1320, margin: "0 auto" }}>
          <div style={{ display: "flex", alignItems: "end", gap: 32, marginBottom: 32,
            flexWrap: "wrap" }}>
            <div>
              <Eyebrow theme={theme} color={theme.secondary}>
                {lang==="fr"?"03 / Publications":"03 / Publications"}
              </Eyebrow>
              <h2 style={{ fontFamily: theme.display, fontSize: theme.h2Size, lineHeight: .95,
                fontWeight: theme.displayWeight, letterSpacing: theme.letterSpacing,
                margin: 0, color: theme.ink }}>
                {lang==="fr"?"Publications.":"Publications."}
              </h2>
            </div>
            <div style={{ marginLeft: "auto" }}>
              <PillGroup theme={theme} value={yearFilter} onChange={setYearFilter}
                options={[["all", lang==="fr"?"Toutes":"All"], ...years.map(y => [String(y), String(y)])]}/>
            </div>
          </div>
          <div style={{ background: theme.surface, borderRadius: theme.radiusLg,
            border: `1px solid ${theme.line}`, overflow: "hidden" }}>
            {filtered.map((p, i) => (
              <article key={i} style={{ display: "grid",
                gridTemplateColumns: "100px 1fr auto", gap: 24, padding: "22px 28px",
                borderBottom: i < filtered.length - 1 ? `1px solid ${theme.line}` : "none",
                alignItems: "center", cursor: "pointer", transition: "background .2s" }}
                onMouseEnter={e => e.currentTarget.style.background = theme.primarySoft}
                onMouseLeave={e => e.currentTarget.style.background = "transparent"}>
                <span style={{ fontFamily: theme.display, fontSize: 32,
                  fontWeight: theme.displayWeight, color: theme.secondary,
                  letterSpacing: "-.02em" }}>{p.year}</span>
                <div>
                  <div style={{ fontFamily: theme.body, fontSize: 17, fontWeight: 600,
                    color: theme.ink, lineHeight: 1.3, textWrap: "pretty" }}>{p.title}</div>
                  <div style={{ fontFamily: theme.mono, fontSize: 11, color: theme.inkMuted,
                    marginTop: 6 }}>
                    {p.journal} · {p.authors}
                  </div>
                </div>
                <span style={{ fontFamily: theme.mono, fontSize: 11, color: theme.secondary,
                  letterSpacing: ".15em", fontWeight: 700 }}>PDF →</span>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* Partners */}
      <section style={{ padding: "80px 32px" }}>
        <div style={{ maxWidth: 1320, margin: "0 auto" }}>
          <Eyebrow theme={theme} color={theme.secondary}>
            {lang==="fr"?"04 / Partenaires R&D":"04 / R&D partners"}
          </Eyebrow>
          <h2 style={{ fontFamily: theme.display, fontSize: theme.h2Size, lineHeight: .95,
            fontWeight: theme.displayWeight, letterSpacing: theme.letterSpacing,
            margin: "0 0 32px", color: theme.ink }}>
            {lang==="fr"?"Partenaires R&D.":"R&D partners."}
          </h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
            {[
              { name: "INRAE", loc: "Bordeaux", topic: lang==="fr"?"Génétique tabac":"Tobacco genetics" },
              { name: "CTPS", loc: "Paris", topic: lang==="fr"?"Inscription variétés":"Variety registration" },
              { name: "CORESTA", loc: "Paris", topic: lang==="fr"?"Standards intl.":"Intl. standards" },
              { name: "INTERTAB", loc: "Bergerac", topic: lang==="fr"?"Filière tabac":"Tobacco industry" },
              { name: "INERIS", loc: "Verneuil", topic: lang==="fr"?"Toxicologie":"Toxicology" },
              { name: "INRA Toulouse", loc: "Toulouse", topic: lang==="fr"?"Phytopathologie":"Plant pathology" },
              { name: "Univ. Bordeaux", loc: "Bordeaux", topic: "Métabolomique" },
              { name: "Arvalis", loc: "Paris", topic: lang==="fr"?"Chanvre industriel":"Industrial hemp" },
            ].map((p, i) => (
              <div key={i} style={{ background: theme.surface, borderRadius: theme.radius,
                border: `1px solid ${theme.line}`, padding: 24, aspectRatio: "1.1",
                display: "flex", flexDirection: "column" }}>
                <div style={{ fontFamily: theme.mono, fontSize: 10, letterSpacing: ".18em",
                  color: theme.secondary, fontWeight: 700 }}>P.0{i+1}</div>
                <div style={{ fontFamily: theme.display, fontSize: 22,
                  fontWeight: theme.id==="C"?500:700, color: theme.ink, marginTop: "auto",
                  letterSpacing: "-.01em" }}>{p.name}</div>
                <div style={{ fontFamily: theme.mono, fontSize: 10, color: theme.secondary,
                  letterSpacing: ".15em", marginTop: 4, fontWeight: 700 }}>// {p.loc.toUpperCase()}</div>
                <div style={{ fontFamily: theme.body, fontSize: 12, color: theme.inkSoft,
                  marginTop: 6, textWrap: "pretty" }}>{p.topic}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

// ─── About ──────────────────────────────────────────────────
function PageAbout({ theme, t, lang, setRoute }) {
  return (
    <main style={{ background: theme.bg, color: theme.ink, fontFamily: theme.body, minHeight: "100vh" }}>
      <PageHeader theme={theme}
        eyebrow={lang==="fr"?"02 / Qui sommes-nous · Centre de recherche tabac depuis 1927":"02 / About us · Tobacco research centre since 1927"}
        title={lang==="fr"
          ? <>Bergerac, <em style={{ color: theme.primary, fontStyle: theme.italic?"italic":"normal", fontWeight: theme.id==="C"?500:800 }}>1927.</em> BSB, <em style={{ color: theme.primary, fontStyle: theme.italic?"italic":"normal", fontWeight: theme.id==="C"?500:800 }}>2015.</em></>
          : <>Bergerac, <em style={{ color: theme.primary, fontStyle: theme.italic?"italic":"normal", fontWeight: theme.id==="C"?500:800 }}>1927.</em> BSB, <em style={{ color: theme.primary, fontStyle: theme.italic?"italic":"normal", fontWeight: theme.id==="C"?500:800 }}>2015.</em></>}
        subtitle={lang==="fr"
          ? "Centre de recherche tabac fondé à Bergerac en 1927. Société Bergerac Seed & Breeding créée en 2015, détenue par les planteurs de tabac français. Seul semencier indépendant en France — non lié à un cigarettier. Une équipe de 10 personnes, ancrée vallée de la Dordogne, rayonnement international."
          : "Tobacco research centre founded in Bergerac in 1927. Bergerac Seed & Breeding company formed in 2015, owned by French tobacco growers. The only independent seed breeder in France — unaffiliated to any cigarette maker. A team of 10, rooted in the Dordogne valley, with international reach."}
        hero={theme.id==="B" ? { url: PHOTOS.bergerac_landscape, caption: lang==="fr"?"Vallée de la Dordogne · Bergerac":"Dordogne valley · Bergerac"} : undefined}/>

      {/* Timeline */}
      <section style={{ padding: "80px 32px", background: theme.bg2,
        borderBottom: `1px solid ${theme.line}` }}>
        <div style={{ maxWidth: 1320, margin: "0 auto" }}>
          <Eyebrow theme={theme}>{lang==="fr"?"02 / Timeline":"02 / Timeline"}</Eyebrow>
          <h2 style={{ fontFamily: theme.display, fontSize: theme.h2Size, lineHeight: .95,
            fontWeight: theme.displayWeight, letterSpacing: theme.letterSpacing,
            margin: "0 0 48px", color: theme.ink, maxWidth: 800 }}>
            {lang==="fr"?"23 ans en 7 dates.":"23 years in 7 dates."}
          </h2>
          <div style={{ position: "relative" }}>
            {[
              { y: 1927, t: lang==="fr"?"Centre de recherche tabac · Bergerac":"Tobacco research centre · Bergerac",
                d: lang==="fr"?"Création du programme de sélection sous tutelle Seita.":"Breeding programme founded under Seita oversight." },
              { y: 1989, t: lang==="fr"?"Premier contrat sur mesure":"First custom contract",
                d: lang==="fr"?"Manufacture européenne — profil nicotine ciblé.":"European manufacturer — targeted nicotine profile." },
              { y: 2003, t: lang==="fr"?"Filière reprise par les planteurs français":"Programme taken over by French growers",
                d: lang==="fr"?"Continuité INRA + Seita, ancrage Périgord.":"INRA + Seita continuity, Périgord roots." },
              { y: 2015, t: lang==="fr"?"Création de la société BSB":"BSB company incorporated",
                d: lang==="fr"?"Bergerac Seed & Breeding — propriété des tabaculteurs français, indépendance vs cigarettiers.":"Bergerac Seed & Breeding — owned by French growers, independent from cigarette makers." },
              { y: 2019, t: lang==="fr"?"Co-développement NiCoTa · RUBY · TOPAZ":"NiCoTa co-development · RUBY · TOPAZ",
                d: lang==="fr"?"Tolérance orobanche / mildiou.":"Orobanche / mildew tolerance." },
              { y: 2022, t: lang==="fr"?"Programme chanvre lancé":"Hemp programme launched",
                d: lang==="fr"?"Trois lignées : fibres, graines, cannabinoïdes.":"Three lines: fibre, grain, cannabinoid." },
              { y: 2026, t: lang==="fr"?"16 variétés + 3 lignées · 7 pays":"16 cultivars + 3 lines · 7 countries",
                d: lang==="fr"?"14 sites d'essais · 25 ans de données.":"14 trial sites · 25 years of data." },
            ].map((e, i) => (
              <div key={i} style={{ display: "grid", gridTemplateColumns: "120px 1fr",
                gap: 32, padding: "20px 0",
                borderTop: i > 0 ? `1px solid ${theme.line}` : "none" }}>
                <span style={{ fontFamily: theme.display, fontSize: 40,
                  fontWeight: theme.displayWeight, color: theme.primary,
                  letterSpacing: "-.03em", lineHeight: 1 }}>{e.y}</span>
                <div>
                  <div style={{ fontFamily: theme.body, fontSize: 18, fontWeight: 600,
                    color: theme.ink, lineHeight: 1.3, textWrap: "pretty" }}>{e.t}</div>
                  <div style={{ fontFamily: theme.body, fontSize: 14, color: theme.inkSoft,
                    marginTop: 4, textWrap: "pretty" }}>{e.d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Indépendance + Valeurs */}
      <section style={{ padding: "80px 32px",
        borderBottom: `1px solid ${theme.line}` }}>
        <div style={{ maxWidth: 1320, margin: "0 auto",
          display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56 }}>
          <div>
            <Eyebrow theme={theme}>{lang==="fr"?"03 / Indépendance":"03 / Independence"}</Eyebrow>
            <h2 style={{ fontFamily: theme.display, fontSize: 44, lineHeight: 1.02,
              fontWeight: theme.displayWeight, letterSpacing: theme.letterSpacing,
              margin: "0 0 20px", color: theme.ink, textWrap: "pretty" }}>
              {lang==="fr"
                ? <>Seul semencier français <em style={{ color: theme.primary, fontStyle: theme.italic?"italic":"normal", fontWeight: theme.id==="C"?500:800 }}>non lié</em> à un cigarettier.</>
                : <>The only French breeder <em style={{ color: theme.primary, fontStyle: theme.italic?"italic":"normal", fontWeight: theme.id==="C"?500:800 }}>unaffiliated</em> to a cigarette maker.</>}
            </h2>
            <p style={{ fontFamily: theme.body, fontSize: 16, lineHeight: 1.6,
              color: theme.inkSoft, margin: 0, textWrap: "pretty" }}>
              {lang==="fr"
                ? "Détenue par les tabaculteurs français, BSB conserve une liberté éditoriale totale sur ses programmes de sélection. Pas d'actionnaire industriel, pas d'agenda imposé. Là où Profigen est intégré à Philip Morris, nous restons un acteur autonome."
                : "Owned by French growers, BSB retains full editorial freedom over its breeding programmes. No industrial shareholder, no imposed agenda. While Profigen is integrated into Philip Morris, we remain an autonomous player."}
            </p>
            <div style={{ marginTop: 28, display: "grid", gridTemplateColumns: "repeat(2,1fr)", gap: 16 }}>
              {[
                ["100%", lang==="fr"?"actionnariat planteurs":"grower-owned"],
                ["0", lang==="fr"?"cigarettier au capital":"cigarette maker on cap"],
                ["3", lang==="fr"?"acteurs indépendants en Europe":"independents in Europe"],
                ["1/1", lang==="fr"?"seul en France":"sole in France"],
              ].map(([n, l], i) => (
                <div key={i} style={{ borderTop: `1px solid ${theme.line}`, paddingTop: 12 }}>
                  <div style={{ fontFamily: theme.display, fontSize: 36, lineHeight: 1,
                    fontWeight: theme.displayWeight, color: theme.primary,
                    letterSpacing: "-.02em" }}>{n}</div>
                  <div style={{ fontFamily: theme.body, fontSize: 12,
                    color: theme.inkSoft, marginTop: 4 }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
          <div>
            <Eyebrow theme={theme}>{lang==="fr"?"04 / Engagements":"04 / Commitments"}</Eyebrow>
            <h2 style={{ fontFamily: theme.display, fontSize: 44, lineHeight: 1.02,
              fontWeight: theme.displayWeight, letterSpacing: theme.letterSpacing,
              margin: "0 0 20px", color: theme.ink, textWrap: "pretty" }}>
              {lang==="fr"?"Nos cinq engagements.":"Our five commitments."}
            </h2>
            <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
              {[
                [lang==="fr"?"Qualité génétique":"Genetic quality",
                 lang==="fr"?"Contrôle de pureté variétale par marqueurs SNP sur chaque lot.":"Per-lot variety purity check by SNP markers."],
                [lang==="fr"?"Traçabilité totale":"Full traceability",
                 lang==="fr"?"Du croisement parental à la livraison, lot par lot.":"From parent cross to shipment, lot by lot."],
                [lang==="fr"?"Contrôle OGM systématique":"Systematic GMO check",
                 lang==="fr"?"Tests laboratoire sur chaque lot, certificat fourni.":"Per-lot lab testing, certificate provided."],
                [lang==="fr"?"Indépendance industrielle":"Industrial independence",
                 lang==="fr"?"Aucun cigarettier au capital, programmes pilotés en interne.":"No cigarette maker on cap, internally driven programmes."],
                [lang==="fr"?"Flexibilité internationale":"International flexibility",
                 lang==="fr"?"Accompagnement administratif et réglementaire sur 7 pays.":"Admin and regulatory support across 7 countries."],
              ].map(([t, d], i) => (
                <div key={i} style={{ padding: "16px 0",
                  borderTop: `1px solid ${theme.line}` }}>
                  <div style={{ display: "flex", gap: 16, alignItems: "baseline" }}>
                    <span style={{ fontFamily: theme.mono, fontSize: 11, color: theme.primary,
                      letterSpacing: ".15em", fontWeight: 700, minWidth: 32 }}>0{i+1}</span>
                    <div>
                      <div style={{ fontFamily: theme.body, fontSize: 17, fontWeight: 700,
                        color: theme.ink, lineHeight: 1.3 }}>{t}</div>
                      <div style={{ fontFamily: theme.body, fontSize: 14, color: theme.inkSoft,
                        marginTop: 4, textWrap: "pretty" }}>{d}</div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Team */}
      <section style={{ padding: "80px 32px" }}>
        <div style={{ maxWidth: 1320, margin: "0 auto" }}>
          <Eyebrow theme={theme}>{lang==="fr"?"05 / Équipe · 10 personnes":"05 / Team · 10 people"}</Eyebrow>
          <h2 style={{ fontFamily: theme.display, fontSize: theme.h2Size, lineHeight: .95,
            fontWeight: theme.displayWeight, letterSpacing: theme.letterSpacing,
            margin: "0 0 32px", color: theme.ink }}>
            {lang==="fr"?"L'équipe.":"The team."}
          </h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
            {[
              { n: "Jacques Pelletier", r: lang==="fr"?"Directeur · Sélectionneur":"Director · Breeder", since: 2003 },
              { n: "Claire Lemaire", r: "R&D · Génétique", since: 2008 },
              { n: "Marc Durand", r: "R&D · Chanvre", since: 2022 },
              { n: "Sophie Vidal", r: lang==="fr"?"Service technique":"Technical service", since: 2010 },
              { n: "Pierre Marsac", r: lang==="fr"?"Commercial · SO":"Commercial · SW", since: 2015 },
              { n: "Élise Foucher", r: lang==="fr"?"Commercial · CO":"Commercial · CW", since: 2017 },
              { n: "Nicolas Bertrand", r: lang==="fr"?"Production semences":"Seed production", since: 2012 },
              { n: "Anne Caillou", r: lang==="fr"?"Administration":"Administration", since: 2005 },
            ].map((p, i) => (
              <div key={i} style={{ background: theme.surface, borderRadius: theme.radius,
                border: `1px solid ${theme.line}`, padding: 24, aspectRatio: "1.1",
                display: "flex", flexDirection: "column" }}>
                <div style={{ width: 56, height: 56, borderRadius: 28,
                  background: `linear-gradient(135deg, ${theme.primary}, ${theme.secondary})`,
                  display: "flex", alignItems: "center", justifyContent: "center",
                  fontFamily: theme.display, fontSize: 18, fontWeight: 800,
                  color: theme.surface, marginBottom: "auto" }}>
                  {p.n.split(" ").map(x => x[0]).join("")}
                </div>
                <div style={{ fontFamily: theme.display, fontSize: 18,
                  fontWeight: theme.id==="C"?500:700, color: theme.ink,
                  letterSpacing: "-.01em", marginTop: 12 }}>{p.n}</div>
                <div style={{ fontFamily: theme.body, fontSize: 12, color: theme.inkSoft,
                  marginTop: 4, textWrap: "pretty" }}>{p.r}</div>
                <div style={{ fontFamily: theme.mono, fontSize: 10, letterSpacing: ".18em",
                  color: theme.primary, fontWeight: 700, marginTop: 8 }}>SINCE {p.since}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA strip */}
      <section style={{ padding: "72px 32px", background: theme.ink, color: theme.surface }}>
        <div style={{ maxWidth: 1320, margin: "0 auto",
          display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 56, alignItems: "center" }}>
          <h3 style={{ fontFamily: theme.display, fontSize: 44, lineHeight: 1.02,
            fontWeight: theme.displayWeight, letterSpacing: theme.letterSpacing,
            margin: 0, textWrap: "pretty" }}>
            {lang==="fr"
              ? <>Discutons de votre projet — <em style={{ color: theme.accent, fontStyle: theme.italic?"italic":"normal", fontWeight: theme.id==="C"?500:800 }}>réponse sous 48 h ouvrées.</em></>
              : <>Let's talk — <em style={{ color: theme.accent, fontStyle: theme.italic?"italic":"normal", fontWeight: theme.id==="C"?500:800 }}>reply within 48 working hours.</em></>}
          </h3>
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            {[
              ["quote", lang==="fr"?"Demander un devis semences":"Request a seed quote"],
              ["breeding", lang==="fr"?"Programme de sélection sur mesure":"Custom breeding programme"],
              ["trials", lang==="fr"?"Prestation agronomique / essai":"Agronomic service / trial"],
              ["press", lang==="fr"?"Presse · journaliste":"Press · journalist"],
            ].map(([s, l]) => (
              <a key={s} onClick={() => setRoute({ name: "contact", subject: s })}
                style={{ cursor: "pointer", display: "flex", justifyContent: "space-between",
                  alignItems: "center", padding: "14px 18px", borderRadius: theme.radius,
                  background: "rgba(248,245,238,.08)", color: theme.surface,
                  fontFamily: theme.body, fontSize: 15, fontWeight: 600 }}>
                <span>{l}</span><span style={{ opacity: .6 }}>→</span>
              </a>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

// ─── Network ────────────────────────────────────────────────
function PageNetwork({ theme, t, lang, setRoute }) {
  return (
    <main style={{ background: theme.bg, color: theme.ink, fontFamily: theme.body, minHeight: "100vh" }}>
      <PageHeader theme={theme}
        eyebrow={lang==="fr"?"06 / Distribution · 7 pays":"06 / Distribution · 7 countries"}
        title={lang==="fr"
          ? <>Réseau <em style={{ color: theme.primary, fontStyle: theme.italic?"italic":"normal", fontWeight: theme.id==="C"?500:800 }}>commercial.</em></>
          : <>Commercial <em style={{ color: theme.primary, fontStyle: theme.italic?"italic":"normal", fontWeight: theme.id==="C"?500:800 }}>network.</em></>}
        subtitle={t("section_map_sub")}
        hero={theme.id==="B" ? { url: PHOTOS.field_aerial, caption: lang==="fr"?"Parcelle d'essai · Sud-Ouest":"Trial plot · Sud-Ouest"} : undefined}/>

      <section style={{ padding: "48px 32px 80px" }}>
        <div style={{ maxWidth: 1320, margin: "0 auto" }}>
          <Eyebrow theme={theme}>{lang==="fr"?"02 / 7 régions · 7 contacts":"02 / 7 regions · 7 contacts"}</Eyebrow>
          <div style={{ background: theme.surface, borderRadius: theme.radiusLg,
            border: `1px solid ${theme.line}`, overflow: "hidden" }}>
            <div style={{ display: "grid",
              gridTemplateColumns: "60px 2fr 2fr 1fr 80px",
              background: theme.bg2, padding: "16px 24px", fontFamily: theme.mono,
              fontSize: 10, letterSpacing: ".18em", color: theme.primary,
              textTransform: "uppercase", fontWeight: 700 }}>
              <span>#</span><span>{lang==="fr"?"RÉGION":"REGION"}</span>
              <span>CONTACT</span><span>{lang==="fr"?"STATUT":"STATUS"}</span><span>→</span>
            </div>
            {COMMERCIAL_REGIONS.map((r, i) => (
              <div key={r.id} style={{ display: "grid",
                gridTemplateColumns: "60px 2fr 2fr 1fr 80px", padding: "20px 24px",
                alignItems: "center",
                borderTop: `1px solid ${theme.line}`,
                fontFamily: theme.body, fontSize: 14, color: theme.ink,
                background: r.primary ? theme.primarySoft : "transparent" }}>
                <span style={{ fontFamily: theme.mono, fontSize: 11, color: theme.primary,
                  fontWeight: 700 }}>{String(i+1).padStart(2, "0")}</span>
                <span style={{ fontFamily: theme.display, fontSize: 18,
                  fontWeight: theme.id==="C"?500:700, color: theme.ink }}>{r.label}</span>
                <span>{r.contact}<br/>
                  <span style={{ fontFamily: theme.mono, fontSize: 11, color: theme.inkMuted }}>
                    {r.contact.toLowerCase().replace(/\s/g, ".").replace(/[^\w.@-]/g, "")}@bergeracseed.com
                  </span>
                </span>
                <span style={{ fontFamily: theme.mono, fontSize: 10, letterSpacing: ".15em",
                  color: r.primary ? theme.primary : theme.inkSoft,
                  textTransform: "uppercase", fontWeight: 700 }}>
                  {r.primary ? "● PRIMARY" : "DIST."}
                </span>
                <a onClick={() => setRoute({ name: "contact", region: r.id })}
                  style={{ fontFamily: theme.mono, fontSize: 11, color: theme.primary,
                    letterSpacing: ".15em", cursor: "pointer", fontWeight: 700 }}>ASK →</a>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

// ─── Contact ────────────────────────────────────────────────
function PageContact({ theme, t, lang, setRoute, subject, region }) {
  const [sent, setSent] = React.useState(false);
  const [activeSubj, setActiveSubj] = React.useState(subject || "quote");
  return (
    <main style={{ background: theme.bg, color: theme.ink, fontFamily: theme.body, minHeight: "100vh" }}>
      <PageHeader theme={theme}
        eyebrow={lang==="fr"?"07 / Contact · Réponse 48h":"07 / Contact · Reply 48h"}
        title={lang==="fr"
          ? <>Demander <em style={{ color: theme.primary, fontStyle: theme.italic?"italic":"normal", fontWeight: theme.id==="C"?500:800 }}>un devis.</em></>
          : <>Request <em style={{ color: theme.primary, fontStyle: theme.italic?"italic":"normal", fontWeight: theme.id==="C"?500:800 }}>a quote.</em></>}/>

      <section style={{ padding: "48px 32px 100px" }}>
        <div style={{ maxWidth: 1320, margin: "0 auto",
          display: "grid", gridTemplateColumns: "360px 1fr", gap: 56 }}>
          <aside style={{ background: theme.bg2, borderRadius: theme.radiusLg,
            border: `1px solid ${theme.line}`, padding: 32, alignSelf: "start" }}>
            <Eyebrow theme={theme}>{lang==="fr"?"Coordonnées":"Address"}</Eyebrow>
            <div style={{ fontFamily: theme.body, fontSize: 16, lineHeight: 1.7, color: theme.ink }}>
              <strong>Bergerac Seed &amp; Breeding</strong><br/>
              La Tour, bd des poudriers<br/>
              24100 Bergerac · France
            </div>
            <div style={{ marginTop: 24, fontFamily: theme.mono, fontSize: 13,
              lineHeight: 1.8, color: theme.inkSoft }}>
              <span style={{ color: theme.primary, fontWeight: 700 }}>+33 5 53 57 12 34</span><br/>
              contact@bergeracseed.com<br/>
              <span style={{ color: theme.inkMuted }}>SIRET 451 234 567 00012</span>
            </div>
            <div style={{ marginTop: 32 }}>
              <Eyebrow theme={theme}>{lang==="fr"?"Horaires":"Hours"}</Eyebrow>
              <div style={{ fontFamily: theme.body, fontSize: 14, color: theme.inkSoft,
                lineHeight: 1.6 }}>
                {lang==="fr"
                  ? <>Lun – Ven · 8 h 30 – 17 h 30<br/>Réponse sous 48 h</>
                  : <>Mon – Fri · 8:30 – 5:30 PM<br/>Reply within 48 h</>}
              </div>
            </div>
          </aside>
          <form onSubmit={e => { e.preventDefault(); setSent(true); }}
            style={{ display: "flex", flexDirection: "column", gap: 18 }}>
            <Field theme={theme} label={"01 · " + (lang==="fr"?"Objet":"Subject")}>
              <PillGroup theme={theme} value={activeSubj} onChange={setActiveSubj}
                options={[
                  ["quote", lang==="fr"?"Devis tabac":"Tobacco quote"],
                  ["hemp", lang==="fr"?"Programme chanvre":"Hemp programme"],
                  ["breeding", lang==="fr"?"Création variétale":"Custom breeding"],
                  ["press", lang==="fr"?"Presse":"Press"],
                  ["other", lang==="fr"?"Autre":"Other"],
                ]}/>
            </Field>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
              <Field theme={theme} required label={"02 · " + (lang==="fr"?"Nom":"Name")}>
                <Input theme={theme} required/>
              </Field>
              <Field theme={theme} required label={"03 · " + (lang==="fr"?"Organisation":"Organisation")}>
                <Input theme={theme} required/>
              </Field>
              <Field theme={theme} required label="04 · Email">
                <Input theme={theme} type="email" required/>
              </Field>
              <Field theme={theme} label={"05 · " + (lang==="fr"?"Téléphone":"Phone")}>
                <Input theme={theme} type="tel"/>
              </Field>
              <Field theme={theme} required label={"06 · " + (lang==="fr"?"Pays":"Country")}>
                <Input theme={theme} required/>
              </Field>
              <Field theme={theme} label={"07 · " + (lang==="fr"?"Surface (ha)":"Area (ha)")}>
                <Input theme={theme}/>
              </Field>
            </div>
            <Field theme={theme} full label={"08 · " + (lang==="fr"?"Variétés d'intérêt + volume":"Variety + volume")}>
              <Textarea theme={theme} rows={4}
                placeholder={lang==="fr"?"Ex. 12 kg ITB 683 + 5 kg BSB 6209":"e.g. 12 kg ITB 683 + 5 kg BSB 6209"}/>
            </Field>
            <label style={{ display: "flex", alignItems: "center", gap: 12,
              fontFamily: theme.body, fontSize: 14, color: theme.inkSoft, cursor: "pointer" }}>
              <input type="checkbox" required style={{ accentColor: theme.primary }}/>
              {lang==="fr"
                ? "J'accepte que mes données soient utilisées pour traiter ma demande (RGPD)."
                : "I agree to my data being used to process this request (GDPR)."}
            </label>
            <Btn theme={theme} kind="primary" type="submit" disabled={sent}>
              {sent
                ? `✓ ${lang==="fr"?"Demande transmise · Merci":"Request sent · Thank you"}`
                : `${lang==="fr"?"Transmettre":"Submit"} →`}
            </Btn>
          </form>
        </div>
      </section>
    </main>
  );
}

// ─── Legal ──────────────────────────────────────────────────
function PageLegal({ theme, t, lang, setRoute }) {
  const sections = [
    { id: "editor", t: lang==="fr"?"01 · Éditeur":"01 · Publisher",
      p: lang==="fr"
        ? "Bergerac Seed & Breeding (BSB) — SAS au capital de 250 000 €, RCS Bergerac 451 234 567, SIRET 451 234 567 00012, TVA FR 12 451 234 567. Siège : La Tour, boulevard des poudriers, 24100 Bergerac, France. Directeur de la publication : Jacques Pelletier."
        : "Bergerac Seed & Breeding — SAS, share capital 250 000 €, RCS Bergerac 451 234 567, SIRET 451 234 567 00012, VAT FR 12 451 234 567. HQ: La Tour, bd des poudriers, 24100 Bergerac, France." },
    { id: "host", t: lang==="fr"?"02 · Hébergement":"02 · Hosting",
      p: lang==="fr"
        ? "Site hébergé en France par OVH SAS, 2 rue Kellermann, 59100 Roubaix."
        : "Hosted in France by OVH SAS, 2 rue Kellermann, 59100 Roubaix." },
    { id: "ip", t: lang==="fr"?"03 · Propriété intellectuelle":"03 · IP",
      p: lang==="fr"
        ? "L'ensemble du contenu de ce site est la propriété exclusive de BSB ou de ses partenaires. Toute reproduction est interdite sans autorisation écrite préalable. Les variétés mentionnées sont protégées par certificat d'obtention végétale (COV)."
        : "All content is the exclusive property of BSB or its partners. Reproduction is forbidden without prior written consent. Cultivars are protected by Plant Variety Rights (PVR)." },
    { id: "privacy", t: lang==="fr"?"04 · Confidentialité (RGPD)":"04 · Privacy (GDPR)",
      p: lang==="fr"
        ? "Les données collectées via les formulaires sont utilisées exclusivement pour répondre à votre demande. Conservées 3 ans après le dernier contact. Droit d'accès, de rectification et de suppression : dpo@bergeracseed.com."
        : "Data collected through forms is used solely to process your request. Retained 3 years after last contact. Access, rectification, deletion: dpo@bergeracseed.com." },
    { id: "cookies", t: lang==="fr"?"05 · Cookies":"05 · Cookies",
      p: lang==="fr"
        ? "Ce site utilise un cookie technique pour mémoriser votre choix de langue. Aucun cookie tiers n'est déposé sans votre consentement."
        : "This site uses a technical cookie to remember language preference. No third-party cookie is set without consent." },
    { id: "disputes", t: lang==="fr"?"06 · Litiges":"06 · Disputes",
      p: lang==="fr"
        ? "Tout litige relève de la compétence exclusive des tribunaux de Bergerac. Droit français applicable."
        : "Any dispute falls under the exclusive jurisdiction of the Bergerac courts. French law applies." },
  ];
  return (
    <main style={{ background: theme.bg, color: theme.ink, fontFamily: theme.body, minHeight: "100vh" }}>
      <PageHeader theme={theme}
        eyebrow="08 / Legal"
        title={lang==="fr"?"Mentions légales":"Legal notice"}/>

      <section style={{ padding: "48px 32px 100px" }}>
        <div style={{ maxWidth: 1320, margin: "0 auto",
          display: "grid", gridTemplateColumns: "260px 1fr", gap: 56 }}>
          <aside style={{ position: "sticky", top: 100, alignSelf: "start" }}>
            <Eyebrow theme={theme}>{lang==="fr"?"Sommaire":"Contents"}</Eyebrow>
            <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
              {sections.map(s => (
                <a key={s.id} href={`#${s.id}`}
                  style={{ fontFamily: theme.body, fontSize: 14, color: theme.inkSoft,
                    padding: "8px 12px", borderRadius: 6, textDecoration: "none",
                    display: "block", borderLeft: `2px solid ${theme.line}` }}>
                  {s.t}
                </a>
              ))}
            </div>
          </aside>
          <article style={{ fontFamily: theme.body, fontSize: 16, lineHeight: 1.65,
            color: theme.inkSoft, maxWidth: 720 }}>
            {sections.map((s, i) => (
              <div key={s.id} id={s.id} style={{ marginBottom: 40,
                paddingBottom: 32,
                borderBottom: i < sections.length - 1 ? `1px solid ${theme.line}` : "none" }}>
                <h2 style={{ fontFamily: theme.display, fontSize: 28,
                  fontWeight: theme.displayWeight, letterSpacing: theme.letterSpacing,
                  margin: "0 0 16px", color: theme.ink }}>{s.t}</h2>
                <p style={{ margin: 0, textWrap: "pretty" }}>{s.p}</p>
              </div>
            ))}
          </article>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, {
  PageBreeding, BriefForm, PageScience, PageAbout, PageNetwork, PageContact, PageLegal,
});