/* global React */
// Shared bits: Logo, Ticker, Nav, Footer, icons

const { useEffect, useState, useRef } = React;

// ---------- Inline icon set (Lucide-ish, 1.5px stroke, currentColor) ----------
const Icon = ({ name, size = 18, className = '', style }) => {
  const s = size;
  const props = {
    width: s, height: s, viewBox: '0 0 24 24',
    fill: 'none', stroke: 'currentColor', strokeWidth: 1.5,
    strokeLinecap: 'round', strokeLinejoin: 'round',
    className, style,
  };
  switch (name) {
    case 'arrow-right': return (
      <svg {...props}><path d="M5 12h14M13 5l7 7-7 7"/></svg>
    );
    case 'arrow-down': return (
      <svg {...props}><path d="M12 5v14M5 13l7 7 7-7"/></svg>
    );
    case 'scan': return (
      <svg {...props}><path d="M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2M7 12h10"/></svg>
    );
    case 'tag': return (
      <svg {...props}><path d="M20.59 13.41L13.42 20.58a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><circle cx="7" cy="7" r="1"/></svg>
    );
    case 'file-down': return (
      <svg {...props}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M12 18v-6M9 15l3 3 3-3"/></svg>
    );
    case 'check': return (
      <svg {...props}><path d="M20 6L9 17l-5-5"/></svg>
    );
    case 'plus': return (
      <svg {...props}><path d="M12 5v14M5 12h14"/></svg>
    );
    case 'minus': return (
      <svg {...props}><path d="M5 12h14"/></svg>
    );
    case 'spark': return (
      <svg {...props}><path d="M12 3l2.4 6.6L21 12l-6.6 2.4L12 21l-2.4-6.6L3 12l6.6-2.4L12 3z"/></svg>
    );
    case 'shield': return (
      <svg {...props}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
    );
    case 'wallet': return (
      <svg {...props}><path d="M21 12V7H5a2 2 0 0 1 0-4h14v4"/><path d="M3 5v14a2 2 0 0 0 2 2h16v-5"/><circle cx="17" cy="14" r="1.5"/></svg>
    );
    case 'phone': return (
      <svg {...props}><rect x="6" y="2" width="12" height="20" rx="2"/><path d="M11 18h2"/></svg>
    );
    default: return null;
  }
};

// ---------- Top nav ----------
const Nav = () => (
  <header style={{
    position: 'sticky', top: 0, zIndex: 50,
    backdropFilter: 'blur(12px)',
    background: 'oklch(0.145 0 0 / 0.7)',
    borderBottom: '1px solid var(--hairline)',
  }}>
    <div className="wrap" style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      height: 64,
    }}>
      <a href="#top" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <Logomark size={28} />
        <span style={{ fontWeight: 500, fontSize: 17, letterSpacing: '-0.01em' }}>
          KickScanner
        </span>
        <span className="pill pill-dim" style={{ marginLeft: 6 }}>Beta</span>
      </a>
      <nav style={{ display: 'flex', alignItems: 'center', gap: 28 }}
           className="nav-links">
        <a href="#how" className="nav-link">How it works</a>
        <a href="#features" className="nav-link">Features</a>
        <a href="#faq" className="nav-link">FAQ</a>
        <a href="#cta" className="btn btn-primary" style={{ padding: '10px 16px', fontSize: 14 }}>
          Request access <Icon name="arrow-right" size={14} />
        </a>
      </nav>
    </div>
    <style>{`
      .nav-link { font-size: 14px; color: var(--muted-fg); transition: color 120ms; }
      .nav-link:hover { color: var(--foreground); }
      @media (max-width: 720px) { .nav-links a:not(.btn):not(:first-child) { display: none; } }
    `}</style>
  </header>
);

// ---------- Logomark: stylized "K" + scan corner brackets ----------
const Logomark = ({ size = 32 }) => (
  <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
    {/* corner brackets */}
    <path d="M4 8 V4 H8" stroke="currentColor" strokeWidth="1.5" />
    <path d="M28 8 V4 H24" stroke="currentColor" strokeWidth="1.5" />
    <path d="M4 24 V28 H8" stroke="currentColor" strokeWidth="1.5" />
    <path d="M28 24 V28 H24" stroke="currentColor" strokeWidth="1.5" />
    {/* K letter */}
    <path d="M11 9 V23 M11 16 L19 9 M11 16 L19 23"
          stroke="var(--brand)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

// ---------- Live ticker (mono, sneaker SKUs + prices) ----------
// Prices reflect typical late-2025/early-2026 StockX low-comp ranges. Real
// production pull is live — these are seed-only.
const TICKER_DATA = [
  { sku: 'DZ5485-612', name: 'AJ1 Retro High OG "Lost & Found"', price: 385, delta: '+2.8%' },
  { sku: 'HQ4540',     name: 'Yeezy Boost 350 V2 "Onyx"',         price: 235, delta: '-1.6%' },
  { sku: 'B75806',     name: 'Samba OG "White / Black"',          price: 118, delta: '+0.9%' },
  { sku: 'DD1391-100', name: 'Dunk Low "Panda"',                  price: 112, delta: '+1.4%' },
  { sku: 'GY6602',     name: 'Adidas x Wales Bonner Samba',       price: 295, delta: '+5.1%' },
  { sku: 'M1906RB',    name: 'NB 1906R "Black Castlerock"',       price: 138, delta: '-0.4%' },
  { sku: '3WD30280871',name: 'On Cloudmonster 2',                 price: 175, delta: '+1.1%' },
  { sku: 'CU1110-010', name: 'AJ4 Retro "Black Cat" (2020)',      price: 412, delta: '+3.7%' },
  { sku: 'HQ8708',     name: 'Adidas Campus 00s "Core Black"',    price: 122, delta: '+0.6%' },
  { sku: '1123202BBLC',name: 'HOKA Bondi 8',                      price: 162, delta: '-0.2%' },
];

const Ticker = () => {
  const items = [...TICKER_DATA, ...TICKER_DATA]; // duplicate for seamless loop
  return (
    <div className="ticker">
      <div className="ticker-track">
        {items.map((it, i) => {
          const up = it.delta.startsWith('+');
          return (
            <span key={i} className="ticker-item">
              <span className="upper" style={{ color: 'var(--dim-fg)' }}>{it.sku}</span>
              <span style={{ color: 'var(--foreground)', fontFamily: 'var(--font-sans)' }}>{it.name}</span>
              <span className="price">${it.price}</span>
              <span className={up ? 'delta-up' : 'delta-dn'}>{it.delta}</span>
              <span className="sep">·</span>
            </span>
          );
        })}
      </div>
    </div>
  );
};

// ---------- Footer ----------
const Footer = () => (
  <footer style={{ borderTop: '1px solid var(--hairline)', padding: '40px 0', marginTop: 80 }}>
    <div className="wrap" style={{
      display: 'flex', flexWrap: 'wrap', gap: 24,
      justifyContent: 'space-between', alignItems: 'center',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <Logomark size={22} />
        <span className="mono upper" style={{ fontSize: 11, color: 'var(--muted-fg)' }}>
          Built by sellers · for sellers
        </span>
      </div>
      <div className="mono" style={{ display: 'flex', gap: 24, fontSize: 12, color: 'var(--muted-fg)' }}>
        <a href="#" style={{ textDecoration: 'none' }}>@kickscanner</a>
        <a href="mailto:hi@kicksscanner.com">hi@kicksscanner.com</a>
        <a href="https://kicksscanner.com">kicksscanner.com</a>
        <span>© 2026 KickScanner</span>
      </div>
    </div>
  </footer>
);

// expose
Object.assign(window, { Icon, Nav, Logomark, Ticker, Footer, TICKER_DATA });