/* global React, useViewport, PageIntro, EditorialCarousel, ThreadBadge,
           SpecificationSection, SpecifierDownloads, EnquiryBlock */
/*
 * S1Detail — collection detail page for S1 (2016).
 *
 * Designer: Alexander Lotersztain. A minimalist stool and side table that
 * references the I-beam — the structural section that has shaped modern
 * architecture — translated into rotomoulded LDPE for indoor and outdoor use.
 * Three SKUs at progressive heights (450 / 650 / 750 mm), each functioning
 * as both stool and side table. Manufactured in Australia.
 *
 * Full LDPE palette; recycled LDPE finish available through Derlot's RENEW
 * program with a unique terrazzo-like surface.
 *
 * Sectors: Hospitality · Corporate · Civic · Education · Retail.
 *
 * No imagery in repo specific to S1, so the carousel and feature cards reuse
 * stump-r / responsibility plates as RENEW-family stand-ins.
 */

const { useState: useStateS1, useEffect: useEffectS1 } = React;

const S1_SLIDES_BASE = [
  { title: "S1", image: "images/collections/s1/hero/01.webp" },
  { title: "S1", image: "images/collections/s1/hero/02.webp", pos: "center bottom" },
  { title: "S1", image: "images/collections/s1/hero/03.webp", pos: "center bottom" },
];
const S1_SLIDES = (window.IMG && window.IMG.extend) ? window.IMG.extend("s1", "hero", S1_SLIDES_BASE) : S1_SLIDES_BASE;

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

  useEffectS1(() => {
    if (paused) return;
    const id = setInterval(() => setI((x) => (x + 1) % S1_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",
      }}>
      {S1_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",
        }}>
          {S1_SLIDES[i].title}
        </h3>
      </div>
      <div style={{
        position: "absolute", bottom: isMobile ? 36 : 44, left: 0, right: 0,
        display: "flex", justifyContent: "center", gap: 10,
      }}>
        {S1_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 S1Detail() {
  const vw = useViewport();
  const isMobile = vw < 720;

  return (
    <>
      <S1Carousel />

      <PageIntro
        eyebrow="S1 · Alexander Lotersztain, 2016"
        title="A minimalist stool and side table for indoor and outdoor use."
        body="S1 quietly references the I-beam — the iconic structural section that has shaped modern architecture — and reinterprets its honest, load-bearing geometry as a stool and side table. Three progressive heights (low, medium and tall) each function as both casual seat and functional surface, indoors or outdoors — a quiet reminder that simplicity and versatility belong together."
        compact
        noTopPad
      />

      {/* Editorial pair — material and program */}
      <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={[
              { video: "images/collections/s1/pillars/01.mp4", src: "images/collections/s1/pillars/02.webp", pos: "center bottom", alt: "S1 bar stools along a marble-and-mosaic bar", caption: "01 · In service" },
              { src: "images/collections/s1/cover.webp", alt: "S1 stool, I-beam profile",                  caption: "02 · I-beam" },
              { src: "images/collections/s1/pillars/04.webp", alt: "S1 rotomoulded surface and radius detail",   caption: "03 · Surface" },
            ]}
            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 single object that adapts to the demands of contemporary interiors.
            </h2>
            <p style={{ fontSize: isMobile ? 15 : 16, lineHeight: 1.55, color: "#1a1917", maxWidth: "46ch", margin: 0, fontWeight: 500 }}>
              Manufactured from rotomoulded low-density polyethylene and available in both standard and recycled finishes, S1 is part of Derlot's RENEW program — built for circular reuse and engineered for the full range of indoor and outdoor specifications across hospitality, corporate, civic, education and retail.
            </p>
          </div>
        </div>
      </section>

      {/* Three features — straight from the official overview */}
      <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 S1 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 reasons S1 belongs in the brief.
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 48 : 40 }}>
          {[
            {
              no: "01",
              kicker: "I-beam",
              title: "Stool and side table in one form.",
              body: "S1's silhouette draws directly from the I-beam — the foundational structural section of modern architecture — translated into a stool and side table that carries the same honest, geometric language. A casual seat, a functional surface, an architectural object placed within a layout for visual rhythm. Three progressive heights — 450, 650 and 750 mm — cover standard seating, counter and bar applications.",
              image: "images/collections/s1/feature/01.webp",
              alt: "S1 in three progressive heights",
            },
            {
              no: "02",
              kicker: "Renewed",
              title: "100% recyclable LDPE, with RENEW finish option.",
              body: "Rotomoulded from low-density polyethylene and 100% recyclable at end of life. Available in standard solid colour or in Derlot's recycled LDPE finish through the RENEW program — a unique terrazzo-like pattern developed with our manufacturing partners that celebrates the recycled material story and supports a closed-loop pathway.",
              image: "images/collections/s1/feature/02.webp",
              pos: "center bottom",
              alt: "S1 in recycled terrazzo LDPE finish at Arthur Showroom",
            },
            {
              no: "03",
              kicker: "Colour",
              title: "Full LDPE palette, plus custom.",
              body: "Specified across the full LDPE palette — spanning neutrals, marbles, earth tones, warm and cool ranges — with full custom matching available. See the Finish & colour library for swatches and the architectural intent the palette is tuned to support.",
              image: "images/collections/s1/feature/03.webp",
              alt: "S1 rotomoulded surface and radius detail",
            },
          ].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", objectPosition: f.pos || "center", 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/s1/skus"
        headline="Three SKUs. Progressive heights. Stool or side table at each."
        meta={[
          ["Design", "Alexander Lotersztain, 2016"],
          ["Sectors", "Hospitality · Corporate · Civic · Education · Retail"],
          ["Environment", "Outdoor · also suitable for Indoor"],
          ["Warranty", "5 year structural"],
          ["Material", "Rotomoulded LDPE · 100% recyclable at end of life"],
          ["Manufactured", "Australia"],
        ]}
        materials="Rotomoulded low-density polyethylene, UV-stabilised throughout. 100% recyclable at end of product life. Each piece functions as both stool and side table. Available in standard LDPE for solid colour finishes, or recycled LDPE through Derlot's RENEW program — a unique terrazzo-like surface developed with manufacturing partners."
        groups={[
          {
            label: "Dual-function pieces",
            note: "Progressive height series — each piece serves as both stool and side table.",
            items: [
              { sku: "S1-01", name: "S1 low · standard seating / low table",          dims: "340 × 340 × 450H" },
              { sku: "S1-02", name: "S1 medium · counter height seating / table",     dims: "360 × 360 × 650H" },
              { sku: "S1-03", name: "S1 tall · bar height seating / table",           dims: "370 × 370 × 750H" },
            ],
          },
        ]}
        extras={[
          {
            label: "Standard colour palette",
            rows: [
              { text: "Full LDPE palette across neutrals, marbles, earth tones, warms, cools and blues." },
              { text: "See the Finish & colour library for the master palette and custom matching.", muted: true },
            ],
          },
          {
            label: "RENEW finish",
            note: "Closed-loop material pathway through Derlot's RENEW program.",
            rows: [
              { text: "Recycled LDPE · unique terrazzo-like pattern in place of solid colour" },
              { text: "Custom terrazzo and recycled finishes can be created on request" },
              { text: "Take-back · Derlot recovers end-of-life pieces for reprocessing" },
              { text: "Supports long-term sustainability and circular-design targets.", muted: true },
            ],
          },
        ]}
        finishHeadline="Tonal and recessive, or bold and contrasting — colour tuned to architectural intent."
      />

      {/* Specified in — 3-up (real S1 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 student-living commons to a design showroom.
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 28 : 32 }}>
          {[
            { name: "Student One, Wharf Street",     city: "Brisbane, AUS", year: 2023, category: "Student living", image: "images/collections/s1/hero/02.webp" },
            { name: "Student One, Elizabeth Street", city: "Brisbane, AUS", year: 2023, category: "Student living", image: "images/collections/s1/feature/04.webp" },
            { name: "Arthur Showroom",               city: null,           year: 2025, category: "Showroom",       image: "images/collections/s1/feature/02.webp", pos: "center bottom" },
          ].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="S1" />

      <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 => ["stump-r", "trio", "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="S1" />
    </>
  );
}

window.S1Detail = S1Detail;