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

const PROVINCES = {
  "andalusie": { code:"ES-AN", naam:"Andalusië", titel:"Andalusië.", h1pre:"Huis kopen op de", h1accent:"Costa del Sol.", intro:"Huis kopen op de Costa del Sol: Marbella, Estepona, Málaga en het authentieke binnenland van Andalusië. 320 dagen zon, internationale infrastructuur en het sterkste verhuurseizoen van Spanje. Lagere instapprijzen en cultureel toerisme verder landinwaarts." },
  "valencia":  { code:"ES-VC", naam:"Valencia",  titel:"Valencia.",  h1pre:"Huis kopen op de", h1accent:"Costa Blanca.",  intro:"Vastgoed op de Costa Blanca: de breedste mix van kust, stad en jachthaven. Huis kopen in Valencia of Alicante via Costa Blanca Noord (Javea, Altea) of Zuid (Guardamar, Torrevieja). Scherp geprijsde nieuwbouw, sterke bezetting en uitstekende bereikbaarheid." },
  "murcia":    { code:"ES-MC", naam:"Murcia",    titel:"Murcia.",    h1pre:"Huis kopen op de", h1accent:"Costa Cálida.",    intro:"Huis kopen op de Costa Cálida: Mar Menor, La Manga en Cartagena aan de warmste kust van Spanje. Lagere instap dan de Costa Blanca, hoge bruto rendementen en uitstekende verbindingen via Corvera Airport. Vastgoed in Murcia voor investeerders met oog voor waardepotentieel." },
  "catalonie": { code:"ES-CT", naam:"Catalonië", titel:"Catalonië.", h1pre:"Huis kopen in",     h1accent:"Catalonië.", intro:"Huis kopen in Catalonië: Costa Brava, Barcelona regio en Costa Dorada. Van wilde noordelijke baaien tot brede zandstranden van Tarragona en Salou. Hoogste vraagdruk van Spanje, sterk verhuurpotentieel en vastgoed met waardestijging door internationaal kapitaal." },
};

const PROVINCE_FAQS = {
  "andalusie": [
    { q: "Wat kost een huis kopen op de Costa del Sol?", a: "Nieuwbouw op de Costa del Sol begint bij circa €250.800, voor locaties als Fuengirola en Estepona. Premium projecten in Marbella en omgeving lopen op tot €355.000 en hoger. Bovenop de aankoopprijs komen kosten koper van circa 14,2% bij nieuwbouw (IVA + zegelrecht + notaris)." },
    { q: "Wat is het rendement op vastgoed aan de Costa del Sol?", a: "Bruto rendementen aan de Costa del Sol liggen tussen de 4% en 7% per jaar. De regio heeft het langste verhuurseizoen van Spanje en sterke internationale vraag van Britten, Duitsers en Nederlanders, wat de bezettingsgraad hoog houdt." },
    { q: "Is Marbella of Estepona beter voor vastgoedinvestering?", a: "Marbella heeft de sterkste naam en hoogste vraag, maar ook het hoogste prijspunt. Estepona biedt vergelijkbaar verhuurpotentieel met een gunstiger instapniveau, populair bij investeerders die rendement optimaliseren. VIA Vastgoed adviseert op basis van jouw budget en doel." },
    { q: "Heb ik een NIE-nummer nodig om te kopen aan de Costa del Sol?", a: "Ja, een NIE-nummer (Número de Identificación de Extranjero) is verplicht bij elke vastgoedtransactie in Spanje. VIA Vastgoed regelt de NIE-aanvraag via volmacht als onderdeel van onze volledige begeleiding, je hoeft hier zelf niet voor naar Spanje." },
  ],
  "valencia": [
    { q: "Wat kost een huis kopen op de Costa Blanca?", a: "Vastgoed op de Costa Blanca begint bij circa €222.000 voor nieuwbouwappartementen aan het zuiden (Guardamar, San Miguel de Salinas). De Costa Blanca Noord, Javea, Altea, Moraira, kent hogere prijzen. Kosten koper bedragen circa 14,2% bij nieuwbouw." },
    { q: "Wat is het verschil tussen Costa Blanca Noord en Zuid?", a: "Costa Blanca Noord (Javea, Altea, Denia) is premium met hogere prijzen en een internationaal koperspubliek. Costa Blanca Zuid (Guardamar, Torrevieja, San Miguel de Salinas) biedt lagere instapprijzen en hogere bruto rendementen van 5–8%. Beide zones hebben sterke verhuurvraag het hele jaar door." },
    { q: "Wat is het rendement op vakantieverhuur op de Costa Blanca?", a: "Bruto rendementen op de Costa Blanca liggen tussen de 5% en 8%, hoger dan aan duurdere kusten, door de gunstige verhouding tussen aankoopprijs en huurinkomsten. VIA Vastgoed selecteert projecten met een sterke verhuurbasis en begeleidt bij de inrichting van verhuurmanagement." },
    { q: "Is Javea een goede locatie voor vastgoedinvestering?", a: "Javea is populair bij Nederlanders vanwege de uitstekende bereikbaarheid, hoge levenskwaliteit en stabiele verhuurmarkt. VIA Vastgoed is actief in meerdere sublocaties op de Costa Blanca Noord en Zuid, en adviseert op basis van jouw budget en rendementsdoel." },
  ],
  "murcia": [
    { q: "Wat kost een huis kopen op de Costa Cálida?", a: "De Costa Cálida heeft een lagere instapprijs dan de Costa Blanca en Costa del Sol, ideaal voor investeerders die maximaal rendement zoeken. Populaire locaties zijn Mar Menor, La Manga en Cartagena. Kosten koper bedragen circa 10% bij bestaande bouw en 14,2% bij nieuwbouw." },
    { q: "Wat is het rendement op vastgoed in Murcia?", a: "Murcia combineert een lage instapprijs met een groeiende verhuurmarkt en lange seizoenen. Bruto rendementen liggen hoger dan aan duurdere kusten door de gunstige verhouding tussen aankoopprijs en huurinkomsten. VIA Vastgoed selecteert projecten op basis van verhuurbasis en waardepotentieel." },
    { q: "Hoe bereikbaar is de Costa Cálida vanuit Nederland?", a: "Corvera Airport (Murcia International) heeft directe vluchten vanuit Nederland, de vlucht duurt circa 2,5 uur. De goede bereikbaarheid maakt de regio aantrekkelijk voor vakantieverhuur aan Europese toeristen het hele jaar door." },
    { q: "Is Mar Menor een goede vastgoedinvestering?", a: "Mar Menor is populair vanwege de beschutte lagune, warm zeewater en breed recreatieaanbod. De vastgoedmarkt in Mar Menor en La Manga heeft de afgelopen jaren een sterke waardestijging doorgemaakt. VIA Vastgoed begeleidt je bij de keuze van de juiste locatie en project in de regio." },
  ],
  "catalonie": [
    { q: "Wat kost een huis kopen aan de Costa Brava?", a: "De Costa Brava is het premiumsegment van Catalonië, met hogere instapprijs dan de meeste andere Spaanse kusten maar ook sterk waardestijgingspotentieel. Barcelona regio en Costa Dorada bieden meer toegankelijke alternatieven binnen dezelfde provincie." },
    { q: "Wat is het rendement op vakantieverhuur aan de Costa Brava?", a: "De Costa Brava heeft een intensieve verhuurpiek in de zomer met hoge nachtprijzen, door de populariteit bij Europese toeristen. Het internationaal koperspubliek en de hoge vraagdruk maken Catalonië aantrekkelijk voor waardebehoud op lange termijn." },
    { q: "Is vastgoed kopen in de Barcelona regio een goede investering?", a: "De Barcelona regio heeft de sterkste internationale vraag van Spanje en de meest stabiele markt. Locaties net buiten de stad, zoals Sitges of de Maresme kust, combineren stadsnabijheid met verhuurmogelijkheden. VIA Vastgoed adviseert op de meest kansrijke locaties voor Nederlandse kopers." },
    { q: "Welke luchthavens bedienen Catalonië?", a: "Barcelona El Prat (BCN) heeft dagelijkse directe vluchten vanuit Amsterdam, Rotterdam en Eindhoven. Girona Airport ligt dichter bij de Costa Brava met budgetvluchten. De uitstekende bereikbaarheid maakt Catalonië aantrekkelijk voor zowel eigen gebruik als verhuur." },
  ],
};

function ProvincePage({ provinceId }) {
  const prov = PROVINCES[provinceId];
  const [gate, setGate] = useState(null);
  if (!prov) {
    return (<><section className="subhero"><h1 className="reveal-fade"><em>Regio</em><br/>niet gevonden.</h1><p style={{maxWidth:"60ch",marginTop:"24px",color:"var(--muted)"}}>Deze regio bestaat (nog) niet. <a href="/projecten" style={{color:"var(--accent)",borderBottom:"1px solid currentColor"}}>Terug naar projecten</a>.</p></section><section style={{ background:"var(--bg-2)", padding:"40px 0" }}>
        <div style={{ maxWidth:"1480px", margin:"0 auto", padding:"0 clamp(20px,5vw,80px)" }}>
          <span className="eyebrow" style={{ display:"block", marginBottom:"20px" }}><span className="dot"></span>Andere regio's</span>
          <div style={{ display:"flex", flexWrap:"wrap", gap:"12px" }}>
            {Object.entries(PROVINCES).filter(([id]) => id !== provinceId).map(([id, p]) => (
              <a key={id} href={`/regio/${id}`} style={{ display:"inline-block", textDecoration:"none", background:"var(--bg)", border:"1px solid var(--rule)", borderRadius:"8px", padding:"14px 20px", fontFamily:"var(--font-display)", fontSize:"clamp(15px,1.2vw,18px)", fontWeight:300, color:"var(--ink)", whiteSpace:"nowrap" }}>
                {p.h1pre} {p.h1accent.replace(".","")}</a>
            ))}
          </div>
        </div>
      </section>
      <FaqSection items={PROVINCE_FAQS[provinceId] || []} schemaId={`faq-${provinceId}`} /><BigCTA /><Footer /></>);
  }
  const costas = COSTAS.filter(c => c.provs[0] === prov.code);
  const costaIds = costas.map(c => c.id);
  const allFeatured = (typeof PROJECTEN !== "undefined" ? PROJECTEN : []);
  const projects = allFeatured.map(p => ({...p, region: regionOf(p.locatie)})).filter(p => costaIds.includes(p.region));
  const facts = [
    { lab: "Costa's", val: String(costas.length).padStart(2,"0") },
    { lab: "Projecten", val: projects.length > 0 ? String(projects.length).padStart(2,"0") : "Binnenkort" },
    { lab: "Brochures", val: projects.length > 0 ? "Direct beschikbaar" : "Op aanvraag" },
  ];
  return (<>
    <section className="subhero" style={{ paddingBottom:"40px" }}>
      <div style={{ maxWidth:"1480px", margin:"0 auto" }}>
        <div className="subhero-eye reveal-fade"><span className="eyebrow"><span className="dot"></span><a href="/projecten" style={{color:"inherit"}}>Projecten</a> · {prov.naam}</span></div>
      </div>
      <h1 className="reveal-fade" style={{ marginTop:"16px", fontSize:"clamp(36px, 5vw, 68px)" }}>{prov.h1pre}<br/><em style={{ color:"var(--accent)", fontStyle:"italic" }}>{prov.h1accent}</em></h1>
      <div style={{ maxWidth:"1480px", margin:"0 auto" }}>
        <p className="reveal-fade map-hero-lede" style={{ maxWidth:"60ch", marginTop:"32px" }}>{prov.intro}</p>
        <div style={{ marginTop:"32px", display:"flex", flexWrap:"wrap", gap:"8px" }}>
          {costas.map(c => (
            <span key={c.id} style={{ fontFamily:"var(--font-mono)", fontSize:"11px", letterSpacing:"0.08em", textTransform:"uppercase", padding:"8px 14px", border:"1px solid var(--line-strong)", color:"var(--ink)" }}>{c.naam}</span>
          ))}
        </div>
      </div>
      <div className="subhero-meta" style={{ marginTop:"56px" }}>
        {facts.map(f => (<div key={f.lab}><div style={{fontFamily:"var(--font-mono)",fontSize:"10px",letterSpacing:"0.14em",textTransform:"uppercase",color:"var(--muted)",marginBottom:"8px"}}>{f.lab}</div><div style={{fontFamily:"var(--font-display)",fontSize:"clamp(24px,2.6vw,32px)",fontWeight:400,letterSpacing:"-0.02em",color:"var(--ink)"}}>{f.val}</div></div>))}
      </div>
    </section>
    <section className="section" style={{ paddingTop:"40px" }}>
      <div style={{ maxWidth:"1480px", margin:"0 auto" }}>
        <div style={{ display:"flex", justifyContent:"space-between", alignItems:"baseline", marginBottom:"32px", flexWrap:"wrap", gap:"16px" }}>
          <div className="eyebrow"><span className="dot"></span>{projects.length>0 ? "Projecten · Brochure beschikbaar" : "Aanbod in voorbereiding"}</div>
          <a href="/projecten" className="eyebrow" style={{color:"var(--accent)"}}>← Alle regio's</a>
        </div>
        {projects.length > 0 ? (
          <>
          <div className="proj-featured-grid">
            {projects.map((p,i)=>(
              <article className="proj-feat-card reveal-fade" key={p.id} style={{ "--reveal-delay": (i*0.06)+"s" }}>
                <div className="proj-feat-img" role="img" aria-label={`Foto van project ${p.naam} in ${p.locatie}`} style={{ backgroundImage:`url(${p.img})` }}><span className="proj-feat-tag">{p.tag}</span></div>
                <div className="proj-feat-body">
                  <div className="proj-feat-head">
                    <div><div className="proj-feat-naam">{p.naam}</div><div className="proj-feat-loc">{p.locatie}</div></div>
                    <div className="proj-feat-num">{String(i+1).padStart(2,"0")}</div>
                  </div>
                  <div className="proj-feat-meta">
                    <div><span className="lab">Vanaf</span><span className="val">{p.prijs}</span></div>
                    <div><span className="lab">Rendement</span><span className="val accent">{p.rendement}</span></div>
                  </div>
                  <button onClick={()=>setGate({mode:"brochure",project:p})} className="proj-feat-btn" style={{background:"none",border:0,padding:0,cursor:"pointer",textAlign:"left",font:"inherit",color:"inherit",width:"100%"}}>
                    <span>Download brochure</span>
                    <svg width="14" height="14" 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>
              </article>
            ))}
          </div>
          <div style={{ display:"flex", justifyContent:"center", marginTop:"40px" }}>
            <button onClick={()=>setGate({mode:"contact",project:{naam:prov.naam}})} className="cta-pill" style={{padding:"16px 28px", border:0, cursor:"pointer", font:"inherit"}} data-cursor-hover>
              <span>Laat je gegevens achter</span>
              <svg className="arrow" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" width="14" height="14"><path d="M2 7h10M8 3l4 4-4 4"/></svg>
            </button>
          </div>
          </>
        ) : (
          <div style={{ background:"var(--paper)", border:"1px solid var(--line)", padding:"56px 32px", textAlign:"center" }}>
            <div className="eyebrow" style={{marginBottom:"16px"}}><span className="dot"></span>Binnenkort</div>
            <h3 style={{fontFamily:"var(--font-display)",fontSize:"clamp(28px,3.5vw,44px)",fontWeight:300,letterSpacing:"-0.02em",lineHeight:1,marginBottom:"16px"}}>Aanbod in <em style={{color:"var(--accent)",fontStyle:"italic"}}>voorbereiding</em></h3>
            <p style={{color:"var(--muted)",maxWidth:"50ch",margin:"0 auto 28px",lineHeight:1.6}}>We breiden ons aanbod in {prov.naam} momenteel uit. Laat je gegevens achter en je hoort als eerste van nieuwe projecten.</p>
            <button onClick={()=>setGate({mode:"contact",project:{naam:prov.naam}})} className="cta-pill" style={{padding:"14px 24px", border:0, cursor:"pointer", font:"inherit"}}><span>Laat je gegevens achter</span><svg className="arrow" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" width="14" height="14"><path d="M2 7h10M8 3l4 4-4 4"/></svg></button>
          </div>
        )}
      </div>
    </section>
    <section style={{ background:"var(--bg-2)", padding:"40px 0" }}>
        <div style={{ maxWidth:"1480px", margin:"0 auto", padding:"0 clamp(20px,5vw,80px)" }}>
          <span className="eyebrow" style={{ display:"block", marginBottom:"20px" }}><span className="dot"></span>Andere regio's</span>
          <div style={{ display:"flex", flexWrap:"wrap", gap:"12px" }}>
            {Object.entries(PROVINCES).filter(([id]) => id !== provinceId).map(([id, p]) => (
              <a key={id} href={`/regio/${id}`} style={{ display:"inline-block", textDecoration:"none", background:"var(--bg)", border:"1px solid var(--rule)", borderRadius:"8px", padding:"14px 20px", fontFamily:"var(--font-display)", fontSize:"clamp(15px,1.2vw,18px)", fontWeight:300, color:"var(--ink)", whiteSpace:"nowrap" }}>
                {p.h1pre} {p.h1accent.replace(".","")}</a>
            ))}
          </div>
        </div>
      </section>
      <FaqSection items={PROVINCE_FAQS[provinceId] || []} schemaId={`faq-${provinceId}`} /><BigCTA /><Footer />
    <LeadGate open={!!gate} mode={gate?.mode} project={gate?.project} onClose={()=>setGate(null)} />
  </>);
}

const OVERONS_PARTNERS = [
  { n: "01", t: "Makelaars & ontwikkelaars", d: "Zorgvuldig geselecteerde lokale makelaars en ontwikkelaars met bewezen projecten en een betrouwbare track record." },
  { n: "02", t: "Advocaten & notarissen", d: "Gespecialiseerde Spaanse vastgoedadvocaten en notarissen die jouw belangen bewaken en alle juridische aspecten regelen." },
  { n: "03", t: "Spaanse banken", d: "Directe contacten bij Spaanse banken voor niet-resident financiering. 60–70% LTV voor Nederlandse kopers." },
  { n: "04", t: "Fiscale partners", d: "Nederlandse en Spaanse belastingadviseurs die zorgen voor de juiste structuur en een optimale fiscale positie." },
];
