/* global React, useViewport, PageIntro, EditorialCarousel, ThreadBadge,
           SpecificationSection, SpecifierDownloads, EnquiryBlock */
/*
 * StrapDetail — collection detail page for Strap. Dwell + endure, outdoor.
 * Narrative: the wrap-around strap method of 1970s sun loungers, reimagined
 * in up to 70% recycled aluminium. Ten SKUs across chairs, stools, benches,
 * bar chairs — all outdoor, all recyclable at end of life.
 */

const { useState: useStateStr, useEffect: useEffectStr } = React;

const STRAP_SLIDES_BASE = [
  { title: "Strap", image: "images/collections/strap/hero/01.webp", pos: "center bottom" },
  { title: "Strap", image: "images/collections/strap/hero/02.webp", pos: "center bottom" },
  { title: "Strap", image: "images/collections/strap/hero/03.webp", pos: "center bottom" },
];
const STRAP_SLIDES = (window.IMG && window.IMG.extend) ? window.IMG.extend("strap", "hero", STRAP_SLIDES_BASE) : STRAP_SLIDES_BASE;

function StrapCarousel() {
  const vw = useViewport();
  const isMobile = vw < 760;
  const [i, setI] = useStateStr(0);
  const [paused, setPaused] = useStateStr(false);
  useEffectStr(() => {
    if (paused) return;
    const id = setInterval(() => setI((x) => (x + 1) % STRAP_SLIDES.length), 7000);
    return () => clearInterval(id);
  }, [paused]);
  return (
    <section onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}
      style={{ position: "relative", width: "100%", aspectRatio: "16 / 9",
        maxHeight: isMobile ? "82vh" : "90vh", minHeight: isMobile ? 460 : 560,
        overflow: "hidden", background: "#1a1917" }}>
      {STRAP_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", objectPosition: ss.pos || "center", 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" }}>
          {STRAP_SLIDES[i].title}
        </h3>
      </div>
      <div style={{ position: "absolute", bottom: isMobile ? 36 : 44, left: 0, right: 0,
        display: "flex", justifyContent: "center", gap: 10 }}>
        {STRAP_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 StrapDetail() {
  const vw = useViewport();
  const isMobile = vw < 720;
  return (
    <>
      <StrapCarousel />
      <PageIntro
        eyebrow="Strap · Alexander Lotersztain, 2019"
        title="The strap method, reimagined in aluminium."
        body="Strap takes the wrap-around canvas strap construction of 1970s sun loungers and translates it into rigid aluminium — retaining the visual rhythm and structural honesty of the original while delivering the durability and circular credentials expected of contemporary outdoor furniture. Made from up to 70% recycled aluminium and fully recyclable at end of life."
        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/strap/pillars/01.webp",    alt: "Strap chair in the outback",        caption: "01 · Outback" },
              { src: "images/collections/strap/pillars/02.webp", alt: "Strap across the outback, aerial",     caption: "02 · The drive" },
              { src: "images/collections/strap/pillars/03.webp",      alt: "Strap chairs stacked",              caption: "03 · Stack" },
            ]}
            aspect="3/4"
          />
          <div style={{ alignSelf: "center" }}>
            <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: 14 }}>Dwell · Endure · Outdoor</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" }}>
              Aluminium straps. Same rhythm, new material.
            </h2>
            <p style={{ fontSize: isMobile ? 15 : 16, lineHeight: 1.55, color: "#1a1917", maxWidth: "46ch", margin: 0, fontWeight: 500 }}>
              Where the original technique used canvas to wrap and span between structural members, Strap translates the same logic into rigid aluminium straps that retain the visual rhythm and structural honesty of the source. The reference is direct rather than literal — the method is honoured, the material is updated. Light to lift, durable in the weather, recyclable at end of life.
            </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 }}>Why Strap</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" }}>
            A 1970s method, retooled for circular outdoor design.
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 48 : 40 }}>
          {[
            { no: "01", kicker: "The strap method, translated", title: "Method honoured, material updated.", body: "The wrap-around strap construction of mid-century outdoor furniture, reinterpreted through the geometry of aluminium. The same rhythm of straps spanning between structural members — now rigid, weatherproof and built for contract-grade durability." },
            { no: "02", kicker: "Up to 70% recycled aluminium", title: "Closed-loop credentials.", body: "Aluminium is one of the most recycled materials in the world, retaining its structural and aesthetic properties through repeated cycles of reuse. Strap is built from up to 70% recycled stock and is fully recyclable again at end of service — a closed-loop pathway unlikely to be needed for a long time given the inherent durability of the build." },
            { no: "03", kicker: "Light enough to rearrange",    title: "Adapts to the rhythm of use.", body: "Aluminium construction makes Strap naturally light, allowing pieces to be moved, repositioned and rearranged with ease. Moved into the sun, gathered for a conversation, pulled into shade as the day shifts — without the cumbersome handling of heavier outdoor furniture." },
          ].map((f) => (
            <div key={f.no}>
              <div style={{ aspectRatio: "4/5", background: "#e4e2da", overflow: "hidden", marginBottom: isMobile ? 18 : 24 }}>
                <img src={{ "01": "images/_legacy/collections/str-wrap.webp", "02": "images/_legacy/collections/str-artisans.webp", "03": "images/_legacy/collections/str-range.webp" }[f.no]} alt={f.title} 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
        headline="Ten SKUs across chairs, stools, benches and bar chairs."
        meta={[
          ["Design", "Alexander Lotersztain, 2019"],
          ["Sectors", "Hospitality · Civic · Corporate · Retail · Education"],
          ["Environment", "Outdoor"],
          ["Warranty", "5 year structural"],
          ["Certification", "GECA certified"],
          ["Manufactured", "Australia"],
        ]}
        materials="Powder-coated aluminium throughout (up to 70% recycled content). Welded frame wrapped with rigid aluminium straps in the manner of 1970s canvas-strap construction. Outdoor durability for longevity. 100% recyclable at end of product life."
        groups={[
          {
            label: "Chairs · with backrest",
            items: [
              { sku: "STR-01", name: "Outdoor chair · standard", dims: "540 × 580 × 800h · SH 450" },
              { sku: "STR-02", name: "Outdoor chair · variant",  dims: "540 × 580 × 800h · SH 450" },
            ],
          },
          {
            label: "Stools · progressive heights, no backrest",
            items: [
              { sku: "STR-03", name: "Stool · low",     dims: "520 × 400 × 450h · SH 450" },
              { sku: "STR-04", name: "Stool · medium",  dims: "520 × 445 × 650h · SH 650" },
              { sku: "STR-05", name: "Stool · tall",    dims: "520 × 465 × 750h · SH 750" },
            ],
          },
          {
            label: "Benches · single & double",
            items: [
              { sku: "STR-06", name: "Bench · single",          dims: "1290 × 400 × 450h · SH 450" },
              { sku: "STR-07", name: "Bench · double",          dims: "1240 × 580 × 800h · SH 450 · with backrest" },
              { sku: "STR-08", name: "Bench · double variant",  dims: "1240 × 580 × 800h · SH 450 · with backrest" },
            ],
          },
          {
            label: "Bar chairs · elevated with backrest",
            items: [
              { sku: "STR-09", name: "Bar chair · low",   dims: "540 × 515 × 850h · SH 650" },
              { sku: "STR-10", name: "Bar chair · high",  dims: "540 × 535 × 950h · SH 750" },
            ],
          },
        ]}
        extras={[
          {
            label: "Powder-coat finishes",
            rows: [
              { text: "White" },
              { text: "Black" },
              { text: "Custom · any colour" },
            ],
          },
          {
            label: "Sustainability",
            rows: [
              { text: "Up to 70% recycled aluminium content" },
              { text: "100% recyclable at end of product life" },
              { text: "Australian manufactured · outdoor durability for longevity", muted: true },
            ],
          },
          {
            label: "Height categories",
            rows: [
              { text: "450 SH · STR-01, 02, 03, 06, 07, 08 · standard seating" },
              { text: "650 SH · STR-04, 09 · counter height" },
              { text: "750 SH · STR-05, 10 · bar height" },
            ],
          },
        ]}
        finishHeadline="Powder coat in white, black or any custom colour. Same frame language across chair, stool, bench and bar."
      />

      {/* Specified in — 3-up (real Strap installations) */}
      <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: "26ch", textWrap: "balance" }}>
            From a heritage rail museum to campus and hospitality terraces.
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 28 : 32 }}>
          {[
            { name: "Ipswich Rail Museum",     city: "Ipswich, AUS",   year: 2024, category: "Civic",       image: "images/collections/strap/hero/02.webp", pos: "center bottom" },
            { name: "LPKS Brisbane",           city: "Brisbane, AUS",  year: 2021, category: "Hospitality", image: "images/collections/strap/pillars/04.webp", pos: "center bottom" },
            { name: "University of Melbourne", city: "Melbourne, AUS", year: 2025, category: "Education",   image: "images/collections/strap/pillars/05.webp", pos: "center 62%" },
          ].map((p) => (
            <div key={p.name}>
              <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", objectPosition: p.pos || "center", 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].filter(Boolean).join(" · ")}</div>
              </div>
              <div style={{ fontSize: 12, color: "#6c6862", letterSpacing: "0.04em", marginTop: 4 }}>{p.category}</div>
            </div>
          ))}
        </div>
      </section>

      <SpecifierDownloads collection="Strap" />

      <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 => ["picket", "s1", "tonne"].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="Strap" />
    </>
  );
}

window.StrapDetail = StrapDetail;