// Core components — GR Digital Studio redesign
const { useState, useEffect, useRef } = React;

// -------- SUPABASE CONFIG --------
// Reemplaza estos dos valores con los de tu proyecto (Dashboard → Settings → API)
const SUPABASE_URL     = "https://uqrqnxfufteznwrfzknq.supabase.co";
const SUPABASE_ANON_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InVxcnFueGZ1ZnRlem53cmZ6a25xIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzcwNjgwOTQsImV4cCI6MjA5MjY0NDA5NH0.7xrmtPuip8KAFQ58WqxU66uqVsHAL3eUG1SAEt7m3uU";

// Cliente singleton — disponible para todos los archivos Babel cargados después
const supabaseClient = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

// -------- enviarLead --------
async function enviarLead(data) {
  const payload = {
    nombre:   (data.nombre   || "").trim(),
    negocio:  (data.negocio  || "").trim(),
    telefono: (data.telefono || "").trim(),
    email:    (data.email    || "").trim(),
    mensaje:  (data.mensaje  || "").trim(),
    origen:   "formulario-web",
    fecha:    new Date().toISOString(),
  };

  // 1. Guardar en Supabase
  const { error } = await supabaseClient.from("leads").insert([payload]);

  if (error) {
    console.error("[enviarLead] Error Supabase:", error);
    return { ok: false, error: error.message };
  }

  // 2. Enviar a n8n
  try {
    await fetch("https://gr-digital-studio-n8n.4cbvso.easypanel.host/webhook/nuevo-lead", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(payload),
    });
  } catch (err) {
    console.error("[enviarLead] Error webhook n8n:", err);
  }

  return { ok: true };
}

// -------- NAV --------
function Nav() {
  const [open, setOpen] = useState(false);
  const close = () => setOpen(false);

  return (
    <nav className="nav">
      <div className="container nav-inner">
        <a href="#top" className="logo" onClick={close}>
          <img src="assets/logo.png" alt="GR Digital Studio" className="logo-img" />
        </a>

        <div className={`nav-links${open ? " nav-links--open" : ""}`}>
          <a href="#servicios" onClick={close}>Servicios</a>
          <a href="#proceso"   onClick={close}>Proceso</a>
          <a href="#roi"       onClick={close}>Calculadora ROI</a>
          <a href="#casos"     onClick={close}>Casos</a>
          <a href="#sobre"     onClick={close}>Sobre</a>
          <a href="#cta-final" onClick={close} className="btn btn-primary btn-sm nav-links-cta">Auditoría gratis</a>
        </div>

        <div className="nav-cta">
          <span className="status-dot">Aceptando 2 clientes / mayo</span>
          <a href="#cta-final" className="btn btn-primary btn-sm">Auditoría gratis</a>
          <button
            className={`nav-burger${open ? " nav-burger--open" : ""}`}
            onClick={() => setOpen(!open)}
            aria-label="Abrir menú"
          >
            <span /><span /><span />
          </button>
        </div>
      </div>
    </nav>);
}

// -------- HERO --------
function Hero({ tweaks }) {
  return (
    <header className="hero" id="top">
      <div className="hero-bg" />
      <div className="container hero-grid">
        <div>
          <span className="hero-eyebrow">Automatización + IA · para agencias y servicios</span>
          <h1>
            Pierdes <em>7 de cada 10 leads</em> porque contestas tarde. Lo arreglamos en {tweaks.dias} días.
          </h1>
          <p className="hero-sub">
            Implantamos un sistema con IA que responde, califica y agenda cada lead en menos de 60 segundos — aunque estés durmiendo, aunque sea domingo, aunque vengan 200 al día.
          </p>
          <div className="hero-ctas">
            <a href="#cta-final" className="btn btn-primary btn-lg">Auditoría gratis · 30 min</a>
            <a href="#roi" className="btn btn-ghost btn-lg">Calcular cuánto pierdes</a>
          </div>
          <div className="hero-trust">
            <span><span className="check">✓</span> Setup en {tweaks.dias} días</span>
            <span><span className="check">✓</span> Primera semana gratis</span>
            <span><span className="check">✓</span> Sin permanencia</span>
          </div>
        </div>
        <ChatbotDemo />
      </div>
    </header>);
}

// -------- CHATBOT DEMO --------
function ChatbotDemo() {
  const script = [
    { role: "bot", text: "Hola 👋 Soy el asistente IA de GR Digital. ¿Qué proceso de tu negocio te está quitando más tiempo?" },
    { role: "user", text: "Respondemos WhatsApps uno a uno, perdemos horas" },
    { role: "bot", text: "Entendido. ¿Cuántos leads nuevos entran a la semana aproximadamente?" },
    { role: "user", text: "Unos 80-100" },
    { role: "bot", text: "Perfecto. Con ese volumen, un 70% de tus leads se está enfriando. Te propongo: IA que responde en 60s + califica + agenda reuniones en tu calendario. ¿Te mando el caso de un cliente parecido?" },
    { role: "user", text: "Sí, envíamelo" },
    { role: "bot", text: "✓ Enviado. También te he reservado un hueco para una auditoría gratuita de 30 min el jueves 17:00. ¿Confirmas?" }
  ];

  const [shown, setShown] = useState([]);
  const [typing, setTyping] = useState(false);
  const bodyRef = useRef(null);

  useEffect(() => {
    let i = 0;
    let cancelled = false;

    const run = () => {
      if (cancelled || i >= script.length) return;
      const msg = script[i];
      const delay = msg.role === "bot" ? 1200 : 900;

      if (msg.role === "bot") {
        setTyping(true);
        setTimeout(() => {
          if (cancelled) return;
          setTyping(false);
          setShown((prev) => [...prev, msg]);
          i++;
          setTimeout(run, delay);
        }, 900);
      } else {
        setShown((prev) => [...prev, msg]);
        i++;
        setTimeout(run, delay);
      }
    };

    const t = setTimeout(run, 600);
    return () => { cancelled = true; clearTimeout(t); };
  }, []);

  useEffect(() => {
    if (bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
  }, [shown, typing]);

  return (
    <div className="chatbot">
      <div className="chatbot-head">
        <div className="chatbot-avatar">G</div>
        <div>
          <div className="chatbot-name">GR · Asistente IA</div>
          <div className="chatbot-status">En línea · responde en &lt;60s</div>
        </div>
      </div>
      <div className="chatbot-body" ref={bodyRef}>
        {shown.map((m, idx) =>
          <div key={idx} className={`chat-msg ${m.role}`}>{m.text}</div>
        )}
        {typing &&
          <div className="chat-msg typing">
            <span></span><span></span><span></span>
          </div>
        }
      </div>
      <div className="chatbot-caption">● Demo en vivo — este es el chatbot que montamos para ti</div>
    </div>);
}

// -------- LOGOS STRIP --------
function LogosStrip() {
  const items = ["n8n", "Make", "HubSpot", "OpenAI", "WhatsApp API", "Zapier", "Airtable", "Stripe"];
  return (
    <div className="logos-strip">
      <div className="container">
        <div className="logos-head">Construimos encima del stack que ya usas</div>
        <div className="logos-row">
          {items.map((i) => <div key={i} className="logo-item">{`{ ${i} }`}</div>)}
        </div>
      </div>
    </div>);
}

// -------- SERVICES --------
function Services() {
  const services = [
    {
      num: "01 / Flagship",
      title: "Sistema IA + WhatsApp + CRM",
      desc: "Monto el stack completo en 14 días: chatbot IA que responde y califica, integración con tu CRM, flujos de seguimiento por WhatsApp y métricas en un dashboard.",
      tags: ["n8n", "OpenAI", "WhatsApp API", "HubSpot"]
    },
    {
      num: "02 / Process",
      title: "Automatización de operaciones",
      desc: "Conecto las herramientas que ya tienes para eliminar trabajo manual: onboarding, facturación, reporting, generación de propuestas con IA.",
      tags: ["Make", "Airtable", "Notion", "Zapier"]
    },
    {
      num: "03 / Growth",
      title: "Embudos de captación con IA",
      desc: "Diseño landings, secuencias de email y lead magnets que capturan y nutren leads de forma autónoma. Integrado con tu analítica.",
      tags: ["Landing", "Email AI", "Analytics", "Ads"]
    }
  ];

  return (
    <section id="servicios">
      <div className="container">
        <div className="section-head">
          <span className="section-num">02</span>
          <div>
            <h2 className="section-title">Qué <em>hacemos</em> por ti</h2>
            <p className="section-sub">Tres sistemas que funcionan por separado o integrados. Todos orientados a una única métrica: leads que se convierten solos.</p>
          </div>
        </div>
        <div className="services-grid">
          {services.map((s) =>
            <div key={s.num} className="service-card">
              <div>
                <div className="service-num">{s.num}</div>
                <h3 className="service-title">{s.title}</h3>
                <p className="service-desc">{s.desc}</p>
                <div className="service-tags">
                  {s.tags.map((t) => <span key={t} className="service-tag">{t}</span>)}
                </div>
              </div>
              <div className="service-arrow">↗</div>
            </div>
          )}
        </div>
      </div>
    </section>);
}

// -------- PROCESS --------
function Process({ tweaks }) {
  const steps = [
    { day: `Día 01`, title: "Auditoría", desc: "Analizamos procesos, herramientas y fugas actuales. Sin compromiso, 30 minutos." },
    { day: `Día 02–04`, title: "Estrategia", desc: "Diseñamos flujos, integraciones y métricas. Te mandamos el blueprint antes de tocar código." },
    { day: `Día 05–12`, title: "Implementación", desc: "Construimos, integramos y testeamos. Tú ves el progreso cada 48h en un dashboard privado." },
    { day: `Día 13–14`, title: "Lanzamiento", desc: "Arranca el sistema con tu primera semana gratuita. Ajustamos sobre datos reales." }
  ];

  return (
    <section id="proceso">
      <div className="container">
        <div className="section-head">
          <span className="section-num">03</span>
          <div>
            <h2 className="section-title">De 0 a automatizado en <em>{tweaks.dias} días</em></h2>
            <p className="section-sub">Un proceso medible, con deadline y con tu primera semana de prueba gratuita. Si no hay resultados, no hay factura.</p>
          </div>
        </div>
        <div className="process">
          {steps.map((s) =>
            <div key={s.day} className="process-step">
              <div className="process-day">{s.day}</div>
              <h3 className="process-title">{s.title}</h3>
              <p className="process-desc">{s.desc}</p>
            </div>
          )}
        </div>
      </div>
    </section>);
}

// -------- COMPARE BEFORE/AFTER --------
function Compare() {
  const before = [
    "Contestas leads a las 4 horas. Un 70% ya se enfrió.",
    "Tu equipo pierde 2-3h/día copiando datos entre herramientas.",
    "No sabes qué canal te trae mejores clientes.",
    "Los domingos y festivos tu web no trabaja.",
    "Cada propuesta cuesta 45 minutos hacerla.",
    "Las tareas repetitivas las hace una persona cara."
  ];

  const after = [
    "IA responde en menos de 60 segundos, 24/7, con tu tono.",
    "Los datos fluyen automáticos entre CRM, WhatsApp y calendario.",
    "Dashboard único con ROI por canal, en tiempo real.",
    "Tu sistema vende mientras duermes. Literalmente.",
    "Propuestas generadas en 90 segundos con IA + tu plantilla.",
    "Tu equipo se dedica a cerrar, no a operar."
  ];

  return (
    <section id="compare">
      <div className="container">
        <div className="section-head">
          <span className="section-num">04</span>
          <div>
            <h2 className="section-title">Antes vs <em>después</em></h2>
            <p className="section-sub">Lo que cambia exactamente en tu día a día cuando el sistema está en marcha.</p>
          </div>
        </div>
        <div className="compare-grid">
          <div className="compare-col before">
            <span className="compare-tag">● Sin nosotros</span>
            <h3>Hoy</h3>
            {before.map((t, i) =>
              <div key={i} className="compare-item">
                <span className="ico">✕</span>
                <span className="txt">{t}</span>
              </div>
            )}
          </div>
          <div className="compare-col after">
            <span className="compare-tag">● Con GR Digital</span>
            <h3>En 14 días</h3>
            {after.map((t, i) =>
              <div key={i} className="compare-item">
                <span className="ico">✓</span>
                <span className="txt">{t}</span>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);
}

// -------- STATS STRIP --------
function Stats() {
  const stats = [
    { big: "<60s", lbl: "Tiempo de respuesta IA" },
    { big: "14 días", lbl: "De 0 a sistema en marcha" },
    { big: "24/7", lbl: "Sin festivos, sin descansos" },
    { big: "+3.2x", lbl: "Leads cualificados vs manual" }
  ];

  return (
    <div className="container">
      <div className="stats-strip">
        {stats.map((s) =>
          <div key={s.lbl} className="stat">
            <div className="big">{s.big}</div>
            <div className="lbl">{s.lbl}</div>
          </div>
        )}
      </div>
    </div>);
}

Object.assign(window, { Nav, Hero, ChatbotDemo, LogosStrip, Services, Process, Compare, Stats });