// Extra sections — GR Digital Studio redesign
const { useState: useState2 } = React;

// -------- ROI CALCULATOR --------
function ROICalc() {
  const [leads, setLeads] = useState2(80);
  const [ticket, setTicket] = useState2(500);
  const [conversionLost, setConversionLost] = useState2(70);

  // Leads perdidos por mes
  const leadsMonth = leads * 4;
  const leadsLost = Math.round(leadsMonth * (conversionLost / 100));
  // Asumimos tasa de cierre del 8% sobre lead cualificado
  const salesLost = Math.round(leadsLost * 0.08);
  const moneyLost = salesLost * ticket;
  const yearLost = moneyLost * 12;

  return (
    <section id="roi">
      <div className="container">
        <div className="section-head">
          <span className="section-num">05</span>
          <div>
            <h2 className="section-title">Cuánto <em>pierdes</em> al mes por no automatizar</h2>
            <p className="section-sub">Mueve los valores según tu negocio. El cálculo es directo: leads no contactados en 5 min caen un 80% en tasa de cierre (HBR, InsideSales).</p>
          </div>
        </div>
        <div className="roi-wrap">
          <div className="roi-inputs">
            <h3>/ Tus números</h3>
            <div className="roi-field">
              <label>Leads nuevos por semana</label>
              <div className="slider-row">
                <input type="range" min="10" max="500" step="5" value={leads} onChange={(e) => setLeads(+e.target.value)} />
                <span className="val">{leads}</span>
              </div>
            </div>
            <div className="roi-field">
              <label>Ticket medio de cliente (€)</label>
              <div className="slider-row">
                <input type="range" min="100" max="10000" step="50" value={ticket} onChange={(e) => setTicket(+e.target.value)} />
                <span className="val">{ticket.toLocaleString('es-ES')}€</span>
              </div>
            </div>
            <div className="roi-field">
              <label>% de leads que no contestas a tiempo</label>
              <div className="slider-row">
                <input type="range" min="20" max="95" step="5" value={conversionLost} onChange={(e) => setConversionLost(+e.target.value)} />
                <span className="val">{conversionLost}%</span>
              </div>
            </div>
          </div>
          <div className="roi-results">
            <h3>/ Dinero que dejas encima de la mesa</h3>
            <div className="tag">CALCULADO EN TIEMPO REAL</div>
            <div className="roi-big">{moneyLost.toLocaleString('es-ES')}<span className="unit">€/mes</span></div>
            <div className="roi-sub">≈ {yearLost.toLocaleString('es-ES')}€ al año que no entran por llegar tarde</div>
            <div className="roi-breakdown">
              <div>Leads/mes: <strong>{leadsMonth}</strong></div>
              <div>Leads enfriados: <strong>{leadsLost}</strong></div>
              <div>Ventas perdidas: <strong>{salesLost}</strong> × {ticket.toLocaleString('es-ES')}€</div>
              <div style={{ marginTop: 14, color: 'var(--phos)' }}>→ Nuestro sistema recupera ~70% de eso en 14 días.</div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// -------- TESTIMONIALS --------
function Testimonials() {
  const items = [
  {
    stars: "★★★★★",
    quote: "En 3 semanas pasamos de responder WhatsApps a mano a tener IA que agenda reuniones sola. El equipo comercial ahora cierra el doble.",
    ini: "CM",
    who: "Founder",
    where: "Agencia de marketing · 8 empleados"
  },
  {
    stars: "★★★★★",
    quote: "Teníamos 4 herramientas que no se hablaban. Ahora todo fluye solo y por primera vez sé de dónde vienen los clientes buenos.",
    ini: "LP",
    who: "Directora de operaciones",
    where: "Consultora de servicios"
  },
  {
    stars: "★★★★★",
    quote: "Lo que me convenció fue que hicieron la primera semana gratis y los resultados ya estaban. No conocía a nadie que trabajara así.",
    ini: "JR",
    who: "CEO",
    where: "Academia online"
  }];


  return (
    <section id="casos">
      <div className="container">
        <div className="section-head">
          <span className="section-num">06</span>
          <div>
            <h2 className="section-title">Lo que dicen <em>nuestros</em> clientes</h2>
            <p className="section-sub">Testimonios anonimizados por acuerdo de confidencialidad. Referencias directas bajo petición.</p>
          </div>
        </div>
        <div className="testi-grid">
          {items.map((t, i) =>
          <div key={i} className="testi-card">
              <div className="testi-stars">{t.stars}</div>
              <p className="testi-quote">"{t.quote}"</p>
              <div className="testi-author">
                <div className="avatar">{t.ini}</div>
                <div>
                  <div className="who">{t.who}</div>
                  <div className="where">{t.where}</div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// -------- LEAD MAGNET --------
function LeadMagnet() {
  const [email, setEmail] = useState2("");
  // status: "idle" | "sending" | "ok" | "error"
  const [status, setStatus] = useState2("idle");

  const submit = async (e) => {
    e.preventDefault();
    if (!email) return;
    setStatus("sending");

    try {
      // 1. Guardar en Supabase
      await supabaseClient.from("leads").insert([{
        email:  email.trim(),
        origen: "leadmagnet-n8n",
        fecha:  new Date().toISOString(),
      }]);

      // 2. Disparar n8n para que envíe la plantilla por correo
      await fetch("https://gr-digital-studio-n8n.4cbvso.easypanel.host/webhook/nuevo-lead", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email: email.trim(), origen: "leadmagnet-n8n" }),
      });

      setStatus("ok");
    } catch (err) {
      console.error("[LeadMagnet] Error:", err);
      setStatus("error");
    }
  };

  return (
    <section id="leadmagnet">
      <div className="container">
        <div className="leadmagnet">
          <div>
            <span className="leadmagnet-badge">↓ PLANTILLA GRATIS · N8N</span>
            <h3>Llévate el workflow exacto que usamos para responder leads en 60s</h3>
            <p>JSON importable en n8n. Incluye: webhook para WhatsApp, llamada a GPT-4, calificación de lead, enrutado a CRM y alerta al equipo. Lo usamos nosotros mismos.</p>
            {status === "ok" ? (
              <div style={{ color: 'var(--phos)', fontFamily: 'var(--mono)', fontSize: '14px' }}>✓ Enviado a {email}. Revisa tu bandeja.</div>
            ) : (
              <>
                <form className="leadmagnet-form" onSubmit={submit}>
                  <input
                    type="email"
                    placeholder="tu@empresa.com"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    required
                  />
                  <button type="submit" className="btn btn-primary" disabled={status === "sending"}>
                    {status === "sending" ? "Enviando…" : "Descargar"}
                  </button>
                </form>
                {status === "error" && (
                  <div style={{ color: 'var(--red)', fontFamily: 'var(--mono)', fontSize: '12px', marginTop: '8px' }}>
                    ✕ Error al enviar. Inténtalo de nuevo.
                  </div>
                )}
              </>
            )}
            <p className="leadmagnet-micro">Sin spam. Te mandamos el archivo y punto.</p>
          </div>
          <div className="leadmagnet-file">
            <div className="leadmagnet-file-head">
              <span className="ext">JSON</span>
              <span>lead-responder-60s.json</span>
            </div>
            <pre>{`{
  "name": "GR · Lead Responder 60s",
  "nodes": [
    { "type": "webhook", "path": "whatsapp" },
    { "type": "openai",
      "model": "gpt-4",
      "prompt": "Califica este lead..." },
    { "type": "switch",
      "rules": ["hot", "warm", "cold"] },
    { "type": "hubspot", "action": "create" },
    { "type": "slack", "channel": "#ventas" }
  ]
}`}</pre>
          </div>
        </div>
      </div>
    </section>);

}

// -------- ABOUT (sin cara) --------
function About() {
  return (
    <section id="sobre">
      <div className="container">
        <div className="section-head">
          <span className="section-num">07</span>
          <div>
            <h2 className="section-title">Un estudio <em>pequeño</em>. Por diseño.</h2>
          </div>
        </div>
        <div className="about">
          <div className="about-mark">
            <img src="assets/logo.png" alt="GR Digital Studio" className="about-logo" />
          </div>
          <div className="about-text">
            <h3>No somos una agencia gigante. Somos un equipo especializado que hace una cosa extraordinariamente bien.</h3>
            <p>
              Solo trabajamos con automatización e IA aplicada a ventas. Nada de diseño web a medida, nada de SEO, nada de community management. Esa hiperespecialización es la razón por la que entregamos sistemas funcionando en 14 días cuando otros tardan 3 meses.
            </p>
            <p>
              Construimos sobre herramientas open-source cuando podemos (n8n, self-hosted). Tu sistema queda en tu infraestructura, con tu API key, y lo puedes mantener incluso sin nosotros. Sin rehenes.
            </p>
            <ul className="about-list">
              <li><span className="lbl">Proyectos entregados</span><span className="val">20+</span></li>
              <li><span className="lbl">Tiempo medio de setup</span><span className="val">14 días</span></li>
              <li><span className="lbl">Clientes activos ahora</span><span className="val">7</span></li>
              <li><span className="lbl">Cupos disponibles / mes</span><span className="val">2 / 3</span></li>
              <li><span className="lbl">Stack principal</span><span className="val">n8n · OpenAI · WhatsApp</span></li>
            </ul>
          </div>
        </div>
      </div>
    </section>);

}

// -------- FINAL CTA --------
function FinalCTA({ tweaks }) {
  const [form, setForm] = useState2({ nombre: "", negocio: "", telefono: "", email: "", mensaje: "" });
  // status: "idle" | "sending" | "ok" | "error"
  const [status, setStatus]   = useState2("idle");
  const [errorMsg, setErrorMsg] = useState2("");

  const handleChange = (e) => setForm({ ...form, [e.target.name]: e.target.value });

  const submit = async (e) => {
    e.preventDefault();
    setErrorMsg("");

    // Validación: nombre obligatorio + al menos teléfono o email
    if (!form.nombre.trim()) {
      setErrorMsg("El nombre es obligatorio.");
      return;
    }
    if (!form.telefono.trim() && !form.email.trim()) {
      setErrorMsg("Introduce al menos un teléfono o un email para poder contactarte.");
      return;
    }

    setStatus("sending");
    const result = await enviarLead(form);

    if (result.ok) {
      setStatus("ok");
    } else {
      setStatus("error");
      setErrorMsg("No pudimos enviar tu solicitud. Inténtalo de nuevo o escríbenos directamente.");
    }
  };

  return (
    <section id="cta-final">
      <div className="container">
        <div className="final-cta">
          <h2>¿Hablamos <em>30 minutos</em>?</h2>
          <p>Te mostramos exactamente qué automatizaríamos en tu negocio y cuánto dinero recuperarías. Sin pitch, sin presión. Si encaja, arrancamos en {tweaks.dias} días con la primera semana gratis.</p>

          {status === "ok" ? (
            <div style={{ color: 'var(--phos)', fontFamily: 'var(--mono)', fontSize: '16px', padding: '24px' }}>
              ✓ Recibido, {form.nombre}. Te escribimos en menos de 24h.
            </div>
          ) : (
            <form className="final-form" onSubmit={submit}>
              <input
                name="nombre"
                placeholder="Tu nombre *"
                value={form.nombre}
                onChange={handleChange}
              />
              <input
                name="negocio"
                placeholder="Tu negocio / empresa"
                value={form.negocio}
                onChange={handleChange}
              />
              <input
                name="telefono"
                type="tel"
                placeholder="Teléfono *"
                value={form.telefono}
                onChange={handleChange}
              />
              <input
                name="email"
                type="email"
                placeholder="Email de trabajo *"
                value={form.email}
                onChange={handleChange}
              />
              <textarea
                name="mensaje"
                placeholder="¿Qué proceso de tu negocio te está quitando más tiempo?"
                value={form.mensaje}
                onChange={handleChange}
              />

              {errorMsg && (
                <div className="final-form-error">✕ {errorMsg}</div>
              )}

              <button
                type="submit"
                className="btn btn-primary btn-lg"
                disabled={status === "sending"}
              >
                {status === "sending" ? "Enviando…" : "Solicitar auditoría gratuita →"}
              </button>
            </form>
          )}

          <div className="final-micro">Te respondemos en menos de 24h hábiles · Sin compromiso · 100% confidencial</div>
        </div>
      </div>
    </section>);
}

// -------- FOOTER --------
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-inner">
          <div className="footer-brand">
            <div className="logo">
              <img src="assets/logo.png" alt="GR Digital Studio" className="logo-img logo-img-lg" />
            </div>
            <p>Automatización e IA para agencias y negocios de servicios que quieren dejar de perder leads por no contestar a tiempo.</p>
          </div>
          <div className="footer-col">
            <h4>Servicios</h4>
            <a href="#servicios">Sistema IA + WhatsApp</a>
            <a href="#servicios">Automatización operaciones</a>
            <a href="#servicios">Embudos con IA</a>
          </div>
          <div className="footer-col">
            <h4>Recursos</h4>
            <a href="#leadmagnet">Plantilla n8n gratis</a>
            <a href="#roi">Calculadora ROI</a>
            <a href="#casos">Casos de éxito</a>
          </div>
          <div className="footer-col">
            <h4>Contacto</h4>
            <a href="mailto:hola@grdigitalstudio.es">info@grdigitalstudio.es</a>
            <a href="#cta-final">Auditoría gratis</a>
            <a href="#">LinkedIn</a>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 GR DIGITAL STUDIO </span>
          <span>Aviso legal · Privacidad · Cookies</span>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { ROICalc, Testimonials, LeadMagnet, About, FinalCTA, Footer });