/* Prijs Crepi — Lead-gen simulator, multi-step with imagery */

const CREPI_COLORS = [
  { id: "wit", name: "Zuiver wit", hex: "#F3EFE7", desc: "Tijdloos, veelgekozen" },
  { id: "kalkwit", name: "Kalkwit", hex: "#E8E0D0", desc: "Warm, zacht gebroken" },
  { id: "zand", name: "Zandbeige", hex: "#D7C8A7", desc: "Landelijk, natuurlijk" },
  { id: "taupe", name: "Taupe", hex: "#A9998A", desc: "Modern, neutraal" },
  { id: "grijs", name: "Steengrijs", hex: "#8B8B87", desc: "Strak, stedelijk" },
  { id: "antraciet", name: "Antraciet", hex: "#4A4A4C", desc: "Gedurfd contrast" },
];

const CREPI_TEXTURES = [
  { id: "fijn", name: "Fijne korrel", m2Add: 8, desc: "Strakke, gladde look — populair bij moderne woningen", img: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&q=80" },
  { id: "middel", name: "Middelkorrel", m2Add: 0, desc: "De klassieker — warme textuur, geschikt voor elk type huis", img: "https://images.unsplash.com/photo-1615873968403-89e068629265?w=400&q=80" },
  { id: "grof", name: "Grove korrel", m2Add: -4, desc: "Robuust, rustiek karakter — mooi op oudere woningen", img: "https://images.unsplash.com/photo-1582268611958-ebfd161ef9cf?w=400&q=80" },
];

const HOUSE_TYPES = [
  { id: "rij", name: "Rijwoning", surface: 110, icon: "rij" },
  { id: "half", name: "Halfopen", surface: 160, icon: "half" },
  { id: "open", name: "Vrijstaand", surface: 230, icon: "open" },
  { id: "bungalow", name: "Bungalow", surface: 180, icon: "bungalow" },
];

const HouseIcon = ({ kind, active }) => {
  const stroke = active ? "#fff" : "var(--navy)";
  const fill = active ? "rgba(255,255,255,0.1)" : "var(--cream-2)";
  const paths = {
    rij: <g><rect x="10" y="20" width="20" height="30" fill={fill} stroke={stroke} strokeWidth="1.5"/><rect x="30" y="20" width="20" height="30" fill="none" stroke={stroke} strokeWidth="1.5"/><rect x="50" y="20" width="20" height="30" fill="none" stroke={stroke} strokeWidth="1.5"/><path d="M8 20 L30 8 L52 20" fill="none" stroke={stroke} strokeWidth="1.5"/></g>,
    half: <g><rect x="10" y="22" width="22" height="28" fill={fill} stroke={stroke} strokeWidth="1.5"/><rect x="32" y="22" width="22" height="28" fill="none" stroke={stroke} strokeWidth="1.5"/><path d="M8 22 L21 10 L34 22" fill="none" stroke={stroke} strokeWidth="1.5"/><path d="M30 22 L43 10 L56 22" fill="none" stroke={stroke} strokeWidth="1.5"/></g>,
    open: <g><rect x="16" y="24" width="32" height="26" fill={fill} stroke={stroke} strokeWidth="1.5"/><path d="M12 24 L32 8 L52 24" fill="none" stroke={stroke} strokeWidth="1.5"/><rect x="28" y="36" width="8" height="14" fill="none" stroke={stroke} strokeWidth="1.2"/></g>,
    bungalow: <g><rect x="10" y="30" width="44" height="20" fill={fill} stroke={stroke} strokeWidth="1.5"/><path d="M8 30 L32 16 L56 30" fill="none" stroke={stroke} strokeWidth="1.5"/></g>,
  };
  return <svg viewBox="0 0 64 60" width="56" height="52">{paths[kind]}</svg>;
};

const PrijsCrepiSimulator = () => {
  const [step, setStep] = React.useState(1);
  const [houseType, setHouseType] = React.useState("half");
  const [surface, setSurface] = React.useState(160);
  const [stories, setStories] = React.useState(2);
  const [color, setColor] = React.useState("kalkwit");
  const [texture, setTexture] = React.useState("middel");
  const [isolation, setIsolation] = React.useState("met");
  const [condition, setCondition] = React.useState("gewoon");
  const [extras, setExtras] = React.useState({ ramen: false, rollamellen: false, dorpels: false });
  const [urgent, setUrgent] = React.useState("3-6m");
  const [premium, setPremium] = React.useState(true);
  const [lead, setLead] = React.useState({ naam: "", email: "", telefoon: "", postcode: "", adres: "", bericht: "" });
  const [photos, setPhotos] = React.useState([]);
  const [sent, setSent] = React.useState(false);

  const onAddPhotos = (files) => {
    const arr = Array.from(files).slice(0, 6 - photos.length);
    const mapped = arr.map(f => ({ id: Math.random().toString(36).slice(2), name: f.name, size: f.size, url: URL.createObjectURL(f) }));
    setPhotos(p => [...p, ...mapped].slice(0, 6));
  };
  const removePhoto = (id) => setPhotos(p => p.filter(x => x.id !== id));

  // Sync surface when houseType changes
  React.useEffect(() => {
    const h = HOUSE_TYPES.find(x => x.id === houseType);
    if (h) setSurface(h.surface);
  }, [houseType]);

  const selectedTexture = CREPI_TEXTURES.find(t => t.id === texture);
  const selectedColor = CREPI_COLORS.find(c => c.id === color);
  const baseM2 = 95 + selectedTexture.m2Add;
  const isolationMult = isolation === "met" ? 1.0 : 0.55;
  const conditionMult = { goed: 1.0, gewoon: 1.08, slecht: 1.22 }[condition];
  const storiesMult = stories === 1 ? 0.92 : stories === 2 ? 1.0 : stories === 3 ? 1.12 : 1.22;
  const extrasAdd =
    (extras.ramen ? 180 * Math.round(surface / 40) : 0) +
    (extras.rollamellen ? 420 * Math.round(surface / 40) : 0) +
    (extras.dorpels ? 95 * Math.round(surface / 18) : 0);
  const base = baseM2 * surface * conditionMult * storiesMult * isolationMult;
  const total = base + extrasAdd;
  const premie = premium && isolation === "met" ? Math.min(total * 0.14, 4600) : 0;
  const net = Math.max(0, total - premie);

  /* ============ ENERGIE-IMPACT & TERUGVERDIEN-BEREKENING ============
     Assumpties (Vlaanderen 2026, conservatief ingeschat):
     - Gem. gasverbruik schaalt met gevel-oppervlakte: ~100 kWh/m² gevel/jaar voor stookkost
       (rekent verwarming alleen, niet sanitair warm water)
     - Gasprijs: €0,11/kWh incl. BTW & accijns (stabiel midden-scenario)
     - Gevelisolatie ETICS 14cm: 28-35% besparing op stookkost, afhankelijk van startstaat
     - Warmtepomp-ready: U-waarde gevel moet <0,24 W/m²K — ETICS 14cm haalt 0,22 W/m²K
     ================================================================ */
  const KWH_PER_M2_GEVEL = 100;       // kWh/m² gevel/jaar stookverbruik
  const GAS_PRICE = 0.11;              // €/kWh incl. alles
  const SAVINGS_RATE = condition === "slecht" ? 0.38 : condition === "goed" ? 0.26 : 0.32;
  const annualKwhSaved = isolation === "met" ? Math.round(KWH_PER_M2_GEVEL * surface * SAVINGS_RATE) : 0;
  const annualEnergySavings = Math.round(annualKwhSaved * GAS_PRICE);
  const twentyYearSavings = annualEnergySavings * 20;
  const paybackYears = annualEnergySavings > 0 ? (net / annualEnergySavings) : 0;
  const co2SavedTonPerYear = +(annualKwhSaved * 0.000202).toFixed(2); // kg CO2/kWh gas * ton
  // Warmtepomp-ready check: enkel met ETICS 14cm
  const heatPumpReady = isolation === "met";

  const STEPS = [
    { n: 1, l: "Woning" },
    { n: 2, l: "Afwerking" },
    { n: 3, l: "Details" },
    { n: 4, l: "Planning" },
    { n: 5, l: "Offerte" },
  ];

  const canNext = {
    1: houseType && surface > 0,
    2: color && texture,
    3: condition && isolation,
    4: urgent,
    5: lead.naam && lead.email && lead.telefoon,
  }[step];

  const onSubmit = (e) => {
    e.preventDefault();
    setSent(true);
  };

  return (
    <section id="simulator" className="m-sim" style={{ padding: "110px 40px", scrollMarginTop: 72, background: "linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%)" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        {/* Header */}
        <div className="m-sim-header" style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 60, alignItems: "end", marginBottom: 48 }}>
          <div>
            <SectionLabel color="var(--terracotta)">Prijs Crepi · in 60 seconden</SectionLabel>
            <h2 className="display" style={{ fontSize: 58, color: "var(--navy)", marginTop: 14, lineHeight: 1.02, letterSpacing: "-0.025em" }}>
              Wat kost mijn <em style={{ fontStyle: "italic", color: "var(--sage-deep)", fontWeight: 400 }}>crepi-gevel</em>?
            </h2>
            <p style={{ fontSize: 18, color: "var(--navy)", opacity: 0.75, marginTop: 18, lineHeight: 1.55, maxWidth: 540 }}>
              Vijf eenvoudige vragen, een richtprijs die klopt met wat ik op het plaatsbezoek zie.
              Geen verplichtingen — je krijgt de berekening in je mailbox en ik bel enkel als je dat wil.
            </p>
          </div>
          <div style={{ display: "grid", gap: 12 }}>
            {[
              { i: "check", t: "Gebaseerd op 300+ reële projecten in Kempen-Noord" },
              { i: "check", t: "Premies en BTW al verrekend" },
              { i: "check", t: "Geen callcenter — Vincent belt persoonlijk" },
            ].map((x, i) => (
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 12, fontSize: 14, color: "var(--navy)" }}>
                <span style={{ width: 26, height: 26, borderRadius: "50%", background: "var(--sage)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                  <Icon name="check" size={14} stroke="#fff" />
                </span>
                {x.t}
              </div>
            ))}
          </div>
        </div>

        {/* Card */}
        <div className="m-sim-card" style={{
          display: "grid", gridTemplateColumns: "1.35fr 1fr",
          background: "var(--white)", borderRadius: 24, overflow: "hidden",
          border: "1px solid var(--border)",
          boxShadow: "0 50px 100px -40px rgba(61,64,91,0.25)",
        }}>
          {/* LEFT — wizard */}
          <div className="m-sim-left" style={{ padding: "0 0 0 0", display: "flex", flexDirection: "column" }}>
            {/* Progress */}
            <div className="m-sim-progress" style={{ display: "flex", padding: "24px 44px 0", gap: 6 }}>
              {STEPS.map((s, i) => (
                <div key={s.n} style={{ flex: 1, display: "flex", flexDirection: "column", gap: 6 }}>
                  <div style={{ height: 3, borderRadius: 2, background: step >= s.n ? "var(--terracotta)" : "var(--border)" }} />
                  <div style={{ fontSize: 11, color: step >= s.n ? "var(--navy)" : "var(--muted)", fontWeight: step === s.n ? 600 : 400, fontFamily: "DM Sans", letterSpacing: "0.04em", textTransform: "uppercase" }}>
                    {String(s.n).padStart(2,"0")} · {s.l}
                  </div>
                </div>
              ))}
            </div>

            <div className="m-sim-step" style={{ padding: "36px 44px 24px", flex: 1, minHeight: 560 }}>
              {step === 1 && <StepWoning {...{houseType, setHouseType, surface, setSurface, stories, setStories}} />}
              {step === 2 && <StepAfwerking {...{color, setColor, texture, setTexture, selectedColor, selectedTexture}} />}
              {step === 3 && <StepDetails {...{isolation, setIsolation, condition, setCondition, extras, setExtras}} />}
              {step === 4 && <StepPlanning {...{urgent, setUrgent, premium, setPremium, isolation}} />}
              {step === 5 && <StepOfferte {...{lead, setLead, sent, onSubmit, net, selectedColor, selectedTexture, surface, photos, onAddPhotos, removePhoto}} />}
            </div>

            {/* Footer controls */}
            {!sent && (
              <div className="m-sim-controls" style={{ borderTop: "1px solid var(--border)", padding: "20px 44px", display: "flex", justifyContent: "space-between", alignItems: "center", background: "var(--cream)" }}>
                <button onClick={() => setStep(s => Math.max(1, s-1))} disabled={step === 1} style={{
                  padding: "11px 18px", borderRadius: 10, fontSize: 14, fontFamily: "Jost", fontWeight: 500,
                  color: step === 1 ? "var(--muted)" : "var(--navy)",
                  background: "transparent", border: "1px solid var(--border)",
                  opacity: step === 1 ? 0.4 : 1, cursor: step === 1 ? "default" : "pointer",
                }}>← Terug</button>
                <div style={{ fontSize: 12, color: "var(--muted)", fontFamily: "DM Sans" }}>Stap {step} van {STEPS.length}</div>
                {step < 5 ? (
                  <button onClick={() => canNext && setStep(s => Math.min(5, s+1))} disabled={!canNext} style={{
                    padding: "12px 22px", borderRadius: 10, fontSize: 14, fontFamily: "Jost", fontWeight: 500,
                    color: "#fff", background: canNext ? "var(--navy)" : "var(--muted)",
                    border: "none", opacity: canNext ? 1 : 0.6, cursor: canNext ? "pointer" : "default",
                  }}>Volgende →</button>
                ) : <div style={{ width: 120 }} />}
              </div>
            )}
          </div>

          {/* RIGHT — sticky summary */}
          <SimPanel
            net={net} total={total} premie={premie} base={base} extrasAdd={extrasAdd}
            selectedColor={selectedColor} selectedTexture={selectedTexture}
            surface={surface} houseType={houseType} extras={extras} sent={sent} lead={lead}
            photos={photos}
            annualEnergySavings={annualEnergySavings}
            annualKwhSaved={annualKwhSaved}
            twentyYearSavings={twentyYearSavings}
            paybackYears={paybackYears}
            co2SavedTonPerYear={co2SavedTonPerYear}
            heatPumpReady={heatPumpReady}
            isolation={isolation}
          />
        </div>

        {/* Trust row */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20, marginTop: 40 }}>
          {[
            { big: "300+", small: "projecten in de Kempen sinds 2017" },
            { big: "< 1 dag", small: "gemiddelde terugbeltijd" },
            { big: "10 jaar", small: "Cralux garantie op pleisterwerk" },
            { big: "4,9/5", small: "op 142 Google reviews" },
          ].map((x, i) => (
            <div key={i} style={{ padding: "20px 22px", borderRadius: 14, background: "var(--white)", border: "1px solid var(--border)" }}>
              <div className="display" style={{ fontSize: 28, color: "var(--navy)", lineHeight: 1 }}>{x.big}</div>
              <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 6, lineHeight: 1.4 }}>{x.small}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ---------- STEP 1: Woning ---------- */
const StepWoning = ({ houseType, setHouseType, surface, setSurface, stories, setStories }) => (
  <div style={{ display: "grid", gap: 32 }}>
    <div>
      <StepTitle>Welk type woning heb je?</StepTitle>
      <StepSub>Ik pas de richtoppervlakte automatisch aan — je kan ze nadien bijstellen.</StepSub>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 10, marginTop: 18 }}>
        {HOUSE_TYPES.map(h => {
          const active = h.id === houseType;
          return (
            <button key={h.id} onClick={() => setHouseType(h.id)} style={{
              padding: "18px 14px 16px", borderRadius: 14, textAlign: "left",
              background: active ? "var(--navy)" : "var(--cream)",
              color: active ? "#fff" : "var(--navy)",
              border: "1.5px solid " + (active ? "var(--navy)" : "var(--border)"),
              transition: "all 150ms", display: "flex", flexDirection: "column", gap: 10, alignItems: "flex-start",
            }}>
              <HouseIcon kind={h.icon} active={active} />
              <div>
                <div style={{ fontSize: 14, fontWeight: 500 }}>{h.name}</div>
                <div style={{ fontSize: 11, opacity: 0.65, marginTop: 2 }}>≈ {h.surface} m² gevel</div>
              </div>
            </button>
          );
        })}
      </div>
    </div>

    <div>
      <StepLabel>Exacte geveloppervlakte · <strong style={{ color: "var(--navy)", fontWeight: 500 }}>{surface} m²</strong></StepLabel>
      <input type="range" min={40} max={400} step={5} value={surface} onChange={e => setSurface(+e.target.value)}
        style={{ width: "100%", accentColor: "var(--terracotta)", marginTop: 8 }} />
      <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11, color: "var(--muted)", marginTop: 4, fontFamily: "DM Sans" }}>
        <span>40 m²</span><span>200 m²</span><span>400 m²</span>
      </div>
      <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 10, fontStyle: "italic" }}>
        💡 Niet zeker? Vuistregel: (omtrek × hoogte) − (ramen + deuren). Ik controleer het sowieso bij het plaatsbezoek.
      </div>
    </div>

    <div>
      <StepLabel>Aantal bouwlagen</StepLabel>
      <div style={{ display: "flex", gap: 8, marginTop: 10 }}>
        {[{v:1,l:"1 laag"},{v:2,l:"2 lagen"},{v:3,l:"3 lagen"},{v:4,l:"4+"}].map(o => {
          const active = stories === o.v;
          return (
            <button key={o.v} onClick={() => setStories(o.v)} style={{
              flex: 1, padding: "12px 10px", borderRadius: 10, fontSize: 14, fontFamily: "Jost", fontWeight: 500,
              background: active ? "var(--navy)" : "var(--cream)",
              color: active ? "#fff" : "var(--navy)",
              border: "1.5px solid " + (active ? "var(--navy)" : "var(--border)"),
            }}>{o.l}</button>
          );
        })}
      </div>
    </div>
  </div>
);

/* ---------- STEP 2: Afwerking ---------- */
const StepAfwerking = ({ color, setColor, texture, setTexture }) => (
  <div style={{ display: "grid", gap: 32 }}>
    <div>
      <StepTitle>Welke crepi-kleur spreekt je aan?</StepTitle>
      <StepSub>Dit zijn de 6 meestgekozen tinten uit onze kleurenwaaier — er zijn er 40+ beschikbaar. Geen zorgen, ik breng stalen mee.</StepSub>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12, marginTop: 18 }}>
        {CREPI_COLORS.map(c => {
          const active = c.id === color;
          return (
            <button key={c.id} onClick={() => setColor(c.id)} style={{
              borderRadius: 14, overflow: "hidden", textAlign: "left",
              border: "2px solid " + (active ? "var(--navy)" : "var(--border)"),
              background: "var(--white)", padding: 0,
              boxShadow: active ? "0 0 0 3px rgba(61,64,91,0.08)" : "none",
              transition: "all 150ms",
            }}>
              <div style={{
                height: 72, background: c.hex,
                backgroundImage: `radial-gradient(circle at 30% 30%, rgba(255,255,255,0.15) 1px, transparent 1px), radial-gradient(circle at 70% 70%, rgba(0,0,0,0.08) 1px, transparent 1px)`,
                backgroundSize: "6px 6px, 5px 5px",
                position: "relative",
              }}>
                {active && <div style={{ position: "absolute", top: 8, right: 8, width: 22, height: 22, borderRadius: "50%", background: "var(--navy)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                  <Icon name="check" size={12} stroke="#fff" />
                </div>}
              </div>
              <div style={{ padding: "10px 14px" }}>
                <div style={{ fontSize: 13, fontWeight: 500, color: "var(--navy)" }}>{c.name}</div>
                <div style={{ fontSize: 11, color: "var(--muted)", marginTop: 1 }}>{c.desc}</div>
              </div>
            </button>
          );
        })}
      </div>
    </div>

    <div>
      <StepLabel>Korrelstructuur</StepLabel>
      <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 2, marginBottom: 12 }}>De grofte van de pleister bepaalt de uitstraling en heeft een kleine prijsimpact.</div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 10 }}>
        {CREPI_TEXTURES.map(t => {
          const active = t.id === texture;
          return (
            <button key={t.id} onClick={() => setTexture(t.id)} style={{
              padding: 0, borderRadius: 12, overflow: "hidden", textAlign: "left",
              border: "2px solid " + (active ? "var(--navy)" : "var(--border)"),
              background: "var(--white)",
            }}>
              <div style={{ height: 56, background: "var(--cream-2)", position: "relative", overflow: "hidden" }}>
                <TexturePattern kind={t.id} />
                {active && <div style={{ position: "absolute", top: 6, right: 6, width: 20, height: 20, borderRadius: "50%", background: "var(--navy)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                  <Icon name="check" size={11} stroke="#fff" />
                </div>}
              </div>
              <div style={{ padding: "8px 12px" }}>
                <div style={{ fontSize: 13, fontWeight: 500, color: "var(--navy)" }}>{t.name}</div>
                <div style={{ fontSize: 11, color: "var(--muted)", marginTop: 2, lineHeight: 1.3 }}>{t.desc}</div>
                {t.m2Add !== 0 && <div style={{ fontSize: 11, color: t.m2Add > 0 ? "var(--terracotta)" : "var(--sage-deep)", marginTop: 4, fontWeight: 500 }}>
                  {t.m2Add > 0 ? "+" : ""}€{t.m2Add}/m²
                </div>}
              </div>
            </button>
          );
        })}
      </div>
    </div>
  </div>
);

const TexturePattern = ({ kind }) => {
  if (kind === "fijn") return <div style={{ position: "absolute", inset: 0, background: "radial-gradient(circle at 20% 30%, #C9B99D 0.5px, transparent 0.5px), radial-gradient(circle at 70% 60%, #C9B99D 0.5px, transparent 0.5px), #E8DFCB", backgroundSize: "3px 3px, 4px 4px" }} />;
  if (kind === "middel") return <div style={{ position: "absolute", inset: 0, background: "radial-gradient(circle at 30% 40%, #B8A584 1px, transparent 1px), radial-gradient(circle at 70% 60%, #B8A584 1.2px, transparent 1.2px), #E8DFCB", backgroundSize: "7px 7px, 9px 9px" }} />;
  return <div style={{ position: "absolute", inset: 0, background: "radial-gradient(circle at 30% 40%, #A08E6B 2px, transparent 2px), radial-gradient(circle at 70% 60%, #A08E6B 1.8px, transparent 1.8px), #E8DFCB", backgroundSize: "11px 11px, 13px 13px" }} />;
};

/* ---------- STEP 3: Details ---------- */
const StepDetails = ({ isolation, setIsolation, condition, setCondition, extras, setExtras }) => (
  <div style={{ display: "grid", gap: 28 }}>
    <div>
      <StepTitle>Isolatie erbij?</StepTitle>
      <StepSub>Een gevelrenovatie is hét moment om meteen te isoleren. Je bespaart direct op je stookkost, en je maakt je woning klaar voor een warmtepomp — zonder je verwarming nu al te moeten vervangen.</StepSub>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginTop: 16 }}>
        {[
          { v: "met", t: "Met buitenisolatie", sub: "ETICS 14cm · U 0,22 W/m²K · warmtepomp-ready · premie", badge: "Aanbevolen" },
          { v: "zonder", t: "Enkel pleisterwerk", sub: "Crepi op bestaande gevel, zonder energiewinst" },
        ].map(o => {
          const active = o.v === isolation;
          return (
            <button key={o.v} onClick={() => setIsolation(o.v)} style={{
              padding: "18px 18px", borderRadius: 12, textAlign: "left",
              background: active ? "var(--navy)" : "var(--cream)",
              color: active ? "#fff" : "var(--navy)",
              border: "1.5px solid " + (active ? "var(--navy)" : "var(--border)"),
              position: "relative",
            }}>
              {o.badge && <div style={{ display: "inline-block", fontSize: 10, fontWeight: 600, padding: "3px 8px", borderRadius: 9999, background: "var(--sage)", color: "var(--navy)", fontFamily: "DM Sans", letterSpacing: "0.06em", textTransform: "uppercase", marginBottom: 8 }}>{o.badge}</div>}
              <div style={{ fontSize: 15, fontWeight: 500 }}>{o.t}</div>
              <div style={{ fontSize: 12, opacity: 0.7, marginTop: 4, lineHeight: 1.4 }}>{o.sub}</div>
            </button>
          );
        })}
      </div>

      {/* Warmtepomp-context callout — enkel bij 'met' isolatie */}
      {isolation === "met" && (
        <div style={{
          marginTop: 12, padding: "14px 16px", borderRadius: 11,
          background: "var(--sage)", color: "var(--navy)",
          display: "flex", gap: 12, alignItems: "flex-start",
        }}>
          <div style={{ width: 34, height: 34, borderRadius: 8, background: "var(--sage-deep)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
            <HeatPumpIcon />
          </div>
          <div style={{ flex: 1, fontSize: 12.5, lineHeight: 1.5 }}>
            <strong>Klaar voor een warmtepomp.</strong> Een warmtepomp werkt enkel rendabel als je schil goed isoleert (U-waarde gevel &lt; 0,24). Met ETICS 14cm kom je op 0,22. Je gas-ketel hoeft nu niet weg — maar als hij binnen 5-10 jaar vervangen moet, sta je klaar.
          </div>
        </div>
      )}
    </div>

    <div>
      <StepLabel>Staat van de huidige gevel</StepLabel>
      <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 2, marginBottom: 10 }}>Scheuren, verweerde voegen of losse delen → meer voorbereidend werk.</div>
      <div style={{ display: "flex", gap: 8 }}>
        {[{v:"goed",l:"Goed"},{v:"gewoon",l:"Normaal"},{v:"slecht",l:"Veel herstelwerk"}].map(o => {
          const active = condition === o.v;
          return (
            <button key={o.v} onClick={() => setCondition(o.v)} style={{
              flex: 1, padding: "12px 10px", borderRadius: 10, fontSize: 14, fontFamily: "Jost", fontWeight: 500,
              background: active ? "var(--navy)" : "var(--cream)",
              color: active ? "#fff" : "var(--navy)",
              border: "1.5px solid " + (active ? "var(--navy)" : "var(--border)"),
            }}>{o.l}</button>
          );
        })}
      </div>
    </div>

    <div>
      <StepLabel>Meteen meenemen? (optioneel)</StepLabel>
      <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 2, marginBottom: 10 }}>Dingen die vaak tegelijk mee gedaan worden — alles door één ploeg, minder overlast.</div>
      <div style={{ display: "grid", gap: 8 }}>
        {[
          { k: "ramen", l: "Ramen vernieuwen", d: "Aluminium of PVC, HR++ glas" },
          { k: "rollamellen", l: "Rolluiken / screens", d: "Ingebouwd in isolatie — verdwijnt mooi in de gevel" },
          { k: "dorpels", l: "Nieuwe raamtabletten / dorpels", d: "Natuursteen of composiet, op maat" },
        ].map(o => {
          const active = extras[o.k];
          return (
            <label key={o.k} style={{
              display: "flex", alignItems: "center", gap: 14, padding: "12px 16px", borderRadius: 10,
              background: active ? "var(--cream-2)" : "var(--cream)",
              border: "1.5px solid " + (active ? "var(--navy)" : "var(--border)"),
              cursor: "pointer",
            }}>
              <input type="checkbox" checked={active} onChange={e => setExtras(x => ({ ...x, [o.k]: e.target.checked }))}
                style={{ width: 18, height: 18, accentColor: "var(--navy)", cursor: "pointer" }} />
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 500, color: "var(--navy)" }}>{o.l}</div>
                <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 2 }}>{o.d}</div>
              </div>
            </label>
          );
        })}
      </div>
    </div>
  </div>
);

/* ---------- STEP 4: Planning ---------- */
const StepPlanning = ({ urgent, setUrgent, premium, setPremium, isolation }) => (
  <div style={{ display: "grid", gap: 32 }}>
    <div>
      <StepTitle>Wanneer wil je starten?</StepTitle>
      <StepSub>Eerlijk antwoord: ik plan werken ongeveer 3-4 maanden vooruit. Laat me weten waar je zit.</StepSub>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 10, marginTop: 18 }}>
        {[
          { v: "asap", t: "Zo snel mogelijk", s: "Mijn eerstvolgende gat in de planning" },
          { v: "3-6m", t: "Binnen 3–6 maanden", s: "De sweet spot voor goede voorbereiding" },
          { v: "6-12m", t: "6–12 maanden", s: "Rustig offertes vergelijken" },
          { v: "orient", t: "Nog oriënterend", s: "Ik denk er pas over na — ook welkom" },
        ].map(o => {
          const active = urgent === o.v;
          return (
            <button key={o.v} onClick={() => setUrgent(o.v)} style={{
              padding: "16px 18px", borderRadius: 12, textAlign: "left",
              background: active ? "var(--navy)" : "var(--cream)",
              color: active ? "#fff" : "var(--navy)",
              border: "1.5px solid " + (active ? "var(--navy)" : "var(--border)"),
            }}>
              <div style={{ fontSize: 15, fontWeight: 500 }}>{o.t}</div>
              <div style={{ fontSize: 12, opacity: 0.7, marginTop: 4 }}>{o.s}</div>
            </button>
          );
        })}
      </div>
    </div>

    {isolation === "met" && (
      <div style={{ padding: "20px 22px", borderRadius: 14, background: "var(--sage)", color: "var(--navy)" }}>
        <div style={{ display: "flex", alignItems: "start", gap: 14 }}>
          <div style={{ width: 40, height: 40, borderRadius: "50%", background: "var(--sage-deep)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
            <Icon name="zap" size={18} stroke="#fff" />
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14, fontWeight: 600 }}>Goed nieuws: premie verrekenen</div>
            <div style={{ fontSize: 13, marginTop: 4, lineHeight: 1.5 }}>
              Je buitenisolatie komt in aanmerking voor de Vlaamse renovatiepremie. Ik regel de volledige aanvraag — jij hoeft niks op te zoeken.
            </div>
            <label style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 12, fontSize: 13, fontWeight: 500, cursor: "pointer" }}>
              <input type="checkbox" checked={premium} onChange={e => setPremium(e.target.checked)} style={{ width: 18, height: 18, accentColor: "var(--navy)" }} />
              Ja, verreken de premie in mijn prijs
            </label>
          </div>
        </div>
      </div>
    )}
  </div>
);

/* ---------- STEP 5: Offerte / lead ---------- */
const StepOfferte = ({ lead, setLead, sent, onSubmit, net, selectedColor, selectedTexture, surface, photos, onAddPhotos, removePhoto }) => {
  const fileRef = React.useRef(null);
  if (sent) {
    return (
      <div style={{ padding: "20px 0", display: "grid", gap: 20 }}>
        <div style={{ width: 72, height: 72, borderRadius: "50%", background: "var(--sage)", display: "flex", alignItems: "center", justifyContent: "center" }}>
          <Icon name="check" size={34} stroke="var(--navy)" />
        </div>
        <div>
          <div className="display" style={{ fontSize: 34, color: "var(--navy)", lineHeight: 1.1 }}>Bedankt, {lead.naam.split(" ")[0]}!</div>
          <p style={{ fontSize: 15, color: "var(--navy)", opacity: 0.75, marginTop: 10, lineHeight: 1.55 }}>
            Je berekening staat op weg naar <strong>{lead.email}</strong>
            {photos.length > 0 && <>, samen met je {photos.length} foto{photos.length > 1 ? "'s" : ""}</>}
            {" "}en 3 referentieprojecten uit {lead.postcode || "je buurt"}.
          </p>
        </div>
        <div style={{ padding: "20px 22px", background: "var(--cream-2)", borderRadius: 14, display: "grid", gap: 10 }}>
          <div className="mono-label" style={{ color: "var(--terracotta)" }}>Wat gebeurt er nu?</div>
          {[
            { n: "1", t: "Ik bel je binnen één werkdag", s: `Op ${lead.telefoon} — kort, om kennis te maken en een moment in te plannen` },
            { n: "2", t: "Plaatsbezoek, kosteloos", s: "Ik kom langs, meet op, en breng stalen mee van je gekozen kleur" },
            { n: "3", t: "Gratis 3D voor-na render", s: "Je ziet je eigen gevel in de gekozen kleur en textuur — vóór er iets getekend wordt" },
            { n: "4", t: "Definitieve offerte", s: "Met transparante prijsopbouw en vaste planning — pas als je helemaal zeker bent" },
          ].map(x => (
            <div key={x.n} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
              <div style={{ width: 26, height: 26, borderRadius: "50%", background: "var(--navy)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 12, fontWeight: 600, flexShrink: 0, marginTop: 1 }}>{x.n}</div>
              <div>
                <div style={{ fontSize: 14, fontWeight: 500, color: "var(--navy)" }}>{x.t}</div>
                <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 2 }}>{x.s}</div>
              </div>
            </div>
          ))}
        </div>
        <div style={{ fontSize: 12, color: "var(--muted)", fontStyle: "italic" }}>
          Urgent? Bel me direct — Vincent · <strong style={{ color: "var(--navy)", fontStyle: "normal" }}>+32 473 12 34 56</strong>
        </div>
      </div>
    );
  }
  return (
    <div style={{ display: "grid", gap: 20 }}>
      <div>
        <StepTitle>Waar mag ik je berekening sturen?</StepTitle>
        <StepSub>Je gegevens komen rechtstreeks bij mij terecht — géén doorverkoop, géén callcenter, geen automatische mails.</StepSub>
      </div>
      <form onSubmit={onSubmit} style={{ display: "grid", gap: 10 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
          <Input label="Voornaam + achternaam *" value={lead.naam} onChange={v => setLead(l => ({...l, naam: v}))} placeholder="Jan Janssens" />
          <Input label="Postcode *" value={lead.postcode} onChange={v => setLead(l => ({...l, postcode: v}))} placeholder="2960" />
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
          <Input label="E-mail *" value={lead.email} onChange={v => setLead(l => ({...l, email: v}))} type="email" placeholder="jan@voorbeeld.be" />
          <Input label="Telefoon *" value={lead.telefoon} onChange={v => setLead(l => ({...l, telefoon: v}))} placeholder="0473 12 34 56" />
        </div>
        <Input label="Iets wat ik vooraf moet weten? (optioneel)" value={lead.bericht} onChange={v => setLead(l => ({...l, bericht: v}))} placeholder="Bv. 'We zijn thuis op zaterdag' of 'Hoekpand op druk kruispunt'" textarea />

        {/* Photo upload — optional */}
        <div style={{ marginTop: 8, padding: "18px 20px", borderRadius: 14, background: "var(--cream)", border: "1.5px dashed var(--border)" }}>
          <div style={{ display: "flex", alignItems: "flex-start", gap: 14 }}>
            <div style={{ width: 40, height: 40, borderRadius: 10, background: "var(--terracotta)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
              <Icon name="camera" size={20} stroke="#fff" />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 600, color: "var(--navy)" }}>
                Stuur foto's van je gevel mee <span style={{ fontWeight: 400, color: "var(--muted)", fontSize: 12, marginLeft: 6 }}>· optioneel</span>
              </div>
              <div style={{ fontSize: 12.5, color: "var(--muted)", marginTop: 4, lineHeight: 1.5 }}>
                Hoe meer ik van je gevel zie, hoe scherper de prijs. Eén foto van de voorkant volstaat — extra hoeken mogen, geen probleem als je ze later nog doorstuurt.
              </div>
              <input
                ref={fileRef}
                type="file" accept="image/*" multiple
                onChange={e => { onAddPhotos(e.target.files); e.target.value = ""; }}
                style={{ display: "none" }}
              />
              {photos.length > 0 && (
                <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(90px, 1fr))", gap: 8, marginTop: 14 }}>
                  {photos.map(p => (
                    <div key={p.id} style={{ position: "relative", aspectRatio: "1 / 1", borderRadius: 8, overflow: "hidden", border: "1px solid var(--border)" }}>
                      <img src={p.url} alt={p.name} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                      <button type="button" onClick={() => removePhoto(p.id)} style={{
                        position: "absolute", top: 4, right: 4, width: 22, height: 22, borderRadius: "50%",
                        background: "rgba(0,0,0,0.7)", color: "#fff", fontSize: 12, lineHeight: 1,
                        display: "flex", alignItems: "center", justifyContent: "center",
                      }}>×</button>
                    </div>
                  ))}
                </div>
              )}
              <div style={{ display: "flex", gap: 10, alignItems: "center", marginTop: 12 }}>
                <button type="button" onClick={() => fileRef.current?.click()} disabled={photos.length >= 6} style={{
                  padding: "10px 16px", borderRadius: 10, fontSize: 13, fontFamily: "Jost", fontWeight: 500,
                  background: "var(--white)", color: "var(--navy)", border: "1.5px solid var(--border)",
                  display: "inline-flex", alignItems: "center", gap: 8,
                  opacity: photos.length >= 6 ? 0.5 : 1, cursor: photos.length >= 6 ? "default" : "pointer",
                }}>
                  <Icon name="plus" size={14} stroke="var(--navy)" />
                  {photos.length === 0 ? "Foto's toevoegen" : "Nog een foto"}
                </button>
                <span style={{ fontSize: 11, color: "var(--muted)" }}>{photos.length}/6 · max. 10 MB per foto</span>
              </div>
            </div>
          </div>
        </div>

        {/* 3D render reassurance */}
        <div style={{ marginTop: 4, padding: "16px 18px", borderRadius: 12, background: "var(--navy)", color: "#fff", display: "flex", gap: 14, alignItems: "center" }}>
          <div style={{ width: 44, height: 44, borderRadius: 10, background: "var(--sage-deep)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
            <Icon name="layers" size={20} stroke="#fff" />
          </div>
          <div style={{ flex: 1, fontSize: 13, lineHeight: 1.5 }}>
            <strong style={{ fontSize: 14 }}>Gratis 3D-render vóór je tekent.</strong><br />
            <span style={{ opacity: 0.8 }}>Ik maak een voor-na visualisatie van je gevel in de gekozen kleur en textuur. Pas als je het resultaat ziet, bespreken we de definitieve offerte. Geen verrassingen.</span>
          </div>
        </div>

        <button type="submit" disabled={!(lead.naam && lead.email && lead.telefoon)} style={{
          marginTop: 8, padding: "16px 22px", borderRadius: 12,
          background: (lead.naam && lead.email && lead.telefoon) ? "var(--terracotta)" : "var(--muted)",
          color: "#fff", fontSize: 15, fontWeight: 500, fontFamily: "Jost",
          border: "none", cursor: (lead.naam && lead.email && lead.telefoon) ? "pointer" : "default",
          display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12,
        }}>
          <span>Stuur mij deze berekening</span>
          <span>→</span>
        </button>
        <div style={{ fontSize: 11, color: "var(--muted)", textAlign: "center", lineHeight: 1.5, marginTop: 4 }}>
          Door te klikken ga je akkoord met onze privacyverklaring. Geen verplichting tot offerte, geen verborgen kosten.
        </div>
      </form>
    </div>
  );
};

const Input = ({ label, value, onChange, type = "text", placeholder, textarea }) => (
  <label style={{ display: "block" }}>
    <div style={{ fontSize: 11, color: "var(--muted)", marginBottom: 6, fontFamily: "DM Sans", fontWeight: 500, letterSpacing: "0.04em", textTransform: "uppercase" }}>{label}</div>
    {textarea ? (
      <textarea value={value} onChange={e => onChange(e.target.value)} placeholder={placeholder} rows={2} style={{
        width: "100%", padding: "12px 14px", borderRadius: 10, border: "1.5px solid var(--border)",
        background: "var(--cream)", fontFamily: "Jost", fontSize: 14, color: "var(--navy)", resize: "vertical", outline: "none",
      }} />
    ) : (
      <input type={type} value={value} onChange={e => onChange(e.target.value)} placeholder={placeholder} style={{
        width: "100%", padding: "12px 14px", borderRadius: 10, border: "1.5px solid var(--border)",
        background: "var(--cream)", fontFamily: "Jost", fontSize: 14, color: "var(--navy)", outline: "none",
      }} />
    )}
  </label>
);

/* ---------- Right panel ---------- */
const SimPanel = ({ net, total, premie, base, extrasAdd, selectedColor, selectedTexture, surface, houseType, extras, sent, lead,
  annualEnergySavings, annualKwhSaved, twentyYearSavings, paybackYears, co2SavedTonPerYear, heatPumpReady, isolation }) => {
  const range = Math.round(net * 0.12);
  const low = Math.max(0, net - range);
  const high = net + range;
  return (
    <div className="m-sim-right" style={{ background: "var(--navy)", color: "#fff", padding: "40px 38px", display: "flex", flexDirection: "column", gap: 20 }}>
      {/* Live preview visual */}
      <div style={{ position: "relative", borderRadius: 14, overflow: "hidden", height: 170, background: selectedColor.hex }}>
        <div style={{ position: "absolute", inset: 0, background: `radial-gradient(circle at 20% 30%, rgba(0,0,0,0.08) 1px, transparent 1px), radial-gradient(circle at 70% 70%, rgba(255,255,255,0.2) 0.8px, transparent 0.8px)`, backgroundSize: selectedTexture.id === "fijn" ? "4px 4px, 3px 3px" : selectedTexture.id === "grof" ? "12px 12px, 10px 10px" : "7px 7px, 6px 6px" }} />
        {/* Fake window cutouts */}
        <div style={{ position: "absolute", left: 30, top: 30, width: 50, height: 70, background: "rgba(40,50,70,0.75)", borderRadius: 2, border: "2px solid rgba(255,255,255,0.4)" }} />
        <div style={{ position: "absolute", right: 30, top: 30, width: 50, height: 70, background: "rgba(40,50,70,0.75)", borderRadius: 2, border: "2px solid rgba(255,255,255,0.4)" }} />
        <div style={{ position: "absolute", left: 94, top: 50, right: 94, height: 50, background: "rgba(40,50,70,0.75)", borderRadius: 2, border: "2px solid rgba(255,255,255,0.4)" }} />
        <div style={{ position: "absolute", left: 12, top: 12, padding: "4px 10px", borderRadius: 9999, background: "rgba(255,255,255,0.9)", color: "var(--navy)", fontSize: 10, fontWeight: 600, fontFamily: "DM Sans", letterSpacing: "0.06em", textTransform: "uppercase" }}>
          Preview · {selectedColor.name}
        </div>
      </div>

      <div>
        <div className="mono-label" style={{ color: "rgba(255,255,255,0.55)" }}>Indicatieve prijs · incl. BTW</div>
        <div className="display" style={{ fontSize: 52, lineHeight: 1, marginTop: 8, color: "#fff", letterSpacing: "-0.03em", fontVariationSettings: '"opsz" 80' }}>
          € {Math.round(net).toLocaleString("nl-BE")}
        </div>
        <div style={{ fontSize: 12, opacity: 0.65, marginTop: 6 }}>
          Bandbreedte: € {low.toLocaleString("nl-BE")} — € {high.toLocaleString("nl-BE")}
        </div>
      </div>

      <div style={{ padding: "16px 18px", borderRadius: 12, background: "rgba(255,255,255,0.06)", fontSize: 13, display: "grid", gap: 7 }}>
        <PanelRow k="Crepi-afwerking" v={`${selectedColor.name} · ${selectedTexture.name.toLowerCase()}`} />
        <PanelRow k={`${surface} m² gevel`} v={`€ ${Math.round(base).toLocaleString("nl-BE")}`} />
        {extrasAdd > 0 && <PanelRow k="Extras meegenomen" v={`+ € ${extrasAdd.toLocaleString("nl-BE")}`} />}
        <div style={{ height: 1, background: "rgba(255,255,255,0.12)", margin: "3px 0" }} />
        <PanelRow k="Subtotaal" v={`€ ${Math.round(total).toLocaleString("nl-BE")}`} />
        {premie > 0 && <PanelRow k="Vlaamse renovatiepremie" v={`− € ${Math.round(premie).toLocaleString("nl-BE")}`} color="var(--sage)" />}
      </div>

      {/* ======= ENERGIE-IMPACT (alleen met isolatie) ======= */}
      {isolation === "met" && annualEnergySavings > 0 && (
        <div style={{
          padding: "20px 20px 18px", borderRadius: 14,
          background: "linear-gradient(135deg, rgba(138,164,126,0.22) 0%, rgba(138,164,126,0.08) 100%)",
          border: "1px solid rgba(138,164,126,0.35)",
          display: "grid", gap: 14,
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <div style={{ width: 32, height: 32, borderRadius: 8, background: "var(--sage-deep)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
              <Icon name="zap" size={16} stroke="#fff" />
            </div>
            <div className="mono-label" style={{ color: "#C9D8B8", letterSpacing: "0.08em" }}>Energie-impact</div>
          </div>

          {/* Hero metric — jaarlijkse besparing */}
          <div>
            <div className="display" style={{ fontSize: 38, lineHeight: 1, color: "#fff", letterSpacing: "-0.02em" }}>
              € {annualEnergySavings.toLocaleString("nl-BE")}
            </div>
            <div style={{ fontSize: 13, opacity: 0.8, marginTop: 4 }}>per jaar minder stookkost</div>
            <div style={{ fontSize: 11.5, opacity: 0.6, marginTop: 3 }}>
              ≈ {annualKwhSaved.toLocaleString("nl-BE")} kWh/jaar · gasprijs € 0,11/kWh
            </div>
          </div>

          {/* 3 mini-tiles: 20-jaar totaal · terugverdientijd · CO₂ */}
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8 }}>
            <MiniStat
              value={`€ ${Math.round(twentyYearSavings / 1000)}k`}
              label="over 20 jaar"
            />
            <MiniStat
              value={paybackYears < 99 ? `${paybackYears.toFixed(1)} j` : "—"}
              label="terugverdientijd"
            />
            <MiniStat
              value={`${co2SavedTonPerYear} t`}
              label="CO₂/jaar minder"
            />
          </div>

          <div style={{ fontSize: 11.5, opacity: 0.65, lineHeight: 1.5, fontStyle: "italic", paddingTop: 4, borderTop: "1px solid rgba(255,255,255,0.08)" }}>
            Richtcijfers op basis van gem. Vlaamse stookkost per m² gevel. Effectieve besparing hangt af van leefgedrag, bestaande isolatiewaarde en glas.
          </div>
        </div>
      )}

      {/* ======= WARMTEPOMP-READY BADGE ======= */}
      {heatPumpReady && (
        <div style={{
          padding: "16px 18px", borderRadius: 12,
          background: "var(--sage-deep)",
          color: "#fff",
          display: "flex", gap: 14, alignItems: "flex-start",
          position: "relative", overflow: "hidden",
        }}>
          <div style={{ width: 38, height: 38, borderRadius: 10, background: "rgba(255,255,255,0.18)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
            <HeatPumpIcon />
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 3 }}>
              <div style={{ fontSize: 14, fontWeight: 600, letterSpacing: "-0.005em" }}>Warmtepomp-ready</div>
              <div style={{ fontSize: 9, fontWeight: 700, padding: "2px 6px", borderRadius: 4, background: "rgba(255,255,255,0.25)", fontFamily: "DM Sans", letterSpacing: "0.08em", textTransform: "uppercase" }}>
                U = 0,22
              </div>
            </div>
            <div style={{ fontSize: 12, lineHeight: 1.5, opacity: 0.92 }}>
              Met ETICS 14cm haalt je gevel U-waarde 0,22 W/m²K — ruim onder de drempel waarbij een warmtepomp rendabel en efficiënt werkt. Klaar voor de energietransitie, zonder je gas te moeten verbouwen.
            </div>
          </div>
        </div>
      )}

      {/* ======= Zonder-isolatie nudge ======= */}
      {isolation === "zonder" && (
        <div style={{
          padding: "14px 16px", borderRadius: 12,
          background: "rgba(224,122,95,0.12)",
          border: "1px dashed rgba(224,122,95,0.4)",
          fontSize: 12, lineHeight: 1.55,
        }}>
          <strong style={{ color: "var(--terracotta)" }}>💡 Gemist voordeel?</strong>{" "}
          <span style={{ opacity: 0.85 }}>Met ETICS-isolatie erbij bespaar je ook nog <strong style={{ color: "#fff" }}>€ {Math.round(100 * surface * 0.32 * 0.11).toLocaleString("nl-BE")}/jaar</strong> op je stookkost én wordt je woning warmtepomp-ready. De meerkost verdien je terug in 8-12 jaar.</span>
        </div>
      )}

      <div style={{ display: "flex", gap: 10, alignItems: "center", padding: "12px 14px", borderRadius: 10, background: "rgba(224,122,95,0.15)", border: "1px solid rgba(224,122,95,0.3)" }}>
        <Icon name="shield" size={16} stroke="var(--terracotta)" />
        <div style={{ fontSize: 12, lineHeight: 1.45 }}>
          <strong>10 jaar Cralux-garantie</strong> inbegrepen · premie-aanvraag door Vincent · één vast aanspreekpunt
        </div>
      </div>

      {!sent && <div style={{ fontSize: 12, opacity: 0.6, lineHeight: 1.55, fontStyle: "italic" }}>
        Prijs past zich live aan naarmate je antwoorden geeft. Finale offerte altijd na plaatsbezoek.
      </div>}
    </div>
  );
};

const PanelRow = ({ k, v, color }) => (
  <div style={{ display: "flex", justifyContent: "space-between", gap: 12 }}>
    <span style={{ opacity: 0.7 }}>{k}</span>
    <span style={{ fontWeight: 500, color: color || "#fff", textAlign: "right" }}>{v}</span>
  </div>
);

const MiniStat = ({ value, label }) => (
  <div style={{
    padding: "10px 10px 9px", borderRadius: 9,
    background: "rgba(255,255,255,0.07)",
    border: "1px solid rgba(255,255,255,0.08)",
    textAlign: "center",
  }}>
    <div className="display" style={{ fontSize: 18, lineHeight: 1.05, color: "#fff", letterSpacing: "-0.01em" }}>{value}</div>
    <div style={{ fontSize: 10, opacity: 0.7, marginTop: 3, lineHeight: 1.2, fontFamily: "DM Sans" }}>{label}</div>
  </div>
);

/* Stylized warmtepomp-icoon (zonne-cyclus + huis) */
const HeatPumpIcon = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
    {/* Outdoor unit */}
    <rect x="3" y="8" width="8" height="10" rx="1" />
    <circle cx="7" cy="13" r="2" />
    <path d="M7 11 L7 15 M5 13 L9 13" />
    {/* Pipes */}
    <path d="M11 11 L14 11 M11 15 L14 15" />
    {/* House */}
    <path d="M14 18 L14 12 L18 9 L22 12 L22 18 Z" />
    <path d="M16 18 L16 14 L20 14 L20 18" />
  </svg>
);

const StepTitle = ({ children }) => (
  <h3 className="display" style={{ fontSize: 26, color: "var(--navy)", lineHeight: 1.15, letterSpacing: "-0.015em" }}>{children}</h3>
);
const StepSub = ({ children }) => (
  <p style={{ fontSize: 14, color: "var(--muted)", marginTop: 8, lineHeight: 1.55, maxWidth: 520 }}>{children}</p>
);
const StepLabel = ({ children }) => (
  <div style={{ fontSize: 12, color: "var(--navy)", fontFamily: "DM Sans", fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase" }}>{children}</div>
);

Object.assign(window, { PrijsCrepiSimulator });