// Top-level chrome — viewport switcher, page selector, header, footer

function Icon({ name, size = 18, stroke = 1.6 }) {
  const paths = {
    search: <><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></>,
    user: <><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7"/></>,
    bag: <><path d="M5 8h14l-1 12H6L5 8Z"/><path d="M9 8V6a3 3 0 0 1 6 0v2"/></>,
    heart: <path d="M12 21s-7-4.5-9.5-9A5.5 5.5 0 0 1 12 6a5.5 5.5 0 0 1 9.5 6c-2.5 4.5-9.5 9-9.5 9Z"/>,
    heartFill: <path d="M12 21s-7-4.5-9.5-9A5.5 5.5 0 0 1 12 6a5.5 5.5 0 0 1 9.5 6c-2.5 4.5-9.5 9-9.5 9Z" fill="currentColor" stroke="currentColor"/>,
    menu: <><path d="M3 6h18"/><path d="M3 12h18"/><path d="M3 18h18"/></>,
    close: <><path d="M6 6l12 12"/><path d="M18 6 6 18"/></>,
    chevR: <path d="m9 6 6 6-6 6"/>,
    chevD: <path d="m6 9 6 6 6-6"/>,
    chevL: <path d="m15 6-6 6 6 6"/>,
    arrR: <><path d="M5 12h14"/><path d="m13 5 7 7-7 7"/></>,
    arrUR: <><path d="M7 17 17 7"/><path d="M8 7h9v9"/></>,
    plus: <><path d="M12 5v14"/><path d="M5 12h14"/></>,
    minus: <path d="M5 12h14"/>,
    check: <path d="m5 12 5 5L20 7"/>,
    star: <path d="m12 3 2.7 5.6 6.3.9-4.5 4.4 1 6.1L12 17l-5.5 3 1-6.1L3 9.5l6.3-.9L12 3Z"/>,
    starFill: <path d="m12 3 2.7 5.6 6.3.9-4.5 4.4 1 6.1L12 17l-5.5 3 1-6.1L3 9.5l6.3-.9L12 3Z" fill="currentColor"/>,
    chat: <><path d="M21 12a8 8 0 0 1-12.6 6.5L4 20l1.4-4.2A8 8 0 1 1 21 12Z"/></>,
    spark: <><path d="M12 2v6"/><path d="M12 16v6"/><path d="M2 12h6"/><path d="M16 12h6"/><path d="m5 5 4 4"/><path d="m15 15 4 4"/><path d="m5 19 4-4"/><path d="m15 9 4-4"/></>,
    leaf: <><path d="M11 20A7 7 0 0 1 4 13c0-5 4-9 16-9 0 8-4 16-9 16a7 7 0 0 1-3-1"/><path d="M19 4 4 19"/></>,
    moon: <path d="M20 14A8 8 0 1 1 10 4a6 6 0 0 0 10 10Z"/>,
    shield: <path d="M12 3 4 6v6c0 5 3.5 8.5 8 10 4.5-1.5 8-5 8-10V6l-8-3Z"/>,
    flame: <><path d="M12 22c-4 0-7-2.5-7-6.5 0-3 2-5 3-6 1.5 1.5 2 3 4-1 1 0 4 2 4 5.5 0 1-.5 2-1.5 2.5"/></>,
    brain: <><path d="M9 3a3 3 0 0 0-3 3v1a3 3 0 0 0-3 3v2a3 3 0 0 0 3 3v1a3 3 0 0 0 3 3h1V3H9Z"/><path d="M15 3a3 3 0 0 1 3 3v1a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3v1a3 3 0 0 1-3 3h-1V3h1Z"/></>,
    sun: <><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></>,
    desktop: <><rect x="2" y="4" width="20" height="13" rx="1.5"/><path d="M8 21h8"/><path d="M12 17v4"/></>,
    tablet: <><rect x="5" y="2" width="14" height="20" rx="2"/><path d="M11 18h2"/></>,
    mobile: <><rect x="7" y="2" width="10" height="20" rx="2"/><path d="M11 18h2"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round">
      {paths[name]}
    </svg>
  );
};

const Logo = ({ small }) => (
  <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1 }}>
    <span style={{ fontSize: small ? 17 : 22, fontWeight: 600, letterSpacing: '-0.04em' }}>
      nkherbal<span style={{ color: 'var(--gold)' }}>.</span>
    </span>
    <span className="mono" style={{ fontSize: 8, color: 'var(--muted)', marginTop: 3, letterSpacing: '0.1em' }}>est. 2008 · andheri, mumbai</span>
  </div>
);

// Top fixed chrome
function TopChrome({ viewport, setViewport, page, setPage, theme, toggleTheme }) {
  const pages = [
    'Home', 'Shop', 'Product', 'Cart', 'Checkout', 'About', 'Ingredients', 'Journal', 'Contact', 'Account'
  ];
  return (
    <div className="chrome">
      <div className="brand"><span className="brand-dot"/>nkherbal redesign · v1</div>
      <select className="page-sel" value={page} onChange={e => setPage(e.target.value)}>
        {pages.map(p => <option key={p} value={p}>{p}</option>)}
      </select>
      <div className="seg">
        {[
          { v: 'desktop', i: 'desktop', l: 'Desktop' },
          { v: 'tablet', i: 'tablet', l: 'Tablet' },
          { v: 'mobile', i: 'mobile', l: 'Mobile' },
        ].map(o => (
          <button key={o.v} aria-current={viewport === o.v} onClick={() => setViewport(o.v)} title={o.l}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              <Icon name={o.i} size={12} stroke={1.8}/>{o.l}
            </span>
          </button>
        ))}
      </div>
      <div className="spacer"/>
      <button className="iconbtn" onClick={toggleTheme} title="Toggle theme">
        <Icon name={theme === 'dark' ? 'sun' : 'moon'} size={14}/>
      </button>
    </div>
  );
};

// Site header (inside the viewport)
function Header({ vp, page, goto, openCart, openSearch, cartCount, openQuiz }) {
  const [mobileNav, setMobileNav] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);
  const isMobile = vp === 'mobile';

  React.useEffect(() => {
    const el = document.querySelector('.viewport');
    if (!el) return;
    const onScroll = () => setScrolled(el.scrollTop > 60);
    el.addEventListener('scroll', onScroll, { passive: true });
    return () => el.removeEventListener('scroll', onScroll);
  }, []);

  const isHome = page === 'Home';
  const headerBg = (isHome && !scrolled) ? 'transparent' : 'var(--bg)';
  const headerShadow = (!isHome || scrolled) ? '0 1px 20px rgba(0,0,0,0.07)' : 'none';
  const isTablet = vp === 'tablet';

  const navItems = [
    { id: 'Shop', label: 'Shop' },
    { id: 'Ingredients', label: 'Ingredients' },
    { id: 'About', label: 'Our Story' },
    { id: 'Journal', label: 'Journal' },
    { id: 'Contact', label: 'Contact' },
  ];

  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 50, background: 'var(--bg)', borderBottom: '1px solid var(--line)', boxShadow: '0 2px 16px rgba(42,32,26,0.08)', transition: 'box-shadow 0.3s ease' }}>
      {/* announcement bar */}
      <div style={{ background: 'var(--primary)', color: 'var(--primary-ink)', padding: '8px 0', overflow: 'hidden', position: 'relative' }}>
        <style>{`
          @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
          .marquee-track { display: flex; width: max-content; animation: marquee 22s linear infinite; }
          .marquee-track:hover { animation-play-state: paused; }
        `}</style>
        <div className="marquee-track">
          {[0,1].map(i => (
            <div key={i} className="mono" style={{ display: 'flex', alignItems: 'center', gap: 0, fontSize: 10, letterSpacing: '0.14em', whiteSpace: 'nowrap' }}>
              {[
                'FREE SHIPPING ACROSS INDIA',
                'USE CODE SAVE499 · SAVE ₹499 ON EVERY ORDER',
                'FSSAI APPROVED · ISO 9001-2015',
                'COLD-PROCESSED · NO PRESERVATIVES',
                'FREE SHIPPING ACROSS INDIA',
                'USE CODE SAVE499 · SAVE ₹499 ON EVERY ORDER',
                'FSSAI APPROVED · ISO 9001-2015',
                'COLD-PROCESSED · NO PRESERVATIVES',
              ].map((text, j) => (
                <span key={j} style={{ display: 'inline-flex', alignItems: 'center', gap: 20, padding: '0 24px' }}>
                  {text}
                  <span style={{ opacity: 0.4 }}>✦</span>
                </span>
              ))}
            </div>
          ))}
        </div>
      </div>

      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: isMobile ? '14px 20px' : isTablet ? '18px 32px' : '20px 48px', gap: isMobile ? 12 : 24, maxWidth: 1440, margin: '0 auto' }}>
        <button onClick={() => goto('Home')} style={{ textAlign: 'left' }}>
          <Logo small={isMobile}/>
        </button>

        {!isMobile && (
          <nav style={{ display: 'flex', gap: isTablet ? 20 : 36, alignItems: 'center' }}>
            {navItems.map(n => (
              <button key={n.id} onClick={() => goto(n.id)} className="nav-link" data-active={page === n.id ? 'true' : 'false'} style={{ fontSize: 14, fontWeight: 450, color: page === n.id ? 'var(--primary)' : 'var(--ink-2)', paddingBottom: 4, transition: 'color 0.2s', whiteSpace: 'nowrap' }}>
                {n.label}
              </button>
            ))}
          </nav>
        )}

        <div style={{ display: 'flex', alignItems: 'center', gap: isMobile ? 10 : 14 }}>
          {!isMobile && !isTablet && (
            <button className="btn btn-ghost btn-sm" onClick={openQuiz} style={{ borderColor: 'var(--ink)' }}>
              <Icon name="spark" size={13}/> Find my paste
            </button>
          )}
          <button className="icon-btn" onClick={openSearch} aria-label="Search"><Icon name="search" size={isMobile ? 18 : 19}/></button>
          {!isMobile && <button className="icon-btn" onClick={() => goto('Account')} aria-label="Account"><Icon name="user" size={19}/></button>}
          <button className="icon-btn" onClick={openCart} aria-label="Cart" style={{ position: 'relative' }}>
            <Icon name="bag" size={isMobile ? 18 : 19}/>
            {cartCount > 0 && <span style={{ position: 'absolute', top: -6, right: -8, background: 'var(--accent)', color: '#fff', borderRadius: 999, fontSize: 9, padding: '2px 5px', fontWeight: 600, minWidth: 16, textAlign: 'center', fontFamily: 'var(--font-mono)' }}>{cartCount}</span>}
          </button>
          {isMobile && (
            <button className={`icon-btn${mobileNav ? ' ham-open' : ''}`} onClick={() => setMobileNav(o => !o)} aria-label="Menu" style={{ display: 'flex', flexDirection: 'column', gap: 4, padding: 8, alignItems: 'center', justifyContent: 'center' }}>
              <span className="ham-line"/>
              <span className="ham-line"/>
              <span className="ham-line"/>
            </button>
          )}
        </div>
      </div>

      {mobileNav && (
        <div style={{ position: 'fixed', inset: 0, background: 'var(--bg)', zIndex: 100, padding: '20px', display: 'flex', flexDirection: 'column' }}>
          <div className="between" style={{ marginBottom: 32 }}>
            <Logo small/>
            <button onClick={() => setMobileNav(false)}><Icon name="close" size={22}/></button>
          </div>
          <nav className="col gap-2">
            {navItems.map(n => (
              <button key={n.id} onClick={() => { goto(n.id); setMobileNav(false); }} style={{ textAlign: 'left', padding: '20px 0', fontSize: 28, fontWeight: 500, letterSpacing: '-0.03em', borderBottom: '1px solid var(--line-soft)' }}>{n.label}</button>
            ))}
          </nav>
          <div style={{ marginTop: 'auto', display: 'flex', flexDirection: 'column', gap: 12 }}>
            <button className="btn btn-primary" onClick={() => { openQuiz(); setMobileNav(false); }}><Icon name="spark" size={14}/> Find my paste</button>
            <button className="btn btn-ghost" onClick={() => { goto('Account'); setMobileNav(false); }}>My account</button>
          </div>
        </div>
      )}
    </header>
  );
};

// Footer
function Footer({ vp, goto }) {
  const isMobile = vp === 'mobile';
  return (
    <footer style={{ background: 'var(--ink)', color: 'var(--bg)', marginTop: 80 }}>
      <div className="container" style={{ padding: isMobile ? '48px 20px' : '80px 48px' }}>
        {/* big mark */}
        <div className="footer-logo" style={{ fontSize: isMobile ? 56 : 'clamp(80px, 12vw, 180px)', fontWeight: 500, letterSpacing: '-0.05em', lineHeight: 0.9, marginBottom: 48 }}>
          nkherbal<span className="footer-dot-jump" style={{ WebkitTextFillColor: '#b8945e', color: '#b8945e' }}>.</span>
        </div>

        <div className="grid" style={{ gridTemplateColumns: isMobile ? '1fr' : 'repeat(4, 1fr)', gap: isMobile ? 32 : 48 }}>
          <div>
            <div className="mono" style={{ color: 'var(--muted)', marginBottom: 16 }}>Stay close</div>
            <p style={{ fontSize: 14, marginBottom: 16, color: 'color-mix(in oklab, var(--bg) 80%, transparent)', lineHeight: 1.5 }}>One thoughtful letter a month. Sourcing diaries, recipes, and quiet recommendations.</p>
            <div style={{ display: 'flex', gap: 8, borderBottom: '1px solid color-mix(in oklab, var(--bg) 30%, transparent)', paddingBottom: 8 }}>
              <input placeholder="your email" style={{ background: 'transparent', border: 'none', outline: 'none', color: 'var(--bg)', flex: 1, fontSize: 14 }}/>
              <button style={{ color: 'var(--bg)' }}><Icon name="arrR" size={18}/></button>
            </div>
          </div>
          <div>
            <div className="mono" style={{ color: 'var(--muted)', marginBottom: 16 }}>Shop</div>
            <div className="col gap-2">
              {['All pastes', 'Muejaza For Men', 'Shahi Kalp', 'Kashmiri Shilajit', 'Testo-Vardhak', 'Combo'].map(x => (
                <button key={x} onClick={() => goto('Shop')} className="footer-link" style={{ textAlign: 'left', fontSize: 14, opacity: 0.85 }}>{x}</button>
              ))}
            </div>
          </div>
          <div>
            <div className="mono" style={{ color: 'var(--muted)', marginBottom: 16 }}>House</div>
            <div className="col gap-2">
              {[['Our story','About'], ['Ingredients','Ingredients'], ['Journal','Journal'], ['Wholesale','Contact'], ['Press kit','Contact']].map(([l,p]) => (
                <button key={l} onClick={() => goto(p)} className="footer-link" style={{ textAlign: 'left', fontSize: 14, opacity: 0.85 }}>{l}</button>
              ))}
            </div>
          </div>
          <div>
            <div className="mono" style={{ color: 'var(--muted)', marginBottom: 16 }}>Care</div>
            <div className="col gap-2">
              {[['Track order','Contact'], ['Shipping','Contact'], ['Returns','Contact'], ['FAQs','Contact'], ['Contact','Contact'], ['+91 80 4567 8901','Contact']].map(([l,p]) => (
                <button key={l} onClick={() => goto(p)} className="footer-link" style={{ textAlign: 'left', fontSize: 14, opacity: 0.85 }}>{l}</button>
              ))}
            </div>
          </div>
        </div>

        <div className="divider" style={{ background: 'color-mix(in oklab, var(--bg) 18%, transparent)', margin: '48px 0 24px' }}/>
        <div style={{ display: 'flex', flexDirection: isMobile ? 'column' : 'row', gap: 16, alignItems: isMobile ? 'flex-start' : 'center', justifyContent: 'space-between' }}>
          <div className="mono" style={{ color: 'var(--muted)', fontSize: 10 }}>© 2026 nkherbal · all paste, no filler</div>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            {window.CERTS.map(c => (
              <span key={c} className="mono" style={{ fontSize: 9, color: 'var(--muted)', border: '1px solid color-mix(in oklab, var(--bg) 20%, transparent)', padding: '3px 8px', borderRadius: 999 }}>{c}</span>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
};

window.Icon = Icon;
window.Logo = Logo;
window.TopChrome = TopChrome;
window.Header = Header;
window.Footer = Footer;