/* global React, useViewport */

function Hero({ setScreen }) {
  const vw = useViewport();
  const isMobile = vw < 720;

  return (
    <section style={{ padding: isMobile ? "120px 20px 48px" : "180px max(24px, 3vw) 80px", maxWidth: 1440, margin: "0 auto" }}>
      <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: isMobile ? 24 : 40 }}>
        Derlot — Collections 2025 / 26
      </div>
      <h1 style={{
        fontWeight: 500,
        fontSize: isMobile ? "clamp(40px, 11vw, 60px)" : "clamp(56px, 8vw, 136px)",
        lineHeight: 1.02,
        letterSpacing: "-0.02em",
        color: "#1a1917",
        margin: 0,
        textWrap: "balance",
        maxWidth: "16ch",
      }}>
        Designed for the spaces between.
      </h1>

      <div style={{ marginTop: isMobile ? 48 : 96, aspectRatio: isMobile ? "4/5" : "21/9", background: "#e4e2da", position: "relative" }}>
        <div style={{ position: "absolute", bottom: 14, left: 16, fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500 }}>
          Full-bleed image — Gateway at Melbourne Airport T3
        </div>
      </div>

      <div style={{
        display: "flex",
        flexDirection: isMobile ? "column" : "row",
        justifyContent: "space-between",
        alignItems: isMobile ? "flex-start" : "flex-end",
        marginTop: isMobile ? 24 : 32,
        gap: isMobile ? 24 : 48,
      }}>
        <p style={{ fontWeight: 500, fontSize: isMobile ? 17 : 22, lineHeight: 1.45, color: "#1a1917", maxWidth: "58ch", margin: 0 }}>
          Gathering. Learning. Waiting. Working. The in-between moments of public life — the gate lounge, the campus courtyard, the flexible workspace, the civic foyer — deserve the same considered design as the architecture around them.
        </p>
        <a onClick={() => setScreen("collections")} style={{ fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", color: "#1a1917", fontWeight: 500, cursor: "pointer", borderBottom: "0.5px solid #1a1917", paddingBottom: 4, whiteSpace: "nowrap" }}>
          Contact a distributor
        </a>
      </div>
    </section>
  );
}

window.Hero = Hero;