/* ── Navigation — Single Page Scroll + Spy ── */

function Navigation({ cart, setCartOpen, cartOpen, productOpen }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [activeSection, setActiveSection] = React.useState('hero');
  const [mobileOpen, setMobileOpen] = React.useState(false);

  /* Distinct item count for badge */
  const cartCount = cart.length;

  const cartTotal = cart.reduce((s, i) => {
    if (i.totalPrice != null) return s + i.totalPrice;
    const unit = i.unitPrice || i.salePrice || i.price || 0;
    const qty  = typeof i.selectedQty === 'number' ? i.selectedQty : 1;
    return s + unit * qty;
  }, 0);

  /* Scroll spy */
  React.useEffect(() => {
    const sections = ['hero', 'shop', 'custom', 'partner', 'contact'];
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) setActiveSection(e.target.id);
      });
    }, { rootMargin: '-40% 0px -55% 0px' });

    sections.forEach(id => {
      const el = document.getElementById(id);
      if (el) obs.observe(el);
    });
    return () => obs.disconnect();
  }, []);

  /* Scrolled state */
  React.useEffect(() => {
    const h = () => setScrolled(window.scrollY > 60);
    window.addEventListener('scroll', h, { passive: true });
    return () => window.removeEventListener('scroll', h);
  }, []);

  /* Lock body scroll when mobile menu open */
  React.useEffect(() => {
    document.body.style.overflow = mobileOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [mobileOpen]);

  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (!el) return;
    const top = el.getBoundingClientRect().top + window.scrollY - 76;
    window.scrollTo({ top, behavior: 'smooth' });
    setMobileOpen(false);
  };

  const NAV_LINKS = [
    { id: 'hero',    label: 'Home' },
    { id: 'shop',    label: 'Shop' },
    { id: 'custom',  label: 'Custom Orders' },
    { id: 'partner', label: 'Partnership' },
    { id: 'contact', label: 'Contact' },
  ];

  return React.createElement(React.Fragment, null,
    React.createElement('header', {
      className: 'cc-nav' + (scrolled ? ' scrolled' : '') + (productOpen ? ' nav-behind-overlay' : ''),
    },
      React.createElement('div', { className: 'cc-nav-inner' },
        /* Logo */
        React.createElement('button', {
          className: 'cc-logo', onClick: () => scrollTo('hero'), 'aria-label': 'Home',
        },
          React.createElement('img', {
            src: 'assets/logo-horizontal-dark.png',
            alt: 'Candescent Cinders Studio',
            className: 'cc-logo-img',
          }),
        ),
        /* Desktop links */
        React.createElement('nav', { className: 'cc-nav-links' },
          NAV_LINKS.map(({ id, label }) =>
            React.createElement('button', {
              key: id,
              className: 'cc-nav-link' + (activeSection === id ? ' active' : ''),
              onClick: () => scrollTo(id),
            }, label)
          ),
        ),
        /* Right actions */
        React.createElement('div', { className: 'cc-nav-actions' },
          React.createElement('button', {
            className: 'cc-nav-icon-btn', 'aria-label': 'Search',
          },
            React.createElement('svg', { width: 18, height: 18, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.5 },
              React.createElement('circle', { cx: 11, cy: 11, r: 7 }),
              React.createElement('line', { x1: 16.5, y1: 16.5, x2: 21, y2: 21 }),
            ),
          ),
          React.createElement('button', {
            className: 'cc-cart-btn', onClick: () => setCartOpen(!cartOpen), 'aria-label': 'Cart',
          },
            React.createElement('svg', { width: 20, height: 20, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.5 },
              React.createElement('path', { d: 'M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z' }),
              React.createElement('line', { x1: 3, y1: 6, x2: 21, y2: 6 }),
              React.createElement('path', { d: 'M16 10a4 4 0 01-8 0' }),
            ),
            cartCount > 0 && React.createElement('span', { className: 'cc-cart-badge' }, cartCount),
          ),
          React.createElement('button', {
            className: 'cc-hamburger' + (mobileOpen ? ' open' : ''),
            onClick: () => setMobileOpen(!mobileOpen), 'aria-label': 'Menu',
          },
            React.createElement('span', null),
            React.createElement('span', null),
            React.createElement('span', null),
          ),
        ),
      ),
    ),

    /* Mobile menu — full screen with staggered links */
    React.createElement('div', { className: 'cc-mobile-menu' + (mobileOpen ? ' open' : ''), 'aria-hidden': !mobileOpen },
      React.createElement('div', { className: 'cc-mobile-menu-links' },
        NAV_LINKS.map(({ id, label }, i) =>
          React.createElement('button', {
            key: id,
            className: 'cc-mobile-link',
            style: { '--i': i },
            onClick: () => scrollTo(id),
          }, label)
        ),
      ),
      React.createElement('div', { className: 'cc-mobile-menu-footer' },
        React.createElement('a', { href: 'https://candescentcinders.etsy.com', target: '_blank', rel: 'noreferrer', className: 'cc-mobile-social-link' }, 'Etsy'),
        React.createElement('a', { href: '#', className: 'cc-mobile-social-link' }, 'Instagram'),
        React.createElement('a', { href: '#', className: 'cc-mobile-social-link' }, 'Pinterest'),
      ),
    ),

    /* Cart drawer */
    React.createElement(CartDrawer, { cart, cartOpen, setCartOpen }),
  );
}

function CartDrawer({ cart, cartOpen, setCartOpen }) {
  const [cartItems, setCartItems] = React.useState(cart);

  React.useEffect(() => { setCartItems(cart); }, [cart]);

  const total = cart.reduce((s, i) => {
    if (i.totalPrice != null) return s + i.totalPrice;
    const unit = i.unitPrice || i.salePrice || i.price || 0;
    const qty  = typeof i.selectedQty === 'number' ? i.selectedQty : 1;
    return s + unit * qty;
  }, 0);

  return React.createElement(React.Fragment, null,
    React.createElement('div', {
      className: 'cc-cart-overlay' + (cartOpen ? ' open' : ''),
      onClick: () => setCartOpen(false),
    }),
    React.createElement('aside', { className: 'cc-cart-drawer' + (cartOpen ? ' open' : '') },
      React.createElement('div', { className: 'cc-cart-header' },
        React.createElement('h3', null, 'Your Cart'),
        React.createElement('button', { onClick: () => setCartOpen(false), className: 'cc-cart-close' }, '×'),
      ),
      cart.length === 0
        ? React.createElement('div', { className: 'cc-cart-empty' },
            React.createElement('div', { className: 'cc-cart-empty-icon' },
              React.createElement('svg', { width: 40, height: 40, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1 },
                React.createElement('path', { d: 'M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z' }),
                React.createElement('line', { x1: 3, y1: 6, x2: 21, y2: 6 }),
                React.createElement('path', { d: 'M16 10a4 4 0 01-8 0' }),
              ),
            ),
            React.createElement('p', null, 'Your cart is empty'),
            React.createElement('button', {
              className: 'cc-btn cc-btn-outline',
              style: { marginTop: '1rem', fontSize: '0.72rem' },
              onClick: () => { setCartOpen(false); document.getElementById('shop') && window.scrollTo({ top: document.getElementById('shop').getBoundingClientRect().top + window.scrollY - 76, behavior: 'smooth' }); },
            }, 'Browse Collection'),
          )
        : React.createElement(React.Fragment, null,
            React.createElement('div', { className: 'cc-cart-items' },
              cart.map((item, i) =>
                React.createElement('div', { key: i, className: 'cc-cart-item' },
                  React.createElement('div', { className: 'cc-cart-item-img' },
                    React.createElement(CandlePlaceholder, { product: item }),
                  ),
                  React.createElement('div', { className: 'cc-cart-item-info' },
                    React.createElement('p', { className: 'cc-cart-item-name' }, item.name),
                    React.createElement('p', { className: 'cc-cart-item-meta' },
                      [item.selectedColor, item.selectedScent].filter(Boolean).join(' · ')
                    ),
                    React.createElement('div', { className: 'cc-cart-item-row' },
                      React.createElement('span', { className: 'cc-cart-item-qty-label' },
                        'Qty: ' + (item.selectedQty || 1),
                      ),
                      React.createElement('span', { className: 'cc-cart-item-price' },
                        '$' + (() => {
                          if (item.totalPrice != null) return item.totalPrice.toFixed(2);
                          const unit = item.unitPrice || item.salePrice || item.price || 0;
                          const qty  = typeof item.selectedQty === 'number' ? item.selectedQty : 1;
                          return (unit * qty).toFixed(2);
                        })(),
                      ),
                    ),
                  ),
                )
              ),
            ),
            React.createElement('div', { className: 'cc-cart-footer' },
              React.createElement('div', { className: 'cc-cart-total' },
                React.createElement('span', null, 'Total'),
                React.createElement('span', null, '$' + total.toFixed(2)),
              ),
              React.createElement('button', { className: 'cc-btn cc-btn-primary cc-btn-full' }, 'Checkout'),
              React.createElement('p', { className: 'cc-cart-note' }, 'Shipping & taxes calculated at checkout'),
            ),
          ),
    ),
  );
}

window.Navigation = Navigation;
window.CartDrawer = CartDrawer;