/* global React, Icon, PRODUCTS, useCycle, useReveal, useCountUp */
const { useEffect, useState, useRef } = React;

/* ── Rotating product scorecard (right column of hero) ─────── */
function HeroScorecard() {
  const [idx, setIdx] = useCycle(PRODUCTS.length, 5200);
  const p = PRODUCTS[idx];

  return (
    <div className="hero-scorecard reveal reveal-delay-3">
      {/* Tabbed product switcher */}
      <div className="hsc-head">
        <div className="hsc-tabs" role="tablist" aria-label="Sample products">
          {PRODUCTS.map((prod, i) => (
            <button
              key={prod.name}
              role="tab"
              aria-selected={i === idx}
              className={'hsc-tab ' + (i === idx ? 'is-active' : '')}
              onClick={() => setIdx(i)}
            >
              <span className="hsc-tab-dot" />
              {prod.name}
            </button>
          ))}
        </div>
      </div>

      {/* Card body */}
      <div className="hsc-card" key={p.name /* re-key for entry anim */}>
        <div className="hsc-card-bg" />
        <div className="hsc-card-noise" />

        <div className="hsc-card-top">
          <div>
            <div className="eyebrow" style={{ color: 'var(--text-faint)' }}>
              <span className="mono">{p.brand}</span>
              <span>·</span>
              <span>{p.category}</span>
            </div>
            <h3 className="hsc-name display">{p.name}</h3>
          </div>
          <span
            className="hsc-stage mono"
            style={{
              background: p.stageHue + '22',
              color: p.stageHue,
              borderColor: p.stageHue + '44',
            }}
          >
            <span
              className="hsc-stage-dot"
              style={{ background: p.stageHue }}
            />
            {p.stage}
          </span>
        </div>

        <p className="hsc-sum">{p.summary}</p>

        <div className="hsc-scores">
          <ScoreCell label="Growth"   value={p.growth}   keyId={p.name + 'g'} />
          <ScoreCell label="Demand"   value={p.demand}   keyId={p.name + 'd'} />
          <ScoreCell label="Momentum" value={p.momentum} keyId={p.name + 'm'} />
        </div>

        <div className="hsc-footer">
          <div className="hsc-foot-col">
            <div className="eyebrow">Price</div>
            <div className="hsc-foot-val mono">{p.price}</div>
          </div>
          <div className="hsc-foot-col">
            <div className="eyebrow">Stage</div>
            <div className="hsc-foot-val mono">{p.trendStage}</div>
          </div>
        </div>

        {/* Watermark "score" sign */}
        <div className="hsc-watermark display">{Math.round((p.growth + p.demand + p.momentum) / 3)}</div>
      </div>

      <div className="hsc-meta">
        <div className="row gap">
          <span className="chip"><span className="dot" />Claude · Sonnet 4.6</span>
          <span className="chip" style={{ '--dot-bg': 'var(--success)' }}>
            <span className="dot" style={{ background: 'var(--success)' }} />
            ~30s
          </span>
        </div>
        <div className="mono subtle" style={{ fontSize: 11 }}>
          Auto-cycling · {idx + 1}/{PRODUCTS.length}
        </div>
      </div>
    </div>
  );
}

function ScoreCell({ label, value, keyId }) {
  const v = useCountUp(value, 1100, keyId);
  return (
    <div className="score-cell">
      <div className="score-cell-head row between">
        <span className="eyebrow">{label}</span>
        <span className="score-cell-num tabular display">{v}</span>
      </div>
      <div className="score-track">
        <div
          className="score-fill"
          style={{ transform: `scaleX(${value / 100})` }}
        />
      </div>
    </div>
  );
}

/* ── Hero (left column + scorecard) ─────────────────────────── */
function Hero() {
  const heroRef = useReveal();
  const today = new Date().toLocaleDateString('en-US', {
    month: 'long', day: 'numeric', year: 'numeric',
  });

  return (
    <section className="hero" id="top">
      <div className="grid-bg" aria-hidden="true" />
      <div className="hero-aura" aria-hidden="true" />

      <div className="container-wide hero-grid" ref={heroRef}>
        {/* ── Top masthead strip ── */}
        <div className="hero-mast reveal in">
          <span className="eyebrow">
            <span className="dot" />
            Issue 026 · Product Intelligence
          </span>
          <span className="mono subtle" style={{ fontSize: 11, letterSpacing: '0.14em' }}>
            {today.toUpperCase()}
          </span>
        </div>

        {/* ── Left: headline + lede + actions ── */}
        <div className="hero-text">
          <h1 className="heading-xl hero-h reveal reveal-delay-1">
            <span className="hero-h-1">Score any</span>
            <span className="hero-h-2"><em>product</em></span>
            <span className="hero-h-3">in seconds.</span>
          </h1>

          <div className="hero-byline reveal reveal-delay-2">
            <div className="hero-rule" aria-hidden="true" />
            <p className="lede">
              Drop a name or a photo. <strong style={{ color: 'var(--text)' }}>Next Wave</strong> returns
              growth, demand, and momentum scores in about thirty seconds —
              backed by Claude, with live TikTok, Reddit and real-time web data.
            </p>
          </div>

          <div className="hero-actions reveal reveal-delay-3">
            <a href="/login" className="btn btn-accent btn-lg">
              Open the app
              <Icon name="arrow" size={16} />
            </a>
            <a href="#demo" className="btn btn-ghost btn-lg">
              <Icon name="play" size={14} />
              Watch a demo
            </a>
          </div>

          <div className="hero-stats reveal reveal-delay-4">
            <Stat
              num="~30s"
              label="per report"
              hint="text & vision"
            />
            <Stat
              num="3"
              label="core scores"
              hint="growth · demand · momentum"
            />
            <Stat
              num="Live"
              label="signal sources"
              hint="TikTok · Reddit · web"
            />
          </div>
        </div>

        {/* ── Right: rotating scorecard ── */}
        <div className="hero-side">
          <HeroScorecard />
        </div>
      </div>

      {/* ── Bottom marquee strip ── */}
      <div className="hero-marquee">
        <div className="marquee">
          <div className="marquee-track">
            {[...Array(2)].map((_, n) => (
              <React.Fragment key={n}>
                {[
                  'Buldak Carbonara · 87',
                  'Olipop Cherry Cola · 81',
                  'Labubu Plush · 94',
                  'Stanley Quencher · 41',
                  'Erewhon Strawberry · 72',
                  'Liquid Death · 68',
                  'Crocs Glow · 55',
                  'On Cloudmonster · 79',
                  'Bombas Gripper · 47',
                  'Topo Chico Hard Seltzer · 63',
                ].map((s, i) => (
                  <span key={`${n}-${i}`} className="marquee-item">
                    <span className="marquee-dot" />
                    <span className="mono">{s.toUpperCase()}</span>
                  </span>
                ))}
              </React.Fragment>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Stat({ num, label, hint }) {
  return (
    <div className="hero-stat">
      <div className="hero-stat-num display tabular">{num}</div>
      <div className="hero-stat-label">{label}</div>
      <div className="hero-stat-hint mono">{hint}</div>
    </div>
  );
}

window.Hero = Hero;