/* global React, useViewport, PageIntro, EditorialCarousel, ThreadBadge,
           SpecificationSection, SpecifierDownloads, EnquiryBlock */
/*
 * WombatDetail — Wombat (2016). Define thread.
 *
 * "An object with sustainability at heart." A plush wombat made from
 * Derlot's own manufacturing offcuts — fabric and foam that would
 * otherwise be landfill — with a recycled polyester fill. Each Wombat
 * receives a random premium fabric finish ("the luck of the draw") from
 * the week's upholstery off-cuts, so no two are identical.
 *
 * Delivered in partnership with the Australian Wildlife Conservancy
 * (AWC); proceeds support protection of Australia's native wildlife
 * habitats. 1 SKU. Indoor. Manufactured Australia and Poland.
 */

const { useState: useStateWmb, useEffect: useEffectWmb } = React;

const WMB_SLIDES_BASE = [{ title: "Wombat", image: "images/collections/wombat/hero/01.webp", pos: "center 42%" }];
const WMB_SLIDES = (window.IMG && window.IMG.extend) ? window.IMG.extend("wombat", "hero", WMB_SLIDES_BASE) : WMB_SLIDES_BASE;

function WombatCarousel() {
  const vw = useViewport();
  const isMobile = vw < 760;
  return (
    <section style={{ position: "relative", width: "100%", height: isMobile ? "76vh" : "78vh",
      minHeight: isMobile ? 520 : 620, maxHeight: isMobile ? "none" : 820,
      overflow: "hidden", background: "#f1efe9" }}>
      <img src={WMB_SLIDES[0].image} alt={WMB_SLIDES[0].title} loading="eager"
        style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: WMB_SLIDES[0].pos, display: "block" }} />
      <div style={{ position: "absolute", inset: 0,
        background: "linear-gradient(to bottom, transparent 60%, rgba(255,255,255,0.5) 100%)", pointerEvents: "none" }} />
      <div style={{ position: "absolute", left: 0, right: 0, bottom: isMobile ? 84 : 100,
        padding: isMobile ? "0 24px" : "0 32px", textAlign: "center", color: "#1a1917" }}>
        <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" }}>
          {WMB_SLIDES[0].title}
        </h3>
      </div>
    </section>
  );
}

function WombatDetail() {
  const vw = useViewport();
  const isMobile = vw < 720;
  return (
    <>
      <WombatCarousel />

      <PageIntro
        eyebrow="Wombat · Alexander Lotersztain, 2016"
        title="An object with sustainability at heart."
        body="Wombat is an object with both a cute demeanour and a serious purpose. Made from Derlot's own manufacturing offcuts — fabric and foam that would otherwise be discarded — the collection turns waste into something purposeful, giving discarded material a meaningful new role. Delivered in partnership with the Australian Wildlife Conservancy."
        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/wombat/pillars/01.jpg", alt: "Wombat plush — the family, angled",     caption: "01 · Form" },
              { src: "images/collections/wombat/pillars/02.jpg", alt: "Wombat plush — the colour family in mixed fabrics and leathers",    caption: "02 · Fabric" },
            ]}
            aspect="3/4"
          />
          <div style={{ alignSelf: "center" }}>
            <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: 14 }}>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" }}>
              From offcuts to ecosystems.
            </h2>
            <p style={{ fontSize: isMobile ? 15 : 16, lineHeight: 1.55, color: "#1a1917", maxWidth: "46ch", margin: 0, fontWeight: 500 }}>
              Each Wombat is finished in a random premium fabric — the "luck of the draw" — drawn from the week's available upholstery off-cuts, so no two pieces are identical. Proceeds from the collection support the <a href="https://www.australianwildlife.org" target="_blank" rel="noopener noreferrer" style={{ color: "inherit", textDecoration: "underline", textUnderlineOffset: "2px" }}>Australian Wildlife Conservancy</a>'s work protecting native wildlife habitats — particularly those of endangered species like the wombat.
            </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" }}>
            Cute demeanour, serious purpose.
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 48 : 40 }}>
          {[
            { no: "01", kicker: "Made from offcuts", title: "Fabric and foam, given new purpose.",
              body: "Wombat is produced from fabric and foam offcuts left over from Derlot's own manufacturing processes — material that would otherwise be discarded as waste. By giving these offcuts a meaningful purpose, the collection minimises waste, reduces what we send to landfill, and embeds circularity directly into our production.",
              image: "images/collections/wombat/feature/01.jpg", alt: "Bundled fabric and foam offcuts in the Derlot warehouse", pos: "center 60%" },
            { no: "02", kicker: "AWC partnership", title: "Design and conservation, working together.",
              body: "Wombat is delivered in partnership with the Australian Wildlife Conservancy — Australia's largest private owner and manager of land for conservation, protecting threatened wildlife and ecosystems across more than 12 million hectares. Proceeds support protection of native wildlife habitats, particularly those of endangered species under threat from habitat loss, disease and human development.",
              image: "images/collections/wombat/feature/02.jpg", alt: "The Wombat colour family" },
            { no: "03", kicker: "Playful object", title: "A friendly presence, refined as a design object.",
              body: "Wombat brings a playful, friendly presence to the spaces it joins. The form references its namesake without being literal, holding the warmth and approachability of the animal while reading as a refined design object — suiting educational interiors, family-friendly hospitality, corporate breakout zones and civic public spaces alike.",
              image: "images/collections/wombat/feature/03.jpg", alt: "Wombat as a friendly design object" },
          ].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>

      {/* Impact — Calvary Community Church · LA fires relief, 2025 */}
      <section style={{ background: "#1a1917", color: "#f5f3ef" }}>
        <div style={{ maxWidth: 1440, margin: "0 auto", padding: isMobile ? "64px 20px" : "120px max(24px, 3vw)" }}>
          <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: isMobile ? 36 : 72, alignItems: "center" }}>
            <div>
              <div style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "#a8a39a", fontWeight: 500, marginBottom: 18 }}>Impact · Los Angeles · 2025</div>
              <h2 style={{ fontFamily: "var(--font-display, Poppins, sans-serif)", fontWeight: 500, fontSize: isMobile ? "clamp(26px, 7vw, 34px)" : "clamp(30px, 3vw, 46px)", lineHeight: 1.08, letterSpacing: "-0.02em", margin: "0 0 24px 0", maxWidth: "16ch", textWrap: "balance" }}>
                When the fires came, Wombat showed up.
              </h2>
              <p style={{ fontSize: isMobile ? 15 : 16, lineHeight: 1.62, color: "#d8d4cc", margin: "0 0 16px 0", maxWidth: "48ch" }}>
                A shipment of Wombats was delivered to <b style={{ color: "#f5f3ef", fontWeight: 500 }}>Calvary Community Church</b> — a hub for a large portion of the donations gathered for the fire disaster in Southern California.
              </p>
              <p style={{ fontSize: isMobile ? 15 : 16, lineHeight: 1.62, color: "#d8d4cc", margin: 0, maxWidth: "48ch" }}>
                The Red Cross and multiple fire departments were stationed at the facility, working alongside Calvary to provide aid, housing, food, clothing and medical help to families displaced by the fires.
              </p>
            </div>
            <div style={{ aspectRatio: "4/5", overflow: "hidden", background: "#2a2825" }}>
              <img src="images/_legacy/collections/wombat-calvary-handover.jpg" alt="Derlot's LA team handing over Wombats at Calvary Community Church" loading="lazy"
                style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 30%", display: "block" }} />
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 16 : 24, marginTop: isMobile ? 28 : 40 }}>
            {[
              { src: "images/collections/wombat/feature/04.jpg",    alt: "Brian Field and volunteers at Calvary Worship Center", pos: "center 52%" },
              { src: "images/collections/wombat/feature/05.jpg", alt: "The team with bagged Wombats ready to distribute",      pos: "center center" },
              { src: "images/collections/wombat/feature/06.jpg",   alt: "Pallet of Derlot Wombat cartons at Calvary",            pos: "center center" },
            ].map((g) => (
              <div key={g.src} style={{ aspectRatio: "4/3", overflow: "hidden", background: "#2a2825" }}>
                <img src={g.src} srcSet={window.IMG && window.IMG.srcsetFor(g.src)} sizes={window.IMG && window.IMG.sizes()} alt={g.alt} loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: g.pos, display: "block" }} />
              </div>
            ))}
          </div>

          <p style={{ fontSize: 12.5, lineHeight: 1.6, color: "#a8a39a", margin: isMobile ? "20px 0 0 0" : "28px 0 0 0", maxWidth: "70ch" }}>
            Pictured: Brian Field, Head of Outreach (Pastor) at Calvary, with the church's volunteers and Derlot's LA team, Sussan and Hannah.
          </p>
        </div>
      </section>

      <SpecificationSection
        skuImageBase="images/collections/wombat/skus"
        headline="One plush wombat. No two alike."
        meta={[
          ["Design", "Alexander Lotersztain, 2016"],
          ["Sectors", "Hospitality · Education · Civic · Retail · Corporate"],
          ["Environment", "Indoor"],
          ["Warranty", "5 year structural"],
          ["Manufactured", "Australia & Poland"],
          ["Conservation partner", <a href="https://www.australianwildlife.org" target="_blank" rel="noopener noreferrer" style={{ color: "inherit", textDecoration: "underline", textUnderlineOffset: "2px" }}>Australian Wildlife Conservancy (AWC)</a>],
        ]}
        materials="Cover — premium fabric off-cuts drawn from Derlot's upholstery process; furniture-grade material with no two units identical. Fill — recycled polyester. Construction also incorporates foam offcuts from the same manufacturing stream. Each Wombat receives a random premium fabric finish — the 'luck of the draw' — and cannot be specified by colour or material."
        groups={[{
          label: "Plush toy",
          items: [
            { sku: "WMB-01", name: "Wombat plush toy", dims: "310 × 520 × 310 mm" },
          ],
        }]}
        extras={[
          {
            label: "Material provenance",
            rows: [
              { text: "Cover — premium fabric off-cuts from Derlot's upholstery production" },
              { text: "Fill — recycled polyester" },
              { text: "Construction — foam offcuts from the same manufacturing stream" },
              { text: "Material lifecycle extended beyond original furniture application.", muted: true },
            ],
          },
          {
            label: "Random fabric system",
            rows: [
              { text: "Each Wombat receives a different premium fabric finish" },
              { text: "Cannot be specified or requested by customer" },
              { text: "Limited availability based on upholstery waste generation patterns" },
              { text: "Inherent collectible value through genuine waste-stream variation.", muted: true },
            ],
          },
          {
            label: "Conservation impact",
            rows: [
              { text: <span>Proceeds support the <a href="https://www.australianwildlife.org" target="_blank" rel="noopener noreferrer" style={{ color: "inherit", textDecoration: "underline", textUnderlineOffset: "2px" }}>Australian Wildlife Conservancy</a></span> },
              { text: "AWC protects threatened wildlife and ecosystems across more than 12 million hectares" },
              { text: "Particular focus on endangered species under threat from habitat loss, disease and human development.", muted: true },
            ],
          },
        ]}
        finishHeadline="From offcuts to ecosystems — every Wombat helps safeguard Australia's wildlife."
      />

      <SpecifierDownloads collection="Wombat" />

      <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", "mochi", "trio"].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="Wombat" />
    </>
  );
}

window.WombatDetail = WombatDetail;