const DESIGN_ROWS = [
  {
    side: "left",
    eyebrow: "Front",
    src: "uploads/photos/lynlex_garage_lit.jpeg",
    alt: "Front three-quarter, LYNLEX-liveried, pit garage",
    headline: "A wide mesh N grille and angular DRLs.",
    body:
      "Aftermarket lip splitter with a flow profile borrowed from the i30 N TCR. Side canards balance the front end above 100 km/h. The signature red accent line runs across the lower bumper. Photographed in a Sepang pit garage — overhead fluorescents picking out the shark-fang DRL signature.",
    ratio: "3 / 2",
    position: "center",
  },
  {
    side: "right",
    eyebrow: "Side",
    src: "uploads/photos/night_pan_clean.jpeg",
    alt: "Side profile, motion-panned at night",
    headline: '19" forged alloys, blurred at speed.',
    body:
      "N side skirt with embossed badge, low and flush against the rocker. The C-pillar drop and short rear overhang give the car its planted, rally-adjacent stance. Shot at 1/30s under floodlights — the grandstand reduced to streaks of light.",
    ratio: "3 / 2",
    position: "center",
  },
  {
    side: "left",
    eyebrow: "Rear",
    src: "uploads/photos/20200315_150752_05.jpg",
    alt: "Rear three-quarter on the Singapore Grand Prix circuit straight",
    headline: "Twin oversized exhausts. Triangular brake light. Diffuser with red accent.",
    body:
      "The roof spoiler is functional above ~130 km/h — measurable downforce on the rear axle. The triangular high-mount brake light is the model's signature. Diffuser insert painted to match the front lip; everything matches. Photographed on the Marina Bay Street Circuit straight, where the Singapore Grand Prix runs every year.",
    ratio: "3 / 2",
    position: "center 75%",
  },
];

function Design() {
  const lb = usePhotoLightbox(DESIGN_ROWS.map((r) => ({
    src: r.src, alt: r.alt, caption: `Fig. ${r.eyebrow}`, sub: r.alt,
  })));
  return (
    <section id="design" className="section-pad design">
      <div className="section-inner">
        <Reveal>
          <span className="eyebrow">Design</span>
          <h2 className="h-display design-h">Three quarters.</h2>
        </Reveal>

        <div className="design-rows">
          {DESIGN_ROWS.map((row, i) => (
            <Reveal key={i} className={"design-row design-row--" + row.side}>
              <div className="design-photo">
                <button className="design-photo-btn" onClick={() => lb.open(i)} aria-label={`Open ${row.alt}`}>
                  <Photo
                    label={row.alt}
                    src={row.src}
                    alt={row.alt}
                    ratio={row.ratio}
                    position={row.position}
                  />
                </button>
                <div className="design-caption mono-up">
                  Fig. {String(i + 1).padStart(2, "0")} · {row.eyebrow}
                </div>
              </div>
              <div className="design-text">
                <span className="eyebrow muted">{row.eyebrow}</span>
                <h3 className="h-display design-rh">{row.headline}</h3>
                <p>{row.body}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>

      <lb.Lightbox />

      <style>{`
        .design { background: var(--bg-0); }
        .design-photo-btn { padding: 0; background: transparent; border: 0; cursor: pointer; display: block; width: 100%; transition: transform 0.4s ease; }
        .design-photo-btn:hover { transform: translateY(-3px); }
        .design-photo-btn:hover .ph { border-color: var(--accent); }
        .design-h { font-size: clamp(40px, 6vw, 96px); margin: 24px 0 80px; }
        .design-rows { display: flex; flex-direction: column; gap: clamp(80px, 12vh, 160px); }
        .design-row {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: clamp(24px, 5vw, 80px);
          align-items: center;
        }
        .design-row--right { direction: rtl; }
        .design-row--right > * { direction: ltr; }
        .design-photo { display: flex; flex-direction: column; gap: 12px; }
        .design-caption { color: var(--ink-2); }
        .design-text { display: flex; flex-direction: column; gap: 18px; max-width: 520px; }
        .design-rh {
          font-size: clamp(28px, 3.4vw, 48px);
          line-height: 1.05;
          color: var(--ink-0);
        }
        .design-text p {
          font-size: 16px;
          line-height: 1.7;
          color: var(--ink-1);
        }
        @media (max-width: 820px) {
          .design-row, .design-row--right { grid-template-columns: 1fr; direction: ltr; }
        }
      `}</style>
    </section>
  );
}
window.Design = Design;