// components/hero.jsx
// <HeroSection>. Section 3.
//
// Centered single-column composition:
//   H1 "Sports, but for the rest of us." → "Now on iPhone." → Download CTAs.
//
// The atmospheric background is pure CSS on the .hero class — see
// styles.css ".hero" block. No decorative shape rendering anymore; no
// image layer; no IntersectionObserver. The rotator beat lives in
// <PermissionInterstitial> between Setup and IshCardsGrid.

function HeroSection({ onIntent, isLaunched, heroLayout = "centered" }) {
  const C = window.COPY;

  return (
    <section
      id="hero"
      aria-labelledby="hero-h1"
      className="section-dark hero"
    >
      <div className="hero-grid hero-grid-centered hero-layout-centered">
        <div className="hero-text">
          <HeroMark />

          {/* CTAs only — chips moved into the per-platform download modal
              so each click reveals what's launching on that platform. */}
          <div className="hero-enter hero-enter-rise" style={{ "--enter-delay": "2700ms" }}>
            <DownloadIntentButtons source="hero" onIntent={onIntent} isLaunched={isLaunched} />
          </div>
        </div>
      </div>

      {/* Mobile-only secondary CTA. Sits at the bottom of the mobile
          hero viewport, anchored via min-height: 100svh on .hero so the
          Familiar section's H2 + blue chip + green start fully below the
          fold. Display: none on desktop. */}
      <a href="#familiar" className="hero-secondary-cta">
        <span className="hero-secondary-cta-text">Or, why we built this.</span>
        <span className="hero-secondary-cta-chevrons" aria-hidden="true">
          <svg viewBox="0 0 24 12" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="3 3 12 10 21 3"></polyline></svg>
          <svg viewBox="0 0 24 12" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="3 3 12 10 21 3"></polyline></svg>
          <svg viewBox="0 0 24 12" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="3 3 12 10 21 3"></polyline></svg>
        </span>
      </a>

      {/* Scroll hint removed v=115 — the Familiar section's heading
          ("It usually goes like this") + cream chevron now serves as
          the scroll affordance. */}

      {/* Dev replay button removed v=133 — was a build-time animation
          re-trigger that should not have shipped to production. The
          hero animation plays on every page load, which is the only
          time end users need it. */}
    </section>
  );
}

window.HeroSection = HeroSection;