// pages-habiter.jsx — "Habiter" page (primo-accédant) for Résidence NOVA

// ──────────────────────────────────────────────────────────────────────────
// PLAQUETTE MODAL — formulaire de demande + téléchargement
// ──────────────────────────────────────────────────────────────────────────

function PlaquetteModal({ lot, onClose }) {
  const [form, setForm] = React.useState({ prenom: "", nom: "", email: "", tel: "", projet: "habiter", message: "", consent: false });
  const [submitted, setSubmitted] = React.useState(false);
  const PDF = "assets/Plaquette-Nova-Residence.pdf";

  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]);

  const submit = (e) => {
    e.preventDefault();
    if (!form.prenom || !form.nom || !form.email || !form.tel || !form.consent) return;
    const projetLabel = { habiter: "Habiter", investir: "Investir" }[form.projet] || form.projet;
    fetch("/api/contact", {
      method: "POST",
      headers: { "Content-Type": "application/json", "Accept": "application/json" },
      body: JSON.stringify({
        nom: `${form.prenom} ${form.nom}`,
        email: form.email,
        tel: form.tel || "",
        projet: projetLabel,
        message: form.message || "",
        lot: lot ? lot.id : "",
        "bot-field": form.website || ""
      })
    }).
    then((res) => {if (res.ok) {setSubmitted(true);if (window.plausible) {plausible('Formulaire NOVA');}if (window.fbq) {fbq('track', 'Lead');}if (window.gtag) {gtag('event', 'conversion', {'send_to': 'AW-18202499337/A5TTCI2K0L8cEImy0OdD'});}}}).
    catch(() => {});
  };

  const labelStyle = { fontFamily: "var(--font-b)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--muted)", fontWeight: 500 };
  const inputStyle = {
    fontFamily: "var(--font-b)", fontSize: 15, color: "var(--ink)",
    background: "var(--surface)", border: "1px solid var(--line)",
    padding: "13px 15px", borderRadius: 0, outline: "none", width: "100%", boxSizing: "border-box"
  };

  return (
    <div onClick={onClose} style={{
      position: "fixed", inset: 0, zIndex: 200,
      background: "rgba(31,27,22,.65)", backdropFilter: "blur(6px)",
      display: "flex", alignItems: "center", justifyContent: "center", padding: 24, overflowY: "auto"
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        background: "var(--bg)", maxWidth: 560, width: "100%",
        boxShadow: "0 40px 80px -20px rgba(0,0,0,.4)", position: "relative",
        maxHeight: "calc(100vh - 48px)", overflowY: "auto"
      }}>
        <button onClick={onClose} aria-label="Fermer" style={{
          position: "absolute", top: 20, right: 20,
          background: "transparent", border: "1px solid var(--line)",
          width: 36, height: 36, fontSize: 18, cursor: "pointer", color: "var(--ink)", zIndex: 1
        }}>×</button>

        <div style={{ padding: "44px 44px 40px" }}>
          {submitted ?
          <div style={{ textAlign: "center" }}>
              <div style={{ fontSize: 44, color: "var(--accent)", marginBottom: 12 }}>◇</div>
              <h2 style={{ fontFamily: "var(--font-h)", fontSize: 34, color: "var(--ink)", margin: "0 0 14px", lineHeight: 1.1, fontWeight: 400 }}>
                Merci, <i style={{ color: "var(--accent)" }}>{form.prenom}</i>.
              </h2>
              <p style={{ fontFamily: "var(--font-b)", fontSize: 15, color: "var(--ink2)", lineHeight: 1.6, margin: "0 auto", maxWidth: 380 }}>
                Merci ! Vous allez recevoir la plaquette par email à <strong>{form.email}</strong>, d'ici quelques minutes. Pensez à vérifier vos spams. Anne vous recontacte rapidement.
              </p>
              <div style={{ marginTop: 28 }}>
                <Button variant="ghost" onClick={onClose}>Fermer</Button>
              </div>
            </div> :

          <React.Fragment>
              <Eyebrow>La plaquette commerciale</Eyebrow>
              <h2 style={{ fontFamily: "var(--font-h)", fontSize: 32, color: "var(--ink)", margin: "0 0 8px", lineHeight: 1.1, fontWeight: 400 }}>
                Recevez la plaquette<i style={{ color: "var(--accent)" }}>.</i>
              </h2>
              <p style={{ fontFamily: "var(--font-b)", fontSize: 14, color: "var(--ink2)", lineHeight: 1.6, margin: "0 0 24px" }}>
                Renseignez vos coordonnées : vous recevez la plaquette par email, et Anne vous recontacte.
              </p>
              <form onSubmit={submit}
            style={{ display: "flex", flexDirection: "column", gap: 18 }}>
                <p hidden><label>Ne remplissez pas : <input name="bot-field" /></label></p>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
                  <label style={{ display: "flex", flexDirection: "column", gap: 7 }}>
                    <span style={labelStyle}>Prénom *</span>
                    <input style={inputStyle} value={form.prenom} required onChange={(e) => setForm({ ...form, prenom: e.target.value })} />
                  </label>
                  <label style={{ display: "flex", flexDirection: "column", gap: 7 }}>
                    <span style={labelStyle}>Nom *</span>
                    <input style={inputStyle} value={form.nom} required onChange={(e) => setForm({ ...form, nom: e.target.value })} />
                  </label>
                </div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
                  <label style={{ display: "flex", flexDirection: "column", gap: 7 }}>
                    <span style={labelStyle}>E-mail *</span>
                    <input type="email" style={inputStyle} value={form.email} required onChange={(e) => setForm({ ...form, email: e.target.value })} />
                  </label>
                  <label style={{ display: "flex", flexDirection: "column", gap: 7 }}>
                    <span style={labelStyle}>Téléphone *</span>
                    <input type="tel" style={inputStyle} value={form.tel} required onChange={(e) => setForm({ ...form, tel: e.target.value })} />
                  </label>
                </div>
                <div style={{ display: "flex", flexDirection: "column", gap: 9 }}>
                  <span style={labelStyle}>Mon projet</span>
                  <div style={{ display: "flex", gap: 4, background: "var(--bg2)", padding: 4 }}>
                    {[["habiter", "Habiter"], ["investir", "Investir"]].map(([k, lbl]) =>
                  <button type="button" key={k} onClick={() => setForm({ ...form, projet: k })}
                  style={{
                    flex: 1, fontFamily: "var(--font-b)", fontSize: 13,
                    letterSpacing: "0.06em", textTransform: "uppercase",
                    padding: "11px 16px", cursor: "pointer", border: 0,
                    background: form.projet === k ? "var(--ink)" : "transparent",
                    color: form.projet === k ? "var(--bg)" : "var(--ink2)"
                  }}>{lbl}</button>
                  )}
                  </div>
                </div>
                <label style={{ display: "flex", flexDirection: "column", gap: 7 }}>
                  <span style={labelStyle}>Message</span>
                  <textarea rows={3} style={{ ...inputStyle, resize: "vertical" }} value={form.message}
                onChange={(e) => setForm({ ...form, message: e.target.value })}
                placeholder="Votre étage préféré, votre budget, vos disponibilités…" />
                </label>
                <label style={{ display: "flex", alignItems: "flex-start", gap: 11, fontFamily: "var(--font-b)", fontSize: 13, color: "var(--ink2)", lineHeight: 1.5 }}>
                  <input type="checkbox" checked={form.consent} onChange={(e) => setForm({ ...form, consent: e.target.checked })} style={{ accentColor: "var(--accent)", marginTop: 3 }} />
                  <span>J'accepte que mes données soient traitées dans le cadre de ma demande (RGPD). Aucun partage avec des tiers.</span>
                </label>
                <Button variant="primary" size="lg" icon="✉">Recevoir la plaquette</Button>
              </form>
            </React.Fragment>
          }
        </div>
      </div>
    </div>);
}

Object.assign(window, { PlaquetteModal });

function HabiterPage() {
  return (
    <React.Fragment>
      <PageHero
        eyebrow="Habiter"
        title={<>Votre premier chez-vous,<br /><i style={{ color: "var(--accent)" }}>aux portes de la Provence.</i></>}
        intro="8 T2 neufs livrés au quatrième trimestre 2026, à partir de 170 500 € — cuisine équipée et parking couvert et sécurisé inclus." />

      {/* À TAILLE HUMAINE */}
      <Section bg="bg" label="Le neuf, sans surprise">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 64, alignItems: "start" }}>
          <h2 style={{ fontFamily: "var(--font-h)", fontSize: "clamp(32px, 3.6vw, 50px)", lineHeight: 1.1, fontWeight: 400, color: "var(--ink)", margin: 0 }}>
            Une petite résidence,<br /><span style={{ fontStyle: "italic", color: "var(--accent)" }}>à taille humaine</span>.
          </h2>
          <div>
            <p style={{ fontFamily: "var(--font-b)", fontSize: 17, lineHeight: 1.7, color: "var(--ink2)", margin: 0 }}>
              Pas d'ascenseur, pas de gardien, des charges contenues — une copropriété simple à gérer, où l'on connaît ses voisins. Acheter neuf, c'est emménager sans surprise : environ <strong>8 000 €</strong> d'économie sur les frais de notaire par rapport à l'ancien.
            </p>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 1, marginTop: 40, background: "var(--line)", border: "1px solid var(--line)" }}>
              <HabiterCell value="2 – 3 %" label="frais de notaire réduits (vs 7-8 % dans l'ancien)" />
              <HabiterCell value="2 ans" label="d'exonération de taxe foncière *" note="* à vérifier auprès de la commune d'Orange" />
              <HabiterCell value="0 €" label="de travaux à prévoir" />
              <HabiterCell value="10 ans" label="de garantie décennale — sécurité juridique" />
            </div>
          </div>
        </div>
      </Section>

      {/* VIVRE À ORANGE */}
      <Section bg="surface" label="Vivre à Orange">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.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(30px, 3.4vw, 46px)", lineHeight: 1.12, fontWeight: 400, color: "var(--ink)", margin: 0 }}>
              Le sud,<br /><span style={{ fontStyle: "italic", color: "var(--accent)" }}>sans les excès</span>.
            </h2>
            <p style={{ fontFamily: "var(--font-b)", fontSize: 17, lineHeight: 1.7, color: "var(--ink2)", marginTop: 24 }}>
              Une ville à taille humaine, 30 000 habitants, où l'on connaît ses commerçants, où le marché du jeudi anime le centre, où le Théâtre Antique et l'Arc de Triomphe rappellent au quotidien deux mille ans d'histoire. C'est aussi 300 jours de soleil par an, des cours bordées de platanes et des terrasses qui s'ouvrent dès le mois de mars.
            </p>
            <p style={{ fontFamily: "var(--font-b)", fontSize: 17, lineHeight: 1.7, color: "var(--ink2)", marginTop: 16 }}>Au numéro 4 de la rue Jean-Jacques Rousseau, dans un quartier résidentiel tranquille, à dix minutes à pied du centre-ville et des commerces, naît une résidence à votre image : intimiste, lumineuse, ouverte sur le sud.

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

      <Section bg="surface" label="Orange au quotidien">
        <Gallery title="" photos={[
        { src: "assets/habiter-arc.webp", caption: "L'Arc de Triomphe romain, à 8 min à pied" },
        { src: "assets/habiter-choregies.jpeg", caption: "Les Chorégies — opéra au Théâtre Antique" },
        { src: "assets/habiter-marche.webp", caption: "Le marché provençal du jeudi" },
        { src: "assets/habiter-village.avif", caption: "Les vignobles autour d'Orange" }]
        } />
      </Section>

      {/* LES 3 PROMESSES */}

      {/* PRESTATIONS */}
      <Section bg="bg2" label="Ce qui est compris">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "start" }}>
          <h2 style={{ fontFamily: "var(--font-h)", fontSize: "clamp(30px, 3.2vw, 44px)", lineHeight: 1.12, fontWeight: 400, color: "var(--ink)", margin: 0 }}>
            Vous posez vos meubles,<br /><span style={{ fontStyle: "italic", color: "var(--accent)" }}>et c'est tout</span>.
          </h2>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column" }}>
            {[
            "Cuisine équipée — plaques, four, hotte, plan de travail, meubles bas",
            "Pompe à chaleur réversible — chauffage et rafraîchissement",
            "Volets roulants électriques sur toutes les baies",
            "Douche, meuble vasque, WC séparé",
            "Carrelage dans toutes les pièces"].
            map((it, i) =>
            <li key={i} style={{
              fontFamily: "var(--font-b)", fontSize: 16, color: "var(--ink2)",
              padding: "16px 0", borderTop: "1px solid var(--line)",
              display: "flex", alignItems: "flex-start", gap: 14
            }}>
                <span style={{ color: "var(--accent)", marginTop: 1 }}>·</span>
                <span>{it}</span>
              </li>
            )}
          </ul>
        </div>
      </Section>

      {/* GALERIE INTÉRIEURS — onglets 41 m² / 48 m² */}

      {/* PTZ */}
      <Section bg="deep" label="Le PTZ — votre coup de pouce">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }}>
          <div>
            <h2 style={{ fontFamily: "var(--font-h)", fontSize: "clamp(32px, 3.6vw, 52px)", lineHeight: 1.1, fontWeight: 400, color: "var(--bg)", margin: 0 }}>
              Jusqu'à <span style={{ fontStyle: "italic", color: "var(--accent)" }}>50 %</span> financé à taux zéro.
            </h2>
            <p style={{ fontFamily: "var(--font-b)", fontSize: 17, lineHeight: 1.7, color: "rgba(242,235,221,.75)", marginTop: 24, maxWidth: 520 }}>
              Le Prêt à Taux Zéro finance jusqu'à 50 % de votre achat sans intérêt, et vous laisse jusqu'à 15 ans de différé avant de commencer à le rembourser.
            </p>
          </div>
          <div style={{ background: "rgba(255,255,255,.04)", border: "1px solid rgba(255,255,255,.08)", padding: 32 }}>
            <div style={{ fontFamily: "var(--font-b)", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--accent)", marginBottom: 20 }}>
              Simulation indicative
            </div>
            <div style={{ fontFamily: "var(--font-b)", fontSize: 13, color: "rgba(242,235,221,.6)", lineHeight: 1.6, marginBottom: 20 }}>
              Couple primo-accédant · revenus combinés 35 000 €/an · zone B1 · T2 à 175 000 € TTC.
            </div>
            <PtzRow label="PTZ estimé (40 % du prix, 0 %)" value="~ 70 000 €" />
            <PtzRow label="Crédit complémentaire à financer" value="~ 105 000 €" />
            <PtzRow label="Mensualité estimée (sur 25 ans)" value="600 – 700 €/mois" strong />
          </div>
        </div>
      </Section>

      {/* CTA */}
    </React.Fragment>);
}

function HabiterCell({ value, label, note }) {
  return (
    <div style={{ background: "var(--surface)", padding: "26px 24px" }}>
      <div style={{ fontFamily: "var(--font-h)", fontSize: 34, lineHeight: 1, color: "var(--ink)" }}>{value}</div>
      <div style={{ fontFamily: "var(--font-b)", fontSize: 13, lineHeight: 1.5, color: "var(--muted)", marginTop: 10 }}>{label}</div>
      {note && <div style={{ fontFamily: "var(--font-b)", fontSize: 11, lineHeight: 1.4, color: "var(--muted)", marginTop: 6, fontStyle: "italic" }}>{note}</div>}
    </div>);
}

function PromesseCard({ tag, title, body }) {
  return (
    <div style={{ background: "var(--surface)", border: "1px solid var(--line)", padding: 32 }}>
      <div style={{
        display: "inline-block", fontFamily: "var(--font-b)", fontSize: 10,
        letterSpacing: "0.16em", textTransform: "uppercase",
        color: "var(--accent)", border: "1px solid var(--accent)",
        padding: "4px 10px", marginBottom: 20
      }}>{tag}</div>
      <h3 style={{ fontFamily: "var(--font-h)", fontSize: 30, color: "var(--ink)", margin: "0 0 10px", lineHeight: 1.1 }}>{title}</h3>
      <p style={{ fontFamily: "var(--font-b)", fontSize: 15, lineHeight: 1.6, color: "var(--ink2)", margin: 0 }}>{body}</p>
    </div>);
}

function PtzRow({ label, value, strong }) {
  return (
    <div style={{
      display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 16,
      padding: "14px 0", borderTop: "1px solid rgba(255,255,255,.1)"
    }}>
      <span style={{ fontFamily: "var(--font-b)", fontSize: 14, color: "rgba(242,235,221,.8)" }}>{label}</span>
      <span style={{
        fontFamily: "var(--font-h)", fontSize: strong ? 22 : 18,
        color: strong ? "var(--accent)" : "var(--bg)", whiteSpace: "nowrap"
      }}>{value}</span>
    </div>);
}

// ──────────────────────────────────────────────────────────────────────────
// HABITER 1 — page de test : fusion Orange + Habiter
// ──────────────────────────────────────────────────────────────────────────

function HabiterUnePage() {
  return (
    <React.Fragment>
      {/* HERO Orange + vidéo */}
      <section style={{ background: "var(--bg)", paddingTop: 80, paddingBottom: 80 }}>
        <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 48px" }}>
          <Eyebrow>Habiter Orange</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
              }}>
                Votre premier chez-vous,<br /><i style={{ color: "var(--accent)" }}>en cœur de Provence.</i>
              </h1>
              <p style={{ fontFamily: "var(--font-b)", fontSize: 17, lineHeight: 1.7, color: "var(--ink2)", marginTop: 28, maxWidth: 520 }}>
                8 T2 neufs livrés au quatrième trimestre 2026, à partir de 170 500 € — cuisine équipée et parking inclus. Aux portes de la Provence, Orange conjugue patrimoine UNESCO, douceur de vivre et dynamisme économique.
              </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>

      {/* VIVRE À ORANGE */}
      <Section bg="surface" label="Vivre à Orange">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.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(30px, 3.4vw, 46px)", lineHeight: 1.12, fontWeight: 400, color: "var(--ink)", margin: 0 }}>
              Le sud,<br /><span style={{ fontStyle: "italic", color: "var(--accent)" }}>sans les excès</span>.
            </h2>
            <p style={{ fontFamily: "var(--font-b)", fontSize: 17, lineHeight: 1.7, color: "var(--ink2)", marginTop: 24 }}>
              Une ville à taille humaine, 30 000 habitants, où l'on connaît ses commerçants, où le marché du jeudi anime le centre, où le Théâtre Antique et l'Arc de Triomphe rappellent au quotidien deux mille ans d'histoire. C'est aussi 300 jours de soleil par an, des cours bordées de platanes et des terrasses qui s'ouvrent dès le mois de mars.
            </p>
            <p style={{ fontFamily: "var(--font-b)", fontSize: 17, lineHeight: 1.7, color: "var(--ink2)", marginTop: 16 }}>
              Au numéro 4 de la rue Jean-Jacques Rousseau, dans un quartier résidentiel tranquille, à six minutes à pied de l'Arc de Triomphe, naît une résidence à votre image : intimiste, lumineuse, ouverte sur le sud.
            </p>
          </div>
        </div>
      </Section>

      {/* GALERIE Orange au quotidien */}
      <Section bg="bg" label="Orange au quotidien">
        <Gallery title="" photos={[
        { src: "assets/habiter-arc.webp", caption: "L'Arc de Triomphe romain, à 8 min à pied" },
        { src: "assets/habiter-choregies.jpeg", caption: "Les Chorégies — opéra au Théâtre Antique" },
        { src: "assets/habiter-marche.webp", caption: "Le marché provençal du jeudi" },
        { src: "assets/habiter-village.avif", caption: "Les vignobles autour d'Orange" }]
        } />
      </Section>

      {/* VUE AÉRIENNE */}
      <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>

      {/* L'EMPLACEMENT */}
      <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>

      {/* LE NEUF SANS SURPRISE */}
      <Section bg="bg2" label="Le neuf, sans surprise">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 64, alignItems: "start" }}>
          <h2 style={{ fontFamily: "var(--font-h)", fontSize: "clamp(32px, 3.6vw, 50px)", lineHeight: 1.1, fontWeight: 400, color: "var(--ink)", margin: 0 }}>
            Une petite résidence,<br /><span style={{ fontStyle: "italic", color: "var(--accent)" }}>à taille humaine</span>.
          </h2>
          <div>
            <p style={{ fontFamily: "var(--font-b)", fontSize: 17, lineHeight: 1.7, color: "var(--ink2)", margin: 0 }}>
              Pas d'ascenseur, pas de gardien, des charges contenues — une copropriété simple à gérer, où l'on connaît ses voisins. Acheter neuf, c'est emménager sans surprise : environ <strong>8 000 €</strong> d'économie sur les frais de notaire par rapport à l'ancien.
            </p>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 1, marginTop: 40, background: "var(--line)", border: "1px solid var(--line)" }}>
              <HabiterCell value="2 – 3 %" label="frais de notaire réduits (vs 7-8 % dans l'ancien)" />
              <HabiterCell value="2 ans" label="d'exonération de taxe foncière *" note="* à vérifier auprès de la commune d'Orange" />
              <HabiterCell value="0 €" label="de travaux à prévoir" />
              <HabiterCell value="10 ans" label="de garantie décennale — sécurité juridique" />
            </div>
          </div>
        </div>
      </Section>

      {/* CE QUI EST COMPRIS */}
      <Section bg="bg" label="Ce qui est compris">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "start" }}>
          <h2 style={{ fontFamily: "var(--font-h)", fontSize: "clamp(30px, 3.2vw, 44px)", lineHeight: 1.12, fontWeight: 400, color: "var(--ink)", margin: 0 }}>
            Vous posez vos meubles,<br /><span style={{ fontStyle: "italic", color: "var(--accent)" }}>et c'est tout</span>.
          </h2>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column" }}>
            {[
            "Cuisine équipée — plaques, four, hotte, plan de travail, meubles bas",
            "Pompe à chaleur réversible — chauffage et rafraîchissement",
            "Volets roulants électriques sur toutes les baies",
            "Douche, meuble vasque, WC séparé",
            "Carrelage dans toutes les pièces"].
            map((it, i) =>
            <li key={i} style={{ fontFamily: "var(--font-b)", fontSize: 16, color: "var(--ink2)", padding: "16px 0", borderTop: "1px solid var(--line)", display: "flex", alignItems: "flex-start", gap: 14 }}>
                <span style={{ color: "var(--accent)", marginTop: 1 }}>·</span>
                <span>{it}</span>
              </li>
            )}
          </ul>
        </div>
      </Section>

      {/* PTZ */}
      <Section bg="deep" label="Le PTZ — votre coup de pouce">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }}>
          <div>
            <h2 style={{ fontFamily: "var(--font-h)", fontSize: "clamp(32px, 3.6vw, 52px)", lineHeight: 1.1, fontWeight: 400, color: "var(--bg)", margin: 0 }}>
              Jusqu'à <span style={{ fontStyle: "italic", color: "var(--accent)" }}>50 %</span> financé à taux zéro.
            </h2>
            <p style={{ fontFamily: "var(--font-b)", fontSize: 17, lineHeight: 1.7, color: "rgba(242,235,221,.75)", marginTop: 24, maxWidth: 520 }}>
              Le Prêt à Taux Zéro finance jusqu'à 50 % de votre achat sans intérêt, et vous laisse jusqu'à 15 ans de différé avant de commencer à le rembourser.
            </p>
          </div>
          <div style={{ background: "rgba(255,255,255,.04)", border: "1px solid rgba(255,255,255,.08)", padding: 32 }}>
            <div style={{ fontFamily: "var(--font-b)", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--accent)", marginBottom: 20 }}>
              Simulation indicative
            </div>
            <div style={{ fontFamily: "var(--font-b)", fontSize: 13, color: "rgba(242,235,221,.6)", lineHeight: 1.6, marginBottom: 20 }}>
              Couple primo-accédant · revenus combinés 35 000 €/an · zone B1 · T2 à 175 000 € TTC.
            </div>
            <PtzRow label="PTZ estimé (40 % du prix, 0 %)" value="~ 70 000 €" />
            <PtzRow label="Crédit complémentaire à financer" value="~ 105 000 €" />
            <PtzRow label="Mensualité estimée (sur 25 ans)" value="600 – 700 €/mois" strong />
          </div>
        </div>
      </Section>
    </React.Fragment>);
}

// expose
Object.assign(window, { HabiterPage, HabiterUnePage });