/* global React, ReactDOM */ /* build:1778678057 */
const { useState, useEffect, useRef, useMemo, useCallback } = React;

const PLAN_URL = "https://viavastgoed.pipedrive.com/scheduler/drovBohD/via-vastgoed-adviesgesprek";
const HERO_VIDEO = "hero-spain-new.mp4";

function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal-mask, .reveal-fade, .reveal-image");
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
    }, { threshold: 0.15, rootMargin: "0px 0px -8% 0px" });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  });
}

function SplitMask({ text, as = "span", delay = 0, stagger = 0.06, className = "" }) {
  const Tag = as;
  const words = text.split(" ");
  return (
    <Tag className={className}>
      {words.map((w, i) => (
        <React.Fragment key={i}>
          <span className="reveal-mask" style={{ "--reveal-delay": `${delay + i * stagger}s` }}>
            <span dangerouslySetInnerHTML={{ __html: w }} />
          </span>
          {i < words.length - 1 ? " " : ""}
        </React.Fragment>
      ))}
    </Tag>
  );
}

function Hero() {
  return (
    <section className="hero">
      <video className="hero-video" src={HERO_VIDEO} poster="hero-spain-poster.jpg" autoPlay muted loop playsInline aria-label="Luchtopname van de Spaanse kust, sfeerbeelden VIA Vastgoed" />
      <div className="hero-inner">
        <div>
          <h1 className="hero-headline">
            <SplitMask text="Investeer slim" delay={0.2} /><br />
            <SplitMask text="in <em>Spanje</em>" delay={0.5} />
          </h1>
        </div>
        <div className="hero-meta">
          <div className="hero-meta-left reveal-fade" style={{ "--reveal-delay": "0.9s" }}>
            <p>Of je nu rendement zoekt of een plek onder de zon, VIA Vastgoed begeleidt je van het eerste gesprek tot de sleuteloverdracht. Onafhankelijk, persoonlijk, met één vast aanspreekpunt.</p>
            <div className="hero-stats">
              <div><strong>€60K+</strong><span>Vanaf eigen inbreng</span></div>
              <div><strong>4–8%</strong><span>Bruto rendement</span></div>
              <div><strong>1</strong><span>Vast aanspreekpunt</span></div>
            </div>
          </div>
          <a href="/spanje" className="hero-card-link reveal-fade" style={{ "--reveal-delay": "1.1s" }}>
            <div className="hero-card-bg"></div>
            <div className="hero-card-overlay">
              <div className="hero-card-title">Meer over<br/>Spanje <span style={{color:"var(--accent)"}}>→</span></div>
            </div>
          </a>
        </div>
      </div>
    </section>
  );
}

function Marquee() {
  const items = ["Onafhankelijk advies", "Één aanspreekpunt", "Van oriëntatie tot sleutel", "Costa del Sol", "Valencia", "Andalusië", "Balearen"];
  const all = [...items, ...items];
  return (
    <div className="marquee"><div className="marquee-track">
      {all.map((t, i) => <React.Fragment key={i}><span><em style={{ fontStyle: "italic", color: "var(--accent)" }}>✦</em> {t}</span></React.Fragment>)}
    </div></div>
  );
}

const AANKOOP_TYPES = [
  { id: "bestaand", name: "Bestaande woning", costs: 0.10 },
  { id: "nieuwbouw", name: "Nieuwbouw", costs: 0.142 },
];

function CalculatorBlock({ standalone = false }) {
  const [budget, setBudget] = useState(100000);
  const [aankoopType, setAankoopType] = useState(AANKOOP_TYPES[0]);
  const [animBudget, setAnimBudget] = useState(100000);
  const [animPrice, setAnimPrice] = useState(89000);
  const maxPrice = useMemo(() => Math.round(budget / (1 + aankoopType.costs)), [budget, aankoopType]);
  useEffect(() => {
    let raf;
    const start = performance.now(), fromB = animBudget, fromP = animPrice, dur = 400;
    const step = (now) => {
      const t = Math.min(1, (now - start) / dur), ease = 1 - Math.pow(1 - t, 3);
      setAnimBudget(Math.round(fromB + (budget - fromB) * ease));
      setAnimPrice(Math.round(fromP + (maxPrice - fromP) * ease));
      if (t < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [budget, aankoopType]);
  return (
    <div className="calc-block">
      <div className="calc-left">
        <span className="eyebrow"><span className="dot"></span>Bereken jouw mogelijkheden</span>
        <h3><em style={{ fontStyle: "italic", color: "var(--accent)" }}>Wat is mogelijk</em><br/>met jouw budget?</h3>
        <p>Schuif naar jouw budget, kies het type aankoop en zie direct wat haalbaar is.</p>
        {!standalone && <div><a href="/calculator" className="calc-cta"><span>Start de volledige calculator</span><svg className="arrow" width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M2 7h10M8 3l4 4-4 4"/></svg></a><p style={{marginTop:"12px",fontFamily:"var(--font-mono)",fontSize:"11px",letterSpacing:"0.04em",color:"var(--muted)"}}>Inclusief hypotheekberekening en passende projecten.</p></div>}
      </div>
      <div className="calc-right">
        <div className="calc-row"><label>Eigen budget</label><span className="val">€{animBudget.toLocaleString("nl-NL")}</span></div>
        <div className="range-wrap">
          <div className="range-track"><div className="range-fill" style={{width:`${(budget-50000)/(500000-50000)*100}%`}}/></div>
          <div className="range-thumb" style={{left:`${(budget-50000)/(500000-50000)*100}%`}}/>
          <input className="calc-slider range-input" type="range" min="50000" max="500000" step="5000" value={budget} onChange={(e) => setBudget(Number(e.target.value))} />
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", marginBottom: "20px" }}><span style={{ color: "var(--muted)" }}>€50K</span><span style={{ color: "var(--muted)" }}>€500K</span></div>
        <div className="calc-row" style={{ borderTop: "1px solid var(--line-strong)", paddingTop: "20px" }}><label>Type aankoop</label></div>
        <div className="calc-regions">{AANKOOP_TYPES.map((t) => <button key={t.id} className={t.id === aankoopType.id ? "active" : ""} onClick={() => setAankoopType(t)}>{t.name}</button>)}</div>
        <div className="calc-result">
          <div><div className="big">€{Math.round(animPrice / 1000)}K</div><div className="lab">max. koopprijs</div></div>
          <div><div className="big">{(aankoopType.costs * 100).toFixed(1)}%</div><div className="lab">aankoopkosten</div></div>
        </div>
        <div className="calc-foot">Indicatief op basis van eigen inbreng. Geen financieel advies.</div>
      </div>
    </div>
  );
}

const STEPS = [
  { n: "01", title: "Kennismaking", desc: "Inzicht in jouw wensen, doelen en financiële situatie. Geen verkooppraatje, gewoon eerlijk advies." },
  { n: "02", title: "Richting bepalen", desc: "Welke regio, strategie en aanpak past bij jou? Wij zoeken het passende aanbod in Spanje voor je uit." },
  { n: "03", title: "Introductie & voorbereiding", desc: "Gerichte introductie bij de juiste makelaar, advocaat, ontwikkelaar, notaris en Spaanse bank." },
  { n: "04", title: "Sparringpartner", desc: "Van oriëntatie tot sleuteloverdracht. Één aanspreekpunt, onafhankelijk advies bij elke stap." },
];


function Hypotheek() {
  return (
    <section className="section" style={{ background: "var(--bg-2)" }}>
      <div className="section-grid">
        <div className="section-eye">
          <span className="eyebrow"><span className="dot"></span>Financiering</span>
        </div>
        <div>
          <h2 className="section-title reveal-fade">Hoe werkt een <em>hypotheek</em> in Spanje?</h2>
          <div className="hyp-stats" style={{ borderTop: "1px solid var(--line-strong)", paddingTop: "32px", marginBottom: "clamp(40px, 6vw, 80px)" }}>
            <div style={{ paddingRight: "clamp(16px, 2vw, 32px)" }}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: "clamp(26px, 3.5vw, 44px)", color: "var(--ink)", letterSpacing: "-0.02em", marginBottom: "8px" }}>Max. 70%</div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: "11px", letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--muted)" }}>Financiering</div>
            </div>
            <div style={{ borderLeft: "1px solid var(--line)", paddingLeft: "clamp(16px, 2vw, 32px)", paddingRight: "clamp(16px, 2vw, 32px)" }}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: "clamp(26px, 3.5vw, 44px)", color: "var(--ink)", letterSpacing: "-0.02em", marginBottom: "8px" }}>10% / 14,2%</div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: "11px", letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--muted)" }}>Kosten resale / nieuwbouw</div>
            </div>
            <div style={{ borderLeft: "1px solid var(--line)", paddingLeft: "clamp(16px, 2vw, 32px)" }}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: "clamp(26px, 3.5vw, 44px)", color: "var(--ink)", letterSpacing: "-0.02em", marginBottom: "8px" }}>Max. 25 jr</div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: "11px", letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--muted)" }}>Looptijd</div>
            </div>
          </div>
          <div className="hyp-body">
            <div>
              <p style={{ fontSize: "0.95rem", color: "var(--muted)", lineHeight: 1.8, marginBottom: "32px" }}>Niet-residenten financieren max. 70% van de aankoopprijs. De aankoopkosten worden nooit gefinancierd en komen altijd uit eigen middelen. Bij een bestaande woning reken je op ~10% kosten, bij nieuwbouw op 14,2%. De maximale looptijd is 25 jaar, begrensd op 70 jaar leeftijd.</p>
            </div>
            <div style={{ border: "1px solid var(--line-strong)", padding: "clamp(20px, 3vw, 36px)" }}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: "11px", letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--muted)", marginBottom: "24px" }}>Voorbeeld · €100.000 eigen vermogen</div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: "13px" }}>
                <div style={{ display: "flex", justifyContent: "space-between", padding: "9px 0", color: "var(--muted)" }}><span>Aankoopprijs</span><span style={{ color: "var(--ink)" }}>€250.000</span></div>
                <div style={{ display: "flex", justifyContent: "space-between", padding: "9px 0", color: "var(--muted)" }}><span>Hypotheek (70%)</span><span style={{ color: "var(--ink)" }}>− €175.000</span></div>
                <div style={{ height: "1px", background: "var(--line-strong)", margin: "12px 0" }} />
                <div style={{ display: "flex", justifyContent: "space-between", padding: "9px 0", color: "var(--muted)" }}><span>Eigen inbreng</span><span style={{ color: "var(--ink)" }}>€75.000</span></div>
                <div style={{ display: "flex", justifyContent: "space-between", padding: "9px 0", color: "var(--muted)" }}><span>Aankoopkosten (ca. 10%)</span><span style={{ color: "var(--ink)" }}>+ €25.000</span></div>
                <div style={{ height: "1px", background: "var(--line-strong)", margin: "12px 0" }} />
                <div style={{ display: "flex", justifyContent: "space-between", padding: "9px 0" }}><span style={{ color: "var(--ink)", fontWeight: 500 }}>Benodigd eigen vermogen</span><span style={{ color: "var(--ink)", fontWeight: 500 }}>€100.000</span></div>
              </div>
              <a href="/calculator" style={{ display: "inline-flex", alignItems: "center", gap: "8px", marginTop: "28px", fontFamily: "var(--font-mono)", fontSize: "11px", letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink)", borderBottom: "1px solid var(--line-strong)", paddingBottom: "2px" }}>
                Bereken jouw situatie
                <svg width="12" height="12" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M2 7h10M8 3l4 4-4 4"/></svg>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Werkwijze() {
  return (
    <section className="werkwijze-split" id="werkwijze">
      <div className="werkwijze-foto" role="img" aria-label="Moderne villa met terras en zwembad in Spanje" style={{ backgroundImage: "url(werkwijze-foto.jpg)" }} />
      <div className="werkwijze-panel">
        <div className="werkwijze-panel-inner">
          <span className="eyebrow" style={{ color: "rgba(243,238,229,0.5)" }}><span className="dot" style={{ background: "var(--accent)" }}></span>Onze werkwijze</span>
          <h2 className="werkwijze-title reveal-fade">Zo <em>werkt</em> het</h2>
          <div className="werkwijze-steps">
            {STEPS.map((s, i) => (
              <div className="werkwijze-step reveal-fade" key={s.n} style={{ "--reveal-delay": `${i * 0.1}s` }}>
                <div className="werkwijze-step-num">{s.n}</div>
                <div className="werkwijze-step-body">
                  <div className="werkwijze-step-title">{s.title}</div>
                  <p className="werkwijze-step-desc">{s.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

const TEAM = [
  { name: "Tharik el Kordi", role: "Vastgoedadviseur", tel: "+31 6 15151307", photo: "team-tharik.jpg", linkedin: "https://www.linkedin.com/in/tharik-el-kordi/" },
  { name: "Daan Post", role: "Vastgoedadviseur", tel: "+31 6 27846848", photo: "team-daan.jpg", linkedin: "https://www.linkedin.com/in/daan-post-2aa5b019b/" },
  { name: "Keanu Hoeboer", role: "Operations & Relatiebeheer", tel: "+31 6 11100697", photo: "team-keanu.jpg", linkedin: "https://www.linkedin.com/in/keanu-hoeboer-40b6521a9/" },
];

function Team() {
  return (
    <section className="section" style={{ background: "var(--bg-2)" }}>
      <div className="section-grid">
        <div className="section-eye"><span className="eyebrow"><span className="dot"></span>Het team</span></div>
        <div>
          <h2 className="section-title reveal-fade">Wie staan<br/>voor je <em>klaar</em></h2>
          <p className="lede reveal-fade" style={{ marginBottom: "80px", "--reveal-delay": "0.15s" }}>Drie specialisten met één doel: jou de juiste keuze laten maken bij vastgoed in Spanje.</p>
          <div className="team-grid">
            {TEAM.map((m, i) => (
              <div className="team-card reveal-fade" key={m.name} style={{ "--reveal-delay": `${i * 0.1}s` }}>
                <a href={`tel:${m.tel.replace(/\s/g, "")}`} style={{ display:"block", textDecoration:"none", color:"inherit" }}>
                  <div className="team-portrait" role="img" aria-label={`Portretfoto van ${m.name} — ${m.role} bij VIA Vastgoed`} style={{ backgroundImage: `url(${m.photo})` }}>
                    <div className="team-portrait-arrow"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M3 11L11 3M5 3h6v6"/></svg></div>
                  </div>
                  <div className="team-card-meta"><div className="team-card-name">{m.name}</div></div>
                </a>
                <div className="team-card-foot">
                  <span>{m.role}</span>
                  <div style={{ display:"flex", alignItems:"center", gap:"12px" }}>
                    <a href={`tel:${m.tel.replace(/\s/g, "")}`} style={{ color:"inherit", textDecoration:"none" }}>{m.tel}</a>
                    {m.linkedin && (
                      <a href={m.linkedin} target="_blank" rel="noreferrer" aria-label={`LinkedIn van ${m.name}`} style={{ display:"flex", alignItems:"center", color:"var(--ink)", opacity:0.5, transition:"opacity 0.2s" }} onMouseEnter={e=>e.currentTarget.style.opacity=1} onMouseLeave={e=>e.currentTarget.style.opacity=0.5}>
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
                      </a>
                    )}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}


function NetwerkBalk() {
  const partners = [
    "Makelaars & ontwikkelaars",
    "Advocaten & notarissen",
    "Spaanse banken",
    "Fiscale partners",
  ];
  return (
    <section style={{ borderTop:"1px solid var(--line)", borderBottom:"1px solid var(--line)", padding:"40px clamp(20px,4vw,56px)" }}>
      <div style={{ maxWidth:"1480px", margin:"0 auto", display:"flex", alignItems:"center", justifyContent:"space-between", gap:"32px", flexWrap:"wrap" }}>
        <div>
          <span className="eyebrow"><span className="dot"></span>Ons netwerk</span>
          <p style={{ fontFamily:"var(--font-mono)", fontSize:"12px", color:"var(--muted)", marginTop:"8px", lineHeight:1.5, maxWidth:"34ch" }}>Lokale partners met bewezen staat van dienst in Spanje.</p>
        </div>
        <div style={{ display:"flex", flexWrap:"wrap", gap:"8px", alignItems:"center" }}>
          {partners.map(p => (
            <span key={p} style={{ fontFamily:"var(--font-mono)", fontSize:"12px", letterSpacing:"0.07em", textTransform:"uppercase", padding:"12px 22px", border:"1.5px solid var(--line-strong)", color:"var(--ink)", background:"var(--paper)" }}>{p}</span>
          ))}
          <a href="/over-ons" style={{ fontFamily:"var(--font-mono)", fontSize:"11px", letterSpacing:"0.08em", textTransform:"uppercase", color:"var(--accent)", display:"inline-flex", alignItems:"center", gap:"8px", padding:"8px 0", marginLeft:"8px" }}>
            Meer <svg width="12" height="12" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M2 7h10M8 3l4 4-4 4"/></svg>
          </a>
        </div>
      </div>
    </section>
  );
}

function BigCTA() {
  return (
    <section className="cta-big">
      <div className="cta-big-inner">
        <div className="eyebrow reveal-fade" style={{ color: "var(--accent)", marginBottom: "32px", display: "block" }}><span className="dot"></span>Eerste stap</div>
        <h2 className="reveal-fade">De juiste investering begint bij de <em>juiste richting</em></h2>
        <p className="lede reveal-fade" style={{ color: "rgba(243,238,229,0.75)", marginBottom: "48px", "--reveal-delay": "0.15s" }}>Niet het aanbod, maar jouw situatie bepaalt wat past. Plan een vrijblijvende kennismaking.</p>
        <a href={PLAN_URL} target="_blank" rel="noreferrer" className="cta-big-link">
          <span>Plan een kennismaking</span>
          <svg width="18" height="18" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M2 7h10M8 3l4 4-4 4"/></svg>
        </a>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="footer-inner">
        <div>
          <div className="brand-block" style={{ marginBottom: "20px" }}><img src="logo-via-zwart.png" alt="VIA Vastgoed" style={{ height: "72px", width: "auto", display: "block" }} /></div>
          <p>Onafhankelijke begeleiding bij vastgoedoriëntatie en investeren in Spanje.</p>
          <div style={{ marginTop: "20px", display: "flex", gap: "16px" }}>
            <a href="https://www.linkedin.com/company/via-vastgoed/" target="_blank" rel="noreferrer">LinkedIn</a>
            <a href="https://www.instagram.com/viavastgoed/" target="_blank" rel="noreferrer">Instagram</a>
          </div>
        </div>
        <div><h4>Sitemap</h4><nav style={{ display: "grid", gap: "8px" }}><a href="/">Home</a><a href="/spanje">Spanje</a><a href="/calculator">Rendementscalculator</a><a href="/projecten">Projecten</a><a href="/over-ons">Over ons</a><a href="/blog">Blog</a><a href="/werken-bij">Werken bij</a></nav></div>
        <div><h4>Regio's in Spanje</h4><nav style={{ display: "grid", gap: "8px" }}><a href="/regio/andalusie">Costa del Sol</a><a href="/regio/andalusie">Marbella</a><a href="/regio/valencia">Costa Blanca</a><a href="/regio/valencia">Valencia</a><a href="/regio/murcia">Murcia</a><a href="/regio/catalonie">Catalonië</a></nav></div>
        <div><h4>Contact</h4><p>Eerste Jan van der Heijdenstraat 106-O<br/>1072 VB Amsterdam<br/><br/><a href="mailto:info@viavastgoed.com">info@viavastgoed.com</a><br/><a href="tel:+31853035281">+31 85 303 52 81</a><br/><a href="https://wa.me/31853035281" target="_blank" rel="noreferrer">WhatsApp</a></p></div>
      </div>
      <div className="baseline"><span>© 2026 VIA Vastgoed B.V. · KvK 90455967</span><span style={{ display: "flex", gap: "20px", paddingRight: "clamp(80px,12vw,180px)" }}><a href="/privacy">Privacy & Cookies</a><a href="/voorwaarden">Voorwaarden</a></span></div>
    </footer>
  );
}

const COSTAS = [
  // Catalonië
  { id:"costa-brava",          naam:"Costa Brava",              provs:["ES-CT"], lx:600, ly:35,  px:582, py:52,  align:"start" },
  { id:"barcelona-regio",      naam:"Barcelona regio",          provs:["ES-CT"], lx:600, ly:65,  px:558, py:82,  align:"start" },
  { id:"costa-dorada",         naam:"Costa Dorada",             provs:["ES-CT"], lx:600, ly:95,  px:518, py:118, align:"start" },
  // Valencia
  { id:"valencia-stad",        naam:"Valencia stad",            provs:["ES-VC"], lx:600, ly:128, px:489, py:152, align:"start" },
  { id:"costa-blanca-noord",   naam:"Costa Blanca Noord",       provs:["ES-VC"], lx:600, ly:160, px:488, py:188, align:"start" },
  { id:"costa-blanca-zuid",    naam:"Costa Blanca Zuid",        provs:["ES-VC"], lx:600, ly:192, px:472, py:212, align:"start" },
  // Murcia
  { id:"costa-calida",         naam:"Costa Cálida",             provs:["ES-MC"], lx:600, ly:222, px:448, py:225, align:"start" },
  { id:"binnenland-murcia",    naam:"Binnenland Murcia",        provs:["ES-MC"], lx:600, ly:252, px:458, py:212, align:"start" },
  // Andalusië
  { id:"costa-del-sol",        naam:"Costa del Sol",            provs:["ES-AN"], lx:385, ly:295, px:390, py:243, align:"middle" },
  { id:"binnenland-andalusie", naam:"Binnenland Andalusië",     provs:["ES-AN"], lx:325, ly:280, px:325, py:235, align:"end" },
];

function regionOf(loc){
  if(!loc) return null;
  const s = loc.toLowerCase();
  if (/costa del sol|málaga|malaga|marbella|estepona|fuengirola|mijas|benalmádena|benalmadena|torremolinos|nerja/.test(s)) return "costa-del-sol";
  if (/binnenland andalus|sevilla|granada|córdoba|cordoba/.test(s)) return "binnenland-andalusie";
  if (/costa blanca noord|denia|jávea|javea|moraira|calpe|altea/.test(s)) return "costa-blanca-noord";
  if (/costa blanca zuid|alicante|benidorm|torrevieja|orihuela/.test(s)) return "costa-blanca-zuid";
  if (s.includes("costa blanca")) return "costa-blanca-noord";
  if (/valencia stad|gandía|gandia|castellón|castellon/.test(s)) return "valencia-stad";
  if (s.includes("valencia")) return "valencia-stad";
  if (/costa cálida|costa calida|cartagena|la manga|los alcázares|los alcazares|san pedro del pinatar/.test(s)) return "costa-calida";
  if (/binnenland murcia/.test(s) || s === "murcia") return "binnenland-murcia";
  if (/barcelona|sitges/.test(s)) return "barcelona-regio";
  if (/costa brava|girona|lloret|tossa/.test(s)) return "costa-brava";
  if (/costa dorada|tarragona|salou/.test(s)) return "costa-dorada";
  if (s.includes("murcia")) return "costa-calida";
  return null;
}

function SpainMap({ active, onSelect, projectCounts }){
  const [hover, setHover] = useState([]);
  const [calOn, setCalOn] = useState(() => {
    if (typeof window === "undefined") return false;
    try { localStorage.removeItem("via.calibrate"); localStorage.removeItem("via.costaPositions"); } catch(e){}
    return /[?&]cal\b/.test(window.location.search) || /[?&#]cal\b/.test(window.location.hash);
  });
  const regions = (typeof window !== "undefined" && window.SPAIN_REGIONS) || [];
  const vb = (typeof window !== "undefined" && window.SPAIN_VIEWBOX) || "215 -10 460 305";
  const provToCostas = {};
  COSTAS.forEach(c => c.provs.forEach(p => { (provToCostas[p] = provToCostas[p] || []).push(c.id); }));
  const hoverSet = hover;
  const focused = hoverSet.length > 0 || active;

  // -------- Calibration mode (drag dots + labels) --------
  const isCal = calOn;
  const [positions, setPositions] = useState(() => {
    if (typeof window === "undefined") return {};
    try { return JSON.parse(localStorage.getItem("via.costaPositions") || "{}"); } catch(e){ return {}; }
  });
  const [drag, setDrag] = useState(null);
  const svgRef = useRef(null);
  const resolve = (c) => {
    const o = positions[c.id] || {};
    return { ...c, lx: o.lx ?? c.lx, ly: o.ly ?? c.ly, px: o.px ?? c.px, py: o.py ?? c.py };
  };
  const toSVG = (clientX, clientY) => {
    const svg = svgRef.current; if (!svg) return {x:0,y:0};
    const pt = svg.createSVGPoint(); pt.x = clientX; pt.y = clientY;
    const ctm = svg.getScreenCTM(); if (!ctm) return {x:0,y:0};
    const p = pt.matrixTransform(ctm.inverse());
    return { x: Math.round(p.x*10)/10, y: Math.round(p.y*10)/10 };
  };
  const startDrag = (id, kind) => (e) => {
    if (!isCal) return; e.stopPropagation(); e.preventDefault();
    const c = resolve(COSTAS.find(c=>c.id===id));
    const pt = toSVG(e.clientX, e.clientY);
    const cx = kind === "dot" ? c.px : c.lx, cy = kind === "dot" ? c.py : c.ly;
    setDrag({ id, kind, offX: pt.x - cx, offY: pt.y - cy });
  };
  useEffect(() => {
    if (!drag) return;
    const move = (e) => {
      const pt = toSVG(e.clientX, e.clientY);
      setPositions(prev => {
        const cur = prev[drag.id] || {};
        const xKey = drag.kind === "dot" ? "px" : "lx";
        const yKey = drag.kind === "dot" ? "py" : "ly";
        const next = { ...prev, [drag.id]: { ...cur, [xKey]: pt.x - drag.offX, [yKey]: pt.y - drag.offY }};
        try { localStorage.setItem("via.costaPositions", JSON.stringify(next)); } catch(e){}
        return next;
      });
    };
    const up = () => setDrag(null);
    window.addEventListener("mousemove", move);
    window.addEventListener("mouseup", up);
    return () => { window.removeEventListener("mousemove", move); window.removeEventListener("mouseup", up); };
  }, [drag]);
  const exportPos = () => {
    const out = "const COSTAS = [\n" + COSTAS.map(c => {
      const r = resolve(c);
      return `  { id:"${c.id}", naam:"${c.naam}", provs:${JSON.stringify(c.provs)}, lx:${r.lx}, ly:${r.ly}, px:${r.px}, py:${r.py}, align:"${c.align}" },`;
    }).join("\n") + "\n];";
    navigator.clipboard.writeText(out).then(()=>alert("Gekopieerd! Plak het in de chat."), ()=>{
      const w = window.open(""); w.document.body.innerText = out;
    });
  };
  const resetPos = () => { if(confirm("Reset alle posities?")){ setPositions({}); localStorage.removeItem("via.costaPositions"); } };

  return (
    <div style={{ position:"relative", width:"100%" }}>
      {isCal && (
        <div style={{ position:"absolute", top:8, right:8, zIndex:10, display:"flex", gap:8, background:"#14110d", color:"#f3eee5", padding:"10px 14px", border:"1px solid #f3eee5", fontFamily:"var(--font-mono)", fontSize:11, letterSpacing:"0.06em", textTransform:"uppercase" }}>
          <span style={{opacity:0.6, marginRight:8}}>● Kalibratie</span>
          <button onClick={exportPos} style={{ background:"#f3eee5", color:"#14110d", border:0, padding:"6px 12px", cursor:"pointer", font:"inherit", textTransform:"uppercase", letterSpacing:"0.08em" }}>Kopieer</button>
          <button onClick={resetPos} style={{ background:"transparent", color:"#f3eee5", border:"1px solid #f3eee5", padding:"6px 12px", cursor:"pointer", font:"inherit", textTransform:"uppercase", letterSpacing:"0.08em" }}>Reset</button>
        </div>
      )}
      <svg ref={svgRef} className="spain-map" viewBox={vb} xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Kaart van Spanje met costa-regio's">
      <g className="spain-provinces">
        {regions.map(r => {
          const costas = provToCostas[r.id] || [];
          const primary = costas[0];
          const totalCount = costas.reduce((n,id)=>n+(projectCounts[id]||0), 0);
          const cls = ["spain-province"];
          if (costas.length) cls.push("is-costa");
          if (costas.length > 0) cls.push("has");
          if (costas.some(id => hoverSet.includes(id))) cls.push("hovered");
          if (costas.includes(active)) cls.push("active");
          return (
            <path key={r.id} id={r.id} d={r.d} className={cls.join(" ")}
                  onMouseEnter={() => !isCal && costas.length && setHover(costas)}
                  onMouseLeave={() => !isCal && setHover([])}
                  onClick={() => !isCal && primary && onSelect(primary)}
                  style={{ cursor: isCal ? "default" : (primary ? "pointer" : "default") }}>
              <title>{r.name}</title>
            </path>
          );
        })}
      </g>
      <g className="costa-labels">
        {COSTAS.map(orig => {
          const c = resolve(orig);
          const count = projectCounts[c.id] || 0;
          const has = count > 0;
          const isActive = active === c.id;
          const isHover = hoverSet.includes(c.id);
          const hide = !isCal && focused && !isHover && !isActive;
          return (
            <g key={c.id}
               className={`costa-label-g ${has?"has":"empty"} ${isActive?"active":""} ${isHover?"hovered":""} ${hide?"dim":""}`}
               onMouseEnter={() => !isCal && setHover([c.id])}
               onMouseLeave={() => !isCal && setHover([])}
               onClick={() => !isCal && has && onSelect(c.id)}
               tabIndex={has?0:-1}
               role={has?"button":"presentation"}
               aria-pressed={isActive}
               aria-label={`${c.naam} — ${count} project${count===1?"":"en"}`}>
              <line x1={c.px} y1={c.py} x2={c.lx} y2={c.ly} className="costa-leader" />
              <circle cx={c.px} cy={c.py} r={isCal ? 3 : 1.6} className="costa-dot"
                onMouseDown={startDrag(c.id, "dot")}
                style={isCal ? { cursor:"grab", fill:"#d75c2f", stroke:"#14110d", strokeWidth:0.4 } : undefined}>
                {isCal && <title>Sleep · {c.naam} · bullet</title>}
              </circle>
              <text x={c.lx + (c.align==="start"?4:0)} y={c.ly} textAnchor={c.align} className="costa-label"
                onMouseDown={startDrag(c.id, "label")}
                style={isCal ? { cursor:"grab", fontWeight:600 } : undefined}>{c.naam}</text>
              {isCal && <rect x={c.lx + (c.align==="start"?2:c.align==="end"?-50:-25)} y={c.ly-8} width="50" height="14" fill="transparent" stroke="#d75c2f" strokeWidth="0.3" strokeDasharray="1 1" pointerEvents="none" />}
            </g>
          );
        })}
      </g>
      </svg>
    </div>
  );
}

function LeadGate({ open, mode, project, onClose }) {
  const [form, setForm] = useState({ naam:"", email:"", tel:"" });
  const [sent, setSent] = useState(false);
  useEffect(()=>{ if(open){ setForm({naam:"",email:"",tel:""}); setSent(false); document.body.style.overflow="hidden"; } else { document.body.style.overflow=""; } return ()=>{ document.body.style.overflow=""; }; },[open]);
  if(!open) return null;
  const valid = form.naam.trim().length>=2 && /\S+@\S+\.\S+/.test(form.email) && form.tel.replace(/\D/g,'').length>=6;
  const isBroch = mode === "brochure";
  const isKennismaking = mode === "kennismaking";
  const submit = async (e) => { e.preventDefault(); if(!valid) return; try { await fetch("/api/lead", { method:"POST", headers:{"Content-Type":"application/json"}, body:JSON.stringify({ naam:form.naam, email:form.email, tel:form.tel, type:mode, project:project?.naam||project?.name||"Algemeen" }) }); } catch(err) { console.error("Lead submit error:", err); } setSent(true); if(mode==="brochure" && project?.pdf){ const a=document.createElement("a"); a.href=project.pdf; a.download=(project.naam||project.name||"brochure")+".pdf"; document.body.appendChild(a); a.click(); document.body.removeChild(a); } };
  return (
    <div className="lead-gate" onClick={onClose}>
      <div className="lead-gate-card" onClick={e=>e.stopPropagation()}>
        <button className="lead-gate-close" onClick={onClose} aria-label="Sluiten">
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M3 3l8 8M11 3l-8 8"/></svg>
        </button>
        {!sent ? (<>
          <span className="eyebrow"><span className="dot"></span>{isBroch ? "Brochure aanvragen" : isKennismaking ? "Kennismaking plannen" : "Contact aanvragen"}</span>
          <h3 className="lead-gate-title">{isBroch ? <><em>{project?.naam || project?.name}</em><br/>brochure ontvangen.</> : isKennismaking ? <>Kijken wat bij<br/><em>jou past</em>.</> : <>Laat je <em>gegevens</em> achter.</>}</h3>
          <p className="lead-gate-lede">{isBroch ? "Vul je gegevens in en wij sturen de PDF binnen enkele minuten naar je inbox." : isKennismaking ? "Laat je gegevens achter. We plannen een kort vrijblijvend gesprek en bekijken samen welk profiel bij jouw situatie past." : "Wij nemen zo snel mogelijk persoonlijk contact met je op."}</p>
          <form className="lead-gate-form" onSubmit={submit}>
            <div className="lead-gate-field"><label>Naam <span className="req">*</span></label><input value={form.naam} onChange={e=>setForm({...form,naam:e.target.value})} required aria-required="true" placeholder="Voor- en achternaam" /></div>
            <div className="lead-gate-field"><label>E-mail <span className="req">*</span></label><input type="email" value={form.email} onChange={e=>setForm({...form,email:e.target.value})} required aria-required="true" placeholder="naam@voorbeeld.nl" /></div>
            <div className="lead-gate-field"><label>Telefoon <span className="req">*</span></label><input type="tel" value={form.tel} onChange={e=>setForm({...form,tel:e.target.value})} required aria-required="true" placeholder="+31 6 ..." /></div>
            <p className="lead-gate-required-note"><span className="req">*</span> Verplicht. Zonder volledige gegevens kunnen wij de brochure niet versturen.</p>
            <button type="submit" className="lead-gate-submit" disabled={!valid}>
              <span>{isBroch ? "Stuur brochure" : isKennismaking ? "Verstuur & plan kennismaking" : "Verstuur"}</span>
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M2 7h10M8 3l4 4-4 4"/></svg>
            </button>
            <p className="lead-gate-foot">Wij gaan zorgvuldig om met je gegevens. Geen spam, alleen relevante info.</p>
          </form>
        </>) : (<>
          <span className="eyebrow" style={{color:"var(--accent)"}}><span className="dot"></span>Verzonden</span>
          <h3 className="lead-gate-title"><em>Bedankt</em>, {form.naam.split(" ")[0]}.</h3>
          <p className="lead-gate-lede">{isBroch ? "De brochure is onderweg naar je inbox. Geen mail ontvangen? Check je spam of mail ons direct." : isKennismaking ? "We nemen binnen 24 uur contact op om een moment in te plannen. Wil je al meteen een tijdstip kiezen?" : "We nemen zo snel mogelijk contact met je op."}</p>
          {isKennismaking && <a href={PLAN_URL} target="_blank" rel="noreferrer" className="lead-gate-submit" style={{textDecoration:"none", display:"inline-flex", alignItems:"center", gap:"10px", marginBottom:"12px"}}><span>Plan direct in agenda</span><svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M2 7h10M8 3l4 4-4 4"/></svg></a>}
          <button className="lead-gate-submit" onClick={onClose} style={isKennismaking ? {background:"transparent", color:"var(--muted)", border:"1px solid var(--line)", fontSize:"12px"} : {}}><span>Sluiten</span></button>
        </>)}
      </div>
    </div>
  );
}

function FaqItem({ q, a }) {
  const [open, setOpen] = useState(false);
  return (
    <div style={{ background:"#fff", border:"1px solid #ddd6cc", borderRadius:"8px", padding:"24px 28px", marginBottom:"12px", boxShadow:"0 1px 3px rgba(0,0,0,0.04)" }}>
      <button onClick={() => setOpen(!open)} style={{ width:"100%", display:"flex", justifyContent:"space-between", alignItems:"center", background:"none", border:"none", cursor:"pointer", textAlign:"left", font:"inherit", padding:0, gap:"24px" }}>
        <span style={{ fontFamily:"var(--font-display)", fontSize:"clamp(17px,1.4vw,20px)", fontWeight:400, lineHeight:1.35 }}>{q}</span>
        <svg width="16" height="16" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" style={{ flexShrink:0, transition:"transform 0.25s", transform: open ? "rotate(180deg)" : "rotate(0deg)" }}>
          <path d="M2 5l5 5 5-5"/>
        </svg>
      </button>
      {open && <p style={{ marginTop:"16px", fontSize:"16px", lineHeight:1.75, color:"var(--muted)", maxWidth:"68ch" }}>{a}</p>}
    </div>
  );
}

function FaqSection({ items, schemaId }) {
  useEffect(() => {
    const id = schemaId || "faq-schema";
    let el = document.getElementById(id);
    if (!el) { el = document.createElement("script"); el.id = id; el.type = "application/ld+json"; document.head.appendChild(el); }
    el.textContent = JSON.stringify({ "@context":"https://schema.org", "@type":"FAQPage", "mainEntity": items.map(({q,a}) => ({ "@type":"Question", "name":q, "acceptedAnswer":{"@type":"Answer","text":a} })) });
    return () => { const s = document.getElementById(id); if(s) s.remove(); };
  }, []);
  return (
    <section className="section">
      <div className="section-grid">
        <div className="section-eye reveal-fade">
          <span className="eyebrow"><span className="dot"></span>Veelgestelde vragen</span>
        </div>
        <div>
          <h2 className="section-title reveal-fade">Veelgestelde<br/><em>vragen</em></h2>
          <div style={{ marginTop:"48px" }}>
            {items.map((item, i) => <FaqItem key={i} q={item.q} a={item.a} />)}
          </div>
        </div>
      </div>
    </section>
  );
}