const BUILD_ITEMS = [
  { tag: "Aero", name: "Flow-design splitters", note: "Front lip, side skirts, rear diffuser." },
  { tag: "Aero", name: "Flow-design canards", note: "Front-axle balance above 100 km/h, or maybe it just looks better." },
  { tag: "Wheels", name: "Track-spec 19\" forged", note: "Lighter than OE by ~1.4 kg per corner." },
  { tag: "Tyres", name: "Track-focused tyres", note: "200 treadwear semi-slicks. Just barely road-legal." },
  { tag: "Brakes", name: "Paragon big brake kit", note: "355mm discs with Winmax R7 pads. Brake feel that survives consecutive flying laps." },
  { tag: "Suspension", name: "Neotech coilovers + Whiteline sways", note: "Adjustable height and damping. Front and rear anti-roll bars to match. SPL spherical bearings replace the compliant rubber." },
  { tag: "Cooling", name: "Airtec intercooler package", note: "Larger core, silicone hoses, alloy expansion tank. Resists heat-soak across back-to-back sessions." },
  { tag: "Interior", name: "Recaro front buckets", note: "OE rails. Harnesses optional." },
];

function WrenchIcon() {
  return (
    <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.5">
      <path d="M14.7 6.3a4 4 0 0 0-5.4 5.4L4 17l3 3 5.3-5.3a4 4 0 0 0 5.4-5.4l-2.5 2.5-2.5-.5-.5-2.5 2.5-2.5z"/>
    </svg>
  );
}

const BUILD_DETAIL_PHOTOS = [
  { src: "uploads/photos/ssr_brembo_macro.jpeg", alt: "SSR GTX04 with Paragon big brakes", caption: "Wheels", sub: "SSR GTX04 · Paragon BBK", position: "center" },
  { src: "uploads/photos/recaro_harness_blueknob.jpeg", alt: "Recaro bucket, red 4-point harness, Performance Blue gear knob", caption: "Seat", sub: "Recaro + 4-point harness", position: "center" },
  { src: "uploads/photos/20200315_150750_13.jpg", alt: "Steering wheel with N buttons lit blue, dash and instrument cluster", caption: "Cockpit", sub: "N buttons · instrument cluster", position: "center 78%" },
  { src: "uploads/photos/20260425_221442_11_coilover.jpeg", alt: "Rear Neotech coilover and Paragon big brake, in the wheel well", caption: "Suspension", sub: "Neotech coilover · Paragon brake", position: "center" },
  { src: "uploads/photos/20200315_150752_05.jpg", alt: "Twin exhausts and red diffuser accent", caption: "Exhaust", sub: "Twin tips · diffuser", position: "center 75%" },
  { src: "uploads/photos/20200315_150752_01.jpg", alt: "6-speed manual gear knob with blue stitching", caption: "Shifter", sub: "6-speed manual", position: "center 60%" },
];

function Build() {
  const lb = usePhotoLightbox(BUILD_DETAIL_PHOTOS);
  return (
    <section id="build" className="section-pad build">
      <div className="section-inner">
        <Reveal stagger>
          <span className="eyebrow">The Build</span>
          <h2 className="h-display build-h">What else is in it.</h2>
          <p className="build-sub">
            Stock spec is documented everywhere. This list is the delta.
          </p>

          <div className="build-grid">
            {BUILD_ITEMS.map((it, i) => (
              <div className="build-cell" key={i}>
                <div className="build-cell-top">
                  <span className="build-wrench" aria-hidden="true"><WrenchIcon/></span>
                  <span className="mono-up build-tag">{it.tag}</span>
                  <span className="mono build-num">·{String(i + 1).padStart(2, "0")}</span>
                </div>
                <div className="build-name h-display">{it.name}</div>
                <div className="build-note">{it.note}</div>
              </div>
            ))}
          </div>

          <div className="build-detail-strip">
            {BUILD_DETAIL_PHOTOS.map((p, i) => (
              <button key={i} className="build-detail-btn" onClick={() => lb.open(i)} aria-label={`Open ${p.alt}`}>
                <Photo src={p.src} alt={p.alt} ratio="1 / 1" position={p.position} />
              </button>
            ))}
          </div>
          <div className="mono-up build-strip-cap">
            ⎯⎯ Wheels · Seat · Cockpit · Consumables · Exhaust · Shifter
          </div>
        </Reveal>
      </div>

      <lb.Lightbox />

      <style>{`
        .build { background: var(--bg-1); }
        .build-detail-btn { padding: 0; background: transparent; border: 0; cursor: pointer; transition: transform 0.4s ease; display: block; }
        .build-detail-btn:hover { transform: translateY(-3px); }
        .build-detail-btn:hover .ph { border-color: var(--accent); }
        .build-h { font-size: clamp(40px, 6vw, 96px); margin: 24px 0 14px; }
        .build-sub { font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); margin-bottom: 56px; }
        .build-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 1px;
          background: var(--line);
          border: 1px solid var(--line);
        }
        .build-cell {
          background: var(--bg-1);
          padding: 28px 28px 32px;
          display: flex;
          flex-direction: column;
          gap: 14px;
          transition: background 0.25s;
          cursor: default;
        }
        .build-cell:hover { background: var(--bg-2); }
        .build-cell:hover .build-wrench { transform: rotate(22deg); color: var(--accent-2); }
        .build-cell-top { display: flex; align-items: center; gap: 12px; }
        .build-wrench {
          color: var(--accent);
          display: inline-flex;
          transition: transform 0.35s ease, color 0.25s;
        }
        .build-tag { color: var(--ink-2); }
        .build-num { color: var(--ink-3); font-size: 11px; margin-left: auto; }
        .build-name {
          font-size: clamp(22px, 2.4vw, 32px);
          line-height: 1.05;
        }
        .build-note {
          font-family: var(--font-mono);
          font-size: 13px;
          color: var(--ink-2);
          line-height: 1.55;
        }
        .build-detail-strip {
          display: grid;
          grid-template-columns: repeat(6, 1fr);
          gap: 12px;
          margin-top: 56px;
        }
        .build-strip-cap {
          margin-top: 16px;
          color: var(--ink-3);
        }
        @media (max-width: 1100px) {
          .build-detail-strip { grid-template-columns: repeat(3, 1fr); }
        }
        @media (max-width: 720px) {
          .build-grid { grid-template-columns: 1fr; }
          .build-detail-strip { grid-template-columns: repeat(2, 1fr); }
        }
      `}</style>
    </section>
  );
}
window.Build = Build;