// Experience, Membership, Final CTA, Footer.

function Experience() {
  return (
    <section className="experience" id="work">
      <RuleHeavy left="N°04" right="THE WORK · 3 SURFACES" />
      <div className="exp-head">
        <h2 className="section-h">The<br/>Work</h2>
        <p className="section-sub">
          Three surfaces. One discipline. The build never stops.
        </p>
      </div>
      <div className="exp-grid">
        {EXPERIENCE.map((c, i) => (
          <article key={c.title} className="exp-card">
            <VideoPlate label={`${c.title.toUpperCase()} · 0:06`} tone={i === 1 ? 'warm' : 'dark'} />
            <div className="exp-card-body">
              <div className="exp-card-tag">
                <span>{c.tag}</span>
                <span className="exp-card-line" />
                <span>SURFACE</span>
              </div>
              <h3 className="exp-card-title">{c.title}</h3>
              <p>{c.body}</p>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

function Membership({ onApply }) {
  return (
    <section className="membership" id="membership">
      <RuleHeavy left="N°05" right="MEMBERSHIP" />
      <div className="mem-grid">
        <div className="mem-left">
          <h2 className="section-h">Join the<br/>Build</h2>
          <p className="mem-who">
            Men already in motion.
          </p>
          <p className="mem-who-body">
            28–50. Physical capacity. Willing to invest. Committed to constructing
            something lasting alongside others doing the same.
          </p>
          <div className="mem-price">
            <div className="mem-price-row">
              <span className="mem-price-num">$4,800</span>
              <span className="mem-price-cad">/ year</span>
            </div>
            <div className="mem-price-row mem-price-row--alt">
              <span>or $480</span>
              <span className="mem-price-cad">/ month</span>
            </div>
            <p className="mem-price-foot">
              + travel to immersions, gear, and ammunition.
            </p>
          </div>
          <MagButton onClick={onApply}>Begin application</MagButton>
        </div>

        <div className="mem-right">
          <div className="mem-list-head">
            <span>WHAT YOU BUILD</span>
            <span>06 INCLUSIONS</span>
          </div>
          <ul className="mem-list">
            {MEMBERSHIP.map((m, i) => (
              <li key={m}>
                <span className="mem-list-n">{String(i + 1).padStart(2, '0')}</span>
                <span className="mem-list-t">{m}</span>
              </li>
            ))}
          </ul>
          <div className="mem-guarantee">
            <div className="mem-guarantee-tag">GUARANTEE</div>
            <p>
              First immersion satisfaction. If this is not your place,
              full refund. No friction.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

function FinalCTA({ onApply }) {
  return (
    <section className="final-cta">
      <VideoPlate label="CLOSING · BREATH IN COLD AIR · 0:12" tone="dark">
        <div className="fc-overlay">
          <h2 className="fc-h">Step<br/>forward.</h2>
          <p className="fc-sub">Build alongside us.</p>
          <MagButton onClick={onApply}>Begin application</MagButton>
        </div>
      </VideoPlate>
    </section>
  );
}

function Footer() {
  return (
    <footer className="ft">
      <div className="ft-top">
        <div className="ft-brand">
          <span className="nav-mark">◣</span>
          <span className="ft-word">SFMENS</span>
        </div>
        <div className="ft-cols">
          <div>
            <div className="ft-col-h">SITE</div>
            <a href="#framework">Framework</a>
            <a href="#work">The Work</a>
            <a href="#membership">Membership</a>
          </div>
          <div>
            <div className="ft-col-h">CONTACT</div>
            <a href="#">field@sfmens.org</a>
            <a href="#">San Francisco, CA</a>
          </div>
          <div>
            <div className="ft-col-h">FELLOWSHIP</div>
            <a href="#">Code of conduct</a>
            <a href="#">Privacy</a>
          </div>
        </div>
      </div>
      <div className="ft-bot">
        <span>© SFMENS FELLOWSHIP · MMXXIV</span>
        <span className="ft-dots">· · ·</span>
        <span>BUILD · NOT FIX</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Experience, Membership, FinalCTA, Footer });