// ─── SECTIONS B: Especialidades, Joel, Método, Resultados ───────────────

const { useEffect: useEffB, useState: useStB, useRef: useRefB } = React;

// ─── ESPECIALIDADES ────────────────────────────────────────────────────
function Especialidades() {
  return (
    <section className="section section-paper shell" id="especialidades">
      <div className="section-label-row reveal">
        <span className="section-label"><span className="rule" />Especialidades jurídicas</span>
        <p className="section-lede">Trabajamos con cualquier área legal. Estos son los sectores donde tenemos más resultados probados.</p>
      </div>
      <h2 className="section-title reveal reveal-delay-1" style={{ marginBottom: 48 }}>
        Si tienes un despacho, <em>podemos ayudarte.</em>
      </h2>

      <div className="specialties-grid">
        {SPECIALTIES.map((s, i) => (
          <div key={s.id} className={`specialty-card reveal reveal-delay-${(i % 4) + 1} ${s.highlight ? "terra" : ""}`}>
            <div className="icon">{s.icon}</div>
            <div className="name">{s.name}</div>
            <div className="stat">{s.stat}</div>
            <div className="desc">{s.desc}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ─── JOEL ──────────────────────────────────────────────────────────────
function Joel() {
  return (
    <section className="section shell" id="joel">
      <div className="section-label-row reveal">
        <span className="section-label"><span className="rule" />Quiénes somos</span>
      </div>

      <div className="about-grid">
        <div>
          <h2 className="section-title reveal reveal-delay-1" style={{ marginBottom: 36 }}>
            Venimos de donde se maneja <em>dinero real.</em>
          </h2>

          <div className="about-letter reveal reveal-delay-2">
            <p>
              Más que una agencia, somos consultores de Marketing Digital con un método probado
              para incrementar la facturación de despachos de abogados. Con una larga trayectoria
              y millones de euros invertidos en plataformas publicitarias.
            </p>
            <p>
              No somos una agencia genérica que prueba cosas. Conocemos el sector jurídico desde dentro.
              Sabemos cuánto vale un caso de Segunda Oportunidad, cuánto tarda en cerrarse una hipoteca
              y qué objeciones tiene un cliente de revolving. <em className="serif">Eso lo cambia todo.</em>
            </p>
            <p>
              Trato directo con tu especialista, sin gestor intermedio. Estamos en el grupo de WhatsApp del despacho.
              Si algo no funciona, lo sabemos el mismo día que tú.
            </p>
          </div>

          <div className="about-mini-stats reveal reveal-delay-3">
            {[
              { v: "+5", l: "Años marketing digital" },
              { v: "6M€", l: "Gestionados en ads" },
              { v: "+50", l: "Despachos activos" },
              { v: "+100", l: "Proyectos completados" },
            ].map(s => (
              <div key={s.l} className="s">
                <div className="v">{s.v}</div>
                <div className="l">{s.l}</div>
              </div>
            ))}
          </div>

          {/* Diferenciadores */}
          <div style={{ marginTop: 32, display: "flex", flexDirection: "column", gap: 12 }} className="reveal reveal-delay-4">
            {[
              ["Sin permanencia", "Creemos en nuestro trabajo. Si no funciona, te vas cuando quieras."],
              ["Especialistas en jurídico", "Más de 50 despachos confían en nosotros. Conocemos el sector en profundidad."],
              ["Honestos y directos", "Si no conseguimos los objetivos por contrato, te devolvemos el dinero."],
              ["24/7 a tu lado", "Comunicación directa. Grupo de WhatsApp para mayor eficiencia comunicativa."],
            ].map(([title, desc]) => (
              <div key={title} style={{
                padding: "16px 20px",
                background: "var(--card)",
                border: "1px solid var(--rule)",
                borderRadius: 10,
                borderLeft: "3px solid var(--terra)",
              }}>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 15, marginBottom: 4 }}>{title}</div>
                <div style={{ fontFamily: "var(--font-body)", fontSize: 13.5, color: "var(--ink-3)", lineHeight: 1.55 }}>{desc}</div>
              </div>
            ))}
          </div>
        </div>

      </div>
    </section>
  );
}

// ─── MÉTODO ────────────────────────────────────────────────────────────
function Metodo() {
  const steps = [
    {
      num: "01", icon: "🎯", title: "Captamos al cliente ideal", owner: "legalketing", ownerLabel: "Legalketing",
      items: ["Diseñamos la estrategia de tu despacho", "Definimos el perfil exacto de tu cliente", "Creamos las creatividades y los mensajes", "Activamos las campañas en menos de 7 días"],
    },
    {
      num: "02", icon: "✅", title: "Lo cualificamos antes de que llegue", owner: "legalketing", ownerLabel: "Legalketing",
      items: ["Filtramos los casos no viables", "Solo llegan los que tienen caso real", "Con nombre, teléfono y situación completa", "Sin contactos genéricos ni curiosos"],
    },
    {
      num: "03", icon: "📊", title: "Lo recibes y cierras", owner: "both", ownerLabel: "Tú + Legalketing",
      items: ["El lead entra directo en tu CRM", "Notificación inmediata en tu móvil", "Guion de llamada y apoyo comercial incluido", "82% de tasa de cierre media en nuestros clientes"],
    },
  ];

  return (
    <section className="section section-paper shell" id="metodo">
      <div className="section-label-row reveal">
        <span className="section-label"><span className="rule" />Cómo funciona</span>
      </div>
      <h2 className="section-title reveal reveal-delay-1" style={{ marginBottom: 16 }}>
        De cero a pipeline lleno <em>en 7 días.</em>
      </h2>
      <p style={{ fontFamily: "var(--font-body)", fontSize: 15, color: "var(--ink-4)", marginBottom: 56, maxWidth: "56ch" }} className="reveal reveal-delay-2">
        Nos encargamos de todo. Tú solo cierras.
      </p>

      <div className="funnel-steps reveal reveal-delay-2">
        {steps.map((s, i) => (
          <div key={i} className="funnel-step">
            <div className="step-num">{s.num}</div>
            <div className="step-icon">{s.icon}</div>
            <div className="step-title">{s.title}</div>
            <div className={`step-owner ${s.owner}`}>{s.ownerLabel}</div>
            <ul className="step-items">
              {s.items.map((item, j) => <li key={j}>{item}</li>)}
            </ul>
          </div>
        ))}
      </div>

      {/* CRM mock */}
      <div style={{ marginTop: 56 }}>
        <div style={{ maxWidth: 400, margin: "0 auto" }}>
          <div className="reveal reveal-delay-1" style={{ background: "var(--card)", border: "1px solid var(--rule)", borderRadius: 14, padding: 24 }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.10em", textTransform: "uppercase", color: "var(--ink-5)" }}>Tu panel de leads</div>
              <div style={{ display: "flex", alignItems: "center", gap: 6, fontFamily: "var(--font-mono)", fontSize: 9.5, color: "#22c55e" }}>
                <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#22c55e", display: "inline-block" }} />
                En vivo
              </div>
            </div>
            {[
              { init: "MG", name: "María García", sub: "2ª Oportunidad · 9.200€", badge: "NUEVO", color: "#22c55e" },
              { init: "JL", name: "José López", sub: "Deuda empresa · 22.000€", badge: "CALIENTE", color: "var(--terra)" },
              { init: "AR", name: "Ana Ramos", sub: "Divorcio · Madrid", badge: "Llamada →", color: "#6366f1" },
              { init: "PC", name: "Pedro Cano", sub: "Cobro deudas · 8.500€", badge: "CERRADO ✓", color: "var(--ink-4)" },
            ].map((lead, i) => (
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 0", borderBottom: i < 3 ? "1px solid var(--rule)" : "none" }}>
                <div style={{ width: 32, height: 32, borderRadius: "50%", background: "var(--terra-wash)", border: "1px solid var(--terra-line)", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 11, color: "var(--terra)", flexShrink: 0 }}>{lead.init}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 13 }}>{lead.name}</div>
                  <div style={{ fontFamily: "var(--font-body)", fontSize: 11, color: "var(--ink-5)" }}>{lead.sub}</div>
                </div>
                <div style={{ padding: "3px 8px", borderRadius: 4, border: `1px solid ${lead.color}`, fontFamily: "var(--font-mono)", fontSize: 9, letterSpacing: "0.06em", color: lead.color, flexShrink: 0, whiteSpace: "nowrap" }}>{lead.badge}</div>
              </div>
            ))}
            <div style={{ marginTop: 14, padding: "10px 14px", background: "oklch(54% 0.14 42 / 0.06)", border: "1px solid var(--terra-line)", borderRadius: 8, fontFamily: "var(--font-body)", fontSize: 12, color: "var(--terra)", textAlign: "center" }}>
              CRM incluido sin coste adicional
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── RESULTADOS REALES ─────────────────────────────────────────────────
function ResultadosReales() {
  return (
    <section className="section section-dark shell" id="resultados">
      <div className="section-label-row reveal">
        <span className="section-label" style={{ color: "var(--graphite-ink-2)" }}><span className="rule" style={{ background: "var(--graphite-ink-2)" }} />Resultados reales</span>
      </div>
      <h2 className="section-title reveal reveal-delay-1" style={{ color: "var(--graphite-ink)", marginBottom: 16 }}>
        Números reales. <em>De clientes en activo.</em>
      </h2>
      <p style={{ fontFamily: "var(--font-body)", fontSize: 15, color: "var(--graphite-ink-2)", marginBottom: 56, maxWidth: "56ch" }} className="reveal reveal-delay-2">
        No son estimaciones. Son capturas de campañas activas hoy.
      </p>

      <div className="results-grid">
        {REAL_RESULTS.map((r, i) => (
          <div key={i} className={`result-card reveal reveal-delay-${i + 1}`}>
            <div className="rc-header">
              <div>
                <div className="rc-spec">{r.specialty}</div>
                <div className="rc-spec" style={{ marginTop: 2, color: "var(--ink-6)" }}>{r.period}</div>
              </div>
              <div className="rc-live"><span className="b" />En activo</div>
            </div>
            <div className="rc-big"><AnimatedNumber to={r.leads} /></div>
            <div className="rc-unit">leads generados</div>
            <div className="rc-stats">
              <div className="rc-stat-item">
                <div className="rc-stat-v">{r.costPerLead.toFixed(2).replace(".", ",")}€</div>
                <div className="rc-stat-l">Coste/lead</div>
              </div>
              <div className="rc-stat-item">
                <div className="rc-stat-v">{r.invested.toLocaleString("es-ES")}€</div>
                <div className="rc-stat-l">Invertido</div>
              </div>
              <div className="rc-stat-item">
                <div className="rc-stat-v">{r.closeRate}%</div>
                <div className="rc-stat-l">Tasa cierre</div>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* Sector comparison */}
      <div style={{ marginTop: 48, padding: "28px 32px", background: "var(--graphite-2)", border: "1px solid oklch(40% 0.014 50)", borderRadius: 14 }} className="reveal">
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--graphite-ink-2)", marginBottom: 20 }}>Tasa de cierre · Comparativa</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          <div>
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6, fontFamily: "var(--font-body)", fontSize: 13.5, color: "var(--graphite-ink-2)" }}>
              <span>Sector legal (media)</span><span>25%</span>
            </div>
            <div style={{ height: 8, background: "oklch(35% 0.014 50)", borderRadius: 4 }}>
              <div style={{ height: "100%", width: "25%", background: "oklch(50% 0.014 50)", borderRadius: 4 }} />
            </div>
          </div>
          <div>
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6, fontFamily: "var(--font-display)", fontSize: 14, fontWeight: 700, color: "var(--graphite-ink)" }}>
              <span>Con Legalketing</span><span style={{ color: "var(--terra)" }}>59%</span>
            </div>
            <div style={{ height: 8, background: "oklch(35% 0.014 50)", borderRadius: 4 }}>
              <div style={{ height: "100%", width: "59%", background: "var(--terra)", borderRadius: 4 }} />
            </div>
          </div>
        </div>
        <div style={{ marginTop: 16, fontFamily: "var(--font-body)", fontSize: 13, color: "var(--graphite-ink-2)" }}>
          Media sector jurídico: 20–25%. Legalketing: más del doble.
        </div>
      </div>

      {/* Cases carousel */}
      <div style={{ marginTop: 64 }}>
        <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "clamp(22px, 2.5vw, 32px)", letterSpacing: "-0.03em", color: "var(--graphite-ink)", marginBottom: 32 }} className="reveal">
          Casos de éxito · Despachos reales
        </h3>
        <div className="cases-strip" aria-label="Casos de éxito">
          {[0, 1, 2].map(col => (
            <div key={col} className="case-col">
              <div className="case-col-track" style={{ animationDuration: `${45 + col * 8}s`, animationDirection: col % 2 === 1 ? "reverse" : "normal" }}>
                {[...CASES, ...CASES].map((c, i) => (
                  <div key={i} className="case-card">
                    <div className="tag">{c.sector}</div>
                    <div className="headline">{c.headline} <em>{c.headlineUnit}</em></div>
                    <div className="sub">{c.sub}</div>
                    <div className="body">{c.body}</div>
                    <div className="foot">
                      <span className="client">{c.client}</span>
                      <span className="contact">{c.contact}</span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}