// Hero section
function Hero({ t }) {
  return (
    <section id="top" className="hero-section" style={{
      position: "relative",
      paddingTop: 180,
      paddingBottom: 140,
      overflow: "hidden",
    }}>
      <div className="grid-bg" />

      {/* Floating orange circle motif */}
      <div aria-hidden style={{
        position: "absolute",
        top: 140, right: -80,
        width: 380, height: 380,
        borderRadius: "50%",
        background: "radial-gradient(circle at 30% 30%, var(--orange-soft), var(--orange) 65%, var(--orange-deep))",
        filter: "blur(0.5px)",
        opacity: 0.85,
        zIndex: 0,
      }} />
      <div aria-hidden style={{
        position: "absolute",
        top: 100, right: -120,
        width: 420, height: 420,
        borderRadius: "50%",
        border: "1px solid var(--border-strong)",
        zIndex: 0,
      }} />

      <div className="shell" style={{ position: "relative", zIndex: 1 }}>
        <Reveal>
          <Eyebrow>{t.hero.eyebrow}</Eyebrow>
        </Reveal>

        <Reveal delay={80}>
          <h1 style={{
            marginTop: 28,
            fontSize: "clamp(56px, 9vw, 132px)",
            lineHeight: 0.96,
            letterSpacing: "-0.035em",
            fontWeight: 500,
            color: "var(--ink)",
            maxWidth: "16ch",
          }}>
            {t.hero.titleA}{" "}
            <span className="serif-italic" style={{ color: "var(--orange-deep)" }}>{t.hero.titleItalic}</span>{" "}
            {t.hero.titleB}
          </h1>
        </Reveal>

        <Reveal delay={180}>
          <p style={{
            marginTop: 32,
            maxWidth: 560,
            fontSize: 18,
            lineHeight: 1.55,
            color: "var(--muted)",
          }}>{t.hero.lede}</p>
        </Reveal>

        <Reveal delay={260}>
          <div style={{ marginTop: 40, display: "flex", gap: 12, flexWrap: "wrap" }}>
            <a href="#projects" className="btn btn-primary">
              {t.hero.cta1}<Arrow />
            </a>
            <a href="#contact" className="btn btn-ghost">{t.hero.cta2}</a>
          </div>
        </Reveal>

        <Reveal delay={400}>
          <div style={{
            marginTop: 120,
            paddingTop: 24,
            borderTop: "1px solid var(--border)",
            display: "grid",
            gridTemplateColumns: "repeat(4, 1fr)",
            gap: 24,
            maxWidth: 880,
          }} className="hero-meta">
            <MetaCell label="Studio" value="Rework" />
            <MetaCell label="Base" value="Oslo / Nesodden" />
            <MetaCell label={t.about.role} value="NTNU" />
            <MetaCell label="Est." value="2024" />
          </div>
        </Reveal>
      </div>

      <style>{`
        @media (max-width: 720px) {
          .hero-section { padding-top: 110px !important; padding-bottom: 80px !important; }
          .hero-meta { grid-template-columns: repeat(2, 1fr) !important; margin-top: 80px !important; }
        }
      `}</style>
    </section>
  );
}

function MetaCell({ label, value }) {
  return (
    <div>
      <div style={{
        fontSize: 11, letterSpacing: "0.16em",
        textTransform: "uppercase", color: "var(--subtle)",
        marginBottom: 6,
      }}>{label}</div>
      <div style={{ fontSize: 14, color: "var(--ink-soft)", fontWeight: 500 }}>{value}</div>
    </div>
  );
}

window.Hero = Hero;