// ─── SECTIONS C: About, Testimonials, Plazas, CTA, Footer ──────────────

// ─── ABOUT ─────────────────────────────────────────────────────────────
function About() {
  return (
    <section className="section section-paper" id="sobre-mi">
      <div className="shell">
        <div className="section-label-row" style={{ marginBottom: 56 }}>
          <div className="section-label">
            <span className="num">07</span>
            <span className="rule" />
            Sobre mí
          </div>
        </div>

        <div className="about-grid">
          <div>
            <h2 className="section-title reveal" style={{ marginBottom: 12 }}>
              Joel Mateo.
            </h2>
            <p className="reveal reveal-delay-1" style={{ fontFamily: "var(--font-display)", fontSize: "clamp(20px, 2.4vw, 30px)", fontWeight: 500, letterSpacing: "-0.025em", color: "var(--ink-3)", lineHeight: 1.15, marginBottom: 40 }}>
              Trato directo. Datos en la mesa. <span className="serif-italic" style={{ color: "var(--terra)" }}>Y no me rindo hasta que cierras.</span>
            </p>

            <div className="about-letter">
              <p className="reveal reveal-delay-2">
                Llevo seis años en esto. Empecé gestionando campañas para marcas grandes,
                con <em className="serif">+6M€ de inversión publicitaria</em> al año y equipos de análisis detrás.
                Aprendes rápido cuando los números tienen que cuadrar a final de cada mes y no hay
                margen para experimentos.
              </p>
              <p className="reveal reveal-delay-3">
                Lo que me quedó de esa etapa es criterio. Sé en pocos días qué va a funcionar
                para cada negocio y qué no. Sin rodeos. Desde el primer día estamos haciendo cosas
                con impacto real, no calentando motores.
              </p>
              <p className="reveal reveal-delay-4">
                En un momento decidí hacer algo más directo: trabajar con negocios de servicios
                donde se nota lo que haces. <em className="serif">Sin gestor intermedio, sin informes de relleno.</em>
                Yo me encargo de todo. Cuando algo no va bien, lo sabes antes de que termine el mes.
              </p>
              <p className="reveal reveal-delay-5">
                Si cierras conmigo, no estás contratando una agencia. Estás contratando a alguien
                que va a tratar tu negocio como si fuera el suyo durante el tiempo que trabajemos juntos.
              </p>
              <div className="signature-row reveal reveal-delay-6">
                <div className="signature" aria-hidden="true">Joel Mateo</div>
                <div className="meta">Fundador · Mateo Marketing</div>
              </div>
            </div>
          </div>

          <div>
            <div className="about-photo reveal">
              <img src="assets/joel.jpg" alt="Joel Mateo" />
              <div className="about-photo-badge">
                <span className="avail">
                  <span className="b" />
                  Disponible
                </span>
              </div>
            </div>

            <div className="about-mini-stats reveal reveal-delay-2">
              <div className="s">
                <div className="v">+<AnimatedNumber to={6} /></div>
                <div className="l">Años</div>
              </div>
              <div className="s">
                <div className="v"><AnimatedNumber to={6} /><em>M€</em></div>
                <div className="l">Inversión</div>
              </div>
              <div className="s">
                <div className="v">+<AnimatedNumber to={50} /></div>
                <div className="l">Clientes</div>
              </div>
              <div className="s">
                <div className="v"><em>×</em><AnimatedNumber to={24} /></div>
                <div className="l">ROI medio</div>
              </div>
            </div>

            <div style={{ marginTop: 32, padding: 24, border: "1px solid var(--rule)", borderRadius: 12, background: "var(--card)" }} className="reveal reveal-delay-3">
              <div className="mono-tag" style={{ marginBottom: 12 }}>Mi compromiso contigo</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
                {[
                  "Trato directo conmigo, sin gestor de cuentas.",
                  "Reporto contratos firmados, no clics.",
                  "Si no encajamos, te lo digo en la primera llamada.",
                  "Máximo 12 clientes a la vez. La atención no se diluye.",
                ].map((t, i) => (
                  <li key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontFamily: "var(--font-display)", fontSize: 14, color: "var(--ink-2)", lineHeight: 1.5 }}>
                    <span style={{ color: "var(--terra)", fontWeight: 800, fontSize: 13, flexShrink: 0, marginTop: 2 }}>→</span>
                    {t}
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── TESTIMONIALS ──────────────────────────────────────────────────────
function Testimonials() {
  const hero = TESTIMONIALS[0];
  const rest = TESTIMONIALS.slice(1, 13);

  return (
    <section className="section" id="testimonios">
      <div className="shell">
        <div className="section-label-row" style={{ marginBottom: 56 }}>
          <div>
            <div className="section-label">
              <span className="num">08</span>
              <span className="rule" />
              Lo dicen los clientes
            </div>
            <h2 className="section-title reveal" style={{ marginTop: 24, fontSize: "clamp(34px, 4.5vw, 60px)" }}>
              No es lo que <em>yo digo</em>.<br />
              Es lo que ellos firmaron.
            </h2>
          </div>
          <p className="section-lede reveal reveal-delay-1">
            Reseñas reales, con nombre y apellido. Cada una contrastable con una llamada de 5 minutos.
            Pídeme el contacto del que más se parezca a tu caso.
          </p>
        </div>

        <div className="testimonial-hero reveal">
          <div>
            <div className="quote">
              {hero.quote.split("Joel").map((part, i, arr) => (
                <React.Fragment key={i}>
                  {part}
                  {i < arr.length - 1 && <em>Joel</em>}
                </React.Fragment>
              ))}
            </div>
            <div className="author">
              <div className="av">{hero.initials}</div>
              <div>
                <div className="n">{hero.name}</div>
                <div className="r">{hero.role}</div>
              </div>
            </div>
          </div>
          <div style={{ padding: 32, background: "var(--paper-2)", border: "1px solid var(--rule)", borderRadius: 14 }}>
            <div className="mono-tag" style={{ marginBottom: 18, color: "var(--terra)", fontWeight: 700 }}>El antes / el después</div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
              <div>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-5)", marginBottom: 4 }}>ANTES</div>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 26, color: "var(--ink-3)", letterSpacing: "-0.025em" }}>0</div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 13, color: "var(--ink-4)" }}>hojas firmadas</div>
                <div style={{ fontFamily: "var(--font-body)", fontSize: 12, color: "var(--ink-5)", marginTop: 4 }}>6 meses con otra agencia</div>
              </div>
              <div>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--terra)", marginBottom: 4, fontWeight: 600 }}>MES 1 CON JOEL</div>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 36, color: "var(--terra)", letterSpacing: "-0.03em" }}>+<AnimatedNumber to={20} /></div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 13, color: "var(--ink-2)" }}>hojas firmadas</div>
                <div style={{ fontFamily: "var(--font-body)", fontSize: 12, color: "var(--ink-4)", marginTop: 4 }}>4 semanas. Mismo presupuesto.</div>
              </div>
            </div>
            <div style={{ height: 1, background: "var(--rule)", margin: "20px 0" }} />
            <div style={{ fontFamily: "var(--font-display)", fontSize: 13, color: "var(--ink-3)", lineHeight: 1.55 }}>
              <span style={{ color: "var(--terra)", fontWeight: 700 }}>{hero.name}</span> dirige un despacho de Ley 2ª Oportunidad
              en Cataluña. Llegó tras quemar dos agencias en dos años.
            </div>
          </div>
        </div>

        <div className="testimonial-secondary">
          {rest.map((t, i) => (
            <div key={i} className={`t-card reveal reveal-delay-${(i % 4) + 1}`}>
              {t.sector && <div className="t-sector">{t.sector}</div>}
              <div className="body">"{t.quote}"</div>
              <div className="foot">
                <div className="av">{t.initials}</div>
                <div>
                  <div className="n">{t.name}</div>
                  <div className="r">{t.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── PLAZAS (scarcity) ─────────────────────────────────────────────────
function Plazas() {
  const slots = Array.from({ length: 12 }, (_, i) => {
    if (i < 8) return "taken";
    if (i === 8) return "next";
    return "open";
  });

  return (
    <section className="section section-paper" id="plazas">
      <div className="shell">
        <div className="section-label-row" style={{ marginBottom: 40 }}>
          <div className="section-label">
            <span className="num">09</span>
            <span className="rule" />
            Disponibilidad real · 2026
          </div>
        </div>

        <div className="plazas">
          <div className="reveal">
            <h2 className="section-title">
              Trabajo con <em>12 clientes</em>.<br />
              No 13.
            </h2>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 17, lineHeight: 1.65, color: "var(--ink-3)", marginTop: 24, maxWidth: "52ch" }}>
              No es marketing de escasez. Es matemática. Si yo soy el que ejecuta y analiza
              cada cuenta, en algún punto la atención se diluye. Doce es el techo que aguanta
              hacerlo todo a mi nivel. Cuando se llena, se cierra hasta que alguien rota.
            </p>
            <p style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 16, color: "var(--ink-2)", marginTop: 24 }}>
              <span className="serif-italic" style={{ color: "var(--terra)", fontSize: 19 }}>Cuatro plazas libres para 2026.</span> Si tu negocio encaja, la siguiente puede ser la tuya.
            </p>
          </div>

          <div className="meter reveal reveal-delay-1">
            <div className="meter-row">
              <div className="big tabular">
                <AnimatedNumber to={8} />
              </div>
              <div className="of">
                de <span style={{ color: "var(--ink)" }}>12</span> plazas ocupadas
              </div>
            </div>
            <div className="meter-bar" aria-hidden="true">
              {slots.map((s, i) => <div key={i} className={`slot ${s}`} />)}
            </div>
            <div className="meter-note">
              ⬛ ocupado · <span style={{ color: "var(--terra)" }}>⬛ siguiente plaza</span> · ⬜ libre
            </div>
            <div style={{ marginTop: 18, paddingTop: 16, borderTop: "1px solid var(--rule)", display: "flex", justifyContent: "space-between", fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-4)", letterSpacing: "0.04em" }}>
              <span>Actualizado · 24 mayo 2026</span>
              <span style={{ color: "var(--terra)" }}>4 / 12 LIBRES</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── CTA ───────────────────────────────────────────────────────────────
function CTA() {
  return (
    <section className="section section-dark" id="contacto" style={{ paddingBlock: "clamp(96px, 12vw, 160px)" }}>
      <div className="noise" />
      <div className="shell" style={{ position: "relative", zIndex: 1 }}>
        <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 48 }}>
          <div className="section-label-row" style={{ marginBottom: 0, width: "100%" }}>
            <div className="section-label" style={{ color: "var(--graphite-ink-2)" }}>
              <span className="num">10</span>
              <span className="rule" style={{ background: "var(--graphite-ink-2)" }} />
              Una conversación. Quince minutos. Sin PowerPoints.
            </div>
          </div>

          <div className="cta-letter reveal">
            <h2>
              ¿Y si esta vez<br />
              <em>de verdad funciona?</em>
            </h2>
            <p>
              Cuéntame qué vendes, a quién y qué has probado. Te digo honestamente si puedo
              ayudarte y cómo lo plantearía. Da igual el sector: si el ticket justifica el sistema,
              hay camino. Si no hay fit, te lo digo y te ahorras meses.
            </p>
            <p style={{ marginTop: 16 }}>
              Una llamada de WhatsApp. Sin formulario. Sin que te llamen tres comerciales.
              Solo tú y yo, viendo si tiene sentido.
            </p>

            <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 20, marginTop: 48 }}>
              <MagBtn href={WA_LINK} variant="terra">
                <WaIcon size={18} />
                Hablamos por WhatsApp
              </MagBtn>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--graphite-ink-2)", letterSpacing: "0.04em" }}>
                <span style={{ color: "var(--terra)" }}>+34</span> 694 21 64 03 · Primera conversación sin coste
              </div>
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 32, width: "100%", paddingTop: 48, borderTop: "1px solid oklch(40% 0.012 50)" }}>
            {[
              { l: "Tiempo de respuesta", v: "< 4h", s: "días laborables" },
              { l: "Primera llamada", v: "15 min", s: "sin coste · sin compromiso" },
              { l: "Sistema activo", v: "5 días", s: "desde que firmamos" },
              { l: "Si no encaja", v: "0€", s: "te ahorras meses" },
            ].map((m) => (
              <div key={m.l}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--graphite-ink-2)", marginBottom: 8 }}>{m.l}</div>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 36, letterSpacing: "-0.035em", color: "var(--graphite-ink)" }}>{m.v}</div>
                <div style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--graphite-ink-2)", marginTop: 4 }}>{m.s}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── FOOTER ────────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer className="footer">
      <div className="shell">
        <div className="footer-grid">
          <div>
            <a className="nav-logo" href="#top" aria-label="Inicio" style={{ marginBottom: 16, display: "inline-flex" }}>
              <img src="assets/logo-mateo.png" alt="Mateo Marketing" style={{ height: 36 }} />
            </a>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 14, color: "var(--ink-3)", lineHeight: 1.65, maxWidth: 360, marginTop: 12 }}>
              Marketing digital para negocios de servicios. Trato directo con Joel Mateo.
              Sin gestor intermedio. Resultados desde el primer mes.
            </p>
          </div>
          <div>
            <h4>Navegación</h4>
            <ul>
              <li><a href="#casos">Casos</a></li>
              <li><a href="#metodo">Método</a></li>
              <li><a href="#diferenciador">Diferenciador</a></li>
              <li><a href="#resultados">Resultados</a></li>
              <li><a href="#sobre-mi">Sobre mí</a></li>
            </ul>
          </div>
          <div>
            <h4>Contacto</h4>
            <ul>
              <li><a href={WA_LINK} target="_blank" rel="noopener noreferrer">WhatsApp · 694 21 64 03</a></li>
              <li><a href="mailto:joel@mateomarketing.es">joel@mateomarketing.es</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Mateo Marketing · Joel Mateo</span>
          <span>Todos los derechos reservados</span>
        </div>
      </div>
    </footer>
  );
}

// ─── FAB ───────────────────────────────────────────────────────────────
function Fab() {
  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setShow(window.scrollY > 320);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <a href={WA_LINK} target="_blank" rel="noopener noreferrer" className={`fab ${show ? "show" : ""}`} aria-label="WhatsApp">
      <WaIcon size={22} />
    </a>
  );
}

Object.assign(window, { About, Testimonials, Plazas, CTA, Footer, Fab });
