/* global React, Section, Placeholder, PressMark, StruckLine, useReveal */
const { useState: useState13 } = React;

/* ============================================================
   01 — HERO
   "MAVERICKS WANTED."
   ============================================================ */
function HeroSection() {
  const r = useReveal();
  return (
    <section id="hero" className="hero" ref={r}>
      <div className="hero-grain" aria-hidden="true" />
      <div className="hero-glow" aria-hidden="true" />
      <nav className="hero-meta">
        <div className="wrap hero-meta-inner">
          <div className="kicker"><span className="dot" />Maverick1000 — /deets</div>
          <div className="kicker hero-meta-r">Application Page <span style={{color:'var(--ink-faint)'}}>· v3</span></div>
        </div>
      </nav>

      <div className="wrap hero-wrap">
        <h1 className="hero-h1 h-display reveal">
          <span className="hero-line">Mavericks</span>
          <span className="hero-line">Wanted<span className="hero-period">.</span></span>
        </h1>

        <p className="hero-callout reveal" style={{transitionDelay:'120ms'}}>
          <span className="hero-callout-line">Calling the multi&#8209;dimensional visionaries,</span>
          <span className="hero-callout-line">evolved entrepreneurs</span>
          <span className="hero-callout-line">&amp; world bridgers.</span>
        </p>

        <hr className="hero-rule reveal" style={{transitionDelay:'180ms'}} />

        <p className="hero-sub reveal" style={{transitionDelay:'220ms'}}>
          A Collective of Fellow Weirdos and Misfits Who Believe<br className="br-md" />
          {' '}Business Can Be the Greatest Lever for Good.
        </p>

        <div className="hero-actions reveal" style={{transitionDelay:'320ms'}}>
          <a href="#apply" className="cta">Apply for Membership <span className="arr">→</span></a>
        </div>
      </div>

      <style>{`
        .hero {
          position: relative;
          min-height: 100svh;
          padding: 0;
          padding-top: 0;
          padding-bottom: 0;
          display: flex;
          flex-direction: column;
          justify-content: stretch;
          overflow: hidden;
          background:
            radial-gradient(60% 80% at 18% 8%, rgba(151,196,89,0.06), transparent 60%),
            radial-gradient(40% 60% at 90% 90%, rgba(216,192,137,0.05), transparent 60%),
            var(--bg);
        }
        .hero-glow {
          position: absolute; inset: -20% -10% auto auto;
          width: 70vw; height: 70vw; max-width: 900px; max-height: 900px;
          background: radial-gradient(closest-side, rgba(151,196,89,0.08), transparent 70%);
          filter: blur(20px);
          pointer-events: none;
        }
        .hero-grain {
          position: absolute; inset: 0;
          background-image:
            radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
          background-size: 3px 3px;
          mix-blend-mode: overlay;
          opacity: .6;
          pointer-events: none;
        }
        .hero-meta {
          position: relative; z-index: 2;
          padding-top: 18px;
          border-bottom: 1px solid var(--rule);
        }
        .hero-meta-inner {
          display: flex; justify-content: space-between; align-items: baseline;
          padding-bottom: 14px;
        }

        .hero-wrap {
          position: relative; z-index: 2;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding-top: 64px;
          padding-bottom: 48px;
          gap: 0;
        }

        .hero-h1 {
          font-size: clamp(72px, 19vw, 280px);
          color: var(--ink);
          margin-top: 6vh;
          margin-bottom: 0;
        }
        .hero-line { display: block; }
        .hero-period { color: var(--green); }

        .hero-sub {
          margin-top: 18px;
          max-width: none;
          font-family: var(--serif);
          font-size: clamp(18px, 2.2vw, 26px);
          line-height: 1.4;
          color: var(--ink-2);
          font-style: italic;
          letter-spacing: -0.005em;
        }
          font-family: var(--serif);
          font-size: clamp(18px, 2.4vw, 26px);
          line-height: 1.32;
          color: var(--ink-2);
          font-style: italic;
          letter-spacing: -0.005em;
        }
        .hero-callout {
          margin-top: 32px;
          max-width: none;
          font-family: var(--serif);
          font-size: clamp(22px, 3.4vw, 40px);
          line-height: 1.18;
          color: var(--ink);
          letter-spacing: 0.01em;
          text-transform: uppercase;
          font-weight: 500;
        }
        .hero-callout-line { display: block; }
        .hero-rule {
          width: 60px; border: 0; border-top: 1px solid var(--ink-faint);
          margin: 22px 0;
        }
        @media (max-width: 600px) {
          .br-sm { display: none; }
          .br-md { display: none; }
        }
        @media (min-width: 720px) {
          .hero-sub { max-width: 30ch; }
          .br-sm { display: inline; }
        }

        .hero-actions {
          margin-top: 36px;
          display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
        }
        .hero-link {
          font-family: var(--sans);
          color: var(--ink-2);
          text-decoration: none;
          font-size: 13px;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          display: inline-flex; align-items: center; gap: 10px;
          padding: 6px 0;
        }
        .hero-link-rule {
          width: 36px; height: 1px; background: var(--ink-faint);
          transition: width .25s ease, background .25s ease;
        }
        .hero-link:hover .hero-link-rule { width: 56px; background: var(--green); }

        .hero-foot {
          margin-top: auto;
          padding-top: 56px;
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 24px 24px;
          border-top: 1px solid var(--rule);
          padding-top: 28px;
          margin-top: 64px;
        }
        @media (min-width: 720px) {
          .hero-foot {
            grid-template-columns: repeat(4, 1fr);
            gap: 36px;
            margin-top: auto;
            padding-top: 32px;
          }
        }
        .hero-foot-col .kicker { margin-bottom: 8px; }
        .hero-foot-val {
          font-family: var(--serif);
          font-size: 18px;
          color: var(--ink-2);
        }
      `}</style>
    </section>
  );
}

/* ============================================================
   02 — ANTI-PITCH
   ============================================================ */
function AntiPitchSection() {
  const [played, setPlayed] = useState13(() => sessionStorage.getItem('mvk_struck_played') === '1');
  const onPlay = () => sessionStorage.setItem('mvk_struck_played', '1');
  const r = useReveal();

  return (
    <div ref={r}>
    <Section id="anti" num={2} kicker="Tell me what it isn't">
      <div className="anti-grid">
        <div className="anti-left">
          <h2 className="h-serif anti-h">It isn't.</h2>
        </div>
        <div className="anti-right">
          <ol className="anti-list">
            <li><StruckLine text="A mastermind." delay={300} played={played} onPlay={onPlay} /></li>
            <li><StruckLine text="A networking group." delay={900} played={played} onPlay={onPlay} /></li>
            <li><StruckLine text="A peer advisory board." delay={1500} played={played} onPlay={onPlay} /></li>
          </ol>

          <div className="anti-arrow reveal" style={{transitionDelay: played ? '0ms' : '2100ms'}}>↓</div>

          <h3 className="h-serif anti-becomes reveal" style={{transitionDelay: played ? '0ms' : '2300ms'}}>
            A <em>Catalyzing Collective Community.</em>
          </h3>

          <p className="anti-pivot reveal" style={{transitionDelay: played ? '0ms' : '2700ms'}}>
            But if you ask the Mavericks themselves, they'll most likely say,{' '}
            <span className="anti-pivot-mark">&ldquo;</span>
            <span className="anti-pivot-word">Family<span className="anti-period">.</span></span>
            <span className="anti-pivot-mark">&rdquo;</span>
          </p>
        </div>
      </div>

      <style>{`
        .anti-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: 36px;
        }
        @media (min-width: 900px) {
          .anti-grid { grid-template-columns: 0.7fr 1fr; gap: 80px; }
        }
        .anti-h {
          font-size: clamp(40px, 7vw, 84px);
          font-style: italic;
          color: var(--ink-mute);
        }
        .anti-list {
          list-style: none; margin: 0; padding: 0;
          display: flex; flex-direction: column; gap: 18px;
          font-size: clamp(28px, 4.4vw, 48px);
          line-height: 1.05;
        }
        .anti-list li { display: block; }
        .anti-arrow {
          font-family: var(--serif);
          color: var(--green);
          font-size: 32px;
          margin: 36px 0 24px;
          line-height: 1;
        }
        .anti-becomes {
          font-size: clamp(38px, 6vw, 68px);
          color: var(--ink);
          line-height: 1.05;
        }
        .anti-becomes em {
          font-style: italic;
          color: var(--green);
          font-weight: 400;
        }
        .anti-pivot {
          margin-top: 36px;
          font-family: var(--serif);
          font-style: italic;
          font-size: clamp(20px, 2.5vw, 24px);
          line-height: 1.5;
          color: var(--ink-mute);
          max-width: 56ch;
        }
        .anti-pivot-mark { color: var(--green); font-style: normal; padding: 0 1px; }
        .anti-pivot-word { color: var(--green); font-style: normal; font-weight: 500; }
        .anti-period { color: var(--green); }
      `}</style>
    </Section>
    </div>
  );
}

/* ============================================================
   03 — CREDIBILITY
   ============================================================ */
function CredibilitySection() {
  const presses = ['Forbes', 'Inc.', 'Fast Company', 'Wired', 'NY Times', 'Worth', 'TechCrunch', 'LA Times'];

  return (
    <Section id="cred" num={3} kicker="On the record">
      <div className="cred-quote-block">
        <div className="cred-quote-mark" aria-hidden="true">&ldquo;</div>
        <blockquote className="h-serif cred-quote">
          The two greatest currencies available to us right now are
          {' '}<em>community &amp; the experiences we share.</em>
        </blockquote>
        <div className="cred-attrib">
          <div className="cred-avatar">
            <Placeholder label="SU" sub="Avatar" ratio="1 / 1" />
          </div>
          <div>
            <div className="cred-name">Sophia Umanski</div>
            <div className="cred-role">Maverick Chief Experience Architect</div>
          </div>
        </div>
      </div>

      <hr className="hr-soft" style={{margin:'72px 0'}} />

      <div className="cred-pull">
        <div className="cred-pull-mark">
          <span className="cred-pull-rule" />
          <span className="cred-pull-name">Bloomberg</span>
        </div>
        <p className="h-serif cred-pull-text">
          &ldquo;A global network of <em>industry disruptors</em>.&rdquo;
        </p>
      </div>

      <p className="press-eyebrow"><span className="dot" />As featured in</p>
      <div className="press-grid">
        {presses.map((p) => <PressMark key={p} name={p} />)}
      </div>

      <style>{`
        .press-eyebrow {
          font-family: var(--sans);
          font-size: 11px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: var(--ink-mute);
          margin-bottom: 18px;
          display: flex; align-items: center; gap: 10px;
        }
        .press-eyebrow .dot {
          width: 5px; height: 5px; background: var(--green); border-radius: 50%;
        }
      `}</style>

      <style>{`
        .cred-quote-block {
          position: relative;
          max-width: 920px;
        }
        .cred-quote-mark {
          font-family: var(--serif);
          color: var(--green);
          font-size: clamp(120px, 18vw, 200px);
          line-height: 0.8;
          margin-bottom: -24px;
          margin-left: -8px;
          font-style: italic;
        }
        .cred-quote {
          font-size: clamp(28px, 4.6vw, 52px);
          line-height: 1.18;
          color: var(--ink);
          font-style: italic;
          font-weight: 400;
          text-wrap: pretty;
        }
        .cred-quote em {
          font-style: italic;
          color: var(--green);
        }
        .cred-attrib {
          display: flex; align-items: center; gap: 18px;
          margin-top: 36px;
        }
        .cred-avatar { width: 56px; height: 56px; flex-shrink: 0; }
        .cred-avatar .ph { width: 100%; height: 100%; border-radius: 50%; padding: 0; font-size: 14px; letter-spacing: .04em; }
        .cred-name { font-family: var(--serif); font-size: 18px; color: var(--ink); }
        .cred-role { font-family: var(--sans); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); margin-top: 3px;}

        .cred-pull {
          margin-bottom: 56px;
          max-width: 920px;
        }
        .cred-pull-mark {
          display: flex; align-items: center; gap: 14px;
          margin-bottom: 16px;
        }
        .cred-pull-rule { width: 36px; height: 1px; background: var(--green); }
        .cred-pull-name {
          font-family: var(--sans);
          font-size: 12px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: var(--ink-mute);
        }
        .cred-pull-text {
          font-family: var(--serif);
          font-size: clamp(28px, 4.4vw, 48px);
          line-height: 1.18;
          color: var(--ink);
          font-style: italic;
        }
        .cred-pull-text em { color: var(--green); font-style: italic; }

        .press-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 0;
          border: 1px solid var(--rule);
          background: var(--rule);
        }
        @media (min-width: 600px) { .press-grid { grid-template-columns: repeat(4, 1fr); } }
        @media (min-width: 900px) { .press-grid { grid-template-columns: repeat(8, 1fr); } }
        .press-grid .press-mark {
          border: none;
          border-right: 1px solid var(--rule);
          border-bottom: 1px solid var(--rule);
          background: var(--bg);
        }
        .press-grid .press-mark:nth-child(2n) { border-right: none; }
        @media (min-width: 600px) {
          .press-grid .press-mark { border-right: 1px solid var(--rule) !important; }
          .press-grid .press-mark:nth-child(4n) { border-right: none !important; }
          .press-grid .press-mark:nth-child(n+5) { border-bottom: none; }
        }
        @media (min-width: 900px) {
          .press-grid .press-mark { border-bottom: none !important; }
          .press-grid .press-mark { border-right: 1px solid var(--rule) !important; }
          .press-grid .press-mark:nth-child(8n) { border-right: none !important; }
        }
        .press-note {
          margin-top: 14px;
          font-family: var(--sans);
          font-size: 11px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
        }
      `}</style>
    </Section>
  );
}

Object.assign(window, { HeroSection, AntiPitchSection, CredibilitySection });
