/* global React, useViewport, PageIntro, EditorialCarousel, ThreadBadge,
           SpecificationSection, ConfiguratorStrip, SpecifierDownloads, EnquiryBlock */
/*
 * TrioDetail — collection detail page for Trio (2026 launch).
 * Modeled on GatewayDetail; hero matches GatewayCarousel pattern
 * (full-viewport crossfade, centered title, auto-advance, dots).
 */

const { useState: useStateTC, useEffect: useEffectTC } = React;

const TRIO_SLIDES = [
  { title: "Trio", image: "images/_legacy/collections/trio-hero-airport-planters.jpg" },
  { title: "Trio", image: "images/_legacy/collections/trio-hero-gallery-rabaco.jpg" },
  { title: "Trio", image: "images/_legacy/collections/trio-hero-concrete-corridor.png" },
];

function TrioCarousel({ hideCaption = false }) {
  const vw = useViewport();
  const isMobile = vw < 760;
  const [i, setI] = useStateTC(0);
  const [paused, setPaused] = useStateTC(false);

  // Hero image paths come from images/collections/trio/hero (via images.js)
  // at render time; fall back to the built-in list if the manifest is absent.
  const slides = (window.IMG && window.IMG.slides("trio", "hero").length)
    ? window.IMG.slides("trio", "hero").map((m) => ({ title: "Trio", image: m.image }))
    : TRIO_SLIDES;

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

  const s = slides[i] || slides[0];

  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",
      }}
    >
      {slides.map((ss, idx) => (
        <div key={idx} style={{
          position: "absolute", inset: 0,
          opacity: idx === i ? 1 : 0,
          transition: "opacity 1100ms ease",
        }}>
          <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: hideCaption
          ? "linear-gradient(to bottom, transparent 70%, rgba(26,25,23,0.35) 100%)"
          : "linear-gradient(to bottom, transparent 50%, rgba(26,25,23,0.55) 100%)",
        pointerEvents: "none",
      }} />

      {!hideCaption && (
      <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",
        }}>
          {s.title}
        </h3>
      </div>
      )}

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

  return (
    <>
      <TrioCarousel />

      <PageIntro
        eyebrow="Trio · Alexander Lotersztain, 2025"
        title="A mono-material modular seating system for global transit hubs."
        body="Trio is a modular seating system designed for airports, transit centres and high-traffic public spaces — manufactured from rotomoulded LDPE with an option containing up to 85% post-industrial recycled content. The collection comprises three sculpted bucket seats with integrated armrests, a bench module and an integrated planter, suited to single-row, back-to-back and extended linear arrangements."
        compact
        noTopPad
      />

      {/* Editorial pair — image + brand copy */}
      <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={(window.IMG && window.IMG.slides("trio", "pillars").length)
              ? window.IMG.slides("trio", "pillars")
              : [
                  { src: "images/_legacy/collections/trio-portrait-terrazzo-tree.jpg", alt: "Trio Recycled bench in terrazzo finish against walnut paneling, with integrated tree planter", caption: "01 · Biophilic" },
                  { video: "images/_legacy/collections/trio-portrait-rotoseat.mp4",   src: "images/_legacy/collections/trio-portrait-terrazzo-tree.jpg", alt: "Trio bench — turntable animation",                                                 caption: "02 · In the round" },
                  { src: "images/_legacy/collections/trio-portrait-blue-foyer.jpg",   alt: "Trio in cobalt blue, civic foyer with garden view",                                              caption: "03 · Civic foyer" },
                ]}
            aspect="3/4"
          />
          <div style={{ alignSelf: "center" }}>
            <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: 14 }}>Renew · Define</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" }}>
              A benchmark for circular, design-led seating in transit environments.
            </h2>
            <p style={{ fontSize: isMobile ? 15 : 16, lineHeight: 1.55, color: "#1a1917", maxWidth: "46ch", margin: 0, fontWeight: 500 }}>
              A mono-material LDPE collection engineered for durability, sustainability and architectural presence — expressing a distinctive terrazzo-like surface that celebrates material reuse while delivering exceptional impact resistance, UV stability and weather performance.
            </p>
          </div>
        </div>
      </section>

      {/* Three features — what makes Trio Trio */}
      <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 Trio 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 Trio brings to large public spaces.
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 48 : 40 }}>
          {[
            {
              no: "01",
              kicker: "Mono-material",
              title: "LDPE with 85% recycled option through RENEW.",
              body: "Rotomoulded LDPE — fully recyclable at end of life. An option containing up to 85% post-industrial recycled plastic is available, expressed through a signature terrazzo-like speckled finish. Through RENEW, clients partner directly with Derlot to recover end-of-life pieces, reprocess the material and re-supply new units.",
              image: "images/_legacy/collections/trio-feature-mono-terrazzo.jpg",
              alt: "Trio Recycled in red terrazzo finish — the speckled mono-material LDPE surface",
              imageStyle: { objectPosition: "center bottom" },
            },
            {
              no: "02",
              kicker: "Modular",
              title: "Three components with biophilic integration.",
              body: "Three core elements — a 3-seater bucket-shaped bench, a 3-seater with integrated armrests, and an integrated planter module. The components support single-row, back-to-back and extended linear arrangements in multiples of three, scaling from intimate gate clusters to expansive concourse runs. Integrated power and USB charging by OE Elsafe.",
              image: "images/_legacy/collections/trio-feature-modular-red-planter.jpg",
              alt: "Trio red bench with integrated planter module, PTE 2026 London",
              imageStyle: { objectPosition: "center bottom" },
            },
            {
              no: "03",
              kicker: "Engineered",
              title: "High-traffic performance, easy installation.",
              body: "Exceptional impact resistance, UV stability and weather durability — suitable for indoor and outdoor specifications across transport and civic settings. The non-porous surface cleans with standard commercial cleaners. Self-supporting structure with integrated floor-fixing points or water fill minimises subframes and reduces installation time in live environments.",
              image: "images/_legacy/collections/trio-feature-engineered-install.jpg",
              alt: "Trio benches being installed in a Brisbane public realm — outdoor specification",
            },
          ].map((f, fi) => (
            <div key={f.no}>
              <div style={{ aspectRatio: "4/5", background: "#e4e2da", overflow: "hidden", marginBottom: isMobile ? 18 : 24 }}>
                <img src={((window.IMG && window.IMG.slides("trio", "feature")[fi]) || {}).image || f.image} alt={f.alt} loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", ...(f.imageStyle || {}) }} />
              </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>

      {/* Specification — shared SpecificationSection component */}
      <SpecificationSection
        headline="Three modules. Infinite runs."
        meta={[
          ["Design", "Alexander Lotersztain, 2025"],
          ["Sectors", "Aviation · Civic · Hospitality · Corporate · Education"],
          ["Environment", "Indoor & outdoor"],
          ["Warranty", "5 year structural"],
          ["Manufactured", "Australia"],
          ["Connectivity partner", "OE Elsafe (OE Electrics Group)"],
        ]}
        materials="Rotationally moulded LDPE; virgin, or up to 85% post-industrial recycled content in a terrazzo-like finish. Stainless steel floor-fix and linking brackets. OE Elsafe GPO, USB-A and USB-C available as an integrated option."
        groups={[
          {
            label: "Seat modules",
            note: "Identical dimensions across both configurations. Seat height 450 mm, back height 790 mm. Configure in multiples for linear, back-to-back and large-scale runs.",
            items: [
              { sku: "TRI-01", name: "Seat module — standard", dims: "740 × 2220 × 790 H" },
              { sku: "TRI-02", name: "Seat module — variant",  dims: "740 × 2220 × 790 H" },
            ],
          },
          {
            label: "Planter module",
            note: "Compact depth, consistent 790 mm height with the seat modules.",
            items: [
              { sku: "TRI-03", name: "Integrated planter module", dims: "740 × 605 × 790 H" },
            ],
          },
        ]}
        extras={[
          {
            label: "Configuration",
            rows: [
              { text: "Linking brackets — for joining two or more units" },
              { text: "Floor-fixing brackets — for permanent installation" },
              { text: "Linear, back-to-back and large-scale arrangements supported.", muted: true },
            ],
          },
          {
            label: "Power & USB (optional)",
            rows: [
              { text: "OE Elsafe PIP · GPO" },
              { text: "OE Elsafe PIP · 25 W twin USB (USB-A + USB-C)" },
              { text: "Fascia & bezel finishes in black or white" },
              { text: "PIP charging units are not suitable for outdoor specification.", muted: true },
            ],
          },
          {
            label: "Finish library",
            rows: [
              { text: "29 standard colours — virgin LDPE" },
              { text: "12 exclusive recycled colours — 85% post-industrial LDPE, terrazzo finish" },
              { text: "Custom terrazzo and recycled finishes can be created on request" },
              { text: "41 total options across the standard and recycled palettes.", muted: true },
            ],
          },
        ]}
        finishHeadline="A mono-material modular seating system for global transit hubs."
      />

      <ConfiguratorStrip collection="Trio" />

      <SpecifierDownloads collection="Trio" />

      {/* Related collections — endure/renew */}
      <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", "stump-r", "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="Trio" />
    </>
  );
}

window.TrioDetail = TrioDetail;