// ============================================================
// Velio Tech — Servicios y Precios
// ============================================================

function ServiciosHero() {
  return (
    <section style={{ paddingTop: 70, paddingBottom: 30 }}>
      <div className="shell" style={{ textAlign: 'center' }}>
        <span className="tag tag-sky" style={{ marginBottom: 24 }}>
          <span className="dot"></span> 3 niveles · crece cuando estés listo
        </span>
        <h1 style={{ marginBottom: 22 }}>
          Empieza donde tenga <span className="serif" style={{ color: 'var(--persian)' }}>sentido</span>.
        </h1>
        <p style={{ fontSize: 20, maxWidth: 640, margin: '0 auto' }}>
          Tres niveles, hechos para crecer contigo. Sin contratos largos. Sube cuando estés listo.
        </p>
      </div>
    </section>
  );
}

function Promesas() {
  const items = [
    { n: '01', t: 'Tú trabajas siempre en español.' },
    { n: '02', t: 'Tus clientes reciben siempre un inglés claro y profesional.' },
    { n: '03', t: 'Nada le llega a un cliente sin tu aprobación.' },
  ];
  return (
    <section style={{ padding: '30px 0 60px' }}>
      <div className="shell">
        <div className="promesa-grid">
          {items.map((p, i) => (
            <div className="promesa-card" key={i}>
              <div className="promesa-num">{p.n}</div>
              <div className="promesa-text">{p.t}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .promesa-grid {
          display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
        }
        @media (max-width: 860px) { .promesa-grid { grid-template-columns: 1fr; } }
        .promesa-card {
          background: #fff; border: 1px solid var(--hairline);
          border-radius: 22px; padding: 28px;
          display: flex; align-items: flex-start; gap: 18px;
        }
        .promesa-num {
          font-size: 28px; font-weight: 700; color: var(--sky);
          letter-spacing: -0.02em; line-height: 1;
        }
        .promesa-text { font-size: 17px; color: var(--ink); font-weight: 500; line-height: 1.4; }
      `}</style>
    </section>
  );
}

function PlanesGrid({ go }) {
  const planes = [
    {
      key: 'basico',
      level: 'N1',
      name: 'Básico',
      subtitle: 'Asistente Bilingüe',
      tag: 'Para empezar',
      forWho: 'Para operadores independientes y cuadrillas pequeñas.',
      setup: '$800 – 1,200',
      monthly: '$150 – 250',
      timeline: '3 – 5 días',
      desc: 'Automatiza la comunicación diaria y la administración básica.',
      features: [
        'Trabaja contigo en español → responde a tus clientes en inglés',
        'Maneja tus mensajes por WhatsApp, SMS o Telegram',
        'Háblale con notas de voz — te entiende cuando le hablas',
        'Resúmenes de tus correos en español',
        'Resumen de correos a primera hora de la mañana',
        'Cotizaciones básicas (en texto)',
        'Genera facturas en PDF — listas para que tú las envíes',
        'Frases de respuesta en inglés cuando las necesites',
      ],
    },
    {
      key: 'operaciones',
      level: 'N2',
      name: 'Operaciones',
      subtitle: 'Sistema de Operaciones',
      tag: 'El que más eligen',
      featured: true,
      forWho: 'Para negocios en crecimiento.',
      setup: '$2,000 – 3,500',
      monthly: '$350 – 500',
      timeline: '8 – 12 días',
      desc: 'Automatiza tus documentos y el manejo completo de tus clientes.',
      includes: 'Todo lo del Básico, más:',
      features: [
        'Envía cotizaciones y facturas por correo a tus clientes',
        'Cotizaciones, facturas y contratos en PDF profesional',
        'Plantillas con tu logo y tu marca',
        'Lee fotos de documentos y te explica qué dicen, en español',
        'Conexión con tu correo: lee, redacta y envía',
        'Recordatorios de pago automáticos',
        'Secuencias de seguimiento automáticas',
        'Base de datos de tus clientes',
        'Resumen matutino diario a las 7 am',
        'Panel de seguimiento de trabajos',
      ],
    },
    {
      key: 'completo',
      level: 'N3',
      name: 'Completo',
      subtitle: 'Agente del Negocio',
      tag: 'Negocio establecido',
      forWho: 'Para negocios establecidos (3–10 personas).',
      setup: '$4,500 – 7,500',
      monthly: '$600 – 900',
      timeline: '15 – 25 días',
      desc: 'Tu centro de operaciones completo, de principio a fin.',
      includes: 'Todo lo de Operaciones, más:',
      features: [
        'Mensajería: texto, voz, fotos y PDFs todo en español',
        'Comando de voz "dame mis correos" trae tu correo',
        'Genera cotizaciones, facturas y contratos describiendo el trabajo en voz',
        'Lee y resume planos (función limitada)',
        'Envía una factura por correo a un cliente específico',
        'Resumen matutino a las 7 am · prioridades a las 4 pm',
        'Memoria del negocio: recuerda conversaciones y planos',
        'Primer contacto → información completa del cliente',
      ],
    },
  ];

  return (
    <section style={{ paddingTop: 30 }}>
      <div className="shell">
        <div className="planes-grid">
          {planes.map((p) => (
            <div className={`plan-card ${p.featured ? 'featured' : ''}`} key={p.key}>
              {p.featured && <div className="plan-featured-tag">★ {p.tag}</div>}
              <div className="plan-head">
                <div className="plan-level">Nivel {p.level} · {p.tag}</div>
                <div className="plan-name">{p.name}</div>
                <div className="plan-subtitle">{p.subtitle}</div>
              </div>

              <div className="plan-meta">
                <div className="plan-meta-row">
                  <span className="plan-meta-label">Costo inicial</span>
                  <span className="plan-meta-value">{p.setup}</span>
                </div>
                <div className="plan-meta-row plan-meta-row-main">
                  <span className="plan-meta-label">Mensual</span>
                  <span className="plan-meta-value plan-meta-value-big">{p.monthly}<span className="plan-meta-unit">/mes</span></span>
                </div>
                <div className="plan-meta-row">
                  <span className="plan-meta-label">Tiempo de armado</span>
                  <span className="plan-meta-value">{p.timeline}</span>
                </div>
              </div>

              <p className="plan-forwho">{p.forWho}</p>
              <p className="plan-desc">{p.desc}</p>

              <button
                className={`btn ${p.featured ? 'btn-sky' : 'btn-primary'}`}
                style={{ width: '100%', height: 54, marginBottom: 26 }}
                onClick={() => go('contacto')}
              >
                Hablar con nosotros
              </button>

              {p.includes && <div className="plan-includes">{p.includes}</div>}
              <ul className="plan-features">
                {p.features.map((f, idx) => (
                  <li key={idx}>
                    <span className="plan-feature-check">{Icon.check(14)}</span>
                    <span>{f}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div className="planes-foot">
          <div className="planes-foot-item">
            <span style={{ color: 'var(--ocean)' }}>{Icon.shield(20)}</span>
            <span>Sin contrato largo</span>
          </div>
          <div className="planes-foot-item">
            <span style={{ color: 'var(--ocean)' }}>{Icon.clock(20)}</span>
            <span>Tú apruebas todo antes de enviar</span>
          </div>
          <div className="planes-foot-item">
            <span style={{ color: 'var(--ocean)' }}>{Icon.heart(20)}</span>
            <span>Soporte siempre en español</span>
          </div>
          <div className="planes-foot-item">
            <span style={{ color: 'var(--ocean)' }}>{Icon.globe(20)}</span>
            <span>Precios en USD · alcance final se confirma antes de empezar</span>
          </div>
        </div>
      </div>

      <style>{`
        .planes-grid {
          display: grid; grid-template-columns: repeat(3, 1fr);
          gap: 20px; align-items: stretch;
        }
        @media (max-width: 1100px) { .planes-grid { grid-template-columns: 1fr; } }
        .plan-card {
          background: #fff; border: 1px solid var(--hairline);
          border-radius: 28px; padding: 36px 32px;
          position: relative; display: flex; flex-direction: column;
        }
        .plan-card.featured {
          background: var(--imperial); color: #fff;
          border-color: var(--imperial);
          transform: translateY(-10px);
          box-shadow: 0 60px 100px -50px rgba(3,37,108,0.45);
        }
        @media (max-width: 1100px) { .plan-card.featured { transform: none; } }
        .plan-featured-tag {
          position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
          background: var(--sky); color: var(--imperial);
          font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
          padding: 6px 16px; border-radius: 999px; white-space: nowrap;
        }
        .plan-head { margin-bottom: 22px; }
        .plan-level {
          font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
          color: var(--persian); margin-bottom: 12px;
        }
        .plan-card.featured .plan-level { color: var(--sky); }
        .plan-name {
          font-size: 36px; font-weight: 700; color: var(--imperial);
          letter-spacing: -0.02em; line-height: 1;
        }
        .plan-card.featured .plan-name { color: #fff; }
        .plan-subtitle { font-size: 15px; color: var(--muted); margin-top: 6px; font-style: italic; }
        .plan-card.featured .plan-subtitle { color: #B6C6F0; }
        .plan-meta {
          background: var(--paper); border-radius: 18px;
          padding: 18px 20px; margin-bottom: 22px;
          display: flex; flex-direction: column; gap: 4px;
        }
        .plan-card.featured .plan-meta { background: rgba(255,255,255,0.07); }
        .plan-meta-row {
          display: flex; justify-content: space-between; align-items: baseline;
          padding: 6px 0;
        }
        .plan-meta-row-main {
          padding: 10px 0; margin: 4px 0;
          border-top: 1px dashed var(--hairline-strong);
          border-bottom: 1px dashed var(--hairline-strong);
        }
        .plan-card.featured .plan-meta-row-main { border-color: rgba(255,255,255,0.18); }
        .plan-meta-label { font-size: 13px; color: var(--muted); font-weight: 500; }
        .plan-card.featured .plan-meta-label { color: #B6C6F0; }
        .plan-meta-value {
          font-size: 17px; font-weight: 700; color: var(--imperial); letter-spacing: -0.01em;
        }
        .plan-card.featured .plan-meta-value { color: #fff; }
        .plan-meta-value-big { font-size: 24px; }
        .plan-card.featured .plan-meta-value-big { color: var(--sky); }
        .plan-meta-unit { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 2px; }
        .plan-card.featured .plan-meta-unit { color: #9DC4FF; }
        .plan-forwho { font-size: 14px; color: var(--ink); font-weight: 600; margin-bottom: 8px; }
        .plan-card.featured .plan-forwho { color: #fff; }
        .plan-desc { font-size: 15px; color: var(--ink-2); margin-bottom: 24px; line-height: 1.5; }
        .plan-card.featured .plan-desc { color: #B6C6F0; }
        .plan-includes {
          font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
          color: var(--persian); margin-bottom: 16px;
          padding-top: 22px; border-top: 1px solid var(--hairline);
        }
        .plan-card.featured .plan-includes { color: var(--sky); border-color: rgba(255,255,255,0.12); }
        .plan-features {
          list-style: none; padding: 0; margin: 0;
          display: flex; flex-direction: column; gap: 12px;
        }
        .plan-card:not(:has(.plan-includes)) .plan-features {
          padding-top: 22px; border-top: 1px solid var(--hairline);
        }
        .plan-card.featured:not(:has(.plan-includes)) .plan-features { border-color: rgba(255,255,255,0.12); }
        .plan-features li {
          display: flex; gap: 10px; align-items: flex-start;
          font-size: 14.5px; color: var(--ink); line-height: 1.45;
        }
        .plan-card.featured .plan-features li { color: #DCE6FF; }
        .plan-feature-check {
          width: 22px; height: 22px; border-radius: 50%;
          background: rgba(6,190,225,0.18); color: var(--ocean);
          display: inline-flex; align-items: center; justify-content: center;
          flex-shrink: 0; margin-top: 1px;
        }
        .plan-card.featured .plan-feature-check { background: rgba(6,190,225,0.22); color: var(--sky); }
        .planes-foot {
          display: flex; justify-content: center; flex-wrap: wrap;
          gap: 26px 36px; margin-top: 70px;
          max-width: 900px; margin-left: auto; margin-right: auto;
          padding: 28px 32px; background: #fff;
          border: 1px solid var(--hairline); border-radius: 24px;
        }
        .planes-foot-item {
          display: inline-flex; align-items: center; gap: 10px;
          font-size: 14.5px; color: var(--ink-2); font-weight: 500;
        }
      `}</style>
    </section>
  );
}

function Extras({ go }) {
  const items = [
    { icon: Icon.sparkle, title: 'Diseño de logo', unico: '$150 – 300', mensual: null, desc: 'Logo profesional que represente tu negocio.' },
    { icon: Icon.heart, title: 'Paquete de marca completo', unico: '$400 – 700', mensual: null, desc: 'Logo + colores + tipografía + plantillas.' },
    { icon: Icon.card, title: 'Tarjetas de presentación', unico: '$100 – 200', mensual: null, desc: 'Diseño + archivos listos para imprimir.' },
    { icon: Icon.doc, title: 'Diseño de volante', unico: '$75 – 150', mensual: null, desc: 'Por volante. Para repartir en obras o clientes.' },
    { icon: Icon.bolt, title: 'Nombre del negocio + eslogan', unico: '$150 – 300', mensual: null, desc: 'Si estás empezando o quieres reposicionarte.' },
    { icon: Icon.globe, title: 'Sitio web profesional', unico: '$800 – 1,500', mensual: '$50 – 80/mes', desc: '5 páginas. En inglés y español, listo para clientes.' },
    { icon: Icon.pin, title: 'Perfil de Google Business', unico: '$200 – 300', mensual: null, desc: 'Aparecer en Google Maps cuando busquen tu servicio.' },
    { icon: Icon.phone, title: 'Línea telefónica adicional', unico: '$75', mensual: '$25/mes', desc: 'Número aparte del personal, dedicado al negocio.' },
    { icon: Icon.voice, title: 'Contestador telefónico', unico: '$400', mensual: '$75/mes', desc: 'Velio contesta y te pasa el mensaje en español.' },
  ];

  return (
    <section style={{ background: '#fff' }}>
      <div className="shell">
        <div style={{ maxWidth: 760, marginBottom: 30 }}>
          <span className="eyebrow" style={{ marginBottom: 22 }}>Servicios adicionales</span>
          <h2 style={{ marginBottom: 18 }}>
            Una <span className="serif" style={{ color: 'var(--persian)' }}>identidad de negocio</span> completa.
          </h2>
          <p style={{ fontSize: 18 }}>
            La mayoría de los negocios de oficios no tienen presencia digital. Estos extras te dan toda una identidad.
          </p>
        </div>

        <div className="bundle-card">
          <div className="bundle-star">★</div>
          <div className="bundle-body">
            <div className="bundle-label">Paquete más popular</div>
            <div className="bundle-title">Logo + Tarjetas + Sitio de 1 página + Perfil de Google</div>
            <div className="bundle-desc">Todo lo que necesitas para tener una presencia profesional, listo de una.</div>
          </div>
          <div className="bundle-price">
            <div className="bundle-price-amt">$1,200 – 1,800</div>
            <div className="bundle-price-note">único · ahorro vs por separado</div>
            <button className="btn btn-sky" style={{ marginTop: 14 }} onClick={() => go('contacto')}>
              Pedir paquete {Icon.arrowRight(16)}
            </button>
          </div>
        </div>

        <div className="extras-grid">
          {items.map((e, i) => (
            <div className="extra-card" key={i}>
              <div className="extra-head">
                <div className="icon-box">{e.icon(22)}</div>
                <h3 className="extra-title">{e.title}</h3>
              </div>
              <p className="extra-desc">{e.desc}</p>
              <div className="extra-prices">
                <div className="extra-price-col">
                  <div className="extra-price-label">Único</div>
                  <div className="extra-price-value">{e.unico}</div>
                </div>
                <div className="extra-price-col">
                  <div className="extra-price-label">Mensual</div>
                  <div className="extra-price-value">{e.mensual || <span style={{ color: 'var(--muted)' }}>—</span>}</div>
                </div>
              </div>
            </div>
          ))}
        </div>

        <p className="extras-note">
          Todos los precios en USD. El costo inicial es por única vez; el mensual es continuo. Las cifras son estimadas — el alcance final se confirma antes de empezar.
        </p>
      </div>

      <style>{`
        .bundle-card {
          background: linear-gradient(135deg, #03256C 0%, #1768AC 100%);
          color: #fff; border-radius: 28px; padding: 36px 40px;
          display: grid; grid-template-columns: auto 1fr auto;
          gap: 30px; align-items: center; margin-bottom: 40px;
          position: relative; overflow: hidden;
        }
        @media (max-width: 860px) {
          .bundle-card { grid-template-columns: 1fr; padding: 28px; gap: 18px; }
        }
        .bundle-star {
          width: 64px; height: 64px; border-radius: 50%;
          background: var(--sky); color: var(--imperial);
          display: flex; align-items: center; justify-content: center;
          font-size: 32px; font-weight: 700;
        }
        .bundle-label {
          font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
          text-transform: uppercase; color: var(--sky); margin-bottom: 8px;
        }
        .bundle-title { font-size: 22px; font-weight: 700; color: #fff; letter-spacing: -0.01em; margin-bottom: 8px; line-height: 1.2; }
        .bundle-desc { font-size: 15px; color: #B6C6F0; }
        .bundle-price { text-align: right; }
        @media (max-width: 860px) { .bundle-price { text-align: left; } }
        .bundle-price-amt { font-size: 28px; font-weight: 700; color: var(--sky); letter-spacing: -0.02em; }
        .bundle-price-note { font-size: 12px; color: #9DC4FF; margin-top: 2px; }
        .extras-grid {
          display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
        }
        @media (max-width: 980px) { .extras-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 580px) { .extras-grid { grid-template-columns: 1fr; } }
        .extra-card {
          background: #fff; border: 1px solid var(--hairline);
          border-radius: 22px; padding: 24px;
          transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
        }
        .extra-card:hover {
          transform: translateY(-2px);
          border-color: rgba(6,190,225,0.4);
          box-shadow: 0 24px 40px -28px rgba(3,37,108,0.2);
        }
        .extra-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
        .extra-title { font-size: 17px; color: var(--imperial); letter-spacing: -0.01em; }
        .extra-desc { font-size: 14px; color: var(--muted); margin-bottom: 18px; line-height: 1.45; min-height: 40px; }
        .extra-prices {
          display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
          padding-top: 16px; border-top: 1px solid var(--hairline);
        }
        .extra-price-label {
          font-size: 11px; color: var(--muted); letter-spacing: 0.08em;
          text-transform: uppercase; font-weight: 600; margin-bottom: 4px;
        }
        .extra-price-value { font-size: 16px; font-weight: 700; color: var(--imperial); letter-spacing: -0.01em; }
        .extras-note {
          margin-top: 32px; font-size: 13px; color: var(--muted);
          text-align: center; max-width: 720px;
          margin-left: auto; margin-right: auto; line-height: 1.5;
        }
      `}</style>
    </section>
  );
}

function ServiciosCTA({ go }) {
  return (
    <section style={{ paddingBottom: 120 }}>
      <div className="shell">
        <div className="serv-cta">
          <div>
            <h2 style={{ color: '#fff', marginBottom: 16 }}>
              ¿Listo para quitarte el <span className="serif" style={{ color: '#06BEE1' }}>papeleo</span> de encima?
            </h2>
            <p style={{ color: '#B6C6F0', fontSize: 18, marginBottom: 0 }}>
              Hablemos y vemos qué nivel le queda mejor a tu negocio.
            </p>
          </div>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <button className="btn btn-wa btn-lg" onClick={() => go('contacto')}>
              {Icon.whatsapp(20)} WhatsApp
            </button>
            <button className="btn btn-sky btn-lg" onClick={() => go('demo')}>
              Ver Demo
            </button>
          </div>
        </div>
      </div>
      <style>{`
        .serv-cta {
          background: var(--imperial); border-radius: 32px; padding: 56px;
          display: flex; justify-content: space-between; align-items: center;
          gap: 40px; flex-wrap: wrap;
        }
        @media (max-width: 760px) { .serv-cta { padding: 40px 28px; } }
      `}</style>
    </section>
  );
}

function Servicios({ go }) {
  return (
    <div className="page-enter">
      <ServiciosHero />
      <Promesas />
      <PlanesGrid go={go} />
      <Extras go={go} />
      <ServiciosCTA go={go} />
    </div>
  );
}
window.Servicios = Servicios;