/* global React, useViewport, PageIntro, EditorialCarousel, ThreadBadge,
           SpecificationSection, ConfiguratorStrip, SpecifierDownloads, EnquiryBlock,
           ModularBuildUp, ModularAssemblies */
/*
 * PlatformDetail — collection detail page for Platform (2026).
 * Endure + Configure. Beam seating system for transport rooms.
 * Photographed by Rodrigo Rabaco. Debuted at Passenger Terminal World 2026, London.
 */

const { useState: useStatePF, useEffect: useEffectPF } = React;

const PLATFORM_SLIDES_BASE = [
  { kind: "video", title: "Platform", video: "images/collections/platform/hero/01.mp4", poster: "images/collections/platform/hero/02.jpg", duration: 14000 },
  { title: "Platform", image: "images/collections/platform/hero/02.jpg" },
  { title: "Platform", image: "images/collections/platform/hero/03.jpg" },
  { title: "Platform", image: "images/collections/platform/hero/04.jpg" },
  { title: "Platform", image: "images/collections/platform/hero/05.jpg" },
];
const PLATFORM_SLIDES = (window.IMG && window.IMG.extend) ? window.IMG.extend("platform", "hero", PLATFORM_SLIDES_BASE) : PLATFORM_SLIDES_BASE;

function PlatformCarousel() {
  const vw = useViewport();
  const isMobile = vw < 760;
  const [i, setI] = useStatePF(0);
  const [paused, setPaused] = useStatePF(false);
  useEffectPF(() => {
    if (paused) return;
    const dwell = PLATFORM_SLIDES[i].duration || 7000;
    const id = setTimeout(() => setI((x) => (x + 1) % PLATFORM_SLIDES.length), dwell);
    return () => clearTimeout(id);
  }, [paused, i]);
  return (
    <section onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}
      style={{ position: "relative", width: "100%", height: isMobile ? "76vh" : "78vh",
        minHeight: isMobile ? 520 : 620, maxHeight: isMobile ? "none" : 820,
        overflow: "hidden", background: "#1a1917" }}>
      {PLATFORM_SLIDES.map((ss, idx) => (
        <div key={idx} style={{ position: "absolute", inset: 0, opacity: idx === i ? 1 : 0, transition: "opacity 1100ms ease" }}>
          {ss.kind === "video" ? (
            <video src={ss.video} poster={ss.poster} autoPlay muted loop playsInline preload="auto"
              style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
          ) : (
            <img src={ss.image} srcSet={window.IMG && window.IMG.srcsetFor(ss.image)} sizes={window.IMG && window.IMG.sizes()} alt={ss.title} loading={idx === 0 ? "eager" : "lazy"}
              style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
          )}
        </div>
      ))}
      <div style={{ position: "absolute", inset: 0,
        background: "linear-gradient(to bottom, transparent 50%, rgba(26,25,23,0.55) 100%)", pointerEvents: "none" }} />
      <div style={{ position: "absolute", left: 0, right: 0, bottom: isMobile ? 84 : 100,
        padding: isMobile ? "0 24px" : "0 32px", textAlign: "center", color: "#f5f3ef" }}>
        <h3 style={{ fontFamily: "var(--font-display, Poppins, sans-serif)", fontWeight: 500,
          fontSize: isMobile ? "clamp(20px, 5vw, 26px)" : "clamp(22px, 1.9vw, 32px)",
          lineHeight: 1.18, letterSpacing: "-0.01em", margin: "0 auto", maxWidth: "26ch", textWrap: "balance" }}>
          {PLATFORM_SLIDES[i].title}
        </h3>
      </div>
      <div style={{ position: "absolute", bottom: isMobile ? 36 : 44, left: 0, right: 0,
        display: "flex", justifyContent: "center", gap: 10 }}>
        {PLATFORM_SLIDES.map((_, idx) => (
          <button key={idx} onClick={() => setI(idx)} aria-label={`Show slide ${idx + 1}`}
            style={{ width: idx === i ? 24 : 6, height: 2,
              background: idx === i ? "rgba(245,243,239,0.95)" : "rgba(245,243,239,0.4)",
              border: "none", cursor: "pointer", padding: 0,
              transition: "width 320ms ease, background 320ms ease" }} />
        ))}
      </div>
    </section>
  );
}

function PlatformDetail() {
  const vw = useViewport();
  const isMobile = vw < 720;
  return (
    <>
      <PlatformCarousel />
      <PageIntro
        eyebrow="Platform · Alexander Lotersztain, 2026"
        title="A beam seating system for transport rooms."
        body="Platform debuted at Passenger Terminal World 2026 in London — a beam system designed to recede into contemporary transport architecture. Single or double row, linear or curved, with optional power, tables and luggage rails."
        compact noTopPad
      />

      <section style={{ padding: isMobile ? "56px 20px" : "96px max(24px, 3vw)", maxWidth: 1440, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: isMobile ? 32 : 48 }}>
          <EditorialCarousel
            slides={[
              { src: "images/collections/platform/hero/03.jpg", alt: "Platform · seat-shell backs in concourse light", caption: "01 · Shell" },
              { src: "images/collections/platform/hero/05.jpg", alt: "Platform · seat pan and in-beam power detail",    caption: "02 · Detail" },
              { src: "images/collections/platform/pillars/01.jpg", alt: "Platform · cast-aluminium arm and shell edge",   caption: "03 · Arm" },
            ]}
            aspect="3/4"
          />
          <div style={{ alignSelf: "center" }}>
            <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: 14 }}>Endure · Configure</div>
            <h2 style={{ fontWeight: 500, fontSize: isMobile ? "clamp(22px, 5.5vw, 28px)" : "clamp(24px, 2.2vw, 32px)", lineHeight: 1.12, letterSpacing: "-0.01em", color: "#1a1917", margin: "0 0 16px 0", maxWidth: "22ch" }}>
              Drawn to disappear into the architecture.
            </h2>
            <p style={{ fontSize: isMobile ? 15 : 16, lineHeight: 1.55, color: "#1a1917", maxWidth: "46ch", margin: 0, fontWeight: 500 }}>
              Where Gateway carries presence, Platform carries quiet. A flatter beam profile, recessed legs, and a tighter upholstery line — designed for terminals, interchanges and station concourses where the room is the figure and the seating is the ground.
            </p>
          </div>
        </div>
      </section>

      <section style={{ padding: isMobile ? "64px 20px" : "120px max(24px, 3vw)", maxWidth: 1440, margin: "0 auto" }}>
        <div style={{ maxWidth: 720, marginBottom: isMobile ? 40 : 64 }}>
          <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: 14 }}>What Platform does</div>
          <h2 style={{ fontFamily: "var(--font-display, Poppins, sans-serif)", fontWeight: 500, fontSize: isMobile ? "clamp(24px, 6vw, 30px)" : "clamp(26px, 2.6vw, 38px)", lineHeight: 1.12, letterSpacing: "-0.015em", color: "#1a1917", margin: 0, maxWidth: "26ch", textWrap: "balance" }}>
            Three things the system was drawn to do.
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 48 : 40 }}>
          {[
            { no: "01", kicker: "Recessive", title: "Reads as ground, not figure.", body: "A low beam profile and recessed stainless steel legs let Platform sit under the architecture. Passengers see the room first; the seating second.", image: "images/collections/platform/pillars/02.jpg", alt: "Platform · double-sided run with integrated table" },
            { no: "02", kicker: "Configurable", title: "Linear, curved, with luggage and power.", body: "Single or double row up to 9800 mm. segments Optional Tables, AC + USB-C, integration.", image: "images/collections/platform/hero/05.jpg", alt: "Platform · serviceable seat pan and power module" },
            { no: "03", kicker: "Serviceable", title: "Modules detach in place.", body: "Every seat, table and rail demount from the beam without lifting it. Intuitive replacement of components and maintenance = concourse isntalation measured in minutes, not hours.", image: "images/collections/platform/pillars/03.webp", alt: "Platform · low beam profile" },
          ].map((f) => (
            <div key={f.no}>
              <div style={{ aspectRatio: "4/5", background: "#e4e2da", overflow: "hidden", marginBottom: isMobile ? 18 : 24 }}>
                <img src={f.image} srcSet={window.IMG && window.IMG.srcsetFor(f.image)} sizes={window.IMG && window.IMG.sizes()} alt={f.alt} loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
              </div>
              <div style={{ display: "flex", alignItems: "baseline", gap: 14, marginBottom: 12 }}>
                <div style={{ fontSize: 11, color: "#6c6862", fontWeight: 500, letterSpacing: "0.08em" }}>{f.no}</div>
                <div style={{ height: "0.5px", flex: 1, background: "rgba(26,25,23,0.25)" }} />
                <div style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500 }}>{f.kicker}</div>
              </div>
              <h3 style={{ fontFamily: "var(--font-display, Poppins, sans-serif)", fontWeight: 500, fontSize: isMobile ? 19 : 20, lineHeight: 1.22, letterSpacing: "-0.01em", color: "#1a1917", margin: "0 0 10px 0", maxWidth: "20ch" }}>
                {f.title}
              </h3>
              <p style={{ fontSize: 14, lineHeight: 1.6, color: "#6c6862", margin: 0, maxWidth: "38ch" }}>{f.body}</p>
            </div>
          ))}
        </div>
      </section>

      {/* The build-up — condensed sequence */}
      <ModularBuildUp
        eyebrow="How Platform is built"
        title="Built from the beam up."
        concept="Choose a footprint, populate the beam, power it, finish it — or start from a configuration we've already drawn."
        steps={[
          { n: 1, layer: "Frame",       line: "Single or double beam, linear or curved, up to 9 800 mm." },
          { n: 2, layer: "Seating",     line: "Fill the beam with seats." },
          { n: 3, layer: "Tables",      line: "Drop in surfaces in lieu of a seat." },
          { n: 4, layer: "Armrests",    line: "End arms — comfort, and the carrier for power." },
          { n: 5, layer: "Power",       line: "AC, USB and wireless, wire-managed inside the beam." },
          { n: 6, layer: "Accessories", line: "Luggage rails and floor fixing as needed." },
          { n: 7, layer: "Finish",      line: "Brushed stainless, upholstery and metalwork." },
        ]}
      />

      {/* The shortcut path — typical pre-drawn assemblies */}
      <ModularAssemblies
        eyebrow="Start from a drawn configuration"
        title="Three assemblies, drawn and ready."
        intro="Each is a real bundle a specifier can quote from — and an editable starting point in the configurator. Component counts are indicative; final bay splits are confirmed against the frame spec."
        assemblies={[
          { id: "platform-4-single",  kicker: "Single beam",        name: "Platform 4",  rows: [
            { label: "Frame",    value: "PLT-SNG-04" },
            { label: "Populate", value: "4× PLT-SEA" },
            { label: "Power",    value: "1× TUF-R USB · optional" },
          ] },
          { id: "platform-5-table",   kicker: "Beam + table + arms", name: "Platform 5",  rows: [
            { label: "Frame",    value: "PLT-SNG-ARE-05" },
            { label: "Populate", value: "4× PLT-SEA + 1× PLT-TBL-SNG" },
            { label: "Power",    value: "2× PLT-ARM · PIP GPO" },
          ] },
          { id: "platform-12-b2b",    kicker: "Back-to-back",       name: "Platform 12", rows: [
            { label: "Frame",    value: "PLT-DBL-12" },
            { label: "Populate", value: "10× PLT-SEA + 2× PLT-TBL-DBL" },
            { label: "Power",    value: "4× PLT-ARM · PIP per bank" },
          ] },
        ]}
        note="Configurations beyond six bays are made by joining single and double frames — the system scales without limit."
        invitation="Build your own — then price it with us, or take it to your drawings. Every configuration exports as a CAD-ready DXF, direct from the platform."
      />

      <SpecificationSection
        headline="Eight modules. Linear or curved. Up to 9 800 mm."
        meta={[
          ["Design", "Alexander Lotersztain, 2026"],
          ["Sectors", "Aviation · Civic · Corporate"],
          ["Environment", "Indoor"],
          ["Warranty", "5 year structural"],
          ["Manufactured", "Australia · components from China"],
          ["Debut", "Passenger Terminal World 2026, London"],
        ]}
        materials="Powder-coated mild steel beam with cast-aluminium recessed legs. Dunlop Enduro® foam on EO MDF substrate, upholstered in COM, COL or commercial vinyl. Optional luggage rails in tubular stainless. OE Elsafe AC + USB-C power modules, fully wire-managed inside the beam. Placeholder spec — confirm with Derlot."
        groups={[
          {
            label: "Seat modules",
            note: "Combine in single or double rows. Linear or curved.",
            items: [
              { sku: "PF-S1",  name: "Single seat",            dims: "580 × 560 × 760" },
              { sku: "PF-S1A", name: "Single seat + arm",      dims: "640 × 560 × 760" },
              { sku: "PF-S2",  name: "Double seat",            dims: "1180 × 560 × 760" },
              { sku: "PF-S3",  name: "Triple seat",            dims: "1780 × 560 × 760" },
            ],
          },
          {
            label: "In-run accessories",
            items: [
              { sku: "PF-LR", name: "Luggage rail",            dims: "600 × 560 × 760" },
              { sku: "PF-CT", name: "Centre table",            dims: "600 × 560 × 760" },
              { sku: "PF-PM", name: "Power module · AC + USB-C", dims: "300 × 560 × 760" },
            ],
          },
          {
            label: "Structural",
            items: [
              { sku: "PF-EU", name: "End unit · structural cap", dims: "180 × 560 × 760" },
            ],
          },
        ]}
        extras={[
          {
            label: "Geometry options",
            note: "Specified on plan at order.",
            rows: [
              { text: "Linear · single or double row, runs up to 9 800 mm" },
              { text: "Curved · radii to project specification" },
              { text: "All geometries compatible with the full SKU range.", muted: true },
            ],
          },
        ]}
        finishHeadline="Powder-coat frame palette and specifier-selected upholstery."
      />

      <ConfiguratorStrip collection="Platform" />

      {/* Specified in — debut */}
      <section style={{ padding: isMobile ? "56px 20px" : "96px max(24px, 3vw)", maxWidth: 1440, margin: "0 auto", borderTop: "0.5px solid rgba(26,25,23,0.18)" }}>
        <div style={{ marginBottom: isMobile ? 24 : 36 }}>
          <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: 12 }}>Specified in</div>
          <h2 style={{ fontFamily: "var(--font-display, Poppins, sans-serif)", fontWeight: 500, fontSize: isMobile ? "clamp(22px, 5.5vw, 28px)" : "clamp(24px, 2.2vw, 32px)", lineHeight: 1.12, letterSpacing: "-0.01em", color: "#1a1917", margin: 0, maxWidth: "24ch", textWrap: "balance" }}>
            Debut at Passenger Terminal World, 2026.
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: isMobile ? 28 : 48, alignItems: "center" }}>
          <div style={{ aspectRatio: isMobile ? "4/5" : "3/2", background: "#e4e2da", overflow: "hidden" }}>
            <img src="images/_legacy/collections/platform/beam-10seater.jpg" alt="Platform debut at Passenger Terminal World 2026 — double-sided ten-seater run" loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
          </div>
          <div>
            <div style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: 10 }}>London · 2026 · Trade fair</div>
            <h3 style={{ fontFamily: "var(--font-display, Poppins, sans-serif)", fontWeight: 500, fontSize: isMobile ? 22 : 26, lineHeight: 1.18, letterSpacing: "-0.01em", color: "#1a1917", margin: "0 0 14px 0", maxWidth: "22ch" }}>
              Passenger Terminal World 2026.
            </h3>
            <p style={{ fontSize: isMobile ? 15 : 16, lineHeight: 1.55, color: "#1a1917", margin: "0 0 16px 0", maxWidth: "46ch" }}>
              Platform launched alongside Trio at the world's leading airport-design exhibition — a single 8-metre run, single-row with integrated power and luggage rails, exhibited as a working sample of how the system reads in concourse light.
            </p>
            <div style={{ fontSize: 13, color: "#6c6862", letterSpacing: "0.04em" }}>Photography · Rodrigo Rabaco</div>
          </div>
        </div>
      </section>

      <SpecifierDownloads collection="Platform" />

      <section style={{ padding: isMobile ? "56px 20px" : "96px max(24px, 3vw)", maxWidth: 1440, margin: "0 auto", borderTop: "0.5px solid rgba(26,25,23,0.18)" }}>
        <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: 20 }}>Related collections</div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 32 : 32 }}>
          {(window.COLLECTIONS || []).filter(c => ["gateway", "trio", "autobahn"].includes(c.slug)).map((c) => (
            <div key={c.slug}>
              <div style={{ aspectRatio: "4/5", background: "#e4e2da", overflow: "hidden" }}>
                {c.image && <img src={c.image} srcSet={window.IMG && window.IMG.srcsetFor(c.image)} sizes={window.IMG && window.IMG.sizes()} alt={c.name} loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />}
              </div>
              <div style={{ height: "0.5px", background: "rgba(26,25,23,0.18)", marginTop: 14 }} />
              <div style={{ fontSize: 16, color: "#1a1917", marginTop: 12 }}>{c.name}</div>
              <div style={{ marginTop: 10, display: "flex", flexWrap: "wrap", rowGap: 6 }}>
                {c.threads.map(tk => <ThreadBadge key={tk} threadKey={tk} />)}
              </div>
            </div>
          ))}
        </div>
      </section>

      <EnquiryBlock collection="Platform" />
    </>
  );
}

window.PlatformDetail = PlatformDetail;