/* global React */
const { useState: useState3 } = React;

function Pricing() {
  const entry = [
    { code: "SC/E1", name: "Diagnóstico Rayo", price: "$50.000", desc: "Antes de invertir un peso, sabé si tu negocio puede crecer con esto. Reunión 45 min + PDF a 90 días.", credit: "$50.000 cuentan como crédito al Plan Completo." },
    { code: "SC/E2", name: "Landing Básica", price: "$170.000", desc: "Web profesional, simple y lista en 72hs. Mobile-first con WhatsApp integrado.", credit: "$170.000 al Plan Completo." },
    { code: "SC/E3", name: "Landing Pro", price: "$350.000", desc: "Página que convierte visitas en consultas reales. Diseño + textos + seguimiento. Activa en 7 días.", credit: "Crédito $245.000 al Plan Completo." },
    { code: "SC/E4", name: "Brand Kit", price: "$250.000", desc: "Identidad visual lista. Logo, paleta, tipografías y plantillas. Auditoría a los 14 días.", credit: "Crédito $125.000 al Plan Completo." },
    { code: "SC/E5", name: "Secretario IA", price: "$180.000", desc: "Atiende por vos 30 días y te entrega la radiografía operativa. La mejor del año.", credit: "Crédito $144.000 al Plan Completo." },
  ];
  return (
    <section id="planes">
      <div className="container">
        <div className="surface" data-reveal>
          <div className="sec-head-2">
            <span className="eyebrow"><span className="dot"></span> 06 · Planes</span>
            <h2>Invertí en un sistema, no en <em>suerte.</em></h2>
            <p>Cinco productos de entrada para arrancar, dos planes recurrentes para escalar. La publicidad se paga directo a Meta — nunca pasa por nosotros.</p>
          </div>

          <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:"0.12em", textTransform:"uppercase", color:"var(--ink-mute)", marginBottom:16}}>
            ◆ Productos de entrada · pago único con crédito
          </div>
          <div className="entry-grid-2">
            {entry.map((e, i) => (
              <div key={i} className="entry-card-2" data-reveal data-reveal-delay={(i%5)+1}>
                <div className="ec-code">{e.code}</div>
                <h3>{e.name.split(" ").slice(0,-1).join(" ")} <em>{e.name.split(" ").slice(-1)}</em></h3>
                <p>{e.desc}</p>
                <div>
                  <div className="ec-price">{e.price}</div>
                  <div className="ec-once">Pago único</div>
                </div>
                <div className="ec-credit">{e.credit}</div>
                <a href="#contacto" className="ec-link">Lo quiero <span>→</span></a>
              </div>
            ))}
          </div>

          <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:"0.12em", textTransform:"uppercase", color:"var(--ink-mute)", margin:"56px 0 16px"}}>
            ◆ Planes recurrentes · el sistema funcionando
          </div>
          <div className="recurring-grid-2">
            <div className="plan-card-2 completo-2" data-reveal data-reveal-delay="1">
              <span className="recommend-2">★ Recomendado</span>
              <div>
                <div className="pc-code">SC/01</div>
                <div className="pc-name">Completo</div>
                <div className="pc-tag" style={{marginTop:8}}>Para escalar</div>
              </div>
              <p className="pc-desc">El sistema real funcionando. Para negocios que ya facturan y quieren escalar con predictibilidad.</p>
              <div className="pc-prices">
                <div><span className="pp-label">Gestión</span><span className="pp-value">$280k/mes</span></div>
                <div><span className="pp-label">Setup</span><span className="pp-value">$420k</span></div>
                <div><span className="pp-label">Ads</span><span className="pp-value">$210–420k</span></div>
              </div>
              <div className="pc-features">
                <div className="pf-row"><span className="check">✓</span><span><strong>Hasta 3 campañas</strong> simultáneas + A/B</span></div>
                <div className="pf-row"><span className="check">✓</span><span>Landing <strong>multi-sección</strong> + prueba social</span></div>
                <div className="pf-row"><span className="check">✓</span><span>WhatsApp plantillas + auto-respuestas</span></div>
                <div className="pf-row"><span className="check">✓</span><span>Dashboard de leads en <strong>tiempo real</strong></span></div>
                <div className="pf-row"><span className="check">✓</span><span>Reunión <strong>quincenal</strong> de optimización</span></div>
                <div className="pf-row"><span className="check">✓</span><span>Soporte WhatsApp · 24h</span></div>
              </div>
              <a href="#contacto" className="btn pc-cta">Elegir Completo <span className="arrow">→</span></a>
            </div>

            <div className="plan-card-2 socio-2" data-reveal data-reveal-delay="2">
              <div>
                <div className="pc-code">SC/02</div>
                <div className="pc-name">Socio</div>
                <div className="pc-tag" style={{marginTop:8}}>Para dominar</div>
              </div>
              <p className="pc-desc">Trabajamos como tu equipo de marketing. Para negocios con volumen alto que quieren dominar su rubro.</p>
              <div className="pc-prices">
                <div><span className="pp-label">Gestión</span><span className="pp-value">$700k/mes</span></div>
                <div><span className="pp-label">Setup</span><span className="pp-value">$700k</span></div>
                <div><span className="pp-label">Ads</span><span className="pp-value">$420–700k</span></div>
              </div>
              <div className="pc-features">
                <div className="pf-row"><span className="check">✓</span><span><strong>Campañas ilimitadas</strong> en Meta</span></div>
                <div className="pf-row"><span className="check">✓</span><span>Landing <strong>avanzada</strong> + video</span></div>
                <div className="pf-row"><span className="check">✓</span><span>Automatización CRM + lead scoring</span></div>
                <div className="pf-row"><span className="check">✓</span><span>Dashboard en vivo + alertas</span></div>
                <div className="pf-row"><span className="check">✓</span><span>Reunión <strong>semanal 1:1</strong></span></div>
                <div className="pf-row"><span className="check">✓</span><span>Producción <strong>completa</strong> de creativos</span></div>
                <div className="pf-row"><span className="check">✓</span><span>Soporte prioritario · &lt;2h</span></div>
              </div>
              <a href="#contacto" className="btn btn-ghost pc-cta">Hablar Socio <span className="arrow">→</span></a>
            </div>
          </div>
        </div>

        <div className="spacer"></div>
        <div className="guarantee-marquee-2">
          <div className="marquee-strip-inner">
            {[...Array(2)].flatMap((_,k) => [
              "Garantía · 30 días · 10 consultas",
              "Resultado o seguimos sin cobrar",
              "Sin letra chica · Sin condiciones",
              "Tu riesgo es cero · El nuestro es real"
            ].map((it,i) => (
              <span key={`g-${k}-${i}`} className="marquee-strip-item">
                {it} <span className="star">✦</span>
              </span>
            )))}
          </div>
        </div>
      </div>
    </section>
  );
}

function CaseStudy() {
  return (
    <section id="caso">
      <div className="container">
        <div className="case-2" data-reveal>
          <div className="case-text-2">
            <span className="eyebrow" style={{alignSelf:"flex-start"}}><span className="dot"></span> 07 · Caso 2025</span>
            <h2>Hannah <em>Lingerie.</em></h2>
            <div className="case-tags-2">
              <span className="case-tag-2">E-commerce</span>
              <span className="case-tag-2">Mayorista</span>
              <span className="case-tag-2">Plan Completo</span>
              <span className="case-tag-2">Cliente activa</span>
            </div>
            <p>Tienda de lencería con venta mayorista. Llegaron con buen producto, ventas inconsistentes y poca estructura digital. Armamos campañas Meta enfocadas en conversiones web, optimización quincenal del pixel y atención por WhatsApp para el carrito caliente.</p>
            <blockquote>"Pasamos de vender de a gotitas a tener pedidos entrando todos los días por la tienda online."</blockquote>
            <div className="quote-author"><strong>Hannah</strong> · Fundadora, Hannah Lingerie</div>
          </div>

          <div className="case-dashboard-2">
            <div className="cd-head-2">
              <span>META ADS · HANNAH LINGERIE</span>
              <span className="live">EN CURSO</span>
            </div>
            <div className="cd-stats-2">
              <div className="cd-stat-2"><div className="cs-label">Ventas / mes</div><div className="cs-value">+50</div><div className="cs-trend">↑ creciendo</div></div>
              <div className="cd-stat-2"><div className="cs-label">Costo / venta</div><div className="cs-value">$5.800</div><div className="cs-trend">↓ optimizado</div></div>
              <div className="cd-stat-2"><div className="cs-label">Ticket prom.</div><div className="cs-value">$56k</div><div className="cs-trend">e-commerce</div></div>
              <div className="cd-stat-2"><div className="cs-label">ROAS</div><div className="cs-value accent">9,6×</div><div className="cs-trend">consistente</div></div>
            </div>
            <div className="cd-chart-2">
              <div className="cc-title">Evolución · Últimos 90 días</div>
              <svg viewBox="0 0 300 80" preserveAspectRatio="none">
                <defs>
                  <linearGradient id="cg1" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.4" />
                    <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" />
                  </linearGradient>
                </defs>
                <path d="M0,70 L30,68 L60,62 L90,55 L120,42 L150,38 L180,28 L210,20 L240,15 L270,10 L300,8 L300,80 L0,80 Z" fill="url(#cg1)" />
                <path d="M0,70 L30,68 L60,62 L90,55 L120,42 L150,38 L180,28 L210,20 L240,15 L270,10 L300,8" stroke="var(--accent)" strokeWidth="2" fill="none" />
              </svg>
            </div>
            <div style={{fontFamily:"var(--mono)", fontSize:9, letterSpacing:"0.06em", color:"var(--ink-mute)", textTransform:"uppercase"}}>
              ◆ Vista real del Ads Manager · nombres anonimizados con permiso del cliente
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  const items = [
    { stars: "★★★★★", quote: "En 60 días dejé de depender de los referidos. Ahora tengo agenda llena tres semanas adelante.", name: "Lucía R.", meta: "Estética · Córdoba" },
    { stars: "★★★★★", quote: "Pensé que iba a ser otra agencia que vende humo. El primer mes ya recuperé la inversión 4x.", name: "Diego A.", meta: "Inmobiliaria · Nueva CBA" },
    { stars: "★★★★★", quote: "Lo mejor: no tengo que entender de marketing. Ellos lo hacen, yo atiendo a la gente que llega.", name: "Sofía B.", meta: "Indumentaria · CBA" },
  ];
  return (
    <section id="testimonios">
      <div className="container">
        <div className="surface" data-reveal>
          <div className="sec-head-2">
            <span className="eyebrow"><span className="dot"></span> 08 · Testimonios</span>
            <h2>Negocios que dejaron <em>la lotería.</em></h2>
            <p>Sin actores, sin guion. Tres clientes que arrancaron en 2025 y siguen con nosotros.</p>
          </div>
          <div className="testi-grid-2">
            {[...items, ...items].map((t, i) => (
              <div key={`t-${i}`} className="testi-card-2" aria-hidden={i >= items.length ? "true" : undefined}>
                <div className="stars">{t.stars}</div>
                <div className="quote">"{t.quote}"</div>
                <div className="author">
                  <div className="avatar">{t.name[0]}</div>
                  <div>
                    <div className="a-name">{t.name}</div>
                    <div className="a-meta">{t.meta}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const [openIdx, setOpenIdx] = useState3(0);
  const items = [
    { q: "¿En cuánto tiempo empiezan a llegar clientes nuevos?", a: "La implementación toma entre 7 y 14 días (landing, setup de campañas, WhatsApp). A partir del día que encendemos Meta Ads empezás a recibir leads. Los primeros 2–3 días son de calibración — después la máquina pisa el acelerador." },
    { q: "¿El presupuesto de publicidad es aparte del plan?", a: "Sí. El fee mensual es nuestro trabajo. La inversión en ads la cargás en tu propia cuenta de Meta Business Manager — tu tarjeta, tu factura. No cobramos recargo ni comisión sobre ese monto. Jamás." },
    { q: "¿Sirve para mi rubro?", a: "Funciona muy bien para negocios locales con venta consultiva: estética, salud, kinesiología, inmobiliarias, gastronomía, indumentaria, servicios profesionales." },
    { q: "¿Qué pasa si no me gustan los resultados?", a: "Sin permanencia: cancelás el mes que quieras. Garantía de 30 días: si no lograste al menos 10 consultas reales, seguimos trabajando sin cobrar fee hasta que llegues." },
    { q: "¿Tengo que dar acceso a mis cuentas? ¿Es seguro?", a: "Trabajamos como administradores desde Meta Business Manager — no pedimos contraseñas. Si dejamos de trabajar juntos, se revoca el acceso y vos te quedás con todo." },
    { q: "¿Trabajan solo en Córdoba?", a: "Estamos en Córdoba Capital pero trabajamos con negocios de toda Argentina. La operación es 100% remota por Meet y WhatsApp." },
    { q: "¿Cómo sé cuál plan me corresponde?", a: "Si nunca probaste ads en serio, lo mejor es el Diagnóstico Rayo ($50.000). Si ya sabés que sí, el Plan Completo. El Plan Socio es para negocios con volumen alto." },
  ];
  return (
    <section id="faq">
      <div className="container">
        <div className="surface" data-reveal>
          <div className="sec-head-2">
            <span className="eyebrow"><span className="dot"></span> 09 · Preguntas frecuentes</span>
            <h2>Lo que seguro <em>querés preguntar.</em></h2>
            <p>Las dudas reales que recibimos. Si la tuya no está acá, escribinos por WhatsApp: respondemos en minutos.</p>
          </div>

          <div className="faq-list-2">
            {items.map((it, i) => (
              <div key={i} className={`faq-item-2 ${openIdx === i ? "open" : ""}`}>
                <button className="faq-q-2" onClick={() => setOpenIdx(openIdx === i ? -1 : i)}>
                  <span className="faq-num">{String(i+1).padStart(2, "0")}</span>
                  <span>{it.q}</span>
                  <span className="faq-icon">+</span>
                </button>
                <div className="faq-a-2"><div><p>{it.a}</p></div></div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Contact() {
  const [submitted, setSubmitted] = useState3(false);
  // FormSubmit.co envía el form a tu mail sin backend.
  // Se activa al primer submit — recibirás un mail de confirmación una sola vez.
  const FORM_ENDPOINT = "https://formsubmit.co/necsispe@gmail.com";
  const WA_LINK = "https://wa.me/5493518692782?text=Hola!%20Vengo%20de%20la%20web,%20quiero%20agendar%20una%20consultor%C3%ADa%20de%20Sistema%20de%20Clientes.";

  const submit = (e) => {
    // Permite que el form se envíe normal a FormSubmit (no e.preventDefault)
    // pero seteamos submitted=true para mostrar UI de éxito mientras tanto.
    // Si querés evitar redirect, FormSubmit acepta _next param para volver.
    setSubmitted(true);
  };
  return (
    <section id="contacto">
      <div className="container">
        <div className="cta-2" data-reveal>
          <div className="cta-grid-2">
            <div>
              <span className="eyebrow" style={{background:"rgba(15,12,8,0.1)", borderColor:"rgba(15,12,8,0.15)", color:"rgba(15,12,8,0.7)"}}>
                <span className="dot" style={{background:"var(--bg)"}}></span> 10 · Empezar
              </span>
              <h2 style={{marginTop:24}}>Hablemos de tu próximo <em>cliente.</em></h2>
              <p className="cta-lead">Una consultoría de 30 minutos. Revisamos tu negocio, tu competencia y si el sistema te sirve. Si no es para vos, te lo decimos. Sin vueltas.</p>

              {/* CTA WhatsApp directo — para los que prefieren no llenar form */}
              <a href={WA_LINK} target="_blank" rel="noopener" className="cta-wa-direct">
                <span className="cta-wa-icon">
                  <svg viewBox="0 0 24 24" fill="currentColor" width="22" height="22"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg>
                </span>
                <span className="cta-wa-text">
                  <strong>WhatsApp directo</strong>
                  <span>Si preferís no llenar form, escribinos ya</span>
                </span>
                <span className="cta-wa-arrow">→</span>
              </a>

              <div className="cta-features-2">
                <div className="cta-feat-2"><span className="cf-tag">30 MIN</span><span className="cf-text">Consultoría gratuita por Google Meet.</span></div>
                <div className="cta-feat-2"><span className="cf-tag">&lt; 24 HS</span><span className="cf-text">Respondemos por WhatsApp en menos de 24 horas.</span></div>
                <div className="cta-feat-2"><span className="cf-tag">CBA</span><span className="cf-text">Trabajamos con toda Argentina, oficina en Córdoba.</span></div>
              </div>
            </div>

            <form className="cta-form-2" action={FORM_ENDPOINT} method="POST" onSubmit={submit}>
              {/* FormSubmit config */}
              <input type="hidden" name="_subject" value="Nueva consulta desde la web — Sistema de Clientes" />
              <input type="hidden" name="_template" value="table" />
              <input type="hidden" name="_captcha" value="true" />
              <input type="hidden" name="_next" value="https://sistemadeclientes.pages.dev/?ok=1" />

              {!submitted ? <>
                <div className="form-head">
                  <span className="fh-title">Solicitar consultoría</span>
                  <span className="cupos">CUPOS · 3</span>
                </div>
                <div className="form-row">
                  <label><span>Nombre</span><input required type="text" name="nombre" /></label>
                  <label><span>Email</span><input required type="email" name="email" /></label>
                </div>
                <div className="form-row">
                  <label><span>WhatsApp</span><input required type="tel" name="whatsapp" /></label>
                  <label><span>Negocio</span><input required type="text" name="negocio" /></label>
                </div>
                <label><span>Rubro</span>
                  <select required name="rubro" defaultValue=""><option value="" disabled>Seleccionar…</option><option>Gastronomía</option><option>Retail / Indumentaria</option><option>Estética / Salud</option><option>Inmobiliaria</option><option>Servicios profesionales</option><option>E-commerce</option><option>Otro</option></select>
                </label>
                <label><span>Plan de interés</span>
                  <select name="plan" defaultValue="Aún no sé"><option>Diagnóstico · $50k</option><option>Landing Básica · $170k</option><option>Landing Pro · $350k</option><option>Brand Kit · $250k</option><option>Secretario IA · $180k</option><option>Completo · $280k/mes</option><option>Socio · $700k/mes</option><option>Aún no sé</option></select>
                </label>
                <label><span>Contame tu situación</span><textarea rows={3} name="situacion"></textarea></label>
                <button type="submit">Agendar consultoría →</button>
              </> : <div className="submitted">
                <div className="check-circle">✓</div>
                <h4>Recibimos tu pedido.</h4>
                <p>Te escribimos por WhatsApp en menos de 24 hs.</p>
              </div>}
            </form>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer>
      <div className="container">
        <div className="foot-inner">
          <div className="foot-grid-2">
            <div className="foot-brand">
              <div className="brand-block">
                <svg className="brand-mark brand-mark-lg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" aria-label="Sistema de Clientes">
                  <path d="M 85.355 14.645 A 50 50 0 1 0 85.355 85.355 L 74.749 74.749 A 35 35 0 1 1 74.749 25.251 Z" fill="currentColor"/>
                  <path d="M 68 34 C 68 28, 60 24, 50 24 C 40 24, 32 28, 32 34 C 32 40, 38 48, 50 50 C 62 52, 68 60, 68 66 C 68 72, 60 76, 50 76 C 40 76, 32 72, 32 66" fill="none" stroke="var(--accent)" strokeWidth="6" strokeLinecap="butt"/>
                </svg>
                <div style={{fontFamily:"var(--mono)", fontSize:11, letterSpacing:"0.08em", textTransform:"uppercase", color:"var(--ink)"}}>Sistema de Clientes / CBA</div>
              </div>
              <p>Agencia de adquisición para negocios locales. Meta Ads + Página web + WhatsApp. Desde Córdoba, para toda Argentina.</p>
            </div>
            <div>
              <h5>Navegar</h5>
              <ul>
                <li><a href="#sistema">Sistema</a></li>
                <li><a href="#planes">Planes</a></li>
                <li><a href="#caso">Caso Hannah</a></li>
                <li><a href="#faq">FAQ</a></li>
              </ul>
            </div>
            <div>
              <h5>Contacto</h5>
              <ul>
                <li><a href="mailto:necsispe@gmail.com">necsispe@gmail.com</a></li>
                <li><a href="https://wa.me/5493518692782">+54 9 3518 69-2782</a></li>
                <li>Córdoba, Argentina</li>
              </ul>
            </div>
            <div>
              <h5>Redes</h5>
              <ul>
                <li><a href="https://www.instagram.com/sistemadeclientes/" target="_blank" rel="noopener">Instagram · @sistemadeclientes</a></li>
              </ul>
            </div>
          </div>
          <div className="foot-bottom">
            <span>© 2026 Sistema de Clientes</span>
            <span>Hecho en Córdoba · AR · V.05.26</span>
          </div>
          <div className="foot-massive">SISTEMA</div>
        </div>
      </div>
    </footer>
  );
}

/* ==========================================================================
   QUIZ — Mini-quiz 3 preguntas para calificar lead + recomendar plan
   ========================================================================== */
function Quiz() {
  const [current, setCurrent] = useState3(0);
  const [score, setScore] = useState3(0);
  const [showResult, setShowResult] = useState3(false);

  const questions = [
    {
      n: "01", total: "03",
      q: "¿Ya tenés <em>ventas</em> por el canal que sea?",
      opts: [
        { k: "A", text: "Sí, vendo regularmente pero quiero escalar", pts: 4 },
        { k: "B", text: "Vendo pero de forma muy irregular", pts: 2 },
        { k: "C", text: "Todavía no tengo ventas estables", pts: 0 },
      ],
    },
    {
      n: "02", total: "03",
      q: "¿Cuánto podés <em>invertir</em> en publicidad por mes?",
      opts: [
        { k: "A", text: "Más de $420.000 ARS sin problema", pts: 4 },
        { k: "B", text: "Entre $210.000 y $420.000 ARS", pts: 3 },
        { k: "C", text: "Menos de $210.000 ARS", pts: 1 },
      ],
    },
    {
      n: "03", total: "03",
      q: "¿Atendés <em>rápido</em> por WhatsApp?",
      opts: [
        { k: "A", text: "Sí, respondo en minutos durante el día", pts: 3 },
        { k: "B", text: "Respondo en horas, depende del día", pts: 2 },
        { k: "C", text: "A veces tardo 1 o 2 días", pts: 0 },
      ],
    },
  ];

  const WA_BASE = "https://wa.me/5493518692782?text=";

  const getResult = () => {
    if (score >= 8) {
      return {
        tier: "ready",
        title: "Tu negocio está <em>listo</em> para escalar.",
        desc: "Tenés todo lo que necesitás: producto validado, capacidad de invertir y respuesta rápida. El Plan Completo está hecho para vos.",
        cta: "Quiero el Plan Completo",
        href: "#planes",
        waMsg: "Hola!%20Hice%20el%20quiz%20y%20me%20dio%20que%20mi%20negocio%20est%C3%A1%20listo%20para%20escalar.%20Quiero%20arrancar%20con%20el%20Plan%20Completo.",
      };
    }
    if (score >= 5) {
      return {
        tier: "almost",
        title: "Estás <em>a un paso</em>.",
        desc: "Tu base es sólida pero hay piezas sueltas. Te recomendamos empezar con un Diagnóstico Rayo antes de meterte en el plan recurrente.",
        cta: "Empezar con Diagnóstico Rayo",
        href: "#planes",
        waMsg: "Hola!%20Hice%20el%20quiz%20y%20me%20recomienda%20empezar%20con%20el%20Diagn%C3%B3stico%20Rayo.%20Quiero%20saber%20m%C3%A1s.",
      };
    }
    return {
      tier: "early",
      title: "Primero <em>ordenemos</em> la base.",
      desc: "Hay algunas piezas para validar antes de invertir en publicidad. Hagamos una consultoría gratuita y vemos juntos por dónde arrancar.",
      cta: "Agendar consultoría gratis",
      href: "#contacto",
      waMsg: "Hola!%20Hice%20el%20quiz%20y%20me%20recomienda%20una%20consultor%C3%ADa%20gratis%20primero.%20Quiero%20agendarla.",
    };
  };

  const handleSelect = (pts) => {
    const newScore = score + pts;
    setScore(newScore);
    if (current < questions.length - 1) {
      setCurrent(current + 1);
    } else {
      setShowResult(true);
    }
  };

  const reset = (e) => {
    e.preventDefault();
    setCurrent(0);
    setScore(0);
    setShowResult(false);
  };

  const result = showResult ? getResult() : null;

  return (
    <section id="quiz">
      <div className="container">
        <div className="surface quiz-surface" data-reveal>
          <div className="sec-orb so1 small"></div>
          <div className="sec-orb so2 small"></div>

          <div className="sec-head-2">
            <span className="eyebrow"><span className="dot"></span> 08 · Mini-quiz</span>
            <h2>¿Tu negocio está <em>listo</em>?</h2>
            <p>3 preguntas, 30 segundos. Te decimos si te conviene arrancar y por qué producto.</p>
          </div>

          <div className="quiz-card">
            {/* Progress dots */}
            <div className="quiz-progress">
              {questions.map((_, i) => (
                <div
                  key={i}
                  className={`qp-dot ${i < current || showResult ? "done" : ""} ${i === current && !showResult ? "active" : ""}`}
                ></div>
              ))}
            </div>

            {!showResult ? (
              <div className="quiz-question" key={current}>
                <div className="qq-num">Pregunta {questions[current].n} · {questions[current].total}</div>
                <h3 dangerouslySetInnerHTML={{ __html: questions[current].q }}></h3>
                <div className="qq-opts">
                  {questions[current].opts.map((opt, i) => (
                    <button
                      key={i}
                      className="qq-opt"
                      onClick={() => handleSelect(opt.pts)}
                    >
                      <span className="qq-opt-text">
                        <span className="qq-opt-k">{opt.k} ·</span>
                        {opt.text}
                      </span>
                      <span className="qq-opt-arrow">→</span>
                    </button>
                  ))}
                </div>
              </div>
            ) : (
              <div className={`quiz-result-card show ${result.tier}`}>
                <div className="qr-score-wrap">
                  <div className="qr-score">
                    <span className="qr-score-n">{score}</span>
                    <span className="qr-score-total">/ 11</span>
                  </div>
                  <span className="qr-score-label">tu puntaje</span>
                </div>
                <h3 dangerouslySetInnerHTML={{ __html: result.title }}></h3>
                <p>{result.desc}</p>
                <div className="qr-actions">
                  <a href={result.href} className="qr-cta-primary">
                    {result.cta}
                    <span className="arrow">→</span>
                  </a>
                  <a href={WA_BASE + result.waMsg} target="_blank" rel="noopener" className="qr-cta-wa">
                    <svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg>
                    Hablar por WhatsApp
                  </a>
                </div>
                <a href="#" className="qr-reset" onClick={reset}>← Volver a hacer el quiz</a>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ==========================================================================
   FLOATING WHATSAPP — bubble fija abajo a la derecha, siempre visible
   ========================================================================== */
function FloatingWA() {
  const WA_LINK = "https://wa.me/5493518692782?text=Hola!%20Vengo%20de%20la%20web,%20quiero%20agendar%20una%20consultor%C3%ADa%20de%20Sistema%20de%20Clientes.";
  const [expanded, setExpanded] = useState3(false);

  // Auto-expand a los 8s para llamar atención, una sola vez
  React.useEffect(() => {
    const t = setTimeout(() => setExpanded(true), 8000);
    const t2 = setTimeout(() => setExpanded(false), 14000);
    return () => { clearTimeout(t); clearTimeout(t2); };
  }, []);

  return (
    <a
      href={WA_LINK}
      target="_blank"
      rel="noopener"
      className={`floating-wa ${expanded ? "expanded" : ""}`}
      aria-label="Escribinos por WhatsApp"
      onMouseEnter={() => setExpanded(true)}
      onMouseLeave={() => setExpanded(false)}
    >
      <span className="fwa-icon">
        <svg viewBox="0 0 24 24" fill="currentColor" width="28" height="28">
          <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
        </svg>
      </span>
      <span className="fwa-label">
        <strong>Escribinos</strong>
        <small>Respondemos &lt; 1hs</small>
      </span>
      <span className="fwa-pulse"></span>
    </a>
  );
}

window.Pricing = Pricing;
window.CaseStudy = CaseStudy;
window.Testimonials = Testimonials;
window.Quiz = Quiz;
window.FAQ = FAQ;
window.Contact = Contact;
window.Footer = Footer;
window.FloatingWA = FloatingWA;