/* JETX — GALLERY / MEDIA page */

function GallerySection({ index, title, eyebrow, items }) {
  return (
    <section className="section shell" style={{ paddingTop: index === "01" ? undefined : 0 }} data-screen-label={`Gallery ${title}`}>
      <Reveal className="section-head">
        <div className="index"><span className="num">{index}</span><span>{title}</span></div>
        <div>
          <span className="eyebrow">{eyebrow}</span>
        </div>
      </Reveal>
      <Reveal>
        <div className="gallery-grid">
          {items.map((it) => (
            <div className={`gallery-item ${it.size}`} key={it.id}>
              {it.src
                ? <img className="gallery-img" src={it.src} alt={it.cap} loading="lazy" style={{ objectFit: it.fit || "contain" }} />
                : <image-slot
                    id={it.id}
                    fit={it.fit || "contain"}
                    placeholder={it.placeholder || "Drop image"}
                  ></image-slot>}
              <div className="gallery-cap">
                <span className="idx">{it.tag}</span>
                <span>{it.cap}</span>
              </div>
            </div>
          ))}
        </div>
      </Reveal>
    </section>
  );
}

function GalleryPage() {
  const commercial = [
    { id: "g-c-1", size: "g-half", tag: "JETX Vector", cap: "Five-seat eVTOL", src: "assets/concepts/n03.png" },
    { id: "g-c-2", size: "g-half", tag: "JETX Aurora", cap: "Two-seat eVTOL", src: "assets/concepts/n13.png" },
    { id: "g-c-3", size: "g-half", tag: "JETX X2 Amphibious", cap: "Six-seat eVTOL", src: "assets/concepts/n14.png" },
    { id: "g-c-4", size: "g-half", tag: "JETX X2", cap: "Six-seat eVTOL", src: "assets/concepts/n10.png" },
    { id: "g-c-5", size: "g-half", tag: "JETX XF4", cap: "Four-seat eVTOL", src: "assets/concepts/n11.png" },
    { id: "g-c-6", size: "g-half", tag: "JETX X1", cap: "Six-seat eVTOL", src: "assets/concepts/n06.png" },
    { id: "g-c-7", size: "g-half", tag: "JETX X2 Amphibious", cap: "Six-seat eVTOL", src: "assets/concepts/n17.png" },
    { id: "g-c-8", size: "g-half", tag: "JETX Vector", cap: "Five-seat eVTOL", src: "assets/concepts/n12.png" },
  ];
  const defense = [
    { id: "g-d-1", size: "g-half", tag: "Fury V1", cap: "Stealth manned combat flying-wing", src: "assets/concepts/n04.png" },
    { id: "g-d-furyv2", size: "g-half", tag: "Fury V2", fit: "cover", cap: "Unmanned stealth combat flying-wing", src: "assets/concepts/fury-v2.png" },
    { id: "g-d-2", size: "g-half", tag: "JETX X", cap: "Unmanned stealth combat jet", src: "assets/concepts/jetx-x-ucav.png" },
    { id: "g-d-3", size: "g-half", tag: "JETX X2 Military", cap: "Six-seat armed eVTOL", src: "assets/concepts/n18.png" },
    { id: "g-d-4", size: "g-half", tag: "MS1", cap: "Missile-launcher UAV", src: "assets/concepts/n19.png" },
    { id: "g-d-5", size: "g-half", tag: "MS1", cap: "Missile-launcher UAV · alternate loadout", src: "assets/concepts/n20.png" },
    { id: "g-d-6", size: "g-half", tag: "X2s Group III", fit: "cover", cap: "Unmanned tactical UAV", src: "assets/concepts/x2s-group3.png" },
    { id: "g-d-x2s4", size: "g-half", tag: "X2s Group IV", fit: "cover", cap: "Armed unmanned UAV", src: "assets/concepts/x2s-group4.png" },
    { id: "g-d-x2s-manned", size: "g-half", tag: "X2s Manned", fit: "cover", cap: "Armed attack variant", src: "assets/concepts/x2s-manned.png" },
  ];
  const racingCivil = [
    { id: "g-r-1", size: "g-half", tag: "JETX EXR-1", cap: "Ground-effect racer", src: "assets/concepts/n05.png" },
    { id: "g-r-2", size: "g-half", tag: "JETX XF", cap: "Circuit racer", src: "assets/concepts/n16.png" },
    { id: "g-r-3", size: "g-half", tag: "JETX X2", fit: "cover", cap: "Unmanned firefighting", src: "assets/concepts/n07.png" },
    { id: "g-r-4", size: "g-half", tag: "JETX X2", cap: "Unmanned cargo", src: "assets/concepts/n09.png" },
    { id: "g-r-5", size: "g-half", tag: "X2s Titan", fit: "cover", cap: "NASA Titan exploration UAV", src: "assets/concepts/x2s-titan.jpg" },
    { id: "g-r-6", size: "g-half", tag: "Fury V2 Titan", fit: "cover", cap: "NASA Titan Explorer variant", src: "assets/concepts/fury-v2-titan.png" },
  ];

  return (
    <React.Fragment>
      <SubHero
        crumb="Selected concepts"
        title="Portfolio"
        lede="Concept aircraft from across the JETX program — commercial, defense and racing platforms built on vector-thrust propulsion."
        image="assets/concepts/n13.png"
        flip
      />

      <GallerySection index="01" title="Commercial Concepts" eyebrow="Advanced Air Mobility · passenger, cargo & amphibious" items={commercial} />
      <GallerySection index="02" title="Defense & Military" eyebrow="Unmanned · stealth · strike & loitering munitions" items={defense} />
      <GallerySection index="03" title="Racing & Civil Missions" eyebrow="EXR program · firefighting, logistics & exploration" items={racingCivil} />

      <InvestorCTA />
    </React.Fragment>
  );
}

window.mountPage("gallery.html", GalleryPage);