// FireTail portfolio — Hero (name-led landing)
const { Button, StatBlock, Badge } = window.FireTailDesignSystem_df7a18;

function Hero() {
  return (
    <section id="top" style={{ position: "relative", padding: "clamp(96px,13vw,168px) clamp(20px,5vw,48px) clamp(48px,7vw,96px)" }}>
      <div style={{ position: "relative", maxWidth: "var(--container)", margin: "0 auto", paddingLeft: "calc(7.6vw + 24px)" }}>
        <div data-reveal style={{ display: "inline-flex", alignItems: "center", gap: 12, marginBottom: "clamp(20px,3vw,30px)", flexWrap: "wrap" }}>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--accent)" }}>
            Gameplay Programmer · Unity · C#
          </span>
          <Badge status="live">Open to work</Badge>
        </div>

        {/* Name = the headline */}
        <h1 id="ft-hero-name" data-reveal style={{
          margin: 0, fontFamily: "var(--font-display)", fontWeight: 500,
          fontSize: "clamp(48px, 9.5vw, 124px)", lineHeight: 0.98, letterSpacing: "-0.03em",
          color: "var(--text-strong)", textWrap: "balance",
        }}>
          Smit Waghela
        </h1>

        {/* Attitude tagline — one line */}
        <p data-reveal style={{
          margin: "clamp(14px,2vw,22px) 0 0", fontFamily: "var(--font-display)", fontStyle: "italic",
          fontWeight: 400, fontSize: "clamp(20px,3vw,34px)", lineHeight: 1.15, letterSpacing: "-0.01em",
          color: "var(--text-body)", maxWidth: 900, textWrap: "balance",
        }}>
          Sparking <span style={{ color: "var(--accent)" }}>quiet fires</span>, burning for loud results.
        </p>

        <p data-reveal style={{
          margin: "clamp(22px,3vw,30px) 0 0", fontFamily: "var(--font-sans)", fontSize: "clamp(16px,2vw,19px)",
          lineHeight: 1.6, color: "var(--text-muted)", maxWidth: 600,
        }}>
          Six years shipping mobile, PC, and WebGL games in Unity — vehicle physics,
          multiplayer shooters, and live-ops systems that keep players coming back.
          Now poking at Unreal and a custom C++ engine.
        </p>

        <div data-reveal style={{ display: "flex", gap: 14, marginTop: "clamp(28px,4vw,40px)", flexWrap: "wrap" }}>
          <Button size="lg" as="a" href="#work" iconRight={<span style={{ fontFamily: "var(--font-mono)" }}>→</span>}>See the work</Button>
          <Button size="lg" variant="secondary" as="a" href="#contact">Let's cook</Button>
        </div>

        <div data-reveal style={{ display: "flex", gap: "clamp(28px,5vw,64px)", marginTop: "clamp(48px,7vw,84px)", flexWrap: "wrap" }}>
          <StatBlock value="6+" label="Years in Unity" />
          <StatBlock value="50%" label="Perf. gains delivered" />
          <StatBlock value="4" label="Jam games shipped" />
          <StatBlock value="3" label="Engines" sub="Unity · Unreal · custom" />
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;