// ============================================================
// Velio Tech — Página DEMO (landing del QR)
// ============================================================

function DemoHero({ go }) {
  return (
    <section style={{ paddingTop: 60, paddingBottom: 50 }}>
      <div className="shell">
        <div style={{ textAlign: 'center', maxWidth: 860, margin: '0 auto 50px' }}>
          <span className="tag tag-sky" style={{ marginBottom: 22 }}>
            <span className="dot"></span> Demo · 2 minutos
          </span>
          <h1 style={{ marginBottom: 22 }}>
            Mira cómo Velio <span className="serif" style={{ color: 'var(--persian)' }}>habla por ti</span> en inglés.
          </h1>
          <p style={{ fontSize: 20, maxWidth: 640, margin: '0 auto' }}>
            Tu cliente te escribe en inglés. Tú respondes en español. Velio se encarga de todo lo demás.
          </p>
        </div>

        <div className="video-frame">
          <div className="video-frame-inner">
            <video
              controls
              playsInline
              style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: 22, display: 'block' }}
            >
              <source src="Velio Tech DEMO Video.mov" type="video/quicktime" />
              <source src="Velio Tech DEMO Video.mov" type="video/mp4" />
              Tu navegador no soporta la reproducción de video.
            </video>
          </div>
        </div>

        <div className="demo-stat-row">
          <div className="demo-stat">
            <div className="demo-stat-num">87%</div>
            <div className="demo-stat-label">de respuestas en menos de 5 min</div>
          </div>
          <div className="demo-stat">
            <div className="demo-stat-num">3×</div>
            <div className="demo-stat-label">más cotizaciones cerradas</div>
          </div>
          <div className="demo-stat">
            <div className="demo-stat-num">~6h</div>
            <div className="demo-stat-label">menos de papeleo a la semana</div>
          </div>
        </div>
      </div>
      <style>{`
        .video-frame {
          background: linear-gradient(135deg, #03256C, #1768AC);
          border-radius: 32px; padding: 14px;
          box-shadow: 0 60px 100px -50px rgba(3,37,108,0.5);
          margin-bottom: 48px;
        }
        .video-frame-inner {
          background: #02173F; border-radius: 22px;
          aspect-ratio: 16 / 9; position: relative; overflow: hidden;
          display: flex; align-items: center; justify-content: center;
        }
        .video-placeholder-stripes {
          position: absolute; inset: 0;
          background:
            repeating-linear-gradient(45deg, rgba(6,190,225,0.04) 0 18px, transparent 18px 36px),
            radial-gradient(700px 400px at 30% 30%, rgba(6,190,225,0.2), transparent 60%),
            radial-gradient(700px 400px at 70% 70%, rgba(37,65,178,0.3), transparent 60%);
        }
        .video-play-pill {
          position: relative; z-index: 2;
          display: flex; align-items: center; gap: 18px;
          background: rgba(2,23,63,0.7);
          backdrop-filter: blur(14px);
          padding: 14px 26px 14px 14px;
          border-radius: 999px;
          border: 1px solid rgba(255,255,255,0.12);
          cursor: pointer;
          transition: transform .25s var(--ease);
        }
        .video-play-pill:hover { transform: scale(1.03); }
        .video-play-btn {
          width: 64px; height: 64px; border-radius: 50%;
          background: var(--sky); color: var(--imperial);
          display: flex; align-items: center; justify-content: center;
        }
        .video-meta { position: absolute; bottom: 18px; right: 22px; z-index: 2; }
        .demo-stat-row {
          display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
        }
        @media (max-width: 720px) { .demo-stat-row { grid-template-columns: 1fr; } }
        .demo-stat {
          background: #fff; border: 1px solid var(--hairline);
          border-radius: 24px; padding: 26px 28px; text-align: center;
        }
        .demo-stat-num {
          font-size: 48px; font-weight: 700; color: var(--imperial);
          letter-spacing: -0.03em; margin-bottom: 4px;
        }
        .demo-stat-label { color: var(--muted); font-size: 14px; }
      `}</style>
    </section>
  );
}

function AntesDespues() {
  const before = [
    'El cliente escribe en inglés. Tú no entiendes bien.',
    'Pasan 3 horas hasta que un amigo te traduce.',
    'Mientras tanto, el cliente llama a la competencia.',
    'La cotización la armas a las 11pm, cansado.',
    'A veces no la entregas bien escrita en inglés.',
    'Se pierde el trabajo. Y no sabes por qué.',
  ];

  const after = [
    'El cliente escribe en inglés. Llega a ti en español.',
    'Respondes en 2 minutos, en español.',
    'Velio traduce y manda al cliente en inglés profesional.',
    'La cotización está lista antes de tu próximo trabajo.',
    'El cliente recibe un PDF profesional, en inglés perfecto.',
    'Cierras el trabajo. Y duermes con la familia.',
  ];

  return (
    <section>
      <div className="shell">
        <div style={{ maxWidth: 720, marginBottom: 60 }}>
          <span className="eyebrow" style={{ marginBottom: 22 }}>Antes vs Después</span>
          <h2 style={{ marginBottom: 18 }}>
            La <span className="serif" style={{ color: 'var(--persian)' }}>misma jornada</span>, dos historias.
          </h2>
        </div>

        <div className="ad-grid">
          <div className="ad-card ad-before">
            <div className="ad-card-head">
              <div className="ad-pill" style={{ background: 'rgba(180,50,50,0.12)', color: '#A93232' }}>Antes</div>
              <h3 style={{ color: '#A93232' }}>Solo, contra el inglés.</h3>
            </div>
            <ul>
              {before.map((b, i) => (
                <li key={i}>
                  <span className="ad-x">×</span>
                  <span>{b}</span>
                </li>
              ))}
            </ul>
          </div>
          <div className="ad-card ad-after">
            <div className="ad-card-head">
              <div className="ad-pill" style={{ background: 'rgba(6,190,225,0.18)', color: 'var(--ocean)' }}>Con Velio</div>
              <h3 style={{ color: 'var(--imperial)' }}>Tu negocio fluye en dos idiomas.</h3>
            </div>
            <ul>
              {after.map((a, i) => (
                <li key={i}>
                  <span className="ad-check">{Icon.check(16)}</span>
                  <span>{a}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
      <style>{`
        .ad-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
        @media (max-width: 860px) { .ad-grid { grid-template-columns: 1fr; } }
        .ad-card {
          background: #fff; border: 1px solid var(--hairline);
          border-radius: 28px; padding: 34px 32px;
        }
        .ad-after {
          background: linear-gradient(180deg, #fff 0%, #F5FBFE 100%);
          border-color: rgba(6,190,225,0.3);
        }
        .ad-card-head { margin-bottom: 26px; }
        .ad-pill {
          display: inline-flex; align-items: center;
          padding: 6px 14px; border-radius: 999px;
          font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
          margin-bottom: 16px;
        }
        .ad-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
        .ad-card ul li {
          display: flex; gap: 12px; align-items: flex-start;
          font-size: 16px; color: var(--ink-2); line-height: 1.45;
        }
        .ad-x {
          width: 26px; height: 26px; border-radius: 50%;
          background: rgba(169,50,50,0.12); color: #A93232;
          display: inline-flex; align-items: center; justify-content: center;
          font-weight: 700; flex-shrink: 0;
        }
        .ad-check {
          width: 26px; height: 26px; border-radius: 50%;
          background: rgba(6,190,225,0.2); color: var(--ocean);
          display: inline-flex; align-items: center; justify-content: center;
          flex-shrink: 0;
        }
      `}</style>
    </section>
  );
}

function FAQ() {
  const [open, setOpen] = useState(0);
  const items = [
    { q: '¿Tengo que aprender un programa nuevo?', a: 'No. Si usas WhatsApp, ya sabes usar Velio. Lo configuramos contigo y queda funcionando solo.' },
    { q: '¿Y si mi cliente me llama en vez de escribir?', a: 'Velio también te ayuda con notas de voz en inglés y te las pasa a texto en español. Y al revés.' },
    { q: '¿Mis mensajes son privados?', a: 'Sí. Tu información es tuya. No la vendemos ni la compartimos con nadie.' },
    { q: '¿Cuánto cuesta?', a: 'Tenemos 3 planes desde lo más sencillo hasta lo más completo. Mira la página de Servicios y Precios para ver detalles.' },
    { q: '¿Funciona si estoy en el techo o manejando?', a: 'Sí. Por eso lo hicimos por WhatsApp y notas de voz. Para que respondas con una mano, donde sea.' },
  ];

  return (
    <section>
      <div className="shell">
        <div style={{ maxWidth: 720, margin: '0 auto', textAlign: 'center', marginBottom: 50 }}>
          <span className="eyebrow" style={{ justifyContent: 'center', marginBottom: 22 }}>Preguntas</span>
          <h2>Lo que nos <span className="serif" style={{ color: 'var(--persian)' }}>preguntan</span>.</h2>
        </div>
        <div className="faq-list">
          {items.map((it, i) => (
            <div className={`faq-item ${open === i ? 'open' : ''}`} key={i} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="faq-q">
                <span>{it.q}</span>
                <span className="faq-icon">{open === i ? '−' : '+'}</span>
              </div>
              {open === i && <div className="faq-a">{it.a}</div>}
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
        .faq-item {
          background: #fff; border: 1px solid var(--hairline);
          border-radius: 18px; padding: 22px 26px;
          cursor: pointer; transition: border-color .2s var(--ease);
        }
        .faq-item:hover { border-color: var(--hairline-strong); }
        .faq-item.open { border-color: rgba(6,190,225,0.4); }
        .faq-q {
          display: flex; justify-content: space-between; align-items: center;
          font-size: 17px; font-weight: 600; color: var(--imperial);
        }
        .faq-icon {
          width: 32px; height: 32px; border-radius: 50%;
          background: var(--paper);
          display: inline-flex; align-items: center; justify-content: center;
          font-size: 22px; color: var(--imperial);
        }
        .faq-a { margin-top: 12px; font-size: 16px; color: var(--ink-2); line-height: 1.55; }
      `}</style>
    </section>
  );
}

function DemoCTA({ go }) {
  return (
    <section style={{ paddingBottom: 120 }}>
      <div className="shell">
        <div className="demo-cta">
          <h2 style={{ color: '#fff', marginBottom: 20 }}>
            Tu negocio merece verse tan profesional <span className="serif" style={{ color: '#06BEE1' }}>como tu trabajo</span>.
          </h2>
          <p style={{ color: '#B6C6F0', fontSize: 19, marginBottom: 36, maxWidth: 540, margin: '0 auto 36px' }}>
            Sin contratos largos. En español, claro.
          </p>
          <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
            <button className="btn btn-wa btn-lg" onClick={() => go('contacto')}>
              {Icon.whatsapp(20)} Hablemos por WhatsApp
            </button>
            <button className="btn btn-sky btn-lg" onClick={() => go('servicios')}>
              Ver planes y precios {Icon.arrowRight(18)}
            </button>
          </div>
        </div>
      </div>
      <style>{`
        .demo-cta {
          background: var(--imperial);
          border-radius: 36px; padding: 80px 60px; text-align: center;
          background-image:
            radial-gradient(700px 300px at 30% 0%, rgba(6,190,225,0.25), transparent 60%),
            radial-gradient(600px 300px at 80% 100%, rgba(37,65,178,0.4), transparent 60%);
        }
        @media (max-width: 720px) { .demo-cta { padding: 60px 32px; } }
      `}</style>
    </section>
  );
}

function Demo({ go }) {
  return (
    <div className="page-enter">
      <DemoHero go={go} />
      <AntesDespues />
      <FAQ />
      <DemoCTA go={go} />
    </div>
  );
}
window.Demo = Demo;
