/* global React, PageIntro, useViewport, EnquiryBlock */
const { useState: useStateCE, useEffect: useEffectCE } = React;

/* ------------------------------------------------------------------ */
/* ReNewCarousel — 4-image carousel for the "material story" block.  */
/* Auto-advances every 5s; pauses on hover; prev/next arrows; dots.  */
/* ------------------------------------------------------------------ */
function ReNewCarousel({ isMobile }) {
  const slides = [
    { src: "images/about/circularity/01-trio.jpg",      caption: "Trio · 85% recycled LDPE" },
    { src: "images/about/circularity/02-regrind.jpg",   caption: "Regrind · post-industrial LDPE, ready to remould" },
    { src: "images/about/circularity/03-feedstock.jpg", caption: "Feedstock · reclaimed Australian manufacturing waste" },
    { src: "images/about/circularity/04-floor.jpg",     caption: "Made in Australia · Derlot Group floor" },
  ];
  const [i, setI] = useStateCE(0);
  const [paused, setPaused] = useStateCE(false);

  useEffectCE(() => {
    if (paused) return;
    const t = setTimeout(() => setI((i + 1) % slides.length), 5000);
    return () => clearTimeout(t);
  }, [i, paused]);

  const go = (n) => setI((n + slides.length) % slides.length);

  return (
    <div
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
      style={{ position: "absolute", inset: 0 }}
    >
      {slides.map((s, idx) => (
        <img
          key={s.src}
          src={s.src} srcSet={window.IMG && window.IMG.srcsetFor(s.src)} sizes={window.IMG && window.IMG.sizes()}
          alt={s.caption}
          style={{
            position: "absolute", inset: 0, width: "100%", height: "100%",
            objectFit: "cover", display: "block",
            opacity: idx === i ? 1 : 0,
            transition: "opacity 700ms ease",
          }}
        />
      ))}

      {/* Caption */}
      <div style={{
        position: "absolute", left: isMobile ? 20 : 32, bottom: isMobile ? 52 : 64,
        fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase",
        color: "rgba(245,243,239,0.88)", fontWeight: 500,
        textShadow: "0 1px 4px rgba(0,0,0,0.4)", maxWidth: "70%",
      }}>
        {slides[i].caption}
      </div>

      {/* Dots */}
      <div style={{
        position: "absolute", left: isMobile ? 20 : 32, bottom: isMobile ? 20 : 28,
        display: "flex", gap: 8,
      }}>
        {slides.map((_, idx) => (
          <button
            key={idx}
            onClick={() => go(idx)}
            aria-label={`Show image ${idx + 1}`}
            style={{
              width: idx === i ? 20 : 8, height: 2, padding: 0, border: 0,
              background: idx === i ? "rgba(245,243,239,0.95)" : "rgba(245,243,239,0.45)",
              cursor: "pointer", transition: "width 300ms ease, background 300ms ease",
            }}
          />
        ))}
      </div>

      {/* Prev / Next */}
      {!isMobile && (
        <>
          <button
            onClick={() => go(i - 1)}
            aria-label="Previous image"
            style={{
              position: "absolute", left: 16, top: "50%", transform: "translateY(-50%)",
              width: 36, height: 36, border: 0, background: "rgba(26,25,23,0.28)",
              color: "#f5f3ef", cursor: "pointer", fontSize: 16, fontWeight: 400,
            }}
          >‹</button>
          <button
            onClick={() => go(i + 1)}
            aria-label="Next image"
            style={{
              position: "absolute", right: 16, top: "50%", transform: "translateY(-50%)",
              width: 36, height: 36, border: 0, background: "rgba(26,25,23,0.28)",
              color: "#f5f3ef", cursor: "pointer", fontSize: 16, fontWeight: 400,
            }}
          >›</button>
        </>
      )}
    </div>
  );
}

/* ------------------------------------------------------------------ */
/* CircularEconomy                                                     */
/*                                                                    */
/* The sustainability position page. Per the retrofit brief:          */
/* "the page nobody in the competitor set has" — circular and         */
/* mono-material public seating as a category claim.                  */
/*                                                                    */
/* SEO target queries:                                                */
/*   · circular airport seating                                       */
/*   · mono-material public furniture                                 */
/*   · closed-loop airport furniture                                  */
/*   · recycled plastic furniture                                     */
/*   · sustainable contract furniture                                 */
/*                                                                    */
/* Page structure:                                                    */
/*  01 PageIntro — the position in one sentence                       */
/*  02 Four commitments — ring-fence positioning claims               */
/*  03 Trio — material story (the leading example, 85% recycled LDPE) */
/*  04 Manufacturing geography — Brisbane, Mexico, Italy, Poland      */
/*  05 What we count — measurable metrics, honestly                   */
/*  06 Take-back — Renew programme, end-of-life policy                */
/*  07 Certifications + downloads                                     */
/*  08 Open work — what we're still solving                           */
/*  09 EnquiryBlock                                                   */
/* ------------------------------------------------------------------ */

/* --- Commitment card ----------------------------------------------- */
function CommitmentCard({ no, title, body }) {
  const vw = useViewport();
  const isMobile = vw < 900;
  return (
    <div style={{ padding: isMobile ? "28px 0" : 0 }}>
      <div style={{ display: "flex", alignItems: "baseline", gap: 12, marginBottom: 16 }}>
        <div style={{
          fontFamily: "var(--font-mono, ui-monospace, SFMono-Regular, monospace)",
          fontSize: 11, letterSpacing: "0.14em",
          color: "#5d7158", fontWeight: 500,
        }}>
          {no}
        </div>
        <div style={{ height: "0.5px", flex: 1, background: "rgba(93,113,88,0.3)" }} />
      </div>
      <h3 style={{
        fontWeight: 500,
        fontSize: isMobile ? 18 : 19,
        lineHeight: 1.2, letterSpacing: "-0.01em",
        color: "#1a1917", margin: "0 0 12px 0",
      }}>
        {title}
      </h3>
      <p style={{
        fontSize: 14, lineHeight: 1.6,
        color: "#3a3833", margin: 0, maxWidth: "36ch",
      }}>
        {body}
      </p>
    </div>
  );
}

/* --- Metric panel -------------------------------------------------- */
function MetricPanel({ value, label, note }) {
  const vw = useViewport();
  const isMobile = vw < 760;
  return (
    <div style={{
      padding: isMobile ? "28px 20px" : "36px 32px",
      borderRight: isMobile ? "none" : "0.5px solid rgba(26,25,23,0.15)",
      borderBottom: isMobile ? "0.5px solid rgba(26,25,23,0.15)" : "none",
    }}>
      <div style={{
        fontFamily: "var(--font-display, Poppins, sans-serif)",
        fontWeight: 300,
        fontSize: isMobile ? "clamp(38px, 9vw, 52px)" : "clamp(48px, 4.5vw, 72px)",
        letterSpacing: "-0.035em", lineHeight: 1,
        color: "#1a1917", marginBottom: 16,
      }}>
        {value}
      </div>
      <div style={{
        fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase",
        color: "#1a1917", fontWeight: 500, marginBottom: 10,
      }}>
        {label}
      </div>
      <div style={{ fontSize: 13, lineHeight: 1.55, color: "#6c6862" }}>
        {note}
      </div>
    </div>
  );
}

/* --- Manufacturing location row ----------------------------------- */
function ManufactureRow({ country, for_ }) {
  const vw = useViewport();
  const isMobile = vw < 760;
  return (
    <div style={{
      display: "grid",
      gridTemplateColumns: isMobile ? "1fr" : "minmax(160px, 220px) minmax(0, 1fr)",
      gap: isMobile ? 6 : 32,
      padding: isMobile ? "20px 0" : "22px 0",
      borderTop: "0.5px solid rgba(26,25,23,0.18)",
      alignItems: "baseline",
    }}>
      <div style={{
        fontWeight: 500, fontSize: isMobile ? 16 : 17,
        color: "#1a1917", letterSpacing: "-0.005em",
      }}>
        {country}
      </div>
      <div style={{ fontSize: isMobile ? 13 : 13.5, color: "#3a3833", lineHeight: 1.5 }}>
        <span style={{ color: "#6c6862" }}>Serves · </span>{for_}
      </div>
    </div>
  );
}

/* --- Certification chip ------------------------------------------- */
function CertChip({ label, note }) {
  return (
    <div style={{
      border: "0.5px solid rgba(26,25,23,0.25)",
      padding: "14px 18px",
    }}>
      <div style={{ fontSize: 13, fontWeight: 500, color: "#1a1917", marginBottom: 4 }}>{label}</div>
      <div style={{ fontSize: 11, color: "#6c6862", letterSpacing: "0.06em" }}>{note}</div>
    </div>
  );
}

/* --- Wombat carousel (scoped to CircularEconomy; renamed to avoid the
   global collision with WombatDetail.jsx's WombatCarousel) ---------- */
function CircularWombatCarousel() {
  const vw = useViewport();
  const isMobile = vw < 760;
  const slides = [
    { src: "assets/wombat/wombat-herd.png",   alt: "Wombat colour range" },
    { src: "assets/wombat/wombat-aerial.png", alt: "Wombat overhead composition" },
    { src: "assets/wombat/wombat-yellow.png", alt: "Wombat close-up, yellow" },
  ];
  const [i, setI] = React.useState(0);
  const prev = () => setI((i - 1 + slides.length) % slides.length);
  const next = () => setI((i + 1) % slides.length);

  return (
    <div style={{ position: "relative", marginBottom: isMobile ? 32 : 44 }}>
      <div style={{
        position: "relative",
        width: "100%",
        aspectRatio: "4 / 3",
        background: "#f5f3ef",
        overflow: "hidden",
      }}>
        {slides.map((s, idx) => (
          <div
            key={s.src}
            style={{
              position: "absolute",
              inset: 0,
              backgroundImage: `url('${s.src}')`,
              backgroundSize: "cover",
              backgroundPosition: "center",
              opacity: idx === i ? 1 : 0,
              transition: "opacity 480ms ease",
            }}
            aria-label={s.alt}
          />
        ))}

        {/* Arrows */}
        <button
          onClick={prev}
          aria-label="Previous image"
          style={{
            position: "absolute",
            top: "50%",
            left: isMobile ? 12 : 20,
            transform: "translateY(-50%)",
            width: isMobile ? 40 : 48,
            height: isMobile ? 40 : 48,
            borderRadius: "50%",
            background: "rgba(26,25,23,0.55)",
            color: "#f5f3ef",
            border: "none",
            cursor: "pointer",
            fontSize: 18,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            backdropFilter: "blur(4px)",
            WebkitBackdropFilter: "blur(4px)",
          }}
        >
          ←
        </button>
        <button
          onClick={next}
          aria-label="Next image"
          style={{
            position: "absolute",
            top: "50%",
            right: isMobile ? 12 : 20,
            transform: "translateY(-50%)",
            width: isMobile ? 40 : 48,
            height: isMobile ? 40 : 48,
            borderRadius: "50%",
            background: "rgba(26,25,23,0.55)",
            color: "#f5f3ef",
            border: "none",
            cursor: "pointer",
            fontSize: 18,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            backdropFilter: "blur(4px)",
            WebkitBackdropFilter: "blur(4px)",
          }}
        >
          →
        </button>

        {/* Counter */}
        <div style={{
          position: "absolute",
          bottom: isMobile ? 12 : 20,
          right: isMobile ? 12 : 20,
          background: "rgba(26,25,23,0.55)",
          color: "#f5f3ef",
          padding: "6px 12px",
          fontSize: 11,
          letterSpacing: "0.08em",
          fontWeight: 500,
          backdropFilter: "blur(4px)",
          WebkitBackdropFilter: "blur(4px)",
        }}>
          {String(i + 1).padStart(2, "0")} / {String(slides.length).padStart(2, "0")}
        </div>
      </div>
    </div>
  );
}

/* --- CircularEconomy page ----------------------------------------- */
function CircularEconomy({ setScreen }) {
  const vw = useViewport();
  const isMobile = vw < 900;

  return (
    <>
      <PageIntro
        eyebrow="Circular Economy"
        title="Building furniture for the long cycle — considered, local, remade."
        body="Certification is a floor, not a ceiling. We design for long service life, manufacture close to where pieces will stand, specify recycled material where it performs, and take pieces back when they reach end of life."
      />

      {/* Four commitments */}
      <section style={{
        padding: isMobile ? "0 20px 64px" : "0 max(32px, 4vw) 96px",
        maxWidth: 1440, margin: "0 auto",
      }}>
        <div style={{
          background: "#eae8de",
          padding: isMobile ? "32px 24px" : "56px max(32px, 3vw)",
          borderTop: "0.5px solid rgba(93,113,88,0.25)",
          borderBottom: "0.5px solid rgba(93,113,88,0.25)",
        }}>
          <div style={{ maxWidth: 560, marginBottom: isMobile ? 28 : 48 }}>
            <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#5d7158", fontWeight: 500, marginBottom: 14 }}>
              Our commitments
            </div>
            <h2 style={{
              fontWeight: 500,
              fontSize: isMobile ? "clamp(22px, 5.5vw, 28px)" : "clamp(24px, 2.2vw, 32px)",
              lineHeight: 1.14, letterSpacing: "-0.015em",
              color: "#1a1917", margin: 0, maxWidth: "26ch",
              textWrap: "balance",
            }}>
              Four principles we hold across every collection.
            </h2>
          </div>
          <div style={{
            display: "grid",
            gridTemplateColumns: isMobile ? "1fr" : "repeat(4, 1fr)",
            gap: isMobile ? 0 : 32,
          }}>
            <CommitmentCard
              no="01"
              title="Made on demand, near the install."
              body="Production runs are scheduled to confirmed orders — no stockholding, no over-production. Manufacturing is chosen for proximity to the project, not cost alone."
            />
            <CommitmentCard
              no="02"
              title="Specified for the long cycle."
              body="Structural warranty of five years minimum, service horizons of thirty. Every piece is engineered for replaceable modules, published parts, and on-site refit."
            />
            <CommitmentCard
              no="03"
              title="Recycled where it performs."
              body="We use recycled content when the material can meet the performance requirement honestly — not for marketing. Trio leads on 85% post-industrial recycled LDPE."
            />
            <CommitmentCard
              no="04"
              title="Taken back at end of life."
              body="The Renew programme arranges take-back of pieces reaching end of service — disassembled, sorted, and recovered into material streams wherever possible."
            />
          </div>
        </div>
      </section>

      {/* Trio — material story */}
      <section style={{
        padding: isMobile ? "0 20px 96px" : "0 max(32px, 4vw) 140px",
        maxWidth: 1600, margin: "0 auto",
      }}>
        <div style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "minmax(0, 6fr) minmax(0, 5fr)",
          gap: isMobile ? 32 : 0,
          alignItems: "stretch",
        }}>
          <div style={{
            aspectRatio: isMobile ? "4/5" : "auto",
            minHeight: isMobile ? "auto" : 640,
            background: "#e4e2da",
            overflow: "hidden",
            position: "relative",
          }}>
            <ReNewCarousel isMobile={isMobile} />
          </div>
          <div style={{
            padding: isMobile ? "0" : "72px max(32px, 3vw)",
            alignSelf: "center",
            maxWidth: 560,
          }}>
            <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#5d7158", fontWeight: 500, marginBottom: 16 }}>
              The leading example
            </div>
            <h2 style={{
              fontFamily: "var(--font-display, Poppins, sans-serif)",
              fontWeight: 500,
              fontSize: isMobile ? "clamp(26px, 6.5vw, 34px)" : "clamp(28px, 2.6vw, 40px)",
              lineHeight: 1.1, letterSpacing: "-0.02em",
              color: "#1a1917", margin: "0 0 24px 0", maxWidth: "18ch",
              textWrap: "balance",
            }}>
              Trio — one material, honestly recycled, fully recoverable.
            </h2>
            <p style={{ fontSize: isMobile ? 15 : 16, lineHeight: 1.65, color: "#1a1917", margin: "0 0 18px 0", fontWeight: 400 }}>
              Trio is moulded from post-industrial LDPE reclaimed from Australian manufacturing waste streams — offcuts, rejects, shop-floor remnants that would otherwise be landfilled. Each piece contains a minimum of 85% recycled content by mass.
            </p>
            <p style={{ fontSize: isMobile ? 15 : 16, lineHeight: 1.65, color: "#6c6862", margin: "0 0 32px 0", fontWeight: 400 }}>
              Because the piece is mono-material, end of service isn't complicated. A Trio stool that has outlived its commission is taken back through the Renew programme, reground, and fed into the next production run. No composite layers to separate, no mixed polymers to sort. One material in, one material back.
            </p>
            <div style={{
              display: "grid",
              gridTemplateColumns: "1fr 1fr",
              gap: 0,
              borderTop: "0.5px solid rgba(26,25,23,0.18)",
            }}>
              {[
                ["85%", "post-industrial LDPE"],
                ["100%", "recoverable, mono-material"],
                ["Melbourne", "manufactured"],
                ["Long life", "service horizon"],
              ].map(([v, k]) => (
                <div key={k} style={{
                  padding: "18px 0",
                  borderBottom: "0.5px solid rgba(26,25,23,0.12)",
                }}>
                  <div style={{ fontSize: 20, fontWeight: 500, color: "#1a1917", letterSpacing: "-0.01em", marginBottom: 4 }}>{v}</div>
                  <div style={{ fontSize: 11, color: "#6c6862", letterSpacing: "0.08em", textTransform: "uppercase" }}>{k}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Wombat — AWC partnership case study */}
      <section style={{
        padding: isMobile ? "56px 20px" : "96px max(32px, 4vw)",
        maxWidth: 1440, margin: "0 auto",
        borderTop: "0.5px solid rgba(26,25,23,0.18)",
      }}>
        <div style={{
          marginBottom: isMobile ? 40 : 56,
          maxWidth: 880,
        }}>
          <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#5d7158", fontWeight: 500, marginBottom: 16 }}>
            A second example · partnership
          </div>
          <h2 style={{
            fontFamily: "var(--font-display, Poppins, sans-serif)",
            fontWeight: 500,
            fontSize: isMobile ? "clamp(26px, 6.5vw, 34px)" : "clamp(28px, 2.6vw, 40px)",
            lineHeight: 1.1, letterSpacing: "-0.02em",
            color: "#1a1917", margin: "0 0 28px 0", maxWidth: "20ch",
            textWrap: "balance",
          }}>
            Wombat — offcut fabric, made into something worth keeping.
          </h2>
          <div style={{
            display: "grid",
            gridTemplateColumns: isMobile ? "1fr" : "minmax(0, 1fr) minmax(0, 1fr)",
            gap: isMobile ? 18 : 48,
          }}>
            <p style={{ fontSize: isMobile ? 15 : 16, lineHeight: 1.65, color: "#1a1917", margin: 0, fontWeight: 400 }}>
              Wombat is made from upholstery fabric and foam left over from production of our commercial furniture — material that would otherwise be landfilled. Each piece is hand-sewn in Brisbane using whatever combination of colours that week's offcuts allow, which is why no two are quite alike.
            </p>
            <p style={{ fontSize: isMobile ? 15 : 16, lineHeight: 1.65, color: "#6c6862", margin: 0, fontWeight: 400 }}>
              A portion of every Wombat sold supports <a href="https://www.australianwildlife.org/" target="_blank" rel="noopener noreferrer" style={{ color: "#1a1917", borderBottom: "0.5px solid #1a1917", paddingBottom: 1 }}>Australian Wildlife Conservancy</a>, the country's largest private custodian of threatened habitat. Together with AWC we&rsquo;re raising awareness of Australia&rsquo;s unique wildlife habitats — in particular the endangered species the piece is named for.
            </p>
          </div>
        </div>

        <CircularWombatCarousel />

        <div style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "repeat(4, 1fr)",
          borderTop: "0.5px solid rgba(26,25,23,0.18)",
          borderBottom: "0.5px solid rgba(26,25,23,0.18)",
        }}>
          {[
            ["Offcut fabric & foam", "material input"],
            ["Hand-sewn", "Brisbane"],
            ["No two alike", "colour determined by the week"],
            ["AWC", "conservation partner"],
          ].map(([v, k]) => (
            <div key={k} style={{
              padding: isMobile ? "18px 0" : "22px 20px 22px 0",
              borderBottom: isMobile ? "0.5px solid rgba(26,25,23,0.12)" : "none",
            }}>
              <div style={{ fontSize: isMobile ? 16 : 17, fontWeight: 500, color: "#1a1917", letterSpacing: "-0.005em", marginBottom: 6 }}>{v}</div>
              <div style={{ fontSize: 11, color: "#6c6862", letterSpacing: "0.08em", textTransform: "uppercase" }}>{k}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Manufacturing geography */}
      <section style={{
        padding: isMobile ? "56px 20px" : "96px max(32px, 4vw)",
        maxWidth: 1440, margin: "0 auto",
        borderTop: "0.5px solid rgba(26,25,23,0.18)",
      }}>
        <div style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "minmax(0, 4fr) minmax(0, 8fr)",
          gap: isMobile ? 32 : 72,
          marginBottom: isMobile ? 24 : 40,
          alignItems: "start",
        }}>
          <div>
            <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: 14 }}>
              Manufacturing geography
            </div>
            <h2 style={{
              fontFamily: "var(--font-display, Poppins, sans-serif)",
              fontWeight: 500,
              fontSize: isMobile ? "clamp(22px, 5.5vw, 28px)" : "clamp(24px, 2.2vw, 34px)",
              lineHeight: 1.12, letterSpacing: "-0.015em",
              color: "#1a1917", margin: 0, maxWidth: "22ch",
              textWrap: "balance",
            }}>
              We make in the geography that serves the project.
            </h2>
          </div>
          <p style={{ fontSize: isMobile ? 15 : 15.5, lineHeight: 1.65, color: "#3a3833", margin: 0, maxWidth: "56ch" }}>
            Four regional manufacturing partners, chosen for carbon logic and local expertise. A project specified in Brisbane is built in Brisbane; a project in the US Midwest is built in Mexico; a project in Europe is built in Italy or Poland. Freight is always the loudest line item in a piece's embodied carbon — shortening it is the single most consequential decision we make.
          </p>
        </div>

        <div>
          <ManufactureRow
            city="Brisbane"
            country="Australia"
            for_="AU, NZ, Asia-Pacific"
            logic="Gateway, Trio, Stump Recycled. Local LDPE waste streams feed recycled production."
          />
          <ManufactureRow
            city="Monterrey"
            country="Mexico"
            for_="North America"
            logic="Gateway, soft lounge. Close to DFW, SAN, PDX and major US airport commissions."
          />
          <ManufactureRow
            city="Milan"
            country="Italy"
            for_="Italy, France, Iberia"
            logic="Upholstered work, heritage techniques. Short road freight across Western Europe."
          />
          <ManufactureRow
            city="Poznań"
            country="Poland"
            for_="Northern, Central and Eastern Europe"
            logic="Steel and plywood fabrication. Scandinavia, Germany, the Baltics."
          />
          <div style={{ height: "0.5px", background: "rgba(26,25,23,0.18)" }} />
        </div>
      </section>

      {/* What we count — honest metrics */}
      <section style={{
        padding: isMobile ? "56px 20px" : "96px max(32px, 4vw)",
        maxWidth: 1440, margin: "0 auto",
      }}>
        <div style={{ maxWidth: 720, marginBottom: isMobile ? 28 : 44 }}>
          <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: 14 }}>
            What we count
          </div>
          <h2 style={{
            fontFamily: "var(--font-display, Poppins, sans-serif)",
            fontWeight: 500,
            fontSize: isMobile ? "clamp(22px, 5.5vw, 28px)" : "clamp(24px, 2.2vw, 34px)",
            lineHeight: 1.12, letterSpacing: "-0.015em",
            color: "#1a1917", margin: "0 0 12px 0", maxWidth: "26ch",
            textWrap: "balance",
          }}>
            Measured where it matters.
          </h2>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "minmax(0, 5fr) minmax(0, 7fr)",
          gap: isMobile ? 24 : 72,
          borderTop: "0.5px solid rgba(26,25,23,0.18)",
          paddingTop: isMobile ? 28 : 40,
        }}>
          <p style={{
            fontFamily: "var(--font-display, Poppins, sans-serif)",
            fontWeight: 500,
            fontSize: isMobile ? "clamp(18px, 4.5vw, 22px)" : "clamp(20px, 1.6vw, 24px)",
            lineHeight: 1.35, letterSpacing: "-0.01em",
            color: "#1a1917", margin: 0, maxWidth: "24ch",
            textWrap: "balance",
          }}>
            Recycled content, service horizon, lead times and packaging &mdash; the things we can genuinely influence, tracked inside the business rather than dressed up for a report.
          </p>
          <p style={{
            fontSize: isMobile ? 14.5 : 15.5,
            lineHeight: 1.65,
            color: "#3a3833", margin: 0, maxWidth: "56ch",
          }}>
            Our recycled-content figures sit at the mass balance of each collection, not a headline average. Service horizons reflect specification intent, warranted and repair-supported. Production runs on demand, in weeks not months, so we don&rsquo;t carry stock we&rsquo;ll later write off. Where freight routes allow, pieces travel in reusable blankets and crates rather than single-use packaging.
          </p>
        </div>
      </section>

      {/* Renew — take-back */}
      <section style={{
        padding: isMobile ? "56px 20px" : "96px max(32px, 4vw)",
        maxWidth: 1440, margin: "0 auto",
      }}>
        <div style={{
          background: "#7d9479",
          color: "#f5f3ef",
          padding: isMobile ? "40px 24px" : "64px max(32px, 3vw)",
        }}>
          <div style={{
            display: "grid",
            gridTemplateColumns: isMobile ? "1fr" : "minmax(0, 4fr) minmax(0, 7fr)",
            gap: isMobile ? 28 : 72,
            alignItems: "start",
          }}>
            <div>
              <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "rgba(245,243,239,0.6)", fontWeight: 500, marginBottom: 14 }}>
                Renew Program
              </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.015em",
                color: "#f5f3ef", margin: 0, maxWidth: "18ch",
                textWrap: "balance",
              }}>
                When a piece reaches end of life, we take it back.
              </h2>
            </div>
            <div>
              <p style={{ fontSize: isMobile ? 15 : 16, lineHeight: 1.65, color: "rgba(245,243,239,0.88)", margin: "0 0 22px 0", fontWeight: 400 }}>
                The Renew programme covers every LDPE rotomoulded piece, sold in any market, at any point in its life. We arrange collection, disassemble on our floor, and route material streams into recovery — metal to scrap merchants, foam to flock, LDPE back into our own production runs, textiles to specialist processors.
              </p>
              <p style={{ fontSize: isMobile ? 15 : 16, lineHeight: 1.65, color: "rgba(245,243,239,0.6)", margin: "0 0 32px 0", fontWeight: 400 }}>
                Before Renew, we try refit. Most collections are designed for component-level replacement — an upholstered module that has taken the brunt of ten years of public use can be reskinned without removing the frame, and the investment in the building extends another decade.
              </p>
              <div style={{ display: "flex", gap: 16, flexWrap: "wrap", alignItems: "center" }}>
                <a
                  onClick={() => setScreen && setScreen("design-capabilities")}
                  style={{
                    fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase",
                    color: "#f5f3ef", borderBottom: "0.5px solid #f5f3ef",
                    paddingBottom: 3, fontWeight: 500, cursor: "pointer",
                  }}
                >
                  Collaboration →
                </a>
                <a style={{
                  fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase",
                  color: "rgba(245,243,239,0.7)", borderBottom: "0.5px solid rgba(245,243,239,0.4)",
                  paddingBottom: 3, fontWeight: 500, cursor: "pointer",
                }}>
                  Renew programme →
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Certifications + download */}
      <section style={{
        padding: isMobile ? "56px 20px" : "96px max(32px, 4vw)",
        maxWidth: 1440, margin: "0 auto",
        borderTop: "0.5px solid rgba(26,25,23,0.18)",
      }}>
        <div style={{ maxWidth: 820 }}>
          <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: 14 }}>
            Evidence
          </div>
          <h2 style={{
            fontWeight: 500,
            fontSize: isMobile ? "clamp(22px, 5.5vw, 28px)" : "clamp(24px, 2.2vw, 32px)",
            lineHeight: 1.12, letterSpacing: "-0.015em",
            color: "#1a1917", margin: "0 0 18px 0", maxWidth: "22ch",
            textWrap: "balance",
          }}>
            Certification, reporting and published policy.
          </h2>
          <p style={{ fontSize: isMobile ? 14.5 : 15, color: "#6c6862", margin: "0 0 28px 0", lineHeight: 1.6, maxWidth: "56ch" }}>
            Sustainability is documented per-collection. Tender-ready certification packs, EPD reports and our current sustainability commitment are available from the Downloads library or on request from the team.
          </p>
          <div style={{ display: "flex", gap: 24, flexWrap: "wrap" }}>
            <a
              onClick={() => setScreen && setScreen("downloads")}
              style={{
                fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase",
                color: "#1a1917", borderBottom: "0.5px solid #1a1917",
                paddingBottom: 3, fontWeight: 500, cursor: "pointer",
              }}
            >
              Downloads library →
            </a>
            <a
              href="uploads/05_Derlot_Sustainability_Commitment.docx"
              style={{
                fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase",
                color: "#1a1917", borderBottom: "0.5px solid #1a1917",
                paddingBottom: 3, fontWeight: 500,
              }}
            >
              Sustainability commitment →
            </a>
          </div>
        </div>
      </section>

      {/* Open work */}
      <section style={{
        padding: isMobile ? "56px 20px 96px" : "96px max(32px, 4vw) 140px",
        maxWidth: 1440, margin: "0 auto",
        borderTop: "0.5px solid rgba(26,25,23,0.18)",
      }}>
        <div style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "minmax(0, 4fr) minmax(0, 8fr)",
          gap: isMobile ? 28 : 72,
        }}>
          <div>
            <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: 14 }}>
              Work still open
            </div>
            <h2 style={{
              fontWeight: 500,
              fontSize: isMobile ? "clamp(22px, 5.5vw, 28px)" : "clamp(24px, 2.2vw, 30px)",
              lineHeight: 1.14, letterSpacing: "-0.015em",
              color: "#1a1917", margin: 0, maxWidth: "22ch",
              textWrap: "balance",
            }}>
              What we're still solving, honestly.
            </h2>
          </div>
          <div style={{ fontSize: isMobile ? 14.5 : 15, color: "#3a3833", lineHeight: 1.65 }}>
            <p style={{ margin: "0 0 18px 0" }}>
              The recycled content figure on our ReNew rotomoulded range is genuinely 85% — and we want to push it closer to 95%. The hold-up isn't intent, it's material: post-consumer streams are dirtier and less consistent than post-industrial, and our moulding tolerances have to catch up before we commit. We'd rather declare 85% we can stand behind than a round number we can't.
            </p>
            <p style={{ margin: "0 0 18px 0" }}>
              Upholstery is the category we're slowest on. Textiles made from recycled fibre perform differently under the wear cycles a public seat sees, and the last thing a circular claim needs is a seat that fails at year three. We specify recycled textiles where the wear class genuinely supports them. Where it doesn't, we don't — yet.
            </p>
            <p style={{ margin: 0, color: "#6c6862" }}>
              The AKL Auckland take-back pilot — a shared closed-loop stream with the airport operator — is into its second phase. We'll publish the findings, good or bad, once the pilot closes.
            </p>
          </div>
        </div>
      </section>

      <EnquiryBlock collection="Sustainability" />
    </>
  );
}

window.CircularEconomy = CircularEconomy;
