// HERO — premium product-selection carousel. Product is above the fold.
function Hero({ products, active, onActive, onAdd }) {
  const { Badge, Button, IconButton } = window.ShoyuzukeDesignSystem_1a4266;
  const Icon = window.Icon;
  const p = products[active];
  const touch = React.useRef(null);

  const go = (dir) => onActive((active + dir + products.length) % products.length);
  const onTouchStart = (e) => { touch.current = e.touches[0].clientX; };
  const onTouchEnd = (e) => {
    if (touch.current == null) return;
    const dx = e.changedTouches[0].clientX - touch.current;
    if (Math.abs(dx) > 40) go(dx < 0 ? 1 : -1);
    touch.current = null;
  };

  return (
    <section id="top" className="gloss-bg" style={{ position: 'relative', overflow: 'hidden' }}>
      {/* wave wash removed — canvas bg handles it */}
      <div className="container container-wide" style={{ position: 'relative', paddingTop: 'var(--space-8)', paddingBottom: 'var(--space-8)' }}>
        {/* headline */}
        <div style={{ textAlign: 'center', maxWidth: 820, margin: '0 auto var(--space-7)' }}>
          <h1 className="t-h1" style={{ fontSize: 'clamp(30px, 5.5vw, 56px)', color: 'var(--text-strong)', textTransform: 'uppercase' }}>
            Premium Marinated Sashimi
          </h1>
        </div>

        {/* featured product */}
        <div className="sz-hero-stage" onTouchStart={onTouchStart} onTouchEnd={onTouchEnd} style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-7)', alignItems: 'start',
          background: 'linear-gradient(165deg, rgba(251,244,234,0.09), rgba(251,244,234,0.03) 42%, rgba(12,8,5,0.12))',
          border: '1px solid var(--border-strong)', borderRadius: 'var(--radius-2xl)',
          padding: 'var(--space-6)', backdropFilter: 'blur(var(--blur-card))', WebkitBackdropFilter: 'blur(var(--blur-card))',
          boxShadow: 'inset 0 1.5px 0 rgba(251,244,234,0.22), inset 0 0 0 1px rgba(251,244,234,0.04), 0 2px 6px rgba(0,0,0,0.4), 0 30px 60px -24px rgba(0,0,0,0.65), 0 0 90px -30px rgba(240,96,34,0.35)',
        }}>
          {/* image */}
          <div className="spotlight sz-hero-float" style={{ position: 'relative', borderRadius: 'var(--radius-xl)', overflow: 'hidden', aspectRatio: '1/1' }}>
            <img key={p.id} src={p.image} alt={p.full} style={{ width: '100%', height: '100%', objectFit: 'cover', animation: 'sz-fade var(--dur-slow) var(--ease-out)' }} />
            <div style={{ position: 'absolute', top: 16, left: 16, display: 'flex', gap: 8 }}>
              {p.badge && <Badge tone={p.badge.tone} solid>{p.badge.label}</Badge>}
              <Badge tone="wasabi">{p.protein} protein</Badge>
            </div>
            <IconButton label="Previous flavour" variant="glass" round onClick={() => go(-1)} style={{ position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)' }}><Icon name="ChevronLeft" /></IconButton>
            <IconButton label="Next flavour" variant="glass" round onClick={() => go(1)} style={{ position: 'absolute', right: 14, top: '50%', transform: 'translateY(-50%)' }}><Icon name="ChevronRight" /></IconButton>
          </div>

          {/* info */}
          <div key={p.id} style={{ animation: 'sz-rise var(--dur-slow) var(--ease-out)', paddingTop: 6, paddingLeft: 'var(--space-3)', paddingRight: 'var(--space-2)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <span className="t-eyebrow" style={{ color: 'var(--shoyu-orange)' }}>{String(active + 1).padStart(2, '0')} · Signature flavour</span>
              <span style={{ flex: 1, height: 1, background: 'var(--border)' }} />
              <span className="t-jp" style={{ fontSize: 14, color: 'var(--text-faint)' }}>{p.jp}</span>
            </div>

            <h2 className="t-h2" style={{ fontSize: 'clamp(26px, 3vw, 38px)', color: 'var(--text-strong)', textTransform: 'uppercase', marginTop: 14, lineHeight: 1.02 }}>{p.name}</h2>
            <p className="t-lead" style={{ color: 'var(--text-muted)', marginTop: 12, maxWidth: 360 }}>{p.tasteNote}</p>

            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 18 }}>
              {p.profile.map((t) => <Badge key={t} tone="neutral">{t}</Badge>)}
            </div>

            <div style={{ height: 1, background: 'var(--border)', margin: 'var(--space-6) 0 var(--space-5)' }} />

            <div style={{ display: 'flex', alignItems: 'flex-end', gap: 14, flexWrap: 'wrap' }}>
              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 3 }}>
                <span className="t-price" style={{ fontSize: 20, color: 'var(--text-strong)', marginTop: 8 }}>₱</span>
                <span className="t-price" style={{ fontSize: 48, color: 'var(--text-strong)' }}>{p.price}</span>
              </div>
              <div style={{ paddingBottom: 6 }}>
                <div className="t-meta" style={{ fontSize: 12.5 }}>{p.size} · {p.protein} protein</div>
                <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: 'var(--wasabi-300)', fontSize: 13, fontWeight: 600, marginTop: 3 }}>
                  <span style={{ width: 7, height: 7, borderRadius: 99, background: 'var(--wasabi)', boxShadow: '0 0 8px var(--wasabi)' }} /> {p.available ? 'In stock · chilled delivery' : 'Sold out'}
                </div>
              </div>
            </div>

            <div style={{ display: 'flex', gap: 12, marginTop: 'var(--space-6)', flexWrap: 'wrap' }}>
              <Button variant="primary" size="lg" iconRight={<Icon name="ShoppingBag" size={18} />} onClick={() => onAdd(p.id)}>Add to cart · ₱{p.price}</Button>
              <Button variant="secondary" size="lg" onClick={() => { const el = document.getElementById('detail'); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 92, behavior: 'smooth' }); }}>Details</Button>
            </div>
          </div>
        </div>

        {/* thumbnail slider nav */}
        <div className="sz-thumbs" style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 'var(--space-6)', flexWrap: 'wrap' }}>
          {products.map((it, i) => (
            <button key={it.id} onClick={() => onActive(i)} aria-label={it.full} style={{
              display: 'flex', alignItems: 'center', gap: 10, padding: '8px 14px 8px 8px', cursor: 'pointer',
              background: i === active ? 'var(--surface-raised)' : 'transparent',
              border: `1.5px solid ${i === active ? 'var(--border-orange)' : 'var(--border)'}`,
              borderRadius: 'var(--radius-pill)', transition: 'all var(--dur-base) var(--ease-out)',
              boxShadow: i === active ? 'var(--glow-orange-soft)' : 'none',
            }}>
              <img src={it.image} alt="" style={{ width: 38, height: 38, borderRadius: '50%', objectFit: 'cover' }} />
              <span style={{ fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 13.5, color: i === active ? 'var(--text-strong)' : 'var(--text-muted)' }}>{it.name}</span>
            </button>
          ))}
        </div>
      </div>
      <style>{`
        @keyframes sz-fade { from { opacity: 0; transform: scale(1.02); } to { opacity: 1; transform: scale(1); } }
        @keyframes sz-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        .sz-hero-float { border: 1px solid var(--border-strong); box-shadow: inset 0 1.5px 0 rgba(251,244,234,0.25), 0 2px 5px rgba(0,0,0,0.4), 0 34px 50px -26px rgba(0,0,0,0.7); }
      `}</style>
    </section>
  );
}
window.Hero = Hero;