// Landing-page sections.

function Nav({ onApply }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? 'nav--scrolled' : ''}`}>
      <div className="nav-inner">
        <a href="#top" className="nav-brand">
          <span className="nav-mark">◣</span>
          <span className="nav-word">SFMENS</span>
          <span className="nav-meta">/ FELLOWSHIP · EST · ’24</span>
        </a>
        <div className="nav-links">
          <a href="#framework">Framework</a>
          <a href="#work">The Work</a>
          <a href="#membership">Membership</a>
          <button className="nav-apply" onClick={onApply}>
            Begin <span aria-hidden="true">→</span>
          </button>
        </div>
      </div>
    </nav>
  );
}

function Hero({ onApply }) {
  return (
    <header className="hero" id="top">
      <VideoPlate label="HERO · DAWN FOREST · 0:15" tone="dark" />
      <div className="hero-grid">
        <div className="hero-tag">
          <span className="hero-tag-n">N°01</span>
          <span className="hero-tag-t">A FELLOWSHIP FOR MEN IN MOTION</span>
        </div>
        <h1 className="hero-h1">
          <span className="hero-h1-l1">Build</span>
          <span className="hero-h1-l2">Legacy.</span>
        </h1>
        <p className="hero-sub">
          A fellowship for men constructing strength, skill, and commitment.
        </p>
        <div className="hero-cta">
          <MagButton onClick={onApply}>Start building</MagButton>
          <a href="#framework" className="hero-cta-2">
            <span>The Framework</span>
            <span className="dash">—</span>
            <span className="muted">12 pillars</span>
          </a>
        </div>
      </div>
      <div className="hero-foot">
        <span>SCROLL</span>
        <span className="hero-foot-line" />
        <span>SF · CA · 37.7749° N</span>
      </div>
    </header>
  );
}

function Invitation({ onApply }) {
  return (
    <section className="invitation">
      <RuleHeavy left="N°02" right="THE INVITATION" />
      <div className="inv-grid">
        <div className="inv-copy">
          <h2 className="section-h">There is work<br/>worth doing.</h2>
          <div className="inv-body">
            <p>Not the task that pays. The work that hardens. That connects. That outlasts.</p>
            <p>You have capacity. You feel it in your hands, your chest, your mornings. This is a space to focus it. To build alongside men doing the same.</p>
            <p className="inv-pull">Not to fix. To forge.</p>
          </div>
          <MagButton onClick={onApply}>Start building</MagButton>
        </div>
        <div className="inv-visual">
          <VideoPlate label="B-ROLL · HANDS / TOOL / 0:08" tone="warm" />
          <div className="inv-caption">
            <span>FIG. 02</span>
            <span>·</span>
            <span>Capacity, focused.</span>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, Invitation });