/* global React, Icon, PRODUCTS, useReveal */

/* ── Compare Side-by-Side ──────────────────────────────────── */
function ComparePreview() {
  const ref = useReveal();
  const a = PRODUCTS[0]; // Buldak
  const b = PRODUCTS[2]; // Labubu — different category but interesting comparison

  const metrics = [
    { key: 'growth',   label: 'Growth' },
    { key: 'demand',   label: 'Demand' },
    { key: 'momentum', label: 'Momentum' },
  ];

  return (
    <section className="section cmp" id="scorecard" ref={ref}>
      <div className="container-wide">
        <div className="cmp-head">
          <div className="reveal">
            <span className="eyebrow"><span className="dot" />Compare</span>
            <h2 className="heading-l">
              Two products. <em>One delta.</em>
            </h2>
          </div>
          <p className="lede reveal reveal-delay-1" style={{ maxWidth: 460 }}>
            Run parallel analysis. Every metric shows which product leads, by how much, and why —
            in the same call.
          </p>
        </div>

        <div className="cmp-stage reveal reveal-delay-2">
          <CompareCard product={a} side="A" />

          {/* Center delta column */}
          <div className="cmp-center">
            <div className="cmp-vs display">vs.</div>
            <div className="cmp-deltas">
              {metrics.map((m) => {
                const av = a[m.key], bv = b[m.key];
                const diff = av - bv;
                const leader = diff > 0 ? 'A' : diff < 0 ? 'B' : '=';
                return (
                  <div key={m.key} className="cmp-delta">
                    <div className="eyebrow" style={{ justifyContent: 'center' }}>{m.label}</div>
                    <div className="cmp-delta-row">
                      <span className={'cmp-delta-side ' + (leader === 'A' ? 'win' : leader === '=' ? '' : 'lose')}>
                        {av}
                      </span>
                      <span className="cmp-delta-arrow mono">
                        {leader === 'A' ? '◀' : leader === 'B' ? '▶' : '='}
                        <span className="cmp-delta-diff">{Math.abs(diff)}</span>
                      </span>
                      <span className={'cmp-delta-side ' + (leader === 'B' ? 'win' : leader === '=' ? '' : 'lose')}>
                        {bv}
                      </span>
                    </div>
                  </div>
                );
              })}
            </div>

            <div className="cmp-verdict">
              <div className="eyebrow">Verdict</div>
              <p className="mono" style={{ fontSize: 12, lineHeight: 1.55, margin: '6px 0 0' }}>
                <span style={{ color: 'var(--accent)' }}>B</span> leads on all three metrics.
                Stronger breakout signal across the board; resale market validates depth.
              </p>
            </div>
          </div>

          <CompareCard product={b} side="B" />
        </div>
      </div>
    </section>
  );
}

function CompareCard({ product: p, side }) {
  return (
    <div className="cmp-card">
      <div className="cmp-card-side mono">{side}</div>
      <div className="cmp-card-noise" />

      <div>
        <div className="mono subtle" style={{ fontSize: 11, letterSpacing: '0.14em' }}>
          {p.brand.toUpperCase()}
        </div>
        <h3 className="cmp-card-name display">{p.name}</h3>
        <div className="muted" style={{ fontSize: 13, marginTop: 4 }}>{p.category}</div>
      </div>

      <div className="cmp-card-scores">
        <CmpScore label="Growth"   value={p.growth} />
        <CmpScore label="Demand"   value={p.demand} />
        <CmpScore label="Momentum" value={p.momentum} />
      </div>

      <div className="cmp-card-stage">
        <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>
        <span className="mono subtle" style={{ fontSize: 11 }}>{p.price}</span>
      </div>

      <p className="cmp-card-sum">{p.summary}</p>
    </div>
  );
}

function CmpScore({ label, value }) {
  return (
    <div className="cmp-score">
      <div className="row between" style={{ marginBottom: 6 }}>
        <span className="eyebrow">{label}</span>
        <span className="display tabular" style={{ fontSize: 22 }}>{value}</span>
      </div>
      <div className="score-track">
        <div className="score-fill" style={{ transform: `scaleX(${value / 100})` }} />
      </div>
    </div>
  );
}

window.ComparePreview = ComparePreview;