// pages-main.jsx — Home, Résidence, Orange pages

// ──────────────────────────────────────────────────────────────────────────
// HOME
// ──────────────────────────────────────────────────────────────────────────

function HomePage({ navigate }) {
  const [plaquetteOpen, setPlaquetteOpen] = React.useState(false);
  return (
    <React.Fragment>
      {/* HERO */}
      <section style={{
        position: "relative", minHeight: "calc(100vh - 76px)",
        background: "var(--bg)", overflow: "hidden"
      }}>
        <div style={{
          maxWidth: 1280, margin: "0 auto", padding: "48px 48px 80px",
          display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: 56, alignItems: "center",
          minHeight: "calc(100vh - 76px)"
        }}>
          <div>
            <Eyebrow>Programme neuf · Orange · Vaucluse</Eyebrow>
            <h1 style={{
              fontFamily: "var(--font-h)", fontSize: "clamp(56px, 7vw, 104px)",
              lineHeight: 0.95, letterSpacing: "-0.02em",
              fontWeight: 400, color: "var(--ink)", margin: 0
            }}>
              Huit appartements,<br />
              <span style={{ fontStyle: "italic", color: "var(--accent)" }}>une lumière</span><br />
              du Sud.
            </h1>
            <p style={{
              fontFamily: "var(--font-b)", fontSize: 18, lineHeight: 1.6,
              color: "var(--ink2)", maxWidth: 480, marginTop: 32
            }}>NOVA Résidence est une adresse confidentielle au cœur d'Orange — 8 appartements T2 de 41 ou 48 m² habitables, tous avec loggia couverte de 9 m² plein sud, livrés au quatrième trimestre 2026. Vente classique : règlement intégral chez le notaire à la livraison, aucun appel de fonds pendant le chantier.

            </p>
            <div style={{ display: "flex", gap: 16, marginTop: 40, flexWrap: "wrap" }}>
              <Button variant="primary" size="lg" onClick={() => navigate("appartements")} icon="→">
                Découvrir les lots
              </Button>
              <Button variant="ghost" size="lg" onClick={() => setPlaquetteOpen(true)} icon="✉">
                Recevoir la plaquette
              </Button>
            </div>
            <div style={{
              display: "flex", gap: 40, marginTop: 56,
              paddingTop: 32, borderTop: "1px solid var(--line)"
            }}>
              <Stat value="8" label="appartements T2" />
              <Stat value="dès 170 500€" label="prix de lancement" />
              <Stat value="T4 2026" label="livraison prévue" />
            </div>
          </div>
          <div style={{ position: "relative", height: "100%", minHeight: 560 }}>
            <Placeholder src="assets/photo-facade-sud-est-v2.png" label="NOVA Résidence — façade sud-est" ratio="3/4" style={{ height: "100%" }} />
            <div className="nv-hero-quote" style={{
              position: "absolute", bottom: -24, left: -24,
              background: "var(--surface)", padding: "20px 24px",
              border: "1px solid var(--line)",
              boxShadow: "0 24px 60px -20px rgba(31,27,22,.18)",
              maxWidth: 240
            }}>
              <div style={{ fontFamily: "var(--font-h)", fontSize: 22, fontStyle: "italic", color: "var(--accent)", lineHeight: 1 }}>
                « Une parenthèse provençale »
              </div>
              <div style={{ fontFamily: "var(--font-b)", fontSize: 12, color: "var(--muted)", marginTop: 8, letterSpacing: "0.04em" }}>
                LE BIEN VIVRE ORANGEOIS
              </div>
            </div>
          </div>
        </div>
        {/* corner mark */}
        <div className="nv-corner-mark" style={{
          position: "absolute", top: 24, right: 48,
          fontFamily: "var(--font-b)", fontSize: 11, letterSpacing: "0.24em",
          color: "var(--muted)", textTransform: "uppercase"
        }}>
</div>
      </section>

      {/* INTRO STRIP */}
      <Section bg="bg2" label="Le programme">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 64, alignItems: "start" }}>
          <h2 style={{ fontFamily: "var(--font-h)", fontSize: "clamp(40px, 4.5vw, 64px)",
              lineHeight: 1.05, letterSpacing: "-0.01em", fontWeight: 400,
              color: "var(--ink)", margin: 0
            }}>
            Une petite résidence,<br />pensée pour la lumière et le calme.
          </h2>
          <div>
            <p style={{ fontFamily: "var(--font-b)", fontSize: 17, lineHeight: 1.7, color: "var(--ink2)", margin: 0 }}>Implantée à deux pas du centre historique, NOVA Résidence regroupe 8 appartements T2 répartis sur deux niveaux (R+1 et R+2), chacun avec loggia couverte de 9 m², exposée sud, sud-est, sud-ouest selon le lot : enduit ton doré clair, tuiles canal terre cuite, volets roulants électriques.

            </p>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32, marginTop: 40 }}>
              <Feature icon="◐" title="Pompe à chaleur gainable" desc="Climatisation réversible incluse, ventilation traversante naturelle nord‑sud." />
              <Feature icon="◇" title="Parking couvert sécurisé" desc="Une place couverte fermée par lot incluse. Option box sur demande." />
              <Feature icon="◯" title="Loggia 9 m² plein sud" desc="Couverte, abritée du mistral comme du soleil zénithal." />
              <Feature icon="✦" title="Centre à 10 min à pied" desc="Arc de Triomphe 8 min, Théâtre Antique 13 min, gare SNCF 18 min, A7/A9 8 min en voiture." />
            </div>
          </div>
        </div>
      </Section>

      {/* IMAGE FULL BLEED */}
      <section style={{ position: "relative" }}>
        <Placeholder src="assets/photo-facade-sud-1.png" label="NOVA Résidence — façade sud" ratio="21/9" />
        <div className="nv-bleed-caption" style={{
          position: "absolute", left: "50%", bottom: 48, transform: "translateX(-50%)",
          background: "var(--bg)", padding: "32px 48px",
          textAlign: "center", maxWidth: 640
        }}>
          <div className="nv-bleed-quote" style={{ fontFamily: "var(--font-h)", fontSize: 28, fontStyle: "italic", color: "var(--ink)", lineHeight: 1.3 }}>
            « À Orange, la lumière n'est pas un détail — c'est l'architecture du quotidien. »
          </div>
        </div>
      </section>

      {/* APPARTEMENT TEASER */}
      <Section bg="bg">
        <div
          onClick={() => navigate("appartements")}
          style={{
            position: "relative", overflow: "hidden",
            background: "var(--deep)", color: "var(--bg)",
            border: "1px solid var(--line)", cursor: "pointer",
            transition: "box-shadow .3s ease, transform .3s ease"
          }}
          onMouseEnter={(e) => {e.currentTarget.style.boxShadow = "0 40px 80px -40px rgba(31,27,22,.5)";e.currentTarget.style.transform = "translateY(-3px)";}}
          onMouseLeave={(e) => {e.currentTarget.style.boxShadow = "none";e.currentTarget.style.transform = "translateY(0)";}}>
          <div style={{ padding: "64px 72px 48px" }}>
            <div style={{
              fontFamily: "var(--font-b)", fontSize: 11, fontWeight: 500,
              letterSpacing: "0.24em", textTransform: "uppercase",
              color: "var(--accent)", marginBottom: 24,
              display: "flex", alignItems: "center", gap: 12
            }}>
              <span style={{ width: 24, height: 1, background: "var(--accent)" }}></span>
              Les appartements
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 40, flexWrap: "wrap" }}>
              <h2 style={{ fontFamily: "var(--font-h)", fontSize: "clamp(36px, 4vw, 56px)", lineHeight: 1.05, fontWeight: 400, color: "var(--bg)", margin: 0 }}>
                Huit T2, deux typologies,<br /><span style={{ fontStyle: "italic", color: "var(--accent)" }}>tous plein sud</span>.
              </h2>
              <p style={{ fontFamily: "var(--font-b)", fontSize: 17, lineHeight: 1.7, color: "rgba(242,235,221,.75)", margin: 0, maxWidth: 440 }}>
                Du T2 de 41 m² au T2 d'angle de 48 m², de 170 500 € à 200 500 €. Filtrez par étage, orientation et budget, et découvrez chaque plan en détail.
              </p>
            </div>
            <div style={{ marginTop: 40 }}>
              <Button variant="primary" size="lg" onClick={(e) => {e.stopPropagation();navigate("appartements");}} icon="→">
                Voir les 8 lots
              </Button>
            </div>
          </div>
          <div style={{
            display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 4,
            borderTop: "1px solid rgba(255,255,255,.12)", padding: 4
          }}>
            <img src="assets/teaser-salon.png" alt="Séjour d'un T2 NOVA"
              style={{ width: "100%", aspectRatio: "4/3", objectFit: "cover", display: "block" }} />
            <img src="assets/teaser-chambre.png" alt="Chambre d'un T2 NOVA"
              style={{ width: "100%", aspectRatio: "4/3", objectFit: "cover", display: "block" }} />
            <img src="assets/teaser-loggia.png" alt="Loggia plein sud d'un T2 NOVA"
              style={{ width: "100%", aspectRatio: "4/3", objectFit: "cover", display: "block" }} />
          </div>
        </div>
      </Section>

      {/* LIVING IN ORANGE */}
      <Section bg="surface" label="Orange & son art de vivre">
        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 64, alignItems: "center" }}>
          <Placeholder src="assets/photo-theatre-antique-jour.webp" label="Théâtre Antique d'Orange" ratio="4/5" />
          <div>
            <h2 style={{ fontFamily: "var(--font-h)", fontSize: "clamp(36px, 4vw, 56px)", lineHeight: 1.05, fontWeight: 400, color: "var(--ink)", margin: 0 }}>
              Habiter Orange,<br />c'est habiter <span style={{ fontStyle: "italic", color: "var(--accent)" }}>2 000 ans</span> de Sud.
            </h2>
            <p style={{ fontFamily: "var(--font-b)", fontSize: 17, lineHeight: 1.7, color: "var(--ink2)", marginTop: 24 }}>
              Théâtre Antique inscrit à l'UNESCO, marchés provençaux du jeudi, vignobles de Châteauneuf-du-Pape à 15 min, Mont Ventoux en ligne de mire. Orange n'est pas une ville à voir : c'est un endroit où s'installer.
            </p>
            <div style={{ display: "flex", flexDirection: "column", gap: 1, marginTop: 32, background: "var(--line)" }}>
              <PlaceLine label="Arc de Triomphe" value="8 min à pied" />
              <PlaceLine label="Centre-ville / commerces" value="10 min à pied" />
              <PlaceLine label="Théâtre Antique" value="13 min à pied" />
              <PlaceLine label="Gare SNCF" value="18 min à pied" />
              <PlaceLine label="Autoroute A7 / A9" value="8 min en voiture" />
              <PlaceLine label="Avignon TGV" value="25 min en voiture" />
            </div>
            <div style={{ marginTop: 32 }}>
              <Button variant="ghost" onClick={() => navigate("orange")}>Explorer le quartier →</Button>
            </div>
          </div>
        </div>
      </Section>

      {/* INVEST CTA */}
      <Section bg="deep">
        <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 64, alignItems: "center" }}>
          <div>
            <div style={{
              fontFamily: "var(--font-b)", fontSize: 11, fontWeight: 500,
              letterSpacing: "0.24em", textTransform: "uppercase",
              color: "var(--accent)", marginBottom: 24,
              display: "flex", alignItems: "center", gap: 12
            }}>
              <span style={{ width: 24, height: 1, background: "var(--accent)" }}></span>
              Pour investir
            </div>
            <h2 style={{ fontFamily: "var(--font-h)", fontSize: "clamp(36px, 4vw, 56px)", lineHeight: 1.05, fontWeight: 400, color: "var(--bg)", margin: 0 }}>
              <span style={{ fontStyle: "italic", color: "var(--accent)" }}>∼ 4&nbsp;%</span> de rentabilité brute, sur les 8 lots.
            </h2>
            <p style={{ fontFamily: "var(--font-b)", fontSize: 17, lineHeight: 1.7, color: "rgba(242,235,221,.75)", marginTop: 24, maxWidth: 540 }}>
              Orange est un marché tendu du Vaucluse, porté par un tissu économique solide — base aérienne 115, centre hospitalier, zones d'activité, jeunes actifs en mobilité. La grille officielle de NOVA s'échelonne de <strong>170 500 €</strong> (T2 41 m²) à <strong>200 500 €</strong> (T2 48 m² angle sud-est) avec des loyers estimés entre 580 et 660 € HT mensuels.
            </p>
            <div style={{ marginTop: 40 }}>
              <Button variant="primary" size="lg" onClick={() => navigate("investir")}>Lancer le simulateur →</Button>
            </div>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
            <BigStat dark value="3,95 – 4,11 %" label="rendement brut estimé · 8 lots" />
            <BigStat dark value="580 – 660 €" label="loyer mensuel estimé HT" />
            <BigStat dark value="Vente classique" label="règlement à la livraison" />
          </div>
        </div>
      </Section>

      {/* CONTACT TEASER */}
      <Section bg="bg">
        <div style={{ textAlign: "center", maxWidth: 720, margin: "0 auto" }}>
          <Eyebrow style={{ justifyContent: "center" }}>Prochaine étape</Eyebrow>
          <h2 style={{ fontFamily: "var(--font-h)", fontSize: "clamp(40px, 5vw, 72px)", lineHeight: 1.05, fontWeight: 400, color: "var(--ink)", margin: 0 }}>
            Contactez-nous<br /><span style={{ fontStyle: "italic", color: "var(--accent)" }}>pour en discuter</span>.
          </h2>
          <p style={{ fontFamily: "var(--font-b)", fontSize: 17, lineHeight: 1.7, color: "var(--ink2)", marginTop: 24 }}>Notre conseillère Anne Magnoni vous accompagne sur RDV — à la résidence ou aux bureaux de Myamo Développement, 4-6 place de la République, à Arles.

          </p>
          <div style={{ marginTop: 40, display: "flex", gap: 16, justifyContent: "center", flexWrap: "wrap" }}>
            <Button variant="primary" size="lg" onClick={() => setPlaquetteOpen(true)} icon="✉">Recevoir la plaquette</Button>
          </div>
        </div>
      </Section>

      {plaquetteOpen && <PlaquetteModal onClose={() => setPlaquetteOpen(false)} />}
    </React.Fragment>);

}

function Stat({ value, label }) {
  return (
    <div>
      <div style={{ fontFamily: "var(--font-h)", fontSize: 32, color: "var(--accent)", lineHeight: 1, fontStyle: "italic" }}>{value}</div>
      <div style={{ fontFamily: "var(--font-b)", fontSize: 12, color: "var(--muted)", marginTop: 8, letterSpacing: "0.06em", textTransform: "uppercase" }}>{label}</div>
    </div>);

}

function TeaserStat({ value, label }) {
  return (
    <div style={{ borderTop: "1px solid rgba(255,255,255,.14)", paddingTop: 16 }}>
      <div style={{ fontFamily: "var(--font-h)", fontSize: 40, color: "var(--accent)", lineHeight: 1, fontStyle: "italic" }}>{value}</div>
      <div style={{ fontFamily: "var(--font-b)", fontSize: 12, color: "rgba(242,235,221,.65)", marginTop: 8, letterSpacing: "0.08em", textTransform: "uppercase" }}>{label}</div>
    </div>);

}

function BigStat({ value, label, dark }) {
  return (
    <div style={{
      padding: "28px 32px",
      background: dark ? "rgba(255,255,255,.04)" : "var(--surface)",
      border: `1px solid ${dark ? "rgba(255,255,255,.08)" : "var(--line)"}`
    }}>
      <div style={{ fontFamily: "var(--font-h)", fontSize: 48, lineHeight: 1, color: dark ? "var(--bg)" : "var(--ink)" }}>{value}</div>
      <div style={{ fontFamily: "var(--font-b)", fontSize: 12, color: dark ? "rgba(242,235,221,.6)" : "var(--muted)", marginTop: 12, letterSpacing: "0.08em", textTransform: "uppercase" }}>{label}</div>
    </div>);

}

function Feature({ icon, title, desc }) {
  return (
    <div>
      <div style={{ fontSize: 22, color: "var(--accent)", marginBottom: 12 }}>{icon}</div>
      <div style={{ fontFamily: "var(--font-h)", fontSize: 22, color: "var(--ink)", marginBottom: 6 }}><b>{title}</b></div>
      <div style={{ fontFamily: "var(--font-b)", fontSize: 14, color: "var(--ink2)", lineHeight: 1.6 }}>{desc}</div>
    </div>);

}

function PlaceLine({ label, value }) {
  return (
    <div style={{
      display: "flex", justifyContent: "space-between",
      padding: "16px 0", background: "var(--surface)",
      paddingLeft: 16, paddingRight: 16,
      fontFamily: "var(--font-b)", fontSize: 14
    }}>
      <span style={{ color: "var(--ink2)" }}>{label}</span>
      <span style={{ color: "var(--ink)", fontWeight: 500 }}>{value}</span>
    </div>);

}

function LotPreview({ lot, navigate }) {
  return (
    <article
      onClick={() => navigate("appartements")}
      style={{
        background: "var(--surface)", border: "1px solid var(--line)",
        cursor: "pointer", transition: "transform .25s ease, box-shadow .25s ease"
      }}
      onMouseEnter={(e) => {e.currentTarget.style.transform = "translateY(-4px)";e.currentTarget.style.boxShadow = "0 30px 60px -30px rgba(31,27,22,.25)";}}
      onMouseLeave={(e) => {e.currentTarget.style.transform = "translateY(0)";e.currentTarget.style.boxShadow = "none";}}>
      
      <Placeholder src={`assets/${lot.plan}`} label={`plan T2 — lot ${lot.id}`} ratio="4/3" style={{ background: "#FBF9F4" }} />
      <div style={{ padding: 24 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
          <div style={{ fontFamily: "var(--font-h)", fontSize: 28, color: "var(--ink)" }}>Lot {lot.id}</div>
          <StatusBadge status={lot.status} />
        </div>
        <div style={{ fontFamily: "var(--font-b)", fontSize: 14, color: "var(--ink2)", marginTop: 8 }}>
          T2 · {lot.surface}&nbsp;m² · loggia {lot.loggia}&nbsp;m² · {lot.orientation}
        </div>
        <div style={{
          marginTop: 24, paddingTop: 16, borderTop: "1px solid var(--line)",
          display: "flex", justifyContent: "space-between", alignItems: "baseline"
        }}>
          <span style={{ fontFamily: "var(--font-b)", fontSize: 12, color: "var(--muted)", textTransform: "uppercase", letterSpacing: "0.08em" }}>À partir de</span>
          <span style={{ fontFamily: "var(--font-h)", fontSize: 24, color: "var(--accent)" }}>{fmtPrice(lot.price)}</span>
        </div>
      </div>
    </article>);

}

function StatusBadge({ status }) {
  const map = {
    available: { label: "Disponible", color: "var(--accent)" },
    reserved: { label: "Réservé", color: "var(--ink2)" },
    optioned: { label: "Optionné", color: "var(--ink2)" },
    sold: { label: "Vendu", color: "var(--muted)" }
  };
  const s = map[status] || map.available;
  return (
    <span style={{
      fontFamily: "var(--font-b)", fontSize: 10,
      letterSpacing: "0.12em", textTransform: "uppercase",
      color: s.color, padding: "4px 8px",
      border: `1px solid ${s.color}`
    }}>{s.label}</span>);

}

// ──────────────────────────────────────────────────────────────────────────
// RÉSIDENCE
// ──────────────────────────────────────────────────────────────────────────

function ResidencePage() {
  const [planOpen, setPlanOpen] = React.useState(false);
  return (
    <React.Fragment>
      <PageHero
        eyebrow="La Résidence"
        title={<>Huit T2<br /><i style={{ color: "var(--accent)" }}>au cœur d'Orange.</i></>}
        intro="Une architecture sobre, contemporaine, dialoguant avec la pierre blonde et les tuiles d'Orange. NOVA Résidence est conçue comme un petit ensemble familial — pas un programme." />
      

      <Section bg="bg" label="Situation">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, border: "1px solid var(--line)" }}>
          <div style={{ position: "relative", minHeight: 420 }}>
            <iframe
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1936.4794906956881!2d4.808086983394857!3d44.14201597853578!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12b597001354fd53%3A0x14954c18c9b78779!2sR%C3%A9sidence%20Nova!5e1!3m2!1sfr!2sfr!4v1780316673654!5m2!1sfr!2sfr"
              title="Localisation NOVA Résidence — 4 rue Jean-Jacques Rousseau, Orange"
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              allowFullScreen
              style={{ position: "absolute", inset: 0, width: "100%", height: "100%", border: 0 }} />
          </div>
          <div style={{ background: "var(--deep)", color: "var(--bg)", padding: "56px 56px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
            <div style={{ fontFamily: "var(--font-b)", fontSize: 11, fontWeight: 500, letterSpacing: "0.24em", textTransform: "uppercase", color: "var(--accent)", marginBottom: 20, display: "flex", alignItems: "center", gap: 12 }}>
              <span style={{ width: 24, height: 1, background: "var(--accent)" }}></span>
              L'adresse
            </div>
            <h2 style={{ fontFamily: "var(--font-h)", fontSize: "clamp(30px, 3vw, 44px)", lineHeight: 1.1, fontWeight: 400, color: "var(--bg)", margin: 0 }}>
              4 rue Jean-Jacques Rousseau,<br /><span style={{ fontStyle: "italic", color: "var(--accent)" }}>84100 Orange</span>.
            </h2>
            <p style={{ fontFamily: "var(--font-b)", fontSize: 16, lineHeight: 1.7, color: "rgba(242,235,221,.75)", marginTop: 24 }}>
              Au calme dans un quartier résidentiel, entre l'avenue de Champlain et la rue Jean-Jacques Rousseau, à quelques minutes du cœur historique d'Orange.
            </p>
          </div>
        </div>
      </Section>

      <Section bg="bg2" label="Vue aérienne & plan de masse">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.5fr", gap: 48, alignItems: "center" }}>
          <div>
            <h2 style={{ fontFamily: "var(--font-h)", fontSize: "clamp(30px, 3vw, 46px)", lineHeight: 1.1, fontWeight: 400, color: "var(--ink)", margin: 0 }}>
              Le projet,<br /><span style={{ fontStyle: "italic", color: "var(--accent)" }}>sur le terrain</span>.
            </h2>
            <p style={{ fontFamily: "var(--font-b)", fontSize: 16, lineHeight: 1.7, color: "var(--ink2)", marginTop: 24 }}>
              Glissez le curseur pour passer de la photo aérienne au plan de masse : deux bâtiments en R+1 et R+2, entre l'avenue de Champlain et la rue Jean-Jacques Rousseau, avec entrées piétons et véhicules distinctes.
            </p>
            <div style={{ marginTop: 28 }}>
              <Button variant="ghost" onClick={() => setPlanOpen(true)}>Voir le plan détaillé →</Button>
            </div>
          </div>
          <BeforeAfter
            beforeSrc="assets/vue-aerienne-zoom.png"
            afterSrc="assets/plan-de-masse-crop.png"
            beforeLabel="Vue aérienne"
            afterLabel="Plan de masse" />
        </div>
        {planOpen && <Lightbox src="assets/plan-de-masse-v2.png" alt="Plan de masse détaillé — NOVA Résidence" onClose={() => setPlanOpen(false)} />}
      </Section>

      <Section bg="bg" label="Le projet architectural">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "start" }}>
          <div style={{ aspectRatio: "1/1", overflow: "hidden", border: "1px solid var(--line)", background: "#000" }}>
            <img src="assets/photo-facade-projet.jpeg" alt="Façade de la résidence — angle sud-est"
            style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center top", display: "block" }} />
          </div>
          <div>
            <h2 style={{ fontFamily: "var(--font-h)", fontSize: "clamp(32px, 3.5vw, 48px)", lineHeight: 1.1, fontWeight: 400, color: "var(--ink)", margin: 0 }}>
              Deux niveaux, un parking couvert et sécurisé,<br />une vraie loggia pour chacun.
            </h2>
            <p style={{ fontFamily: "var(--font-b)", fontSize: 16, lineHeight: 1.7, color: "var(--ink2)", marginTop: 24 }}>
              Le bâtiment reprend les codes du Vaucluse — enduit ton doré clair, toiture en tuiles canal terre cuite. Lignes contemporaines, sans pastiche, sans décor superflu.
            </p>
            <p style={{ fontFamily: "var(--font-b)", fontSize: 16, lineHeight: 1.7, color: "var(--ink2)", marginTop: 16 }}>Chaque T2 prolonge son séjour par une loggia couverte de 9 m² plein sud — vraie pièce à vivre extérieure, utilisable de mars à novembre, abritée du mistral comme du soleil zénithal. Ventilation traversante naturelle nord-sud, climatisation réversible par pompe à chaleur gainable.

            </p>
          </div>
        </div>
      </Section>

      <Section bg="surface" label="Le calendrier">
        <div style={{ position: "relative" }}>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0 }}>
            <Timeline step="01" date="2025" label="Lancement du projet" done />
            <Timeline step="02" date="T4 2025" label="Démarrage des travaux" done />
            <Timeline step="03" date="T2 2026" label="Hors d'eau / hors d'air" done />
            <Timeline step="04" date="T4 2026" label="Livraison · remise des clés" />
          </div>
          {/* Marqueur « nous sommes ici », entre les étapes 3 et 4.
                    4 colonnes égales → centres aux 12.5 / 37.5 / 62.5 / 87.5 %.
                    Le milieu de l'intervalle 3–4 est donc à 75 %. */}
          <div style={{
            position: "absolute", top: 0, left: "75%",
            transform: "translateX(-50%)",
            display: "flex", flexDirection: "column", alignItems: "center", gap: 4,
            pointerEvents: "none"
          }}>
            <div style={{
              width: 14, height: 14, borderRadius: "50%",
              background: "var(--accent)",
              boxShadow: "0 0 0 6px color-mix(in srgb, var(--accent) 25%, transparent)",
              marginTop: 7
            }}></div>
            <div style={{
              fontFamily: "var(--font-b)", fontSize: 10, fontWeight: 600,
              letterSpacing: "0.16em", textTransform: "uppercase",
              color: "var(--accent)", whiteSpace: "nowrap",
              marginTop: 2
            }}>Nous sommes ici</div>
          </div>
        </div>
        <div style={{
          marginTop: 48, padding: "24px 32px",
          background: "var(--bg2)", border: "1px solid var(--line)",
          fontFamily: "var(--font-b)", fontSize: 14, lineHeight: 1.6, color: "var(--ink2)"
        }}>
          <strong style={{ color: "var(--ink)" }}>Vente classique.</strong> Aucun appel de fonds pendant les travaux. Compromis signé chez le notaire à la réservation, règlement intégral à la signature de l'acte authentique, une fois la résidence livrée au quatrième trimestre 2026.
        </div>
      </Section>
    </React.Fragment>);

}

function PrestationCol({ title, items }) {
  return (
    <div>
      <h3 style={{ fontFamily: "var(--font-h)", fontSize: 28, color: "var(--ink)", margin: "0 0 24px", lineHeight: 1.1 }}>{title}</h3>
      <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column" }}>
        {items.map((it, i) =>
        <li key={i} style={{
          fontFamily: "var(--font-b)", fontSize: 15, color: "var(--ink2)",
          padding: "14px 0", borderTop: "1px solid var(--line)",
          display: "flex", alignItems: "flex-start", gap: 12
        }}>
            <span style={{ color: "var(--accent)", marginTop: 2 }}>·</span>
            <span>{it}</span>
          </li>
        )}
      </ul>
    </div>);

}

function Timeline({ step, date, label, current, done }) {
  const filled = current || done;
  const fill = filled ? "var(--accent)" : "var(--bg2)";
  const ring = filled ? "var(--accent)" : "var(--line)";
  return (
    <div style={{ position: "relative", paddingRight: 24 }}>
      <div style={{
        height: 1, background: "var(--line)", position: "absolute",
        top: 14, left: 0, right: 0
      }}></div>
      <div style={{
        width: 28, height: 28, borderRadius: "50%",
        background: fill,
        border: `1px solid ${ring}`,
        position: "relative", zIndex: 1,
        display: "flex", alignItems: "center", justifyContent: "center",
        fontFamily: "var(--font-b)", fontSize: 11, fontWeight: 600,
        color: filled ? "var(--bg)" : "var(--ink2)"
      }}>{done ? "✓" : current ? "●" : ""}</div>
      <div style={{
        fontFamily: "var(--font-b)", fontSize: 11, fontWeight: 500,
        letterSpacing: "0.12em", textTransform: "uppercase",
        color: "var(--muted)", marginTop: 24
      }}>Étape {step} · {date}</div>
      <div style={{
        fontFamily: "var(--font-h)", fontSize: 24, color: "var(--ink)",
        marginTop: 8, lineHeight: 1.2
      }}>{label}</div>
    </div>);

}

function PageHero({ eyebrow, title, intro }) {
  return (
    <section style={{ background: "var(--bg)", paddingTop: 80, paddingBottom: 80 }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 48px" }}>
        <Eyebrow>{eyebrow}</Eyebrow>
        <div style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 64, alignItems: "end" }}>
          <h1 style={{
            fontFamily: "var(--font-h)", fontSize: "clamp(56px, 6.5vw, 96px)",
            lineHeight: 0.98, letterSpacing: "-0.02em",
            fontWeight: 400, color: "var(--ink)", margin: 0
          }}>{title}</h1>
          <p style={{
            fontFamily: "var(--font-b)", fontSize: 17, lineHeight: 1.7,
            color: "var(--ink2)", margin: 0, paddingBottom: 8
          }}>{intro}</p>
        </div>
      </div>
    </section>);

}

// ──────────────────────────────────────────────────────────────────────────
// ORANGE
// ──────────────────────────────────────────────────────────────────────────

function OrangePage() {
  return (
    <React.Fragment>
      {/* HERO with video */}
      <section style={{ background: "var(--bg)", paddingTop: 80, paddingBottom: 80 }}>
        <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 48px" }}>
          <Eyebrow>Orange & le Vaucluse</Eyebrow>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center", marginTop: 16 }}>
            <div>
              <h1 style={{
                fontFamily: "var(--font-h)", fontSize: "clamp(44px, 5vw, 76px)",
                lineHeight: 0.98, letterSpacing: "-0.02em",
                fontWeight: 400, color: "var(--ink)", margin: 0
              }}>
                Au croisement du Rhône,<br />
                <i style={{ color: "var(--accent)" }}>de la Provence</i> et du Sud.
              </h1>
              <p style={{
                fontFamily: "var(--font-b)", fontSize: 17, lineHeight: 1.7,
                color: "var(--ink2)", marginTop: 28, maxWidth: 520
              }}>
                Aux portes de la Provence, Orange conjugue patrimoine UNESCO, douceur de vivre et dynamisme économique. Théâtre Antique et Arc de Triomphe romain, centre médiéval à taille humaine, marchés provencaux, Chorégies l'été — et un tissu économique solide porté par le centre hospitalier, la base aérienne 115 et les zones d'activité.
              </p>
              <div style={{ display: "flex", gap: 32, marginTop: 32, paddingTop: 24, borderTop: "1px solid var(--line)" }}>
                <Stat value="30 000" label="habitants" />
                <Stat value="300 j" label="de soleil / an" />
                <Stat value="2" label="monuments UNESCO" />
              </div>
            </div>
            <div>
              <div style={{
                position: "relative",
                border: "1px solid var(--line)",
                boxShadow: "0 30px 80px -30px rgba(31,27,22,.25)",
                background: "#000"
              }}>
                <div style={{ position: "relative", paddingBottom: "56.25%", height: 0, overflow: "hidden" }}>
                  <iframe
                    src="https://www.youtube-nocookie.com/embed/1GP25e0mtQ4?rel=0&modestbranding=1"
                    title="Orange — visite vidéo"
                    loading="lazy"
                    allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                    allowFullScreen
                    style={{
                      position: "absolute", top: 0, left: 0,
                      width: "100%", height: "100%", border: 0
                    }} />
                  
                </div>
              </div>
              <div style={{
                marginTop: 16,
                fontFamily: "var(--font-b)", fontSize: 11, letterSpacing: "0.16em",
                color: "var(--muted)", textTransform: "uppercase",
                display: "flex", alignItems: "center", gap: 12
              }}>
                <span style={{ width: 24, height: 1, background: "var(--accent)" }}></span>
                Découvrir Orange en vidéo
              </div>
            </div>
          </div>
        </div>
      </section>

      <section style={{ position: "relative", lineHeight: 0 }}>
        <img src="assets/orange-aerien.jpg" alt="Vue aérienne d'Orange — le Théâtre Antique et la colline Saint-Eutrope"
        style={{ display: "block", width: "100%", height: "clamp(320px, 52vh, 620px)", objectFit: "cover" }} />
        <div style={{
          position: "absolute", left: 0, right: 0, bottom: 0,
          padding: "48px 48px 28px",
          background: "linear-gradient(to top, rgba(31,42,51,.72), rgba(31,42,51,0))"
        }}>
          <div style={{ maxWidth: 1280, margin: "0 auto" }}>
            <div style={{ fontFamily: "var(--font-b)", fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "#F5F2EC" }}>
              Orange, Vaucluse · vue aérienne
            </div>
            <div style={{ fontFamily: "var(--font-h)", fontSize: "clamp(24px, 3vw, 40px)", fontStyle: "italic", color: "#fff", marginTop: 8, lineHeight: 1.1 }}>
              Une ville à taille humaine, au pied de la colline Saint-Eutrope.
            </div>
          </div>
        </div>
      </section>

      <Section bg="deep" style={{ paddingTop: 48, paddingBottom: 48 }}>
        <div style={{ textAlign: "center", maxWidth: 720, margin: "0 auto" }}>
          <h2 style={{ fontFamily: "var(--font-h)", fontSize: "clamp(28px, 3vw, 42px)", lineHeight: 1.15, color: "var(--bg)", margin: 0, fontWeight: 400 }}>
            « Orange est cette rare ville française où l'on peut <i style={{ color: "var(--accent)" }}>vivre l'antique au quotidien</i>. »
          </h2>
          <div style={{ fontFamily: "var(--font-b)", fontSize: 13, letterSpacing: "0.12em", color: "rgba(242,235,221,.6)", textTransform: "uppercase", marginTop: 20 }}>
            Le Figaro — supplément Immo Sud
          </div>
        </div>
      </Section>

      <Section bg="surface" label="L'art de vivre orangeois">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          <ArtCard img="marché provencal — olives et huiles d'Orange" src="assets/photo-marche-provencal.webp" title="Les marchés" body="Le jeudi matin, place aux Herbes. Fruits, olives, lavande, huiles d'olive, fromages des Baronnies." />
          <ArtCard img="vignobles — côtes-du-rhône autour d'Orange" src="assets/photo-vignes.avif" title="Les vignes" body="Châteauneuf-du-Pape, Gigondas, Vacqueyras — trois des plus grandes appellations à 20 min." />
          <ArtCard img="Chorégies d'Orange — soir d'été" src="assets/photo-choregies.jpeg" title="Les Chorégies" body="Le plus ancien festival d'opéra français — chaque été dans le Théâtre Antique." />
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, marginTop: 56 }}>
          <div>
            <div style={{
              fontFamily: "var(--font-b)", fontSize: 11, fontWeight: 500,
              letterSpacing: "0.18em", textTransform: "uppercase",
              color: "var(--accent)", marginBottom: 20,
              display: "flex", alignItems: "center", gap: 12
            }}>
              <span style={{ width: 18, height: 1, background: "var(--accent)" }}></span>
              À pied depuis NOVA
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 1, background: "var(--line)" }}>
              <PoiLine name="Arc de Triomphe" dist="8 min" />
              <PoiLine name="Centre-ville · commerces · marché" dist="10 min" />
              <PoiLine name="Théâtre Antique" dist="13 min" />
              <PoiLine name="Gare SNCF" dist="18 min" />
            </div>
          </div>
          <div>
            <div style={{
              fontFamily: "var(--font-b)", fontSize: 11, fontWeight: 500,
              letterSpacing: "0.18em", textTransform: "uppercase",
              color: "var(--accent)", marginBottom: 20,
              display: "flex", alignItems: "center", gap: 12
            }}>
              <span style={{ width: 18, height: 1, background: "var(--accent)" }}></span>
              En voiture depuis NOVA
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 1, background: "var(--line)" }}>
              <PoiLine name="Autoroute A7 / A9" dist="8 min" />
              <PoiLine name="Base Aérienne 115" dist="10 min" />
              <PoiLine name="Avignon TGV" dist="25 min" />
            </div>
          </div>
        </div>
      </Section>
    </React.Fragment>);

}

function PoiLine({ name, dist }) {
  return (
    <div style={{
      display: "flex", justifyContent: "space-between", alignItems: "baseline",
      background: "var(--surface)", padding: "18px 24px"
    }}>
      <span style={{ fontFamily: "var(--font-h)", fontSize: 20, color: "var(--ink)" }}>{name}</span>
      <span style={{
        fontFamily: "var(--font-b)", fontSize: 14, fontWeight: 500,
        color: "var(--accent)", whiteSpace: "nowrap", marginLeft: 16
      }}>{dist}</span>
    </div>);

}

function PoiCard({ cat, name, dist }) {
  return (
    <div style={{
      background: "var(--surface)", border: "1px solid var(--line)",
      padding: "20px 24px", display: "flex", justifyContent: "space-between", alignItems: "center"
    }}>
      <div>
        <div style={{ fontFamily: "var(--font-b)", fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--accent)" }}>{cat}</div>
        <div style={{ fontFamily: "var(--font-h)", fontSize: 22, color: "var(--ink)", marginTop: 4 }}>{name}</div>
      </div>
      <div style={{ fontFamily: "var(--font-b)", fontSize: 14, color: "var(--ink2)", textAlign: "right", whiteSpace: "nowrap" }}>{dist}</div>
    </div>);

}

function ArtCard({ img, src, title, body }) {
  return (
    <div style={{ background: "var(--bg)", border: "1px solid var(--line)" }}>
      <Placeholder src={src} label={img} ratio="4/5" />
      <div style={{ padding: 28 }}>
        <h3 style={{ fontFamily: "var(--font-h)", fontSize: 28, color: "var(--ink)", margin: "0 0 12px" }}>{title}</h3>
        <p style={{ fontFamily: "var(--font-b)", fontSize: 14, lineHeight: 1.6, color: "var(--ink2)", margin: 0 }}>{body}</p>
      </div>
    </div>);

}

// ──────────────────────────────────────────────────────────────────────────
// BEFORE / AFTER — curseur de comparaison (photo aérienne ↔ plan de masse)
// ──────────────────────────────────────────────────────────────────────────

function BeforeAfter({ beforeSrc, afterSrc, beforeLabel, afterLabel }) {
  const [pos, setPos] = React.useState(50);
  const ref = React.useRef(null);
  const dragging = React.useRef(false);

  const setFromClientX = (clientX) => {
    const el = ref.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    const p = (clientX - r.left) / r.width * 100;
    setPos(Math.max(0, Math.min(100, p)));
  };

  React.useEffect(() => {
    const move = (e) => {if (dragging.current) setFromClientX(e.touches ? e.touches[0].clientX : e.clientX);};
    const up = () => {dragging.current = false;};
    window.addEventListener("mousemove", move);
    window.addEventListener("mouseup", up);
    window.addEventListener("touchmove", move, { passive: true });
    window.addEventListener("touchend", up);
    return () => {
      window.removeEventListener("mousemove", move);
      window.removeEventListener("mouseup", up);
      window.removeEventListener("touchmove", move);
      window.removeEventListener("touchend", up);
    };
  }, []);

  const start = (e) => {dragging.current = true;setFromClientX(e.touches ? e.touches[0].clientX : e.clientX);};
  const tag = {
    position: "absolute", top: 16, fontFamily: "var(--font-b)", fontSize: 11,
    letterSpacing: "0.12em", textTransform: "uppercase", padding: "5px 12px",
    background: "rgba(31,42,51,.78)", color: "#F5F2EC", pointerEvents: "none"
  };

  return (
    <div
      ref={ref}
      onMouseDown={start}
      onTouchStart={start}
      style={{
        position: "relative", width: "100%", aspectRatio: "3/2",
        overflow: "hidden", border: "1px solid var(--line)",
        boxShadow: "0 30px 80px -30px rgba(31,27,22,.25)",
        cursor: "ew-resize", userSelect: "none", background: "#000"
      }}>
      {/* AFTER (plan) — full background */}
      <img src={afterSrc} alt={afterLabel} draggable="false" style={{
        position: "absolute", inset: 0, width: "100%", height: "100%",
        objectFit: "cover", display: "block", background: "#FBF9F4"
      }} />
      {/* BEFORE (aérienne) — clipped to the left of the handle */}
      <div style={{ position: "absolute", inset: 0, width: `${pos}%`, overflow: "hidden" }}>
        <img src={beforeSrc} alt={beforeLabel} draggable="false" style={{
          position: "absolute", top: 0, left: 0, height: "100%",
          width: `${10000 / pos}%`, maxWidth: "none",
          objectFit: "cover", display: "block"
        }} />
        <div style={{ ...tag, left: 16 }}>{beforeLabel}</div>
      </div>
      <div style={{ ...tag, right: 16 }}>{afterLabel}</div>
      {/* Handle */}
      <div style={{
        position: "absolute", top: 0, bottom: 0, left: `${pos}%`,
        width: 2, background: "var(--accent)", transform: "translateX(-1px)", pointerEvents: "none"
      }}>
        <div style={{
          position: "absolute", top: "50%", left: "50%",
          transform: "translate(-50%, -50%)",
          width: 42, height: 42, borderRadius: "50%",
          background: "var(--accent)", color: "#1F2A33",
          display: "flex", alignItems: "center", justifyContent: "center",
          fontSize: 16, boxShadow: "0 4px 14px rgba(0,0,0,.3)"
        }}>⇄</div>
      </div>
    </div>);
}

// ──────────────────────────────────────────────────────────────────────────
// LIGHTBOX — fenêtre modale compacte pour afficher une image (plan, etc.)
// ──────────────────────────────────────────────────────────────────────────

function Lightbox({ src, alt, onClose }) {
  React.useEffect(() => {
    const onEsc = (e) => e.key === "Escape" && onClose();
    document.addEventListener("keydown", onEsc);
    document.body.style.overflow = "hidden";
    return () => {document.removeEventListener("keydown", onEsc);document.body.style.overflow = "";};
  }, [onClose]);

  return (
    <div onClick={onClose} style={{
      position: "fixed", inset: 0, zIndex: 200,
      background: "rgba(31,27,22,.7)", backdropFilter: "blur(6px)",
      display: "flex", alignItems: "center", justifyContent: "center", padding: 24
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        position: "relative", background: "var(--bg)",
        border: "1px solid var(--line)", boxShadow: "0 40px 80px -20px rgba(0,0,0,.45)",
        maxWidth: "min(880px, 92vw)", maxHeight: "88vh", overflow: "auto", padding: 14
      }}>
        <button onClick={onClose} aria-label="Fermer" style={{
          position: "absolute", top: 18, right: 18, zIndex: 1,
          background: "var(--bg)", border: "1px solid var(--line)",
          width: 34, height: 34, fontSize: 17, cursor: "pointer", color: "var(--ink)"
        }}>×</button>
        <img src={src} alt={alt} style={{ display: "block", width: "100%", height: "auto" }} />
      </div>
    </div>);
}

// ──────────────────────────────────────────────────────────────────────────
// GALLERY — carrousel défilant avec cadres + légendes, ouvre la Lightbox
// ──────────────────────────────────────────────────────────────────────────

function Gallery({ photos, title }) {
  const trackRef = React.useRef(null);
  const [zoom, setZoom] = React.useState(null);

  const scrollBy = (dir) => {
    const el = trackRef.current;
    if (!el) return;
    el.scrollBy({ left: dir * (el.clientWidth * 0.8), behavior: "smooth" });
  };

  return (
    <div style={{ position: "relative" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 24, gap: 16, flexWrap: "wrap" }}>
        <h2 style={{ fontFamily: "var(--font-h)", fontSize: "clamp(28px, 3vw, 44px)", lineHeight: 1.1, fontWeight: 400, color: "var(--ink)", margin: 0 }}>
           {title === undefined ? <>Photos de la <span style={{ fontStyle: "italic", color: "var(--accent)" }}>résidence</span>.</> : title}
        </h2>
        <div style={{ display: "flex", gap: 8 }}>
          <button onClick={() => scrollBy(-1)} aria-label="Précédent" style={galleryArrowStyle}>←</button>
          <button onClick={() => scrollBy(1)} aria-label="Suivant" style={galleryArrowStyle}>→</button>
        </div>
      </div>

      <div
        ref={trackRef}
        style={{
          display: "grid", gridAutoFlow: "column",
          gridAutoColumns: "min(78%, 420px)", gap: 20,
          overflowX: "auto", scrollSnapType: "x mandatory",
          paddingBottom: 8, scrollbarWidth: "none"
        }}>
        {photos.map((p, i) =>
        <figure key={i} onClick={() => setZoom(p)} style={{
          margin: 0, scrollSnapAlign: "start", cursor: "pointer",
          background: "var(--surface)", border: "1px solid var(--line)",
          padding: 12, transition: "box-shadow .25s ease"
        }}
        onMouseEnter={(e) => {e.currentTarget.style.boxShadow = "0 24px 50px -24px rgba(31,27,22,.3)";}}
        onMouseLeave={(e) => {e.currentTarget.style.boxShadow = "none";}}>
            <div style={{ aspectRatio: "4/3", overflow: "hidden", background: "#000" }}>
              <img src={p.src} alt={p.caption} loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
            </div>
            <figcaption style={{
            fontFamily: "var(--font-b)", fontSize: 12, letterSpacing: "0.04em",
            color: "var(--ink2)", marginTop: 12, display: "flex", justifyContent: "space-between", alignItems: "center"
          }}>
              <span>{p.caption}</span>
              <span style={{ color: "var(--muted)", fontSize: 11, textTransform: "uppercase", letterSpacing: "0.12em" }}>{i + 1} / {photos.length}</span>
            </figcaption>
          </figure>
        )}
      </div>

      {zoom && <Lightbox src={zoom.src} alt={zoom.caption} onClose={() => setZoom(null)} />}
    </div>);
}

const galleryArrowStyle = {
  width: 44, height: 44, border: "1px solid var(--line)", background: "var(--surface)",
  color: "var(--ink)", fontSize: 16, cursor: "pointer", fontFamily: "var(--font-b)"
};

// ──────────────────────────────────────────────────────────────────────────
// GALLERY TABS — bascule entre les visuels du T2 41 m² et du T2 48 m²
// ──────────────────────────────────────────────────────────────────────────

function GalleryTabs() {
  const [tab, setTab] = React.useState("41");

  const photos41 = [
    { src: "assets/r41-sejour.png", caption: "Séjour, cuisine & coin repas" },
    { src: "assets/r41-sejour-loggia.png", caption: "Séjour ouvert sur la loggia" },
    { src: "assets/r41-salon-loggia.png", caption: "Salon et accès terrasse" },
    { src: "assets/r41-chambre-1.png", caption: "Chambre" },
    { src: "assets/r41-chambre-2.png", caption: "Chambre — accès salle d'eau" },
    { src: "assets/r41-salle-eau.png", caption: "Salle d'eau" },
    { src: "assets/r41-loggia-1.png", caption: "Loggia plein sud" },
    { src: "assets/r41-loggia-2.png", caption: "Loggia — repas en extérieur" },
  ];
  const photos48 = [
    { src: "assets/r48-cuisine-salon.png", caption: "Cuisine ouverte & coin repas" },
    { src: "assets/r48-salon.png", caption: "Séjour ouvert sur la loggia" },
    { src: "assets/r48-chambre-1.png", caption: "Chambre" },
    { src: "assets/r48-chambre-2.png", caption: "Chambre" },
    { src: "assets/r48-salle-eau.png", caption: "Salle d'eau" },
    { src: "assets/r48-loggia-1.png", caption: "Loggia plein sud" },
    { src: "assets/r48-loggia-2.png", caption: "Loggia — repas en extérieur" },
  ];

  return (
    <div>
      <div style={{ display: "flex", gap: 4, background: "var(--bg2)", padding: 4, width: "fit-content", marginBottom: 32 }}>
        {[["41", "T2 · 41 m²"], ["48", "T2 · 48 m²"]].map(([k, label]) => (
          <button key={k}
            onClick={() => setTab(k)}
            style={{
              fontFamily: "var(--font-b)", fontSize: 13,
              letterSpacing: "0.06em", textTransform: "uppercase",
              padding: "11px 24px", cursor: "pointer", border: 0,
              background: tab === k ? "var(--ink)" : "transparent",
              color: tab === k ? "var(--bg)" : "var(--ink2)",
              transition: "background .2s ease, color .2s ease",
            }}>{label}</button>
        ))}
      </div>
      <Gallery
        key={tab}
        title={tab === "41"
          ? <>Le <span style={{ fontStyle: "italic", color: "var(--accent)" }}>T2 · 41 m²</span></>
          : <>Le <span style={{ fontStyle: "italic", color: "var(--accent)" }}>T2 · 48 m²</span></>}
        photos={tab === "41" ? photos41 : photos48} />
    </div>);
}

// expose
Object.assign(window, {
  HomePage, ResidencePage, OrangePage, BeforeAfter, Lightbox, Gallery, GalleryTabs,
  Stat, TeaserStat, BigStat, Feature, PlaceLine, LotPreview, StatusBadge,
  PrestationCol, Timeline, PageHero, PoiCard, PoiLine, ArtCard
});