/* global React, useViewport */

/* ------------------------------------------------------------------ */
/* MaterialsStory                                                      */
/*                                                                    */
/* Editorial moment: raw material → finished product.                  */
/* Rotates quarterly in content; one story rendered at a time.        */
/* ------------------------------------------------------------------ */

function MaterialsStory() {
  const vw = useViewport();
  const isMobile = vw < 900;

  return (
    <section style={{
      padding: isMobile ? "56px 20px 80px" : "72px max(24px, 3vw) 140px",
      maxWidth: 1440,
      margin: "0 auto",
    }}>
      <div style={{
        aspectRatio: isMobile ? "4/3" : "21/9",
        minHeight: isMobile ? "auto" : 520,
        background: "#f5f3ef",
        position: "relative",
        overflow: "hidden",
      }}>
        <img src="images/_legacy/collections/stump-r.webp" alt="Stump Recycled — full colourway range pressed from post-industrial LDPE." loading="lazy" style={{ width: "100%", height: "100%", objectFit: "contain", display: "block" }} />
      </div>

      <div style={{
        marginTop: isMobile ? 32 : 48,
        display: "grid",
        gridTemplateColumns: isMobile ? "1fr" : "minmax(220px, 1fr) 2fr",
        gap: isMobile ? 20 : 64,
      }}>
        <div>
          <div style={{
            fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase",
            color: "#6c6862", fontWeight: 500, marginBottom: 16,
          }}>
            Materials · No. 04
          </div>
          <h3 style={{
            fontWeight: 500,
            fontSize: isMobile ? "clamp(20px, 5vw, 24px)" : "clamp(22px, 1.9vw, 28px)",
            lineHeight: 1.1,
            letterSpacing: "-0.015em",
            color: "#1a1917",
            margin: 0,
            maxWidth: "18ch",
          }}>
            A terrazzo like finish, from post-industrial plastic
          </h3>
        </div>
        <div>
          <p style={{
            fontSize: isMobile ? 14 : 15,
            lineHeight: 1.65,
            color: "#1a1917",
            fontWeight: 400,
            margin: "0 0 14px 0",
            maxWidth: "56ch",
          }}>
            Stump Recycled is pressed from 85% post-industrial low-density polyethylene — industrial offcuts. The flecked surface is a consequence of the process, not a print. No two units are identical, and at end of life the entire piece returns to the same stream it came from.
          </p>
          <p style={{
            fontSize: 14,
            lineHeight: 1.6,
            color: "#6c6862",
            fontWeight: 400,
            margin: 0,
            maxWidth: "56ch",
          }}>
            The mono-material principle runs through the Renew thread — Twig, S1 and the new Trio share the same philosophy: one substance, no fasteners, no mixed composites.
          </p>
        </div>
      </div>
    </section>
  );
}

window.MaterialsStory = MaterialsStory;