// Winkz Designs 2026, site chrome (sticky glass header + footer)
(function () {
  const { useState, useEffect } = React;
  const WD = window.WinkzDesignsDesignSystem_9bd28b || {};
  const Icon = window.Icon;
  const GRAD = 'linear-gradient(120deg,#F23BFE,#79BAFF,#2DE3EA)';
  const LOGO = 'assets/logo-mark.png';
  const LOCKUP = 'assets/logo-mark.png';

  const NAV = [['Home', 'home'], ['Services', 'services'], ['Work', 'portfolio'], ['Industries', 'industries'], ['Process', 'process'], ['Trust', 'trust'], ['About', 'about']];

  function Logo({ onNavigate, size = 30 }) {
    return (
      <div onClick={() => onNavigate('home')} style={{ display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer' }}>
        <img src={LOGO} alt="Winkz Designs" style={{ height: size, width: 'auto', display: 'block', filter: 'drop-shadow(0 0 16px rgba(242,59,254,0.30))' }} />
        <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1, gap: 5 }}>
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 19, letterSpacing: '-0.03em', color: '#fff', whiteSpace: 'nowrap' }}>Winkz Designs</span>
          <span style={{ display: 'flex', alignItems: 'center', gap: 8, width: '100%' }}>
            <span style={{ flex: 1, minWidth: 8, height: 1, background: 'rgba(255,255,255,0.18)' }} />
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 8.5, textTransform: 'uppercase', letterSpacing: '0.2em', color: 'rgba(255,255,255,0.55)', whiteSpace: 'nowrap' }}>Websites &amp; AI</span>
          </span>
        </div>
      </div>
    );
  }

  function SiteHeader({ route, onNavigate }) {
    const [scrolled, setScrolled] = useState(false);
    const [open, setOpen] = useState(false);
    useEffect(() => {
      const on = () => setScrolled(window.scrollY > 24);
      window.addEventListener('scroll', on, { passive: true }); on();
      return () => window.removeEventListener('scroll', on);
    }, []);
    return (
      <header style={{ position: 'sticky', top: 0, zIndex: 100, transition: 'all .35s ease' }}>
        <div style={{
          background: scrolled ? 'rgba(10,10,13,0.82)' : 'transparent',
          backdropFilter: scrolled ? 'blur(16px)' : 'none', WebkitBackdropFilter: scrolled ? 'blur(16px)' : 'none',
          borderBottom: '1px solid ' + (scrolled ? 'rgba(255,255,255,0.08)' : 'transparent'), transition: 'all .35s ease',
        }}>
          <div className="wrap" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 72 }}>
            <Logo onNavigate={onNavigate} />
            <nav className="hdr-nav" style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
              {NAV.map(([label, r]) => {
                const active = route === r;
                return (
                  <button key={r} onClick={() => onNavigate(r)} style={{
                    background: 'none', border: 'none', cursor: 'pointer', padding: '8px 11px', borderRadius: 8,
                    fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 14,
                    color: active ? '#fff' : 'var(--text-secondary)', position: 'relative', transition: 'color .2s',
                  }}
                    onMouseEnter={e => e.currentTarget.style.color = '#fff'}
                    onMouseLeave={e => e.currentTarget.style.color = active ? '#fff' : 'var(--text-secondary)'}>
                    {label}
                    {active && <span style={{ position: 'absolute', left: 14, right: 14, bottom: 2, height: 2, borderRadius: 2, background: GRAD }} />}
                  </button>
                );
              })}
            </nav>
            <div className="hdr-cta" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <button onClick={() => onNavigate('login')} className="wk-login">
                <Icon n="UserRound" s={14} color="currentColor" strokeWidth={2.2} />
                Client login
              </button>
              <button onClick={() => onNavigate('contact')} className="wk-cta wk-cta-sm">
                Book a call
                <span className="wk-chip"><Icon n="ArrowUpRight" s={14} color="#fff" strokeWidth={2.4} /></span>
              </button>
            </div>
            <button className="hdr-burger" onClick={() => setOpen(o => !o)} style={{ display: 'none', background: 'none', border: '1px solid rgba(255,255,255,0.14)', borderRadius: 9, width: 40, height: 40, cursor: 'pointer', alignItems: 'center', justifyContent: 'center' }}>
              <Icon n={open ? 'X' : 'Menu'} s={20} color="#fff" />
            </button>
          </div>
          {open && (
            <div className="hdr-mobile" style={{ padding: '8px 32px 20px', display: 'none', flexDirection: 'column', gap: 4 }}>
              {NAV.concat([['Contact', 'contact']]).map(([label, r]) => (
                <button key={r} onClick={() => { onNavigate(r); setOpen(false); }} style={{ textAlign: 'left', background: 'none', border: 'none', color: route === r ? '#fff' : 'var(--text-secondary)', fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 16, padding: '12px 0', cursor: 'pointer', borderBottom: '1px solid rgba(255,255,255,0.06)' }}>{label}</button>
              ))}
              <div className="hdr-mobile-cta" style={{ display: 'flex', gap: 10, marginTop: 14, flexWrap: 'wrap' }}>
                <button onClick={() => { onNavigate('login'); setOpen(false); }} className="wk-ghost" style={{ flex: '1 1 150px', minWidth: 150, padding: '14px 18px', fontSize: 15 }}>
                  <Icon n="UserRound" s={15} color="#2DE3EA" strokeWidth={2.2} /> Client login
                </button>
                <button onClick={() => { onNavigate('contact'); setOpen(false); }} className="wk-cta" style={{ flex: '1 1 160px', minWidth: 160, padding: '8px 8px 8px 18px', fontSize: 15 }}>
                  Book a call
                  <span className="wk-chip"><Icon n="ArrowUpRight" s={14} color="#fff" strokeWidth={2.4} /></span>
                </button>
              </div>
            </div>
          )}
        </div>
        <style>{`
          @media (max-width:1040px){
            .hdr-nav,.hdr-cta{display:none!important}
            .hdr-burger{display:flex!important}
            .hdr-mobile{display:flex!important}
          }
          @media (max-width:430px){
            .hdr-mobile-cta>button{flex:1 1 100%!important;min-width:0!important;justify-content:center}
          }
        `}</style>
      </header>
    );
  }

  function SiteFooter({ onNavigate }) {
    const col = (title, links) => (
      <div>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.14em', color: 'var(--winkz-cyan)', marginBottom: 16 }}>{title}</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
          {links.map(([l, r]) => (
            <span key={l} onClick={() => r && onNavigate(r)} style={{ fontSize: 14, color: 'var(--text-secondary)', cursor: r ? 'pointer' : 'default' }}
              onMouseEnter={e => e.currentTarget.style.color = '#fff'} onMouseLeave={e => e.currentTarget.style.color = 'var(--text-secondary)'}>{l}</span>
          ))}
        </div>
      </div>
    );
    return (
      <footer style={{ position: 'relative', zIndex: 2, borderTop: '1px solid rgba(255,255,255,0.08)', marginTop: 40, background: 'linear-gradient(180deg, transparent, rgba(12,12,15,0.6))' }}>
        <div className="wrap" style={{ padding: '64px 32px 112px' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr 1fr', gap: 32, alignItems: 'start' }} className="ft-grid">
            <div style={{ maxWidth: 300 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
                <img src={LOGO} alt="Winkz Designs" style={{ height: 28 }} />
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, letterSpacing: '-0.02em' }}>Winkz Designs</span>
              </div>
              <p style={{ fontSize: 14, color: 'var(--text-secondary)', lineHeight: 1.65, margin: '0 0 18px' }}>A website &amp; AI design agency. We build the sites, custom tools and AI systems that fill the gaps in your business.</p>
              <a href="mailto:design@winkzdesigns.com" style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--winkz-blue)' }}>design@winkzdesigns.com</a>
            </div>
            {col('Studio', [['Services', 'services'], ['Work', 'portfolio'], ['Industries', 'industries'], ['About', 'about'], ['Contact', 'contact']])}
            {col('Connect', [['Book a call', 'contact'], ['Client login', 'login'], ['Instagram', null], ['LinkedIn', null], ['Dribbble', null]])}
            {col('Build', [['Website design', 'seo-website-design'], ['Custom CRM', 'seo-custom-crm'], ['AI chat & voice', 'seo-ai-agents'], ['Brand identity', 'seo-brand-identity'], ['AI SEO', 'seo-ai-seo']])}
            {col('Industries', [['E-commerce', 'niche-ecommerce'], ['Home & local services', 'niche-home-services'], ['Professional services', 'niche-professional-services'], ['Startups & SaaS', 'niche-startups'], ['Tampa, FL', 'tampa']])}
          </div>
          <div style={{ marginTop: 48, paddingTop: 24, borderTop: '1px solid rgba(255,255,255,0.06)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12, fontSize: 13, color: 'var(--text-muted)' }}>
            <span>© 2026 Winkz Designs. All rights reserved.</span>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12 }}>Your vision, our creation.</span>
          </div>
        </div>
        <style>{`@media (max-width:900px){.ft-grid{grid-template-columns:1fr 1fr!important;gap:32px!important}}`}</style>
      </footer>
    );
  }

  /* Floating "Start your project" pill — follows the visitor down the whole page */
  function StickyCTA({ onNavigate }) {
    const [show, setShow] = useState(false);
    const [closed, setClosed] = useState(false);
    useEffect(() => {
      const onScroll = () => setShow((window.scrollY || 0) > window.innerHeight * 0.6);
      onScroll();
      window.addEventListener('scroll', onScroll, { passive: true });
      return () => window.removeEventListener('scroll', onScroll);
    }, []);
    const on = show && !closed;
    return (
      <div className="wk-follow" style={{
        position: 'fixed', left: 24, bottom: 27, zIndex: 60, pointerEvents: on ? 'auto' : 'none',
        transform: on ? 'none' : 'translateY(24px) scale(0.94)', opacity: on ? 1 : 0,
        transition: 'transform .5s cubic-bezier(.22,1,.36,1), opacity .35s ease',
      }}>
        <button onClick={() => onNavigate('contact')} className="wk-cta wk-follow-btn">
          <span className="wk-chip wk-chip-lg"><Icon n="Sparkles" s={16} color="#fff" strokeWidth={2.3} /></span>
          <span className="wk-follow-copy">
            <span className="wk-follow-title">Start your project</span>
            <span className="wk-follow-sub">Free 30-min build review</span>
          </span>
          <Icon n="ArrowUpRight" s={16} color="#0A0410" strokeWidth={2.6} />
        </button>
        <button onClick={() => setClosed(true)} aria-label="Dismiss" className="wk-follow-x"><Icon n="X" s={12} color="currentColor" /></button>
      </div>
    );
  }

  Object.assign(window, { SiteHeader, SiteFooter, StickyCTA });
})();