// "Sepang. Five years." — chronological strip, five chapters stacked vertically.
// Each chapter has a meta column (date + title + body) and a 3-up photo grid that
// wraps additional images to subsequent rows.

const SEPANG_CHAPTERS = [
  {
    when: "2022 · May",
    title: "First lapping day.",
    body: "Stock brakes, OE tyres.",
    photos: [
      { src: "uploads/photos/20220523_092605.png", alt: "Track action, May 2022" },
      { src: "uploads/photos/sepang_pan_no69_dusk.jpeg", alt: "Dusk panning shot — #69 MOTUL livery" },
    ],
  },
  {
    when: "2022 · Nov",
    title: "Sunset to floodlight.",
    body: "Two events that month.",
    photos: [
      { src: "uploads/photos/20221128_191503_replacement.jpg", alt: "Sepang sunset silhouette" },
      { src: "uploads/photos/sepang_pan_blue_night_main.jpeg", alt: "Night panning shot under floodlights" },
    ],
  },
  {
    when: "2024 · Sep",
    title: "Big brakes, real tyres.",
    body: "Big brakes and track tyres for more fun.",
    photos: [
      { src: "uploads/photos/20240921_195230_replacement.jpg", alt: "LYNLEX dusk panning" },
      { src: "uploads/photos/20240921_194648_01_clean.jpg", alt: "Side panning past the Malaysia flag mural" },
      { src: "uploads/photos/sepang_pan_blue_night.jpeg", alt: "Night panning, brake lights glowing" },
      { src: "uploads/photos/20260425_221719_03.jpeg", alt: "Rear three-quarter under floodlights, brake lights lit" },
    ],
  },
  {
    when: "2025 · Sep",
    title: "Wet, but worth it.",
    body: "Half the day rained on. Best traction lessons of the five years.",
    photos: [
      { src: "uploads/photos/20260425_221501_04.jpeg", alt: "Rear three-quarter at the pit exit, SEPANG signage and grandstand canopy in the background, green light" },
      { src: "uploads/photos/20250928_120546_replacement_clean3.jpg", alt: "Wet front three-quarter" },
      { src: "uploads/photos/20250928_120911_clean.jpg", alt: "Wet side panning, spray off the rear tyres" },
      { src: "uploads/photos/20250928_161814_clean3.jpg", alt: "Daytime panning" },
    ],
  },
  {
    when: "2026 · Apr",
    title: "Track day regulars.",
    body: "Same circuit, same car, different problems.",
    photos: [
      { src: "uploads/photos/20260425_221501_03_clean.jpeg", alt: "Rear three-quarter, exiting the hairpin" },
      { src: "uploads/photos/20260425_221442_06_clean.jpeg", alt: "Front three-quarter side panning" },
      { src: "uploads/photos/20260425_221338_03.jpeg", alt: "Pit garage detail — Enkei PF05 gunmetal 5-spoke with Paragon big brake, flat tyre" },
      { src: "uploads/photos/20260425_221338_01_clean.jpeg", alt: "Destroyed Nankang CR-S tyre" },
      { src: "uploads/photos/20260425_134837_clean.jpeg", alt: "Side panning, hill backdrop" },
    ],
  },
];

function Sepang() {
  // Flatten all chapter photos with chapter context for lightbox captions.
  const flat = [];
  SEPANG_CHAPTERS.forEach((c, ci) => {
    c.photos.forEach((p) => {
      flat.push({
        src: p.src,
        alt: p.alt,
        caption: `Ch.${String(ci + 1).padStart(2, "0")} · ${c.when}`,
        sub: p.alt,
      });
    });
  });
  const lb = usePhotoLightbox(flat);

  // Helper: given chapter index + photo index within chapter, compute the flat index.
  const flatIdxOf = (ci, pi) => {
    let n = 0;
    for (let i = 0; i < ci; i++) n += SEPANG_CHAPTERS[i].photos.length;
    return n + pi;
  };

  return (
    <section id="sepang" className="section-pad sepang">
      <div className="section-inner">
        <Reveal stagger>
          <span className="eyebrow">The Cities · 02 — Kuala Lumpur</span>
          <h2 className="h-display sepang-h">
            Sepang.<br/>
            <span className="accent">Five years.</span>
          </h2>
          <p className="sepang-sub">
            Sepang International Circuit · 5.543 km · 15 turns · run clockwise.
            Two hours from home if the border gods are kind. Three if they're not.
          </p>
        </Reveal>

        <div className="sepang-stack">
          {SEPANG_CHAPTERS.map((c, i) => (
            <Reveal key={i} className="sepang-ch">
              <div className="sepang-ch-meta">
                <div className="sepang-ch-head">
                  <span className="mono sepang-ch-num">⎯ Ch.{String(i + 1).padStart(2, "0")} / {String(SEPANG_CHAPTERS.length).padStart(2, "0")}</span>
                  <span className="mono-up sepang-ch-when">{c.when}</span>
                </div>
                <h3 className="h-display sepang-ch-title">{c.title}</h3>
                <p className="sepang-ch-body">{c.body}</p>
              </div>
              <div className="sepang-ch-photos">
                {c.photos.map((p, j) => (
                  <button
                    key={j}
                    className="sepang-ch-cell"
                    onClick={() => lb.open(flatIdxOf(i, j))}
                    aria-label={`Open ${p.alt}`}
                  >
                    <Photo
                      src={p.src}
                      alt={p.alt}
                      ratio="3 / 2"
                      position="center"
                    />
                  </button>
                ))}
              </div>
            </Reveal>
          ))}
        </div>
      </div>

      <lb.Lightbox />

      <style>{`
        .sepang { background: var(--bg-1); }
        .sepang-h {
          font-size: clamp(40px, 6vw, 96px);
          margin: 24px 0 24px;
        }
        .sepang-h .accent { color: var(--accent); }
        .sepang-sub {
          font-family: var(--font-mono);
          font-size: 13px;
          color: var(--ink-2);
          max-width: 60ch;
          line-height: 1.7;
          margin-bottom: 56px;
        }

        .sepang-stack {
          display: flex; flex-direction: column;
          gap: 64px;
        }
        .sepang-ch {
          display: grid;
          grid-template-columns: 280px 1fr;
          gap: 40px;
          padding-top: 32px;
          border-top: 1px dashed var(--line);
        }
        .sepang-ch:first-child { border-top: none; padding-top: 0; }
        .sepang-ch-meta { display: flex; flex-direction: column; gap: 14px; }
        .sepang-ch-head { display: flex; flex-direction: column; gap: 8px; }
        .sepang-ch-num { color: var(--accent); font-size: 11px; }
        .sepang-ch-when { color: var(--ink-2); font-size: 11px; }
        .sepang-ch-title {
          font-size: clamp(28px, 2.4vw, 40px);
          line-height: 1.05;
          margin: 0;
        }
        .sepang-ch-body {
          font-family: var(--font-mono);
          font-size: 13px;
          color: var(--ink-2);
          line-height: 1.7;
          max-width: 32ch;
        }

        .sepang-ch-photos {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 12px;
          align-content: start;
        }
        .sepang-ch-cell {
          padding: 0; background: transparent; border: 0;
          cursor: pointer;
          transition: transform 0.4s ease;
        }
        .sepang-ch-cell:hover { transform: translateY(-3px); }
        .sepang-ch-cell:hover .ph { border-color: var(--accent); }

        @media (max-width: 980px) {
          .sepang-ch { grid-template-columns: 1fr; gap: 24px; }
          .sepang-ch-body { max-width: 60ch; }
          .sepang-ch-photos { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 560px) {
          .sepang-ch-photos { grid-template-columns: 1fr; }
        }
      `}</style>
    </section>
  );
}
window.Sepang = Sepang;