const SPEC_GROUPS = [
  {
    id: "engine",
    title: "Engine",
    rows: [
      ["Family", "Theta II"],
      ["Configuration", "Inline-4, transverse"],
      ["Capacity", "1,998 cc"],
      ["Cylinders / Valves", "4 / 16, DOHC"],
      ["Valvetrain", "CVVT, dual variable"],
      ["Induction", "Turbocharged · intercooled"],
      ["Bore × Stroke", "86.0 × 86.0 mm"],
      ["Compression", "9.5 : 1"],
      ["Fuel Grade", "RON 95 minimum, RON 98 recommended"],
    ],
  },
  {
    id: "trans",
    title: "Transmission",
    rows: [
      ["Type", "6-spd Manual, rev-matching"],
      ["Final Drive", "4.063"],
      ["1st", "3.769"],
      ["6th", "0.795"],
      ["Reverse", "3.700"],
    ],
  },
  {
    id: "chassis",
    title: "Chassis",
    rows: [
      ["Front Suspension", "MacPherson strut · adaptive damping"],
      ["Rear Suspension", "Multi-link · adaptive damping"],
      ["Front Brakes", "355 mm ventilated disc"],
      ["Rear Brakes", "314 mm solid disc"],
      ["Steering", "R-MDPS · variable ratio"],
      ["Turning Circle", "11.6 m"],
    ],
  },
  {
    id: "dim",
    title: "Dimensions & Mass",
    rows: [
      ["Length", "4,340 mm"],
      ["Width", "1,795 mm"],
      ["Height", "1,447 mm"],
      ["Wheelbase", "2,650 mm"],
      ["Track (F / R)", "1,559 / 1,575 mm"],
      ["Kerb Weight", "1,429 – 1,510 kg"],
      ["Fuel Tank", "50 L"],
    ],
  },
  {
    id: "wheels",
    title: "Wheels & Tyres",
    rows: [
      ["Wheel Spec", "8.0J × 19, forged alloy"],
      ["Track Tyre", "245/35 R19, track-focused semi-slick"],
    ],
  },
];

function Specs() {
  const [open, setOpen] = useState(() => Object.fromEntries(SPEC_GROUPS.map((g) => [g.id, true])));
  const toggle = (id) => setOpen((s) => ({ ...s, [id]: !s[id] }));

  return (
    <section id="specs" className="section-pad specs">
      <div className="section-inner">
        <Reveal>
          <span className="eyebrow">Specifications</span>
          <h2 className="h-display specs-h">Everything, on the record.</h2>
        </Reveal>

        <div className="specs-grid">
          {SPEC_GROUPS.map((g) => (
            <div className={"spec-group " + (open[g.id] ? "is-open" : "")} key={g.id}>
              <button className="spec-group-h" onClick={() => toggle(g.id)} aria-expanded={open[g.id]}>
                <span className="h-display">{g.title}</span>
                <span className="spec-toggle mono-up">
                  {open[g.id] ? "Hide" : "Show"} <span className="spec-chev">{open[g.id] ? "−" : "+"}</span>
                </span>
              </button>
              <div className="spec-rows" hidden={!open[g.id]}>
                {g.rows.map(([k, v]) => (
                  <div className="spec-row" key={k}>
                    <span className="spec-k mono">{k}</span>
                    <span className="spec-dots" aria-hidden="true" />
                    <span className="spec-v mono">{v}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>

        <div className="specs-foot">
          <span className="mono-up">
            <span className="doc-icon" aria-hidden="true">▤</span>
            Source — Hyundai i30 N Australian Spec Sheet
          </span>
          <a className="btn-ghost" href="#" onClick={(e) => e.preventDefault()}>
            Open PDF ↗
          </a>
        </div>
      </div>
      <style>{`
        .specs { background: var(--bg-1); }
        .specs-h { font-size: clamp(40px, 6vw, 96px); margin: 24px 0 56px; max-width: 16ch; }
        .specs-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 0 clamp(40px, 6vw, 96px);
        }
        .spec-group {
          border-top: 1px solid var(--line);
          padding: 24px 0 8px;
        }
        .spec-group:last-child { border-bottom: 1px solid var(--line); }
        .spec-group-h {
          width: 100%;
          display: flex; justify-content: space-between; align-items: baseline;
          padding-bottom: 14px;
          position: relative;
        }
        .spec-group-h::after {
          content: "";
          position: absolute;
          left: 0; bottom: 0;
          width: 48px; height: 2px;
          background: var(--accent);
        }
        .spec-group-h .h-display { font-size: 22px; }
        .spec-toggle { color: var(--ink-2); display: inline-flex; gap: 8px; align-items: center; }
        .spec-chev { color: var(--accent); font-size: 16px; }
        .spec-rows { padding: 16px 0 8px; }
        .spec-row {
          display: flex; align-items: baseline;
          padding: 9px 0;
          gap: 12px;
        }
        .spec-k { color: var(--ink-2); font-size: 13px; flex-shrink: 0; }
        .spec-dots {
          flex: 1;
          border-bottom: 1px dotted var(--ink-3);
          transform: translateY(-3px);
        }
        .spec-v {
          color: var(--ink-0);
          font-size: 13px;
          text-align: right;
          font-feature-settings: "tnum" 1;
        }
        .specs-foot {
          display: flex; justify-content: space-between; align-items: center;
          margin-top: 56px;
          padding-top: 24px;
          border-top: 1px solid var(--line);
          color: var(--ink-2);
          gap: 16px;
          flex-wrap: wrap;
        }
        .doc-icon { color: var(--accent); margin-right: 8px; }
        @media (max-width: 820px) { .specs-grid { grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
}
window.Specs = Specs;