// pages-deals.jsx — Appartements (filter+plan), Investir (simulator), Contact

// ──────────────────────────────────────────────────────────────────────────
// APPARTEMENTS — filterable
// ──────────────────────────────────────────────────────────────────────────

function AppartementsPage() {
  const { t, setTweak } = useTheme();
  const [filters, setFilters] = useState({
    floor: "all",
    type: "all",
    orientation: "all",
    status: "available",
    maxPrice: 200000
  });
  const [selected, setSelected] = useState(null);

  const filtered = LOTS.filter((l) =>
  (filters.floor === "all" || l.floor === Number(filters.floor)) && (
  filters.type === "all" || l.type === Number(filters.type)) && (
  filters.orientation === "all" || l.orientation === filters.orientation) && (
  filters.status === "all" || l.status === filters.status) &&
  l.price <= filters.maxPrice
  );

  return (
    <React.Fragment>
      <PageHero
        eyebrow="Les appartements"
        title={<>Huit T2, deux typologies,<br /><i style={{ color: "var(--accent)" }}>chacun son orientation</i>.</>}
        intro="Filtrez selon votre étage, votre orientation, votre budget. Cliquez un lot pour voir le plan détaillé et lancer la mise en option." />
      

      <Section bg="bg">
        {/* Filters */}
        <div style={{
          display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr 2fr auto",
          gap: 24, alignItems: "end",
          padding: "24px 32px", background: "var(--surface)",
          border: "1px solid var(--line)", marginBottom: 32
        }}>
          <FilterSelect label="Étage" value={filters.floor}
          options={[["all", "Tous"], ["1", "R+1"], ["2", "R+2"]]}
          onChange={(v) => setFilters({ ...filters, floor: v })} />
          <FilterSelect label="Typologie" value={filters.type}
          options={[["all", "Toutes"], ["1", "T2 · 40 m² (angle)"], ["2", "T2 · 48 m²"]]}
          onChange={(v) => setFilters({ ...filters, type: v })} />
          <FilterSelect label="Orientation" value={filters.orientation}
          options={[["all", "Toutes"], ["Sud-Est", "Sud-Est"], ["Sud-Ouest", "Sud-Ouest"]]}
          onChange={(v) => setFilters({ ...filters, orientation: v })} />
          <FilterSelect label="Disponibilité" value={filters.status}
          options={[["all", "Tous"], ["available", "Disponible"], ["optioned", "Optionné"]]}
          onChange={(v) => setFilters({ ...filters, status: v })} />
          <FilterSlider label="Budget max" value={filters.maxPrice} min={170000} max={200000} step={1000}
          onChange={(v) => setFilters({ ...filters, maxPrice: v })} />
          <button
            onClick={() => setFilters({ floor: "all", type: "all", orientation: "all", status: "available", maxPrice: 200000 })} style={{
              fontFamily: "var(--font-b)", fontSize: 12,
              letterSpacing: "0.08em", textTransform: "uppercase",
              background: "transparent", border: "1px solid var(--line)",
              padding: "12px 18px", cursor: "pointer", color: "var(--ink2)",
              alignSelf: "stretch"
            }}>Réinitialiser</button>
        </div>

        {/* Result count + view switch */}
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 24 }}>
          <div style={{ fontFamily: "var(--font-b)", fontSize: 14, color: "var(--ink2)" }}>
            <strong style={{ color: "var(--ink)", fontWeight: 600 }}>{filtered.length}</strong> appartement{filtered.length > 1 ? "s" : ""} correspondant{filtered.length > 1 ? "s" : ""}
          </div>
          <div style={{ display: "flex", gap: 4, background: "var(--bg2)", padding: 4 }}>
            {[["grid", "Grille"], ["table", "Tableau"], ["plan", "Plan masse"]].map(([k, label]) =>
            <button key={k}
            onClick={() => setTweak("lotsView", k)}
            data-active={t.lotsView === k}
            style={{
              fontFamily: "var(--font-b)", fontSize: 12,
              letterSpacing: "0.08em", textTransform: "uppercase",
              padding: "8px 16px", cursor: "pointer", border: 0,
              background: t.lotsView === k ? "var(--ink)" : "transparent",
              color: t.lotsView === k ? "var(--bg)" : "var(--ink2)"
            }}>{label}</button>
            )}
          </div>
        </div>

        {/* Views */}
        {t.lotsView === "grid" &&
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
            {filtered.map((lot) => <LotCard key={lot.id} lot={lot} onSelect={setSelected} />)}
          </div>
        }
        {t.lotsView === "table" && <LotTable lots={filtered} onSelect={setSelected} />}
        {t.lotsView === "plan" && <PlanMasse lots={filtered} onSelect={setSelected} />}

        {filtered.length === 0 &&
        <div style={{
          padding: 64, textAlign: "center", border: "1px dashed var(--line)",
          fontFamily: "var(--font-b)", color: "var(--ink2)"
        }}>
            Aucun lot ne correspond à vos critères. <button onClick={() => setFilters({ floor: "all", type: "all", orientation: "all", status: "available", maxPrice: 200000 })} style={{ background: "none", border: 0, color: "var(--accent)", textDecoration: "underline", cursor: "pointer", fontFamily: "inherit", fontSize: "inherit" }}>Réinitialiser →</button>
          </div>
        }
      </Section>

      {selected && <LotModal lot={selected} onClose={() => setSelected(null)} />}
    </React.Fragment>);

}

function FilterSelect({ label, value, options, onChange }) {
  return (
    <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
      <span style={{ fontFamily: "var(--font-b)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--muted)" }}>{label}</span>
      <select value={value} onChange={(e) => onChange(e.target.value)}
      style={{
        fontFamily: "var(--font-b)", fontSize: 14, color: "var(--ink)",
        background: "var(--bg)", border: "1px solid var(--line)",
        padding: "10px 12px", borderRadius: 0, cursor: "pointer"
      }}>
        {options.map(([v, label]) => <option key={v} value={v}>{label}</option>)}
      </select>
    </label>);

}

function FilterSlider({ label, value, min, max, step, onChange }) {
  return (
    <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
      <span style={{ fontFamily: "var(--font-b)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--muted)" }}>
        {label} — <strong style={{ color: "var(--accent)" }}>{fmtPrice(value)}</strong>
      </span>
      <input type="range" min={min} max={max} step={step} value={value}
      onChange={(e) => onChange(Number(e.target.value))}
      style={{ accentColor: "var(--accent)", height: 32 }} />
    </label>);

}

function LotCard({ lot, onSelect }) {
  return (
    <article
      onClick={() => onSelect(lot)}
      style={{
        background: "var(--surface)", border: "1px solid var(--line)",
        cursor: lot.status === "sold" ? "not-allowed" : "pointer",
        opacity: lot.status === "sold" ? 0.55 : 1,
        transition: "transform .25s ease, box-shadow .25s ease"
      }}
      onMouseEnter={(e) => {if (lot.status !== "sold") {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";}}>
      
      <div style={{ position: "relative" }}>
        <Placeholder src={`assets/${lot.plan}`} label={`plan T2 — ${lot.id}`} ratio="4/3" style={{ background: "#FBF9F4" }} />
        <div style={{ position: "absolute", top: 16, left: 16 }}>
          <StatusBadge status={lot.status} />
        </div>
        <div style={{ position: "absolute", top: 16, right: 16, background: "var(--ink)", color: "var(--bg)", fontFamily: "var(--font-b)", fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", padding: "4px 10px" }}>Type {lot.type}</div>
      </div>
      <div style={{ padding: 24 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
          <div>
            <div style={{ fontFamily: "var(--font-h)", fontSize: 32, color: "var(--ink)", lineHeight: 1 }}>Lot {lot.id}</div>
            <div style={{ fontFamily: "var(--font-b)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--muted)", marginTop: 6 }}>
              {lot.floor}{lot.floor === 1 ? "er" : "e"} étage
            </div>
          </div>
          <div style={{ textAlign: "right" }}>
            <div style={{ fontFamily: "var(--font-h)", fontSize: 24, color: "var(--accent)", lineHeight: 1 }}>{fmtPrice(lot.price)}</div>
            <div style={{ fontFamily: "var(--font-b)", fontSize: 11, color: "var(--muted)", marginTop: 6 }}>
              {fmtN(lot.price / lot.surface)} €/m²
            </div>
          </div>
        </div>
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0,
          marginTop: 24, paddingTop: 20, borderTop: "1px solid var(--line)"
        }}>
          <SpecCell label="Surface" value={`${lot.surface} m²`} />
          <SpecCell label="Loggia" value={`${lot.loggia} m²`} />
          <SpecCell label="Orient." value={lot.orientation} />
        </div>
        <div style={{ marginTop: 20, fontFamily: "var(--font-b)", fontSize: 13, lineHeight: 1.5, color: "var(--ink2)", fontStyle: "italic" }}>
          « {lot.exposure} »
        </div>
      </div>
    </article>);

}

function SpecCell({ label, value }) {
  return (
    <div>
      <div style={{ fontFamily: "var(--font-b)", fontSize: 10, color: "var(--muted)", letterSpacing: "0.12em", textTransform: "uppercase" }}>{label}</div>
      <div style={{ fontFamily: "var(--font-h)", fontSize: 18, color: "var(--ink)", marginTop: 4 }}>{value}</div>
    </div>);

}

function LotTable({ lots, onSelect }) {
  return (
    <div style={{ background: "var(--surface)", border: "1px solid var(--line)", overflow: "hidden" }}>
      <div style={{
        display: "grid",
        gridTemplateColumns: "0.7fr 0.7fr 0.7fr 1fr 0.8fr 1.1fr 1.4fr 1fr 0.8fr",
        padding: "16px 24px", borderBottom: "1px solid var(--line)",
        fontFamily: "var(--font-b)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--muted)"
      }}>
        <span>Lot</span><span>Étage</span><span>Type</span><span>Surface</span><span>Loggia</span><span>Orientation</span><span>Exposition</span><span style={{ textAlign: "right" }}>Prix</span><span style={{ textAlign: "right" }}>Statut</span>
      </div>
      {lots.map((lot) =>
      <button
        key={lot.id}
        onClick={() => lot.status !== "sold" && onSelect(lot)}
        style={{
          display: "grid",
          gridTemplateColumns: "0.7fr 0.7fr 0.7fr 1fr 0.8fr 1.1fr 1.4fr 1fr 0.8fr",
          width: "100%", padding: "20px 24px", border: 0,
          borderBottom: "1px solid var(--line)", background: "transparent",
          fontFamily: "var(--font-b)", fontSize: 14, color: "var(--ink)",
          textAlign: "left", cursor: lot.status === "sold" ? "not-allowed" : "pointer",
          opacity: lot.status === "sold" ? 0.5 : 1,
          alignItems: "center"
        }}
        onMouseEnter={(e) => {if (lot.status !== "sold") e.currentTarget.style.background = "var(--bg2)";}}
        onMouseLeave={(e) => {e.currentTarget.style.background = "transparent";}}>
        
          <span style={{ fontFamily: "var(--font-h)", fontSize: 20 }}>{lot.id}</span>
          <span>R+{lot.floor}</span>
          <span style={{ fontFamily: "var(--font-b)", fontSize: 12, letterSpacing: "0.08em", color: "var(--accent)" }}>Type {lot.type}</span>
          <span>{lot.surface} m²</span>
          <span>{lot.loggia} m²</span>
          <span>{lot.orientation}</span>
          <span style={{ color: "var(--ink2)", fontStyle: "italic", fontSize: 13 }}>{lot.exposure}</span>
          <span style={{ fontFamily: "var(--font-h)", fontSize: 18, color: "var(--accent)", textAlign: "right" }}>{fmtPrice(lot.price)}</span>
          <span style={{ textAlign: "right" }}><StatusBadge status={lot.status} /></span>
        </button>
      )}
    </div>);

}

function PlanMasse({ lots, onSelect }) {
  // 2 floors (R+1, R+2) x 4 columns; render as wireframe-ish floor plates
  const floors = [2, 1];
  return (
    <div style={{ background: "var(--surface)", border: "1px solid var(--line)", padding: 48 }}>
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {floors.map((f) =>
        <div key={f} style={{ display: "grid", gridTemplateColumns: "80px 1fr", gap: 24, alignItems: "stretch" }}>
            <div style={{
            fontFamily: "var(--font-h)", fontSize: 28, color: "var(--ink2)",
            display: "flex", alignItems: "center", justifyContent: "flex-end",
            borderRight: "1px solid var(--line)", paddingRight: 24
          }}>R+{f}</div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8 }}>
              {LOTS.filter((l) => l.floor === f).map((l) => {
              const inFilter = lots.some((x) => x.id === l.id);
              const color = !inFilter ? "var(--bg2)" :
              l.status === "sold" ? "var(--muted)" :
              l.status === "optioned" ? "var(--ink2)" :
              "var(--accent)";
              return (
                <button key={l.id}
                onClick={() => l.status !== "sold" && inFilter && onSelect(l)}
                style={{
                  position: "relative",
                  aspectRatio: "4/3",
                  background: color,
                  border: 0, padding: 20, cursor: inFilter && l.status !== "sold" ? "pointer" : "default",
                  opacity: !inFilter ? 0.3 : 1,
                  color: !inFilter ? "var(--ink2)" : l.status === "available" ? "#1F2A33" : "var(--bg)",
                  textAlign: "left", display: "flex", flexDirection: "column", justifyContent: "space-between",
                  transition: "transform .15s ease"
                }}
                onMouseEnter={(e) => {if (inFilter && l.status !== "sold") e.currentTarget.style.transform = "scale(1.02)";}}
                onMouseLeave={(e) => {e.currentTarget.style.transform = "scale(1)";}}>
                  
                    <div>
                      <div style={{ fontFamily: "var(--font-h)", fontSize: 28, lineHeight: 1 }}>{l.id}</div>
                      <div style={{ fontFamily: "var(--font-b)", fontSize: 11, marginTop: 6, letterSpacing: "0.04em" }}>Type {l.type} · {l.surface} m²</div>
                      <div style={{ fontFamily: "var(--font-b)", fontSize: 10, marginTop: 2, letterSpacing: "0.04em", opacity: 0.85 }}>{l.orientation}</div>
                    </div>
                    <div style={{ fontFamily: "var(--font-h)", fontSize: 18, fontStyle: "italic" }}>{fmtPrice(l.price)}</div>
                  </button>);

            })}
            </div>
          </div>
        )}
      </div>
      <div style={{ marginTop: 32, paddingTop: 24, borderTop: "1px solid var(--line)", display: "flex", gap: 32, fontFamily: "var(--font-b)", fontSize: 12, color: "var(--ink2)" }}>
        <LegendItem color="var(--accent)" label="Disponible" />
        <LegendItem color="var(--ink2)" label="Optionné" />
        <LegendItem color="var(--muted)" label="Vendu" />
        <LegendItem color="var(--bg2)" label="Hors filtre" />
      </div>
    </div>);

}

function LegendItem({ color, label }) {
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
      <span style={{ width: 12, height: 12, background: color, border: "1px solid var(--line)" }}></span>{label}
    </span>);

}

function LotModal({ lot, onClose }) {
  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: 100,
      background: "rgba(31,27,22,.65)", backdropFilter: "blur(6px)",
      display: "flex", alignItems: "center", justifyContent: "center", padding: 32
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        background: "var(--bg)", maxWidth: 1080, width: "100%", maxHeight: "90vh",
        overflow: "auto", display: "grid", gridTemplateColumns: "1.2fr 1fr",
        boxShadow: "0 40px 80px -20px rgba(0,0,0,.4)"
      }}>
        <Placeholder src={`assets/${lot.plan}`} label={`plan détaillé — lot ${lot.id}`} ratio="auto" style={{ minHeight: 520, aspectRatio: "auto", background: "#FBF9F4" }} />
        <div style={{ padding: 48, display: "flex", flexDirection: "column" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
            <div>
              <Eyebrow>Lot {lot.id} · R+{lot.floor} · Type {lot.type}</Eyebrow>
              <h2 style={{ fontFamily: "var(--font-h)", fontSize: 48, lineHeight: 1, color: "var(--ink)", margin: 0, fontWeight: 400 }}>
                T2 · {lot.surface} m²
              </h2>
              <div style={{ fontFamily: "var(--font-h)", fontSize: 20, fontStyle: "italic", color: "var(--accent)", marginTop: 8 }}>
                « {lot.exposure} »
              </div>
            </div>
            <button onClick={onClose} aria-label="Fermer" style={{
              background: "transparent", border: "1px solid var(--line)",
              width: 36, height: 36, fontSize: 18, cursor: "pointer",
              color: "var(--ink)"
            }}>×</button>
          </div>

          <div style={{ marginTop: 32, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1, background: "var(--line)" }}>
            <SpecBox label="Surface habitable" value={`${lot.surface} m²`} />
            <SpecBox label="Loggia couverte" value={`${lot.loggia} m²`} />
            <SpecBox label="Orientation" value={lot.orientation} />
            <SpecBox label="Stationnement" value="Parking couvert fermé" />
          </div>

          <div style={{ marginTop: 32, paddingTop: 24, borderTop: "1px solid var(--line)" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
              <span style={{ fontFamily: "var(--font-b)", fontSize: 12, color: "var(--muted)", letterSpacing: "0.08em", textTransform: "uppercase" }}>Prix TTC</span>
              <span style={{ fontFamily: "var(--font-h)", fontSize: 36, color: "var(--accent)", lineHeight: 1 }}>{fmtPrice(lot.price)}</span>
            </div>
            <div style={{ fontFamily: "var(--font-b)", fontSize: 13, color: "var(--ink2)", marginTop: 8, textAlign: "right" }}>
              {fmtN(lot.price / lot.surface)} €/m² · compromis chez le notaire · frais notariés réduits
            </div>
            <div style={{
              marginTop: 20, padding: "16px 20px",
              background: "var(--bg2)", border: "1px solid var(--line)",
              display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16
            }}>
              <div>
                <div style={{ fontFamily: "var(--font-b)", fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--muted)" }}>Loyer estimé HT</div>
                <div style={{ fontFamily: "var(--font-h)", fontSize: 22, color: "var(--ink)", marginTop: 4 }}>{lot.loyer} €<span style={{ fontSize: 13, color: "var(--muted)" }}> /mois</span></div>
              </div>
              <div>
                <div style={{ fontFamily: "var(--font-b)", fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--muted)" }}>Rendement brut</div>
                <div style={{ fontFamily: "var(--font-h)", fontSize: 22, color: "var(--accent)", marginTop: 4 }}>{lot.renta.toFixed(2).replace(".", ",")} %</div>
              </div>
            </div>
          </div>

          <div style={{ marginTop: "auto", paddingTop: 32, display: "flex", flexDirection: "column", gap: 12 }}>
            <Button variant="primary" size="lg">Mettre en option (24 h) →</Button>
            <Button variant="ghost" size="md">Télécharger la fiche PDF</Button>
          </div>
        </div>
      </div>
    </div>);

}

function SpecBox({ label, value }) {
  return (
    <div style={{ background: "var(--bg)", padding: "20px 24px" }}>
      <div style={{ fontFamily: "var(--font-b)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--muted)" }}>{label}</div>
      <div style={{ fontFamily: "var(--font-h)", fontSize: 22, color: "var(--ink)", marginTop: 6 }}>{value}</div>
    </div>);

}

// ──────────────────────────────────────────────────────────────────────────
// INVESTIR — simulator
// ──────────────────────────────────────────────────────────────────────────

function InvestirPage() {
  const [price, setPrice] = useState(190000);
  const [apport, setApport] = useState(30000);
  const [duree, setDuree] = useState(20);
  const [taux, setTaux] = useState(3.6);
  const [loyer, setLoyer] = useState(640);

  const emprunt = Math.max(0, price - apport);
  const mensualite = useMemo(() => {
    const r = taux / 100 / 12;
    const n = duree * 12;
    if (r === 0) return emprunt / n;
    return emprunt * r / (1 - Math.pow(1 + r, -n));
  }, [emprunt, taux, duree]);

  const rentaBrute = loyer * 12 / price * 100;
  const cashflow = loyer - mensualite - 80; // rough charges

  return (
    <React.Fragment>
      <PageHero
        eyebrow="Investir"
        title={<>Un T2 à Orange,<br /><i style={{ color: "var(--accent)" }}>c'est mathématique</i>.</>}
        intro="Sur la grille NOVA, le rendement brut s'échelonne de 3,96 % (A24) à 4,11 % (A12) selon le lot, pour des loyers estimés de 580 à 660 € HT mensuels. Voici, en deux minutes, ce que peut donner un placement dans la résidence." />
      

      <Section bg="bg">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "start" }}>
          {/* Inputs */}
          <div style={{ background: "var(--surface)", border: "1px solid var(--line)", padding: 40 }}>
            <Eyebrow>Vos hypothèses</Eyebrow>
            <SimInput label="Prix d'acquisition" value={price} setValue={setPrice} min={170000} max={200000} step={1000} unit="€" fmt={fmtPrice} />
            <SimInput label="Apport personnel" value={apport} setValue={setApport} min={0} max={100000} step={1000} unit="€" fmt={fmtPrice} />
            <SimInput label="Durée du crédit" value={duree} setValue={setDuree} min={10} max={25} step={1} unit="ans" />
            <SimInput label="Taux nominal (estimé)" value={taux} setValue={setTaux} min={2.5} max={5} step={0.1} unit="%" />
            <SimInput label="Loyer mensuel estimé" value={loyer} setValue={setLoyer} min={580} max={660} step={5} unit="€" fmt={(v) => v + " €"} />
          </div>

          {/* Outputs */}
          <div>
            <Eyebrow>Le résultat</Eyebrow>
            <ResultBlock big value={rentaBrute.toFixed(2) + " %"} label="Rentabilité brute annuelle" />
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1, marginTop: 24, background: "var(--line)" }}>
              <ResultBlock value={fmtN(mensualite) + " €"} label="Mensualité du crédit" />
              <ResultBlock value={fmtN(emprunt) + " €"} label="Capital emprunté" />
              <ResultBlock value={fmtN(loyer * 12) + " €"} label="Revenus locatifs annuels" />
              <ResultBlock value={(cashflow >= 0 ? "+" : "") + fmtN(cashflow) + " €"}
              label="Cashflow mensuel estimé"
              tone={cashflow >= 0 ? "positive" : "negative"} />
            </div>
            <div style={{
              marginTop: 24, padding: "20px 24px",
              background: "var(--bg2)", border: "1px solid var(--line)",
              fontFamily: "var(--font-b)", fontSize: 13, lineHeight: 1.6, color: "var(--ink2)"
            }}>
              <strong style={{ color: "var(--ink)" }}>Note :</strong> simulation indicative. Charges, fiscalité et amortissement (LMNP) à valider avec votre conseiller. Nous vous mettons en relation avec notre partenaire courtier sur simple demande.
            </div>
            <div style={{ marginTop: 24, display: "flex", gap: 12 }}>
              <Button variant="primary" size="lg">Recevoir mon étude personnalisée →</Button>
            </div>
          </div>
        </div>
      </Section>

      <Section bg="bg2" label="Les bons dispositifs">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 24 }}>
          <DispositifCard
            tag="Vente classique"
            title="Aucun appel de fonds pendant le chantier"
            body="Particularité NOVA : vous ne réglez rien pendant les travaux. La résidence est livrée clés en main au T3 2026, et le prix est versé en intégralité chez le notaire à la signature de l'acte authentique. Frais notariés réduits, garantie décennale et dommages-ouvrage incluses."
            kpi="0 €"
            kpiLabel="jusqu'à la livraison" />
          
          <DispositifCard
            tag="LMNP"
            title="Loueur Meublé Non Professionnel"
            body="Amortissement du bien sur 25-30 ans, neutralisation quasi-totale de l'imposition sur les loyers pendant 15 à 20 ans. Particulièrement adapté au marché locatif d'Orange porté par la base aérienne 115, le centre hospitalier et les zones d'activité."
            kpi="∼ 4 %"
            kpiLabel="rendement brut sur la grille" />
          
          <DispositifCard
            tag="Résidence principale"
            title="Frais de notaire réduits"
            body="Programme neuf : frais de notaire réduits (∼ 2,5 % au lieu de 7-8 %). Possibilité d'éligibilité PTZ sous conditions de ressources et de zone."
            kpi="2,5 %"
            kpiLabel="frais de notaire" />
          
          <DispositifCard
            tag="Patrimoine"
            title="Préparer la retraite"
            body="À horizon 20 ans, le crédit est soldé. Les loyers d'Orange deviennent un complément de revenu durable, dans une ville résilientée par son patrimoine UNESCO et son tissu économique diversifié."
            kpi="580‑660 €"
            kpiLabel="loyer mensuel estimé" />
          
        </div>
      </Section>
    </React.Fragment>);

}

function SimInput({ label, value, setValue, min, max, step, unit, fmt }) {
  return (
    <div style={{ marginTop: 24 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
        <span style={{ fontFamily: "var(--font-b)", fontSize: 13, color: "var(--ink2)" }}>{label}</span>
        <span style={{ fontFamily: "var(--font-h)", fontSize: 22, color: "var(--accent)" }}>
          {fmt ? fmt(value) : `${value} ${unit || ""}`}
        </span>
      </div>
      <input type="range" min={min} max={max} step={step} value={value}
      onChange={(e) => setValue(Number(e.target.value))}
      style={{ width: "100%", marginTop: 8, accentColor: "var(--accent)" }} />
      <div style={{ display: "flex", justifyContent: "space-between", fontFamily: "var(--font-b)", fontSize: 11, color: "var(--muted)", marginTop: 4 }}>
        <span>{fmt ? fmt(min) : `${min} ${unit || ""}`}</span>
        <span>{fmt ? fmt(max) : `${max} ${unit || ""}`}</span>
      </div>
    </div>);

}

function ResultBlock({ value, label, big, tone }) {
  const color = tone === "positive" ? "var(--accent)" : tone === "negative" ? "var(--accent-dark)" : "var(--ink)";
  return (
    <div style={{
      padding: big ? "40px 32px" : "24px 28px",
      background: big ? "var(--ink)" : "var(--surface)",
      color: big ? "var(--bg)" : "var(--ink)",
      border: big ? 0 : "0"
    }}>
      <div style={{ fontFamily: "var(--font-h)", fontSize: big ? 72 : 28, color: big ? "var(--accent)" : color, lineHeight: 1 }}>{value}</div>
      <div style={{ fontFamily: "var(--font-b)", fontSize: big ? 13 : 11, color: big ? "rgba(242,235,221,.65)" : "var(--muted)", marginTop: big ? 16 : 8, letterSpacing: "0.08em", textTransform: "uppercase" }}>{label}</div>
    </div>);

}

function DispositifCard({ tag, title, body, kpi, kpiLabel }) {
  return (
    <div style={{
      background: "var(--surface)", border: "1px solid var(--line)",
      padding: 32, display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 24, alignItems: "center"
    }}>
      <div>
        <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: 16
        }}>{tag}</div>
        <h3 style={{ fontFamily: "var(--font-h)", fontSize: 26, color: "var(--ink)", margin: "0 0 12px", lineHeight: 1.2 }}>{title}</h3>
        <p style={{ fontFamily: "var(--font-b)", fontSize: 14, lineHeight: 1.6, color: "var(--ink2)", margin: 0 }}>{body}</p>
      </div>
      <div style={{ textAlign: "center", padding: "20px 8px", background: "var(--bg)", border: "1px solid var(--line)" }}>
        <div style={{ fontFamily: "var(--font-h)", fontSize: 48, color: "var(--accent)", lineHeight: 1 }}>{kpi}</div>
        <div style={{ fontFamily: "var(--font-b)", fontSize: 11, color: "var(--muted)", letterSpacing: "0.08em", textTransform: "uppercase", marginTop: 8 }}>{kpiLabel}</div>
      </div>
    </div>);

}

// ──────────────────────────────────────────────────────────────────────────
// CONTACT
// ──────────────────────────────────────────────────────────────────────────

function ContactPage() {
  const [form, setForm] = useState({ nom: "", email: "", tel: "", projet: "habiter", message: "", consent: false });
  const [submitted, setSubmitted] = useState(false);

  const submit = (e) => {
    e.preventDefault();
    if (!form.nom || !form.email || !form.consent) return;
    setSubmitted(true);
  };

  return (
    <React.Fragment>
      <PageHero
        eyebrow="Contact"
        title={<>Une question, une visite,<br /><i style={{ color: "var(--accent)" }}>une plaquette</i> ?</>}
        intro="Réponse sous 24 h ouvrées. Anne Magnoni, conseillère Myamo Développement, vous accompagne de la première question à la signature chez le notaire." />
      

      <Section bg="bg">
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 64 }}>
          {/* Form */}
          <div>
            {submitted ?
            <div style={{
              padding: 64, background: "var(--surface)", border: "1px solid var(--accent)",
              textAlign: "center"
            }}>
                <div style={{ fontSize: 48, color: "var(--accent)", marginBottom: 16 }}>◇</div>
                <h2 style={{ fontFamily: "var(--font-h)", fontSize: 36, color: "var(--ink)", margin: "0 0 16px", lineHeight: 1.1 }}>
                  Merci, <i style={{ color: "var(--accent)" }}>{form.nom.split(" ")[0]}</i>.
                </h2>
                <p style={{ fontFamily: "var(--font-b)", fontSize: 16, color: "var(--ink2)", lineHeight: 1.6, maxWidth: 480, margin: "0 auto" }}>
                  Votre demande est bien reçue. Anne vous rappelle sous 24 h ouvrées au numéro indiqué, et vous a envoyé la plaquette commerciale à l'adresse <strong>{form.email}</strong>.
                </p>
                <div style={{ marginTop: 32 }}>
                  <Button variant="ghost" onClick={() => {setSubmitted(false);setForm({ nom: "", email: "", tel: "", projet: "habiter", message: "", consent: false });}}>
                    Faire une nouvelle demande
                  </Button>
                </div>
              </div> :

            <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: 24 }}>
                <FormRow>
                  <FormField label="Nom complet *" value={form.nom} onChange={(v) => setForm({ ...form, nom: v })} required />
                  <FormField label="E-mail *" type="email" value={form.email} onChange={(v) => setForm({ ...form, email: v })} required />
                </FormRow>
                <FormRow>
                  <FormField label="Téléphone" type="tel" value={form.tel} onChange={(v) => setForm({ ...form, tel: v })} />
                  <FormSelect label="Mon projet" value={form.projet} onChange={(v) => setForm({ ...form, projet: v })}
                options={[["habiter", "Habiter la résidence"], ["investir", "Investir (locatif)"], ["secondaire", "Résidence secondaire"], ["autre", "Autre"]]} />
                </FormRow>
                <FormField label="Message" type="textarea" value={form.message} onChange={(v) => setForm({ ...form, message: v })}
              placeholder="Vos questions, votre étage préféré, votre budget, vos disponibilités…" />

                <label style={{ display: "flex", alignItems: "flex-start", gap: 12, 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 commerciale (RGPD). Aucun partage avec des tiers.</span>
                </label>

                <div style={{ display: "flex", gap: 16, alignItems: "center", marginTop: 8 }}>
                  <Button variant="primary" size="lg" icon="→">Envoyer ma demande</Button>
                  <span style={{ fontFamily: "var(--font-b)", fontSize: 12, color: "var(--muted)" }}>· Réponse sous 24 h</span>
                </div>
              </form>
            }
          </div>

          {/* Sidebar */}
          <aside style={{ display: "flex", flexDirection: "column", gap: 24 }}>
            <div style={{ background: "var(--surface)", border: "1px solid var(--line)", padding: 32 }}>
              <div style={{
                fontFamily: "var(--font-b)", fontSize: 11, letterSpacing: "0.18em",
                textTransform: "uppercase", color: "var(--accent)", marginBottom: 16
              }}>Votre interlocutrice</div>
              <div style={{ fontFamily: "var(--font-h)", fontSize: 32, color: "var(--ink)", margin: 0, lineHeight: 1.05 }}>Anne Magnoni</div>
              <div style={{ fontFamily: "var(--font-b)", fontSize: 13, color: "var(--ink2)", letterSpacing: "0.04em", marginTop: 6 }}>Conseillère · Myamo Développement</div>
              <p style={{ fontFamily: "var(--font-b)", fontSize: 14, color: "var(--ink2)", lineHeight: 1.6, marginTop: 20 }}>
                Votre interlocutrice unique sur le programme NOVA — visite, dossier financier, signature notaire.
              </p>
              <div style={{ marginTop: 24, paddingTop: 20, borderTop: "1px solid var(--line)", fontFamily: "var(--font-b)", fontSize: 15, color: "var(--ink)", lineHeight: 2 }}>
                <div><a href="tel:+33766461865" style={{ color: "inherit", textDecoration: "none" }}>07 66 46 18 65</a></div>
                <div><a href="mailto:a.magnoni@myamo.com" style={{ color: "inherit", textDecoration: "none" }}>a.magnoni@myamo.com</a></div>
              </div>
            </div>

            <div style={{ background: "var(--deep)", color: "var(--bg)", padding: 32 }}>
              <div style={{ fontFamily: "var(--font-b)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--accent)", marginBottom: 12 }}>Bureaux Myamo</div>
              <div style={{ fontFamily: "var(--font-h)", fontSize: 22, lineHeight: 1.3 }}>
                4-6 Place de la République<br />13 200 Arles
              </div>
              <div style={{ fontFamily: "var(--font-b)", fontSize: 13, color: "rgba(242,235,221,.75)", marginTop: 16, lineHeight: 1.7 }}>
                Visite sur rendez-vous —<br />orange.myt2.fr
              </div>
            </div>
          </aside>
        </div>
      </Section>
    </React.Fragment>);

}

function FormRow({ children }) {
  return <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>{children}</div>;
}

function FormField({ label, value, onChange, type = "text", placeholder, required }) {
  const Tag = type === "textarea" ? "textarea" : "input";
  return (
    <label style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      <span style={{ fontFamily: "var(--font-b)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--muted)", fontWeight: 500 }}>{label}</span>
      <Tag
        type={type === "textarea" ? undefined : type}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        required={required}
        rows={type === "textarea" ? 5 : undefined}
        style={{
          fontFamily: "var(--font-b)", fontSize: 15, color: "var(--ink)",
          background: "var(--surface)", border: "1px solid var(--line)",
          padding: "14px 16px", borderRadius: 0, outline: "none",
          resize: type === "textarea" ? "vertical" : undefined
        }}
        onFocus={(e) => e.target.style.borderColor = "var(--accent)"}
        onBlur={(e) => e.target.style.borderColor = "var(--line)"} />
      
    </label>);

}

function FormSelect({ label, value, onChange, options }) {
  return (
    <label style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      <span style={{ fontFamily: "var(--font-b)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--muted)", fontWeight: 500 }}>{label}</span>
      <select value={value} onChange={(e) => onChange(e.target.value)}
      style={{
        fontFamily: "var(--font-b)", fontSize: 15, color: "var(--ink)",
        background: "var(--surface)", border: "1px solid var(--line)",
        padding: "14px 16px", borderRadius: 0, cursor: "pointer"
      }}>
        {options.map(([v, l]) => <option key={v} value={v}>{l}</option>)}
      </select>
    </label>);

}

// expose
Object.assign(window, {
  AppartementsPage, InvestirPage, ContactPage
});