/* global React, useViewport */

/* ------------------------------------------------------------------ */
/* NowShowing                                                          */
/*                                                                    */
/* Editorial release slab — announces the current launch.             */
/* Two columns: large still-life tone panel + copy.                   */
/* ------------------------------------------------------------------ */

function NowShowing({ onCollection }) {
  const vw = useViewport();
  const isMobile = vw < 900;

  return (
    <section style={{
      background: "#ebe6de",
      padding: isMobile ? "56px 20px 80px" : "72px max(24px, 3vw) 140px",
    }}>
      <div style={{
        maxWidth: 1440,
        margin: "0 auto",
        display: "grid",
        gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr",
        gap: isMobile ? 32 : 80,
        alignItems: "center",
      }}>
        <div>
          <div style={{
            fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase",
            color: "#6c6862", fontWeight: 500, marginBottom: 24,
          }}>
            Now showing
          </div>
          <h2 style={{
            fontWeight: 500,
            fontSize: isMobile ? "clamp(28px, 7vw, 36px)" : "clamp(32px, 3vw, 46px)",
            lineHeight: 1.0,
            letterSpacing: "-0.02em",
            color: "#1a1917",
            margin: "0 0 24px 0",
          }}>
            Trio.
          </h2>
          <p style={{
            fontSize: isMobile ? 15 : 16,
            lineHeight: 1.55,
            color: "#1a1917",
            fontWeight: 400,
            margin: "0 0 24px 0",
            maxWidth: "44ch",
          }}>
            A rotomoulded LDPE family in three forms — bucket chair, bench, and side table. Mono-material throughout: no upholstery, no fasteners, no mixed composites. Every piece designed to be taken apart and remade at end of life.
          </p>
          <p style={{
            fontSize: 14,
            lineHeight: 1.55,
            color: "#6c6862",
            fontWeight: 400,
            margin: "0 0 32px 0",
            maxWidth: "46ch",
          }}>
            Pictured: the bench in our recycled terrazzo finish — the flecked surface a consequence of the press, not a print. Released 2026, indoor and outdoor rated. Available for specification from Q2.
          </p>
          <button
            onClick={() => onCollection && onCollection("trio")}
            style={{
              fontFamily: "inherit",
              fontSize: 13,
              letterSpacing: "0.08em",
              textTransform: "uppercase",
              fontWeight: 500,
              color: "#1a1917",
              background: "transparent",
              border: "0.5px solid #1a1917",
              padding: "14px 28px",
              cursor: "pointer",
              transition: "background 160ms ease, color 160ms ease",
            }}
            onMouseEnter={(e) => { e.currentTarget.style.background = "#1a1917"; e.currentTarget.style.color = "#f5f3ef"; }}
            onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = "#1a1917"; }}
          >
            View the collection
          </button>
        </div>

        <div style={{
          aspectRatio: "4/5",
          background: "#d4c9b5",
          position: "relative",
          overflow: "hidden",
        }}>
          <img
            src="images/_legacy/collections/trio-recycled-hero.jpg"
            alt="Trio Recycled — terrazzo-like LDPE bench in a walnut-panelled foyer. Photography Rodrigo Rabaco."
            loading="lazy"
            style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
          />
        </div>
      </div>
    </section>
  );
}

window.NowShowing = NowShowing;