// Home page — hero, trust strip, featured grid, why us, live feed

function Hero({ go }) {
  return (
    <section className="relative overflow-hidden">
      <div className="absolute inset-0 grid-bg opacity-40 pointer-events-none" />
      <div className="max-w-[1280px] mx-auto px-5 md:px-8 pt-12 md:pt-20 pb-14 md:pb-20 relative">
        <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-8">
          <div className="max-w-3xl">
            <h1 className="text-5xl md:text-7xl font-semibold leading-[0.95] tracking-tight">
              Digital goods.<br/>
              <span style={{ color: 'var(--accent)' }}>Paid in crypto.</span><br/>
              Delivered in minutes.
            </h1>
            <p className="mt-6 text-lg md:text-xl text-white/65 max-w-2xl text-pretty">
              Subscriptions, keys, and upgrades for every major service — fulfilled automatically the moment your payment confirms. No accounts, no tracking, no staff in the loop.
            </p>
            <div className="mt-8 flex flex-col sm:flex-row gap-3">
              <button onClick={() => go('catalog')} className="btn-primary px-5 py-3.5 text-[15px] inline-flex items-center gap-2">
                Browse catalog <Icon name="arrow" size={14} />
              </button>
              <button onClick={() => go('track')} className="btn-ghost px-5 py-3.5 text-[15px] inline-flex items-center gap-2">
                <Icon name="receipt" size={14} /> Track an order
              </button>
            </div>
          </div>
          <div className="hidden md:flex flex-col items-end gap-3">
            <div className="glass rounded-xl p-5 w-[320px]">
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-lg flex items-center justify-center" style={{ background: 'rgba(153,69,255,0.12)', color: '#9945ff', border: '1px solid rgba(153,69,255,0.25)' }}>
                  <Icon name="bolt" size={18} />
                </div>
                <div>
                  <div className="text-sm font-medium">Pay with Solana</div>
                  <div className="text-[11px] text-white/50 mono">Sub-second settlement · low fees</div>
                </div>
              </div>
              <div className="mt-4 pt-4 border-t text-xs text-white/55" style={{ borderColor: 'var(--line)' }}>
                Every product below is fulfilled automatically the moment your SOL payment confirms.
              </div>
            </div>
          </div>
        </div>

        <TrustStrip />
      </div>
    </section>
  );
}

function TrustStrip() {
  return (
    <div className="mt-14 md:mt-20 grid grid-cols-1 md:grid-cols-3 gap-[1px] rounded-2xl overflow-hidden hairline stagger" style={{ background: 'var(--line)' }}>
      {[
        { k: 'Avg. delivery time', v: '2m 47s', sub: 'across last 10,000 orders' },
        { k: 'Rating', v: '4.87 / 5', sub: '12,842 verified reviews' },
        { k: 'Replacement rate', v: '0.21%', sub: 'auto-refunded in 6h avg' },
      ].map((s, i) => (
        <div key={i} className="p-5 md:p-6" style={{ background: 'var(--bg-1)' }}>
          <div className="text-[11px] mono uppercase tracking-widest text-white/40">{s.k}</div>
          <div className="text-2xl md:text-3xl font-semibold mt-1 tracking-tight">{s.v}</div>
          <div className="text-xs text-white/50 mt-1">{s.sub}</div>
        </div>
      ))}
    </div>
  );
}

function CategoryPills({ onPick }) {
  return (
    <div className="flex flex-wrap gap-2">
      {CATEGORIES.filter(c => c.id !== 'all').map(c => (
        <button key={c.id} onClick={() => onPick(c.id)} className="hairline rounded-full px-4 py-2 text-sm hover:border-white/20 hover:bg-white/5 transition-colors">
          {c.name}
        </button>
      ))}
    </div>
  );
}

function FeaturedGrid({ go, onAddToCart }) {
  const featured = PRODUCTS.slice(0, 8);
  return (
    <section className="max-w-[1280px] mx-auto px-5 md:px-8 mt-16">
      <div className="flex items-end justify-between mb-6">
        <div>
          <div className="text-[11px] mono uppercase tracking-widest text-white/40 mb-2">Featured</div>
          <h2 className="text-3xl font-semibold tracking-tight">Bestsellers right now</h2>
        </div>
        <button onClick={() => go('catalog')} className="text-sm inline-flex items-center gap-1.5 text-white/70 hover:text-white">
          View all <Icon name="arrow" size={12} />
        </button>
      </div>
      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 stagger">
        {featured.map(p => <ProductCard key={p.id} product={p} go={go} onAddToCart={onAddToCart} />)}
      </div>
    </section>
  );
}

function ProductCard({ product, go, onAddToCart }) {
  const lowStock = product.stock < 100;
  return (
    <div className="group glass rounded-2xl overflow-hidden flex flex-col hover:border-white/15 transition-colors">
      <button onClick={() => go('product', { productId: product.id })} className="text-left">
        <div className="p-3">
          <ProductTile product={product} />
        </div>
      </button>
      <div className="px-4 pb-4 flex-1 flex flex-col">
        <div className="flex items-start justify-between gap-2">
          <div className="min-w-0">
            <div className="font-medium truncate">{product.name}</div>
            <div className="text-xs text-white/50 truncate">{product.tagline}</div>
          </div>
          <div className="text-right shrink-0">
            <div className="text-[10px] mono uppercase tracking-widest text-white/40">from</div>
            <div className="font-semibold">{formatUSD(product.priceFrom)}</div>
          </div>
        </div>
        <div className="flex items-center gap-2 mt-3">
          <Stars rating={product.rating} size={12} />
          <span className="text-xs text-white/50">{product.rating} · {product.reviewCount.toLocaleString()}</span>
        </div>
        <div className="mt-3 flex items-center justify-between">
          <span className="text-xs mono flex items-center gap-1.5" style={{ color: lowStock ? 'var(--warn)' : 'var(--ok)' }}>
            <Dot color={lowStock ? 'var(--warn)' : 'var(--ok)'} size={6} />
            {lowStock ? `only ${product.stock} left` : `in stock · ${product.stock.toLocaleString()}`}
          </span>
          <button
            onClick={(e) => { e.stopPropagation(); go('product', { productId: product.id }); }}
            className="text-xs font-semibold flex items-center gap-1 text-white/70 group-hover:text-white transition-colors"
          >
            View <Icon name="arrow" size={10} />
          </button>
        </div>
      </div>
    </div>
  );
}

function WhyUs() {
  const items = [
    { icon: 'bolt', title: 'Instant delivery', body: 'Fulfillment bot runs 24/7 — median delivery 2m 47s from payment confirmation.' },
    { icon: 'lock', title: 'Crypto only, privacy-first', body: 'No email required for guest checkout. No card, no address, no identity. Only a delivery endpoint.' },
    { icon: 'refresh', title: 'Auto-fulfillment', body: 'Keys, invites, and upgrades dispatched automatically. No staff handling your purchase.' },
    { icon: 'shield', title: 'Warranty & replacement', body: 'Every order covered by our replacement guarantee for the full subscription term.' },
  ];
  return (
    <section className="max-w-[1280px] mx-auto px-5 md:px-8 mt-20">
      <div className="grid grid-cols-1 md:grid-cols-4 gap-[1px] rounded-2xl overflow-hidden hairline stagger" style={{ background: 'var(--line)' }}>
        {items.map((it, i) => (
          <div key={i} className="p-6 md:p-7" style={{ background: 'var(--bg-1)' }}>
            <div className="w-10 h-10 rounded-xl flex items-center justify-center mb-4 hairline" style={{ background: 'rgba(168,123,255,0.08)', color: 'var(--accent)' }}>
              <Icon name={it.icon} size={18} />
            </div>
            <div className="font-medium mb-1.5">{it.title}</div>
            <p className="text-sm text-white/55 text-pretty">{it.body}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function CategoryStrip({ go }) {
  const cats = [
    { id: 'streaming', label: 'Streaming', count: 24, tile: 'tile-stream', glyph: '▶', color: '#ff3355' },
    { id: 'gaming', label: 'Gaming', count: 18, tile: 'tile-game', glyph: '◆', color: '#ffb428' },
    { id: 'productivity', label: 'Productivity', count: 31, tile: 'tile-ai', glyph: '✦', color: '#19c9a6' },
    { id: 'social', label: 'Social', count: 9, tile: 'tile-chat', glyph: 'N', color: '#7a8cff' },
    { id: 'boosts', label: 'Boosts', count: 7, tile: 'tile-boost', glyph: '⚡', color: '#d66bff' },
  ];
  return (
    <section className="max-w-[1280px] mx-auto px-5 md:px-8 mt-20">
      <div className="flex items-end justify-between mb-6">
        <div>
          <div className="text-[11px] mono uppercase tracking-widest text-white/40 mb-2">Browse</div>
          <h2 className="text-3xl font-semibold tracking-tight">Shop by category</h2>
        </div>
      </div>
      <div className="grid grid-cols-2 md:grid-cols-5 gap-3 stagger">
        {cats.map(c => (
          <button key={c.id} onClick={() => go('catalog', { category: c.id })} className={`relative h-36 ${c.tile} rounded-2xl hairline overflow-hidden text-left p-4 hover:border-white/20 transition-colors group`}>
            <div className="absolute inset-0 grid-bg opacity-40" />
            <div className="glyph text-5xl absolute right-3 top-2" style={{ color: c.color, textShadow: `0 0 32px ${c.color}55` }}>{c.glyph}</div>
            <div className="relative mt-auto flex flex-col justify-end h-full">
              <div className="font-medium">{c.label}</div>
            </div>
          </button>
        ))}
      </div>
    </section>
  );
}

function HomePage({ go, onAddToCart }) {
  return (
    <>
      <Hero go={go} />
      <FeaturedGrid go={go} onAddToCart={onAddToCart} />
      <CategoryStrip go={go} />
      <WhyUs />
    </>
  );
}

Object.assign(window, { HomePage, ProductCard });