/* global React, useViewport, PageIntro, EditorialCarousel, ThreadBadge,
           SpecificationSection, ConfiguratorStrip, SpecifierDownloads, EnquiryBlock */
/*
 * TwigDetail — collection detail page for Twig (2008).
 *
 * The foundational Derlot collection. A branching modular seating system —
 * three-ended geometry that links to form linear runs, clusters and
 * radiating compositions. Available as Standard rotomoulded LDPE,
 * Illuminated (4000K LED, IP67), and Upholstered (Dunlop Enduro foam,
 * COM/COL); each as bench (TWG, no backrest) or bench-with-backrest (TWB).
 *
 * 6 SKUs. GECA certified, UL listed. Manufactured Australia and Poland.
 * Part of Derlot's RENEW program. Connectivity: OE Elsafe.
 */

const { useState: useStateTw, useEffect: useEffectTw } = React;

const TWIG_SLIDES_BASE = [
  { title: "Twig", kind: "video", video: "images/collections/twig/hero/01.mp4", poster: "images/collections/twig/hero/02.jpg", duration: 14000 },
  { title: "Twig", image: "images/collections/twig/hero/02.jpg" },
  { title: "Twig", image: "images/collections/twig/hero/03.jpg" },
  { title: "Twig", image: "images/collections/twig/hero/04.jpg" },
  { title: "Twig", image: "images/collections/twig/hero/05.jpg" },
];
const TWIG_SLIDES = (window.IMG && window.IMG.extend) ? window.IMG.extend("twig", "hero", TWIG_SLIDES_BASE) : TWIG_SLIDES_BASE;

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

  useEffectTw(() => {
    if (paused) return;
    const dwell = TWIG_SLIDES[i].duration || 7000;
    const id = setTimeout(() => setI((x) => (x + 1) % TWIG_SLIDES.length), dwell);
    return () => clearTimeout(id);
  }, [paused, i]);

  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",
      }}>
      {TWIG_SLIDES.map((ss, idx) => (
        <div key={idx} style={{
          position: "absolute", inset: 0,
          opacity: idx === i ? 1 : 0,
          transition: "opacity 1100ms ease",
        }}>
          {ss.kind === "video" ? (
            <video
              src={ss.video} poster={ss.poster}
              autoPlay muted loop playsInline preload="auto"
              style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
            />
          ) : (
            <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",
        }}>
          {TWIG_SLIDES[i].title}
        </h3>
      </div>

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

  return (
    <>
      <TwigCarousel />

      <PageIntro
        eyebrow="Twig · Alexander Lotersztain, 2008"
        title="A branching modular seating system."
        body="Twig takes its name from the branching form of a twig — a natural geometry translated into modular public seating that connects through three different ends to form endless layouts. The collection encourages fluid social arrangement, with seating that reads as both organic and architectural."
        awards={["Good Design Award · Australia"]}
        compact
        noTopPad
      />

      {/* Editorial pair */}
      <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/twig/pillars/01.jpg", alt: "Twig branching modules photographed from above — the natural geometry made explicit",          caption: "01 · Branching" },
              { src: "images/collections/twig/pillars/02.jpg",   alt: "Twig upholstered in green, specified in a library setting",                                    caption: "02 · In service" },
              { src: "images/collections/twig/pillars/03.jpeg",   alt: "Twig in blue and green LDPE on the lawn at Sydney Harbour, Opera House beyond",               caption: "03 · Public realm" },
              { src: "images/collections/twig/pillars/04.png",  alt: "Recycled-terrazzo Twig and Stump-R stools in a gallery interior — closed-loop finish",          caption: "04 · Renew" },
              { src: "images/collections/twig/pillars/05.webp",  alt: "Illuminated Twig bench glowing at an evening event",          caption: "05 · Illuminated" },
            ]}
            aspect="3/4"
          />
          <div style={{ alignSelf: "center" }}>
            <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: 14 }}>Endure · Configure · 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" }}>
              Both organic and architectural.
            </h2>
            <p style={{ fontSize: isMobile ? 15 : 16, lineHeight: 1.55, color: "#1a1917", maxWidth: "46ch", margin: 0, fontWeight: 500 }}>
              Available as a bench, a bench with backrest, an illuminated variant for roof terraces and other exterior settings, and a fully upholstered indoor version for premium interior projects. Power integration is available, and the collection is part of Derlot's RENEW program — built for circular reuse at the end of its service life.
            </p>
          </div>
        </div>
      </section>

      {/* Three features */}
      <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 }}>Key features</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" }}>
            Why Twig is one of Derlot's most enduring collections.
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 48 : 40 }}>
          {[
            { no: "01", kicker: "Three-ended geometry", title: "Branching connection points.",
              body: "Twig modules connect through three different end points, allowing the collection to form linear runs, clusters or radiating compositions. The branching logic supports a wide range of layouts without imposing a rigid configuration — letting Twig adapt to the spatial brief rather than the other way around.",
              image: "images/collections/twig/feature/01.png", alt: "Two Twig benches in dark grey, specified in an airport-scale glass-walled foyer" },
            { no: "02", kicker: "A family of variants", title: "Standard, Illuminated, Upholstered.",
              body: "Offered as a bench, bench with backrest, illuminated variant for outdoor settings, and fully upholstered version for indoor use. Power integration is available across applicable variants, delivered in collaboration with OE Elsafe. The shared branching form carries across each variant, holding visual continuity across a layered specification.",
              image: "images/collections/twig/feature/02.jpg", alt: "Twig upholstered in tan, bench with backrest, specified in an airport gate lounge" },
            { no: "03", kicker: "Securable & RENEW-eligible", title: "Anti-theft fixings, closed-loop reuse.",
              body: "Twig can be specified with skateboard deterrents, floor-fixing brackets or water-fillable ballast (excluding the illuminated and upholstered variants), supporting secure installation in public and outdoor settings. As part of Derlot's RENEW program, end-of-life pieces can be returned, reprocessed and re-supplied as new units.",
              image: "images/collections/twig/feature/03.jpg", alt: "Twig benches in blue LDPE installed outdoors at the BEST Hub, paired with Stump stools" },
          ].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/twig/skus"
        headline="A natural form, reimagined as a public bench."
        meta={[
          ["Design", "Alexander Lotersztain, 2008"],
          ["Sectors", "Hospitality · Civic · Corporate · Education · Retail"],
          ["Environment", "Indoor & outdoor"],
          ["Warranty", "5 year structural"],
          ["Certifications", "GECA certified · UL listed"],
          ["Manufactured", "Australia & Poland"],
          ["Connectivity partner", "OE Elsafe (OE Electrics Group)"],
        ]}
        materials="Standard range — rotomoulded LDPE plastic, 28 colour options. Illuminated range — LDPE substrate with integrated 4000 K LED and IP67 120/240 V transformer; UL-listed components. Upholstered range — Dunlop Enduro® foam over MDF substrate, COM/COL upholstery. All variants share a 450 mm seat height; bench-with-backrest variants add a 330 mm backrest for an 780 mm total height."
        groups={[
          {
            label: "TWG · Bench",
            note: "Bench seating at 450 mm height — clean minimal profile without vertical elements. 2370 × 1930 mm footprint for linear arrangements.",
            items: [
              { sku: "TWG-01", name: "Standard bench",      dims: "2370 × 1930 × 450 H" },
              { sku: "TWG-02", name: "Illuminated bench",   dims: "2370 × 1930 × 450 H" },
              { sku: "TWG-03", name: "Upholstered bench",   dims: "2370 × 1930 × 450 H" },
            ],
          },
          {
            label: "TWB · Bench with backrest",
            note: "Bench seating with integrated backrest. 450 mm seat height plus 330 mm backrest — 780 mm total. 1930 × 2370 mm footprint to accommodate backrest geometry.",
            items: [
              { sku: "TWB-01", name: "Standard bench with backrest",     dims: "1930 × 2370 × 780 H" },
              { sku: "TWB-02", name: "Illuminated bench with backrest",  dims: "1930 × 2370 × 780 H" },
              { sku: "TWB-03", name: "Upholstered bench with backrest",  dims: "1930 × 2370 × 780 H" },
            ],
          },
        ]}
        extras={[
          {
            label: "Standard range · 28 LDPE colours",
            rows: [
              { text: "Full LDPE palette across neutrals, marbles, earth tones, warms, cools and blues" },
              { text: "Custom colour matching available on request.", muted: true },
            ],
          },
          {
            label: "Illuminated range",
            rows: [
              { text: "4000 K LED integrated within the LDPE shell" },
              { text: "IP67 120 / 240 V transformer supplied" },
              { text: "UL-listed components" },
              { text: "Waterfill not available on this range.", muted: true },
            ],
          },
          {
            label: "Upholstered range",
            rows: [
              { text: "Dunlop Enduro® foam over MDF substrate" },
              { text: "COM / COL upholstery" },
              { text: "780 mm back height" },
              { text: "Waterfill not available on this range.", muted: true },
            ],
          },
          {
            label: "Anti-theft & fixing",
            rows: [
              { text: "Standard range — water-fillable for ballast, or stainless-steel floor-fixing brackets" },
              { text: "Illuminated and Upholstered ranges — stainless-steel floor-fixing brackets only" },
              { text: "Skateboard deterrents available across all ranges.", muted: true },
            ],
          },
          {
            label: "RENEW eligibility",
            rows: [
              { text: "End-of-life take-back, reprocessing and re-supply through Derlot's RENEW program" },
              { text: "Custom terrazzo and recycled finishes can be created on request" },
              { text: "Supports long-term sustainability and circular-design targets.", muted: true },
            ],
          },
        ]}
        finishHeadline="The foundational Derlot collection — establishing the design DNA for organic  furniture."
      />

      <ConfiguratorStrip collection="Twig" />

      <SpecifierDownloads collection="Twig" />

      {/* Specified in — 3-up (real Twig 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 an airport hall to a civic plaza.
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 28 : 32 }}>
          {[
            { name: "Portland International Airport", city: "Portland, USA",     year: 2025, category: "Aviation",  image: "images/collections/twig/hero/03.jpg", pos: "center" },
            { name: "Flinders University",            city: "Adelaide, AUS",     year: 2019, category: "Education", image: "images/collections/twig/hero/05.jpg", pos: "center" },
            { name: "Santa Monica",                   city: "Santa Monica, USA", year: null, category: "Civic",     image: "images/collections/twig/hero/02.jpg", 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 => ["stump", "trio", "s1"].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="Twig" />
    </>
  );
}

window.TwigDetail = TwigDetail;