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

function ProjectenPage() {
  const [active, setActive] = useState(null);
  const [gate, setGate] = useState(null);
  const navTo = (costaId) => {
    const c = COSTAS.find(x => x.id === costaId);
    const map = { "ES-AN":"andalusie", "ES-VC":"valencia", "ES-MC":"murcia", "ES-CT":"catalonie" };
    const pid = c && map[c.provs[0]];
    if (pid) { history.pushState(null, "", "/regio/" + pid); window.dispatchEvent(new PopStateEvent("popstate")); }
  };
  const allFeatured = (typeof PROJECTEN !== "undefined" ? PROJECTEN : []);
  const enriched = allFeatured.map(p => ({...p, region: regionOf(p.locatie)}));
  const featured = active ? enriched.filter(p => p.region === active) : enriched;
  const overigeBase = [
    { name:"Appartementen in Guardamar",        loc:"Guardamar · Costa Blanca Zuid",       prijs:"€222.000", opp:"86,4 m²",   levering:"03/2027" },
    { name:"Appartementen in Santa Rosalía",    loc:"Santa Rosalía · Costa Cálida",         prijs:"€289.900", opp:"83,1 m²",   levering:"12/2027" },
    { name:"Appartementen in La Marina",        loc:"La Marina · Costa Blanca Zuid",        prijs:"€246.000", opp:"78,3 m²",   levering:"11/2027" },
    { name:"Penthouse in Torrevieja",           loc:"Torrevieja · Costa Blanca Zuid",       prijs:"€440.000", opp:"227,6 m²",  levering:"07/2027" },
    { name:"Appartementen in Torrevieja",       loc:"Torrevieja · Costa Blanca Zuid",       prijs:"€290.000", opp:"83,6 m²",   levering:"04/2027" },
    { name:"Rijtjeshuizen in Finestrat",        loc:"Finestrat · Costa Blanca Noord",       prijs:"€425.000", opp:"118,6 m²",  levering:"10/2027" },
    { name:"Appartementen in Los Alcázares",    loc:"Los Alcázares · Costa Cálida",         prijs:"€329.000", opp:"95,5 m²",   levering:"06/2026" },
    { name:"Nieuwbouw in Alfaz del Pi",         loc:"Alfaz del Pi · Costa Blanca Noord",    prijs:"€274.000", opp:"74,3 m²",   levering:"06/2028" },
    { name:"Appartementen in Santiago de la Ribera", loc:"Santiago de la Ribera · Costa Cálida", prijs:"€250.000", opp:"79,9 m²",   levering:"03/2027" },
    { name:"Appartementen in Torrevieja",       loc:"Torrevieja · Costa Blanca Zuid",       prijs:"€293.000", opp:"81,3 m²",   levering:"03/2027" },
    { name:"Appartementen in El Verger",        loc:"El Verger · Costa Blanca Noord",       prijs:"€338.500", opp:"80,6 m²",   levering:"06/2027" },
    { name:"Huizen in Mazarrón",                loc:"Mazarrón · Costa Cálida",              prijs:"€320.456", opp:"77,5 m²",   levering:"12/2026" },
    { name:"Appartementen in Los Alcázares",    loc:"Los Alcázares · Costa Cálida",         prijs:"€279.000", opp:"115,5 m²",  levering:"07/2027" },
    { name:"Appartementen in Finestrat",        loc:"Finestrat · Costa Blanca Noord",       prijs:"€279.900", opp:"87,5 m²",   levering:"03/2027" },
    { name:"Lage bungalows in San Pedro",       loc:"San Pedro del Pinatar · Costa Cálida", prijs:"€249.900", opp:"152,2 m²",  levering:"09/2026" },
    { name:"Appartementen in San Miguel",       loc:"San Miguel de Salinas · Costa Blanca Zuid", prijs:"€224.000", opp:"70,2 m²",   levering:"06/2026" },
    { name:"Begane grond in Guardamar",         loc:"Guardamar · Costa Blanca Zuid",        prijs:"€227.000", opp:"85,8 m²",   levering:"03/2026" },
    { name:"Appartementen in San Miguel",       loc:"San Miguel de Salinas · Costa Blanca Zuid", prijs:"€229.900", opp:"108,8 m²",  levering:"04/2026" },
    { name:"Huizen in Ciudad Quesada",          loc:"Ciudad Quesada · Costa Blanca Zuid",   prijs:"€322.000", opp:"78,1 m²",   levering:"07/2026" },
    { name:"Nieuwbouw in Rojales",              loc:"Rojales · Costa Blanca Zuid",          prijs:"€313.000", opp:"88,9 m²",   levering:"03/2026" },
    { name:"Appartementen in Torrevieja",       loc:"Torrevieja · Costa Blanca Zuid",       prijs:"€290.000", opp:"65,6 m²",   levering:"04/2025" },
  ].map((p, i) => ({...p, num: String(i+6).padStart(2,"0"), region: regionOf(p.loc)}));
  const overige = active ? overigeBase.filter(p => p.region === active) : overigeBase;
  const projectCounts = {};
  [...enriched, ...overigeBase].forEach(p => { if(p.region) projectCounts[p.region] = (projectCounts[p.region]||0)+1; });
  const activeNaam = active ? (COSTAS.find(c=>c.id===active)||{}).naam : null;
  return (<>
    <section className="map-hero reveal-fade">
      <div className="map-hero-inner">
        <div className="map-hero-copy">
          <div className="subhero-eye"><span className="eyebrow"><span className="dot"></span>Selectie · Spanje</span></div>
          <h1 className="map-hero-title"><em>Projecten.</em><br/>Stuk voor stuk met zorg gekozen.</h1>
          <div className="map-hero-actions">
            <button onClick={()=>setGate({mode:"contact",project:{naam:"Projecten"}})} className="cta-pill" style={{ padding:"16px 26px", fontSize:"14px", border:0, cursor:"pointer", font:"inherit" }} data-cursor-hover data-cursor-label="Contact">
              <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>
            {active && (
              <button className="map-clear" onClick={()=>setActive(null)}>
                <span>Filter wissen</span>
                <svg width="12" height="12" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M3 3l8 8M11 3l-8 8"/></svg>
              </button>
            )}
          </div>
          {active && (
            <div className="map-hero-filter">
              <span className="eyebrow" style={{color:"var(--accent)"}}><span className="dot"></span>Actief filter</span>
              <span style={{fontFamily:"var(--font-display)", fontSize:"clamp(22px,2.6vw,34px)", letterSpacing:"-0.02em"}}>{activeNaam}</span>
              <span style={{fontFamily:"var(--font-mono)", fontSize:"11px", color:"var(--muted)", letterSpacing:"0.1em", textTransform:"uppercase"}}>
                {(projectCounts[active]||0)} resultaat{(projectCounts[active]||0)===1?"":"en"}
              </span>
            </div>
          )}
        </div>
        <div className="map-hero-stage" style={{ flexDirection:"column", alignItems:"center", gap:0 }}>
          <SpainMap active={active} onSelect={(id)=>{ if(id) navTo(id); else setActive(null); }} projectCounts={projectCounts} />
          <p style={{ fontFamily:"var(--font-mono)", fontSize:"11px", letterSpacing:"0.1em", textTransform:"uppercase", color:"rgba(20,17,13,0.38)", textAlign:"center", marginTop:"20px", width:"100%" }}>Klik een Costa om het aanbod te filteren</p>
        </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>Uitgelichte projecten · Brochure beschikbaar</div>
          <div className="eyebrow" style={{ color:"var(--muted)" }}>{featured.length.toString().padStart(2,"0")} actief</div>
        </div>
        <div className="proj-featured-grid">
          {featured.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" data-cursor-hover 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>
    </section>
    {overige.length > 0 && (
      <section className="section" style={{ paddingTop:"0" }}>
        <div style={{ maxWidth:"1480px", margin:"0 auto" }}>
          <div className="eyebrow" style={{ marginBottom:"24px" }}><span className="dot"></span>Overige projecten</div>
          <div className="proj-list" style={{ marginTop:0 }}>
            {overige.map((p)=>(
              <div className="proj-row" key={p.num} onClick={()=>setGate({mode:"contact",project:p})} role="button" tabIndex={0}>
                <div className="p-name">{p.name}</div>
                <div className="p-loc">{p.loc}</div>
                <div className="p-meta">{p.prijs} · {p.opp}</div>
                <div className="p-arrow" style={{ justifySelf:"end" }}>
                  <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>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    )}
    <section className="section" style={{ paddingTop:"40px", paddingBottom:"40px" }}>
      <div style={{ maxWidth:"1480px", margin:"0 auto", display:"flex", justifyContent:"center" }}>
        <button onClick={()=>setGate({mode:"brochure",project:{naam:"Investeren in Spanje", pdf:"/brochures/brochure-investeren-in-spanje.pdf"}})} className="cta-pill" style={{ padding:"20px 32px", fontSize:"15px", border:0, cursor:"pointer", font:"inherit" }} data-cursor-hover data-cursor-label="Brochure">
          <svg width="16" height="16" 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>
          <span>Download brochures investeren in Spanje</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>
    </section>
    <BigCTA /><Footer />
    <LeadGate open={!!gate} mode={gate?.mode} project={gate?.project} onClose={()=>setGate(null)} />
    </>);
}