// KSANET — Cooperativa (qué es, cómo funciona)

const { useState } = React;

function CompareTable() {
  const rows = [
    { k: 'Quién es el promotor', coop: 'Tú y los demás socios', priv: 'Una empresa con ánimo de lucro' },
    { k: 'Margen de promotor', coop: '0 €', priv: 'Entre 18 % y 25 % sobre venta' },
    { k: 'Decisiones de proyecto', coop: 'Asamblea de socios', priv: 'Departamento comercial' },
    { k: 'Coste final', coop: 'Coste real auditado', priv: 'Precio de venta cerrado' },
    { k: 'Sobrecoste', coop: 'Si lo hay, lo asume el socio', priv: 'Lo asume el promotor (riesgo limitado)' },
    { k: 'Ahorro residual', coop: 'Se devuelve a los socios', priv: 'Beneficio del promotor' },
    { k: 'Personalización', coop: 'Alta · acabados a la carta', priv: 'Limitada · en fase de venta' },
    { k: 'Plazos', coop: '24–36 meses', priv: '18–24 meses' },
    { k: 'Garantía', coop: 'Aval bancario sobre cuenta separada', priv: 'Aval bancario · ley 38/99' },
  ];
  return (
    <div className="compare">
      <div className="compare-row compare-head">
        <div></div>
        <div className="compare-coop"><span className="eyebrow"><span className="dot"></span>Cooperativa KSANET</span></div>
        <div className="compare-priv"><span className="eyebrow"><span className="dot"></span>Promotor privado</span></div>
      </div>
      {rows.map((r, i) => (
        <div className="compare-row" key={i}>
          <div className="compare-k">{r.k}</div>
          <div className="compare-coop">{r.coop}</div>
          <div className="compare-priv">{r.priv}</div>
        </div>
      ))}
    </div>
  );
}

function FAQ() {
  const [open, setOpen] = useState(0);
  const items = [
    { q: '¿Qué pasa si no se completan los socios?', a: 'Si la cooperativa no alcanza el mínimo de socios, las aportaciones se devuelven íntegramente desde la cuenta separada avalada. KSANET no constituye una cooperativa sin viabilidad técnica y comercial.' },
    { q: '¿Puedo recuperar mi aportación si me arrepiento?', a: 'Sí, hasta la firma de la escritura. La salida tiene un coste administrativo (300 €) pero la aportación realizada se devuelve en su totalidad, descontando el periodo de cuota gestora.' },
    { q: '¿Qué incluye la cuota gestora de 9 €/mes?', a: 'Honorarios de gestión integral: jurídico, fiscal, técnico, comercial y plataforma KSA. No hay comisiones ocultas ni honorarios de éxito sobre venta.' },
    { q: '¿Quién garantiza el dinero?', a: 'Las aportaciones se ingresan en cuenta separada de una entidad financiera distinta a KSANET, con aval bancario individual por cada socio según la Ley 38/1999.' },
    { q: '¿Puedo elegir vivienda concreta?', a: 'En el momento de firmar como socio. La asignación se realiza por orden de adhesión sobre el plano de la promoción. Permitimos cambios entre socios mientras no se haya iniciado obra.' },
    { q: '¿Hay financiación bancaria?', a: 'Sí. KSANET negocia un préstamo promotor único para toda la cooperativa, que se subroga vivienda por vivienda en el momento de entrega. Cada socio decide si subrogar o cancelar.' },
  ];
  return (
    <div className="faq">
      {items.map((it, i) => (
        <div key={i} className={'faq-item' + (open === i ? ' open' : '')}>
          <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
            <span>{it.q}</span>
            <span className="faq-toggle">{open === i ? '−' : '+'}</span>
          </button>
          {open === i && <div className="faq-a">{it.a}</div>}
        </div>
      ))}
    </div>
  );
}

function CoopPage() {
  useReveal();
  return (
    <>
      <Header active="cooperativa"/>

      {/* HERO */}
      <section className="page-head">
        <div className="container">
          <span className="eyebrow"><span className="dot"></span>Cómo funciona la cooperativa</span>
          <h1 className="h-display" style={{ fontSize: 'clamp(48px, 7vw, 110px)', marginTop: 18 }}>
            Tu casa,<br/><em>al precio de hacerla.</em>
          </h1>
          <p className="lede" style={{ marginTop: 36, fontSize: 22 }}>
            Una cooperativa de viviendas es una asociación de personas que se unen para construir su propia casa. Sin promotor en medio. Sin margen oculto. Pagas el coste real, no el precio de venta. Llevamos cuarenta años haciéndolo.
          </p>
        </div>
      </section>

      {/* DEFINICIÓN — gran cita */}
      <section className="section paper">
        <div className="container">
          <div className="def-grid">
            <div className="reveal">
              <span className="eyebrow"><span className="dot"></span>Definición</span>
              <h2 className="h-1" style={{ marginTop: 22 }}>
                Una cooperativa <em>no es una rebaja.</em><br/>Es una <em>forma legal distinta</em> de hacer una promoción.
              </h2>
            </div>
            <div className="reveal">
              <p className="body" style={{ fontSize: 17 }}>
                Cuando compras a un promotor privado, pagas <strong>precio de venta</strong>. Cuando entras en una cooperativa, pagas <strong>coste real</strong>: suelo, proyecto, obra, licencias, financiación y honorarios de gestión.
              </p>
              <span className="silver-rule"></span>
              <p className="body" style={{ fontSize: 17 }}>
                La diferencia ronda el <strong>15–25 %</strong>. En una vivienda de 300.000 € son 60.000 € que se quedan en tu bolsillo, no en el del promotor.
              </p>
              <p className="body" style={{ fontSize: 17 }}>
                A cambio, asumes una decisión colectiva: el Consejo Rector de socios elige al estudio de arquitectura, a la constructora, a la gestora. Nosotros somos esa gestora. Cuarenta años, 25.000 viviendas. Nada de improvisación.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* COMPARATIVA */}
      <section className="section">
        <div className="container">
          <span className="eyebrow"><span className="dot"></span>Cooperativa vs. promotor privado</span>
          <h2 className="h-1" style={{ marginTop: 18, marginBottom: 56 }}>
            Las diferencias <em>en una mirada.</em>
          </h2>
          <CompareTable/>
        </div>
      </section>

      {/* PROCESO 6 PASOS — repurposed */}
      <section className="section paper">
        <div className="container">
          <span className="eyebrow"><span className="dot"></span>El proceso paso a paso</span>
          <h2 className="h-1" style={{ marginTop: 18, marginBottom: 56 }}>
            Treinta meses de un socio, <em>desglosados.</em>
          </h2>
          <div className="coop-process">
            {COOP_PROCESS.map((p, i) => (
              <div className="cp-row reveal" key={i}>
                <div className="cp-num">{p.num}</div>
                <div className="cp-body">
                  <h3 className="cp-title">{p.title}</h3>
                  <p className="cp-desc">{p.desc}</p>
                </div>
                <div className="cp-when">
                  {['Mes 0', 'Mes 1', 'Mes 2–4', 'Mes 4–8', 'Mes 8–28', 'Mes 28–30'][i]}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* GARANTÍAS */}
      <section className="section dark">
        <div className="container">
          <div className="manifesto-grid">
            <div className="reveal">
              <span className="eyebrow"><span className="dot"></span>Garantías legales</span>
              <h2 className="h-1" style={{ marginTop: 22 }}>
                Cada euro,<br/><em>blindado.</em>
              </h2>
            </div>
            <div className="reveal">
              <div className="guarantees">
                <div className="guar">
                  <div className="guar-h">Cuenta separada</div>
                  <div className="guar-b">Las aportaciones se ingresan en una entidad financiera distinta a KSANET, no podemos disponer de ellas. Ley 38/1999.</div>
                </div>
                <div className="guar">
                  <div className="guar-h">Aval bancario individual</div>
                  <div className="guar-b">Cada socio recibe un aval bancario por su aportación, garantía de devolución íntegra si la promoción no se materializa.</div>
                </div>
                <div className="guar">
                  <div className="guar-h">Auditoría externa</div>
                  <div className="guar-b">Cuentas anuales auditadas por un tercero independiente designado por la asamblea de socios.</div>
                </div>
                <div className="guar">
                  <div className="guar-h">Plataforma KSA</div>
                  <div className="guar-b">Acceso 24/7 al estado de obra, contabilidad y actas. Trazabilidad documental completa por cada socio.</div>
                </div>
                <div className="guar">
                  <div className="guar-h">Consejo Rector elegido</div>
                  <div className="guar-b">Cinco socios elegidos por la asamblea supervisan a la gestora. Nosotros respondemos ante ellos.</div>
                </div>
                <div className="guar">
                  <div className="guar-h">Seguro decenal</div>
                  <div className="guar-b">Cobertura por daños estructurales durante diez años desde la entrega. Obligatorio por ley, contratado y verificado.</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="section">
        <div className="container" style={{ maxWidth: 920 }}>
          <span className="eyebrow"><span className="dot"></span>Preguntas frecuentes</span>
          <h2 className="h-1" style={{ marginTop: 18, marginBottom: 48 }}>
            Lo que <em>todos preguntan.</em>
          </h2>
          <FAQ/>
        </div>
      </section>

      <Footer/>
    </>
  );
}

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