// 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: "all",
    maxPrice: 250000
  });
  const [selected, setSelected] = useState(null);

  const filtered = LOTS.filter((l) =>
  (filters.floor === "all" || l.floor === Number(filters.floor)) && (
  filters.type === "all" || l.surface === 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)" }}>tous plein sud</i>.</>}
        intro="Filtrez selon votre étage, votre orientation, votre budget. Cliquez sur un lot pour voir le plan détaillé." />
      

      <VisitesVirtuelles />

      <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"], ["41", "T2 · 41 m²"], ["48", "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"], ["reserved", "Réservé"]]}
          onChange={(v) => setFilters({ ...filters, status: v })} />
          <FilterSlider label="Budget max" value={filters.maxPrice} min={170500} max={250000} step={500}
          onChange={(v) => setFilters({ ...filters, maxPrice: v })} />
          <button
            onClick={() => setFilters({ floor: "all", type: "all", orientation: "all", status: "all", maxPrice: 250000 })} 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: "all", maxPrice: 250000 })} 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 VisitesVirtuelles() {
  const [tour, setTour] = useState("41");
  const src = tour === "41"
    ? "https://kuula.co/share/LXXnC/collection/7TqXT?logo=1&info=1&fs=1&vr=0&sd=1&thumbs=1"
    : "https://kuula.co/share/collection/7TqXM?logo=1&info=1&fs=1&vr=0&sd=1&thumbs=1";
  return (
    <Section bg="bg2" label="Visites virtuelles">
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 24, marginBottom: 32 }}>
        <h2 style={{ fontFamily: "var(--font-h)", fontSize: "clamp(32px, 3.6vw, 50px)", lineHeight: 1.1, fontWeight: 400, color: "var(--ink)", margin: 0 }}>
          Promenez-vous<br /><span style={{ fontStyle: "italic", color: "var(--accent)" }}>dans les T2</span>.
        </h2>
        <div style={{ display: "flex", gap: 4, background: "var(--bg)", padding: 4, border: "1px solid var(--line)" }}>
          {[["41", "T2 · 41 m²"], ["48", "T2 · 48 m²"]].map(([k, label]) => (
            <button key={k}
              onClick={() => setTour(k)}
              style={{
                fontFamily: "var(--font-b)", fontSize: 13,
                letterSpacing: "0.06em", textTransform: "uppercase",
                padding: "10px 20px", cursor: "pointer", border: 0,
                background: tour === k ? "var(--ink)" : "transparent",
                color: tour === k ? "var(--bg)" : "var(--ink2)",
                transition: "background .2s ease, color .2s ease",
              }}>{label}</button>
          ))}
        </div>
      </div>
      <div style={{ border: "1px solid var(--line)", background: "#000", lineHeight: 0, boxShadow: "0 30px 80px -30px rgba(31,27,22,.25)" }}>
        <iframe
          key={tour}
          title={`Visite virtuelle T2 ${tour} m²`}
          src={src}
          width="100%"
          height="640"
          frameBorder="0"
          scrolling="no"
          allow="xr-spatial-tracking; gyroscope; accelerometer"
          allowFullScreen
          style={{ display: "block", width: "100%", border: 0 }} />
      </div>
      <div style={{
        marginTop: 16, fontFamily: "var(--font-b)", fontSize: 12,
        letterSpacing: "0.04em", color: "var(--muted)", textAlign: "center",
      }}>
        Glissez pour explorer · cliquez les points pour passer d'une pièce à l'autre · plein écran disponible
      </div>
    </Section>);

}

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 }) {
  const reserved = lot.status === "reserved";
  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 : reserved ? 0.85 : 1,
        transition: "transform .25s ease, box-shadow .25s ease",
        position: "relative"
      }}
      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", overflow: "hidden" }}>
        <Placeholder src={`assets/${lot.plan}`} label={`plan T2 — ${lot.id}`} ratio="4/3" style={{ background: "#FBF9F4", filter: reserved ? "grayscale(0.6) blur(2px)" : "none" }} />
        <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" }}>T2 · {lot.surface} m²</div>
        {reserved &&
        <div style={{
          position: "absolute", top: "50%", left: "50%",
          transform: "translate(-50%, -50%) rotate(-8deg)",
          background: "var(--ink)", color: "var(--bg)",
          fontFamily: "var(--font-h)", fontSize: 28,
          letterSpacing: "0.32em", textTransform: "uppercase",
          padding: "10px 32px 10px 40px",
          border: "1px solid var(--accent)",
          boxShadow: "0 12px 32px -8px rgba(31,27,22,.4)",
          whiteSpace: "nowrap",
          pointerEvents: "none"
        }}>Réservé</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>
    </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 1fr 0.8fr 1.1fr 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>Surface</span><span>Loggia</span><span>Orientation</span><span style={{ textAlign: "right" }}>Prix</span><span style={{ textAlign: "right" }}>Statut</span>
      </div>
      {lots.map((lot) => {
        const reserved = lot.status === "reserved";
        return (
          <button
            key={lot.id}
            onClick={() => lot.status !== "sold" && onSelect(lot)}
            style={{
              display: "grid",
              gridTemplateColumns: "0.7fr 0.7fr 1fr 0.8fr 1.1fr 1fr 0.8fr",
              width: "100%", padding: "20px 24px", border: 0,
              borderBottom: "1px solid var(--line)", background: reserved ? "var(--bg2)" : "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 : reserved ? 0.45 : 1,
              filter: reserved ? "grayscale(0.8)" : "none",
              alignItems: "center"
            }}
            onMouseEnter={(e) => {if (lot.status !== "sold" && !reserved) e.currentTarget.style.background = "var(--bg2)";}}
            onMouseLeave={(e) => {if (!reserved) e.currentTarget.style.background = "transparent";}}>
        
          <span style={{ fontFamily: "var(--font-h)", fontSize: 20 }}>{lot.id}</span>
          <span>R+{lot.floor}</span>
          <span>{lot.surface} m²</span>
          <span>{lot.loggia} m²</span>
          <span>{lot.orientation}</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 reserved = l.status === "reserved";
              const color = !inFilter ? "var(--bg2)" :
              l.status === "sold" ? "var(--muted)" :
              reserved ? "#9CA1A6" :
              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 : reserved ? 0.55 : 1,
                  filter: reserved ? "grayscale(0.8) blur(0.5px)" : "none",
                  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" }}>T2 · {l.surface} m²</div>
                      <div style={{ fontFamily: "var(--font-b)", fontSize: 10, marginTop: 2, letterSpacing: "0.04em", opacity: 0.85 }}>{l.orientation}</div>
                    </div>
                    {reserved &&
                  <div style={{
                    position: "absolute", top: "50%", left: "50%",
                    transform: "translate(-50%, -50%) rotate(-12deg)",
                    background: "var(--ink)", color: "var(--bg)",
                    fontFamily: "var(--font-b)", fontSize: 11, fontWeight: 600,
                    letterSpacing: "0.22em", textTransform: "uppercase",
                    padding: "4px 12px",
                    whiteSpace: "nowrap",
                    pointerEvents: "none"
                  }}>Réservé</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="Réservé" />
        <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 }) {
  const [plaquetteOpen, setPlaquetteOpen] = useState(false);
  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}</Eyebrow>
              <h2 style={{ fontFamily: "var(--font-h)", fontSize: 48, lineHeight: 1, color: "var(--ink)", margin: 0, fontWeight: 400 }}>
                T2 · {lot.surface} m²
              </h2>
            </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 }}>
            {lot.status === "reserved" &&
            <div style={{
              padding: "16px 24px", background: "var(--bg2)",
              border: "1px solid var(--line)", textAlign: "center",
              fontFamily: "var(--font-b)", fontSize: 13, color: "var(--ink2)",
              letterSpacing: "0.08em", textTransform: "uppercase"
            }}>Lot réservé</div>
            }
            <Button variant="primary" size="lg" onClick={() => setPlaquetteOpen(true)} icon="✉">Télécharger la plaquette</Button>
          </div>
        </div>
      </div>
      {plaquetteOpen && window.PlaquetteModal && <window.PlaquetteModal lot={lot} onClose={() => setPlaquetteOpen(false)} />}
    </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,95 % (A21) à 4,11 % (A13) 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="surface" label="Orange, ville d'emploi">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 64, alignItems: "start" }}>
          <h2 style={{ fontFamily: "var(--font-h)", fontSize: "clamp(32px, 3.5vw, 48px)", lineHeight: 1.1, fontWeight: 400, color: "var(--ink)", margin: 0 }}>
            Un bassin d'emploi<br /><span style={{ fontStyle: "italic", color: "var(--accent)" }}>stable et captif</span>.
          </h2>
          <div>
            <p style={{ fontFamily: "var(--font-b)", fontSize: 17, lineHeight: 1.7, color: "var(--ink2)", margin: 0 }}>
              Orange bénéficie d'un tissu économique diversifié, dominé par la présence militaire (Base aérienne 115), hospitalière, et l'accès rapide au pôle régional Aix-Avignon-Marseille. Un marché locatif structurellement soutenu.
            </p>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24, marginTop: 40 }}>
              <StatBlock value="2 530" label="emplois · Base aérienne 115 — montée en puissance Rafale d'ici 2030 (Source INSEE)" />
              <StatBlock value="800" label="emplois · Centre hospitalier Louis-Giorgi, 1ᵉʳ employeur civil (Source site internet Centre Hospitalier Louis-Giorgi)" />
              <StatBlock value="25 min" label="d'Avignon TGV — Paris en 2 h 40" />
            </div>
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 1, marginTop: 48, background: "var(--line)", border: "1px solid var(--line)" }}>
          <MarketCell value="49 %" label="de locataires à Orange" />
          <MarketCell value="+20 %" label="hausse des loyers en 2 ans (Orpi)" />
          <MarketCell value="Zone B1" label="marché tendu" />
          <MarketCell value="600 – 680 €" label="loyer mensuel estimé T2" />
        </div>
      </Section>

      <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.
            </div>
          </div>
        </div>
      </Section>

      <Section bg="deep" label="Le moteur locatif">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }}>
          <div>
            <h2 style={{ fontFamily: "var(--font-h)", fontSize: "clamp(32px, 3.6vw, 50px)", lineHeight: 1.1, fontWeight: 400, color: "var(--bg)", margin: 0 }}>
              La BA 115,<br /><span style={{ fontStyle: "italic", color: "var(--accent)" }}>votre meilleur locataire</span>.
            </h2>
            <p style={{ fontFamily: "var(--font-b)", fontSize: 17, lineHeight: 1.7, color: "rgba(242,235,221,.75)", marginTop: 24, maxWidth: 520 }}>
              Une demande captive, solvable et renouvelée — le profil idéal pour un T2 meublé à Orange. Mutations tous les 2-3 ans : un turnover régulier, sans vacance prolongée, et une solvabilité garantie par l'État.
            </p>
            <div style={{ display: "flex", flexDirection: "column", gap: 12, marginTop: 28 }}>
              <MoteurLine>5 180 personnes (salariés + familles) sous influence directe — dont 41 % résident à Orange.</MoteurLine>
              <MoteurLine>+500 personnes d'ici 2028 — arrivée du 2ᵉ escadron Rafale sur la base.</MoteurLine>
              <MoteurLine>Forte demande de T2 meublés pour les militaires en mobilité géographique.</MoteurLine>
            </div>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
            <BigStat dark value="5 180" label="personnes sous influence directe de la BA 115" />
            <BigStat dark value="41 %" label="d'entre elles résident à Orange" />
            <BigStat dark value="+500" label="personnes attendues d'ici 2028" />
          </div>
        </div>
      </Section>

      <Section bg="bg2" label="Les bons dispositifs">
        <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 24 }}>
          <DispositifCard
            tag="LMNP · régime réel"
            title="Loueur Meublé Non Professionnel"
            body="L'amortissement comptable du bien et du mobilier neutralise fiscalement les loyers pendant 15 à 20 ans. Avec la cuisine équipée en option et 3 000 à 5 000 € de mobilier, votre T2 est immédiatement louable."
            kpi="4,1–4,5 %"
            kpiLabel="rendement brut estimé en LMNP" />
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 24, marginTop: 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 au T4 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="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‑680 €"
            kpiLabel="loyer mensuel estimé" />
          
        </div>
      </Section>
    </React.Fragment>);

}

function StatBlock({ value, label }) {
  return (
    <div>
      <div style={{ fontFamily: "var(--font-h)", fontSize: 40, lineHeight: 1, color: "var(--accent)" }}>{value}</div>
      <div style={{ fontFamily: "var(--font-b)", fontSize: 13, lineHeight: 1.5, color: "var(--ink2)", marginTop: 10 }}>{label}</div>
    </div>);
}

function MarketCell({ value, label }) {
  return (
    <div style={{ background: "var(--surface)", padding: "24px 22px" }}>
      <div style={{ fontFamily: "var(--font-h)", fontSize: 30, lineHeight: 1, color: "var(--ink)" }}>{value}</div>
      <div style={{ fontFamily: "var(--font-b)", fontSize: 12, lineHeight: 1.5, color: "var(--muted)", marginTop: 10, letterSpacing: "0.04em" }}>{label}</div>
    </div>);
}

function MoteurLine({ children }) {
  return (
    <div style={{ display: "flex", alignItems: "flex-start", gap: 12, fontFamily: "var(--font-b)", fontSize: 14, lineHeight: 1.6, color: "rgba(242,235,221,.85)" }}>
      <span style={{ color: "var(--accent)", marginTop: 1 }}>—</span>
      <span>{children}</span>
    </div>);
}

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({ prenom: "", nom: "", email: "", tel: "", projet: "habiter", message: "", consent: false });
  const [submitted, setSubmitted] = useState(false);

  const submit = (e) => {
    e.preventDefault();
    if (!form.prenom || !form.nom || !form.email || !form.tel || !form.consent) return;

    // Envoi vers notre backend VPS (/api/contact).
    const projetLabel = ({ habiter: "Habiter la résidence", investir: "Investir (locatif)", secondaire: "Résidence secondaire", autre: "Autre" })[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 || "",
        "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(() => {});
  };

  return (
    <React.Fragment>
      <PageHero
        eyebrow="Contact"
        title={<>Une question,<br /><i style={{ color: "var(--accent)" }}>une plaquette</i> ?</>}
        intro="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.prenom}</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 enregistrée. Anne vous rappelle dès réception au numéro indiqué, et vous transmet la plaquette commerciale à l'adresse <strong>{form.email}</strong>.
                </p>
                <div style={{ marginTop: 32 }}>
                  <Button variant="ghost" onClick={() => {setSubmitted(false);setForm({ prenom: "", 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 }}>
                <p hidden>
                  <label>Ne remplissez pas ce champ : <input name="bot-field" /></label>
                </p>
                <FormRow>
                  <FormField label="Prénom *" value={form.prenom} onChange={(v) => setForm({ ...form, prenom: v })} required />
                  <FormField label="Nom *" value={form.nom} onChange={(v) => setForm({ ...form, nom: v })} required />
                </FormRow>
                <FormRow>
                  <FormField label="E-mail *" type="email" value={form.email} onChange={(v) => setForm({ ...form, email: v })} required />
                  <FormField label="Téléphone *" type="tel" value={form.tel} onChange={(v) => setForm({ ...form, tel: v })} required />
                </FormRow>
                <FormRow>
                  <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>
                </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 sur le programme NOVA.

              </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 style={{ marginTop: 12 }}>
                  <a href={window.WHATSAPP_URL} target="_blank" rel="noopener noreferrer"
                     onClick={() => { if (window.plausible) { plausible('Clic WhatsApp'); } }}
                     style={{ display: "inline-flex", alignItems: "center", gap: 8, textDecoration: "none",
                       background: "#25D366", color: "#fff", fontFamily: "var(--font-b)", fontSize: 13,
                       fontWeight: 600, letterSpacing: "0.04em", padding: "10px 18px" }}>
                    <svg width="18" height="18" viewBox="0 0 32 32" fill="#fff" aria-hidden="true"><path d="M16.04 4C9.93 4 4.98 8.95 4.98 15.06c0 2.13.6 4.12 1.64 5.81L5 28l7.32-1.59a11 11 0 0 0 3.72.65h.01c6.11 0 11.06-4.95 11.06-11.06C27.11 8.95 22.15 4 16.04 4Zm6.45 15.66c-.27.76-1.58 1.46-2.18 1.51-.56.05-1.26.07-2.04-.13-.47-.12-1.07-.34-1.85-.67-3.25-1.4-5.37-4.66-5.53-4.88-.16-.22-1.33-1.76-1.33-3.36s.84-2.39 1.14-2.71c.3-.32.65-.4.86-.4.21 0 .43 0 .61.01.2.01.46-.07.72.55.27.64.91 2.21.99 2.37.08.16.13.35.03.56-.1.21-.16.35-.31.54-.16.19-.33.42-.47.56-.16.16-.32.33-.14.64.18.32.81 1.33 1.74 2.15 1.19 1.06 2.2 1.4 2.51 1.56.31.16.49.13.67-.08.18-.21.77-.9.98-1.21.21-.32.41-.27.69-.16.27.11 1.74.82 2.04.97.3.16.5.23.57.36.07.13.07.74-.2 1.5Z"/></svg>
                    WhatsApp
                  </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 />nova-residence.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, MentionsLegalesPage, PolitiqueConfidentialitePage
});

// ──────────────────────────────────────────────────────────────────────────
// MENTIONS LÉGALES
// ──────────────────────────────────────────────────────────────────────────

function MentionsLegalesPage() {
  return (
    <React.Fragment>
      <PageHero
        eyebrow="Informations légales"
        title={<>Mentions<br /><i style={{ color: "var(--accent)" }}>légales</i>.</>}
        intro="Conformément aux dispositions des articles 6-III et 19 de la loi n° 2004-575 du 21 juin 2004 pour la Confiance dans l'économie numérique (L.C.E.N.), nous portons à la connaissance des utilisateurs du site nova-residence.fr les informations suivantes." />

      <Section bg="bg">
        <div style={{ maxWidth: 760, margin: "0 auto", fontFamily: "var(--font-b)", fontSize: 15, lineHeight: 1.7, color: "var(--ink2)" }}>

          <LegalH2>1. Éditeur du site</LegalH2>
          <InfoBlock>
            <p><strong>MYAMO DÉVELOPPEMENT</strong></p>
            <p>SAS - société par actions simplifiée</p>
            <p>Siège social : Avenue du Golf, L'Orée des Mas, Bâtiment les Lauriers, 34670 Baillargues</p>
            <p>SIRET : 91089163900015</p>
            <p>RCS Montpellier : 910 891 639</p>
            <p>Adresse électronique : <a href="mailto:contact@myt2.fr" style={{ color: "var(--accent)" }}>a.magnoni@myamo.com</a></p>
            <p>Représentée par : Éric PEREZ, en sa qualité de Directeur Général</p>
          </InfoBlock>

          <LegalH2>2. Directeur de la publication</LegalH2>
          <p>Le Directeur de la publication du site est Monsieur Éric PEREZ, en sa qualité de représentant légal de la société MYAMO DÉVELOPPEMENT.</p>

          <LegalH2>3. Hébergeur du site</LegalH2>
          <InfoBlock>
            <p><strong>Hetzner Online GmbH</strong></p>
            <p>Industriestr. 25</p>
            <p>91710 Gunzenhausen — Allemagne</p>
            <p>Site web : <a href="https://www.hetzner.com" target="_blank" rel="noopener" style={{ color: "var(--accent)" }}>www.hetzner.com</a></p>
          </InfoBlock>

          <LegalH2>4. Objet du site</LegalH2>
          <p>Le site <strong>nova-residence.fr</strong> a pour objet la présentation et la commercialisation du programme immobilier neuf <strong>Résidence NOVA</strong>, situé à Orange (84100), développé par la société MYAMO DÉVELOPPEMENT.</p>
          <p>Les logements présentés sont commercialisés en direct par MYAMO DÉVELOPPEMENT, en qualité de promoteur-vendeur. Aucun mandat de commercialisation n'est confié à un agent immobilier.</p>

          <LegalH2>5. Informations relatives aux biens immobiliers présentés</LegalH2>
          <p>Les informations, plans, perspectives, surfaces et illustrations présentés sur le site sont fournis à titre indicatif et n'ont pas de valeur contractuelle. Les caractéristiques définitives des logements, leur prix, leur disponibilité ainsi que les conditions de la vente sont précisés dans les documents contractuels remis à l'acquéreur lors de la signature.</p>
          <p>Les illustrations et perspectives sont des représentations d'artiste à caractère d'ambiance ; les prestations, l'environnement et les aménagements définitifs peuvent différer.</p>
          <p>Le programme est susceptible d'être modifié dans le cadre de l'instruction du permis de construire modificatif et de l'évolution du projet.</p>

          <LegalH2>6. Propriété intellectuelle</LegalH2>
          <p>L'ensemble du contenu du site <strong>nova-residence.fr</strong> (structure, textes, logos, images, photographies, perspectives, plans, vidéos, illustrations, charte graphique) est la propriété exclusive de MYAMO DÉVELOPPEMENT ou de ses partenaires (notamment l'architecte Blue Tango Architectures pour les plans et perspectives), et est protégé par le droit français et international relatif à la propriété intellectuelle.</p>
          <p>Toute reproduction, représentation, modification, publication, transmission ou dénaturation, totale ou partielle, du site ou de son contenu, par quelque procédé que ce soit et sur quelque support que ce soit, est interdite sans l'autorisation écrite préalable de MYAMO DÉVELOPPEMENT. Toute exploitation non autorisée du site ou de l'un quelconque des éléments qu'il contient sera considérée comme constitutive d'une contrefaçon et poursuivie conformément aux dispositions des articles L.335-2 et suivants du Code de la propriété intellectuelle.</p>

          <LegalH2>7. Liens hypertextes</LegalH2>
          <p>Le site peut contenir des liens hypertextes pointant vers des sites tiers. MYAMO DÉVELOPPEMENT n'exerce aucun contrôle sur ces sites et décline toute responsabilité quant à leur contenu, leurs pratiques de confidentialité ou les services qu'ils proposent.</p>
          <p>La création de liens hypertextes vers le site <strong>nova-residence.fr</strong> est soumise à l'accord préalable et écrit de l'éditeur.</p>

          <LegalH2>8. Responsabilité</LegalH2>
          <p>MYAMO DÉVELOPPEMENT s'efforce d'assurer au mieux de ses possibilités l'exactitude et la mise à jour des informations diffusées sur le site, dont elle se réserve le droit de corriger le contenu à tout moment et sans préavis. Toutefois, MYAMO DÉVELOPPEMENT ne peut garantir l'exactitude, la précision ou l'exhaustivité des informations mises à disposition.</p>
          <p>En conséquence, MYAMO DÉVELOPPEMENT décline toute responsabilité :</p>
          <ul style={{ paddingLeft: "1.2rem", margin: "0 0 1rem" }}>
            <li style={{ marginBottom: 8 }}>pour toute imprécision, inexactitude ou omission portant sur des informations disponibles sur le site ;</li>
            <li style={{ marginBottom: 8 }}>pour tous dommages résultant d'une intrusion frauduleuse d'un tiers ayant entraîné une modification des informations mises à disposition ;</li>
            <li style={{ marginBottom: 8 }}>plus généralement, pour tous dommages directs ou indirects, quelles qu'en soient les causes, origines, natures ou conséquences, résultant de l'accès ou de l'utilisation du site.</li>
          </ul>

          <LegalH2>9. Données personnelles et cookies</LegalH2>
          <p>Le traitement des données personnelles collectées via le site ainsi que l'utilisation de cookies sont décrits en détail dans notre <a href="#/politique-confidentialite" style={{ color: "var(--accent)" }}>Politique de confidentialité</a>.</p>

          <LegalH2>10. Crédits photographiques et iconographiques</LegalH2>
          <ul style={{ paddingLeft: "1.2rem", margin: "0 0 1rem" }}>
            <li style={{ marginBottom: 8 }}>Logo, visuels et photographies de la résidence : © Myamo Développement</li>
            <li style={{ marginBottom: 8 }}>Arc de Triomphe : © Ville d'Orange</li>
            <li style={{ marginBottom: 8 }}>Théâtre Antique d'Orange : © Ville d'Orange · © Alexey Fedorenko – stock.adobe.com</li>
            <li style={{ marginBottom: 8 }}>Parc Gasparin : © Pop Tourisme</li>
            <li style={{ marginBottom: 8 }}>Base Aérienne 115 : © P. Merkel · © T. Champetier – Armée de l'air et de l'espace</li>
          </ul>

          <LegalH2>11. Droit applicable et juridiction compétente</LegalH2>
          <p>Les présentes mentions légales sont régies par le droit français. En cas de litige relatif à leur interprétation ou à leur exécution, et à défaut de résolution amiable, les tribunaux français seront seuls compétents.</p>

          <div style={{
            marginTop: 48, paddingTop: 24, borderTop: "1px solid var(--line)",
            fontSize: 13, color: "var(--muted)"
          }}>
            Dernière mise à jour : mai 2026
          </div>
        </div>
      </Section>
    </React.Fragment>);
}

function LegalH2({ children }) {
  return (
    <h2 style={{
      fontFamily: "var(--font-h)", fontWeight: 400, fontSize: 26,
      margin: "48px 0 16px", paddingBottom: 10,
      borderBottom: "1px solid var(--line)",
      color: "var(--ink)", lineHeight: 1.2
    }}>{children}</h2>);
}

function InfoBlock({ children }) {
  return (
    <div style={{
      background: "var(--surface)", border: "1px solid var(--line)",
      padding: "20px 24px", margin: "8px 0 24px"
    }}>
      {React.Children.map(children, (child) =>
      React.cloneElement(child, {
        style: { margin: "4px 0", ...(child.props.style || {}) }
      })
      )}
    </div>);
}

// ─────────────────────────────────────────────────────────────────────
// POLITIQUE DE CONFIDENTIALITÉ
// ─────────────────────────────────────────────────────────────────────

function PolitiqueConfidentialitePage() {
  return (
    <React.Fragment>
      <PageHero
        eyebrow="Informations légales"
        title={<>Politique de<br /><i style={{ color: "var(--accent)" }}>confidentialité</i>.</>}
        intro="La société MYAMO DÉVELOPPEMENT accorde une grande importance à la protection de vos données personnelles. La présente politique a pour objet de vous informer, conformément au Règlement (UE) 2016/679 du 27 avril 2016 (RGPD) et à la loi « Informatique et Libertés » modifiée du 6 janvier 1978, sur la manière dont vos données sont collectées et traitées via le site nova-residence.fr." />

      <Section bg="bg">
        <div style={{ maxWidth: 760, margin: "0 auto", fontFamily: "var(--font-b)", fontSize: 15, lineHeight: 1.7, color: "var(--ink2)" }}>

          <LegalH2>1. Responsable du traitement</LegalH2>
          <InfoBlock>
            <p><strong>MYAMO DÉVELOPPEMENT</strong></p>
            <p>SIREN 910 891 639</p>
            <p>Avenue du Golf, L'Orée des Mas, Bâtiment les Lauriers</p>
            <p>34670 Baillargues</p>
            <p>Adresse électronique : <a href="mailto:contact@myt2.fr" style={{ color: "var(--accent)" }}>a.magnoni@myamo.com</a></p>
          </InfoBlock>
          <p>MYAMO DÉVELOPPEMENT n'a pas désigné de Délégué à la Protection des Données (DPO). Pour toute question relative au traitement de vos données, vous pouvez nous contacter à l'adresse électronique ci-dessus.</p>

          <LegalH2>2. Données collectées et finalités</LegalH2>
          <p>Nous collectons et traitons vos données personnelles dans le cadre des trois finalités suivantes :</p>
          <LegalTable
            headers={["Finalité", "Données collectées", "Base légale", "Conservation"]}
            rows={[
            ["Réponse à votre demande de contact", "Nom, prénom, adresse électronique, téléphone, message", "Consentement et intérêt légitime", "3 ans à compter du dernier contact"],
            ["Envoi de la plaquette commerciale", "Nom, prénom, adresse électronique, téléphone, type de bien recherché", "Consentement", "3 ans à compter du dernier contact"],
            ["Prise de rendez-vous commercial", "Nom, prénom, adresse électronique, téléphone, créneau souhaité, éventuelles informations transmises", "Consentement et mesures précontractuelles (art. 6.1.b RGPD)", "3 ans à compter du dernier contact"]]
            } />
          <p>Conformément aux recommandations de la CNIL pour la prospection commerciale auprès de particuliers, vos données sont conservées pendant une durée maximale de <strong>3 ans à compter de votre dernier contact</strong> avec nous (dernière demande, dernier clic dans un email, etc.). Au-delà, elles sont supprimées ou anonymisées, sous réserve des durées de conservation imposées par la loi en cas de signature d'un contrat (notamment durées de conservation comptables et fiscales).</p>

          <LegalH2>3. Caractère obligatoire ou facultatif des données</LegalH2>
          <p>Les champs obligatoires sont signalés par un astérisque (*) dans les formulaires. À défaut de renseignement de ces champs, nous ne pourrons pas traiter votre demande. Les autres champs sont facultatifs et leur communication est laissée à votre libre appréciation.</p>

          <LegalH2>4. Destinataires des données</LegalH2>
          <p>Vos données sont destinées exclusivement aux services internes de MYAMO DÉVELOPPEMENT en charge de la commercialisation de la résidence NOVA. Elles ne font l'objet d'aucune cession, vente ou location à des tiers à des fins commerciales.</p>
          <p>Certaines de vos données peuvent être transmises à nos sous-traitants techniques agissant pour notre compte, dans le respect strict de nos instructions et conformément au RGPD :</p>

          <LegalH3>Hébergement et formulaires</LegalH3>
          <ul style={{ paddingLeft: "1.2rem", margin: "0 0 1rem" }}>
            <li style={{ marginBottom: 8 }}><strong>Hetzner Online GmbH</strong> (Allemagne, Union européenne) — hébergement du site. Les données sont hébergées dans l'Union européenne.</li>
            <li style={{ marginBottom: 8 }}><strong>Brevo (Sendinblue SAS)</strong> (France, Union européenne) — gestion des formulaires de contact et envoi des emails (CRM). Données hébergées dans l'Union européenne.</li>
          </ul>

          <LegalH3>Mesure d'audience et publicité</LegalH3>
          <ul style={{ paddingLeft: "1.2rem", margin: "0 0 1rem" }}>
            <li style={{ marginBottom: 8 }}><strong>Plausible Analytics</strong> (Plausible Insights OÜ, Estonie — Union européenne) — mesure d'audience du site. Plausible est un outil respectueux de la vie privée, sans cookies, qui ne collecte aucune donnée personnelle et n'effectue aucun suivi inter-sites. Les données d'audience sont hébergées dans l'Union européenne et ne font l'objet d'aucun transfert hors UE.</li>
            <li style={{ marginBottom: 8 }}><strong>Meta Platforms Ireland Limited</strong> — pixel Meta (Facebook / Instagram) utilisé pour mesurer l'efficacité de nos campagnes publicitaires et diffuser des publicités ciblées. Ce traceur n'est déposé qu'après votre consentement explicite, recueilli via le bandeau cookies (voir section 8). Les données peuvent être transférées aux États-Unis, dans des conditions encadrées par les Clauses Contractuelles Types et l'adhésion de Meta au cadre <em>EU-U.S. Data Privacy Framework</em>.</li>
            <li style={{ marginBottom: 8 }}><strong>Google Ireland Limited / Google LLC</strong> — balise Google Ads, utilisée pour mesurer l'efficacité de nos campagnes publicitaires et le remarketing. Ce traceur n'est déposé qu'après votre consentement explicite, recueilli via le bandeau cookies (voir section 8). Les données peuvent être transférées aux États-Unis, dans des conditions encadrées par les Clauses Contractuelles Types et l'adhésion de Google au cadre <em>EU-U.S. Data Privacy Framework</em>.</li>
          </ul>

          <LegalH2>5. Vos droits</LegalH2>
          <p>Conformément au RGPD et à la loi « Informatique et Libertés », vous disposez à tout moment des droits suivants sur vos données personnelles :</p>
          <ul style={{ paddingLeft: "1.2rem", margin: "0 0 1rem" }}>
            <li style={{ marginBottom: 8 }}><strong>Droit d'accès</strong> — obtenir la confirmation que vos données sont traitées et en recevoir une copie ;</li>
            <li style={{ marginBottom: 8 }}><strong>Droit de rectification</strong> — faire corriger des données inexactes ou incomplètes ;</li>
            <li style={{ marginBottom: 8 }}><strong>Droit à l'effacement</strong> (« droit à l'oubli ») — demander la suppression de vos données dans les cas prévus par la loi ;</li>
            <li style={{ marginBottom: 8 }}><strong>Droit à la limitation du traitement</strong> — demander la suspension du traitement de vos données ;</li>
            <li style={{ marginBottom: 8 }}><strong>Droit à la portabilité</strong> — récupérer vos données dans un format structuré et lisible par machine ;</li>
            <li style={{ marginBottom: 8 }}><strong>Droit d'opposition</strong> — vous opposer à tout moment au traitement de vos données, notamment à des fins de prospection commerciale ;</li>
            <li style={{ marginBottom: 8 }}><strong>Droit de retirer votre consentement</strong> — à tout moment, sans que cela ne remette en cause la licéité du traitement effectué avant ce retrait ;</li>
            <li style={{ marginBottom: 8 }}><strong>Droit de définir des directives</strong> relatives au sort de vos données après votre décès.</li>
          </ul>
          <p>Pour exercer ces droits, adressez-nous votre demande par voie électronique à <a href="mailto:contact@myt2.fr" style={{ color: "var(--accent)" }}>contact@myt2.fr</a> ou par courrier postal à l'adresse du siège social indiquée à la section 1. Nous pourrons être amenés à vous demander un justificatif d'identité en cas de doute raisonnable sur la personne à l'origine de la demande.</p>
          <p>Nous nous engageons à répondre à votre demande dans un délai d'un mois à compter de sa réception, prolongeable de deux mois en cas de demandes complexes.</p>

          <div style={{
            background: "var(--bg2)", borderLeft: "3px solid var(--accent)",
            padding: "16px 20px", margin: "24px 0", fontSize: 14
          }}>
            <p style={{ margin: "0 0 8px" }}>Si vous estimez, après nous avoir contactés, que vos droits ne sont pas respectés, vous disposez du droit d'introduire une réclamation auprès de la <strong>Commission Nationale de l'Informatique et des Libertés (CNIL)</strong> :</p>
            <p style={{ margin: 0 }}>3 place de Fontenoy — TSA 80715 — 75334 Paris Cedex 07 — <a href="https://www.cnil.fr" target="_blank" rel="noopener" style={{ color: "var(--accent)" }}>www.cnil.fr</a></p>
          </div>

          <LegalH2>6. Sécurité des données</LegalH2>
          <p>MYAMO DÉVELOPPEMENT met en œuvre les mesures techniques et organisationnelles appropriées pour garantir un niveau de sécurité adapté au risque, notamment : hébergement sur une infrastructure sécurisée (Hetzner, Union européenne), chiffrement des échanges via HTTPS, accès aux données restreint aux personnes habilitées au sein de la société.</p>

          <LegalH2>7. Transferts hors Union européenne</LegalH2>
          <p>L'hébergement du site (Hetzner), la gestion des formulaires (Brevo) et la mesure d'audience (Plausible) ont lieu intégralement au sein de l'Union européenne. Seuls les traceurs publicitaires Meta et Google (Google Ads), s'ils sont activés après votre consentement, peuvent impliquer un transfert de données hors de l'Union européenne, principalement vers les États-Unis. Ces transferts sont alors encadrés par les garanties prévues par le RGPD : Clauses Contractuelles Types adoptées par la Commission européenne et adhésion de Meta et de Google au cadre <em>EU-U.S. Data Privacy Framework</em>.</p>

          <LegalH2>8. Cookies et traceurs</LegalH2>

          <LegalH3>Qu'est-ce qu'un cookie ?</LegalH3>
          <p>Un cookie est un petit fichier texte déposé sur votre terminal (ordinateur, tablette, smartphone) lors de votre visite sur un site web. Il permet notamment de mémoriser des informations de navigation, d'analyser l'audience d'un site ou de personnaliser des contenus publicitaires.</p>

          <LegalH3>Cookies utilisés sur ce site</LegalH3>
          <LegalTable
            headers={["Catégorie", "Finalité", "Émetteur", "Durée", "Consentement"]}
            rows={[
            ["Strictement nécessaires", "Fonctionnement du site, sécurité, soumission des formulaires", "nova-residence.fr, Brevo", "Session ou 13 mois", "Non requis"],
            ["Mémorisation du consentement", "Conserver vos choix relatifs aux cookies", "nova-residence.fr", "6 mois", "Non requis"],
            ["Mesure d'audience", "Statistiques de fréquentation (via Plausible, sans cookie)", "Plausible Analytics", "Aucun cookie déposé", "Non requis"],
            ["Publicité et marketing", "Mesure de l'efficacité des campagnes publicitaires, ciblage et remarketing", "Meta (Facebook / Instagram), Google (Google Ads)", "13 mois", "Requis"]]
            } />

          <LegalH3>Gérer vos préférences</LegalH3>
          <p>Lors de votre première visite sur le site, un bandeau vous permet d'accepter, de refuser ou de personnaliser le dépôt des cookies non strictement nécessaires. Vous pouvez modifier vos choix à tout moment en cliquant sur le lien « Gérer mes cookies » présent en bas de page.</p>
          <p>Vous pouvez également configurer votre navigateur pour qu'il refuse l'enregistrement des cookies ou vous avertisse avant leur dépôt. Les modalités de paramétrage sont disponibles dans la rubrique d'aide de votre navigateur :</p>
          <ul style={{ paddingLeft: "1.2rem", margin: "0 0 1rem" }}>
            <li style={{ marginBottom: 8 }}><a href="https://support.google.com/chrome/answer/95647" target="_blank" rel="noopener" style={{ color: "var(--accent)" }}>Google Chrome</a></li>
            <li style={{ marginBottom: 8 }}><a href="https://support.mozilla.org/fr/kb/protection-renforcee-contre-pistage-firefox-ordinateur" target="_blank" rel="noopener" style={{ color: "var(--accent)" }}>Mozilla Firefox</a></li>
            <li style={{ marginBottom: 8 }}><a href="https://support.apple.com/fr-fr/guide/safari/sfri11471/mac" target="_blank" rel="noopener" style={{ color: "var(--accent)" }}>Safari</a></li>
            <li style={{ marginBottom: 8 }}><a href="https://support.microsoft.com/fr-fr/microsoft-edge" target="_blank" rel="noopener" style={{ color: "var(--accent)" }}>Microsoft Edge</a></li>
          </ul>

          <LegalH2>9. Modification de la présente politique</LegalH2>
          <p>MYAMO DÉVELOPPEMENT se réserve le droit de modifier la présente politique de confidentialité à tout moment, notamment pour tenir compte d'évolutions législatives, réglementaires ou techniques. Toute modification prendra effet dès sa publication sur le site. Nous vous invitons à consulter régulièrement cette page.</p>

          <div style={{
            marginTop: 48, paddingTop: 24, borderTop: "1px solid var(--line)",
            fontSize: 13, color: "var(--muted)",
            display: "flex", justifyContent: "space-between", alignItems: "baseline", flexWrap: "wrap", gap: 16
          }}>
            <span>Dernière mise à jour : mai 2026</span>
            <a href="#/mentions-legales" style={{ color: "var(--accent)" }}>Voir aussi les mentions légales →</a>
          </div>
        </div>
      </Section>
    </React.Fragment>);
}

function LegalH3({ children }) {
  return (
    <h3 style={{
      fontFamily: "var(--font-b)", fontWeight: 600, fontSize: 13,
      textTransform: "uppercase", letterSpacing: "0.08em",
      margin: "28px 0 10px", color: "var(--accent)"
    }}>{children}</h3>);
}

function LegalTable({ headers, rows }) {
  return (
    <div style={{ overflowX: "auto", margin: "16px 0 24px" }}>
      <table style={{
        width: "100%", borderCollapse: "collapse",
        background: "var(--surface)", border: "1px solid var(--line)",
        fontSize: 13, lineHeight: 1.55
      }}>
        <thead>
          <tr>
            {headers.map((h, i) =>
            <th key={i} style={{
              textAlign: "left", padding: "12px 14px",
              borderBottom: "1px solid var(--line)",
              background: "var(--bg2)",
              fontFamily: "var(--font-b)", fontWeight: 600,
              fontSize: 11, letterSpacing: "0.06em",
              textTransform: "uppercase", color: "var(--accent)"
            }}>{h}</th>
            )}
          </tr>
        </thead>
        <tbody>
          {rows.map((row, i) =>
          <tr key={i}>
              {row.map((cell, j) =>
            <td key={j} style={{
              padding: "12px 14px", verticalAlign: "top",
              borderBottom: i < rows.length - 1 ? "1px solid var(--line)" : 0,
              color: "var(--ink2)"
            }}>{cell}</td>
            )}
            </tr>
          )}
        </tbody>
      </table>
    </div>);
}