/* DOMINANCE — Page 1: Hook */

function HookPage({ tweaks, navigate }) {
  const t = tweaks;

  return (
    <>
      <TopNav status="Accepting Q2 clients" />
      <main className="page">
        <div className="container">
          {/* Hero is split into hero-text-top (offer pitch) + hero-right (video) +
              hero-text-bottom (CTA + meta). Grid template areas put video in the
              right column on desktop, but stack as top → video → bottom on mobile
              so the video sits below the offer text and above the red CTA. */}
          <section className="hero">
            <div className="hero-text-top">
              <span className="eyebrow fade-in">
                <span className="tick" />
                {t.label}
              </span>

              <h1 className="display fade-in-2">
                <WordStagger text={t.headline} delay={120} step={55} />
              </h1>

              <p className="lede fade-in-3">{t.subhead}</p>

              <p className="kicker fade-in-3" style={{ marginTop: 4 }}>
                Pay only after <span className="accent">result.</span>
              </p>

              <div className="hero-stamp fade-in-4" aria-label="What you get: new leads, new calls, new sales">
                <span><b>NEW</b> LEADS</span>
                <span className="sep" aria-hidden="true">·</span>
                <span><b>NEW</b> CALLS</span>
                <span className="sep" aria-hidden="true">·</span>
                <span><b>NEW</b> SALES</span>
              </div>
            </div>

            <div className="hero-right fade-in-3">
              <VideoFrame runtime="00:42" live="PREVIEW" caption="60-second overview" />
            </div>

            <div className="hero-text-bottom">
              <div className="hero-cta-row fade-in-4">
                <button className="btn magnetic" onClick={() => navigate("/step-2")}>
                  <span className="glint" />
                  <span>{t.ctaText}</span>
                  <span className="arrow">→</span>
                </button>
                <span className="hero-cta-note">
                  No pitch. No pressure. <b>Just the process.</b>
                </span>
              </div>

              <div className="hero-meta fade-in-4" style={{ marginTop: 8 }}>
                <span><b>No</b> empty pipeline</span>
                <span>·</span>
                <span><b>No</b> wasted calls</span>
                <span>·</span>
                <span><b>No</b> rev share</span>
              </div>
            </div>
          </section>

          {t.showMetrics ? (
            <section className="metrics-strip fade-in-4 reveal" aria-label="Operating metrics">
              <div className="metric-strip">
                <span className="metric-strip-k">30,000+</span>
                <span className="metric-strip-l">Outreach touches / month</span>
              </div>
              <div className="metric-strip-divider" />
              <div className="metric-strip">
                <span className="metric-strip-k">10,000+</span>
                <span className="metric-strip-l">Hand-picked prospects</span>
              </div>
              <div className="metric-strip-divider" />
              <div className="metric-strip">
                <span className="metric-strip-k">Pay-on-show</span>
                <span className="metric-strip-l">You pay when they show</span>
              </div>
            </section>
          ) : null}
        </div>
      </main>

      {t.showLogos ? (
        <section className="logos-row" aria-label="Operating principles">
          <div className="logos-track">
            <span>QUALIFIED CALLS ONLY</span>
            <span className="sep">·</span>
            <span>NO UNQUALIFIED LEADS</span>
            <span className="sep">·</span>
            <span>WE BOOK, YOU CLOSE</span>
            <span className="sep">·</span>
            <span>PERFORMANCE-BASED</span>
            <span className="sep">·</span>
            <span>RESULTS OR WE WORK FOR FREE</span>
            <span className="sep">·</span>
            <span>QUALIFIED CALLS ONLY</span>
            <span className="sep">·</span>
            <span>NO UNQUALIFIED LEADS</span>
            <span className="sep">·</span>
            <span>WE BOOK, YOU CLOSE</span>
            <span className="sep">·</span>
            <span>PERFORMANCE-BASED</span>
            <span className="sep">·</span>
            <span>RESULTS OR WE WORK FOR FREE</span>
            <span className="sep">·</span>
          </div>
        </section>
      ) : null}

      <Footer />
    </>
  );
}

window.HookPage = HookPage;