// Pipeko website — Contacto screen (sucursales + nosotros). Exports window.PKContacto.
const { Button, Badge, Card } = window.PipekoInterioresDesignSystem_5fe34e;
const { link: waLink } = window.PKWhatsApp;

function BranchCard({ b }) {
  return (
    <Card padding="lg" elevation="sm">
      <div style={{ width: '34px', height: '34px', borderRadius: '50%', background: 'var(--plum-100)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: '14px' }}>
        <i data-lucide="map-pin" style={{ width: '17px', height: '17px', color: 'var(--plum-800)' }}></i>
      </div>
      <h2 style={{ fontFamily: 'var(--font-serif)', color: 'var(--plum-800)', fontWeight: 600, fontSize: '22px', lineHeight: 1.25, margin: '0 0 10px' }}>{b.name}</h2>
      <div style={{ fontFamily: 'var(--font-ui)', fontSize: '14px', color: 'var(--text-muted)', marginBottom: '10px' }}>{b.zone}</div>
      <p style={{ fontFamily: 'var(--font-ui)', fontSize: '15px', lineHeight: 1.5, color: 'var(--slate-800)', margin: '0 0 14px' }}>{b.note}</p>
      <p style={{ fontFamily: 'var(--font-ui)', fontSize: '14.5px', lineHeight: 1.55, color: 'var(--slate-800)', margin: '0 0 20px' }}>{b.address}</p>
      <Button variant="outline" size="sm" fullWidth as="a" href={window.PK_MAPS_URL(b)} target="_blank" rel="noopener">
        Ver en Google Maps
      </Button>
    </Card>
  );
}

function ContactoScreen({ go }) {
  React.useEffect(() => {
    window.PKSEO.setMeta('Sucursales Pipeko: CDMX, Metepec y Exibimex', 'Visítanos en Colonia del Valle, Metepec o Exibimex. Muestrario completo de tejidos, garantía de 5 años en mecanismo e instalación incluida.');
    window.PKSEO.setCanonical('https://www.pipekointeriores.com/sucursales');
    window.PKSEO.setOG({ title: 'Sucursales Pipeko: CDMX, Metepec y Exibimex', description: 'Visítanos en Colonia del Valle, Metepec o Exibimex. Muestrario completo de tejidos, garantía de 5 años en mecanismo e instalación incluida.', url: 'https://www.pipekointeriores.com/sucursales' });
  }, []);
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });

  return (
    <div style={{ background: 'var(--cream-100)' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '64px 32px 16px' }}>
        <Badge tone="taupe" variant="soft">Sucursales</Badge>
        <h1 style={{ fontFamily: 'var(--font-serif)', color: 'var(--plum-800)', fontWeight: 600, fontSize: '44px', letterSpacing: '-.02em', margin: '18px 0 12px' }}>Visítanos en Ciudad de México o Estado de México</h1>
        <p style={{ fontFamily: 'var(--font-ui)', fontSize: '18px', color: 'var(--text-muted)', margin: '0 0 40px', maxWidth: '60ch' }}>Tres sucursales de persianas a la medida, atendidas por la familia.</p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: '20px' }}>
          {window.PK_BRANCHES.map((b) => <BranchCard key={b.key} b={b} />)}
        </div>
      </div>

      <section style={{ background: 'var(--cream-200)', borderTop: '1px solid var(--warmgrey-200)', borderBottom: '1px solid var(--warmgrey-200)' }}>
        <div style={{ maxWidth: 'var(--container-text)', margin: '0 auto', padding: '56px 32px' }}>
          <div style={{ fontFamily: 'var(--font-ui)', fontSize: '12px', letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--taupe-500)', fontWeight: 600, marginBottom: '10px' }}>Garantía</div>
          <p style={{ fontFamily: 'var(--font-ui)', fontSize: '18px', lineHeight: 1.7, color: 'var(--slate-800)', margin: 0 }}>
            Toda persiana Pipeko lleva garantía de 5 años en el mecanismo (no cubre la tela). Si algo falla, el mismo dueño de tu sucursal lo resuelve: no un call center.
          </p>
        </div>
      </section>

      <div style={{ maxWidth: 'var(--container-text)', margin: '0 auto', padding: '64px 32px 88px', textAlign: 'center' }}>
        <h2 style={{ fontFamily: 'var(--font-serif)', color: 'var(--plum-800)', fontWeight: 600, fontSize: '30px', margin: '0 0 20px' }}>Escríbenos</h2>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '14px' }}>
          <Button size="lg" variant="primary" as="a" href={waLink('Hola, quiero más información.')} 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>
  );
}

Object.assign(window, { PKContacto: ContactoScreen });