/* hero.jsx — three swappable hero directions. Exports Hero to window. */
const { useState: useStateH, useEffect: useEffectH, useRef: useRefH } = React;

function HeroButtons({ onBook, primaryLabel = "Book a consultation" }) {
  return (
    <div className="hero-cta">
      <button className="btn btn-primary btn-lg" onClick={onBook}>
        {primaryLabel}
        <span className="arrow" aria-hidden="true">↗</span>
      </button>
      <a className="btn btn-ghost btn-lg" href="#work">See the work</a>
    </div>);

}

/* Subtle brand watermark behind the hero (toggleable via Tweaks). */
function HeroWM({ show }) {
  if (!show) return null;
  return (
    <React.Fragment>
      <img className="hero-wm hero-wm--light" src="assets/roan-black.svg" alt="" aria-hidden="true" draggable="false" />
      <img className="hero-wm hero-wm--dark" src="assets/roan-white.svg" alt="" aria-hidden="true" draggable="false" />
    </React.Fragment>);
}

/* ---- A: NAME AS THE STAR — kinetic wordmark ---- */
function HeroWordmark({ onBook, brandMark }) {
  const verbs = ["more views", "more money", "real clarity", "better content", "a sharper edge"];
  const [vi, verb] = window.useRotator(verbs, 2200);
  const letters = "ROAN".split("");
  return (
    <header className="hero hero--wordmark">
      <HeroWM show={brandMark} />
      <div className="wrap hero-inner">
        <div className="hero-top reveal in">
          <span className="eyebrow">Content &amp; YouTube Strategist</span>
          <span className="eyebrow eyebrow--plain">Since 2014 · Full-time</span>
        </div>

        <div className="wordmark" aria-label="Roan">
          {letters.map((l, i) =>
          <span className="wm-letter" key={i} style={{ animationDelay: `${0.15 + i * 0.09}s` }}>{l}</span>
          )}
          <span className="wm-dot" aria-hidden="true"></span>
        </div>

        <div className="hero-sub reveal in" data-d="2">
          <p className="h3 hero-sub-line">
            I help creators get{" "}
            <span className="rotator">
              <span className="rotator-word serif" key={vi}>{verb}</span>
            </span>
          </p>
          <p className="lede hero-blurb">
            Ten years inside the algorithm — packaging, scripting, strategy and the
            <span className="serif"> bigger picture</span> of building something that lasts.
          </p>
        </div>

        <div className="hero-foot reveal in" data-d="3">
          <HeroButtons onBook={onBook} />
          <div className="hero-stats">
            <Stat n={<window.CountUp end={5} suffix="M+" />} l="followers built from zero" />
            <Stat n={<window.CountUp end={500} suffix="+" />} l="creators & channels" />
            <Stat n={<window.CountUp end={10} suffix=" yrs" />} l="full-time in content" />
          </div>
        </div>
      </div>
      <ScrollCue />
    </header>);

}

/* ---- B: REEL — headline + proof (flowing bar removed; videos live in Selected Videos) ---- */
function HeroReel({ onBook, brandMark }) {
  return (
    <header className="hero hero--reel">
      <HeroWM show={brandMark} />
      <div className="wrap hero-inner">
        <h1 className="h1 reel-head reveal in" data-d="1">
          The strategist behind<br />videos you already watch.
        </h1>
        <p className="lede reel-blurb reveal in" data-d="2">Nearly 10 years experience, hundreds of creators, billions of views influenced. I help established channels get more views, make more money, and think clearly about the work.


        </p>
        <div className="hero-foot reveal in" data-d="3">
          <HeroButtons onBook={onBook} />
        </div>
      </div>
      <ScrollCue />
    </header>);

}

/* ---- C: STATEMENT — calm, minimal, big CTA ---- */
function HeroStatement({ onBook, brandMark }) {
  return (
    <header className="hero hero--statement">
      <HeroWM show={brandMark} />
      <div className="wrap hero-inner center">
        <span className="eyebrow reveal in" style={{ marginInline: "auto" }}>Content &amp; YouTube Strategist · 10+ yrs</span>
        <h1 className="display statement-head reveal in" data-d="1">
          Make the<br /><span className="serif">content</span><br />count.
        </h1>
        <p className="lede statement-blurb reveal in" data-d="2">
          I help established creators and brands get more views, make more money, and
          build something that actually lasts — strategy, scripting, and the bigger picture.
        </p>
        <div className="reveal in" data-d="3" style={{ display: "flex", justifyContent: "center" }}>
          <HeroButtons onBook={onBook} primaryLabel="Book a consultation call" />
        </div>
        <div className="statement-stats reveal in" data-d="4">
          <Stat n={<window.CountUp end={5} suffix="M+" />} l="followers from zero" />
          <span className="stat-div" aria-hidden="true"></span>
          <Stat n={<window.CountUp end={500} suffix="+" />} l="creators helped" />
          <span className="stat-div" aria-hidden="true"></span>
          <Stat n={<window.CountUp end={10} suffix=" yrs" />} l="full-time" />
        </div>
      </div>
      <ScrollCue />
    </header>);

}

function Stat({ n, l }) {
  return (
    <div className="stat">
      <div className="stat-n h2">{n}</div>
      <div className="stat-l faint">{l}</div>
    </div>);

}

function ScrollCue() {
  return null;
}

function Hero({ variant, onBook, brandMark }) {
  if (variant === "reel") return <HeroReel onBook={onBook} brandMark={brandMark} />;
  if (variant === "statement") return <HeroStatement onBook={onBook} brandMark={brandMark} />;
  return <HeroWordmark onBook={onBook} brandMark={brandMark} />;
}

Object.assign(window, { Hero });