// ============================================================
// Chrome: Nav, Footer, CartDrawer, Toast
// ============================================================

const { useState, useEffect, useCallback, useRef } = React;

// ---- Icons ----
const Icon = {
  cart: (p) => <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.8" {...p}><path d="M3 4h2l2.5 12.5a2 2 0 0 0 2 1.5h8a2 2 0 0 0 2-1.5L21 8H6"/><circle cx="10" cy="21" r="1.5"/><circle cx="18" cy="21" r="1.5"/></svg>,
  search: (p) => <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.8" {...p}><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>,
  close: (p) => <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" {...p}><path d="M6 6l12 12M18 6 6 18"/></svg>,
  plus: (p) => <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" {...p}><path d="M12 5v14M5 12h14"/></svg>,
  minus: (p) => <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" {...p}><path d="M5 12h14"/></svg>,
  arrow: (p) => <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" {...p}><path d="M5 12h14M13 6l6 6-6 6"/></svg>,
  check: (p) => <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2.4" {...p}><path d="m4 12 5 5L20 6"/></svg>,
  menu: (p) => <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.8" {...p}><path d="M4 7h16M4 12h16M4 17h16"/></svg>,
  bolt: (p) => <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><path d="M13 2 4 14h7l-1 8 9-12h-7l1-8Z"/></svg>,
  shield: (p) => <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><path d="M12 2 4 5v7c0 5 3.5 8.5 8 10 4.5-1.5 8-5 8-10V5l-8-3Z"/></svg>,
  palette: (p) => <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><circle cx="12" cy="12" r="9"/><circle cx="7.5" cy="10.5" r="1.2"/><circle cx="12" cy="7.5" r="1.2"/><circle cx="16.5" cy="10.5" r="1.2"/><path d="M14 16a2 2 0 1 0 4 0c0-1-1-1-1-2s2-1 2-3"/></svg>,
  globe: (p) => <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.5 3 4 6 4 9s-1.5 6-4 9c-2.5-3-4-6-4-9s1.5-6 4-9Z"/></svg>,
  phone: (p) => <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><rect x="6" y="2" width="12" height="20" rx="3"/><path d="M10 18h4"/></svg>,
  android: (p) => <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor" {...p}><path d="M17.6 9.5 19 7.1a.4.4 0 0 0-.7-.4l-1.4 2.5a8.4 8.4 0 0 0-7.8 0L7.7 6.7a.4.4 0 0 0-.7.4l1.4 2.4A6.5 6.5 0 0 0 5 14.5h14a6.5 6.5 0 0 0-3.4-5Zm-8.4 3a.8.8 0 1 1 0-1.5.8.8 0 0 1 0 1.5Zm5.6 0a.8.8 0 1 1 0-1.5.8.8 0 0 1 0 1.5Z"/></svg>,
  wifi: (p) => <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><path d="M2 9a15 15 0 0 1 20 0M5 13a10 10 0 0 1 14 0M8 17a5 5 0 0 1 8 0"/><circle cx="12" cy="20" r="1.2" fill="currentColor"/></svg>,
  truck: (p) => <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><path d="M3 6h11v10H3zM14 9h4l3 3v4h-7"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></svg>,
  spark: (p) => <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5 18 18M6 18l2.5-2.5M15.5 8.5 18 6"/></svg>,
  whatsapp: (p) => <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor" {...p}><path d="M17.5 14.4c-.3-.1-1.8-.9-2-1-.3-.1-.5-.1-.7.1-.2.3-.8 1-1 1.2-.2.2-.4.2-.7.1-.3-.1-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6.1-.1.3-.4.4-.5.1-.2.2-.3.3-.5.1-.2.1-.4 0-.5-.1-.1-.7-1.7-1-2.3-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1 2.9 1.2 3.1c.1.2 2 3.1 4.9 4.3.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.5-.1 1.8-.7 2-1.5.2-.7.2-1.4.2-1.5-.1-.2-.3-.3-.6-.4ZM12 22.1c-1.7 0-3.3-.5-4.8-1.3l-5.3 1.4 1.4-5.2C2.4 15.4 1.9 13.7 1.9 12c0-5.6 4.5-10.1 10.1-10.1S22.1 6.4 22.1 12 17.6 22.1 12 22.1Z"/></svg>,
  mail: (p) => <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>,
};

// ---- Pinwheel mark (echoes the logo's X) ----
function Pinwheel({ size = 24 }) {
  return (
    <svg viewBox="0 0 100 100" width={size} height={size} aria-hidden="true">
      <defs>
        <linearGradient id="pw-grad" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#6D0FC5"/>
          <stop offset="60%" stopColor="#C813AC"/>
          <stop offset="100%" stopColor="#E13F92"/>
        </linearGradient>
      </defs>
      <g fill="url(#pw-grad)">
        <path d="M50 50 L20 10 Q40 30 50 50 Z"/>
        <path d="M50 50 L90 20 Q70 40 50 50 Z"/>
        <path d="M50 50 L80 90 Q60 70 50 50 Z"/>
        <path d="M50 50 L10 80 Q30 60 50 50 Z"/>
      </g>
    </svg>
  );
}

// ---- Nav ----
function Nav({ route, navigate, cartCount, openCart }) {
  const [menuOpen, setMenuOpen] = useState(false);
  const links = [
    { id: 'home', label: 'Home' },
    { id: 'series-lumen', label: 'Lumen' },
    { id: 'series-chroma', label: 'Chroma' },
    { id: 'series-beacon', label: 'Beacon' },
    { id: 'shop', label: 'Shop' },
    { id: 'app', label: 'App' },
    { id: 'about', label: 'About' },
  ];
  function go(id) {
    setMenuOpen(false);
    navigate(id);
  }
  return (
    <header className="nav">
      <div className="nav-inner">
        <a className="nav-logo" href="#home" onClick={(e) => { e.preventDefault(); go('home'); }}>
          <Pinwheel size={28}/>
          <span>vivid<span className="grad-text" style={{fontWeight: 700}}>pix</span></span>
        </a>
        <nav className="nav-links" aria-label="Primary">
          {links.map(l => (
            <a key={l.id}
               className={`nav-link ${route === l.id ? 'active' : ''}`}
               href={`#${l.id}`}
               onClick={(e) => { e.preventDefault(); go(l.id); }}>
              {l.label}
            </a>
          ))}
        </nav>
        <div className="nav-actions">
          <a className="icon-btn nav-wa" href={waGeneralEnquiry()} target="_blank" rel="noopener noreferrer" aria-label="Chat on WhatsApp" style={{ color: '#25D366' }} title="Chat on WhatsApp">
            <Icon.whatsapp/>
          </a>
          <button className="icon-btn" aria-label="Cart" onClick={openCart}>
            <Icon.cart/>
            {cartCount > 0 && <span className="cart-badge">{cartCount}</span>}
          </button>
          <button className="icon-btn nav-burger" aria-label="Menu" aria-expanded={menuOpen} onClick={() => setMenuOpen(!menuOpen)}>
            {menuOpen ? <Icon.close/> : <Icon.menu/>}
          </button>
        </div>
      </div>
      {menuOpen && (
        <div className="nav-mobile-menu" onClick={(e) => { if (e.target === e.currentTarget) setMenuOpen(false); }}>
          <nav className="nav-mobile-inner" aria-label="Mobile">
            {links.map(l => (
              <a key={l.id}
                 className={`nav-mobile-link ${route === l.id ? 'active' : ''}`}
                 href={`#${l.id}`}
                 onClick={(e) => { e.preventDefault(); go(l.id); }}>
                {l.label}
              </a>
            ))}
            <a className="btn" style={{ background: '#25D366', color: 'white', marginTop: 16, justifyContent: 'center' }} href={waGeneralEnquiry()} target="_blank" rel="noopener noreferrer">
              <Icon.whatsapp/> Chat on WhatsApp
            </a>
          </nav>
        </div>
      )}
    </header>
  );
}

// ---- Footer ----
function Footer({ navigate }) {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <div className="nav-logo" style={{ marginBottom: 16 }}>
              <Pinwheel size={28}/>
              <span>vivid<span className="grad-text" style={{fontWeight: 700}}>pix</span></span>
            </div>
            <p style={{ color: 'var(--fg-2)', fontSize: 14, lineHeight: 1.6, maxWidth: 320 }}>
              LED matrix displays for storefronts, venues and facades. Controlled from your phone, no PC required.
            </p>
            <div className="flex gap-2 mt-6">
              <span className="chip"><Icon.android/> Android</span>
              <span className="chip"><Icon.globe/> Web App</span>
            </div>
          </div>
          <div>
            <h4>Series</h4>
            <ul>
              <li><a href="#series-lumen" onClick={(e) => { e.preventDefault(); navigate('series-lumen'); }}>Lumen — Compact</a></li>
              <li><a href="#series-chroma" onClick={(e) => { e.preventDefault(); navigate('series-chroma'); }}>Chroma — Mid</a></li>
              <li><a href="#series-beacon" onClick={(e) => { e.preventDefault(); navigate('series-beacon'); }}>Beacon — Pro</a></li>
            </ul>
          </div>
          <div>
            <h4>Shop</h4>
            <ul>
              <li><a href="#shop" onClick={(e) => { e.preventDefault(); navigate('shop'); }}>All products</a></li>
              <li><a href="#shop" onClick={(e) => { e.preventDefault(); navigate('shop'); }}>Bestsellers</a></li>
              <li><a href="#shop" onClick={(e) => { e.preventDefault(); navigate('shop'); }}>Accessories</a></li>
              <li><a href="#shop" onClick={(e) => { e.preventDefault(); navigate('shop'); }}>Bulk pricing</a></li>
            </ul>
          </div>
          <div>
            <h4>Support</h4>
            <ul>
              <li><a href="#about" onClick={(e) => { e.preventDefault(); navigate('about'); }}>Installation</a></li>
              <li><a href="#about" onClick={(e) => { e.preventDefault(); navigate('about'); }}>Warranty</a></li>
              <li><a href="#about" onClick={(e) => { e.preventDefault(); navigate('about'); }}>Downloads</a></li>
              <li><a href="#about" onClick={(e) => { e.preventDefault(); navigate('about'); }}>Contact</a></li>
            </ul>
          </div>
          <div>
            <h4>Talk to us</h4>
            <ul>
              <li><a href={waGeneralEnquiry()} target="_blank" rel="noopener noreferrer" style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                <span style={{ color: '#25D366' }}><Icon.whatsapp/></span> WhatsApp
              </a></li>
              <li><a href={`mailto:${SITE.email}`} style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}><Icon.mail/> {SITE.email}</a></li>
              <li style={{ color: 'var(--fg-3)', fontSize: 12 }}>{SITE.whatsappHours}</li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 VividPix Technologies Pvt. Ltd.</span>
          <span>Made for the world's signage · v2.6</span>
        </div>
      </div>
    </footer>
  );
}

// ---- Cart Drawer ----
function CartDrawer({ open, onClose, items, updateQty, removeItem, navigate }) {
  const subtotal = items.reduce((s, it) => s + it.price * it.qty, 0);
  const shipping = subtotal > 25000 ? 0 : 499;
  const total = subtotal + shipping;
  return (
    <>
      <div className={`drawer-backdrop ${open ? 'open' : ''}`} onClick={onClose}/>
      <aside className={`drawer ${open ? 'open' : ''}`}>
        <div className="drawer-head">
          <div className="flex items-center gap-3">
            <Icon.cart/>
            <h3 style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 600 }}>Your Cart</h3>
            <span className="font-mono" style={{ color: 'var(--fg-2)', fontSize: 12 }}>{items.length} item{items.length !== 1 ? 's' : ''}</span>
          </div>
          <button className="icon-btn" onClick={onClose} aria-label="Close"><Icon.close/></button>
        </div>
        <div className="drawer-body">
          {items.length === 0 ? (
            <div style={{ padding: '64px 16px', textAlign: 'center', color: 'var(--fg-2)' }}>
              <div style={{ display: 'inline-grid', placeItems: 'center', width: 64, height: 64, borderRadius: '50%', background: 'var(--bg-3)', marginBottom: 16 }}>
                <Icon.cart/>
              </div>
              <p>Your cart is empty.</p>
              <button className="btn btn-secondary mt-4" onClick={() => { onClose(); navigate('shop'); }}>Browse displays</button>
            </div>
          ) : (
            <div className="col gap-4">
              {items.map(it => (
                <div key={it.id} style={{ display: 'grid', gridTemplateColumns: '80px 1fr', gap: 14, padding: 14, background: 'var(--bg-2)', borderRadius: 'var(--r-md)', border: '1px solid var(--line)' }}>
                  <div style={{ background: '#000', borderRadius: 8, padding: 6, display: 'grid', placeItems: 'center' }}>
                    <img src={it.image} alt={it.name} style={{ width: '100%', height: 60, objectFit: 'contain' }}/>
                  </div>
                  <div className="col gap-2">
                    <div className="flex justify-between">
                      <div>
                        <div style={{ fontWeight: 600, fontSize: 14 }}>{it.name}</div>
                        <div className="font-mono" style={{ fontSize: 11, color: 'var(--fg-2)', marginTop: 2 }}>{it.sku}</div>
                      </div>
                      <button onClick={() => removeItem(it.id)} style={{ background: 'transparent', border: 0, color: 'var(--fg-3)', cursor: 'pointer', padding: 0 }} aria-label="Remove"><Icon.close/></button>
                    </div>
                    <div className="flex justify-between items-center">
                      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 0, background: 'var(--bg-3)', borderRadius: 999, padding: 2 }}>
                        <button onClick={() => updateQty(it.id, it.qty - 1)} style={{ width: 28, height: 28, borderRadius: '50%', border: 0, background: 'transparent', color: 'var(--fg-1)', display: 'grid', placeItems: 'center' }}><Icon.minus/></button>
                        <span style={{ minWidth: 24, textAlign: 'center', fontFamily: 'var(--font-mono)', fontSize: 13 }}>{it.qty}</span>
                        <button onClick={() => updateQty(it.id, it.qty + 1)} style={{ width: 28, height: 28, borderRadius: '50%', border: 0, background: 'transparent', color: 'var(--fg-1)', display: 'grid', placeItems: 'center' }}><Icon.plus/></button>
                      </div>
                      <div style={{ fontFamily: 'var(--font-mono)', fontWeight: 600 }}>{formatPrice(it.price * it.qty)}</div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
        {items.length > 0 && (
          <div className="drawer-foot">
            <div className="col gap-2" style={{ fontSize: 14 }}>
              <div className="flex justify-between"><span style={{ color: 'var(--fg-2)' }}>Subtotal</span><span className="font-mono">{formatPrice(subtotal)}</span></div>
              <div className="flex justify-between"><span style={{ color: 'var(--fg-2)' }}>Shipping</span><span className="font-mono">{shipping === 0 ? 'Free' : formatPrice(shipping)}</span></div>
              <div className="flex justify-between" style={{ marginTop: 8, paddingTop: 12, borderTop: '1px solid var(--line)', fontSize: 16, fontWeight: 600 }}>
                <span>Total</span><span className="font-mono">{formatPrice(total)}</span>
              </div>
            </div>
            <a className="btn btn-primary btn-lg" href={waCartEnquiry(items)} target="_blank" rel="noopener noreferrer" style={{ width: '100%', justifyContent: 'center', marginTop: 16, background: '#25D366', color: 'white', boxShadow: '0 10px 28px -6px rgba(37,211,102,0.45)' }}>
              <Icon.whatsapp/> Continue on WhatsApp · {formatPrice(total)}
            </a>
            <p style={{ fontSize: 11, color: 'var(--fg-3)', textAlign: 'center', marginTop: 10, fontFamily: 'var(--font-mono)' }}>
              We'll confirm your order on WhatsApp · 2-year warranty · Free shipping over ₹25,000
            </p>
          </div>
        )}
      </aside>
    </>
  );
}

// ---- Floating WhatsApp button ----
function FloatingWhatsApp() {
  return (
    <a
      href={waGeneralEnquiry()}
      target="_blank"
      rel="noopener noreferrer"
      aria-label="Chat with us on WhatsApp"
      className="floating-wa"
      style={{
        position: 'fixed',
        bottom: 24,
        right: 24,
        zIndex: 90,
        display: 'inline-flex',
        alignItems: 'center',
        gap: 10,
        padding: '14px 20px 14px 16px',
        background: '#25D366',
        color: 'white',
        borderRadius: 999,
        fontFamily: 'var(--font-body)',
        fontSize: 14,
        fontWeight: 600,
        boxShadow: '0 12px 32px -8px rgba(37,211,102,0.55), 0 4px 12px rgba(0,0,0,0.1)',
        textDecoration: 'none',
        transition: 'transform .2s, box-shadow .2s',
      }}
      onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-2px)'; }}
      onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; }}
    >
      <span style={{ width: 24, height: 24, display: 'grid', placeItems: 'center' }}><Icon.whatsapp/></span>
      <span className="fwa-label">Chat with us</span>
    </a>
  );
}

// ---- Toast ----
function Toast({ message, show }) {
  return (
    <div className={`toast ${show ? 'show' : ''}`}>
      <span className="toast-dot"/>
      {message}
    </div>
  );
}

Object.assign(window, { Nav, Footer, CartDrawer, Toast, Icon, Pinwheel, FloatingWhatsApp });
