// Pipeko website — Cotizar screen. WhatsApp/teléfono únicamente — nunca formularios de contacto. Exports window.PKCotizar.
const { Button, Badge } = window.PipekoInterioresDesignSystem_5fe34e;
const { link: waLink } = window.PKWhatsApp;

function TipRow({ icon, children }) {
  return (
    <div style={{ display: 'flex', gap: '14px', alignItems: 'flex-start' }}>
      <i data-lucide={icon} style={{ width: '20px', height: '20px', color: 'var(--plum-800)', flexShrink: 0, marginTop: '2px' }}></i>
      <span style={{ fontFamily: 'var(--font-ui)', fontSize: '16px', lineHeight: 1.6, color: 'var(--slate-800)' }}>{children}</span>
    </div>
  );
}

function CotizarScreen({ go }) {
  React.useEffect(() => {
    if (window.lucide) window.lucide.createIcons();
    window.PKSEO.setMeta(
      'Cotiza Persianas a la Medida por WhatsApp | Pipeko CDMX',
      'Cotiza persianas a la medida sin compromiso. Respuesta inmediata por WhatsApp. Fabricante directo con garantía de 5 años en mecanismo e instalación incluida en CDMX y Edoméx.'
    );
    window.PKSEO.setCanonical('https://www.pipekointeriores.com/cotizar');
    window.PKSEO.setOG({
      title: 'Cotiza Persianas a la Medida | Pipeko – Respuesta Inmediata',
      description: 'Sin formularios ni compromiso. Escríbenos por WhatsApp y te cotizamos hoy mismo. Instalación incluida y garantía de 5 años.',
      url: 'https://www.pipekointeriores.com/cotizar'
    });
  });

  return (
    <div style={{ background: 'var(--cream-100)', minHeight: '70vh' }}>
      <div style={{ maxWidth: 'var(--container-text)', margin: '0 auto', padding: '64px 32px 40px', textAlign: 'center' }}>
        <Badge tone="taupe" variant="soft">Respuesta inmediata</Badge>
        <h1 style={{ fontFamily: 'var(--font-serif)', color: 'var(--plum-800)', fontWeight: 600, fontSize: '40px', lineHeight: 1.1, letterSpacing: '-.02em', margin: '18px 0 16px' }}>
          Escríbenos y te cotizamos hoy mismo
        </h1>
        <p style={{ fontFamily: 'var(--font-ui)', fontSize: '18px', lineHeight: 1.7, color: 'var(--slate-800)', margin: '0 0 28px' }}>
          Sin formularios ni compromiso. Persianas a la medida con la mejor relación calidad-costo: cuéntanos qué necesitas por WhatsApp y coordinamos tu visita de medición.
        </p>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '14px' }}>
          <Button size="lg" variant="primary" as="a" href={waLink('Hola, quiero cotizar persianas.')} target="_blank" rel="noopener">Escríbenos por WhatsApp</Button>
          <a href="tel:+525546180643" style={{ fontFamily: 'var(--font-ui)', fontSize: '16px', color: 'var(--text-muted)', textDecoration: 'none' }}>o llama al 55 4618 0643</a>
        </div>
      </div>

      <div style={{ maxWidth: '640px', margin: '0 auto', padding: '8px 32px 80px' }}>
        <div style={{ background: 'var(--cream-50)', border: '1px solid var(--warmgrey-200)', borderRadius: 'var(--radius-lg)', padding: '32px', display: 'flex', flexDirection: 'column', gap: '20px' }}>
          <div style={{ fontFamily: 'var(--font-ui)', fontSize: '12px', letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--taupe-500)', fontWeight: 600 }}>Para cotizar más rápido, ten a la mano</div>
          <TipRow icon="ruler">El ancho y el alto aproximados de tu ventana. No necesitas ser exacto: confirmamos la medida final en tu visita.</TipRow>
          <TipRow icon="camera">Una foto de la ventana, aunque la medida sea aproximada.</TipRow>
          <TipRow icon="layers">Qué línea te interesa, o dinos el espacio y te ayudamos a elegir entre <a href="#" onClick={(e) => { e.preventDefault(); go('comparacion'); }} style={{ color: 'var(--plum-800)', fontWeight: 600, textDecoration: 'none' }}>Sheer Elegance, Blackout o Malla Solar</a>.</TipRow>
          <TipRow icon="map-pin">Tu sucursal más cercana: Colonia del Valle (CDMX), Metepec (Edoméx) o Exibimex.</TipRow>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PKCotizar: CotizarScreen });