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

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

function HomePage({ navigate }) {
  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 clés en main au troisiè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={() => navigate("contact")}>
                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 170k€" label="prix de lancement" />
              <Stat value="T3 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 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 style={{
          position: "absolute", top: 24, right: 48,
          fontFamily: "var(--font-b)", fontSize: 11, letterSpacing: "0.24em",
          color: "var(--muted)", textTransform: "uppercase"
        }}>N° 01 — Résidence NOVA</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. Architecture signée Philippe Capelier (Blue Tango Architectures, Montpellier) : 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="PAC 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 à +3 500 €." />
              <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>

      {/* APPARTEMENT TEASER */}
      <Section bg="bg">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 48 }}>
          <div>
            <Eyebrow>Les appartements</Eyebrow>
            <h2 style={{ fontFamily: "var(--font-h)", fontSize: "clamp(36px, 4vw, 56px)", lineHeight: 1.05, fontWeight: 400, color: "var(--ink)", margin: 0 }}>
              Trois typologies, huit lots,<br />aucun ne se ressemble.
            </h2>
          </div>
          <Button variant="link" onClick={() => navigate("appartements")}>Voir tous les lots →</Button>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {LOTS.slice(0, 3).map((lot) => <LotPreview key={lot.id} lot={lot} navigate={navigate} />)}
        </div>
      </Section>

      {/* IMAGE FULL BLEED */}
      <section style={{ position: "relative" }}>
        <Placeholder src="assets/render-facade-3.png" label="vue jardin — façade côté sud" ratio="21/9" />
        <div style={{
          position: "absolute", left: "50%", bottom: 48, transform: "translateX(-50%)",
          background: "var(--bg)", padding: "32px 48px",
          textAlign: "center", maxWidth: 640
        }}>
          <div 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>

      {/* 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 000 €</strong> (T2 40 m²) à <strong>200 000 €</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,96 – 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 }}>
            Prenons rendez-vous,<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. Réponse sous 24 h ouvrées.

          </p>
          <div style={{ marginTop: 40, display: "flex", gap: 16, justifyContent: "center", flexWrap: "wrap" }}>
            <Button variant="primary" size="lg" onClick={() => navigate("contact")} icon="→">Prendre RDV</Button>
            <Button variant="ghost" size="lg" onClick={() => navigate("contact")}>Télécharger la plaquette</Button>
          </div>
        </div>
      </Section>
    </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 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 }}>{title}</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 Type {lot.type} · {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)" },
    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() {
  return (
    <React.Fragment>
      <PageHero
        eyebrow="La Résidence"
        title={<>Huit appartements,<br /><i style={{ color: "var(--accent)" }}>une seule adresse.</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="Le projet architectural">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "start" }}>
          <Placeholder src="assets/photo-salon-1.png" label="séjour & cuisine — vue d'ambiance" ratio="4/5" />
          <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. Architecture signée <strong>Philippe Capelier</strong> (Blue Tango Architectures, Montpellier). 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 PAC gainable incluse de série.
            </p>
          </div>
        </div>
      </Section>

      <Section bg="bg2" label="Prestations incluses">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 48 }}>
          <PrestationCol title="Confort" items={[
          "Climatisation réversible — PAC gainable",
          "Ventilation traversante naturelle N/S",
          "Loggia 9 m² plein sud, couverte",
          "Volets roulants électriques",
          "Menuiseries PVC haute performance"]
          } />
          <PrestationCol title="Pratique" items={[
          "Parking couvert fermé inclus",
          "Option box fermé : +3 500 € TTC",
          "Local vélos couvert & sécurisé",
          "Hall d'entrée fermé",
          "Résidence à taille humaine — 8 logements"]
          } />
          <PrestationCol title="Garanties" items={[
          "Conformité RT 2012",
          "Assurance dommages-ouvrage",
          "Garantie décennale",
          "Vente classique — compromis chez le notaire",
          "Architecte : Blue Tango (Montpellier)"]
          } />
        </div>
      </Section>

      <Section bg="surface" label="Le calendrier">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, position: "relative" }}>
          <Timeline step="01" date="2025" label="Lancement commercial" current />
          <Timeline step="02" date="T4 2025" label="Démarrage des travaux" />
          <Timeline step="03" date="T2 2026" label="Hors d'eau / hors d'air" />
          <Timeline step="04" date="T3 2026" label="Livraison · remise des clés" />
        </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 troisième trimestre 2026.
        </div>
      </Section>

      <Section bg="bg">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0 }}>
          <Placeholder src="assets/photo-salon-2.png" label="séjour ouvert sur la loggia" ratio="1/1" />
          <Placeholder src="assets/photo-chambre-1.png" label="chambre — ambiance chaleureuse" ratio="1/1" />
          <Placeholder src="assets/photo-sdb-1.png" label="salle d'eau — douche à l'italienne" ratio="1/1" />
          <Placeholder src="assets/photo-terrasse-1.png" label="loggia · 9 m² plein sud" ratio="1/1" />
        </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 }) {
  return (
    <div style={{ position: "relative", paddingRight: 24 }}>
      <div style={{
        height: 1, background: "var(--line)", position: "absolute",
        top: 14, left: 0, right: 0, backgroundColor: "rgb(138, 142, 146)"
      }}></div>
      <div style={{
        width: 28, height: 28, borderRadius: "50%",
        background: current ? "var(--accent)" : "var(--bg2)",
        border: `1px solid ${current ? "var(--accent)" : "var(--line)"}`,
        position: "relative", zIndex: 1,
        display: "flex", alignItems: "center", justifyContent: "center",
        fontFamily: "var(--font-b)", fontSize: 11, fontWeight: 600,
        color: current ? "var(--bg)" : "var(--ink2)", borderColor: "rgb(197, 165, 114)", backgroundColor: "rgb(138, 142, 146)"
      }}>{current ? "\n" : ""}</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 bg="bg" label="L'emplacement">
        <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 48 }}>
          <div style={{ display: "flex", justifyContent: "center" }}>
            <img
              src="assets/plan-nova-ville.png"
              alt="plan du quartier — NOVA et points d'intérêt"
              style={{
                display: "block",
                width: "100%",
                maxWidth: 760,
                height: "auto",
                background: "#FBF9F4",
                border: "1px solid var(--line)"
              }} />
            
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48 }}>
            <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
              </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
              </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>
        </div>
      </Section>

      <Section bg="deep">
        <div style={{ textAlign: "center", maxWidth: 720, margin: "0 auto" }}>
          <h2 style={{ fontFamily: "var(--font-h)", fontSize: "clamp(36px, 4vw, 56px)", lineHeight: 1.1, 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: 32 }}>
            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>
      </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>);

}

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