// ─── SECTIONS D: Proceso, Garantía, Precio, FAQ, CTA, Footer ───────────

const { useEffect: useEffD, useState: useStD, useRef: useRefD } = React;

// ─── PROCESO ───────────────────────────────────────────────────────────
function Proceso() {
  const steps = [
    { when: "Semana 1", title: "Te conocemos a fondo", active: true, final: false,
      body: "Briefing de tu despacho, especialidades y competencia. Diseñamos las creatividades y el copy de los anuncios. El día 7 las campañas están activas." },
    { when: "Semana 2", title: "Llegan los primeros leads", active: true, final: false,
      body: "Empiezas a recibir contactos cualificados directamente en tu CRM. Solo personas con caso real, que te contactan exclusivamente a ti." },
    { when: "Semana 3–4", title: "Optimizamos y escalamos", active: false, final: false,
      body: "Analizamos qué funciona mejor, reducimos el coste por lead y aumentamos el volumen. Tú te concentras en cerrar. Nosotros en llenar el pipeline." },
    { when: "Mes 2+", title: "Pipeline estable y predecible", active: false, final: true,
      body: "Leads entrando cada semana. Facturación creciente y controlada. Sin depender del boca a boca nunca más." },
  ];

  return (
    <section className="section shell" id="proceso">
      <div className="section-label-row reveal">
        <span className="section-label"><span className="rule" />Resultados · Despacho jurídico</span>
      </div>
      <h2 className="section-title reveal reveal-delay-1" style={{ marginBottom: 12 }}>
        Así trabajamos contigo, <em>semana a semana.</em>
      </h2>
      <p style={{ fontFamily: "var(--font-body)", fontSize: 15, color: "var(--ink-4)", marginBottom: 64, maxWidth: "56ch" }} className="reveal reveal-delay-2">
        Lo que ocurre desde que arrancamos hasta que tienes el pipeline lleno.
      </p>

      <div className="process-timeline">
        {steps.map((s, i) => (
          <div key={i} className={`process-step reveal reveal-delay-${i + 1} ${s.active ? "active" : ""} ${s.final ? "final" : ""}`}>
            <div className="ps-dot" />
            <div className="ps-when">{s.when}</div>
            <div className="ps-content">
              <div className="ps-title">{s.title}</div>
              <div className="ps-body">{s.body}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ─── GARANTÍA ──────────────────────────────────────────────────────────
function Garantia() {
  return (
    <section className="section section-paper shell" id="garantia">
      <div className="section-label-row reveal">
        <span className="section-label"><span className="rule" />La garantía</span>
        <p className="section-lede">Garantizamos el mínimo. Si no llegamos, te devolvemos los honorarios.</p>
      </div>
      <h2 className="section-title reveal reveal-delay-1" style={{ marginBottom: 48 }}>
        Nuestra garantía de <em>rendimiento.</em>
      </h2>

      <div className="plans-grid">
        {PLANS.map((p, i) => (
          <div key={i} className={`plan-card reveal reveal-delay-${i + 1} ${p.highlight ? "highlight" : ""}`}>
            <div className="plan-badge">{p.label}</div>
            <div className="plan-num">{p.leads}</div>
            <div className="plan-unit">leads cualificados al mes</div>
            <div className="plan-budget">{p.adBudget}€/mes en publicidad</div>
            <div className="plan-guarantee">Garantizados o devolvemos honorarios</div>
          </div>
        ))}
      </div>

      <div style={{
        marginTop: 32, padding: "22px 28px",
        background: "var(--card)",
        border: "1px solid var(--rule)",
        borderRadius: 12,
        display: "flex", alignItems: "center", flexWrap: "wrap", gap: 24,
      }} className="reveal">
        <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 16, color: "var(--ink)" }}>
          Sin permanencia · Sin letra pequeña
        </div>
        <div style={{ fontFamily: "var(--font-body)", fontSize: 14, color: "var(--ink-3)", flex: 1, minWidth: "20ch" }}>
          Si en algún momento no estás satisfecho, te vas sin penalizaciones. Mes a mes.
        </div>
        <MagBtn href={WA_LINK} variant="terra" size="sm">
          <WaIcon size={14} /> Ver qué plan te conviene
        </MagBtn>
      </div>
    </section>
  );
}

// ─── PRECIO ────────────────────────────────────────────────────────────
function Precio() {
  const features = [
    "Gestión completa de captación digital",
    "CRM incluido GRATIS (valor 3.000€/año)",
    "Guiones y edición de vídeo para creatividades",
    "Asesoramiento comercial y guiones de llamada",
    "Soporte directo 24/7 sin intermediarios",
    "Gestión comercial incluida cuando es necesario",
    "Garantía: leads prometidos o devolvemos honorarios",
  ];

  const vsItems = [
    { label: "Gestión captación digital", price: "800–1.500€/mes" },
    { label: "CRM externo", price: "150–300€/mes" },
    { label: "Producción vídeo + guion", price: "400–800€ / pieza" },
    { label: "Asesor comercial", price: "500–1.000€/mes" },
  ];

  return (
    <section className="section shell" id="precio">
      <div className="section-label-row reveal">
        <span className="section-label"><span className="rule" />La propuesta</span>
      </div>
      <h2 className="section-title reveal reveal-delay-1" style={{ marginBottom: 48 }}>
        Todo incluido. <em>Sin letra pequeña.</em>
      </h2>

      <div className="price-grid">
        <div className="price-box reveal reveal-delay-1">
          <div className="pb-label">Paquete completo Legalketing</div>
          <div className="pb-price">800</div>
          <div className="pb-note">€/mes + IVA · Sin permanencia · Garantía incluida</div>
          <div className="pb-features">
            {features.map((f, i) => <div key={i} className="pb-feature">{f}</div>)}
          </div>
          <MagBtn href={WA_LINK} variant="terra">
            <WaIcon size={16} /> Hablar ahora
          </MagBtn>
        </div>

        <div className="price-vs reveal reveal-delay-2">
          <div className="pvs-label">Lo que costaría por separado en el mercado</div>
          {vsItems.map((item, i) => (
            <div key={i} className="pvs-item">
              <span>{item.label}</span>
              <span className="pvs-v">{item.price}</span>
            </div>
          ))}
          <div className="pvs-total">
            <span>Total mercado</span>
            <span className="pvs-tv">+2.000€/mes</span>
          </div>
          <div className="pvs-footer">
            Todo incluido. Con garantía. Sin permanencia. Especialistas en despachos de abogados.
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── FAQ ───────────────────────────────────────────────────────────────
function FAQ() {
  const [open, setOpen] = useStD(null);

  return (
    <section className="section section-paper shell" id="faq">
      <div className="section-label-row reveal">
        <span className="section-label"><span className="rule" />Preguntas frecuentes</span>
      </div>
      <h2 className="section-title reveal reveal-delay-1" style={{ marginBottom: 48 }}>
        Las dudas que tiene todo <em>abogado.</em>
      </h2>

      <div className="faq-list" role="list">
        {FAQS.map((faq, i) => (
          <details
            key={i}
            className="faq-item reveal"
            open={open === i}
            onToggle={e => setOpen(e.target.open ? i : null)}
          >
            <summary>
              <span className="faq-num">{String(i + 1).padStart(2, "0")}</span>
              <span className="faq-q-wrap">
                <span className="faq-q">{faq.q}</span>
              </span>
              <span className="faq-chev" aria-hidden="true">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                  <path d="M12 5v14M5 12h14"/>
                </svg>
              </span>
            </summary>
            <div className="faq-a">{faq.a}</div>
          </details>
        ))}
      </div>

      <div className="faq-footer reveal">
        <span style={{ fontFamily: "var(--font-body)", fontSize: 14, color: "var(--ink-3)" }}>
          ¿Tienes más preguntas? Te respondo en menos de 2 horas.
        </span>
        <MagBtn href={WA_LINK} variant="terra" size="sm">
          <WaIcon size={14} /> Preguntar ahora
        </MagBtn>
      </div>
    </section>
  );
}

// ─── CTA FINAL ─────────────────────────────────────────────────────────
function CTAFinal() {
  return (
    <section className="section cta-dark shell" id="contacto">
      <div className="cta-letter reveal">
        <h2>
          La única decisión<br />es <em>cuándo.</em>
        </h2>
        <p>
          Cada semana que pasa sin un sistema de captación, es una semana de boca a boca que no escala,
          de pipeline irregular y de depender de que alguien te recomiende.
          Tus competidores ya están generando leads mientras lees esto.
        </p>
        <div style={{ display: "flex", alignItems: "center", gap: 16, flexWrap: "wrap", marginTop: 40 }}>
          <MagBtn href={WA_LINK} style={{ background: "var(--paper)", color: "var(--terra)", border: "none" }}>
            <WaIcon size={16} /> Hablar ahora gratis
          </MagBtn>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "oklch(94% 0.008 65 / 0.6)" }}>
            Sin permanencia · Respuesta en &lt;2h · Primeros leads sem. 1
          </span>
        </div>
      </div>
    </section>
  );
}

// ─── FOOTER ────────────────────────────────────────────────────────────
function FooterSection() {
  const year = new Date().getFullYear();
  return (
    <footer className="footer">
      <div className="shell">
        <div className="footer-grid">
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 16 }}>
              <LogoMark size={24} />
              <span style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 16, letterSpacing: "-0.02em" }}>
                Legal<em style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 400, color: "var(--terra)" }}>keting</em>
              </span>
            </div>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 14, color: "var(--ink-3)", lineHeight: 1.65, maxWidth: "36ch" }}>
              Marketing jurídico especializado en despachos de abogados. Leads cualificados desde la primera semana. Sin permanencia.
            </p>
            <div style={{ marginTop: 20 }}>
              <a href={WA_LINK} target="_blank" rel="noopener noreferrer"
                 style={{ display: "inline-flex", alignItems: "center", gap: 8, fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 14, color: "var(--terra)", textDecoration: "none" }}>
                <WaIcon size={15} /> +34 663 28 87 44
              </a>
            </div>
          </div>

          <div>
            <h4>Especialidades</h4>
            <ul>
              {["Ley 2ª Oportunidad", "Derecho bancario", "Hipotecas · IRPH", "Revolving · Tarjetas", "Micropréstamos", "Cobro de deudas", "Accidentes", "Divorcios y Familia"].map(s => (
                <li key={s}>{s}</li>
              ))}
            </ul>
          </div>

          <div>
            <h4>Legalketing</h4>
            <ul>
              {[
                ["Resultados", "#resultados"],
                ["Testimonios", "#testimonios"],
                ["Garantía", "#garantia"],
                ["Quiénes somos", "#joel"],
                ["FAQ", "#faq"],
                ["Contacto", "#contacto"],
              ].map(([label, href]) => (
                <li key={label}><a href={href} style={{ color: "inherit" }}>{label}</a></li>
              ))}
            </ul>
            <div style={{ marginTop: 24 }}>
              <MagBtn href={WA_LINK} variant="terra" size="sm">
                <WaIcon size={13} /> Hablar ahora
              </MagBtn>
            </div>
          </div>
        </div>

        <div className="footer-bottom">
          <span>© {year} Legalketing · Marketing jurídico especializado</span>
          <span>Sin permanencia · Garantía incluida · +50 despachos</span>
        </div>
      </div>
    </footer>
  );
}

// ─── FAB ───────────────────────────────────────────────────────────────
function Fab() {
  const [show, setShow] = useStD(false);
  useEffD(() => {
    const onScroll = () => setShow(window.scrollY > 400);
    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="Contactar por WhatsApp">
      <WaIcon size={22} />
    </a>
  );
}