/* global React, useViewport, PageIntro, EditorialCarousel, ThreadBadge,
           SpecificationSection, SpecifierDownloads, EnquiryBlock */
/*
 * StumpDetail — collection detail page for Stump (2016, recycled range 2023).
 * Dwell + endure + configure. Bold, minimalist stool drawn from the earliest
 * form of seating — the felled log. 15 SKUs across four sub-ranges:
 * Standard, Illuminated, Upholstered, Recycled (Stump R).
 */

const { useState: useStateSt, useEffect: useEffectSt } = React;

const STUMP_SLIDES_BASE = [
  { title: "Stump", image: "images/collections/stump/hero/01.webp" },
  { title: "Stump R · 80% recycled LDPE, terrazzo finish", image: "images/collections/stump/hero/02.webp" },
  { title: "Stump", image: "images/collections/stump/hero/01.webp" },
];
const STUMP_SLIDES = (window.IMG && window.IMG.extend) ? window.IMG.extend("stump", "hero", STUMP_SLIDES_BASE) : STUMP_SLIDES_BASE;

function StumpCarousel() {
  const vw = useViewport();
  const isMobile = vw < 760;
  const [i, setI] = useStateSt(0);
  const [paused, setPaused] = useStateSt(false);
  useEffectSt(() => {
    if (paused) return;
    const id = setInterval(() => setI((x) => (x + 1) % STUMP_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" }}>
      {STUMP_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: "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" }}>
          {STUMP_SLIDES[i].title}
        </h3>
      </div>
      <div style={{ position: "absolute", bottom: isMobile ? 36 : 44, left: 0, right: 0,
        display: "flex", justifyContent: "center", gap: 10 }}>
        {STUMP_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 StumpDetail() {
  const vw = useViewport();
  const isMobile = vw < 720;
  return (
    <>
      <StumpCarousel />
      <PageIntro
        eyebrow="Stump · Alexander Lotersztain, 2016"
        title="A bold, minimalist stool drawn from the earliest form of seating."
        body="Stump gives an appreciative nod to the simple, honest act of sitting on a felled log — translated into a contemporary stool family suited to impromptu conversation, casual repose and high-traffic public use. Available in three sizes across four sub-ranges: Standard, Illuminated, Upholstered, and Recycled."
        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/stump/hero/01.webp",            alt: "Stump · standard rotomoulded LDPE",      caption: "01 · Standard" },
              { src: "images/collections/stump/hero/02.webp",  alt: "Stump R · terrazzo recycled finish",     caption: "02 · Recycled" },
              { src: "images/collections/stump/hero/01.webp",            alt: "Stump · illuminated and upholstered",    caption: "03 · Variants" },
            ]}
            aspect="3/4"
          />
          <div style={{ alignSelf: "center" }}>
            <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: 14 }}>Dwell · 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" }}>
              One form. Four sub-ranges. Fifteen SKUs.
            </h2>
            <p style={{ fontSize: isMobile ? 15 : 16, lineHeight: 1.55, color: "#1a1917", maxWidth: "46ch", margin: 0, fontWeight: 500 }}>
              The shared form carries across each variant — Standard rotomoulded LDPE, RGB-illuminated with induction charging, COM/COL upholstered, and 80% post-industrial recycled with a terrazzo-like pattern. Mobile castor variants extend Stump from static seating into actively reconfigurable furniture for co-working and education spaces.
            </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 Stump</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" }}>
            One bold form, specified four ways.
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 48 : 40 }}>
          {[
            { no: "01", kicker: "Three sizes, four sub-ranges", title: "A family that layers across a project.", body: "Small (370²), medium (450²) and large (510²) footprints in Standard, Illuminated, Upholstered and Recycled — letting the same form work across outdoor settings, refined interior projects and dynamic learning environments through a shared design language." },
            { no: "02", kicker: "Stump R · 80% recycled LDPE", title: "Terrazzo-like finish from recycled stock.", body: "Manufactured from 80% post-industrial recycled LDPE and finished in a unique terrazzo-like speckled pattern that celebrates the recycled material story. As a mono-material LDPE product, Stump R is fully recyclable at end of service — supporting Derlot's RENEW program and closed-loop targets." },
            { no: "03", kicker: "Mobile on castors",           title: "Shifts with the rhythm of the day.",     body: "Castor variants in the Standard, Upholstered and Recycled ranges allow the stool to move between focused work, group huddles, breakout zones and reconfigured layouts as the day changes — without compromising the bold, minimalist character that defines the collection." },
          ].map((f) => (
            <div key={f.no}>
              <div style={{ aspectRatio: "4/5", background: "#e4e2da", overflow: "hidden", marginBottom: isMobile ? 18 : 24 }}>
                <img src={f.no === "02" ? "images/collections/stump/hero/02.webp" : "images/collections/stump/hero/01.webp"} 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/stump/skus"
        headline="Fifteen SKUs across four sub-ranges."
        meta={[
          ["Design", "Alexander Lotersztain · 2016 · Recycled range 2023"],
          ["Sectors", "Hospitality · Corporate · Civic · Education · Retail"],
          ["Environment", "Indoor · Outdoor"],
          ["Warranty", "5 year structural"],
          ["Manufactured", "Australia"],
        ]}
        materials="Rotomoulded LDPE substrate across all sub-ranges. Standard and Recycled ranges support waterfill or floor-fix anti-theft systems. Illuminated range carries 16-colour RGB LED with induction charging and remote. Upholstered range covered in COM/COL. Recycled (Stump R) uses 80% post-industrial recycled LDPE for a terrazzo-like surface."
        groups={[
          {
            label: "Standard range · LDPE, full palette, waterfill or floor-fix",
            items: [
              { sku: "STM-01", name: "Standard stump · small",   dims: "370 × 370 × 450h" },
              { sku: "STM-02", name: "Standard stump · medium",  dims: "450 × 450 × 450h" },
              { sku: "STM-03", name: "Standard stump · large",   dims: "510 × 510 × 450h" },
              { sku: "STM-10", name: "Mobile standard stump",    dims: "450 × 450 × 450h · on castors" },
            ],
          },
          {
            label: "Illuminated range · 16-colour RGB LED, induction charging",
            items: [
              { sku: "STM-04", name: "Illuminated stump · small",  dims: "370 × 370 × 450h · remote included" },
              { sku: "STM-05", name: "Illuminated stump · medium", dims: "450 × 450 × 450h · remote included" },
              { sku: "STM-06", name: "Illuminated stump · large",  dims: "510 × 510 × 450h · remote included" },
            ],
          },
          {
            label: "Upholstered range · COM/COL",
            items: [
              { sku: "STM-07", name: "Upholstered stump · small",  dims: "370 × 370 × 450h" },
              { sku: "STM-08", name: "Upholstered stump · medium", dims: "450 × 450 × 450h" },
              { sku: "STM-09", name: "Upholstered stump · large",  dims: "510 × 510 × 450h" },
              { sku: "STM-11", name: "Mobile upholstered stump",   dims: "450 × 450 × 450h · on castors" },
            ],
          },
          {
            label: "Recycled range · Stump R · 85% recycled LDPE, terrazzo finish",
            items: [
              { sku: "STM-R-01", name: "Recycled stump · small",   dims: "370 × 370 × 450h" },
              { sku: "STM-R-02", name: "Recycled stump · medium",  dims: "450 × 450 × 450h" },
              { sku: "STM-R-03", name: "Recycled stump · large",   dims: "510 × 510 × 450h" },
              { sku: "STM-R-10", name: "Mobile recycled stump",    dims: "450 × 450 × 450h · on castors" },
            ],
          },
        ]}
        extras={[
          {
            label: "Standard range · LDPE palette",
            rows: [
              { text: "Full LDPE palette across whites, greys, marbles, earth tones, warm, cool and blues." },
              { text: "See the Finish & colour library for the master palette and custom matching.", muted: true },
            ],
          },
          {
            label: "Recycled range · 7 exclusive colours",
            rows: [
              { text: "Stump R offers a curated palette unique to the recycled LDPE process." },
              { text: "Custom terrazzo and recycled finishes can be created on request." },
              { text: "See the Finish & colour library for swatches and the terrazzo-pattern detail.", muted: true },
            ],
          },
          {
            label: "Anti-theft · Standard & Recycled only",
            rows: [
              { text: "Waterfill · cavity filled on site for ballast" },
              { text: "Floor fix · stainless steel bracket alternative" },
              { text: "Not available on Illuminated or Upholstered ranges.", muted: true },
            ],
          },
        ]}
        finishHeadline="Same bold form, four sub-ranges: Standard, Illuminated, Upholstered, Recycled. Three sizes (370 / 450 / 510). All seat at 450h."
      />

      <SpecifierDownloads collection="Stump" />

      <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 => ["s1", "biggie", "cup"].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="Stump" />
    </>
  );
}

window.StumpDetail = StumpDetail;