/* global React, useViewport, PageIntro, EditorialCarousel, ThreadBadge,
           SpecificationSection, SpecifierDownloads, EnquiryBlock */
/*
 * CupDetail — collection detail page for Cup (2011). Dwell tier, no configurator.
 * Narrative angle: small upholstered tub chair — the studio's first hospitality piece.
 */

const { useState: useStateCp, useEffect: useEffectCp } = React;

const CUP_SLIDES_BASE = [
  { title: "Cup", image: "images/collections/cup/hero/01.webp", pos: "center bottom" },
  { title: "Cup", image: "images/collections/cup/hero/02.webp" },
  { title: "Cup", image: "images/collections/cup/hero/03.webp", pos: "center bottom" },
];
const CUP_SLIDES = (window.IMG && window.IMG.extend) ? window.IMG.extend("cup", "hero", CUP_SLIDES_BASE) : CUP_SLIDES_BASE;

function CupCarousel() {
  const vw = useViewport();
  const isMobile = vw < 760;
  const [i, setI] = useStateCp(0);
  const [paused, setPaused] = useStateCp(false);
  useEffectCp(() => {
    if (paused) return;
    const id = setInterval(() => setI((x) => (x + 1) % CUP_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" }}>
      {CUP_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" }}>
          {CUP_SLIDES[i].title}
        </h3>
      </div>
      <div style={{ position: "absolute", bottom: isMobile ? 36 : 44, left: 0, right: 0,
        display: "flex", justifyContent: "center", gap: 10 }}>
        {CUP_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 CupDetail() {
  const vw = useViewport();
  const isMobile = vw < 720;
  return (
    <>
      <CupCarousel />
      <PageIntro
        eyebrow="Cup · Alexander Lotersztain, 2014"
        title="A circular booth form built around shared moments."
        body="Cup is a circular booth seating form that brings a bold, considered presence to interior and exterior spaces. Its enclosed geometry creates a vessel-like environment well suited to collaborative work, focused exchange, and quieter moments of gathering."
        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/cup/pillars/01.webp",         alt: "Cup booths on a New York rooftop terrace",      caption: "01 · Outdoor" },
              { src: "images/collections/cup/pillars/02.webp",     alt: "Cup booth at Woolly Mammoth",                   caption: "02 · Hospitality" },
              { src: "images/collections/cup/pillars/03.webp", alt: "Cup booths from above, studio top view", fit: "contain", caption: "03 · Plan" },
            ]}
            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" }}>
              Built for circular reuse. Sited indoors or out.
            </h2>
            <p style={{ fontSize: isMobile ? 15 : 16, lineHeight: 1.55, color: "#1a1917", maxWidth: "46ch", margin: 0, fontWeight: 500 }}>
              Manufactured from rotomoulded low-density polyethylene (LDPE) — a mono-material that is fully recyclable at the end of its lifecycle — Cup moves effortlessly between interior and exterior settings, from corporate interiors and hospitality lounges to civic plazas and outdoor public 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 }}>What Cup 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 things that hold the form.
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 48 : 40 }}>
          {[
            { no: "01", kicker: "Form", title: "Circular geometry, integrated booth.",
              body: "Cup's circular geometry makes a confident visual statement while delivering an enclosed, contained seating experience. The integrated booth seating supports collaborative gatherings and focused, intimate use in equal measure — holding architectural presence in a room while shaping the way the space immediately around it is used.",
              image: "images/collections/cup/pillars/04.webp", alt: "Cup circular booth around an olive tree" },
            { no: "02", kicker: "Indoor · Outdoor", title: "Engineered for both settings.",
              body: "Rotomoulded LDPE engineered for impact resistance, UV stability and weather tolerance, with a non-porous surface that is easy to clean with standard commercial cleaners. The piece is water-fillable for ballast — adding stability while supporting easy relocation as spaces evolve — or floor-fixed using Derlot's custom stainless steel brackets for permanent installation.",
              image: "images/collections/cup/pillars/05.webp", alt: "Cup in an outdoor civic plaza" },
            { no: "03", kicker: "RENEW", title: "Designed for circular reuse.",
              body: "As a mono-material LDPE piece, Cup can be fully recycled at the end of its service life and remanufactured into new product. Through Derlot's RENEW program, clients partner directly with Derlot to recover end-of-life pieces, reprocess the material, and re-supply new Cup units — closing the loop on the product's lifecycle.",
              image: "images/collections/cup/pillars/06.webp", alt: "Cup unit in clean LDPE colour" },
          ].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>

      <SpecificationSection
        skuImageBase="images/collections/cup/skus"
        headline="Two booth configurations. One companion table."
        meta={[
          ["Design", "Alexander Lotersztain, 2014"],
          ["Sectors", "Hospitality · Corporate · Civic · Education · Retail"],
          ["Environment", "Outdoor use"],
          ["Warranty", "5 year structural"],
          ["Manufactured", "Australia"],
        ]}
        materials="Seating: rotomoulded LDPE plastic, recyclable at end of lifecycle. Full LDPE palette — see the Finish & colour library for swatches and custom matching. Table: zinc-primed, powder-coated mild-steel base with HDPE plastic top."
        groups={[
          {
            label: "Booth seating",
            items: [
              { sku: "CUP-01", name: "Booth seating configuration",          dims: "1920W × 780H · Ø 2200 outer" },
              { sku: "CUP-02", name: "Booth seating configuration, variant", dims: "1920 × 1200 × 780 · Ø 2200 outer" },
            ],
          },
          {
            label: "Table",
            items: [
              { sku: "CUP-03", name: "Circular table",                       dims: "Ø 1100 × 720" },
            ],
          },
        ]}
        extras={[
          {
            label: "Stability & fixing",
            note: "Anti-theft and weather-stability options.",
            rows: [
              { text: "Water-fillable · adds weight, supports easy relocation" },
              { text: "Floor-fix · stainless-steel bracket where water-fill not suitable" },
              { text: "Non-porous LDPE surface · clean with standard commercial cleaners.", muted: true },
            ],
          },
          {
            label: "Table finishes",
            rows: [
              { text: "Base · powder coat · White" },
              { text: "Base · powder coat · Black" },
              { text: "Base · powder coat · Custom colours available" },
              { text: "Top · HDPE · White or Black" },
            ],
          },
        ]}
        finishHeadline="Booth: 30 standard LDPE colours across neutrals, darks, greens, blues, earth tones and warms. Table: white or black powder-coat base with white or black HDPE top."
      />

      {/* Specified in — 3-up (real Cup 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 themed dining rooms to a heritage rail museum.
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 28 : 32 }}>
          {[
            { name: "Ping Pong",            city: null,            year: 2020, category: "Hospitality", image: "images/collections/cup/hero/01.webp", pos: "center bottom" },
            { name: "Ipswich Rail Museum",  city: "Ipswich, AUS",   year: 2024, category: "Civic",       image: "images/collections/cup/pillars/05.webp" },
            { name: "Woolly Mammoth",       city: "Brisbane, AUS",  year: 2014, category: "Hospitality", image: "images/collections/cup/pillars/02.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="Cup" />

      <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 => ["mochi", "biggie", "mass"].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="Cup" />
    </>
  );
}

window.CupDetail = CupDetail;