// Sections part 1: Nav, Hero, Marquee, Stats, How It Works

function Nav() {
  return (
    <nav className="nav">
      <div className="wrap nav-inner">
        <a href="#top" className="logo">
          <span className="logo-mark"></span>
          <span>NicheBridge</span>
        </a>
        <div className="nav-links">
          <a href="#platform">Platform</a>
          <a href="#how">How it works</a>
          <a href="#pricing">Pricing</a>
          <a href="#niches">Niches</a>
          <a href="#contact" className="btn btn-dark">Start a campaign <ArrowIcon /></a>
        </div>
      </div>
    </nav>
  );
}

function Hero() {
  return (
    <section className="hero" id="top">
      <div className="wrap">
        <div className="hero-grid">
          <div>
            <div className="eyebrow" style={{ marginBottom: 32 }}>
              <span className="dot"></span>Influencer marketing — built for hobby & enthusiast brands
            </div>
            <h1 className="hero-headline">
              The creators<br/>
              your <em>niche</em> already<br/>
              <span className="underline">trusts.</span>
            </h1>
          </div>
          <div className="hero-side">
            <p className="hero-lede">
              Find, hire, manage, and track 100M+ creators across every hobby, sport, and pastime. From bow hunters to bakers, kiteboarders to woodworkers — the experts your customers already follow.
            </p>
            <div className="hero-cta-row">
              <a href="#contact" className="btn btn-primary">Start a campaign <ArrowIcon /></a>
              <a href="#pricing" className="btn btn-ghost">See pricing</a>
            </div>
            <div className="mono" style={{ marginTop: 8, color: 'var(--muted)' }}>
              ↳ 100M+ creators • 44 niche categories • 6.2x avg ROAS
            </div>
          </div>
        </div>

        <div className="hero-image-strip">
          <ImgTile query="woodworker workshop saw" caption="Woodworking" index={0} />
          <ImgTile query="man fishing river" caption="Fishing" index={0} />
          <ImgTile query="man working out gym" caption="Fitness" index={0} />
          <ImgTile query="motorcycle race track" caption="Motorsports" index={0} />
        </div>
      </div>
    </section>
  );
}

function Marquee() {
  const words = ['DIY', 'Fitness', 'Woodworking', 'Fishing', 'Outdoor', 'Photography', 'Cooking', 'Motorsports', 'Craft', 'Hunting', 'Cycling', 'BBQ'];
  const all = [...words, ...words, ...words];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {all.map((w, i) => (
          <React.Fragment key={i}>
            <span>{w}</span>
            <span className="dot"></span>
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

function Stats() {
  const ref = useFadeIn();
  return (
    <section className="stats" ref={ref}>
      <div className="wrap">
        <div className="eyebrow" style={{ marginBottom: 48 }}>
          <span className="dot"></span>By the numbers
        </div>
        <div className="stats-grid">
          {STATS.map((s, i) => {
            const match = s.num.match(/[\d.]+/);
            const numericPart = match ? match[0] : s.num;
            const suffix = match ? s.num.replace(numericPart, '') : '';
            return (
              <div className="stat" key={i}>
                <div className="stat-num">
                  <em>{numericPart}</em>{suffix}
                </div>
                <div className="stat-label">{s.label}</div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  return (
    <section className="how" id="how">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 24 }}>
              <span className="dot"></span>How it works
            </div>
            <h2 className="section-title">Find. Hire.<br/>Manage. <em>Track.</em></h2>
          </div>
          <p className="section-desc">
            Influencer marketing is powerful — but until now, it wasn't built for hobby brands. Most platforms can't find the niche experts you need. Ours can, and we run the campaign for you end to end.
          </p>
        </div>
        <div className="steps">
          {STEPS.map((s) => (
            <div className="step" key={s.num}>
              <div className="step-num">{s.num}</div>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Nav = Nav;
window.Hero = Hero;
window.Marquee = Marquee;
window.Stats = Stats;
window.HowItWorks = HowItWorks;