/* global React, useViewport, PageIntro, EditorialCarousel, ThreadBadge,
           SpecificationSection, SpecifierDownloads, EnquiryBlock */
/*
 * TetrominoSoftDetail — Tetromino Soft (2019). Configure + Define + Dwell.
 * A modular soft seating system of rectangular elements — fluid, subtle
 * silhouette ideal for residential and refined contract environments.
 * 14 SKUs across seat modules, dual-depth backrests and cushions.
 *
 * Slug: "tetromino-s" in COLLECTIONS / PDP_ROUTES.
 */

const { useState: useStateTSS, useEffect: useEffectTSS } = React;

const TSS_SLIDES_BASE = [
  { title: "Tetromino Soft", image: "images/collections/tetromino-s/hero/01.webp" },
  { title: "Tetromino Soft", image: "images/collections/tetromino-s/hero/02.webp" },
  { title: "Tetromino Soft", image: "images/collections/tetromino-s/hero/03.webp" },
];
const TSS_SLIDES = (window.IMG && window.IMG.extend) ? window.IMG.extend("tetromino-s", "hero", TSS_SLIDES_BASE) : TSS_SLIDES_BASE;

function TetrominoSoftCarousel() {
  const vw = useViewport();
  const isMobile = vw < 760;
  const [i, setI] = useStateTSS(0);
  const [paused, setPaused] = useStateTSS(false);
  useEffectTSS(() => {
    if (paused) return;
    const id = setInterval(() => setI((x) => (x + 1) % TSS_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" }}>
      {TSS_SLIDES.map((ss, idx) => (
        <div key={idx} style={{ position: "absolute", inset: 0, opacity: idx === i ? 1 : 0, transition: "opacity 1100ms ease", background: ss.bg || "transparent" }}>
          <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: ss.fit || "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" }}>
          {TSS_SLIDES[i].title}
        </h3>
      </div>
      <div style={{ position: "absolute", bottom: isMobile ? 36 : 44, left: 0, right: 0,
        display: "flex", justifyContent: "center", gap: 10 }}>
        {TSS_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 TetrominoSoftDetail() {
  const vw = useViewport();
  const isMobile = vw < 720;
  return (
    <>
      <TetrominoSoftCarousel />
      <PageIntro
        eyebrow="Tetromino Soft · Alexander Lotersztain, 2019"
        title="A modular soft seating system of rectangular elements."
        body="Tetromino Soft is designed around restraint, comfort and high configurability — drawing its name and logic from the geometric tetromino. The four-square shape familiar from puzzle play is translated into a soft seating family with substantial design freedom for the specifier, in a more fluid, subtle silhouette than the original Tetromino."
        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/tetromino-s/pillars/01.webp", alt: "Tetromino Soft · mint and yellow seat corner detail", caption: "01 · Detail" },
              { src: "images/collections/tetromino-s/pillars/02.webp", alt: "Tetromino Soft in service at Birubi Street",          caption: "02 · In service" },
              { src: "images/collections/tetromino-s/hero/03.webp",    alt: "Tetromino Soft · coral arm and backrest",            caption: "03 · Backrest" },
            ]}
            aspect="3/4"
          />
          <div style={{ alignSelf: "center" }}>
            <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: 14 }}>Configure · Define · Dwell · Indoor</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" }}>
              Compact, interlocking, residential in feel.
            </h2>
            <p style={{ fontSize: isMobile ? 15 : 16, lineHeight: 1.55, color: "#1a1917", maxWidth: "46ch", margin: 0, fontWeight: 500 }}>
              Components combine in a wide variety of arrangements — supporting casual retreats, work hubs and informal gathering zones within contemporary public, corporate, hospitality and educational interiors. The system prioritises compactness and multi-functionality without compromising on comfort or visual restraint.
            </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 Tetromino Soft</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 reasons it scales from corner to composition.
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 48 : 40 }}>
          {[
            { no: "01", kicker: "Modular geometry",         title: "Genuine design freedom for the specifier.", image: "images/collections/tetromino-s/hero/02.webp", body: "Components are designed for high configurability — supporting compact corner arrangements, intimate seating clusters and expansive open-plan compositions alike. Pieces combine, rearrange and reconfigure to suit the spatial brief, supporting both initial specification and ongoing adaptation as needs change." },
            { no: "02", kicker: "Optional power integration", title: "On-demand connectivity, kept clean.",        image: "images/collections/tetromino-s/pillars/02.webp", body: "Optional integrated power supports the hybrid working and learning environments the collection is designed for, keeping users connected during extended dwell time without disrupting the system's clean visual language. Connectivity delivered in collaboration with OE Elsafe — global leaders in soft wiring and workspace technologies." },
            { no: "03", kicker: "Companion accessories",    title: "Tables and cushions that scale the moment.", image: "images/collections/tetromino-s/pillars/03.webp", body: "The collection extends beyond seating to include companion tables and cushions, allowing specifiers to layer accessories that accentuate the visual rhythm of an installation. Tables sit alongside the seating modules to support laptops and personal items; cushions add a soft, tactile detail introducing colour, texture and visual variety." },
          ].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.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
        skuImageBase="images/collections/tetromino-s/skus"
        headline="14 SKUs across seat modules, dual-depth backrests and cushions."
        meta={[
          ["Design", "Alexander Lotersztain, 2019"],
          ["Sectors", "Corporate · Hospitality · Civic · Education · Retail"],
          ["Environment", "Indoor"],
          ["Warranty", "5 year structural"],
          ["Certification", "GECA certified"],
          ["Manufactured", "Australia"],
        ]}
        materials="Frame: Dunlop Enduro® foam over MDF substrate. Upholstery: Customer's Own Material (COM) — fabric only. Connectors supplied with each module for linking. Optional integrated power across seating modules, delivered with OE Elsafe."
        groups={[
          {
            label: "Seat modules · 600 deep, SH 450, four progressive widths",
            items: [
              { sku: "TSS-02", name: "Seat module · small",        dims: "600 × 600 × 450h" },
              { sku: "TSS-03", name: "Seat module · medium",       dims: "900 × 600 × 450h" },
              { sku: "TSS-04", name: "Seat module · large",        dims: "1200 × 600 × 450h" },
              { sku: "TSS-05", name: "Seat module · extra large",  dims: "1800 × 600 × 450h" },
            ],
          },
          {
            label: "Backrest modules · standard depth 700, height 300",
            items: [
              { sku: "TSS-08", name: "Backrest · small",        dims: "600 × 700 × 300h" },
              { sku: "TSS-09", name: "Backrest · medium",       dims: "900 × 700 × 300h" },
              { sku: "TSS-10", name: "Backrest · large",        dims: "1200 × 700 × 300h" },
              { sku: "TSS-11", name: "Backrest · extra large",  dims: "1800 × 700 × 300h" },
            ],
          },
          {
            label: "Backrest modules · extended depth 900, height 300",
            items: [
              { sku: "TSS-12", name: "Backrest · small variant",        dims: "600 × 900 × 300h" },
              { sku: "TSS-13", name: "Backrest · medium variant",       dims: "900 × 900 × 300h" },
              { sku: "TSS-14", name: "Backrest · large variant",        dims: "1200 × 900 × 300h" },
              { sku: "TSS-15", name: "Backrest · extra large variant",  dims: "1800 × 900 × 300h" },
            ],
          },
          {
            label: "Cushion modules · cube-form accessories",
            items: [
              { sku: "TSS-31", name: "Cushion · small",   dims: "600 × 600 × 400h" },
              { sku: "TSS-32", name: "Cushion · medium",  dims: "400 × 400 × 400h" },
            ],
          },
        ]}
        extras={[
          {
            label: "Width progression · same grid, four increments",
            rows: [
              { text: "Small · 600  ·  Medium · 900  ·  Large · 1200  ·  Extra large · 1800" },
              { text: "Backrests in two depths (700 standard / 900 extended) for different comfort levels.", muted: true },
            ],
          },
          {
            label: "Upholstery & power",
            rows: [
              { text: "COM · Customer's Own Material, fabric only" },
              { text: "Integrated power available across seating modules · OE Elsafe" },
              { text: "Modular connectors supplied with each module.", muted: true },
            ],
          },
        ]}
        finishHeadline="Same compact clip grid system as the original Tetromino, evolved into a more fluid silhouette ideal for residential and refined contract environments."
      />

      <SpecifierDownloads collection="Tetromino Soft" />

      {/* Specified in — real Tetromino Soft 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 university atrium to a workplace breakout.
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(2, 1fr)", gap: isMobile ? 28 : 32 }}>
          {[
            { name: "University of Auckland",       city: "Auckland, NZ",    year: 2018, category: "Education",  image: "images/collections/tetromino-s/pillars/04.webp", pos: "center" },
            { name: "Geyer Moore Theological College", city: "Sydney, AUS",  year: 2017, category: "Education",  image: "images/collections/tetromino-s/pillars/05.webp", pos: "center" },
          ].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>

      <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 => ["prisma", "guell", "seed"].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="Tetromino Soft" />
    </>
  );
}

window.TetrominoSoftDetail = TetrominoSoftDetail;