// Header.jsx — clean sticky header, gifting + enquiry led (no cart / no single-piece commerce)
const { useState, useEffect } = React;

function BBLogo({ size = 30, color = 'var(--bb-burgundy-deep)' }) {
  const _ch = (window.BB_CONTENT || {}).header || {};
  return (
    <button onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} style={{ display: 'flex', alignItems: 'center', gap: 11, background: 'transparent', border: 'none', cursor: 'pointer', padding: 0 }}>
      <img src={_ch.logo || 'assets/logo-queen.jpg'} alt="Blissful Bites"
        style={{ width: size + 6, height: size + 6, borderRadius: '50%', objectFit: 'cover', mixBlendMode: 'multiply', background: 'var(--bb-cream)' }} />
      <span style={{ display: 'flex', flexDirection: 'column', lineHeight: 1, gap: 3, textAlign: 'left' }}>
        <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 15, letterSpacing: '0.22em', color, textTransform: 'uppercase' }}>{_ch.brand || 'BLISSFUL BITES'}</span>
        <span style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 8, letterSpacing: '0.4em', color: 'var(--bb-gold-deep)' }}>{_ch.tagline || 'GIFTING CHOCOLATIERS · EST. 2023'}</span>
      </span>
    </button>
  );
}

const NAV = [
  { label: 'Same-Day Gifting', target: 'same-day' },
  { label: 'New Chocolates', target: 'collection' },
  { label: 'Corporate & Bulk', target: 'gifting' },
  { label: 'Weddings & Events', target: 'gifting' },
  { label: 'Our Story', target: 'journey' }
];

function NavLink({ children, target }) {
  const [hover, setHover] = useState(false);
  return (
    <button
      onClick={() => window.bbScrollTo(target)}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 11, letterSpacing: '0.22em',
        color: 'var(--bb-cocoa)', background: 'transparent', border: 'none', cursor: 'pointer', textTransform: 'uppercase',
        paddingBottom: 4, borderBottom: hover ? '1px solid var(--bb-gold)' : '1px solid transparent',
        transition: 'all 240ms cubic-bezier(0.22,0.61,0.36,1)'
      }}>{children}</button>
  );
}

function Header() {
  const _ch = (window.BB_CONTENT || {}).header || {};
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const phone    = _ch.phone  || '+91 95572 84086';
  const phoneHref = 'tel:' + phone.replace(/\s/g, '');

  return (
    <>
      <div style={{
        background: 'var(--bb-burgundy-deep)', color: 'var(--bb-gold-light)',
        textAlign: 'center', padding: '8px 16px', fontFamily: 'var(--font-display)', fontSize: 10, letterSpacing: '0.3em'
      }}>
        {_ch.banner || '✦   SAME-DAY DELIVERY IN 9 CITIES · BULK & CORPORATE FROM 25 BOXES · PAN-INDIA SHIPPING   ✦'}
      </div>
      <header style={{
        position: 'sticky', top: 0, zIndex: 50,
        background: 'rgba(250, 246, 236, 0.82)', backdropFilter: 'blur(14px) saturate(120%)',
        borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent',
        boxShadow: scrolled ? 'var(--shadow-1)' : 'none', transition: 'all 240ms'
      }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', padding: '14px 32px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24 }}>
          <BBLogo />
          <nav style={{ display: 'flex', gap: 28, alignItems: 'center' }} className="bb-nav-desktop">
            {NAV.map((n) => <NavLink key={n.label} target={n.target}>{n.label}</NavLink>)}
          </nav>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
            <a href={phoneHref} style={{
              fontFamily: 'var(--font-ui)', fontSize: 12, fontWeight: 500, letterSpacing: '0.04em',
              color: 'var(--bb-burgundy-deep)', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 7
            }} className="bb-call-link">
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92Z"/></svg>
              {phone}
            </a>
            <button className="btn btn-primary" onClick={() => window.bbEnquire('')} style={{ padding: '12px 22px' }}>Enquire Now</button>
          </div>
        </div>
      </header>
      <style>{`
        @media (max-width: 1080px) { .bb-nav-desktop { display: none !important; } }
        @media (max-width: 640px) { .bb-call-link { display: none !important; } }
      `}</style>
    </>
  );
}

window.Header = Header;
window.BBLogo = BBLogo;