/* global React, useViewport, PageIntro, EditorialCarousel, ThreadBadge,
           SpecificationSection, SpecifierDownloads, EnquiryBlock */
/*
 * StumpRecycledDetail — collection detail page for Stump Recycled (2021).
 *
 * Narrative angle: material-forward. 85% post-industrial LDPE pressed into
 * a terrazzo-like stump. No two units identical. Renew thread only, so NO
 * configurator — material itself is the story.
 *
 * Uses existing stump-r.webp and stump-r-gallery.webp imagery already in repo.
 */

const { useState: useStateSR, useEffect: useEffectSR } = React;

const SR_SLIDES_BASE = [
  { title: "Stump", image: "images/collections/stump-r/hero/01.webp", pos: "center bottom" },
  { title: "Stump", image: "images/collections/stump-r/hero/02.webp", pos: "center bottom" },
  { title: "Stump", image: "images/collections/stump-r/hero/03.webp", pos: "center bottom" },
  { title: "Stump", image: "images/collections/stump-r/hero/04.webp", pos: "center bottom" },
];
const SR_SLIDES = (window.IMG && window.IMG.extend) ? window.IMG.extend("stump-r", "hero", SR_SLIDES_BASE) : SR_SLIDES_BASE;

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

  useEffectSR(() => {
    if (paused) return;
    const id = setInterval(() => setI((x) => (x + 1) % SR_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",
      }}>
      {SR_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",
        }}>
          {SR_SLIDES[i].title}
        </h3>
      </div>

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

  return (
    <>
      <StumpRCarousel />

      <PageIntro
        eyebrow="Stump · Alexander Lotersztain, 2016"
        title="One rotomoulded stool. Solid, upholstered, or recycled."
        body="Stump is a rotomoulded LDPE stool and side table — a single sculpted volume offered across a full palette of solid colours, an upholstered variant on castors, and a recycled terrazzo finish pressed from post-industrial LDPE. One honest form, finished to suit the brief and the building."
        compact
        noTopPad
      />

      {/* Editorial pair — material emphasis */}
      <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-r/pillars/01.webp",  alt: "Stump Recycled terrazzo range",            caption: "01 · Range" },
              { src: "images/collections/stump-r/pillars/02.webp",       alt: "Recycled LDPE feedstock, ready to press",   caption: "02 · Feedstock" },
              { src: "images/collections/stump-r/pillars/03.webp",     alt: "Stump Recycled terrazzo surface at BECA",   caption: "03 · In situ" },
            ]}
            aspect="3/4"
          />
          <div style={{ alignSelf: "center" }}>
            <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: 14 }}>Renew</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" }}>
              Made from what we would have thrown away.
            </h2>
            <p style={{ fontSize: isMobile ? 15 : 16, lineHeight: 1.55, color: "#1a1917", maxWidth: "46ch", margin: 0, fontWeight: 500 }}>
              The feedstock is post-industrial LDPE — waste from our own moulding line, plus offcuts from local manufacturers we collect on a closed loop. Colour and aggregate vary with each batch, which is the point: every Stump Recycled carries the signature of the week it was pressed.
            </p>
          </div>
        </div>
      </section>

      {/* Three features — material-forward */}
      <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 }}>The recycled finish</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 the material is doing.
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 48 : 40 }}>
          {[
            { no: "01", kicker: "Closed loop", title: "Feedstock from our own moulding line.",
              body: "Every moulding run generates offcut. Instead of pelletising for resale, we press it directly into Stump Recycled. The waste stream that used to leave our factory now stays inside a product we sell.",
              image: "images/collections/stump-r/feature/01.webp", alt: "Stump Recycled terrazzo cluster" },
            { no: "02", kicker: "Unique", title: "No two stumps read the same.",
              body: "Colour, chip size and chip density vary with each batch. We don't correct for this — the variation is the product's identity. Specify by batch photo for large orders where tonal consistency matters.",
              image: "images/collections/stump-r/pillars/03.webp", alt: "Surface variation across Stump Recycled units" },
            { no: "03", kicker: "Remade", title: "Take-back to regrind at end of life.",
              body: "If a Stump Recycled is retired, we take it back and regrind it into feedstock for the next press run. The take-back programme is included in specification at no additional cost — local collection in AU/NZ.",
              image: "images/collections/stump-r/hero/01.webp", alt: "Stump Recycled lineage — end of life returned as feedstock" },
          ].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>

      {/* Material story — colour-inverted slab */}
      <section style={{ background: "#39342d", color: "#f5f3ef", padding: isMobile ? "72px 20px" : "120px max(24px, 3vw)" }}>
        <div style={{ maxWidth: 1440, margin: "0 auto" }}>
          <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: isMobile ? 32 : 64, alignItems: "start" }}>
            <div>
              <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "rgba(245,243,239,0.6)", fontWeight: 500, marginBottom: 16 }}>The material</div>
              <h2 style={{ fontFamily: "var(--font-display, Poppins, sans-serif)", fontWeight: 500, fontSize: isMobile ? "clamp(26px, 6.5vw, 34px)" : "clamp(28px, 2.8vw, 42px)", lineHeight: 1.1, letterSpacing: "-0.02em", margin: 0, maxWidth: "20ch", textWrap: "balance" }}>
                Low-density polyethylene. Pressed, not printed.
              </h2>
            </div>
            <div style={{ paddingTop: isMobile ? 0 : 12 }}>
              <p style={{ fontSize: isMobile ? 15 : 17, lineHeight: 1.55, color: "rgba(245,243,239,0.85)", margin: "0 0 18px 0", maxWidth: "48ch" }}>
                LDPE is a thermoplastic — it melts and reforms without chemical degradation, so a Stump Recycled at the end of its useful life is feedstock for the next one. No laminates. No adhesives. No surface finish. What you see is what the material looks like when pressed.
              </p>
              <p style={{ fontSize: isMobile ? 15 : 17, lineHeight: 1.55, color: "rgba(245,243,239,0.85)", margin: 0, maxWidth: "48ch" }}>
                85% of the feedstock is post-industrial — already manufactured, now on its second pass through the material cycle. The remaining 15% is virgin polymer that acts as a binder, without which the aggregate wouldn't cohere. Over five batches we are pushing that figure toward 95%.
              </p>
            </div>
          </div>
        </div>
      </section>

      <SpecificationSection
        headline="One form. Three heights."
        meta={[
          ["Design", "Alexander Lotersztain, 2021"],
          ["Environment", "Indoor · Protected outdoor"],
          ["Warranty", "5 year structural"],
          ["Feedstock", "85% post-industrial LDPE"],
        ]}
        materials="Compression-moulded low-density polyethylene. 85% post-industrial recycled feedstock (offcuts from Derlot moulding line + partner manufacturers, Australia). 15% virgin LDPE binder. No laminate, no adhesive, no surface finish. End-of-life take-back to regrind, included in specification."
        groups={[
          {
            label: "Stumps",
            items: [
              { sku: "SR-400",  name: "Stump Recycled · 400",             dims: "Ø 360 × 400h" },
              { sku: "SR-450",  name: "Stump Recycled · 450",             dims: "Ø 360 × 450h" },
              { sku: "SR-500",  name: "Stump Recycled · 500",             dims: "Ø 360 × 500h" },
            ],
          },
        ]}
        extras={[
          {
            label: "Take-back programme",
            rows: [
              { text: "Local collection · AU, NZ at no charge" },
              { text: "International · coordinated via specifier, shipping at cost" },
              { text: "Regrind re-enters feedstock within 6 weeks of return.", muted: true },
            ],
          },
          {
            label: "Batch consistency",
            rows: [
              { text: "Standard spec · batch selected for availability" },
              { text: "Matched batch · 10+ units, tonal matching by photograph (no cost surcharge)" },
              { text: "Custom terrazzo and recycled finishes can be created on request" },
              { text: "Custom colour · 50+ units, aggregate tuned to spec.", muted: true },
            ],
          },
        ]}
        finishHeadline="Colour varies by batch. Surface is the pressed material itself — no finish applied."
      />

      {/* Specified in — 2-up */}
      <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" }}>
            In schools, studios and hospitality.
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 28 : 32 }}>
          {[
            { name: "The Cathedral School", city: "Townsville, AUS", year: null, category: "Education",   image: "images/collections/stump-r/feature/02.webp", pos: "center bottom" },
            { name: "BECA",                 city: "Auckland, NZ",   year: 2025, category: "Corporate",   image: "images/collections/stump-r/feature/03.webp", pos: "center bottom" },
            { name: "Yolk",                 city: "Brisbane, AUS",  year: null, category: "Hospitality", image: "images/collections/stump-r/feature/04.webp" },
          ].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="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 => ["trio", "tonne", "stump"].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.StumpRecycledDetail = StumpRecycledDetail;