// Hero — the call to action, on the deep-navy treaty ground.
function Hero({ data, count, onSign }) {
  const { Button, Eyebrow } = window.IAIGADesignSystem_db07e0;
  const { Icon } = window;
  const pct = Math.min(100, (count / data.target) * 100);
  return (
    <section className="hero" id="top">
      <div className="hero__bg" aria-hidden="true"></div>
      <div className="hero__inner">
        <div className="hero__copy">
          <Eyebrow onDark>International AI Governance Alliance</Eyebrow>
          <h1 className="hero__heading">{data.hero.heading}</h1>
          <p className="hero__sub">{data.hero.subheading}</p>
          <div className="hero__cta">
            <Button variant="gold" size="lg" onClick={onSign} iconRight={<Icon.ArrowRight/>}>
              Add my signature
            </Button>
            <Button variant="secondary" size="lg" onDark as="a" href="#need">Read the proposal</Button>
          </div>
          <div className="hero__endorse">
            <span className="hero__endorse-label">{data.hero.endorsementLabel}</span>
            <div className="hero__logos">
              {data.partners.map((p) => (
                p.src
                  ? <img key={p.alt} src={p.src} alt={p.alt} className={p.keepColor ? "is-color" : ""} />
                  : <span key={p.alt} className="hero__wordmark">{p.wordmark}</span>
              ))}
            </div>
          </div>
        </div>
        <aside className="hero__meter" aria-label="Signature progress">
          <div className="hero__meter-top">
            <span className="hero__meter-count">{count.toLocaleString()}</span>
            <span className="hero__meter-of">of {data.target.toLocaleString()} signatures</span>
          </div>
          <div className="hero__bar"><span style={{ width: pct + "%" }}></span></div>
          <p className="hero__meter-note">
            Every <strong>{data.nationThreshold.toLocaleString()}</strong> signatures from one nation
            triggers direct outreach to its leadership.
          </p>
          <button className="hero__meter-link" onClick={onSign}>
            Join us <Icon.ArrowRight width={15} height={15}/>
          </button>
        </aside>
      </div>
    </section>
  );
}
window.Hero = Hero;