// ============= HERO (3 variants) =============
function HeroHead() {
  const { t, ctaHref, ctaLabel } = useApp();
  const stats = t("hero.stats") || [];
  return (
    <div className="hero__head">
      <Reveal as="h1" className="hero__title">
        {t("hero.title1")}{" "}
        <span className="grad">{t("hero.title2")}</span>
      </Reveal>
      <Reveal as="p" className="hero__sub" delay={60}>{t("hero.sub")}</Reveal>
      <Reveal className="hero__cta" delay={120}>
        <a href={ctaHref} className="btn btn--primary btn--lg">{ctaLabel("hero.cta")}<IconArrUp style={{ transform: "rotate(45deg)" }} /></a>
        <a href="#interface" className="btn btn--ghost btn--lg"><IconPlay />{t("hero.secondary")}</a>
      </Reveal>
      <Reveal className="hero__stats" delay={160}>
        {stats.map((s, i) => (
          <CountStat key={i} className="hstat" value={s.v} unit={s.u} label={s.l} />
        ))}
      </Reveal>
    </div>
  );
}

function HeroStage({ variant }) {
  const { t } = useApp();
  const f1 = t("hero.float1"), f2 = t("hero.float2");
  return (
    <Reveal className="hero__stage" delay={140}>
      <div className="stage-glow"></div>
      <div className="stage-frame">
        <div className="stage-bar">
          <div className="stage-bar__dots"><i></i><i></i><i></i></div>
          <span className="stage-bar__url"><IconLock />app.outforge.io/dashboard</span>
          <span className="stage-bar__live"><span className="dot"></span>LIVE</span>
        </div>
        <div className="stage-screen">
          <DashboardMock />
        </div>
      </div>
      {variant === "c" && (
        <React.Fragment>
          <div className="hero__float-card c1 hero__float">
            <div className="ffc__row">
              <span className="ffc__ico" style={{ background: "linear-gradient(150deg,var(--accent),var(--accent-deep))" }}><IconUsers /></span>
              <div><div className="ffc__t">{f1.t}</div><div className="ffc__v">{f1.v}</div></div>
            </div>
          </div>
          <div className="hero__float-card c2 hero__float">
            <div className="ffc__row">
              <span className="ffc__ico" style={{ background: "linear-gradient(150deg,var(--ok),color-mix(in oklab,var(--ok),black 28%))" }}><IconTrendUp /></span>
              <div><div className="ffc__t">{f2.t}</div><div className="ffc__v">{f2.v}</div></div>
            </div>
          </div>
        </React.Fragment>
      )}
    </Reveal>
  );
}

function Hero() {
  const { heroVariant } = useApp();
  const v = heroVariant || "a";
  return (
    <section className="hero" data-variant={v} id="top">
      <div className="hero__grid-lines" aria-hidden="true"></div>
      <div className="wrap">
        {v === "b" ? (
          <div className="hero__row">
            <HeroHead />
            <HeroStage variant={v} />
          </div>
        ) : (
          <React.Fragment>
            <HeroHead />
            <HeroStage variant={v} />
          </React.Fragment>
        )}
      </div>
    </section>
  );
}

// trust strip
function TrustStrip() {
  const { t } = useApp();
  const items = t("trust.items") || [];
  const icons = [<IconCamera />, <IconImage />, <IconLayers />, <IconActivity />, <IconType />, <IconBrief />];
  const row = items.concat(items);
  return (
    <section className="trust">
      <div className="wrap">
        <div className="trust__lbl">{t("trust.lbl")}</div>
        <div className="trust__marq">
          <div className="trust__track">
            {row.map((it, i) => (
              <div key={i} className="trust__logo" aria-hidden={i >= items.length ? "true" : undefined}>
                <span className="trust__dot">{icons[i % icons.length]}</span>{it}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, TrustStrip });