// Hero.jsx — full-bleed image with editorial overline + serif display
// + a side caption strip and a subtle bottom meta bar
function Hero() {
  return (
    <section
      data-screen-label="Hero"
      id="top"
      style={{
        position: "relative", minHeight: "100vh",
        background: "var(--ferella-chocolate)", color: "var(--fg-on-dark)",
        overflow: "hidden",
      }}
    >
      {/* Image */}
      <div style={{
        position: "absolute", inset: 0,
        backgroundImage: "url('assets/interior-grand-lounge.jpg')",
        backgroundSize: "cover", backgroundPosition: "center",
      }} />
      {/* Soft top + bottom vignette */}
      <div style={{
        position: "absolute", inset: 0,
        background:
          "linear-gradient(180deg, rgba(20,17,13,0.55) 0%, rgba(20,17,13,0.10) 22%, rgba(20,17,13,0.05) 55%, rgba(20,17,13,0.78) 100%)",
      }} />

      {/* Right side caption — vertical text */}
      <div style={{
        position: "absolute", right: 40, top: "50%",
        transform: "translateY(-50%) rotate(180deg)",
        writingMode: "vertical-rl",
        fontFamily: "var(--font-sans)", fontSize: 10,
        letterSpacing: "0.36em", textTransform: "uppercase",
        color: "rgba(237,231,221,0.62)",
      }}>
        Villa Capolago · Lago di Como · MMXXV
      </div>

      {/* Content */}
      <div style={{
        position: "relative", zIndex: 1,
        minHeight: "100vh",
        display: "flex", flexDirection: "column",
        justifyContent: "space-between",
        padding: "150px 56px 56px",
      }}>
        {/* Top eyebrow row */}
        <div style={{
          display: "flex", justifyContent: "space-between",
          alignItems: "flex-start", maxWidth: 1600, width: "100%",
          margin: "0 auto",
        }}>
          <div style={{
            fontFamily: "var(--font-sans)", fontSize: 10,
            letterSpacing: "0.36em", textTransform: "uppercase",
            color: "rgba(237,231,221,0.78)",
          }}>
            <span style={{ opacity: 0.55 }}>Est.</span> &nbsp;MMXII &nbsp;·&nbsp;
            München · Zürich · Como
          </div>
          <div style={{
            fontFamily: "var(--font-serif)", fontStyle: "italic",
            fontWeight: 300, fontSize: 14,
            color: "rgba(237,231,221,0.7)",
          }}>
            Vol. XIV · Frühjahr 2026
          </div>
        </div>

        {/* Center display headline */}
        <div style={{
          maxWidth: 1600, width: "100%", margin: "0 auto",
        }}>
          <div style={{
            fontFamily: "var(--font-sans)", fontSize: 11,
            letterSpacing: "0.36em", textTransform: "uppercase",
            color: "rgba(237,231,221,0.82)", marginBottom: 36,
            display: "flex", alignItems: "center", gap: 18,
          }}>
            <span style={{ width: 36, height: 1, background: "rgba(237,231,221,0.6)" }} />
            Quiet Luxury · Curated Design
          </div>

          <h1 style={{
            fontFamily: "var(--font-serif)", fontWeight: 300,
            fontSize: "clamp(56px, 8.4vw, 152px)",
            lineHeight: 0.96, letterSpacing: "0.005em",
            margin: 0, color: "var(--fg-on-dark)",
            maxWidth: 1300,
            textWrap: "pretty",
          }}>
            Räume aus<br />
            <span style={{ fontStyle: "italic", fontWeight: 300, opacity: 0.92 }}>Stille,&nbsp;</span>
            Material<br />und Licht.
          </h1>

          <div style={{
            marginTop: 56, display: "flex", gap: 32,
            alignItems: "center", flexWrap: "wrap",
          }}>
            <a href="#projekte" style={{
              fontFamily: "var(--font-sans)", fontSize: 11,
              letterSpacing: "0.24em", textTransform: "uppercase",
              color: "var(--fg-on-dark)",
              border: "1px solid rgba(237,231,221,0.55)",
              padding: "16px 32px", textDecoration: "none",
              transition: "background 320ms var(--ease-quiet), border-color 320ms var(--ease-quiet)",
            }}
            onMouseEnter={e => { e.currentTarget.style.background = "rgba(237,231,221,0.10)"; e.currentTarget.style.borderColor = "rgba(237,231,221,0.85)"; }}
            onMouseLeave={e => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.borderColor = "rgba(237,231,221,0.55)"; }}
            >Selected Works</a>
            <a href="#studio" style={{
              fontFamily: "var(--font-sans)", fontSize: 11,
              letterSpacing: "0.24em", textTransform: "uppercase",
              color: "var(--fg-on-dark)",
              borderBottom: "1px solid var(--fg-on-dark)",
              paddingBottom: 4, textDecoration: "none",
            }}>Studio kennenlernen</a>
          </div>
        </div>

        {/* Bottom meta strip */}
        <div style={{
          maxWidth: 1600, width: "100%", margin: "0 auto",
          display: "grid", gridTemplateColumns: "repeat(4, 1fr)",
          gap: 48, paddingTop: 40,
          borderTop: "1px solid rgba(237,231,221,0.18)",
        }}>
          {[
            { k: "Disziplinen",  v: "Residential · Hospitality · Retail" },
            { k: "Studios",       v: "Munich · Zurich · Como" },
            { k: "Auswahl 2025",  v: "9 abgeschlossene Projekte" },
            { k: "Aktuell",       v: "Verfügbar für Q3 2026" },
          ].map((m, i) => (
            <div key={i}>
              <div style={{
                fontFamily: "var(--font-sans)", fontSize: 10,
                letterSpacing: "0.32em", textTransform: "uppercase",
                color: "rgba(237,231,221,0.55)", marginBottom: 10,
              }}>{m.k}</div>
              <div style={{
                fontFamily: "var(--font-serif)", fontWeight: 300,
                fontSize: 17, lineHeight: 1.35,
                color: "var(--fg-on-dark)",
              }}>{m.v}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;