/* Hero section.
   Big set-piece statement; small eyebrow chip; CTA pair. */
function Hero() {
  const { t } = useT();
  const mobile = useMobile();

  return (
    <section id="top" data-bg="problem" style={{
      position: "relative",
      padding: mobile ? "72px 20px 56px" : "112px 32px 96px",
      maxWidth: 1200,
      margin: "0 auto"
    }}>
      <div style={heroEyebrow}>
        <span style={heroDot}></span>
        {t("hero.eyebrow")}
      </div>

      <h1 style={{
        font: mobile ? "700 38px/1.08 'Inter'" : "700 80px/1.02 'Inter'",
        letterSpacing: "-0.025em",
        color: "#fff",
        margin: 0,
        maxWidth: 1080,
        textWrap: "balance"
      }}>
        {t("hero.title_pre")}<br />
        <span style={{ color: "#94A3B8" }}>{t("hero.title_mid")}</span><br />
        {t("hero.title_post")}
      </h1>

      <p style={{
        font: mobile ? "400 16px/1.6 'Inter'" : "400 19px/1.55 'Inter'",
        color: "#CBD5E1",
        maxWidth: 680,
        marginTop: 24
      }}>{t("hero.subhead")}</p>

      <div style={{ display: "flex", gap: 12, marginTop: 32, alignItems: "center", flexWrap: "wrap" }}>
        <a href="#cta" style={btnPrimary}>{t("hero.primary")}</a>
        <a href="#process" style={btnGhost}>{t("hero.secondary")}</a>
        <span style={{ font: "400 14px 'Inter'", color: "#64748B", marginLeft: 4 }}>
          {t("hero.foot")}
        </span>
      </div>
    </section>
  );
}

const heroEyebrow = {
  font: "600 11px/1 'Inter'",
  letterSpacing: "0.12em",
  textTransform: "uppercase",
  color: "#60A5FA",
  marginBottom: 24,
  display: "inline-flex",
  alignItems: "center",
  gap: 10,
  padding: "7px 14px",
  borderRadius: 999,
  background: "rgba(59,130,246,0.10)",
  border: "1px solid rgba(59,130,246,0.25)"
};

const heroDot = {
  width: 6, height: 6, borderRadius: 999, background: "#2DD4BF",
  boxShadow: "0 0 0 4px rgba(45,212,191,0.18)"
};

const btnPrimary = {
  font: "600 15px/1 'Inter'",
  color: "#fff",
  background: "#3B82F6",
  padding: "14px 22px",
  borderRadius: 10,
  textDecoration: "none"
};

const btnGhost = {
  font: "600 15px/1 'Inter'",
  color: "#fff",
  background: "transparent",
  border: "1px solid rgba(148,163,184,0.22)",
  padding: "14px 22px",
  borderRadius: 10,
  textDecoration: "none"
};

window.Hero = Hero;