// Top announcement bar + main nav
const AnnouncementBar = () => (
  <div style={{
    background: 'var(--brown-900)',
    color: 'var(--cream-50)',
    fontSize: 12,
    letterSpacing: '0.12em',
    textTransform: 'uppercase',
    fontWeight: 500,
  }}>
    <div style={{
      maxWidth: 'var(--maxw)', margin: '0 auto', padding: '9px 28px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20,
    }}>
      <span style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <Icon name="truck" size={14} strokeWidth={1.8}/>
        Free shipping on orders over $50
      </span>
      <span style={{ opacity: 0.7 }}>Baked fresh &middot; Ships right away</span>
      <span style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <Icon name="sparkle" size={14} strokeWidth={1.8}/>
        New: Cookie Craving Club
      </span>
    </div>
  </div>
);

const NavDropdown = ({ label, href, items }) => {
  const [open, setOpen] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setOpen(true)}
      onMouseLeave={() => setOpen(false)}
      style={{ position: 'relative' }}
    >
      <a href={href} style={{
        display: 'flex', alignItems: 'center', gap: 6,
        padding: '12px 0', fontSize: 15, fontWeight: 500, color: 'var(--brown-800)',
      }}>
        {label}
        <Icon name="chevron-down" size={14} strokeWidth={2}/>
      </a>
      {open && (
        <div className="fadeup" style={{
          position: 'absolute', top: '100%', left: -14, paddingTop: 6,
          minWidth: 220, zIndex: 60,
        }}>
          <div style={{
            background: '#fff', borderRadius: 14,
            boxShadow: 'var(--shadow-md)',
            border: '1px solid var(--brown-100)',
            padding: 8,
          }}>
            {items.map((it, i) => (
              <a key={i} href={it.href} {...(it.external ? EXTERNAL_LINK_PROPS : {})} style={{
                display: 'block', padding: '10px 14px', borderRadius: 8,
                fontSize: 14, fontWeight: 500, color: 'var(--brown-800)',
              }}
              onMouseEnter={e => e.currentTarget.style.background = 'var(--cream-50)'}
              onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
              >{it.label}</a>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

const Header = ({ cartCount = 0, onCartClick }) => {
  const nav = [
    {
      label: 'Cookies',
      href: SITE.live.allFlavors,
      items: [
        { label: 'Shop All Flavors', href: SITE.live.allFlavors, external: true },
        { label: 'Original Gooey Butter', href: SITE.products.original, external: true },
        { label: 'Chocolate Gooey Butter', href: SITE.products.chocolate, external: true },
        { label: 'Peanut Butter Chocolate Chip', href: SITE.products.peanutButter, external: true },
        { label: "'Taste it All' Variety Pack", href: SITE.products.tasteItAll, external: true },
      ],
    },
    {
      label: 'Order',
      href: SITE.live.allCookies,
      items: [
        { label: 'Shop All Cookies', href: SITE.live.allCookies, external: true },
        { label: 'Gift a Box', href: SITE.local.gift },
        { label: 'Bulk & Corporate', href: SITE.local.corporate },
        { label: 'Visit a Store', href: SITE.local.visit },
      ],
    },
    {
      label: 'Club',
      href: SITE.local.club,
      items: [
        { label: 'Cookie Craving Club', href: SITE.local.club },
        { label: 'How It Works', href: SITE.local.club + '#how' },
        { label: 'Gift the Club', href: SITE.local.gift + '#builder' },
        { label: 'Current Live Landing', href: SITE.live.club, external: true },
      ],
    },
    {
      label: 'About',
      href: SITE.local.about,
      items: [
        { label: 'Our Story', href: SITE.local.about },
        { label: 'Visit Rosie’s Place', href: SITE.local.visit },
        { label: 'Get in Touch', href: SITE.live.contact, external: true },
      ],
    },
  ];

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(255,255,255,0.96)',
      backdropFilter: 'blur(8px)',
      borderBottom: '1px solid var(--brown-100)',
    }}>
      <AnnouncementBar />
      <div className="container" style={{
        display: 'grid', gridTemplateColumns: '1fr auto 1fr',
        alignItems: 'center', padding: '18px 28px', gap: 24,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 28 }}>
          {nav.map((item) => (
            <NavDropdown key={item.label} label={item.label} href={item.href} items={item.items} />
          ))}
        </div>

        <a href={SITE.local.home} style={{ display: 'inline-flex', justifyContent: 'center' }}>
          <Logo size={0.85} />
        </a>

        <div style={{ display: 'flex', alignItems: 'center', gap: 10, justifyContent: 'flex-end' }}>
          <a href={SITE.local.corporate} style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            padding: '9px 16px', border: '1.5px solid var(--brown-300)',
            borderRadius: 999, fontSize: 13.5, fontWeight: 500, color: 'var(--brown-800)',
          }}>
            <Icon name="gift" size={16}/>
            <span>Corporate Gifting</span>
          </a>
          <a href={SITE.live.account} {...EXTERNAL_LINK_PROPS} style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '9px 14px', border: '1.5px solid var(--brown-300)',
            borderRadius: 999, fontSize: 13.5, fontWeight: 500, color: 'var(--brown-800)',
          }}>
            <Icon name="user" size={16}/> Account
          </a>
          <button onClick={onCartClick} style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '9px 16px', background: 'var(--brown-700)', color: '#fff',
            borderRadius: 999, fontSize: 13.5, fontWeight: 600,
          }}>
            <Icon name="bag" size={16} stroke="#fff"/>
            ${cartCount === 0 ? '0.00' : (cartCount * 27).toFixed(2)} ({cartCount})
          </button>
        </div>
      </div>
    </header>
  );
};

Object.assign(window, { Header });