/* Reveal-on-scroll hook + nav */

function useReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal:not(.in)');
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  });
}

function Nav({ onBook }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={`nav${scrolled ? ' scrolled' : ''}`}>
      <div className="container nav-inner">
        <a href="#top" className="wordmark">
          <span className="dot"></span>
          Clubside <span className="lite">Commercial</span>
        </a>
        <div className="nav-links">
          <a href="#problem">The problem</a>
          <a href="#services">Services</a>
          <a href="#process">Process</a>
          <a href="#faq">FAQ</a>
        </div>
        <div className="nav-cta">
          <a href="#contact" className="btn btn-ghost btn-sm">Get in touch</a>
          <button className="btn btn-primary btn-sm" onClick={onBook}>
            Book a call <Icon.Arrow />
          </button>
        </div>
      </div>
    </nav>
  );
}

function Hero({ onBook }) {
  return (
    <header className="hero" id="top">
      {/* Decorative field lines */}
      <svg
        className="field-deco"
        style={{ top: '-120px', right: '-200px', width: '720px', height: '720px', color: 'var(--accent)', opacity: 0.07 }}
        viewBox="0 0 720 720"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.2"
        aria-hidden="true"
      >
        <circle cx="360" cy="360" r="350" />
        <circle cx="360" cy="360" r="200" />
        <circle cx="360" cy="360" r="60" />
        <path d="M0 360h720M360 0v720" />
      </svg>
      <svg
        className="field-deco"
        style={{ bottom: '60px', left: '-80px', width: '320px', height: '420px', color: 'var(--ink-4)', opacity: 0.18 }}
        viewBox="0 0 320 420"
        fill="none"
        stroke="currentColor"
        strokeWidth="1"
        aria-hidden="true"
      >
        <rect x="-1" y="60" width="240" height="300" />
        <rect x="-1" y="130" width="100" height="160" />
        <path d="M239 175 A 70 70 0 0 1 239 245" />
        <circle cx="155" cy="210" r="3" fill="currentColor" />
      </svg>

      <div className="container">
        <div className="hero-grid">
          <div className="reveal">
            <div className="eyebrow" style={{ marginBottom: '40px' }}>
              <span>The commercial team your club doesn't have</span>
            </div>
            <h1 className="display">
              You have the sponsors.<br/>
              <span className="ink-3">You don't have the </span><span className="accent-word">time</span><span className="ink-3"> to manage them.</span>
            </h1>
            <p className="lede reveal delay-1" style={{ marginTop: '32px' }}>
              Clubside Commercial runs sponsorship for grassroots and community football clubs across Australia, keeping existing partners warm, bringing new ones in, and quietly turning your prospectus into renewed revenue.
            </p>
          </div>

          <div className="hero-meta reveal delay-2">
            <div className="ctas">
              <button className="btn btn-primary" onClick={onBook}>
                Book a call <Icon.Arrow />
              </button>
              <a href="#contact" className="btn btn-secondary">
                Get in touch
              </a>
            </div>
            <div className="meta-right">
              <div className="hero-stat">
                <div className="num">100%</div>
                <div className="lbl">Volunteer-friendly</div>
              </div>
              <div className="hero-stat">
                <div className="num">$0</div>
                <div className="lbl">Upfront to chat</div>
              </div>
              <div className="hero-stat">
                <div className="num">AU</div>
                <div className="lbl">Built for community football</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
  );
}

function Problem() {
  const lines = [
    { idx: '01', txt: <>The prospectus is already <em>written</em>. It's sitting in a Dropbox folder no one's opened since pre-season.</> },
    { idx: '02', txt: <>Existing sponsors get a renewal email <em>maybe</em> once a year, and a few quietly don't come back.</> },
    { idx: '03', txt: <>Outreach to new sponsors needs <em>consistent effort</em>. Committees have day jobs and a season to run.</> },
    { idx: '04', txt: <>The result: real commercial value left <em>on the field</em>, every single season.</> },
  ];
  return (
    <section id="problem">
      <div className="container">
        <div className="section-head reveal">
          <div className="col-left">
            <span className="eyebrow">The problem</span>
            <h2 className="h2">The packages exist.<br/>The follow-through doesn't.</h2>
          </div>
          <div className="col-right">
            <p className="lede">
              Almost every community club we meet has a sponsorship prospectus and a list of past supporters. Almost none have someone whose actual job is to work it. That gap is where renewals lapse, warm leads cool off, and new partners never quite get pitched.
            </p>
          </div>
        </div>

        <div className="problem-grid">
          <div className="problem-statements reveal">
            {lines.map((l) => (
              <div key={l.idx} className="problem-line">
                <span className="idx">{l.idx}</span>
                <span className="txt">{l.txt}</span>
              </div>
            ))}
          </div>

          <div className="reveal delay-2" style={{ position: 'relative' }}>
            <div style={{
              background: 'var(--surface)',
              border: '1px solid var(--line)',
              borderRadius: 'var(--r-xl)',
              padding: '36px',
              position: 'relative',
              overflow: 'hidden'
            }}>
              <div className="eyebrow plain" style={{ color: 'var(--ink-4)', marginBottom: '24px' }}>
                <span style={{ fontFamily: 'var(--f-mono)', fontSize: 11, letterSpacing: '0.08em' }}>
                  WHAT WE HEAR ON DISCOVERY CALLS
                </span>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
                {[
                  '"We had a great year-one sponsor and just… never followed up."',
                  '"Our treasurer drafted three pitch emails. None went out."',
                  '"We don\'t even know who renewed last season."',
                  '"There\'s definitely more out there. We just can\'t chase it."',
                ].map((q, i) => (
                  <div key={i} style={{
                    paddingBottom: 18,
                    borderBottom: i < 3 ? '1px solid var(--line)' : 'none',
                    fontSize: 16,
                    color: 'var(--ink-2)',
                    fontFamily: 'var(--f-display)',
                    letterSpacing: '-0.005em',
                    lineHeight: 1.4,
                  }}>
                    {q}
                  </div>
                ))}
              </div>
              <svg
                viewBox="0 0 100 100"
                style={{ position: 'absolute', bottom: -20, right: -20, width: 160, height: 160, color: 'var(--accent)', opacity: 0.06, pointerEvents: 'none' }}
                fill="none" stroke="currentColor" strokeWidth="1.2"
              >
                <circle cx="50" cy="50" r="48" />
                <circle cx="50" cy="50" r="24" />
              </svg>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Services() {
  return (
    <section id="services" style={{ background: 'var(--surface)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="container">
        <div className="section-head reveal">
          <div className="col-left">
            <span className="eyebrow">What we do</span>
            <h2 className="h2">Two jobs.<br/>Done properly.</h2>
          </div>
          <div className="col-right">
            <p className="lede">
              We don't rewrite your strategy or rebrand your club. We pick up the commercial work that's already been planned, and actually do it, week in, week out.
            </p>
          </div>
        </div>

        <div className="services-grid">
          <div className="service-card reveal delay-1">
            <div className="title-row">
              <div>
                <div className="num">SERVICE / 01</div>
                <h3 style={{ marginTop: 8 }}>Sponsor Retention</h3>
              </div>
              <div style={{ color: 'var(--accent)' }}><Icon.Trophy /></div>
            </div>
            <p className="desc">
              Managing existing sponsors, renewals, and relationships so no one quietly walks away. We become the consistent point of contact your partners always wished they had.
            </p>
            <ul>
              <li><Icon.Check /> Quarterly check-ins with every active sponsor</li>
              <li><Icon.Check /> Renewal calendar built and worked through</li>
              <li><Icon.Check /> Activation tracking, making sure benefits are delivered</li>
              <li><Icon.Check /> End-of-season wrap and value report</li>
            </ul>
            <div className="footer-line">
              <span>Ongoing · Monthly cadence</span>
            </div>
          </div>

          <div className="service-card reveal delay-2">
            <div className="title-row">
              <div>
                <div className="num">SERVICE / 02</div>
                <h3 style={{ marginTop: 8 }}>Sponsor Acquisition</h3>
              </div>
              <div style={{ color: 'var(--accent)' }}><Icon.Compass /></div>
            </div>
            <p className="desc">
              Active outreach to new sponsors using your club's existing packages and prospectus. We build the target list, write the pitches, and run the conversations end-to-end.
            </p>
            <ul>
              <li><Icon.Check /> Local business mapping around your catchment</li>
              <li><Icon.Check /> Tailored outreach campaigns (calls, email, in-person)</li>
              <li><Icon.Check /> Meetings booked and led on your club's behalf</li>
              <li><Icon.Check /> Deals closed and handed back ready-to-sign</li>
            </ul>
            <div className="footer-line">
              <span>Active outreach · Commission on new deals</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Process() {
  return (
    <section id="process">
      <div className="container">
        <div className="section-head reveal">
          <div className="col-left">
            <span className="eyebrow">How it works</span>
            <h2 className="h2">Three steps.<br/>No reinventing the wheel.</h2>
          </div>
          <div className="col-right">
            <p className="lede">
              Most clubs are up and running with us inside two weeks. We work with what you already have: your packages, your contacts, your existing sponsor list, and start executing.
            </p>
          </div>
        </div>

        <div className="process-strip reveal">
          <div className="process-step">
            <div className="step-num">01<sup>STEP</sup></div>
            <h3>Discovery call</h3>
            <p>
              A 30-minute conversation to understand where your club is at: current sponsors, lapsed ones, what's been tried, and what's actually possible in your market.
            </p>
            <div className="meta">30 MIN · NO OBLIGATION</div>
          </div>
          <div className="process-step">
            <div className="step-num">02<sup>STEP</sup></div>
            <h3>Custom proposal</h3>
            <p>
              A short, written proposal tailored to your situation: scope, cadence, and pricing. You see exactly what we'll do, what it costs, and what success looks like.
            </p>
            <div className="meta">DELIVERED WITHIN 5 DAYS</div>
          </div>
          <div className="process-step">
            <div className="step-num">03<sup>STEP</sup></div>
            <h3>We get to work</h3>
            <p>
              Managing, pitching, and growing. Monthly updates to the committee, a single point of contact, and quiet, consistent commercial momentum behind the scenes.
            </p>
            <div className="meta">MONTH-TO-MONTH · CANCEL ANYTIME</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function About() {
  return (
    <section id="about" className="tight" style={{ background: 'var(--surface)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="container">
        <div className="about-grid">
          <div className="reveal">
            <span className="eyebrow">Why Clubside</span>
            <h2 className="h2" style={{ marginTop: 16 }}>
              Built specifically for community football, not a generic agency.
            </h2>
            <p className="lede" style={{ marginTop: 24 }}>
              We started Clubside because we kept seeing the same pattern: good clubs, real assets, no one to work them. So we built the team clubs can't justify hiring full-time, and made it month-to-month.
            </p>
          </div>

          <div className="about-points reveal delay-1">
            <div className="about-point">
              <div className="label">01 / Aligned</div>
              <div className="text"><strong>We win when you win.</strong> Pricing is structured so a chunk of what we earn depends on what we actually bring in, not on hours billed.</div>
            </div>
            <div className="about-point">
              <div className="label">02 / Focused</div>
              <div className="text"><strong>Only grassroots and community football.</strong> We're not stretched across rugby, netball, and corporate clients. We know your audience and your market.</div>
            </div>
            <div className="about-point">
              <div className="label">03 / Quiet</div>
              <div className="text"><strong>You stay in the foreground.</strong> Outreach goes out under your club's name, on your letterhead. We're the engine, not the front of house.</div>
            </div>
            <div className="about-point">
              <div className="label">04 / Light</div>
              <div className="text"><strong>Built for volunteer committees.</strong> One monthly update, one point of contact, zero new tooling for your treasurer to learn.</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Audience() {
  return (
    <section className="audience-section">
      <svg
        style={{ position: 'absolute', top: '40px', right: '-160px', width: '520px', height: '520px', color: '#fff', opacity: 0.05, pointerEvents: 'none' }}
        viewBox="0 0 520 520" fill="none" stroke="currentColor" strokeWidth="1"
        aria-hidden="true"
      >
        <circle cx="260" cy="260" r="255" />
        <circle cx="260" cy="260" r="140" />
        <circle cx="260" cy="260" r="40" />
        <path d="M0 260h520M260 0v520" />
      </svg>
      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
        <div className="section-head reveal">
          <div className="col-left">
            <span className="eyebrow">Who it's for</span>
            <h2 className="h2" style={{ color: '#fff' }}>Clubs with commercial potential, and not enough hands.</h2>
          </div>
          <div className="col-right">
            <p className="lede">
              If your club has a prospectus, a few existing sponsors, and a committee that would rather coach than cold-email, we're built for you.
            </p>
          </div>
        </div>

        <div className="audience-cards reveal">
          <div className="audience-card">
            <div className="icon-frame"><Icon.Whistle /></div>
            <h4>Senior &amp; Junior Clubs</h4>
            <p>Local football clubs running senior squads, junior pathways, or both, typically 200–1,000 registered players.</p>
          </div>
          <div className="audience-card">
            <div className="icon-frame"><Icon.Trophy /></div>
            <h4>Regional &amp; Suburban</h4>
            <p>Community clubs across Sydney, Melbourne, Brisbane, Adelaide, Perth and regional centres, anywhere with a local business base.</p>
          </div>
          <div className="audience-card">
            <div className="icon-frame"><Icon.Compass /></div>
            <h4>Clubs Ready to Grow</h4>
            <p>You have packages written and a prospectus. You just need someone to consistently work the commercial side.</p>
          </div>
        </div>

        <div className="audience-bottom reveal delay-1">
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <span className="pill"><span className="dot"></span>NSW</span>
            <span className="pill"><span className="dot"></span>VIC</span>
            <span className="pill"><span className="dot"></span>QLD</span>
            <span className="pill"><span className="dot"></span>SA</span>
            <span className="pill"><span className="dot"></span>WA</span>
            <span className="pill"><span className="dot"></span>TAS</span>
            <span className="pill"><span className="dot"></span>ACT</span>
            <span className="pill"><span className="dot"></span>NT</span>
          </div>
          <a href="#contact" style={{ color: '#fff', display: 'inline-flex', alignItems: 'center', gap: 10, fontSize: 14.5, borderBottom: '1px solid rgba(255,255,255,0.3)', paddingBottom: 4 }}>
            See if we're a fit for your club <Icon.ArrowUR />
          </a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { useReveal, Nav, Hero, Problem, Services, Process, About, Audience });