/* ============================================================
   PÁGINA INICIO
   ============================================================ */

const { useEffect: useEffectHome, useState: useStateHome, useRef: useRefHome } = React;

// ============================================================
// HERO CINEMATOGRÁFICO
// ============================================================

function Hero() {
  const [scrollY, setScrollY] = useStateHome(0);

  useEffectHome(() => {
    const onScroll = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <section className="hero">
      {/* Fondo cinematográfico — capas */}
      <div className="hero-bg">
        <div
          className="hero-bg-image"
          style={{ transform: `translateY(${scrollY * 0.3}px) scale(${1 + scrollY * 0.0003})` }}
        />
        <div className="hero-bg-vignette" />
        <div className="hero-bg-grain" />
      </div>

      <GoldParticles count={30} />

      <div className="hero-content" style={{ transform: `translateY(${scrollY * -0.15}px)`, opacity: 1 - scrollY * 0.0015 }}>
        <div className="hero-eyebrow reveal in">
          <span className="line-h" />
          <span className="text">EST · MMXXVI · MADRID</span>
          <span className="line-h" />
        </div>

        <h1 className="hero-title">
          <span className="row reveal in">Cerramos</span>
          <span className="row italic-row reveal in delay-1"><em>tratos</em>.</span>
          <span className="row reveal in delay-2">Generamos</span>
          <span className="row gold-row reveal in delay-3"><span className="gold-fill">resultados</span>.</span>
        </h1>

        <p className="hero-lede reveal in delay-4">
          Agencia de marketing digital y cerradores de ventas de élite.
          Convertimos atención en capital con sistemas auditados y un equipo
          que negocia donde otros se rinden.
        </p>

        <div className="hero-cta reveal in delay-4">
          <a href="#contacto" className="btn btn-primary">
            Agendar llamada estratégica
            <span className="arrow">→</span>
          </a>
          <a href="#que-es" className="btn btn-ghost">
            Conocer la metodología
          </a>
        </div>

        <div className="hero-stats reveal in delay-4">
          <div className="stat">
            <div className="stat-num gold-fill">+<Counter to={47} suffix="M€" /></div>
            <div className="stat-label">cerrados para clientes</div>
          </div>
          <div className="stat-sep" />
          <div className="stat">
            <div className="stat-num gold-fill"><Counter to={312} /></div>
            <div className="stat-label">marcas escaladas</div>
          </div>
          <div className="stat-sep" />
          <div className="stat">
            <div className="stat-num gold-fill"><Counter to={38} suffix="%" /></div>
            <div className="stat-label">tasa media de cierre</div>
          </div>
        </div>
      </div>

      <div className="hero-scroll">
        <span>SCROLL</span>
        <div className="line-v" />
      </div>
    </section>
  );
}

// ============================================================
// SECCIÓN: ¿QUÉ ES CLOSING CAPITAL?
// ============================================================

function WhatIs() {
  return (
    <section id="que-es" className="section section-whatis">
      <div className="section-inner">
        <div className="whatis-grid">
          <div className="whatis-left">
            <span className="section-num reveal">— 01 / Manifesto</span>
            <h2 className="h-section reveal delay-1">
              ¿Qué es <span className="italic-accent">Closing</span><br />
              <span className="gold-fill">Capital</span>?
            </h2>
            <div className="whatis-rule reveal delay-2" />
          </div>

          <div className="whatis-right">
            <p className="lede reveal">
              Closing Capital no es una agencia más. Es la unión entre el rigor
              financiero, el arte del cierre y la última generación de marketing
              con IA.
            </p>
            <p className="body reveal delay-1">
              Nacimos para resolver un problema que vemos cada semana: empresas
              con producto excelente y tráfico decente, pero con una conversión
              que no se corresponde con el potencial real del negocio. Ahí
              entramos nosotros — diseñamos sistemas de venta de alto valor,
              entrenamos cerradores de élite y desplegamos campañas medibles
              hasta el último euro invertido.
            </p>
            <p className="body reveal delay-2">
              No vendemos servicios. Construimos <em className="italic-accent">activos
              comerciales</em> que generan capital de forma predecible.
            </p>

            <div className="whatis-pillars">
              {[
                { n: '01', t: 'Estrategia', d: 'Diagnóstico profundo y plan ejecutable.' },
                { n: '02', t: 'Sistemas', d: 'Funnels, IA y automatización auditados.' },
                { n: '03', t: 'Cierre', d: 'Cerradores formados en tu vertical.' },
                { n: '04', t: 'Capital', d: 'Resultados medidos en € reales, no vanity.' },
              ].map((p, i) => (
                <div key={p.n} className={`pillar reveal delay-${i + 1}`}>
                  <div className="pillar-num">{p.n}</div>
                  <div>
                    <div className="pillar-title">{p.t}</div>
                    <div className="pillar-desc">{p.d}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// SECCIÓN: ¿QUIÉN ESTÁ DETRÁS?
// ============================================================

function Founder() {
  return (
    <section className="section section-founder">
      <div className="section-inner">
        <div className="founder-grid">
          <div className="founder-portrait reveal">
            <div className="portrait-frame corner-frame">
              <span className="c-tl" /><span className="c-br" />
              <div className="portrait-img">
                <img src="assets/miguel-angel-callejon.jpg" alt="Miguel Ángel Callejón — Founder & Lead Closer" />
                <div className="portrait-tone" />
              </div>
            </div>
            <div className="portrait-caption">
              <div className="cap-name">MIGUEL ÁNGEL CALLEJÓN</div>
              <div className="cap-role">Founder &amp; Lead Closer</div>
            </div>
          </div>

          <div className="founder-text">
            <span className="section-num reveal">— 02 / Liderazgo</span>
            <h2 className="h-section reveal delay-1">
              ¿Quién está detrás<br />del proyecto?
            </h2>
            <div className="founder-rule reveal delay-2" />

            <blockquote className="founder-quote reveal delay-2">
              <span className="quote-mark">“</span>
              No fundé Closing Capital para ser una agencia más.
              Lo fundé porque vi a demasiados negocios brillantes quemar
              presupuesto en marketing sin un sistema de cierre detrás.
              Aquí cerramos lo que otros dejan abierto.
              <span className="quote-mark close">”</span>
              <footer className="quote-author">— Miguel Ángel Callejón</footer>
            </blockquote>

            <p className="body reveal delay-3">
              Más de una década entrenando equipos comerciales en sectores
              de alto ticket — formación, real estate, software B2B y
              servicios profesionales. Operaciones cerradas en cinco
              países y un único objetivo: <em className="italic-accent">capital
              real, no promesas</em>.
            </p>

            <div className="founder-meta reveal delay-4">
              <div className="meta">
                <div className="meta-num gold-fill">10+</div>
                <div className="meta-label">años cerrando ventas de alto ticket</div>
              </div>
              <div className="meta">
                <div className="meta-num gold-fill">5</div>
                <div className="meta-label">países donde operamos</div>
              </div>
              <div className="meta">
                <div className="meta-num gold-fill">1</div>
                <div className="meta-label">obsesión: rentabilidad medible</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// SECCIÓN: ¿CÓMO GARANTIZAMOS EL ÉXITO?
// ============================================================

function Method() {
  const steps = [
    {
      n: '01',
      title: 'Auditoría estratégica',
      desc: 'Diseccionamos tu funnel actual. Identificamos las fugas de capital y los puntos donde la conversión se rompe. Entregamos un mapa exacto, no opiniones.',
      tag: 'Diagnóstico',
    },
    {
      n: '02',
      title: 'Diseño del sistema',
      desc: 'Construimos el ecosistema: páginas de alta conversión, automatización con IA, calendario, scripts de cierre y dashboard de métricas. Todo conectado, todo medido.',
      tag: 'Construcción',
    },
    {
      n: '03',
      title: 'Despliegue de cerradores',
      desc: 'Asignamos cerradores entrenados específicamente en tu vertical. Llamadas grabadas, supervisadas y optimizadas semana a semana.',
      tag: 'Ejecución',
    },
    {
      n: '04',
      title: 'Optimización continua',
      desc: 'Reuniones semanales, A/B continuos y revisión de métricas con tu equipo. Escalamos lo que funciona, eliminamos lo que no aporta capital.',
      tag: 'Escala',
    },
  ];

  return (
    <section className="section section-method">
      <div className="section-inner">
        <div className="section-header">
          <span className="section-num reveal">— 03 / Metodología</span>
          <h2 className="h-section reveal delay-1">
            ¿Cómo <span className="italic-accent">garantizamos</span><br />
            el <span className="gold-fill">éxito</span>?
          </h2>
          <div className="ornament reveal delay-2" style={{ width: 320, maxWidth: '80%' }}>
            <span className="line" />
            <span className="diamond" />
            <span className="line" />
          </div>
          <p className="lede reveal delay-2" style={{ textAlign: 'center' }}>
            Cuatro fases. Cero improvisación. Resultados auditables en cada paso.
          </p>
        </div>

        <div className="method-track">
          <div className="method-line" />
          {steps.map((s, i) => (
            <div key={s.n} className={`method-step reveal delay-${i}`}>
              <div className="step-marker">
                <span className="dot" />
                <span className="ring" />
              </div>
              <div className="step-tag">{s.tag}</div>
              <div className="step-num gold-fill">{s.n}</div>
              <h3 className="step-title">{s.title}</h3>
              <p className="step-desc">{s.desc}</p>
            </div>
          ))}
        </div>

        <div className="guarantee reveal corner-frame">
          <span className="c-tl" /><span className="c-br" />
          <div className="guarantee-seal">
            <svg viewBox="0 0 100 100" width="80" height="80">
              <circle cx="50" cy="50" r="46" fill="none" stroke="url(#cc-gold)" strokeWidth="1" />
              <circle cx="50" cy="50" r="40" fill="none" stroke="url(#cc-gold)" strokeWidth="0.5" opacity="0.5" />
              <text x="50" y="48" textAnchor="middle" fontFamily="Cinzel, serif" fontSize="11" fill="url(#cc-gold)" letterSpacing="2">GARANTÍA</text>
              <text x="50" y="62" textAnchor="middle" fontFamily="Cinzel, serif" fontSize="11" fill="url(#cc-gold)" letterSpacing="2">DE CAPITAL</text>
              <defs>
                <linearGradient id="cc-gold" x1="0" x2="1">
                  <stop offset="0" stopColor="var(--gold-deep)" />
                  <stop offset="1" stopColor="var(--gold-light)" />
                </linearGradient>
              </defs>
            </svg>
          </div>
          <div className="guarantee-text">
            <h4>Si en 90 días no superamos tu baseline,<br />trabajamos sin coste hasta hacerlo.</h4>
            <p>
              No prometemos resultados imposibles. Comprometemos un baseline
              auditable y respondemos por él. Esa es la única forma seria
              de hacer este negocio.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// SECCIÓN: RESEÑAS
// ============================================================

function Reviews() {
  const reviews = [
    {
      quote: 'Pasamos de cerrar 8 deals al mes a 27. La diferencia no fue magia, fue tener un sistema y cerradores que sabían lo que hacían. Closing Capital cambió la economía de mi empresa.',
      name: 'Marta Iribarren',
      role: 'CEO · Iribarren Consultora Inmobiliaria',
      result: '+237% deals/mes',
      sector: 'Real Estate',
    },
    {
      quote: 'Llevábamos 18 meses pagando agencias que sólo entregaban informes bonitos. En 60 días con el equipo de Closing Capital teníamos un funnel real, métricas claras y caja entrando.',
      name: 'David Olalla',
      role: 'Founder · Naviera Mentoring',
      result: 'ROAS 6,4x',
      sector: 'Formación',
    },
    {
      quote: 'Lo que más valoro es la honestidad. Nos dijeron en la primera llamada qué iba a funcionar y qué no. Cumplieron exactamente lo prometido — y eso, en este sector, es rarísimo.',
      name: 'Lucía Vento',
      role: 'CMO · Atelier Vento',
      result: '+184% LTV cliente',
      sector: 'Lujo',
    },
    {
      quote: 'El equipo de cerradores que nos asignaron entiende la psicología de un comprador de alto ticket mejor que los míos. Ahora son ellos los que entrenan a mi equipo interno.',
      name: 'Rafael Quintela',
      role: 'CEO · Quintela Tech B2B',
      result: 'Ticket medio 4,1x',
      sector: 'SaaS B2B',
    },
  ];

  const [active, setActive] = useStateHome(0);

  useEffectHome(() => {
    const id = setInterval(() => setActive(a => (a + 1) % reviews.length), 7000);
    return () => clearInterval(id);
  }, []);

  return (
    <section className="section section-reviews">
      <div className="section-inner">
        <div className="section-header">
          <span className="section-num reveal">— 04 / Voces de clientes</span>
          <h2 className="h-section reveal delay-1">
            Reseñas de<br />nuestros <span className="italic-accent">clientes</span>
          </h2>
          <div className="ornament reveal delay-2" style={{ width: 280, maxWidth: '80%' }}>
            <span className="line" /><span className="diamond" /><span className="line" />
          </div>
        </div>

        <div className="reviews-stage reveal">
          <div className="reviews-quote">
            <div className="big-quote">“</div>
            {reviews.map((r, i) => (
              <div key={i} className={`review-slide ${i === active ? 'active' : ''}`}>
                <p className="review-text">{r.quote}</p>
                <div className="review-meta">
                  <div className="review-author">
                    <div className="avatar">
                      <span>{r.name.split(' ').map(w => w[0]).join('')}</span>
                    </div>
                    <div>
                      <div className="r-name">{r.name}</div>
                      <div className="r-role">{r.role}</div>
                    </div>
                  </div>
                  <div className="review-result">
                    <div className="r-result-num gold-fill">{r.result}</div>
                    <div className="r-result-label">{r.sector}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>

          <div className="reviews-controls">
            {reviews.map((_, i) => (
              <button
                key={i}
                className={`r-dot ${i === active ? 'active' : ''}`}
                onClick={() => setActive(i)}
                aria-label={`Reseña ${i + 1}`}
              >
                <span className="r-dot-fill" />
              </button>
            ))}
          </div>
        </div>

        <div className="reviews-logos reveal">
          <span className="logos-label">Marcas que confiaron en nosotros</span>
          <div className="logos-row">
            {['IRIBARREN', 'NAVIERA', 'ATELIER · VENTO', 'QUINTELA', 'CASA RÍO', 'OLALLA & CO', 'VENTORA'].map(n => (
              <span key={n} className="logo-mark">{n}</span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// CTA FINAL
// ============================================================

function FinalCTA() {
  return (
    <section id="contacto" className="section section-cta">
      <GoldParticles count={18} />
      <div className="section-inner cta-inner">
        <div className="cta-content reveal">
          <div className="ornament" style={{ width: 200, margin: '0 auto 30px' }}>
            <span className="line" /><span className="diamond" /><span className="line" />
          </div>
          <h2 className="display-xl">
            ¿Listo para cerrar lo<br />que <span className="gold-fill">otros dejan abierto</span>?
          </h2>
          <p className="lede" style={{ margin: '32px auto', textAlign: 'center' }}>
            Una llamada. 30 minutos. Te diremos exactamente qué cambiar
            en tu negocio para multiplicar tu tasa de cierre — sin compromiso.
          </p>
          <a href="#" className="btn btn-primary" style={{ marginTop: 16 }}>
            Agendar llamada estratégica
            <span className="arrow">→</span>
          </a>
          <div className="cta-trust">
            <span>30 min · Sin coste · Sin compromiso · 100% confidencial</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// APP
// ============================================================

function HomePage() {
  useReveal();
  return (
    <>
      <Nav active="inicio" />
      <Hero />
      <WhatIs />
      <Founder />
      <Method />
      <Reviews />
      <FinalCTA />
      <Footer />
    </>
  );
}

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