// components/header.jsx — Ambady Pebbles Garden chrome

function Logo({ light }) {
  // Stacked-pebbles mark with a green sprout
  return (
    <a className="header__logo" href="#/" style={{ textDecoration: 'none' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <svg width="34" height="40" viewBox="0 0 34 40" fill="none" aria-hidden="true">
          {/* sprout */}
          <path d="M17 9c0-3 2.4-5.4 5.4-5.6C22.2 6.4 19.9 9 17 9z" fill="#3c6b2e"/>
          <path d="M17 9c0-2.6-2-4.7-4.7-4.9C12.5 6.7 14.5 9 17 9z" fill="#5a8a3a"/>
          <rect x="16.4" y="8" width="1.2" height="4" rx=".6" fill="#3c6b2e"/>
          {/* stacked stones */}
          <ellipse cx="17" cy="15.5" rx="6.5" ry="3.1" fill="#9c2f22"/>
          <ellipse cx="17" cy="22" rx="9" ry="3.8" fill="#7a2419"/>
          <ellipse cx="17" cy="29.5" rx="11.5" ry="4.4" fill="#9c2f22"/>
        </svg>
        <div>
          <div style={{ fontFamily: 'var(--sans)', fontWeight: 700, letterSpacing: '0.12em', fontSize: '1.5rem', lineHeight: 1, color: light ? 'var(--paper)' : 'var(--terra)' }}>AMBADY</div>
          <div style={{ fontSize: '9px', letterSpacing: '0.34em', textTransform: 'uppercase', color: light ? 'var(--sage)' : 'var(--forest)', marginTop: 3, fontWeight: 600 }}>Pebbles Garden</div>
        </div>
      </div>
    </a>
  );
}

function AnnouncementBar() {
  const msg = 'Coloured pebbles · White & black pebbles · Path stones · Buddha statues & planters  ·  Free shipping above ₹999  ·  Wholesale across India  ·  Call +91 7559 907 176';
  const repeated = [msg, msg, msg].join('  ◆  ');
  return (
    <div className="announce">
      <div className="announce__track">
        <span>{repeated}</span><span>{repeated}</span>
      </div>
    </div>
  );
}

function MegaPebbles() {
  return (
    <div className="mega mega--wide">
      <div className="mega__grid" style={{ gridTemplateColumns: '1fr 1fr 1fr 1.1fr' }}>
        <div className="mega__col">
          <h4>By colour</h4>
          <ul>
            <li><a href="#/collections/coloured-pebbles">Coloured pebbles</a></li>
            <li><a href="#/collections/white-pebbles">White pebbles</a></li>
            <li><a href="#/collections/black-pebbles">Black pebbles</a></li>
            <li><a href="#/collections/mixed-pebbles">Mixed pebbles</a></li>
          </ul>
        </div>
        <div className="mega__col">
          <h4>By type</h4>
          <ul>
            <li><a href="#/collections/natural-pebbles">Natural pebbles</a></li>
            <li><a href="#/collections/polished-pebbles">Polished pebbles</a></li>
            <li><a href="#/collections/glass-pebbles">Glass pebbles</a></li>
            <li><a href="#/collections/pebbles">All pebbles</a></li>
          </ul>
        </div>
        <div className="mega__col">
          <h4>Stones & chips</h4>
          <ul>
            <li><a href="#/collections/marble-chips">Marble chips</a></li>
            <li><a href="#/collections/gravel">Gravel</a></li>
            <li><a href="#/collections/lava-rock">Lava rock</a></li>
            <li><a href="#/collections/decorative-sand">Decorative sand</a></li>
          </ul>
        </div>
        <a className="mega__feature" href="#/collections/coloured-pebbles">
          <span className="eyebrow" style={{ color: 'var(--terra)' }}>Best sellers</span>
          <span className="label serif">Colour up<br/>your garden</span>
          <span className="sub">Glossy, UV-stable coloured pebbles for pots, paths and terrariums.</span>
          <span className="cta">Shop colours →</span>
        </a>
      </div>
    </div>
  );
}

function MegaSimple({ items, feature }) {
  return (
    <div className="mega">
      <div className="mega__grid" style={{ gridTemplateColumns: feature ? '1fr 1fr 1.1fr' : '1fr 1fr' }}>
        <div className="mega__col">
          <h4>{items[0].h}</h4>
          <ul>{items[0].l.map(([t, h]) => <li key={h}><a href={h}>{t}</a></li>)}</ul>
        </div>
        <div className="mega__col">
          <h4>{items[1].h}</h4>
          <ul>{items[1].l.map(([t, h]) => <li key={h}><a href={h}>{t}</a></li>)}</ul>
        </div>
        {feature}
      </div>
    </div>
  );
}

function MegaServices() {
  return (
    <div className="mega">
      <div className="mega__grid" style={{ gridTemplateColumns: '1fr 1.1fr' }}>
        <div className="mega__col">
          <h4>What we do</h4>
          <ul>
            <li><a href="#/services/bulk-supply">Bulk & wholesale</a></li>
            <li><a href="#/services/pot-styling">Pot styling</a></li>
            <li><a href="#/services/pathway-design">Pathway design</a></li>
            <li><a href="#/services/garden-decor">Garden decor setup</a></li>
          </ul>
        </div>
        <a className="mega__feature" href="#/services/bulk-supply"
           style={{ background: 'var(--forest)', color: 'var(--paper)' }}>
          <span className="eyebrow" style={{ color: 'var(--sage)' }}>For trade</span>
          <span className="label serif" style={{ color: 'var(--paper)' }}>Pebbles by<br/>the truckload</span>
          <span className="cta" style={{ color: 'var(--rose)' }}>Wholesale enquiry →</span>
        </a>
      </div>
    </div>
  );
}

function Header() {
  const store = useStore();
  const wishCount = store.state.wish.length;
  const cartCount = store.cartCount();

  return (
    <>
      <AnnouncementBar />
      <header className="header">
        <div className="container">
          <div className="header__inner">
            <div className="header__left">
              <button className="icon-btn mobile-only" onClick={() => store.openDrawer('menu')} aria-label="Menu">
                <Icon name="menu" />
              </button>
              <button className="icon-btn" onClick={() => store.openDrawer('search')} aria-label="Search">
                <Icon name="search" />
              </button>
              <a className="desktop-only" href="#/pages/contact" style={{ fontSize: '.78rem', color: 'var(--muted)', letterSpacing: '.05em' }}>
                +91 7559 907 176
              </a>
            </div>

            <Logo />

            <div className="header__right">
              <a className="icon-btn desktop-only" href="#/account" aria-label="Account">
                <Icon name="user" />
              </a>
              <button className="icon-btn" onClick={() => store.openDrawer('wish')} aria-label="Wishlist">
                <Icon name="heart" />
                {wishCount > 0 && <span className="badge">{wishCount}</span>}
              </button>
              <button className="icon-btn" onClick={() => store.openDrawer('cart')} aria-label="Cart">
                <Icon name="cart" />
                {cartCount > 0 && <span className="badge">{cartCount}</span>}
              </button>
            </div>
          </div>
        </div>

        <nav className="nav desktop-only">
          <div className="container">
            <div className="nav__inner">
              <div className="nav__item">
                <a className="nav__link" href="#/collections">Shop</a>
              </div>
              <div className="nav__item">
                <a className="nav__link" href="#/">Home</a>
              </div>
              <div className="nav__item">
                <a className="nav__link" href="#/collections/pebbles">Pebbles <Icon name="chev-down" className="chev" /></a>
                <MegaPebbles />
              </div>
              <div className="nav__item">
                <a className="nav__link" href="#/collections/stones-chips">Stones & Chips <Icon name="chev-down" className="chev" /></a>
                <MegaSimple
                  items={[
                    { h: 'Stones', l: [
                      ['Marble chips', '#/collections/marble-chips'],
                      ['Gravel', '#/collections/gravel'],
                      ['Lava rock', '#/collections/lava-rock']
                    ]},
                    { h: 'Fine & glass', l: [
                      ['Glass pebbles', '#/collections/glass-pebbles'],
                      ['Decorative sand', '#/collections/decorative-sand'],
                      ['All stones & chips', '#/collections/stones-chips']
                    ]}
                  ]}
                />
              </div>
              <div className="nav__item">
                <a className="nav__link" href="#/collections/path-stones">Path Stones <Icon name="chev-down" className="chev" /></a>
                <MegaSimple
                  items={[
                    { h: 'Stepping', l: [
                      ['Leaf stones', '#/collections/leaf-stones'],
                      ['Stepping stones', '#/collections/stepping-stones']
                    ]},
                    { h: 'Slabs', l: [
                      ['Walkway slabs', '#/collections/walkway-slabs'],
                      ['All path stones', '#/collections/path-stones']
                    ]}
                  ]}
                  feature={
                    <a className="mega__feature" href="#/collections/path-stones"
                       style={{ background: 'linear-gradient(160deg, var(--sage-2), var(--cream))' }}>
                      <span className="eyebrow" style={{ color: 'var(--forest)' }}>Walkways</span>
                      <span className="label serif">Beautiful<br/>garden paths</span>
                      <span className="cta">See path stones →</span>
                    </a>
                  }
                />
              </div>
              <div className="nav__item">
                <a className="nav__link" href="#/collections/pots-planters">Pots & Planters <Icon name="chev-down" className="chev" /></a>
                <MegaSimple
                  items={[
                    { h: 'Indoor', l: [
                      ['Tabletop pots', '#/collections/tabletop-pots'],
                      ['Ceramic pots', '#/collections/ceramic-pots']
                    ]},
                    { h: 'Outdoor', l: [
                      ['Stone planters', '#/collections/stone-planters'],
                      ['All pots & planters', '#/collections/pots-planters']
                    ]}
                  ]}
                />
              </div>
              <div className="nav__item">
                <a className="nav__link" href="#/collections/decor">Decor <Icon name="chev-down" className="chev" /></a>
                <MegaSimple
                  items={[
                    { h: 'Statues', l: [
                      ['Buddha statues', '#/collections/buddha']
                    ]},
                    { h: 'Fillers', l: [
                      ['Terrarium fillers', '#/collections/terrarium-fillers'],
                      ['Glass pebbles', '#/collections/glass-pebbles']
                    ]}
                  ]}
                />
              </div>
              <div className="nav__item">
                <a className="nav__link" href="#/collections/lawn-grass">Lawn & Grass</a>
              </div>
              <div className="nav__item">
                <a className="nav__link" href="#/services">Services <Icon name="chev-down" className="chev" /></a>
                <MegaServices />
              </div>
            </div>
          </div>
        </nav>
      </header>
    </>
  );
}

window.Header = Header;
window.Logo = Logo;