// Pipeko website — shared chrome (Header, Footer). Exports to window.
const { Button, Badge, Input } = window.PipekoInterioresDesignSystem_5fe34e;

const WA_NUMBER = window.PK_WHATSAPP_NUMBER;
function waLink(message) {
  const base = 'https://wa.me/' + WA_NUMBER;
  return message ? base + '?text=' + encodeURIComponent(message) : base;
}

function usePKMobile(bp) {
  bp = bp || 720;
  const query = '(max-width:' + bp + 'px)';
  const [m, setM] = React.useState(() => typeof window !== 'undefined' && window.matchMedia(query).matches);
  React.useEffect(() => {
    const mq = window.matchMedia(query);
    const h = (e) => setM(e.matches);
    mq.addEventListener ? mq.addEventListener('change', h) : mq.addListener(h);
    return () => { mq.removeEventListener ? mq.removeEventListener('change', h) : mq.removeListener(h); };
  }, [bp]);
  return m;
}

function WhatsAppIcon({ size = 20, style }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" style={{ flexShrink: 0, ...style }}>
      <circle cx="12" cy="12" r="12" fill="#25D366" />
      <path fill="#fff" d="M12.04 5.5c-3.6 0-6.53 2.92-6.53 6.53 0 1.15.3 2.27.87 3.26L5.5 18.5l3.33-.87a6.53 6.53 0 0 0 3.2.84h.01c3.6 0 6.53-2.93 6.53-6.53a6.5 6.5 0 0 0-1.91-4.62 6.5 6.5 0 0 0-4.62-1.92zm3.86 9.33c-.16.46-.82.85-1.14.9-.29.04-.66.06-1.06-.07a10 10 0 0 1-.95-.35c-1.68-.73-2.78-2.43-2.86-2.55-.08-.11-.68-.9-.68-1.72 0-.82.43-1.22.58-1.39.15-.16.33-.2.44-.2h.32c.1 0 .24-.04.37.28.14.33.47 1.14.51 1.22.04.09.07.19.01.3a1.2 1.2 0 0 1-.16.28c-.08.1-.16.22-.23.29-.08.08-.16.17-.07.32.09.16.41.68.88 1.1.6.53 1.11.7 1.27.78.16.08.25.07.34-.04.1-.1.4-.46.5-.62.1-.16.21-.13.35-.08.14.05.89.42 1.04.5.15.08.25.12.29.18.04.07.04.38-.12.75z"/>
    </svg>
  );
}

function InstagramIcon({ size = 20, style }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" style={{ flexShrink: 0, ...style }}>
      <circle cx="12" cy="12" r="12" fill="#E4405F" />
      <rect x="7" y="7" width="10" height="10" rx="3" fill="none" stroke="#fff" strokeWidth="1.3" />
      <circle cx="12" cy="12" r="2.6" fill="none" stroke="#fff" strokeWidth="1.3" />
      <circle cx="15.1" cy="8.9" r="0.9" fill="#fff" />
    </svg>
  );
}
function FacebookIcon({ size = 20, style }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" style={{ flexShrink: 0, ...style }}>
      <circle cx="12" cy="12" r="12" fill="#1877F2" />
      <path fill="#fff" d="M14 8.6h-1.3c-.8 0-1.2.5-1.2 1.3v1.4H13.6l-.3 1.9h-1.8V19h-2v-5.8H8v-1.9h1.5v-1.6c0-1.6.9-2.6 2.5-2.6H14z"/>
    </svg>
  );
}
function TikTokIcon({ size = 20, style }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" style={{ flexShrink: 0, ...style }}>
      <circle cx="12" cy="12" r="12" fill="#000000" />
      <circle cx="9.3" cy="15.3" r="2.3" fill="none" stroke="#fff" strokeWidth="1.4" />
      <path d="M11.6 6.2v9.1" stroke="#fff" strokeWidth="1.4" fill="none" strokeLinecap="round" />
      <path d="M11.6 6.2c.35 2 1.9 3.5 3.9 3.7" stroke="#fff" strokeWidth="1.4" fill="none" strokeLinecap="round" />
    </svg>
  );
}
function SocialLinks({ size = 19, gap = '10px' }) {
  const items = [
    { Icon: InstagramIcon, label: 'Instagram', url: window.PK_SOCIAL.instagram },
    { Icon: FacebookIcon, label: 'Facebook', url: window.PK_SOCIAL.facebook },
    { Icon: TikTokIcon, label: 'TikTok', url: window.PK_SOCIAL.tiktok },
  ];
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap }}>
      {items.map((s) => (
        <a key={s.label} href={s.url} target="_blank" rel="noopener noreferrer" title={'Visitar Pipeko en ' + s.label} aria-label={'Visitar Pipeko en ' + s.label} style={{ display: 'flex', padding: '10px', margin: '-10px' }}>
          <s.Icon size={size} />
        </a>
      ))}
    </div>
  );
}

function Header({ route, go }) {
  const isMobile = usePKMobile();
  const [open, setOpen] = React.useState(false);
  const links = [
    { id: 'home', label: 'Inicio' },
    { id: 'catalogo', label: 'Persianas' },
    { id: 'comparacion', label: 'Comparar' },
    { id: 'guia', label: 'Guías' },
    { id: 'faq', label: 'FAQ' },
    { id: 'contacto', label: 'Contacto' },
  ];
  React.useEffect(() => { setOpen(false); }, [route]);
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 100,
      background: 'color-mix(in srgb, var(--cream-100) 88%, transparent)',
      backdropFilter: 'saturate(140%) blur(10px)',
      WebkitBackdropFilter: 'saturate(140%) blur(10px)',
      borderBottom: '1px solid var(--warmgrey-200)',
    }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: isMobile ? '0 20px' : '0 32px', height: '74px', display: 'flex', alignItems: 'center', gap: isMobile ? '14px' : '32px' }}>
        <a href="#" onClick={(e) => { e.preventDefault(); go('home'); }} style={{ display: 'flex', alignItems: 'center' }}>
          <img src={window.__resources.logoPrimary} alt="Pipeko – Fabricante de persianas a la medida en CDMX" style={{ height: isMobile ? '36px' : '46px' }} />
        </a>
        {!isMobile && (
          <nav style={{ display: 'flex', gap: '26px', marginLeft: '8px', flex: 1 }}>
            {links.map((l, i) => {
              const active = !l.anchor && route === l.id;
              return (
                <a key={i} href="#" onClick={(e) => { e.preventDefault(); if (!l.anchor) go(l.id); }}
                  style={{
                    fontFamily: 'var(--font-ui)', fontSize: '15.5px', fontWeight: active ? 600 : 500,
                    color: active ? 'var(--plum-800)' : 'var(--slate-800)', textDecoration: 'none',
                    paddingBottom: '2px', borderBottom: active ? '2px solid var(--plum-800)' : '2px solid transparent',
                  }}>{l.label}</a>
              );
            })}
          </nav>
        )}
        {!isMobile && (
          <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
            <SocialLinks />
            <span style={{ width: '1px', height: '20px', background: 'var(--warmgrey-300)' }}></span>
            <a href={waLink('Hola, quiero más información sobre persianas.')} target="_blank" rel="noopener"
              style={{ display: 'flex', alignItems: 'center', gap: '8px', fontFamily: 'var(--font-ui)', fontSize: '14px', color: 'var(--text-muted)', textDecoration: 'none' }}>
              <WhatsAppIcon size={19} />
              55&nbsp;4618&nbsp;0643
            </a>
          </div>
        )}
        {isMobile && (
          <React.Fragment>
            <div style={{ flex: 1 }}></div>
            <a href={waLink('Hola, quiero más información sobre persianas.')} target="_blank" rel="noopener" aria-label="WhatsApp" style={{ display: 'flex' }}>
              <WhatsAppIcon size={26} />
            </a>
            <button onClick={() => setOpen((v) => !v)} aria-label={open ? 'Cerrar menú' : 'Abrir menú'} style={{ border: 'none', background: 'none', padding: '6px', margin: '-6px', cursor: 'pointer', display: 'flex', color: 'var(--slate-800)' }}>
              {open ? (
                <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="5" y1="5" x2="19" y2="19"></line><line x1="19" y1="5" x2="5" y2="19"></line></svg>
              ) : (
                <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="4" y1="7" x2="20" y2="7"></line><line x1="4" y1="12" x2="20" y2="12"></line><line x1="4" y1="17" x2="20" y2="17"></line></svg>
              )}
            </button>
          </React.Fragment>
        )}
      </div>
      {isMobile && open && (
        <div style={{ background: 'var(--cream-100)', borderTop: '1px solid var(--warmgrey-200)', padding: '8px 20px 20px', display: 'flex', flexDirection: 'column', boxShadow: '0 12px 24px rgba(0,0,0,0.12)' }}>
          {links.map((l, i) => {
            const active = !l.anchor && route === l.id;
            return (
              <a key={i} href="#" onClick={(e) => { e.preventDefault(); go(l.id); setOpen(false); }}
                style={{ fontFamily: 'var(--font-ui)', fontSize: '18px', fontWeight: active ? 600 : 500, color: active ? 'var(--plum-800)' : 'var(--slate-800)', textDecoration: 'none', padding: '16px 4px', borderBottom: '1px solid var(--warmgrey-200)' }}>{l.label}</a>
            );
          })}
          <div style={{ display: 'flex', alignItems: 'center', gap: '18px', padding: '18px 4px 4px' }}><SocialLinks size={22} /></div>
        </div>
      )}
    </header>
  );
}

function Footer({ go }) {
  const isMobile = usePKMobile();
  const col = (title, items) => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
      <div style={{ fontFamily: 'var(--font-ui)', fontSize: '12px', letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--slate-200)', marginBottom: '4px' }}>{title}</div>
      {items.map((it, i) => (
        <a key={i} href="#" onClick={(e) => { e.preventDefault(); go(it.route, it.param); }} style={{ fontFamily: 'var(--font-ui)', fontSize: '15px', color: 'var(--cream-100)', textDecoration: 'none', opacity: 0.85 }}>{it.label}</a>
      ))}
    </div>
  );
  const lineItems = window.PK_CATALOG.map((l) => ({ label: l.name, route: 'producto', param: l.slug }));
  lineItems.push({ label: 'Ver todo el catálogo', route: 'catalogo' });
  return (
    <footer style={{ background: 'var(--slate-900)', color: 'var(--cream-100)' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: isMobile ? '48px 20px 32px' : '64px 32px 40px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.4fr 1fr 1fr 1fr', gap: isMobile ? '32px' : '40px' }}>
          <div>
            <div style={{ display: 'inline-block', background: 'var(--cream-50)', borderRadius: '12px', padding: '14px 18px', marginBottom: '18px' }}>
              <img src={window.__resources.logoPrimary} alt="Pipeko Persianas – Empresa familiar en Ciudad de México" loading="lazy" style={{ height: '46px', display: 'block' }} />
            </div>
            <p style={{ fontFamily: 'var(--font-ui)', fontSize: '15px', lineHeight: 1.65, color: 'var(--slate-200)', maxWidth: '34ch', margin: '0 0 18px' }}>
              Empresa familiar mexicana con la mejor relación precio-calidad en persianas a la medida. 35 años de experiencia, garantía de 5 años en mecanismo e instalación gratuita.
            </p>
          </div>
          {col('Persianas', lineItems)}
          {col('Aprende', [{ label: 'Cómo elegir tu persiana', route: 'comparacion' }, { label: '¿Cuál persiana te conviene?', route: 'guia' }, { label: 'Guías y consejos', route: 'articulo' }, { label: 'Preguntas frecuentes', route: 'faq' }])}
          {col('Sucursales', window.PK_BRANCHES.map((b) => ({ label: b.name, route: 'contacto' })))}
        </div>
        <div style={{ borderTop: '1px solid var(--border-on-dark)', marginTop: '48px', paddingTop: '24px', display: 'flex', flexDirection: isMobile ? 'column' : 'row', gap: isMobile ? '10px' : 0, justifyContent: 'space-between', fontFamily: 'var(--font-ui)', fontSize: '13px', color: 'var(--slate-200)' }}>
          <span>© 2026 Pipeko. Todos los derechos reservados.</span>
          <span><a href="#" onClick={(e) => { e.preventDefault(); go('privacidad'); }} style={{ color: 'inherit', textDecoration: 'none' }}>Aviso de privacidad</a></span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { PKHeader: Header, PKFooter: Footer, PKWhatsApp: { number: WA_NUMBER, link: waLink }, PKWhatsAppIcon: WhatsAppIcon, usePKMobile: usePKMobile });