/* global React */
const { useState, useEffect, useRef } = React;

// ============ HEADLINE OPTIONS ============
const HEADLINES = [
  { hl: "Una comunidad para quienes nunca paran.", sub: "Tú mueves la ciudad. Ahora la ciudad te ve." },
  { hl: "El oficio que mueve a México, ahora tiene su comunidad.", sub: "Conviértete a Gas Natural Vehicular y entra al primer piloto Zagaz." },
  { hl: "Lo que mueves, te mueve.", sub: "Una comunidad construida por y para los transportistas." },
  { hl: "Bienvenido a la comunidad Zagaz.", sub: "200 lugares. Una sola misión: dignificar el oficio del transporte." },
];

const CTA_OPTIONS = [
  "Agendar mi revisión gratis",
  "Quiero entrar a la comunidad",
  "Reservar mi lugar",
  "Empezar mi conversión",
];

// ============ HEADER ============
function Header({ tweaks, onCTA }) {
  return (
    <header className="site-header">
      <div className="wrap">
        <div className="brand">
          <img src="assets/zagaz-logo-white.png" alt="Zagaz" />
        </div>
        <nav className="nav">
          <a href="#comunidad">Comunidad</a>
          <a href="#beneficios">Beneficios</a>
          <a href="#pasos">Cómo funciona</a>
          <a href="#testimonios">Voces</a>
          <button className="nav-cta" onClick={onCTA}>
            {CTA_OPTIONS[tweaks.ctaIndex]}
          </button>
        </nav>
      </div>
    </header>
  );
}

// ============ DECORATIVE NEON LINES ============
function NeonDeco({ variant }) {
  // Inspired by the FB campaign curved arches
  if (variant === "hero") {
    return (
      <div className="neon-bg" aria-hidden="true">
        <svg className="deco-line" style={{ inset: 0, width: '100%', height: '100%' }} viewBox="0 0 1000 700" preserveAspectRatio="none" fill="none">
          <path d="M -20 90 C 160 90, 240 240, 420 220 S 700 80, 880 200 S 1040 360, 1020 460" stroke="#5BB8FF" strokeWidth="1.4" opacity="0.55" vectorEffect="non-scaling-stroke" />
          <path d="M -20 620 C 180 620, 280 480, 460 500 S 740 660, 920 540 S 1020 380, 1020 240" stroke="#5BB8FF" strokeWidth="1.4" opacity="0.35" vectorEffect="non-scaling-stroke" />
          <path d="M -20 360 C 200 360, 320 200, 540 280 S 820 480, 1020 360" stroke="#5BB8FF" strokeWidth="1.2" opacity="0.2" vectorEffect="non-scaling-stroke" />
        </svg>
      </div>
    );
  }
  if (variant === "section") {
    return (
      <div className="neon-bg" aria-hidden="true">
        <svg className="deco-line" style={{ inset: 0, width: '100%', height: '100%' }} viewBox="0 0 1000 700" preserveAspectRatio="none" fill="none">
          <path d="M -20 120 C 180 120, 260 320, 460 320 S 760 140, 1020 240" stroke="#5BB8FF" strokeWidth="1.2" opacity="0.35" vectorEffect="non-scaling-stroke" />
          <path d="M 1020 580 C 820 580, 700 380, 520 460 S 220 640, -20 520" stroke="#5BB8FF" strokeWidth="1.2" opacity="0.25" vectorEffect="non-scaling-stroke" />
        </svg>
      </div>
    );
  }
  if (variant === "section-alt") {
    return (
      <div className="neon-bg" aria-hidden="true">
        <svg className="deco-line" style={{ inset: 0, width: '100%', height: '100%' }} viewBox="0 0 1000 700" preserveAspectRatio="none" fill="none">
          <path d="M -20 220 C 220 220, 320 80, 540 160 S 820 340, 1020 280" stroke="#5BB8FF" strokeWidth="1.2" opacity="0.3" vectorEffect="non-scaling-stroke" />
          <path d="M 1020 480 C 800 480, 680 620, 480 560 S 200 360, -20 440" stroke="#5BB8FF" strokeWidth="1.2" opacity="0.22" vectorEffect="non-scaling-stroke" />
        </svg>
      </div>
    );
  }
  if (variant === "form") {
    return (
      <div className="neon-bg" aria-hidden="true">
        <svg className="deco-line" style={{ inset: 0, width: '100%', height: '100%' }} viewBox="0 0 1000 400" preserveAspectRatio="none" fill="none">
          <path d="M -20 200 C 180 200, 260 60, 460 80 S 760 320, 1020 240" stroke="#5BB8FF" strokeWidth="1.2" opacity="0.3" vectorEffect="non-scaling-stroke" />
          <path d="M -20 320 C 220 320, 320 180, 540 200 S 800 100, 1020 160" stroke="#5BB8FF" strokeWidth="1" opacity="0.18" vectorEffect="non-scaling-stroke" />
        </svg>
      </div>
    );
  }
  return null;
}

// ============ HERO ============
function Hero({ tweaks }) {
  const h = HEADLINES[tweaks.headlineIndex];
  return (
    <section className="hero" id="hero">
      <NeonDeco variant="hero" />
      <div className="wrap" style={{ position: 'relative', zIndex: 1 }}>
        <div className="hero-grid">
          <div className="hero-copy">
            <span className="eyebrow"><span className="dot"></span>Piloto · 200 lugares</span>
            <h1 style={{ marginTop: 22 }}>
              <HeroHeadline text={h.hl} />
            </h1>
            <p className="lead">{h.sub} Conviértete a Gas Natural Vehicular y entra a la primera comunidad construida para los que mueven el país.</p>
            <div className="hero-cta-row">
              <a href="#agendar" className="btn btn-primary">
                {CTA_OPTIONS[tweaks.ctaIndex]} <span className="arrow">→</span>
              </a>
              <a href="#beneficios" className="btn btn-ghost">Ver beneficios</a>
            </div>
            <div className="hero-meta">
              <div><span className="check">✓</span> Revisión gratuita</div>
              <div><span className="check">✓</span> Sin compromiso</div>
              <div><span className="check">✓</span> Cita en 24h</div>
            </div>
          </div>

          <div className="video-col">
            <VideoShell />
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroHeadline({ text }) {
  // Split on first period: first part normal, second part neon-accent gradient.
  const idx = text.indexOf('.');
  if (idx < 0) return <>{text}</>;
  const a = text.slice(0, idx + 1);
  const b = text.slice(idx + 1).trim();
  return (
    <>
      {a}
      {b && <><br /><span className="accent">{b}</span></>}
    </>
  );
}

function VideoShell() {
  return (
    <div className="video-shell">
      <div className="video-tag"><span className="live"></span>Animación · Zagaz Comunidad</div>
      <div className="video-placeholder">
        <button className="play" aria-label="Reproducir">
          <svg width="28" height="28" viewBox="0 0 24 24"><path d="M8 5v14l11-7z" /></svg>
        </button>
        <div className="label">¿Qué es el Gas Natural Vehicular?</div>
        <div className="sublabel">[ video explicativo · pendiente de cargar ]</div>
      </div>
      <div className="video-caption-bar">
        <span>Conoce cómo funciona el GNV en tu unidad</span>
        <span className="duration">02:14</span>
      </div>
    </div>
  );
}

// ============ BENEFITS ============
const TIERS = [
  {
    name: "Día 1",
    sub: "Al activar tu unidad",
    items: [
      { t: "Conversión a GNV", d: "Se paga sola con lo que ya gastas hoy en gasolina. Tu bolsillo no siente la diferencia — pero tu unidad ya es otra." },
      { t: "Garantía de motor", d: "Tu motor convertido queda protegido igual que si lo hiciera el fabricante. Maneja tranquilo." },
      { t: "Historial desde tu primera carga", d: "Cada litro de GNV suma. Tu historial crece con cada carga y con él, tus beneficios." },
      { t: "Comunidad ZAGAZ", d: "Acceso al grupo privado de conductores del piloto en Puerto Vallarta. No estás solo." },
      { t: "Soporte continuo", d: "Alguien responde cuando algo falla. Sin costo adicional, sin quedarte varado sin saber qué hacer." },
      { t: "Capacitación GNV", d: "Todo lo que necesitas saber para que tu equipo dure más y rinda mejor. Desde el primer día." },
    ],
  },
  {
    name: "Mes 3",
    sub: "Tras tu primer trimestre activo",
    items: [
      { t: "Créditos de liquidez", d: "Dinero disponible cuando lo necesitas, respaldado por tu historial en la comunidad." },
      { t: "Créditos para tu unidad", d: "Repotencia tu vehículo sin descapitalizarte. Tu antigüedad en ZAGAZ abre la puerta." },
      { t: "Créditos en combustible", d: "Carga gas y págalo después. Sin interrumpir tu día ni tu ingreso." },
      { t: "Whitelist ZAGAZ", d: "Tu nombre en la lista de candidatos a una unidad 0 km. Solo para quienes mantienen su historial limpio." },
      { t: "Talleres aliados", d: "Acceso preferencial a talleres certificados en Puerto Vallarta. Mantenimiento de confianza, sin buscar." },
      { t: "Eventos de comunidad", d: "Desayunos, mesas de trabajo y encuentros exclusivos. Solo para los que están adentro." },
    ],
  },
  {
    name: "Año 1",
    sub: "Miembros consolidados",
    items: [
      { t: "Ahorro completo", d: "El equipo ya está pagado. Desde aquí, la diferencia entre gasolina y GNV es tuya." },
      { t: "Crédito para tu unidad 0 km", d: "Tu historial en ZAGAZ habla por ti donde el banco no te escucha." },
      { t: "Caja de ahorro", d: "Tu dinero crece con rendimientos preferenciales. Sin bancos, sin trámites." },
      { t: "App ZAGAZ", d: "Todo tu historial, tus beneficios y tu comunidad en un solo lugar. Desde tu celular." },
      { t: "Seguro de vida", d: "Por primera vez, tu familia tiene respaldo si algo te pasa. Lo que el sistema nunca te dio." },
      { t: "Telemedicina", d: "Consultas médicas para ti y tu familia, cuando las necesites. Sin filas, sin costo adicional." },
    ],
  },
];

function Benefits() {
  const [tier, setTier] = useState(0);
  return (
    <section className="section benefits-section" id="beneficios">
      <NeonDeco variant="section" />
      <div className="wrap" style={{ position: 'relative', zIndex: 1 }}>
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>40+ Beneficios</span>
          <h2 className="text-balance">Beneficios que se desbloquean<br />conforme creces con la comunidad.</h2>
          <p>No es una promesa vacía. Es un sistema progresivo: tus kilómetros, tu consumo y tu antigüedad abren puertas reales, desde la garantía de tu motor hasta el crédito para tu próxima unidad nueva, cada etapa del sistema trabaja para ti.</p>
        </div>

        <div className="tier-tabs" role="tablist">
          {TIERS.map((t, i) => (
            <button
              key={i}
              className={"tier-tab" + (tier === i ? " active" : "")}
              onClick={() => setTier(i)}
              role="tab"
              aria-selected={tier === i}
            >
              {i > 0 && tier < i && <span className="lock">🔒</span>}
              {t.name}
            </button>
          ))}
        </div>

        <div className="benefits-grid">
          {TIERS[tier].items.map((b, i) => (
            <div key={i} className="benefit-card">
              <div className="num">{String(i + 1).padStart(2, '0')} · {TIERS[tier].name}</div>
              <h4>{b.t}</h4>
              <p>{b.d}</p>
            </div>
          ))}
        </div>

        <div className="benefits-cta">
          Y más de <strong>40 beneficios</strong> se van activando con tu antigüedad. Sin letra pequeña.
        </div>
      </div>
    </section>
  );
}

// ============ STEPS ============
const STEPS = [
  { n: "01", t: "Agenda tu cita", d: "Llena el formulario. Te llamamos en 24 horas para confirmar fecha y lugar.", micro: "5 min" },
  { n: "02", t: "Revisión gratuita", d: "Diagnosticamos tu unidad sin costo y te decimos si es viable convertirla a GNV.", micro: "Sin costo" },
  { n: "03", t: "Instalación", d: "Conversión profesional con equipo certificado y garantía completa.", micro: "1–2 días" },
  { n: "04", t: "Activa tus beneficios", d: "Recibes tu credencial de la comunidad y desbloqueas los beneficios del Día 1.", micro: "El mismo día" },
];

function Steps() {
  return (
    <section className="section steps-section" id="pasos">
      <NeonDeco variant="section-alt" />
      <div className="wrap" style={{ position: 'relative', zIndex: 1 }}>
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>Cómo funciona</span>
          <h2 className="text-balance">Cuatro pasos para entrar a la comunidad.</h2>
          <p>El proceso es simple, gratuito hasta la revisión, y diseñado para no parar tu jornada de trabajo.</p>
        </div>

        <div className="steps-track">
          {STEPS.map((s, i) => (
            <div key={i} className="step">
              <div className="badge">{s.n}</div>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
              <span className="micro">{s.micro}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ TESTIMONIALS ============
const TESTIMONIALS = [
  {
    q: "Por primera vez siento que alguien construye algo pensando en nosotros, ya era hora.",
    n: "Salvador R.",
    r: "Taxi · Uruapan, Michoacán",
    img: "testimonial-1.png",
  },
  {
    q: "Convertí la combi y bajé el gasto de combustible casi a la mitad. Y eso es solo el primer beneficio.",
    n: "Hugo T.",
    r: "Combi · Escobedo, Nuevo León",
    img: "testimonial-2.png",
  },
  {
    q: "Mi familia ya usó la telemedicina dos veces. Eso solo, ya valió la pena entrar al piloto.",
    n: "Joel V.",
    r: "Bus · Ixtapaluca, Estado de México",
    img: "testimonial-3.png",
  },
];

function Testimonials() {
  return (
    <section className="section testimonials-section" id="testimonios">
      <NeonDeco variant="section" />
      <div className="wrap" style={{ position: 'relative', zIndex: 1 }}>
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>Voces de la comunidad</span>
          <h2 className="text-balance">Transportistas como tú, ya están dentro.</h2>
        </div>

        <div className="testimonials-grid">
          {TESTIMONIALS.map((t, i) => (
            <div key={i} className="testimonial">
              <span className="quote-mark">"</span>
              <blockquote>{t.q}</blockquote>
              <div className="author">
                <div className="avatar">
                  <img src={`assets/${t.img}`} alt={t.n} />
                </div>
                <div className="info">
                  <span className="name">{t.n}</span>
                  <span className="role">{t.r}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ FORM ============
const ZAGAZ_WEBHOOK_URL = "https://pruebas-automatizacion-n8n.2ji6er.easypanel.host/webhook/zagaz-lead";

function CitaForm({ tweaks }) {
  const [data, setData] = useState({
    nombre: "", telefono: "", email: "",
    tipo: "", marca: "", anio: "", ruta: "",
  });
  const [errors, setErrors] = useState({});
  const [sent, setSent] = useState(false);
  const [submitting, setSubmitting] = useState(false);

  const [origen] = useState(() => {
    try {
      const v = new URLSearchParams(window.location.search).get('origen');
      return (v && v.trim()) ? v.trim().toLowerCase() : 'directo';
    } catch (e) {
      return 'directo';
    }
  });

  const set = (k) => (e) => setData({ ...data, [k]: e.target.value });

  const submit = async (e) => {
    e.preventDefault();
    const errs = {};
    if (!data.nombre.trim()) errs.nombre = "Tu nombre completo";
    if (!/^[\d\s+\-()]{8,}$/.test(data.telefono)) errs.telefono = "Teléfono válido (mín. 8 dígitos)";
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) errs.email = "Email válido";
    if (!data.tipo) errs.tipo = "Selecciona un tipo";
    if (!data.marca.trim()) errs.marca = "Marca y modelo";
    if (!/^\d{4}$/.test(data.anio) || +data.anio < 1990 || +data.anio > 2026) errs.anio = "Año (1990–2026)";
    setErrors(errs);
    if (Object.keys(errs).length > 0) return;

    setSubmitting(true);
    try {
      const res = await fetch(ZAGAZ_WEBHOOK_URL, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ ...data, source: "landing", origen }),
      });
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      setSent(true);
    } catch (err) {
      setErrors({ _global: "No pudimos enviar tu solicitud. Verifica tu conexión e inténtalo de nuevo." });
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <section className="section form-section" id="agendar">
      <NeonDeco variant="form" />
      <div className="wrap" style={{ position: 'relative', zIndex: 1 }}>
        <div className="section-head" style={{ marginBottom: 48 }}>
          <span className="eyebrow"><span className="dot"></span>Agenda tu revisión</span>
          <h2 className="text-balance">Reserva tu lugar en el piloto.</h2>
          <p>200 lugares en tu ciudad. La revisión es gratis y sin compromiso. Te llamamos en 24h para coordinar.</p>
        </div>

        <div className="form-wrap">
          <div className="form-side">
            <div>
              <span className="free-tag">Revisión · Gratis</span>
              <h3>Lo que incluye tu cita.</h3>
              <p>Un diagnóstico profesional de tu unidad, sin costo y sin compromiso de conversión.</p>
            </div>
            <div className="checks">
              <div><Check /> Compresión de motor por cilindro</div>
              <div><Check /> Sistema de encendido — bujías, bobinas y cables</div>
              <div><Check /> Sensores de inyección y oxígeno en tiempo real</div>
              <div><Check /> Análisis de gases de escape</div>
              <div><Check /> Sistema de refrigeración completo</div>
            </div>
          </div>

          {sent ? (
            <div className="form-success">
              <div className="check-circle">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M5 12l5 5L20 7" /></svg>
              </div>
              <h3>Estás dentro del piloto.</h3>
              <p>Recibimos tu solicitud, <strong>{data.nombre.split(' ')[0]}</strong>. Te llamaremos al {data.telefono} en las próximas 24 horas para confirmar tu cita de revisión.</p>
            </div>
          ) : (
            <form className="form-fields" onSubmit={submit} noValidate>
              <div className={"field" + (errors.nombre ? " error" : "")}>
                <label>Nombre completo</label>
                <input type="text" placeholder="Ej. Carlos Méndez Ramírez" value={data.nombre} onChange={set('nombre')} />
                {errors.nombre && <span className="err">{errors.nombre}</span>}
              </div>

              <div className="field-row">
                <div className={"field" + (errors.telefono ? " error" : "")}>
                  <label>Teléfono / WhatsApp</label>
                  <input type="tel" placeholder="+52 55 0000 0000" value={data.telefono} onChange={set('telefono')} />
                  {errors.telefono && <span className="err">{errors.telefono}</span>}
                </div>
                <div className={"field" + (errors.email ? " error" : "")}>
                  <label>Email</label>
                  <input type="email" placeholder="tu@correo.com" value={data.email} onChange={set('email')} />
                  {errors.email && <span className="err">{errors.email}</span>}
                </div>
              </div>

              <div className="field-row">
                <div className={"field" + (errors.tipo ? " error" : "")}>
                  <label>Tipo de vehículo</label>
                  <select value={data.tipo} onChange={set('tipo')}>
                    <option value="">Selecciona...</option>
                    <option>Taxi</option>
                    <option>Combi / Van</option>
                    <option>Bus / Microbús</option>
                    <option>Camión de carga</option>
                    <option>Auto particular</option>
                  </select>
                  {errors.tipo && <span className="err">{errors.tipo}</span>}
                </div>
                <div className={"field" + (errors.anio ? " error" : "")}>
                  <label>Año del vehículo</label>
                  <input type="text" inputMode="numeric" placeholder="2018" value={data.anio} onChange={set('anio')} maxLength="4" />
                  {errors.anio && <span className="err">{errors.anio}</span>}
                </div>
              </div>

              <div className={"field" + (errors.marca ? " error" : "")}>
                <label>Marca y modelo</label>
                <input type="text" placeholder="Ej. Nissan Tsuru / Toyota Hiace" value={data.marca} onChange={set('marca')} />
                {errors.marca && <span className="err">{errors.marca}</span>}
              </div>

              <div className="field">
                <label>Ruta u organización (opcional)</label>
                <input type="text" placeholder="Ej. Sitio 32 de Iztapalapa, Ruta 14, etc." value={data.ruta} onChange={set('ruta')} />
              </div>

              {errors._global && (
                <div className="err err-global">{errors._global}</div>
              )}

              <button type="submit" className="btn btn-primary form-submit" disabled={submitting}>
                {submitting ? 'Enviando…' : CTA_OPTIONS[tweaks.ctaIndex]}
                {!submitting && <span className="arrow">→</span>}
              </button>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

function Check() {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12l5 5L20 7" />
    </svg>
  );
}

// ============ FOOTER ============
function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <div className="brand">
              <img src="assets/zagaz-logo-white.png" alt="Zagaz" />
            </div>
            <p className="footer-tag">La comunidad de transportistas que mueven el país, conectada por el Gas Natural Vehicular.</p>
          </div>
          <div className="footer-col">
            <h5>Comunidad</h5>
            <ul>
              <li><a href="#beneficios">Beneficios</a></li>
              <li><a href="#pasos">Cómo funciona</a></li>
              <li><a href="#testimonios">Voces</a></li>
              <li><a href="#agendar">Agendar revisión</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Contacto</h5>
            <ul>
              <li><a href="tel:+5255000000">+52 55 0000 0000</a></li>
              <li><a href="mailto:hola@zagaz.mx">hola@zagaz.mx</a></li>
              <li><a href="#">WhatsApp directo</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Legal</h5>
            <ul>
              <li><a href="#">Aviso de privacidad</a></li>
              <li><a href="#">Términos del piloto</a></li>
              <li><a href="#">Cookies</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Zagaz · Comunidad de transportistas con GNV</span>
          <div className="socials">
            <a href="#" aria-label="Facebook"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M22 12c0-5.5-4.5-10-10-10S2 6.5 2 12c0 5 3.7 9.1 8.4 9.9V14.9H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7c4.7-.8 8.4-4.9 8.4-9.9z"/></svg></a>
            <a href="#" aria-label="Instagram"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg></a>
            <a href="#" aria-label="WhatsApp"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.2-.6.2-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-.3-.1-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.1.2-.3.3-.5.1-.2 0-.4 0-.5l-.8-2c-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.5.1-.7.4-.2.3-.9.9-.9 2.2 0 1.3 1 2.6 1.1 2.7.1.2 1.9 2.9 4.6 4.1.6.3 1.1.4 1.5.5.6.2 1.2.2 1.7.1.5-.1 1.7-.7 1.9-1.4.2-.7.2-1.3.2-1.4-.1-.1-.3-.2-.6-.4z M12 2C6.5 2 2 6.5 2 12c0 1.7.4 3.4 1.3 4.9L2 22l5.3-1.4c1.4.8 3 1.2 4.7 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2z"/></svg></a>
          </div>
        </div>
      </div>
    </footer>
  );
}

// ============ TWEAKS PANEL CONTENT ============
function ZagazTweaks({ tweaks, setTweak }) {
  const { TweaksPanel, TweakSection, TweakSlider, TweakSelect, TweakToggle } = window;
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Headline & Copy" />
      <TweakSelect
        label="Headline"
        value={String(tweaks.headlineIndex)}
        onChange={(v) => setTweak('headlineIndex', +v)}
        options={HEADLINES.map((h, i) => ({ value: String(i), label: `${i + 1}. ${h.hl.slice(0, 28)}…` }))}
      />
      <TweakSelect
        label="CTA del botón"
        value={String(tweaks.ctaIndex)}
        onChange={(v) => setTweak('ctaIndex', +v)}
        options={CTA_OPTIONS.map((c, i) => ({ value: String(i), label: c }))}
      />

      <TweakSection label="Estilo visual" />
      <TweakSlider
        label="Intensidad neón"
        min={0.3} max={1.4} step={0.05}
        value={tweaks.neonIntensity}
        onChange={(v) => setTweak('neonIntensity', +v)}
      />
      <TweakToggle
        label="Modo claro"
        value={tweaks.lightMode}
        onChange={(v) => setTweak('lightMode', v)}
      />

    </TweaksPanel>
  );
}

// ============ APP ============
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headlineIndex": 0,
  "ctaIndex": 0,
  "neonIntensity": 1.0,
  "lightMode": false
}/*EDITMODE-END*/;

function App() {
  const { useTweaks } = window;
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply visual tweaks to root
  useEffect(() => {
    document.documentElement.style.setProperty('--neon-intensity', tweaks.neonIntensity);
    document.body.classList.toggle('light-mode', tweaks.lightMode);
  }, [tweaks.neonIntensity, tweaks.lightMode]);

  const scrollToForm = () => {
    document.getElementById('agendar')?.scrollIntoView ?
      document.querySelector('#agendar').getBoundingClientRect() : null;
    const el = document.getElementById('agendar');
    if (el) window.scrollTo({ top: el.offsetTop - 60, behavior: 'smooth' });
  };

  return (
    <>
      <Header tweaks={tweaks} onCTA={scrollToForm} />
      <main>
        <Hero tweaks={tweaks} />
        <Benefits />
        <Steps />
        <Testimonials />
        <CitaForm tweaks={tweaks} />
      </main>
      <Footer />
      <ZagazTweaks tweaks={tweaks} setTweak={setTweak} />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);