// ─── SECTIONS C: Testimonios, Transformación, ROI Calculator, Comparativa

const { useEffect: useEffC, useState: useStC, useRef: useRefC } = React;

// ─── TESTIMONIOS ───────────────────────────────────────────────────────
function Testimonios() {
  const hero = TESTIMONIALS[0];
  const rest = TESTIMONIALS.slice(1);

  return (
    <section className="section shell" id="testimonios">
      <div className="section-label-row reveal">
        <span className="section-label"><span className="rule" />Lo que dicen los despachos</span>
      </div>
      <h2 className="section-title reveal reveal-delay-1" style={{ marginBottom: 64 }}>
        Resultados que hablan <em>solos.</em>
      </h2>

      {/* Hero testimonial */}
      <div className="testimonial-hero reveal reveal-delay-2">
        <div>
          <p className="quote">
            "{hero.quote}"
          </p>
          <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={{ display: "flex", flexDirection: "column", gap: 12 }}>
          <div style={{ padding: "20px 24px", background: "var(--card)", border: "1px solid var(--rule)", borderRadius: 12 }}>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-5)", marginBottom: 8 }}>Resultado · Mes 1</div>
            <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 48, letterSpacing: "-0.04em", color: "var(--terra)", lineHeight: 1 }}>20.000€</div>
            <div style={{ fontFamily: "var(--font-body)", fontSize: 14, color: "var(--ink-3)", marginTop: 6 }}>5 casos cerrados · Ley 2ª Oportunidad</div>
          </div>
          <div style={{ padding: "20px 24px", background: "var(--card)", border: "1px solid var(--rule)", borderRadius: 12 }}>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-5)", marginBottom: 8 }}>Situación anterior</div>
            <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 16, color: "var(--ink)", lineHeight: 1.3 }}>6 meses con otra agencia sin cerrar un solo caso</div>
          </div>
          <MagBtn href={WA_LINK} variant="terra" style={{ alignSelf: "flex-start" }}>
            <WaIcon size={15} /> Quiero resultados así
          </MagBtn>
        </div>
      </div>

      {/* Grid */}
      <div className="testimonial-secondary">
        {rest.map((t, i) => (
          <div key={i} className={`t-card reveal reveal-delay-${(i % 4) + 1}`}>
            <div className="t-sector">{t.sector}</div>
            <p className="body">"{t.quote}"</p>
            <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>
    </section>
  );
}

// ─── TRANSFORMACIÓN ────────────────────────────────────────────────────
function Transformacion() {
  const refBefore = useRefC(null);
  const refAfter  = useRefC(null);
  const [animated, setAnimated] = useStC(false);

  const beforeHeights = [22, 62, 18, 72, 28, 54];
  const afterHeights  = [35, 52, 65, 72, 82, 94];
  const afterValues   = ["9.000€", "13.500€", "17.200€", "19.800€", "22.500€", "26.100€"];
  const months        = ["Mes 1", "Mes 2", "Mes 3", "Mes 4", "Mes 5", "Mes 6"];

  useEffC(() => {
    const el = refAfter.current;
    if (!el) return;
    const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) setAnimated(true); }, { threshold: 0.3 });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  return (
    <section className="section section-paper shell" id="transformacion">
      <div className="section-label-row reveal">
        <span className="section-label"><span className="rule" />La transformación</span>
      </div>
      <h2 className="section-title reveal reveal-delay-1" style={{ marginBottom: 56 }}>
        Lo que cambia con <em>nuestro método.</em>
      </h2>

      <div className="transform-grid">
        {/* Before */}
        <div className="transform-chart before reveal reveal-delay-1" ref={refBefore}>
          <div className="tc-label">Antes de Legalketing</div>
          <div className="tc-bars">
            {beforeHeights.map((h, i) => (
              <div key={i} className="tc-bar" style={{ height: animated ? `${h}%` : "4%", transition: `height ${0.6 + i * 0.1}s cubic-bezier(.16,1,.3,1)` }} />
            ))}
          </div>
          <div className="tc-months">
            {["Ene", "Feb", "Mar", "Abr", "May", "Jun"].map(m => (
              <span key={m} className="tc-month-label">{m}</span>
            ))}
          </div>
          <div className="tc-items" style={{ marginTop: 20 }}>
            <div style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--ink-4)", marginBottom: 10 }}>Dependencia total del boca a boca</div>
            {[
              "Meses de 1.900€ y meses de 18.500€ sin saber por qué",
              "El pipeline depende de que alguien te recomiende",
              "Cada enero empiezas de cero",
            ].map((t, i) => <div key={i} className="tc-item">{t}</div>)}
          </div>
        </div>

        {/* Arrow */}
        <div className="transform-arrow">
          <div className="circle">→</div>
        </div>

        {/* After */}
        <div className="transform-chart after reveal reveal-delay-2" ref={refAfter}>
          <div className="tc-label">Con Legalketing</div>
          <div className="tc-bars" style={{ position: "relative" }}>
            {afterHeights.map((h, i) => (
              <div key={i} className="tc-bar" style={{ height: animated ? `${h}%` : "4%", transition: `height ${0.6 + i * 0.1}s cubic-bezier(.16,1,.3,1)`, position: "relative" }}>
                {i === afterHeights.length - 1 && (
                  <div style={{
                    position: "absolute", top: -20, right: 0,
                    fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 11,
                    color: "var(--terra)", whiteSpace: "nowrap",
                  }}>26.100€</div>
                )}
              </div>
            ))}
          </div>
          <div className="tc-months">
            {months.map(m => <span key={m} className="tc-month-label">{m}</span>)}
          </div>
          <div className="tc-items" style={{ marginTop: 20 }}>
            <div style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "oklch(38% 0.12 145)", marginBottom: 10, fontWeight: 600 }}>Pipeline estable y predecible</div>
            {[
              "Leads cualificados entrando cada semana",
              "Facturación predecible y creciente mes a mes",
              "Tú controlas el crecimiento de tu despacho",
            ].map((t, i) => <div key={i} className="tc-item">{t}</div>)}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── ROI CALCULATOR ────────────────────────────────────────────────────
function ROICalculator() {
  const [ticket, setTicket] = useStC(2000);
  const fee = 800;
  const leads = 20;

  const scenarios = [
    { key: "pesimista",  label: "Pesimista",  rate: 0.30, note: "Cerrando 3 de cada 10 leads",      color: "var(--terra)" },
    { key: "neutral",    label: "Neutral",    rate: 0.50, note: "Cerrando 1 de cada 2 leads",       color: "var(--ink-3)" },
    { key: "optimista",  label: "Optimista",  rate: 0.82, note: "La media real de nuestros clientes", color: "oklch(38% 0.12 145)" },
  ];

  return (
    <section className="section shell" id="roi">
      <div className="section-label-row reveal">
        <span className="section-label"><span className="rule" />La matemática</span>
      </div>
      <h2 className="section-title reveal reveal-delay-1" style={{ marginBottom: 16 }}>
        Incluso en el peor escenario, <em>sales ganando.</em>
      </h2>
      <p style={{ fontFamily: "var(--font-body)", fontSize: 15, color: "var(--ink-4)", marginBottom: 56, maxWidth: "64ch" }} className="reveal reveal-delay-2">
        Basado en 20 leads/mes garantizados. Sin contar upsells ni renovaciones.
      </p>

      <div className="roi-calc reveal reveal-delay-3">
        {/* Input */}
        <div className="roi-calc-input-row">
          <label htmlFor="ticket-range">Ticket medio de tu despacho:</label>
          <div className="roi-ticket-input">
            <span>{ticket.toLocaleString("es-ES")}€</span>
            <input
              id="ticket-range"
              type="range"
              min={500}
              max={8000}
              step={250}
              value={ticket}
              onChange={e => setTicket(Number(e.target.value))}
            />
          </div>
        </div>

        {/* Scenarios */}
        <div className="roi-calc-scenarios">
          {scenarios.map(s => {
            const clients = Math.round(leads * s.rate);
            const revenue = clients * ticket;
            const roi = (revenue / fee).toFixed(1);
            return (
              <div key={s.key} className={`scenario-card ${s.key}`}>
                <div className="sc-tag" style={{ color: s.color }}>↗ {s.label.toUpperCase()}</div>
                <div className="sc-note">{s.note}</div>
                <div className="sc-grid">
                  <div className="sc-item">
                    <div className="lbl">Cierre</div>
                    <div className="val accent" style={{ color: s.color }}>{Math.round(s.rate * 100)}%</div>
                  </div>
                  <div className="sc-item">
                    <div className="lbl">Clientes/mes</div>
                    <div className="val">{clients}</div>
                  </div>
                  <div className="sc-item">
                    <div className="lbl">Facturación</div>
                    <div className="val" style={{ fontSize: 16 }}>{revenue.toLocaleString("es-ES")}€</div>
                  </div>
                  <div className="sc-item">
                    <div className="lbl">Retorno</div>
                    <div className={`val roi ${s.key}`} style={{ color: s.color }}>×{roi}</div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        <div style={{
          marginTop: 24, padding: "16px 20px",
          background: "oklch(50% 0.14 145 / 0.06)",
          border: "1px solid oklch(50% 0.14 145 / 0.25)",
          borderRadius: 10,
          fontFamily: "var(--font-display)",
          fontWeight: 600, fontSize: 14,
          color: "oklch(30% 0.10 145)",
        }}>
          ✓ Garantía incluida: si no llegamos a los {leads} leads, te devolvemos los honorarios.
        </div>
      </div>
    </section>
  );
}

// ─── COMPARATIVA ──────────────────────────────────────────────────────
function Comparativa() {
  return (
    <section className="section section-paper shell" id="comparativa">
      <div className="section-label-row reveal">
        <span className="section-label"><span className="rule" />La diferencia</span>
      </div>
      <h2 className="section-title reveal reveal-delay-1" style={{ marginBottom: 56 }}>
        Por qué los demás <em>no funcionan.</em>
      </h2>

      <div className="vs-table">
        <div className="vs-header">
          <div>Aspecto</div>
          <div>Otros sistemas</div>
          <div>Método Legalketing</div>
        </div>
        {VS_ITEMS.map((row, i) => (
          <div key={i} className="vs-row reveal">
            <div className="topic">
              {row.topic}
            </div>
            <div className="typical">
              <span style={{ display: "flex", gap: 8, alignItems: "flex-start" }}>
                <span style={{ color: "var(--terra)", fontWeight: 700, flexShrink: 0 }}>✗</span>
                {row.typical}
              </span>
            </div>
            <div className="mine">
              <span style={{ display: "flex", gap: 8, alignItems: "flex-start" }}>
                <span style={{ color: "oklch(38% 0.12 145)", fontWeight: 700, flexShrink: 0 }}>✓</span>
                {row.mine}
              </span>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}