/* global React, Icon, PRODUCTS, useReveal */
const { useState } = React;

/* ── Scorecard preview — full mockup of a real result ──────── */
function ScorecardPreview() {
  const ref = useReveal();
  const p = PRODUCTS[0]; // Buldak Carbonara

  const TREND = [
    { d: 'Mon', v: 38 }, { d: 'Tue', v: 44 }, { d: 'Wed', v: 51 },
    { d: 'Thu', v: 62 }, { d: 'Fri', v: 71 }, { d: 'Sat', v: 88 },
    { d: 'Sun', v: 92 },
  ];

  return (
    <section className="section sc" id="scorecard" ref={ref}>
      <div className="container-wide">

        <div className="sc-head">
          <div className="reveal">
            <span className="eyebrow"><span className="dot" />The Scorecard</span>
            <h2 className="heading-l sc-h">
              One signal you can <em>actually defend</em>.
            </h2>
          </div>
          <p className="lede reveal reveal-delay-1" style={{ maxWidth: 480 }}>
            Three numbers, anchored by metrics, competitors, and pricing.
            Every score traces back to the model output that produced it — no vibes, no black box.
          </p>
        </div>

        {/* The artefact */}
        <div className="sc-stage reveal reveal-delay-2">
          {/* Editorial annotations */}
          <Annotation pos="tl" label="01" title="Stage"
            text="A categorical read on the trend lifecycle. Peak, Hot, Climbing, Cooling, or Cold."
          />
          <Annotation pos="tr" label="02" title="Scores"
            text="Growth (capacity to grow), Demand (current pull), Momentum (rate of change)."
          />
          <Annotation pos="bl" label="03" title="Evidence"
            text="Pulled from social and search. Raw counts, not normalized — auditable."
          />
          <Annotation pos="br" label="04" title="Competitive set"
            text="Three nearest rivals, ranked by share-of-conversation. Click any to deep-dive."
          />

          <div className="sc-card">
            <div className="sc-card-noise" />

            {/* Header */}
            <div className="sc-card-hd">
              <div className="sc-card-hd-left">
                <div className="sc-thumb" aria-hidden="true">
                  <span className="display">B</span>
                </div>
                <div>
                  <div className="mono subtle" style={{ fontSize: 11, letterSpacing: '0.14em' }}>
                    {p.brand.toUpperCase()} · {p.category.toUpperCase()}
                  </div>
                  <h3 className="sc-card-name display">{p.name}</h3>
                  <div className="row gap" style={{ marginTop: 8 }}>
                    <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} · {p.trendStage}
                    </span>
                    <span className="chip mono" style={{ fontSize: 10 }}>
                      <span className="dot" />MSRP {p.price}
                    </span>
                  </div>
                </div>
              </div>
              <div className="sc-card-hd-right row gap">
                <button className="btn btn-ghost btn-sm"><Icon name="pdf" size={14} />PDF</button>
                <button className="btn btn-ghost btn-sm"><Icon name="compare" size={14} />Compare</button>
              </div>
            </div>

            <div className="hairline" style={{ margin: '24px 0' }} />

            {/* Big scores row */}
            <div className="sc-scores">
              <BigScore label="Growth"   value={p.growth} />
              <BigScore label="Demand"   value={p.demand} />
              <BigScore label="Momentum" value={p.momentum} />
            </div>

            {/* Two-column: trend chart + metrics */}
            <div className="sc-grid">
              <div className="sc-block">
                <div className="row between" style={{ marginBottom: 14 }}>
                  <div>
                    <div className="eyebrow">7-day search interest</div>
                    <div className="display" style={{ fontSize: 28, lineHeight: 1, marginTop: 6 }}>
                      <span className="tabular">+312%</span>
                      <span className="mono subtle" style={{ fontSize: 12, marginLeft: 10 }}>YoY</span>
                    </div>
                  </div>
                  <span className="chip mono" style={{ fontSize: 10 }}>
                    <Icon name="arrowUp" size={11} />
                    Google · TikTok
                  </span>
                </div>
                <TrendBars data={TREND} />
              </div>

              <div className="sc-block">
                <div className="eyebrow" style={{ marginBottom: 14 }}>Evidence</div>
                <div className="sc-evidence">
                  {p.metrics.map((m) => (
                    <div key={m.label} className="sc-ev-row">
                      <span className="muted" style={{ fontSize: 13 }}>{m.label}</span>
                      <span className="mono tabular" style={{ fontSize: 14 }}>{m.value}</span>
                    </div>
                  ))}
                </div>

                <div className="hairline" style={{ margin: '18px 0' }} />

                <div className="eyebrow" style={{ marginBottom: 14 }}>Closest rivals</div>
                <div className="col" style={{ gap: 10 }}>
                  {p.rivals.map((r, i) => (
                    <div key={r} className="sc-rival">
                      <span className="sc-rival-rank mono">{String(i + 1).padStart(2, '0')}</span>
                      <span>{r}</span>
                      <span className="sc-rival-bar">
                        <span style={{ width: `${[78, 62, 41][i] || 30}%` }} />
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            {/* Summary */}
            <div className="sc-summary">
              <div className="sc-summary-qu display">“</div>
              <div className="col" style={{ gap: 10 }}>
                <p style={{ margin: 0, fontSize: 16, lineHeight: 1.55 }}>
                  {p.summary}
                </p>
                <span className="mono subtle" style={{ fontSize: 11, letterSpacing: '0.12em' }}>
                  CLAUDE · SONNET 4.6 · CONF 0.92
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Annotation({ pos, label, title, text }) {
  return (
    <div className={'sc-anno sc-anno-' + pos}>
      <div className="sc-anno-num mono">{label}</div>
      <div className="sc-anno-body">
        <div className="sc-anno-title">{title}</div>
        <div className="sc-anno-text muted">{text}</div>
      </div>
      <svg className="sc-anno-line" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
        <line x1="0" y1="0" x2="100" y2="100" stroke="currentColor" strokeDasharray="2 3" strokeWidth="1"/>
      </svg>
    </div>
  );
}

function BigScore({ label, value }) {
  return (
    <div className="big-score">
      <div className="big-score-label eyebrow">{label}</div>
      <div className="big-score-num display tabular">{value}</div>
      <div className="big-score-track">
        <div className="big-score-fill" style={{ transform: `scaleX(${value / 100})` }} />
      </div>
      <div className="big-score-meta mono subtle" style={{ fontSize: 10 }}>
        {value >= 80 ? 'STRONG' : value >= 60 ? 'SOLID' : value >= 40 ? 'MIXED' : 'WEAK'} · /100
      </div>
    </div>
  );
}

function TrendBars({ data }) {
  const max = Math.max(...data.map((d) => d.v));
  return (
    <div className="trend-bars">
      {data.map((d, i) => (
        <div key={d.d} className="trend-col">
          <div
            className="trend-bar"
            style={{ height: `${(d.v / max) * 100}%`, transitionDelay: `${i * 60}ms` }}
          />
          <div className="mono trend-lbl">{d.d}</div>
        </div>
      ))}
    </div>
  );
}

window.ScorecardPreview = ScorecardPreview;