// About / Manifesto page

const AboutPage = ({ accent, setRoute }) => {
  const accentColor = accent === 'red' ? 'var(--uwr-red)' : 'var(--uwr-cyan)';
  return (
    <>
      <section style={{ position: 'relative', minHeight: '90vh', overflow: 'hidden' }}>
        <UnderwaterPlaceholder
          src="uploads/bg2.png"
          intensity={1}
          style={{ position: 'absolute', inset: 0 }}
        />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(5,8,10,0.5) 0%, rgba(5,8,10,0.2) 50%, rgba(5,8,10,0.95) 100%)' }} />
        <div style={{ position: 'relative', padding: '120px 32px', maxWidth: 1100 }}>
          <MonoTag color={accentColor}>// MANIFESTO · 01</MonoTag>
          <h1 className="uwr-head" style={{
            fontSize: 'clamp(32px, 4.5vw, 72px)',
            margin: '20px 0 0', textWrap: 'balance', lineHeight: 0.92,
          }}>
            UNDERWATER RUGBY IS<br />
            NOT A SPORT.<br />
            IT IS PRESSURE,<br />
            CONTACT, SILENCE,<br />
            <span style={{ color: accentColor }}>AND CONTROL.</span>
          </h1>
        </div>
      </section>

      <section style={{ padding: '100px 32px', borderTop: '1px solid var(--uwr-line)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.5fr)', gap: 80, maxWidth: 1200 }}>
          <div>
            <MonoTag color={accentColor}>// ABOUT</MonoTag>
            <h3 className="uwr-head" style={{ fontSize: 'clamp(32px, 5vw, 64px)', margin: '14px 0 0', lineHeight: 0.95 }}>
              FOR THE LEAGUE.<br />BY THE LEAGUE.
            </h3>
          </div>
          <div style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--uwr-off-dim)' }}>
            <p style={{ margin: '0 0 20px' }}>
              UWR/SHOP is the apparel project of the Auckland Underwater Rugby crew. Cut by players, for players.
              No marketing fluff. No tropical colorways. Heavy cotton, athletic cuts, the depth of the league
              printed in tall caps.
            </p>
            <p style={{ margin: 0 }}>
              Drop 01 — Below Zero — was designed poolside in Auckland and tournament-tested from Sydney to Singapore.
              Each piece went through match play before it shipped. Nothing here is for the beach.
            </p>
          </div>
        </div>
      </section>

      <section style={{ padding: '100px 32px', borderTop: '1px solid var(--uwr-line)', background: 'var(--uwr-ocean)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 24, maxWidth: 1200 }}>
          {[
            { n: 'NZ', label: 'HOME BASE', sub: 'AUCKLAND · SYDNEY · SINGAPORE' },
            { n: '15+', label: 'YEARS ACTIVE', sub: 'AUWR SINCE 2010' },
            { n: '06', label: 'PIECES IN DROP', sub: 'SUMMER 2026' },
            { n: '240+', label: 'GSM MIN', sub: 'HEAVY COTTON ONLY' },
          ].map((s) => (
            <div key={s.label} style={{ borderTop: `1px solid ${accentColor}`, paddingTop: 16 }}>
              <div className="uwr-head" style={{ fontSize: 56, lineHeight: 0.95, color: 'var(--uwr-off)' }}>{s.n}</div>
              <div className="uwr-mono" style={{ color: 'var(--uwr-off)', marginTop: 12 }}>{s.label}</div>
              <div className="uwr-mono" style={{ color: 'var(--uwr-off-dim)', marginTop: 4 }}>{s.sub}</div>
            </div>
          ))}
        </div>
      </section>

      <section style={{ padding: '120px 32px', textAlign: 'center', borderTop: '1px solid var(--uwr-line)' }}>
        <h3 className="uwr-head" style={{ fontSize: 'clamp(40px, 7vw, 96px)', margin: 0, lineHeight: 0.95 }}>
          GET IN. GET DEEP.
        </h3>
        <div style={{ marginTop: 32 }}>
          <button onClick={() => setRoute({ name: 'shop' })} className="uwr-btn">
            SHOP DROP 01 <Arrow />
          </button>
        </div>
      </section>

      <Footer accent={accent} />
    </>
  );
};

Object.assign(window, { AboutPage });