/* global React, useViewport, PageIntro, EditorialCarousel, ThreadBadge,
           SpecificationSection, ConfiguratorStrip, SpecifierDownloads, EnquiryBlock */
/*
 * AutobahnDetail — collection detail page for Autobahn (2012).
 *
 * Narrative angle: heritage airport/transit beam — the predecessor to Gateway.
 * Endure + configure thread, so configurator IS included.
 * Documented projects use Brisbane Airport placeholder + Ipswich Rail Museum.
 */

const { useState: useStateAu, useEffect: useEffectAu } = React;

const AUTOBAHN_SLIDES_BASE = [
  { title: "Autobahn", image: "images/collections/autobahn/hero/01.jpg" },
  { title: "Autobahn", image: "images/collections/autobahn/hero/02.jpg" },
  { title: "Autobahn", image: "images/collections/autobahn/hero/03.jpg" },
  { title: "Autobahn", video: "images/collections/autobahn/hero/04.mp4", image: "images/collections/autobahn/hero/01.jpg" },
];
const AUTOBAHN_SLIDES = (window.IMG && window.IMG.extend) ? window.IMG.extend("autobahn", "hero", AUTOBAHN_SLIDES_BASE) : AUTOBAHN_SLIDES_BASE;

function AutobahnCarousel() {
  const vw = useViewport();
  const isMobile = vw < 760;
  const [i, setI] = useStateAu(0);
  const [paused, setPaused] = useStateAu(false);

  useEffectAu(() => {
    if (paused) return;
    const id = setInterval(() => setI((x) => (x + 1) % AUTOBAHN_SLIDES.length), 7000);
    return () => clearInterval(id);
  }, [paused]);

  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",
      }}>
      {AUTOBAHN_SLIDES.map((ss, idx) => (
        <div key={idx} style={{
          position: "absolute", inset: 0,
          opacity: idx === i ? 1 : 0,
          transition: "opacity 1100ms ease",
        }}>
          {ss.video ? (
            <video
              src={ss.video}
              autoPlay muted loop playsInline
              poster={ss.image || undefined}
              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",
        }}>
          {AUTOBAHN_SLIDES[i].title}
        </h3>
      </div>

      <div style={{
        position: "absolute", bottom: isMobile ? 36 : 44, left: 0, right: 0,
        display: "flex", justifyContent: "center", gap: 10,
      }}>
        {AUTOBAHN_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 AutobahnDetail() {
  const vw = useViewport();
  const isMobile = vw < 720;

  return (
    <>
      <AutobahnCarousel />

      <PageIntro
        eyebrow="Autobahn · Alexander Lotersztain, 2012"
        title="A modular seating system built on flow and versatility."
        body="Inspired by the open lines and uninterrupted movement of the German autobahn, the system is designed around flowing geometry, generous proportions, and the freedom to reconfigure. Its pared-back form moves between formal and informal contexts, supporting the way contemporary interiors are used — sitting, perching, working, pausing, gathering."
        compact
        noTopPad
      />

      {/* Editorial pair */}
      <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 }}>
          <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" }}>
              Architectural clarity, spatial lightness.
            </h2>
            <p style={{ fontSize: isMobile ? 15 : 16, lineHeight: 1.55, color: "#1a1917", maxWidth: "46ch", margin: 0, fontWeight: 500 }}>
              Where many seating systems impose a single posture, Autobahn supports the rhythm of contemporary use. Units link together to shape and define space, carving informal zones within open-plan environments without the need for walls or partitions.
            </p>
          </div>
          <EditorialCarousel
            slides={[
              { src: "images/collections/autobahn/pillars/01.jpg",     alt: "Autobahn modular configurations, viewed from above",       caption: "01 · Flow" },
              { src: "images/collections/autobahn/pillars/02.jpg", alt: "Autobahn detail — curved green upholstery and frame",      caption: "02 · Detail" },
              { src: "images/collections/autobahn/pillars/03.jpg", alt: "Autobahn defining a zone in a gallery installation",     caption: "03 · Zone" },
            ]}
            aspect="3/4"
          />
        </div>
      </section>

      {/* Three features */}
      <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 }}>Key features</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 ideas that shape the system.
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 48 : 40 }}>
          {[
            { no: "01", kicker: "Modular spatial division", title: "Delineates space through connection.",
              body: "Modules link to create informal seating arrangements and contained zones — separating a hospitality area from a restaurant, anchoring a co-working pocket within a lobby, or carving out a quiet retreat within a larger concourse. Linear, curved, or clustered; scalable and reconfigurable.",
              image: "images/collections/autobahn/feature/01.jpg", alt: "Autobahn modules linked to define a zone — Woods Bagot Studio, Dianna Snape 2017" },
            { no: "02", kicker: "Generous proportions", title: "Designed for more than one posture.",
              body: "The backrest's generous proportions invite more than seated use. Its scale supports casual perching along the rear edge and offers an informal work surface for laptops, drinks, or quick exchanges — hybrid, considered, and rarely tied to a single function.",
              image: "images/collections/autobahn/feature/02.jpg", alt: "Autobahn in an education environment supporting multiple postures" },
            { no: "03", kicker: "Integrated satellite tables", title: "Floating surfaces in the same language.",
              body: "Satellite tables sit alongside the seating modules, providing surface area for devices, refreshments, or work. Discreetly integrated into the system, they extend Autobahn's functionality while preserving its continuous visual language.",
              image: "images/collections/autobahn/feature/03.jpg", alt: "Autobahn detail with satellite tables alongside the seating modules" },
          ].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>

      <SpecificationSection
        skuImageBase="images/collections/autobahn/skus"
        headline="Linear, 90°, 45° — 37 SKUs across the system."
        meta={[
          ["Design", "Alexander Lotersztain, 2012"],
          ["Sectors", "Aviation · Civic · Corporate"],
          ["Environment", "Indoor"],
          ["Warranty", "5 year structural"],
          ["Certifications", "GECA certified"],
          ["Manufactured", "Australia"],
        ]}
        materials="Dunlop Enduro® foam over MDF substrate. Powder-coated mild steel structure with adjustable feet. Table tops in American Oak or black-stained veneer on MDF, or white/black laminate with matching ABS edge. Upholstery COM/COL. Each seating unit ships with a linking plate — units cannot be specified individually."
        groups={[
          {
            label: "Linear seating · ATB-01 to ATB-05",
            note: "Single seats and benches. -A variants integrate a Ø380 mm table.",
            items: [
              { sku: "ATB-01",      name: "Single seat module",                                dims: "450 × 615 × 450" },
              { sku: "ATB-01-A",    name: "Single seat with table (Ø380)",                     dims: "450 × 615 × 450" },
              { sku: "ATB-02",      name: "Two-seat bench module",                             dims: "1,200 × 615 × 450" },
              { sku: "ATB-02-A",    name: "Two-seat bench with table (Ø380)",                  dims: "1,200 × 615 × 500" },
              { sku: "ATB-03",      name: "Extended bench module",                             dims: "1,800 × 660 × 450" },
              { sku: "ATB-03-A",    name: "Extended bench with table (Ø380)",                  dims: "1,800 × 660 × 450" },
              { sku: "ATB-04",      name: "Large bench module",                                dims: "1,800 × 910 × 450" },
              { sku: "ATB-04-A1",   name: "Large bench with table — config 1",                 dims: "1,800 × 910 × 450" },
              { sku: "ATB-04-A2",   name: "Large bench with table — config 2",                 dims: "1,800 × 910 × 450" },
              { sku: "ATB-05",      name: "Extended wide bench",                               dims: "1,800 × 660 × 450" },
              { sku: "ATB-05-A",    name: "Extended wide bench with table (Ø380)",             dims: "1,800 × 660 × 450" },
            ],
          },
          {
            label: "90° curved configurations · ATB-06 to ATB-11",
            note: "Inner / outer radii vary per SKU — see notes column for the radius pair.",
            items: [
              { sku: "ATB-06",      name: "90° curved bench · inner 700 / outer 1,200",        dims: "1,700 × 705 × 450" },
              { sku: "ATB-06-A",    name: "90° curved bench with table",                       dims: "1,700 × 860 × 450" },
              { sku: "ATB-07",      name: "90° curved seat · inner 700 / outer 1,360",         dims: "1,920 × 865 × 450" },
              { sku: "ATB-07-A",    name: "90° curved seat with table",                        dims: "1,920 × 960 × 450" },
              { sku: "ATB-08",      name: "90° large curved bench · inner 540 / outer 1,200",  dims: "1,920 × 865 × 450" },
              { sku: "ATB-08-A",    name: "90° large curved bench with table",                 dims: "1,920 × 960 × 450" },
              { sku: "ATB-09",      name: "90° large curved seat · inner 1,300 / outer 1,800", dims: "2,545 × 880 × 450" },
              { sku: "ATB-09-A",    name: "90° large curved seat with table",                  dims: "2,545 × 880 × 450" },
              { sku: "ATB-10",      name: "90° extended curved · inner 1,300 / outer 1,960",   dims: "2,770 × 1,040 × 450" },
              { sku: "ATB-10-A",    name: "90° extended curved with table",                    dims: "2,770 × 1,075 × 450" },
              { sku: "ATB-11",      name: "90° extended curved alt · inner 1,140 / outer 1,800", dims: "2,545 × 990 × 450" },
              { sku: "ATB-11-A",    name: "90° extended curved alt with table",                dims: "2,545 × 995 × 450" },
            ],
          },
          {
            label: "45° curved configurations · ATB-12 to ATB-14",
            items: [
              { sku: "ATB-12",      name: "45° curved bench",                                  dims: "1,835 × 645 × 450" },
              { sku: "ATB-12-A",    name: "45° curved bench with table",                       dims: "1,835 × 850 × 450" },
              { sku: "ATB-13",      name: "45° curved seat · inner 1,900 / outer 2,400",       dims: "1,960 × 800 × 450" },
              { sku: "ATB-13-A",    name: "45° curved seat with table · inner 1,900 / outer 2,560", dims: "1,960 × 945 × 450" },
              { sku: "ATB-14",      name: "45° extended curved · inner 1,740 / outer 2,400",   dims: "1,835 × 790 × 450" },
              { sku: "ATB-14-A",    name: "45° extended curved with table",                    dims: "1,835 × 995 × 450" },
            ],
          },
          {
            label: "Side table · ATB-15",
            items: [
              { sku: "ATB-15",      name: "Circular side table · Ø1,350",                      dims: "Ø1,350 × 450" },
            ],
          },
          {
            label: "Ottomans · ATB-21 to ATB-21-B",
            note: "Circular ottomans, the larger two with an integrated floating side table. Seat height 450 mm.",
            items: [
              { sku: "ATB-21",      name: "Circular ottoman · Ø700",                           dims: "Ø700 × 450" },
              { sku: "ATB-21-A",    name: "Circular ottoman with floating side table · Ø900",  dims: "Ø900 × 450" },
              { sku: "ATB-21-B",    name: "Circular ottoman with floating side table · Ø1,200", dims: "Ø1,200 × 450" },
            ],
          },
          {
            label: "Tables · ATB-26 to ATB-29",
            note: "Standalone satellite tables. Table height 720 mm across the range.",
            items: [
              { sku: "ATB-26",      name: "Rectangular side table",                            dims: "1,600 × 720 × 720" },
              { sku: "ATB-27",      name: "Extended side table",                               dims: "1,850 × 800 × 720" },
              { sku: "ATB-28",      name: "Large rectangular table",                           dims: "1,800 × 720 × 720" },
              { sku: "ATB-29",      name: "Extended large table",                              dims: "1,800 × 720 × 720" },
            ],
          },
        ]}
        extras={[
          {
            label: "Specification notes",
            rows: [
              { text: "Seat height · 450 mm across all seating SKUs." },
              { text: "Integrated tables · Ø380 mm, fitted to seated SKUs marked -A." },
              { text: "Linking · seating units cannot be specified individually; each ships with a linking plate." },
              { text: "Adjustable feet supplied as standard.", muted: true },
            ],
          },
          {
            label: "Finishes",
            rows: [
              { text: "Upholstery · COM (Customer's Own Material) or COL (Customer's Own Leather)." },
              { text: "Legs · white powder coat, black powder coat, or custom colour." },
              { text: "Table tops · American Oak veneer, black-stained veneer, white laminate, or black laminate (matching ABS edge)." },
            ],
          },
        ]}
        finishHeadline="Three leg finishes, four table tops, COM / COL upholstery."
      />

      <ConfiguratorStrip collection="Autobahn" />

      <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" }}>
            Across civic, cultural and learning environments.
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: isMobile ? 28 : 32 }}>
          {[
            { name: "Embassy of Australia",  city: "Washington D.C., USA", year: 2023, category: "Civic / Cultural", image: "images/collections/autobahn/hero/01.jpg", slug: "project-embassy-au" },
            { name: "Whittlesea Tech School", city: "Whittlesea, AUS",      year: 2019, category: "Education",         image: "images/collections/autobahn/feature/04.jpg",            slug: "project-whittlesea" },
          ].map((p) => (
            <a key={p.name}
               onClick={() => { window.location.href = window.screenToPath(p.slug); }}
               style={{ display: "block", color: "inherit", cursor: "pointer" }}>
              <div style={{ aspectRatio: "3/2", background: "#e4e2da", overflow: "hidden" }}>
                <img src={p.image} srcSet={window.IMG && window.IMG.srcsetFor(p.image)} sizes={window.IMG && window.IMG.sizes()} alt={p.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={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginTop: 12, gap: 12 }}>
                <div style={{ fontSize: 16, color: "#1a1917" }}>{p.name}</div>
                <div style={{ fontSize: 12, color: "#6c6862", letterSpacing: "0.04em" }}>{p.city} · {p.year}</div>
              </div>
              <div style={{ fontSize: 12, color: "#6c6862", letterSpacing: "0.04em", marginTop: 4 }}>{p.category}</div>
            </a>
          ))}
        </div>
      </section>

      <SpecifierDownloads collection="Autobahn" />

      <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", "pipeline", "twig"].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="Autobahn" />
    </>
  );
}

window.AutobahnDetail = AutobahnDetail;