/* ---------------- Full Calculator ---------------- */
const { useState, useMemo, useEffect: useEffectFC } = React;

const PROJECTEN = [
  { id:"el-raso",     pdf:"/brochures/brochure-el-raso.pdf",     naam:"El Raso",     locatie:"Costa Blanca · Guardamar",             prijs:"€ 222.000",   minKoop:200000, rendement:"6–8% bruto",   tag:"Hoogste rendement",            img:"https://images.unsplash.com/photo-1512917774080-9991f1c4c750?w=600&q=80" },
  { id:"san-miguel",  pdf:"/brochures/brochure-san-miguel.pdf",  naam:"San Miguel",  locatie:"Costa Blanca · San Miguel de Salinas", prijs:"€ 244.000",   minKoop:220000, rendement:"5–6,5% bruto", tag:"Incl. meubilair",              img:"https://images.unsplash.com/photo-1564013799919-ab600027ffc6?w=600&q=80" },
  { id:"laguna-one",  pdf:"/brochures/brochure-laguna-one.pdf",  naam:"Laguna One",  locatie:"Costa del Sol · Fuengirola",            prijs:"€ 250.800",   minKoop:225000, rendement:"5–7% bruto",   tag:"Laagste instap Costa del Sol", img:"https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?w=600&q=80" },
  { id:"isea",        pdf:"/brochures/brochure-isea.pdf",        naam:"Isea",        locatie:"Costa del Sol · Estepona",              prijs:"± € 330.000", minKoop:297000, rendement:"4–6% bruto",   tag:"Strand + centrum",             img:"https://images.unsplash.com/photo-1571896349842-33c89424de2d?w=600&q=80" },
  { id:"eagle-hills", pdf:"/brochures/brochure-eagle-hills.pdf", naam:"Eagle Hills", locatie:"Costa del Sol · Estepona Golf",         prijs:"€ 355.000",   minKoop:320000, rendement:"4–6% bruto",   tag:"Golf · Premium",               img:"https://images.unsplash.com/photo-1587174486073-ae5e5cff23aa?w=600&q=80" },
];

function fmt(n) { return Math.round(n).toLocaleString("nl-NL"); }
function fmtEur(n) { return "€ " + fmt(n); }
function fmtPct(n) { return n.toFixed(1).replace(".",",") + "%"; }

function BrochuresSection({ koopprijs }) {
  const passend = PROJECTEN.filter(p => koopprijs >= p.minKoop);
  const lijst = passend.length > 0 ? passend : PROJECTEN.slice(0, 2);
  const kop = passend.length > 0
    ? `${lijst.length} project${lijst.length === 1 ? "" : "en"} binnen jouw budget`
    : "Populaire projecten om te verkennen";
  return (
    <div className="fc-result-card">
      <div className="fc-broch-kop">
        <span className="eyebrow"><span className="dot"></span>{kop}</span>
      </div>
      <div className="fc-broch-grid">
        {lijst.map(p => (
          <div className="fc-broch-card" key={p.id}>
            <div className="fc-broch-img" style={{backgroundImage:`url(${p.img})`}}>
              <span className="fc-broch-tag">{p.tag}</span>
            </div>
            <div className="fc-broch-body">
              <div className="fc-broch-naam">{p.naam}</div>
              <div className="fc-broch-loc">{p.locatie}</div>
              <div className="fc-broch-meta">
                <span className="fc-broch-prijs">{p.prijs}</span>
                <span className="fc-broch-rend">{p.rendement}</span>
              </div>
              <button onClick={()=> window.openLeadGate && window.openLeadGate("brochure", p)} className="fc-broch-btn" style={{background:"none",border:0,padding:0,cursor:"pointer",textAlign:"left",font:"inherit",color:"inherit",width:"100%"}}>
                <span>Download brochure</span>
                <svg width="12" height="12" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M7 2v8M3.5 6.5L7 10l3.5-3.5M2 12h10"/></svg>
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function FullCalculator() {
  const [type, setType] = useState("bestaand");
  const [eigen, setEigen] = useState(0);
  const [eigenInput, setEigenInput] = useState("");
  const [leeftijd1, setLeeftijd1] = useState(40);
  const [leeftijd2, setLeeftijd2] = useState("");
  const [metHypotheek, setMetHypotheek] = useState(true);
  const [lening, setLening] = useState(350000);
  const [rente, setRente] = useState(3.75);
  const [verhuurOpen, setVerhuurOpen] = useState(true);
  const [verhuurType, setVerhuurType] = useState("vakantie");
  const [nacht, setNacht] = useState(140);
  const [maand, setMaand] = useState(1400);
  const [bezetting, setBezetting] = useState(60);

  useEffectFC(() => {
    if (metHypotheek && eigen >= 50000) {
      const kPct = type === "nieuwbouw" ? 14.2 : 10.0;
      setLening(Math.round((0.70 * eigen) / (0.30 + kPct / 100) / 5000) * 5000);
    }
  }, [eigen, metHypotheek, type]);
  useEffectFC(() => { setBezetting(verhuurType === "vakantie" ? 60 : 92); }, [verhuurType]);

  const calc = useMemo(() => {
    if (eigen < 50000) return null;

    const l2 = leeftijd2 !== "" && Number(leeftijd2) > 0 ? Number(leeftijd2) : null;
    const age1 = parseInt(leeftijd1)||18; const jongste = l2 !== null ? Math.min(age1, l2) : age1;
    const looptijdJaar = Math.max(1, Math.min(25, 70 - jongste));
    const n = looptijdJaar * 12;

    const kostenPct = type === "nieuwbouw" ? 14.2 : 10.0;
    const kostenLabel = type === "nieuwbouw" ? "Aankoopkosten nieuwbouw (14,2%)" : "Aankoopkosten resale (10%)";

    const totaalBudget = eigen + (metHypotheek ? lening : 0);
    const koopprijs = totaalBudget / (1 + kostenPct / 100);
    const totaleKosten = koopprijs * kostenPct / 100;
    const totaleInvestering = totaalBudget;

    let maandlast = 0;
    if (metHypotheek && lening > 0 && rente > 0) {
      const r = (rente / 100) / 12;
      maandlast = lening * (r * Math.pow(1+r,n)) / (Math.pow(1+r,n) - 1);
    }

    // LTV check: lening mag max 70% van koopprijs
    const maxLtvLening = koopprijs * 0.70;
    const ltvOverschrijding = metHypotheek && lening > maxLtvLening + 100;


    // Rendement
    const isVakantie = verhuurType === "vakantie";
    const mgmtPct = isVakantie ? 25 : 10;
    let brutoHuur = 0;
    if (isVakantie && nacht > 0) brutoHuur = nacht * Math.round(365 * (bezetting/100));
    if (!isVakantie && maand > 0) brutoHuur = maand * 12 * (bezetting/100);
    let rendement = null;
    if (brutoHuur > 0) {
      const mgmt = brutoHuur * mgmtPct / 100;
      const ibi = koopprijs * 0.003;
      const vasteLasten = 3000 + 1200 + 350 + ibi;
      const irnr = Math.max(0, brutoHuur - mgmt - vasteLasten) * 0.19;
      const nettoHuur = brutoHuur - mgmt - vasteLasten - irnr;
      rendement = { brutoHuur, mgmt, mgmtPct, ibi, irnr, nettoHuur, brutoR: brutoHuur/koopprijs*100, nettoR: nettoHuur/totaleInvestering*100, cocR: eigen>0?nettoHuur/eigen*100:0, cashflow: (nettoHuur/12)-maandlast };
    }

    return { totaalBudget, koopprijs, totaleKosten, kostenPct, kostenLabel, totaleInvestering, maandlast, ltvOverschrijding, maxLtvLening, looptijdJaar, rendement };
  }, [eigen, leeftijd1, leeftijd2, metHypotheek, lening, rente, type, verhuurType, nacht, maand, bezetting]);

  return (
    <div className="fc-wrap">
      <div className="fc-form">
        <div className="fc-card">
          <div className="fc-card-num">01</div>
          <div className="fc-card-title">Type aankoop</div>
          <div className="fc-field" style={{marginTop:16}}>
            <label>Type pand</label>
            <div className="fc-toggle">
              <button className={type==="bestaand"?"active":""} onClick={()=>setType("bestaand")}>Bestaande woning</button>
              <button className={type==="nieuwbouw"?"active":""} onClick={()=>setType("nieuwbouw")}>Nieuwbouw</button>
            </div>
            <span style={{display:"block",marginTop:"6px",fontFamily:"var(--font-mono)",fontSize:"11px",letterSpacing:"0.04em",color:"var(--muted)"}}>
              {type==="bestaand" ? "Aankoopkosten: ~10% (belastingen, notaris, advocaat)" : "Aankoopkosten: ~14,2% (IVA, AJD, notaris, advocaat)"}
            </span>
          </div>
        </div>

        <div className="fc-card">
          <div className="fc-card-num">02</div>
          <div className="fc-card-title">Eigen inbreng</div>
          <p style={{margin:"4px 0 16px",fontSize:"13px",color:"var(--muted)",lineHeight:1.5}}>Vul je eigen inbreng in. We berekenen automatisch hoeveel hypotheek daarbij past.</p>
          <div className={"fc-eigen "+(eigen>0&&eigen<50000?"fout":"")}>
            <span className="fc-eigen-eur">€</span>
            <input type="number" value={eigenInput} placeholder="Bijv. 100.000" min="0" step="1000" onChange={(e)=>{setEigenInput(e.target.value);setEigen(parseFloat(e.target.value)||0);}} />
          </div>
          {eigen>0&&eigen<50000&&<div className="fc-fout">Minimale eigen inbreng is € 50.000.</div>}

          <div className="fc-grid-2" style={{marginTop:20}}>
            <div className="fc-field">
              <label>Leeftijd aanvrager 1</label>
              <input type="number" value={leeftijd1} min="18" max="69" step="1" onChange={(e)=>setLeeftijd1(e.target.value)} onBlur={(e)=>{ const v=parseInt(e.target.value); setLeeftijd1(isNaN(v)?18:Math.min(69,Math.max(18,v))); }} />
            </div>
            <div className="fc-field">
              <label>Leeftijd aanvrager 2 <span className="fc-hint">(optioneel)</span></label>
              <input type="number" value={leeftijd2} placeholder="Leeftijd" min="18" max="69" step="1" onChange={(e)=>setLeeftijd2(e.target.value)} />
            </div>
          </div>
          {calc&&<span style={{display:"block",marginTop:"6px",fontFamily:"var(--font-mono)",fontSize:"11px",letterSpacing:"0.04em",color:"var(--muted)"}}>Maximale looptijd op basis van jouw leeftijd: {calc.looptijdJaar} jaar.</span>}

          <div className="fc-switch-row" style={{marginTop:20}}>
            <div><div className="fc-switch-label">Met hypotheek</div><div className="fc-switch-sub">Schakel uit als je volledig met eigen geld koopt</div></div>
            <button className={"fc-switch "+(metHypotheek?"on":"")} onClick={()=>setMetHypotheek(!metHypotheek)}><span></span></button>
          </div>

          {metHypotheek&&<div className="fc-grid-2" style={{marginTop:14}}>
            <div className="fc-field">
              <label>{"Leenbedrag"+(calc&&calc.koopprijs>0?" · LTV "+fmtPct(lening/calc.koopprijs*100):"")}</label>
              <div style={{position:"relative"}}>
                <span style={{position:"absolute",left:"12px",top:"50%",transform:"translateY(-50%)",fontFamily:"var(--font-mono)",fontSize:"13px",color:"var(--muted)",pointerEvents:"none",userSelect:"none"}}>€</span>
                <input type="number" value={lening} min="0" step="5000" onChange={(e)=>setLening(parseFloat(e.target.value)||0)} style={{paddingLeft:"28px"}} />
              </div>
              <span style={{display:"block",marginTop:"6px",fontFamily:"var(--font-mono)",fontSize:"11px",letterSpacing:"0.04em",color:"var(--muted)"}}>LTV (loan-to-value): hoeveel je leent t.o.v. de koopprijs.</span>
              {calc&&calc.ltvOverschrijding&&<div className="fc-fout" style={{marginTop:6}}>Lening overschrijdt 70% LTV. Maximum: {fmtEur(calc.maxLtvLening)}.</div>}
            </div>
            <div className="fc-field">
              <label>Hypotheekrente</label>
              <select value={rente} onChange={(e)=>setRente(parseFloat(e.target.value))}>
                <option value="3.5">3,5%</option>
                <option value="3.75">3,75%</option>
                <option value="4.0">4,0%</option>
                <option value="4.5">4,5%</option>
                <option value="5.0">5,0%</option>
              </select>
            </div>
          </div>}

        </div>

        <div className="fc-card">
          <button className="fc-accordion" onClick={()=>setVerhuurOpen(!verhuurOpen)}>
            <div><div className="fc-card-num">03</div><div className="fc-card-title" style={{marginBottom:4}}>Verhuur &amp; rendement</div></div>
            <span className={"fc-chev "+(verhuurOpen?"open":"")}><svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M3 5l4 4 4-4"/></svg></span>
          </button>
          {verhuurOpen&&<div className="fc-accordion-body">
            <div className="fc-grid-2">
              <div className="fc-field"><label>Type verhuur</label><div className="fc-toggle"><button className={verhuurType==="vakantie"?"active":""} onClick={()=>setVerhuurType("vakantie")}>Vakantie</button><button className={verhuurType==="langdurig"?"active":""} onClick={()=>setVerhuurType("langdurig")}>Langdurig</button></div></div>
              <div className="fc-field">{verhuurType==="vakantie"?<><label>Huurprijs / nacht (€)</label><input type="number" value={nacht} min="20" step="5" onChange={(e)=>setNacht(parseFloat(e.target.value)||0)} /></>:<><label>Huurprijs / maand (€)</label><input type="number" value={maand} min="200" step="50" onChange={(e)=>setMaand(parseFloat(e.target.value)||0)} /></>}</div>
            </div>
            <div className="fc-field" style={{marginTop:18}}>
              <label>Bezettingsgraad: {bezetting}% <span className="fc-hint">Costa del Sol gem. 55–65%</span></label>
              <div className="range-wrap">
                <div className="range-track"><div className="range-fill" style={{width:`${(bezetting-30)/(95-30)*100}%`}}/></div>
                <div className="range-thumb" style={{left:`${(bezetting-30)/(95-30)*100}%`}}/>
                <input type="range" min="30" max="95" step="1" value={bezetting} onChange={(e)=>setBezetting(parseFloat(e.target.value))} className="fc-range range-input" />
              </div>
              <div className="fc-range-labels"><span>30%</span><span>95%</span></div>
            </div>
          </div>}
        </div>
      </div>

      <div className="fc-results">
        {!calc?(
          <div className="fc-empty"><div className="eyebrow"><span className="dot"></span>Jouw berekening</div><p>Koopbudget · maandlast · passende projecten</p><p style={{marginTop:8,opacity:0.6}}>Vul minimaal € 50.000 eigen inbreng in om te starten.</p></div>
        ):(
          <>
            <div className="fc-hero">
              <div className="fc-hero-item"><div className="lab">Totaal budget</div><div className="val">{fmtEur(calc.totaalBudget)}</div></div>
              <div className="fc-hero-item main"><div className="lab">Max. koopprijs</div><div className="val" style={{color:"#ffffff"}}>{fmtEur(calc.koopprijs)}</div></div>
              <div className="fc-hero-item"><div className="lab">Aankoopkosten</div><div className="val">{fmtPct(calc.kostenPct)}</div></div>
            </div>
            <div className="fc-result-card">
              <div className="fc-card-title">Budgetverdeling</div>
              <Row label="Eigen inbreng" val={fmtEur(eigen)} />
              {metHypotheek&&lening>0&&<Row label="Hypotheek" val={fmtEur(lening)} />}
              <Row label="Totaal beschikbaar" val={fmtEur(calc.totaalBudget)} sub />
              <div className="fc-gap"></div>
              <Row label={calc.kostenLabel} val={"− "+fmtEur(calc.totaleKosten)} muted />
              <div className="fc-gap"></div>
              <Row label="Max. koopprijs" val={fmtEur(calc.koopprijs)} pos sub />
              {calc.maandlast>0&&<Row label={`Maandlast hypotheek · ${calc.looptijdJaar} jaar (indicatief)`} val={fmtEur(calc.maandlast)+" / mnd"} />}

            </div>
            {calc.rendement&&(
              <div className="fc-result-card">
                <div className="fc-card-title">Rendement</div>
                <Row label="Bruto huurinkomsten / jaar" val={fmtEur(calc.rendement.brutoHuur)} />
                <Row label={`Verhuurmanagement (${calc.rendement.mgmtPct}%)`} val={"− "+fmtEur(calc.rendement.mgmt)} muted />
                <Row label="Netto huur / jaar" val={fmtEur(Math.abs(calc.rendement.nettoHuur))} sub />
                <div className="fc-gap"></div>
                <Row label="Bruto rendement (op koopprijs)" val={fmtPct(calc.rendement.brutoR)} muted />
                <Row label="Netto rendement (op investering)" val={fmtPct(Math.abs(calc.rendement.nettoR))} pos={calc.rendement.nettoR>=0} neg={calc.rendement.nettoR<0} sub />
                {metHypotheek&&lening>0&&<Row label="Rendement op eigen inbreng" val={fmtPct(Math.abs(calc.rendement.cocR))} pos={calc.rendement.cocR>=0} neg={calc.rendement.cocR<0} sub />}
              </div>
            )}
            <BrochuresSection koopprijs={calc.koopprijs} />
            <a href="https://viavastgoed.pipedrive.com/scheduler/drovBohD/via-vastgoed-adviesgesprek" target="_blank" rel="noreferrer" className="fc-cta">
              <span>Plan een gesprek over deze berekening</span>
              <svg width="16" height="16" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M2 7h10M8 3l4 4-4 4"/></svg>
            </a>
          </>
        )}
      </div>
    </div>
  );
}

function Row({ label, val, sub, muted, accent, pos, neg }) {
  const style = pos ? {color:"#1a8a4a",fontWeight:"700"} : neg ? {color:"#c0392b",fontWeight:"700"} : {};
  return (<div className={"fc-row"+(sub?" sub":"")}><span className="name">{label}</span><span className={"val"+(muted?" muted":"")+(accent&&!pos&&!neg?" accent":"")} style={style}>{val}</span></div>);
}

window.FullCalculator = FullCalculator;