const STAT_HEADLINE = [
  { label: "Max Power", value: 275, unit: "PS", sub: "@ 6,000 RPM", duration: 1500 },
  { label: "Max Torque", value: 378, unit: "Nm", sub: "@ 2,100 – 4,700 RPM", duration: 1700 },
  { label: "Top Speed", value: 250, unit: "KM/H", sub: "Electronically limited", duration: 1900 },
  { label: "Displacement", value: 1998, unit: "CC", sub: "Inline 4 · T-GDi", duration: 2100 },
];

const STAT_TECH = [
  {
    icon: "gear",
    label: "Transmission",
    value: "6-spd Manual",
    sub: "Rev-matching · short-throw lever",
  },
  {
    icon: "diff",
    label: "Differential",
    value: "Electronic LSD",
    sub: "Two modes · torque vectoring",
  },
  {
    icon: "wheel",
    label: "Steering",
    value: "R-MDPS",
    sub: "Rack-mounted · three modes",
  },
];

function StatIcon({ kind }) {
  const common = { width: 22, height: 22, fill: "none", stroke: "currentColor", strokeWidth: 1.4 };
  if (kind === "gear")
    return (
      <svg viewBox="0 0 24 24" {...common}>
        <circle cx="12" cy="12" r="3.5" />
        <path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M5 19l2-2M17 7l2-2"/>
      </svg>
    );
  if (kind === "diff")
    return (
      <svg viewBox="0 0 24 24" {...common}>
        <circle cx="12" cy="12" r="8"/>
        <path d="M4 12h16M12 4v16"/>
      </svg>
    );
  return (
    <svg viewBox="0 0 24 24" {...common}>
      <circle cx="12" cy="12" r="9"/>
      <circle cx="12" cy="12" r="2.5"/>
      <path d="M12 3v6M12 15v6M3 12h6M15 12h6"/>
    </svg>
  );
}

function Performance() {
  return (
    <section id="performance" className="section-pad perf">
      <div className="section-inner">
        <Reveal stagger>
          <span className="eyebrow">Performance</span>
          <h2 className="h-display perf-h">The Numbers.</h2>

          <div className="perf-grid">
            {STAT_HEADLINE.map((s) => (
              <div className="perf-stat" key={s.label}>
                <div className="mono-up perf-label">{s.label}</div>
                <div className="perf-value h-display">
                  <CountUp to={s.value} duration={s.duration} />
                </div>
                <div className="perf-unit">{s.unit}</div>
                <div className="perf-sub">{s.sub}</div>
              </div>
            ))}
          </div>

          <div className="perf-tech">
            {STAT_TECH.map((t) => (
              <div className="perf-tech-cell" key={t.label}>
                <div className="perf-tech-icon"><StatIcon kind={t.icon}/></div>
                <div>
                  <div className="mono-up">{t.label}</div>
                  <div className="perf-tech-value">{t.value}</div>
                  <div className="perf-tech-sub">{t.sub}</div>
                </div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
      <style>{`
        .perf { background: var(--bg-1); }
        .perf-h { font-size: clamp(40px, 6vw, 96px); margin: 24px 0 56px; }
        .perf-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          border-top: 1px solid var(--line);
          border-bottom: 1px solid var(--line);
        }
        .perf-stat {
          padding: 36px 28px;
          border-right: 1px solid var(--line);
          display: flex; flex-direction: column; gap: 10px;
          position: relative;
        }
        .perf-stat:last-child { border-right: 0; }
        .perf-label { color: var(--ink-2); }
        .perf-value {
          font-size: clamp(56px, 7vw, 104px);
          color: var(--ink-0);
          line-height: 0.9;
          font-feature-settings: "tnum" 1;
        }
        .perf-unit {
          font-family: var(--font-mono);
          font-size: 13px;
          letter-spacing: 0.16em;
          text-transform: uppercase;
          color: var(--accent);
        }
        .perf-sub {
          font-family: var(--font-mono);
          font-size: 12px;
          color: var(--ink-2);
          margin-top: 4px;
        }
        .perf-tech {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 0;
          margin-top: 56px;
        }
        .perf-tech-cell {
          padding: 28px 24px;
          border-right: 1px solid var(--line);
          display: flex; gap: 16px;
          align-items: flex-start;
        }
        .perf-tech-cell:last-child { border-right: 0; }
        .perf-tech-icon { color: var(--accent); padding-top: 2px; }
        .perf-tech-value {
          font-family: var(--font-display);
          font-size: 22px;
          margin-top: 6px;
          color: var(--ink-0);
        }
        .perf-tech-sub {
          font-family: var(--font-mono);
          font-size: 12px;
          color: var(--ink-2);
          margin-top: 4px;
        }
        @media (max-width: 900px) {
          .perf-grid { grid-template-columns: repeat(2, 1fr); }
          .perf-stat:nth-child(2) { border-right: 0; }
          .perf-stat:nth-child(1), .perf-stat:nth-child(2) { border-bottom: 1px solid var(--line); }
          .perf-tech { grid-template-columns: 1fr; }
          .perf-tech-cell { border-right: 0; border-bottom: 1px solid var(--line); }
          .perf-tech-cell:last-child { border-bottom: 0; }
        }
      `}</style>
    </section>
  );
}
window.Performance = Performance;