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


const SPANJE_FAQ = [
  { q: "Hoeveel kost het kopen van vastgoed in Spanje?", a: "Bij nieuwbouw reken je op circa 14,2% kosten bovenop de aankoopprijs, bestaande uit btw (IVA, 10%), zegelrecht (AJD, 1,5%), notariskosten en kadasterkosten. Bij bestaande bouw (resale) is dit circa 10%, voornamelijk overdrachtsbelasting (ITP). VIA Vastgoed legt alle kosten transparant uit vóór je een beslissing neemt." },
  { q: "Kan ik als Nederlander een hypotheek krijgen in Spanje?", a: "Ja. Niet-residenten kunnen doorgaans tot 70% van de aankoopwaarde financieren bij een Spaanse bank. Je hebt dus minimaal 30% eigen inbreng nodig, plus de aankoopkosten. VIA Vastgoed werkt samen met gespecialiseerde hypotheekadviseurs die de Spaanse markt kennen." },
  { q: "Wat is een realistisch rendement op vastgoed in Spanje?", a: "Afhankelijk van de regio en het type gebruik liggen bruto rendementen op vakantieverhuur tussen de 4% en 8% per jaar. Costa del Sol en Costa Blanca scoren het sterkst door hoge bezettingsgraden. Gebruik onze rendementscalculator voor een persoonlijke berekening." },
  { q: "Heb ik een NIE-nummer nodig om vastgoed te kopen in Spanje?", a: "Ja, een NIE-nummer (Número de Identificación de Extranjero) is verplicht bij iedere vastgoedtransactie in Spanje. Het aanvragen kan enige tijd duren. VIA Vastgoed begeleidt je hierbij als onderdeel van onze volledige ontzorging." },
];

function SpanjePage() {
  const [gate, setGate] = useState(null);
  const regions = [
    { id:"andalusie", naam:"Andalusië", costas:"Costa del Sol · Binnenland", txt:"Vastgoed op de Costa del Sol: Marbella, Estepona, Málaga. Sterkste internationale vraag, hoogste prijspunt en het langste verhuurseizoen van Spanje." },
    { id:"valencia", naam:"Valencia", costas:"Costa Blanca Noord & Zuid · Valencia stad", txt:"De breedste mix van de Costa Blanca: kust, stad en jachthaven. Scherp geprijsde nieuwbouw voor investeerders, hoge bezetting en uitstekende bereikbaarheid." },
    { id:"murcia", naam:"Murcia", costas:"Costa Cálida · Binnenland", txt:"Laagste instapprijs van de grote Spaanse kustgebieden. Mar Menor, La Manga en Cartagena aan de Costa Cálida: warme kust, lange seizoenen, snel stijgende vastgoedprijzen." },
    { id:"catalonie", naam:"Catalonië", costas:"Costa Brava · Barcelona regio · Costa Dorada", txt:"Vastgoed aan de Costa Brava, Barcelona regio en Costa Dorada. Hoogste vraagdruk van Spanje, sterk verhuurpotentieel en internationaal kapitaal." },
  ];
  const audiences = [
    {
      n:"01",
      t:"Pure rendementsinvesteerder",
      sub:"Geen eigen gebruik",
      d:"Je zoekt een bovengemiddeld rendement op vastgoed in Spanje, zónder zelf te willen gebruiken. Wij selecteren projecten met sterke verhuurbasis, regelen volledig beheer en jij ontvangt netto-rendement op rekening.",
      points:["Focus: bruto rendement 5 tot 8%", "Volledig verhuurmanagement", "Jaarlijkse netto-afrekening"],
    },
    {
      n:"02",
      t:"Lifestyle + verhuur",
      sub:"De meest gekozen route",
      featured:true,
      d:"Een vakantiewoning kopen in Spanje die zichzelf grotendeels terugverdient. Eigen gebruik tijdens schoolvakanties en weekenden, de rest via vakantieverhuur met een betrouwbare lokale partij.",
      points:["Eigen gebruik 4 tot 10 weken per jaar", "Vakantieverhuur dekt grotendeels de lasten", "Familievermogen op een fijne plek"],
    },
    {
      n:"03",
      t:"Vermogensopbouw lange termijn",
      sub:"15+ jaar horizon",
      d:"Een tastbaar buitenlands vermogensbestanddeel naast pensioen, beleggingen of bedrijfswaarde. Locaties met structurele schaarste, instap onder marktwaarde en doorrolperspectief naar de volgende generatie.",
      points:["Schaarse, A-locatie projecten", "Belastingvriendelijke structuur", "Optie tot doorrol naar kinderen"],
    },
  ];
  const promises = [
    { n:"01", t:"Oriëntatie & selectie", d:"We luisteren naar je situatie en doel, en filteren het hele Spaanse aanbod tot 3 à 5 projecten die echt passen. Geen druk, geen verkoopverhaal." },
    { n:"02", t:"Juridiek & due diligence", d:"Onafhankelijke advocaat, NIE-aanvraag via volmacht en complete due diligence vóór je de eerste euro overmaakt. Wij werken niet voor de verkoper." },
    { n:"03", t:"Fiscaal in NL én ES", d:"Wij stemmen de aankoop af met je accountant en een Spaanse fiscalist, zodat je nooit dubbel betaalt. Box 3, IRNR, ITP en BTW: alles geregeld vóór de notaris." },
    { n:"04", t:"Sleutel & nazorg", d:"Verhuurmanagement, onderhoud, IBI-belasting en jaarlijkse aangiften. Eén aanspreekpunt, ook na de overdracht. We blijven sparringpartner." },
  ];
  return (<>
    <section className="subhero subhero-has-video" style={{ textAlign:"left", alignItems:"flex-end" }}>
      <img className="subhero-video" src="hero-spanje.jpg" alt="Panoramisch uitzicht over de Spaanse kustlijn met luxe villa's en blauwe zee" />
      <div className="subhero-video-overlay" />
      <div className="spanje-hero-bottom">
        <div>
          <h1 className="reveal-fade" style={{ marginLeft:0, fontSize:"clamp(72px, 10vw, 130px)", "--reveal-delay":"0.1s" }}>Investeren in <em style={{ color:"var(--accent)", fontStyle:"italic" }}>Spanje.</em></h1>
        </div>
        <div className="reveal-fade" style={{ "--reveal-delay":"0.25s", flexShrink:0, alignSelf:"flex-end" }}>
          <button onClick={()=>setGate({mode:"contact",project:{naam:"Investeren in Spanje"}})} className="spain-cta-dual-primary" style={{ background:"var(--bg)", color:"var(--ink)", borderColor:"var(--bg)" }}>
            <span>Laat gegevens achter</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>
          </button>
        </div>
      </div>
    </section>

    <section className="section" style={{ background:"var(--bg-2)", paddingTop:"clamp(60px, 8vw, 120px)" }}>
      <div className="section-grid">
        <div className="section-eye"><span className="eyebrow"><span className="dot"></span>Voor wie</span></div>
        <div>
          <h2 className="section-title reveal-fade">Welke <em>investeerder</em><br/>ben jij?</h2>
          <p className="lede reveal-fade" style={{ marginBottom:"60px","--reveal-delay":"0.15s" }}>Investeren in vastgoed in Spanje doe je niet op één manier. Drie profielen, drie aanpakken. Herken jezelf en we weten meteen waar we beginnen.</p>
          <div className="spain-aud-grid">
            {audiences.map(a=>(
              <div key={a.n} className={`spain-aud-card reveal-fade ${a.featured?"is-feat":""}`}>
                {a.featured && <div className="spain-aud-flag">Meest gekozen</div>}
                <div className="spain-aud-num">{a.n}</div>
                <div className="spain-aud-title">{a.t}</div>
                <div className="spain-aud-sub">{a.sub}</div>
                <p className="spain-aud-desc">{a.d}</p>
                <ul className="spain-aud-points">
                  {a.points.map((p,i)=>(<li key={i}><span className="bullet"></span>{p}</li>))}
                </ul>
                <button onClick={()=>setGate({mode:"kennismaking", project:{naam:a.t}})} className="spain-aud-cta" style={{background:"none", border:"none", padding:0, cursor:"pointer", font:"inherit", textAlign:"left"}}>
                  <span>Past dit bij mij?</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>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>

    <section className="section">
      <div className="section-grid">
        <div className="section-eye"><span className="eyebrow"><span className="dot"></span>Vier provincies</span></div>
        <div>
          <h2 className="section-title reveal-fade">Waar <em>investeer</em> je?</h2>
          <p className="lede reveal-fade" style={{ marginBottom:"60px","--reveal-delay":"0.15s" }}>Vier zones voor vastgoed in Spanje, elk met een eigen rendementsprofiel. Kies waar markt, prijspunt en levensstijl samenkomen, en zoom in via de regio-pagina's.</p>
          <div className="spain-regio-grid">
            {regions.map((r,i)=>(
              <a key={r.id} href={`/regio/${r.id}`} className="spain-regio-card reveal-fade" style={{ "--reveal-delay":(i*0.08)+"s" }}>
                <div className="spain-regio-num">{String(i+1).padStart(2,"0")}</div>
                <div className="spain-regio-naam">{r.naam}</div>
                <div className="spain-regio-costas">{r.costas}</div>
                <p className="spain-regio-txt">{r.txt}</p>
                <div className="spain-regio-foot">
                  <span>Vastgoed in {r.naam} →</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>
                </div>
              </a>
            ))}
          </div>
          <div style={{ marginTop:"40px", textAlign:"right" }}>
            <a href="/projecten" className="eyebrow" style={{ color:"var(--accent)" }}>Alle projecten in Spanje →</a>
          </div>
        </div>
      </div>
    </section>

    <section className="section" style={{ background:"var(--bg-2)" }}>
      <div className="section-grid">
        <div className="section-eye"><span className="eyebrow"><span className="dot"></span>Wij regelen het</span></div>
        <div>
          <h2 className="section-title reveal-fade">Eén <em>aanspreekpunt</em>,<br/>van A tot Z.</h2>
          <p className="lede reveal-fade" style={{ marginBottom:"60px","--reveal-delay":"0.15s" }}>Een huis of appartement kopen in Spanje heeft een juridische, fiscale en praktische kant. Wij maken dat rustig. Voor onze klanten, niet voor de verkoper.</p>
          <div className="spain-promise-grid">
            {promises.map(p=>(
              <div className="spain-promise-card reveal-fade" key={p.n}>
                <div className="spain-promise-num">{p.n}</div>
                <div className="spain-promise-title">{p.t}</div>
                <p className="spain-promise-desc">{p.d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>


    <FaqSection items={SPANJE_FAQ} schemaId="faq-spanje" />
    <section className="spain-cta-dual">
      <div className="spain-cta-dual-inner">
        <div className="eyebrow reveal-fade" style={{ color:"var(--accent)", marginBottom:"32px", display:"block" }}><span className="dot"></span>Volgende stap</div>
        <h2 className="reveal-fade spain-cta-dual-title">Klaar om <em>verder</em><br/>te kijken?</h2>
        <p className="lede reveal-fade spain-cta-dual-lede" style={{ "--reveal-delay":"0.15s" }}>Plan een vrijblijvende kennismaking, of download eerst onze gids "Investeren in Spanje" met alles op papier: markt, kosten, fiscaliteit en praktijk.</p>
        <div className="spain-cta-dual-buttons reveal-fade" style={{ "--reveal-delay":"0.3s" }}>
          <a href={PLAN_URL} target="_blank" rel="noreferrer" className="spain-cta-dual-primary">
            <span>Plan een kennismaking</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>
          <button onClick={()=>setGate({mode:"brochure",project:{naam:"Investeren in Spanje"}})} className="spain-cta-dual-secondary">
            <span>Download Spanje-gids</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>
      </div>
    </section>

    <Footer />
    <LeadGate open={!!gate} mode={gate?.mode} project={gate?.project} onClose={()=>setGate(null)} />
  </>);
}