// KSANET — HOME

const { useState, useEffect, useRef } = React;

function Hero() {
  return (
    <section className="hero">
      <div className="hero-bg">
        {/* architectural plate */}
        <svg className="hero-plate" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
          <defs>
            <linearGradient id="sky" x1="0" x2="0" y1="0" y2="1">
              <stop offset="0%" stopColor="#f6f3ee"/>
              <stop offset="100%" stopColor="#ece6d8"/>
            </linearGradient>
            <linearGradient id="bldgA" x1="0" x2="0" y1="0" y2="1">
              <stop offset="0%" stopColor="#8C1E22"/>
              <stop offset="100%" stopColor="#5e1417"/>
            </linearGradient>
            <linearGradient id="bldgB" x1="0" x2="0" y1="0" y2="1">
              <stop offset="0%" stopColor="#b58a3a"/>
              <stop offset="100%" stopColor="#7a5d24"/>
            </linearGradient>
          </defs>
          <rect width="1600" height="900" fill="url(#sky)"/>
          {/* far buildings */}
          <rect x="0" y="380" width="1600" height="520" fill="#dfd8c8" opacity="0.55"/>
          {Array.from({ length: 18 }).map((_, i) => (
            <rect key={'far' + i} x={i * 95 + 8} y={380 - (i % 3) * 28 - 60} width="78" height={120 + (i % 3) * 28} fill="#cfc6b3" opacity="0.45"/>
          ))}
          {/* mid buildings */}
          <g>
            <rect x="120" y="320" width="280" height="380" fill="url(#bldgA)"/>
            <rect x="430" y="260" width="220" height="440" fill="#0c0a09" opacity="0.85"/>
            <rect x="680" y="200" width="320" height="500" fill="url(#bldgB)"/>
            <rect x="1030" y="290" width="240" height="410" fill="#0c0a09" opacity="0.8"/>
            <rect x="1300" y="240" width="280" height="460" fill="url(#bldgA)"/>
          </g>
          {/* windows grid (pattern of dots) */}
          {Array.from({ length: 5 }).map((_, b) =>
            Array.from({ length: 12 }).map((_, r) =>
              Array.from({ length: 8 }).map((_, c) => {
                const offsets = [120, 430, 680, 1030, 1300];
                const widths = [280, 220, 320, 240, 280];
                const cellW = widths[b] / 8;
                return (
                  <rect key={`w${b}-${r}-${c}`}
                        x={offsets[b] + c * cellW + 6}
                        y={350 + r * 28}
                        width={cellW - 12}
                        height={4}
                        fill="#f3e8da" opacity={(c + r + b) % 5 === 0 ? 0.85 : 0.25}/>
                );
              })
            )
          )}
          {/* foreground silver line — KSA architecture mark */}
          <line x1="0" y1="700" x2="1600" y2="700" stroke="#b6b3ad" strokeWidth="1"/>
        </svg>
      </div>

      <div className="container hero-inner">
        <span className="eyebrow"><span className="dot"></span>Cooperativas de viviendas · desde 1985</span>
        <h1 className="h-display reveal in">
          La gestora <em>con plataforma.</em><br/>
          La plataforma con <em>cuarenta años.</em>
        </h1>
        <p className="lede hero-lede reveal in">
          Construimos las viviendas que hacen las cooperativas. Sin promotor, sin sobrecoste, con auditoría técnica y económica permanente. Más de <em>25.000 familias</em> ya viven en una casa hecha así.
        </p>
        <div className="hero-actions">
          <a href="promociones.html" className="btn btn-primary">Ver promociones <span className="btn-arrow">→</span></a>
          <a href="cooperativa.html" className="btn btn-ghost">¿Qué es una cooperativa?</a>
        </div>
      </div>
    </section>
  );
}

function StatsBar() {
  return (
    <section className="section paper" style={{ padding: '0' }}>
      <div className="container" style={{ padding: 0 }}>
        <div className="stat-row">
          {STATS.map((s, i) => (
            <div className="stat reveal" key={i}>
              <div className="stat-num">{s.num}</div>
              <div className="stat-label">{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PromosFeature() {
  const featured = PROMOS.slice(0, 6);
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow"><span className="dot"></span>Promociones · 2026</span>
            <h2 className="h-1 reveal" style={{ marginTop: 18 }}>
              Casas de cooperativa,<br/><em>sin sobrecoste de promotor.</em>
            </h2>
          </div>
          <a href="promociones.html" className="btn btn-ghost" style={{ alignSelf: 'flex-end' }}>Ver todas (8) <span className="btn-arrow">→</span></a>
        </div>
        <div className="promos-grid">
          {featured.map((p) => (
            <a key={p.id} className="promo-card reveal" href={`promocion.html?id=${p.id}`}>
              <div className="promo-img" style={{
                background: p.photos && p.photos.length
                  ? `linear-gradient(180deg, rgba(20,8,10,0) 50%, rgba(20,8,10,.55) 100%), url(${p.photos[0]}) center/cover no-repeat, ${p.image}`
                  : p.image
              }}>
                <span className={'promo-tag ' + (p.statusKey === 'comercial' ? 'brand' : '')}>{p.province}</span>
                <span className={'promo-status ' + (p.statusKey === 'proxima' ? 'upcoming' : p.statusKey === 'entregada' ? 'delivered' : '')}>
                  <span className="dot"></span>{p.status}
                </span>
              </div>
              <div className="promo-meta">
                <div className="promo-name">{p.name}</div>
                <div className="promo-loc">{p.location}</div>
                <div className="promo-bottom">
                  <span>{p.units} viviendas · {p.bedrooms[0]}–{p.bedrooms[p.bedrooms.length-1]} dorm</span>
                  <span className="promo-price">desde {cFmt(p.priceFrom)}</span>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function cFmt(n) {
  return new Intl.NumberFormat('es-ES', { maximumFractionDigits: 0 }).format(n) + ' €';
}

function Calidades() {
  return (
    <section className="section dark">
      <div className="container">
        <div className="manifesto-grid">
          <div className="reveal">
            <span className="eyebrow"><span className="dot"></span>Experiencia de calidades</span>
            <h2 className="h-1" style={{ marginTop: 22 }}>
              Tu casa,<br/><em>antes de que exista.</em>
            </h2>
          </div>
          <div className="manifesto-body reveal">
            <p className="lede">
              No te entregamos una memoria de calidades en un PDF. Te metemos dentro de tu vivienda. Caminas por el salón, abres los armarios de la cocina, tocas el suelo, comparas la encimera de cuarzo con la de mármol, ves cómo entra la luz por la ventana de tu dormitorio.
            </p>
            <span className="silver-rule"></span>
            <p className="body">
              Visita virtual fotorrealista de cada tipología, recorrido inmersivo en showroom con acabados a tamaño real, comparador de paquetes en tiempo real y vistas renderizadas de cada decisión. Ver para creer; tocar para decidir.
            </p>

            <div className="cal-features">
              <div className="cal-feature">
                <span className="cal-num">01</span>
                <div className="cal-name">Recorrido virtual 3D</div>
                <div className="cal-desc">Cada vivienda en planos navegables con vistas a 360° desde cada estancia.</div>
              </div>
              <div className="cal-feature">
                <span className="cal-num">02</span>
                <div className="cal-name">Showroom físico</div>
                <div className="cal-desc">Cocinas, baños y suelos a escala 1:1 en nuestras instalaciones de Rivas.</div>
              </div>
              <div className="cal-feature">
                <span className="cal-num">03</span>
                <div className="cal-name">Render en directo</div>
                <div className="cal-desc">Cambias un material, la vista se actualiza al instante. Sin sorpresas en obra.</div>
              </div>
              <div className="cal-feature">
                <span className="cal-num">04</span>
                <div className="cal-name">Memoria firmada</div>
                <div className="cal-desc">Cada acabado queda registrado en tu contrato con referencia y fabricante.</div>
              </div>
            </div>

            <a href="recorrido-victoria.html" className="btn btn-ghost" style={{ marginTop: 28 }}>
              Probar el recorrido inmersivo <span className="btn-arrow">→</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Configurador() {
  const cats = [
    { num: '01', name: 'Suelos',     desc: 'Tarima de roble, porcelánico imitación piedra, microcemento y mármol técnico.', count: '12 acabados' },
    { num: '02', name: 'Cocina',     desc: 'Frentes Hönnun C100 lacados o chapados, electrodomésticos Whirlpool de serie.', count: '8 frentes · 4 niveles' },
    { num: '03', name: 'Encimeras',  desc: 'Cuarzo MY TOP, mármol natural, gres porcelánico de gran formato y Dekton.', count: '10 acabados' },
    { num: '04', name: 'Baños',      desc: 'Revestimientos cerámicos, sanitarios suspendidos, mamparas y grifería termostática.', count: '6 ambientes completos' },
    { num: '05', name: 'Puertas',    desc: 'Puertas interiores en lacado mate, chapado natural o vidrio templado a suelo.', count: '5 modelos · 3 tonos' },
    { num: '06', name: 'Extras',     desc: 'Domótica, vestidores a medida, suelo radiante por estancia, pérgola bioclimática.', count: '+20 opciones' },
  ];
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow"><span className="dot"></span>Configurador de viviendas</span>
            <h2 className="h-1 reveal" style={{ marginTop: 18 }}>
              Tu vivienda,<br/><em>a tu medida.</em>
            </h2>
          </div>
          <p className="lede reveal" style={{ maxWidth: 420, alignSelf: 'flex-end' }}>
            Configura cada estancia desde el sofá. Veintiocho días después de firmar la reserva tienes un fin de semana para decidirlo todo: suelos, cocina, baños, puertas y extras. Sin prisas, sin presión comercial, con presupuesto en vivo.
          </p>
        </div>

        <div className="cfg-feature-grid">
          <div className="cfg-feature-mock reveal">
            <CfgMock/>
          </div>
          <div className="cfg-feature-body reveal">
            <p className="lede" style={{ marginBottom: 28 }}>
              <em>Cuatro paquetes de partida</em> — Esencial, Sereno, Cálido y Atelier — y dentro de cada uno cambias lo que quieras. Cada decisión actualiza el plano, el render y el presupuesto al instante.
            </p>
            <div className="cfg-cats">
              {cats.map((c) => (
                <div className="cfg-cat" key={c.num}>
                  <span className="cfg-cat-num">{c.num}</span>
                  <div className="cfg-cat-meta">
                    <div className="cfg-cat-name">{c.name}</div>
                    <div className="cfg-cat-desc">{c.desc}</div>
                  </div>
                  <div className="cfg-cat-count">{c.count}</div>
                </div>
              ))}
            </div>
            <div className="cfg-actions">
              <a href="personalizacion.html" className="btn btn-primary">Abrir el configurador <span className="btn-arrow">→</span></a>
              <a href="ksanet-personalizacion.html" className="btn btn-ghost">Ver método completo</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CfgMock() {
  return (
    <div className="cfg-window">
      <div className="cfg-chrome">
        <span></span><span></span><span></span>
        <div className="cfg-url">ksanet.es / configurador / victoria · 3ºB</div>
      </div>
      <div className="cfg-body">
        <div className="cfg-stage">
          <svg viewBox="0 0 380 240" preserveAspectRatio="xMidYMid slice" style={{ width: '100%', height: '100%', display: 'block' }}>
            {/* Walls */}
            <rect x="0" y="0" width="380" height="240" fill="#ece6d8"/>
            <polygon points="40,40 340,40 300,180 80,180" fill="#dfd8c8"/>
            {/* Floor */}
            <polygon points="80,180 300,180 380,240 0,240" fill="#c69870"/>
            {Array.from({ length: 12 }).map((_, i) => (
              <line key={'fl'+i} x1={i * 32} y1={180 + (i % 2) * 4} x2={i * 32 + 20} y2={240}
                    stroke="rgba(0,0,0,0.15)" strokeWidth="0.6"/>
            ))}
            {/* Window */}
            <rect x="160" y="60" width="80" height="60" fill="#f6f3ee" stroke="#b6b3ad" strokeWidth="0.8"/>
            <line x1="200" y1="60" x2="200" y2="120" stroke="#b6b3ad" strokeWidth="0.6"/>
            <line x1="160" y1="90" x2="240" y2="90" stroke="#b6b3ad" strokeWidth="0.6"/>
            {/* Island */}
            <rect x="120" y="150" width="140" height="36" fill="#1c1a17"/>
            <rect x="120" y="146" width="140" height="6" fill="#d8d2c3"/>
            {/* Tag */}
            <g>
              <line x1="190" y1="148" x2="220" y2="118" stroke="#8C1E22" strokeWidth="0.6"/>
              <circle cx="190" cy="148" r="2.2" fill="#8C1E22"/>
              <rect x="220" y="108" width="74" height="20" fill="#0c0a09"/>
              <text x="226" y="121" fontFamily="JetBrains Mono, monospace" fontSize="7" fill="#f3e8da" letterSpacing="0.6">COCINA · LACADO</text>
            </g>
            <g>
              <line x1="60" y1="200" x2="40" y2="218" stroke="#8C1E22" strokeWidth="0.6"/>
              <circle cx="60" cy="200" r="2.2" fill="#8C1E22"/>
              <rect x="10" y="210" width="64" height="18" fill="#0c0a09"/>
              <text x="16" y="222" fontFamily="JetBrains Mono, monospace" fontSize="7" fill="#f3e8da" letterSpacing="0.6">SUELO · ROBLE</text>
            </g>
          </svg>
        </div>
        <div className="cfg-controls">
          <div className="cfg-preset-row">
            <div className="cfg-preset on"><span>Esencial</span><b>incluido</b></div>
            <div className="cfg-preset"><span>Sereno</span><b>+ 4.200 €</b></div>
            <div className="cfg-preset"><span>Cálido</span><b>+ 7.800 €</b></div>
            <div className="cfg-preset"><span>Atelier</span><b>+ 14.600 €</b></div>
          </div>
          <div className="cfg-budget">
            <div className="cfg-budget-row">
              <span>Vivienda base</span>
              <b>299.576 €</b>
            </div>
            <div className="cfg-budget-row">
              <span>Acabados elegidos</span>
              <b className="up">+ 6.420 €</b>
            </div>
            <div className="cfg-budget-bar"><i style={{ width: '38%' }}></i></div>
            <div className="cfg-budget-row total">
              <span>Total estimado</span>
              <b>305.996 €</b>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Process() {
  return (
    <section className="section paper">
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 32, marginBottom: 64 }}>
          <div>
            <span className="eyebrow"><span className="dot"></span>El proceso · 6 pasos</span>
            <h2 className="h-1 reveal" style={{ marginTop: 18 }}>
              De socio a llaves<br/>en <em>treinta meses.</em>
            </h2>
          </div>
          <p className="lede reveal" style={{ maxWidth: 380 }}>
            Cada paso queda registrado en la plataforma y firmado por el Consejo Rector. Tú lees el contrato; nosotros lo ejecutamos.
          </p>
        </div>
        <div className="process-grid">
          {COOP_PROCESS.map((p, i) => (
            <div className="process-step reveal" key={i}>
              <div className="process-num">{p.num}</div>
              <div className="process-title">{p.title}</div>
              <div className="process-desc">{p.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Platform() {
  return (
    <section className="section brand">
      <div className="container">
        <div className="platform-grid">
          <div className="reveal">
            <span className="eyebrow"><span className="dot"></span>KSA · Plataforma del cooperativista</span>
            <h2 className="h-1" style={{ marginTop: 22 }}>
              Cada euro,<br/>cada hora,<br/><em>cada decisión.</em>
            </h2>
            <p className="lede" style={{ marginTop: 28 }}>
              Auditoría técnica de obra en directo, contabilidad de la cooperativa al céntimo, votaciones de asamblea online y avance fotográfico semanal. Todo en una sola plataforma.
            </p>
            <a href="plataforma.html" className="btn btn-ghost" style={{ marginTop: 32 }}>
              Acceder a la demo <span className="btn-arrow">→</span>
            </a>
          </div>
          <div className="platform-mock reveal">
            <PlatformMock/>
          </div>
        </div>
      </div>
    </section>
  );
}

function PlatformMock() {
  return (
    <div className="pf-window">
      <div className="pf-chrome">
        <span></span><span></span><span></span>
        <div className="pf-url">ksanet.es / plataforma / altos-del-cerro</div>
      </div>
      <div className="pf-body">
        <div className="pf-side">
          <div style={{ fontFamily: 'var(--mono)', fontSize: 9, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'rgba(243,232,218,0.5)', marginBottom: 14 }}>Mi cooperativa</div>
          <div className="pf-side-item active">Resumen</div>
          <div className="pf-side-item">Avance de obra</div>
          <div className="pf-side-item">Aportaciones</div>
          <div className="pf-side-item">Auditoría</div>
          <div className="pf-side-item">Asambleas</div>
          <div className="pf-side-item">Mensajes</div>
        </div>
        <div className="pf-main">
          <div className="pf-row">
            <div className="pf-card">
              <div className="pf-card-lbl">Avance global</div>
              <div className="pf-card-num">42<span>%</span></div>
              <div className="pf-bar"><div style={{ width: '42%' }}></div></div>
            </div>
            <div className="pf-card">
              <div className="pf-card-lbl">Mi aportación</div>
              <div className="pf-card-num">38.420<span> €</span></div>
              <div className="pf-mini">Próximo: 1 abril · 4.200 €</div>
            </div>
            <div className="pf-card">
              <div className="pf-card-lbl">Asamblea</div>
              <div className="pf-card-num" style={{ fontSize: 22, lineHeight: 1.1 }}>14 abril<br/><span style={{ fontSize: 12 }}>orden del día disponible</span></div>
            </div>
          </div>
          <div className="pf-photo">
            <svg viewBox="0 0 380 130" preserveAspectRatio="xMidYMid slice" style={{ width: '100%', height: '100%' }}>
              <rect width="380" height="130" fill="#1a1715"/>
              {Array.from({ length: 26 }).map((_, c) =>
                Array.from({ length: 8 }).map((_, r) => (
                  <rect key={c+'-'+r} x={c * 14.6} y={r * 16.5} width={11} height={12} fill="#8C1E22" opacity={(c + r) % 4 === 0 ? 0.65 : 0.18}/>
                ))
              )}
              <line x1="0" y1="120" x2="380" y2="120" stroke="#b6b3ad" strokeWidth="0.8"/>
            </svg>
            <div className="pf-photo-cap">
              <span style={{ fontFamily: 'var(--mono)', fontSize: 9, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'rgba(243,232,218,0.7)' }}>Foto auditor · 12.03.26</span>
              <span style={{ fontFamily: 'var(--mono)', fontSize: 9, letterSpacing: '0.18em', color: '#b58a3a' }}>● EN PLAZO</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Testimonials() {
  const items = [
    { quote: 'Pasamos de un alquiler imposible en Madrid a una casa de tres habitaciones por 234.923 €. La cooperativa no es un truco: es una forma de hacer las cosas bien.', name: 'Marta y Luis', role: 'Socios · Urbanización Apolo' },
    { quote: 'Pude ver cada certificación de obra desde la app. Como ingeniero, agradezco que no me pidan confiar a ciegas.', name: 'David Aroca', role: 'Socio · Edificio Victoria' },
    { quote: 'La liquidación final me devolvió 2.430 €. Era el sobrante real de la cooperativa. Eso no pasa con un promotor.', name: 'Carmen Salas', role: 'Socia · Edificio Huertas' },
  ];
  return (
    <section className="section">
      <div className="container">
        <span className="eyebrow"><span className="dot"></span>Lo que dicen los socios</span>
        <div className="testi-grid" style={{ marginTop: 36 }}>
          {items.map((t, i) => (
            <figure className="testi reveal" key={i}>
              <blockquote className="testi-q">"{t.quote}"</blockquote>
              <figcaption>
                <div className="testi-name">{t.name}</div>
                <div className="testi-role">{t.role}</div>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

function Closer() {
  return (
    <section className="section paper" style={{ paddingTop: 'clamp(80px, 10vw, 140px)', paddingBottom: 'clamp(80px, 10vw, 140px)' }}>
      <div className="container">
        <div className="closer">
          <h2 className="h-display" style={{ fontSize: 'clamp(40px, 6vw, 96px)' }}>
            ¿Empezamos<br/><em>tu cooperativa?</em>
          </h2>
          <div className="closer-actions">
            <a href="contacto.html" className="btn btn-primary">Hablar con un asesor <span className="btn-arrow">→</span></a>
            <a href="calculadora.html" className="btn btn-ghost">Calcular cuota</a>
          </div>
          <div className="closer-meta">
            <div>
              <div className="closer-lbl">Llámanos</div>
              <div className="closer-val">+34 916 666 608</div>
            </div>
            <div>
              <div className="closer-lbl">Escríbenos</div>
              <div className="closer-val">hola@ksanet.es</div>
            </div>
            <div>
              <div className="closer-lbl">Visítanos</div>
              <div className="closer-val">Rivas-Vaciamadrid</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Home() {
  useReveal();
  return (
    <>
      <Header active="home"/>
      <Hero/>
      <StatsBar/>
      <PromosFeature/>
      <Calidades/>
      <Configurador/>
      <Process/>
      <Platform/>
      <Testimonials/>
      <Closer/>
      <Footer/>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<Home/>);