/* global React, useViewport */

/* ------------------------------------------------------------------ */
/* TaglineSlab                                                         */
/*                                                                    */
/* Editorial moment between the full-bleed hero and Now Showing.      */
/* Large tagline + supporting description. Generous whitespace.       */
/* ------------------------------------------------------------------ */

function TaglineSlab() {
  const vw = useViewport();
  const isMobile = vw < 760;

  return (
    <section style={{
      padding: isMobile ? "120px 24px" : "200px max(32px, 4vw)",
      maxWidth: 1240,
      margin: "0 auto",
      textAlign: isMobile ? "left" : "center",
    }}>
      <div style={{
        fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase",
        color: "#6c6862", fontWeight: 500, marginBottom: isMobile ? 24 : 32,
      }}>
        Derlot
      </div>
      <h2 style={{
        fontWeight: 500,
        fontSize: isMobile ? "clamp(26px, 6.5vw, 34px)" : "clamp(30px, 2.8vw, 44px)",
        lineHeight: 1.1,
        letterSpacing: "-0.02em",
        color: "#1a1917",
        margin: isMobile ? "0 0 28px 0" : "0 auto 36px",
        maxWidth: "22ch",
      }}>
        Designed for the spaces between.
      </h2>
      <p style={{
        fontSize: isMobile ? 15 : 16,
        lineHeight: 1.55,
        color: "#1a1917",
        fontWeight: 400,
        margin: isMobile ? 0 : "0 auto",
        maxWidth: "56ch",
        whiteSpace: "pre-line",
      }}>
        Arrival and departure. Standing and sitting. Private and civic.{"\n"}For twenty years we have drawn furniture for the rooms the world moves through — airports, galleries, foyers, campuses — with a discipline that favours endurance over decoration and a design language of its own.
      </p>
      <div style={{
        fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase",
        color: "#6c6862", fontWeight: 500, marginTop: isMobile ? 28 : 36,
      }}>
        Made in EU and AU
      </div>
    </section>
  );
}

window.TaglineSlab = TaglineSlab;