/* HERO — 3 variantes (A editorial · B manifesto · C assimétrico) */

function HeroActions({ size = "lg" }) {
  const { Button } = window.CheerDesignSystem_4677f5;
  return (
    <div className="hero__cta">
      <Button variant="primary" size={size} rightIcon={<window.Icon.Arrow />}
        onClick={() => window.open(window.FORM, "_blank")}>
        Agendar conversa estratégica
      </Button>
    </div>
  );
}

function PortraitPH({ label = "Foto da Patricia" }) {
  return (
    <div className="portrait__ph">
      <window.Icon.User strokeWidth={1.5} />
      <span>{label}</span>
    </div>
  );
}

/* ---- A : editorial split ---- */
function HeroA() {
  return (
    <section className="hero hero--a" id="top">
      <div className="hero__confetti cheer-confetti cheer-confetti--dense" aria-hidden="true"></div>
      <div className="hero__left">
        <div className="hero__eyebrow eyebrow">
          <span className="eyebrow__rule"></span>
          Estúdio de branding e estratégia
        </div>
        <h1 className="hero__title">
          Somos o parceiro estratégico de<br />
          negócios que entendem que<br />
          marca não é <span className="grad-text">só estética</span>
        </h1>
        <p className="hero__sub lead">
          Posicionamos fundadores, experts e empresas como a escolha óbvia
          para o cliente certo.
        </p>
        <HeroActions />
      </div>
      <div className="hero__right">
        <div className="portrait" data-parallax="0.08">
          <span className="portrait__grad"></span>
          <PortraitPH />
        </div>
        <div className="float-card" data-parallax="-0.06">
          <div className="float-card__bar"></div>
          <div className="float-card__name">Patricia Ilhôa</div>
          <div className="float-card__role">Estrategista · Fundadora</div>
          <p className="float-card__desc">
            Você trabalha diretamente comigo, sem equipe intermediária,
            sem estratégia se perdendo no caminho.
          </p>
        </div>
      </div>
    </section>
  );
}

/* ---- B : centered manifesto ---- */
function HeroB() {
  return (
    <section className="hero hero--b" id="top">
      <div className="hero__confetti cheer-confetti" aria-hidden="true"></div>
      <div className="wrap hero__inner">
        <div className="hero__eyebrow eyebrow" style={{ justifyContent: "center" }}>
          <span className="eyebrow__rule"></span>
          Estúdio de branding e estratégia
        </div>
        <h1 className="hero__title">
          Somos o parceiro estratégico de negócios<br />
          que entendem que marca não é <span className="swipe">só estética</span>
        </h1>
        <p className="hero__sub lead">
          Posicionamos fundadores, experts e empresas como a escolha óbvia
          para o cliente certo.
        </p>
        <HeroActions />
        <div className="hero__strip">
          <div className="hero__metric"><b><span data-count="95">0</span>%</b><span>das decisões de compra são emocionais</span></div>
          <div className="hero__metric"><b><span data-count="7">0</span>s</b><span>para o cérebro fixar uma marca</span></div>
          <div className="hero__metric"><b>1:1</b><span>acesso direto à estrategista</span></div>
        </div>
      </div>
    </section>
  );
}

/* ---- C : asymmetric, smile-forward ---- */
function HeroC() {
  return (
    <section className="hero hero--c wrap" id="top">
      <div className="hero__left">
        <img className="hero__smile" src="cheer-ds/assets/logo/cheer-smile.png" alt="" aria-hidden="true" />
        <div className="hero__eyebrow eyebrow">
          <span className="eyebrow__rule"></span>
          Estúdio de branding e estratégia
        </div>
        <h1 className="hero__title">
          Somos o parceiro<br />
          estratégico de negócios<br />
          que entendem que marca<br />
          não é <span className="grad-text">só estética</span>
        </h1>
        <p className="hero__sub lead">
          Posicionamos fundadores, experts e empresas como a escolha óbvia
          para o cliente certo.
        </p>
        <HeroActions />
      </div>
      <div className="hero__right">
        <div className="stack" data-parallax="0.07">
          <div className="stack__ring"><div><window.Icon.User strokeWidth={1.5} /></div></div>
        </div>
        <div className="float-card">
          <div className="float-card__bar"></div>
          <div className="float-card__name">Patricia Ilhôa</div>
          <div className="float-card__role">Estrategista · Fundadora</div>
          <p className="float-card__desc">Acesso direto, sem intermediários.</p>
        </div>
      </div>
    </section>
  );
}

function Hero({ variant }) {
  if (variant === "B") return <HeroB />;
  if (variant === "C") return <HeroC />;
  return <HeroA />;
}

window.Hero = Hero;
window.HeroActions = HeroActions;