/* global React */
const { useState, useEffect, useRef, useMemo } = React;

// ========== ATOMS ==========
function Logo({ size = 36, light = false }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
      <img src="assets/lion-mark.png" alt="LITO" style={{ width: size, height: size, objectFit: 'contain' }}/>
      <span className="display" style={{
        fontSize: size * 0.72,
        fontWeight: 700,
        letterSpacing: '0.14em',
        color: light ? 'var(--cream)' : 'var(--ink)',
        fontFamily: 'Space Grotesk, sans-serif',
        textTransform: 'uppercase'
      }}>LITO<sup style={{ fontSize: size * 0.25, marginLeft: 2, verticalAlign: 'super' }}>®</sup></span>
    </div>
  );
}

function Pill({ children, accent }) {
  return (
    <span className="pill">
      {accent !== false && <span className="dot"></span>}
      {children}
    </span>
  );
}

function Nav() {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <Logo size={36}/>
        <div className="nav-links" style={{ display: 'flex', gap: 32 }}>
          <a href="#finder">Find my phone</a>
          <a href="/category/screens">Screens</a>
          <a href="/category/power">Power</a>
          <a href="/category/watch">Watch</a>
          <a href="/category/stylus">Stylus</a>
          <a href="#compare">Compare</a>
        </div>
        <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
          <button aria-label="Search" data-action="search" style={{ background: 'transparent', border: 0, cursor: 'pointer', color: 'var(--ink)', padding: 10, display: 'flex', alignItems: 'center' }}>
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg>
          </button>
          <button aria-label="Account" data-action="account" style={{ background: 'transparent', border: 0, cursor: 'pointer', color: 'var(--ink)', padding: 10, display: 'flex', alignItems: 'center' }}>
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
          </button>
          <button aria-label="Bag" data-action="bag" style={{ position: 'relative', background: 'transparent', border: 0, cursor: 'pointer', color: 'var(--ink)', padding: 10, display: 'flex', alignItems: 'center' }}>
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"></path><path d="M3 6h18"></path><path d="M16 10a4 4 0 0 1-8 0"></path></svg>
            <span data-bag-count style={{ position: 'absolute', top: 2, right: 2, background: 'var(--ink)', color: 'var(--cream)', fontFamily: 'JetBrains Mono, monospace', fontSize: 9, minWidth: 16, height: 16, padding: '0 4px', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', letterSpacing: 0 }}>0</span>
          </button>
        </div>
      </div>
    </nav>
  );
}

function Ticker() {
  const items = [
    'FREE SHIPPING · ORDERS ABOVE ₹999',
    'CASH ON DELIVERY',
    'INSTALLATION GUARANTEED',
    '4–9 DAY DELIVERY · PAN INDIA',
    '3-DAY EASY RETURNS',
    'MADE IN INDIA · SINCE 2019',
  ];
  const doubled = [...items, ...items];
  return (
    <div className="ticker">
      <div className="marquee-track">
        {doubled.map((t, i) => (
          <span key={i} className="mono" style={{ display: 'inline-flex', alignItems: 'center', gap: 60 }}>
            {t}<span style={{ color: 'var(--steel)' }}>◆</span>
          </span>
        ))}
      </div>
    </div>
  );
}

// ========== HERO ==========
function HeroFlagship({ variant = 'A' }) {
  return (
    <section className="section pad-lg" style={{ position: 'relative', overflow: 'hidden' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 80, alignItems: 'center' }}>
          <div>
            <h1 className="display" style={{ fontSize: 'clamp(64px, 8.5vw, 140px)', margin: 0, textWrap: 'balance', color: 'var(--ink)' }}>
              Nobody's<br/>
              <span className="italic-accent" style={{ color: 'var(--violet)' }}>watching</span><br/>
              your screen.
            </h1>
            <p style={{ fontSize: 19, maxWidth: 480, marginTop: 36, lineHeight: 1.55, color: 'var(--muted)', textWrap: 'pretty' }}>
              The LITO D+ Privacy Glass blacks out your display from every angle but dead center. 9H tempered. Oleophobic. Installed in 60 seconds — guaranteed bubble-free.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 40, alignItems: 'center' }}>
              <a href="/category/screens" className="btn lg" style={{ textDecoration: 'none' }}>Shop Privacy — ₹2,098</a>
              <a href="/category/all" className="btn ghost lg" style={{ textDecoration: 'none' }}>Browse all →</a>
            </div>
          </div>

          <div className="hero-disc" style={{ position: 'relative', aspectRatio: '1/1', width: '100%', maxWidth: 600, margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <div style={{
              position: 'absolute', inset: 0,
              background: 'var(--ink)',
              borderRadius: '50%',
              boxShadow: '0 30px 60px rgba(0,0,0,0.25)'
            }}/>
            <div style={{
              position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
              width: '76%', aspectRatio: '1/1',
              background: '#fff',
              borderRadius: '50%',
              display: 'flex', alignItems: 'center', justifyContent: 'center'
            }}>
              <img src="assets/privacy-iphone-transparent.png" alt="LITO Privacy Screen Protector"
                style={{ width: '96%', height: '96%', objectFit: 'contain' }}/>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Stat({ n, label }) {
  return (
    <div>
      <div className="display" style={{ fontSize: 44, color: 'var(--ink)' }}>{n}</div>
      <div className="mono" style={{ color: 'var(--muted)', marginTop: 6 }}>{label}</div>
    </div>
  );
}

Object.assign(window, { Logo, Pill, Nav, Ticker, HeroFlagship, Stat });