// Play The Future — studio marketing site. React on window (Babel).
const P = {
  ink: '#07090e', ink2: '#0b0e15', surface: '#11151f', surface2: '#161b27',
  line: '#1d2433', line2: '#2a3346',
  text: '#eaf0f7', muted: '#97a3b6', faint: '#5d6981',
  pink: '#ff2e9a', pinkSoft: '#ff7ac1', teal: '#15d6e8', tealSoft: '#7dedf5',
  duo: 'linear-gradient(100deg,#ff2e9a,#b53cc9 52%,#15d6e8)',
  display: '"Space Grotesk", sans-serif', body: '"DM Sans", sans-serif', mono: '"Space Mono", monospace',
};

// Mono eyebrow
function Eyebrow({ children, color = P.muted, style }) {
  return <div style={{ fontFamily: P.mono, fontSize: 12, letterSpacing: '0.2em',
    textTransform: 'uppercase', color, ...style }}>{children}</div>;
}

// Pure-type wordmark (inline)
function Wordmark({ size = 19 }) {
  return (
    <span style={{ fontFamily: P.display, fontWeight: 700, fontSize: size,
      textTransform: 'uppercase', letterSpacing: '-0.01em', whiteSpace: 'nowrap' }}>
      Play<span style={{ color: P.faint, fontWeight: 500 }}>&nbsp;the&nbsp;</span>
      <span style={{ background: P.duo, WebkitBackgroundClip: 'text', backgroundClip: 'text',
        WebkitTextFillColor: 'transparent' }}>Future</span>
    </span>
  );
}

function Btn({ children, variant = 'duo', onClick, style }) {
  const base = { fontFamily: P.display, fontWeight: 600, fontSize: 15, cursor: 'pointer',
    border: 0, borderRadius: 10, padding: '13px 24px', transition: 'transform .12s, box-shadow .2s, border-color .2s, color .2s' };
  const v = {
    duo: { background: P.duo, color: P.ink, boxShadow: '0 0 26px rgba(255,46,154,.22)' },
    ghost: { background: P.surface, color: P.text, border: `1px solid ${P.line2}` },
    link: { background: 'transparent', color: P.teal, padding: '13px 4px' },
  }[variant];
  return (
    <button onClick={onClick}
      onMouseDown={e => e.currentTarget.style.transform = 'scale(.97)'}
      onMouseUp={e => e.currentTarget.style.transform = 'scale(1)'}
      onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)';
        if (variant === 'ghost') { e.currentTarget.style.borderColor = P.line2; e.currentTarget.style.color = P.text; e.currentTarget.style.boxShadow = 'none'; } }}
      onMouseEnter={e => { if (variant === 'ghost') { e.currentTarget.style.borderColor = P.teal; e.currentTarget.style.color = P.tealSoft; e.currentTarget.style.boxShadow = '0 0 22px rgba(21,214,232,.2)'; } }}
      style={{ ...base, ...v, ...style }}>{children}</button>
  );
}

// Futuristic backdrop: grid + duotone glows
function Backdrop() {
  return (
    <div aria-hidden="true" style={{ position: 'fixed', inset: 0, zIndex: 0, pointerEvents: 'none', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, background:
        'radial-gradient(ellipse 70% 50% at 78% -10%, rgba(255,46,154,.16), transparent),'
        + 'radial-gradient(ellipse 60% 45% at 8% 30%, rgba(21,214,232,.10), transparent)' }} />
      <div style={{ position: 'absolute', inset: 0, opacity: .6, backgroundImage:
        'linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px)',
        backgroundSize: '64px 64px', maskImage: 'radial-gradient(ellipse 100% 80% at 50% 0%, #000, transparent 80%)',
        WebkitMaskImage: 'radial-gradient(ellipse 100% 80% at 50% 0%, #000, transparent 80%)' }} />
    </div>
  );
}

function Nav({ onContact }) {
  const links = [['Work', '#work'], ['Capabilities', '#capabilities'], ['Studio', '#studio'], ['Contact', '#contact']];
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 20, backdropFilter: 'blur(12px)',
      background: 'rgba(7,9,14,.72)', borderBottom: `1px solid ${P.line}` }}>
      <div style={{ maxWidth: 1160, margin: '0 auto', padding: '16px clamp(20px,5vw,48px)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <a href="#top" style={{ textDecoration: 'none', color: P.text }}><Wordmark /></a>
        <nav style={{ display: 'flex', alignItems: 'center', gap: 28 }}>
          <div className="navlinks" style={{ display: 'flex', gap: 26 }}>
            {links.map(([l, h]) => (
              <a key={l} href={h} style={{ fontFamily: P.body, fontWeight: 500, fontSize: 14.5,
                color: P.muted, textDecoration: 'none', transition: 'color .2s' }}
                onMouseOver={e => e.target.style.color = P.text}
                onMouseOut={e => e.target.style.color = P.muted}>{l}</a>
            ))}
          </div>
          <Btn variant="ghost" onClick={onContact} style={{ padding: '10px 18px', fontSize: 14 }}>Start a project</Btn>
        </nav>
      </div>
    </header>
  );
}

function Hero({ onContact, onWork }) {
  return (
    <section id="top" style={{ position: 'relative', maxWidth: 1160, margin: '0 auto',
      padding: 'clamp(48px,8vw,104px) clamp(20px,5vw,48px) 64px' }}>
      <Eyebrow color={P.teal} style={{ marginBottom: 20 }}>// A technology studio for sport</Eyebrow>
      <h1 style={{ fontFamily: P.display, fontWeight: 700, fontSize: 'clamp(2.6rem,6.4vw,5rem)',
        lineHeight: 0.98, letterSpacing: '-0.02em', margin: '0 0 22px', maxWidth: 720 }}>
        We turn fans<br />into <span style={{ background: P.duo, WebkitBackgroundClip: 'text',
          backgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>players.</span>
      </h1>
      <p style={{ fontFamily: P.body, fontSize: 'clamp(1rem,2vw,1.2rem)', color: P.muted,
        lineHeight: 1.55, maxWidth: 520, margin: '0 0 30px' }}>
        Play The Future builds high-velocity mobile products that gamify fandom and put
        supporters at the centre of the game.</p>
      <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
        <Btn variant="duo" onClick={onContact}>Start a project →</Btn>
        <Btn variant="ghost" onClick={onWork}>See our work</Btn>
      </div>
    </section>
  );
}

function Marquee() {
  const items = ['Gamification', 'Fan engagement', 'Live products', 'Mobile-first', 'Design + build', 'Sports'];
  const run = [...items, ...items];
  return (
    <div style={{ position: 'relative', borderTop: `1px solid ${P.line}`, borderBottom: `1px solid ${P.line}`,
      background: P.ink2, overflow: 'hidden', padding: '16px 0' }}>
      <div style={{ display: 'flex', gap: 0, width: 'max-content', animation: 'marquee 26s linear infinite' }}>
        {run.map((it, i) => (
          <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 38, padding: '0 19px',
            fontFamily: P.mono, fontSize: 13, letterSpacing: '0.18em', textTransform: 'uppercase', color: P.muted }}>
            {it}<span style={{ color: P.pink }}>✦</span>
          </span>
        ))}
      </div>
    </div>
  );
}

const CAPS = [
  { n: '01', t: 'Gamification', d: 'Game loops, progression, leaderboards and reward systems that turn watching into playing.' },
  { n: '02', t: 'Fan engagement', d: 'Live, social products that connect supporters to their club and to each other in real time.' },
  { n: '03', t: 'Live products', d: 'Real-time experiences engineered for the 90 minutes — no dead time, no lag, no drop-outs.' },
  { n: '04', t: 'Design + build', d: 'End-to-end: strategy, brand, product design and engineering, shipped at studio pace.' },
];
function Capabilities() {
  return (
    <section id="capabilities" style={{ maxWidth: 1160, margin: '0 auto', padding: 'clamp(56px,8vw,96px) clamp(20px,5vw,48px)' }}>
      <Eyebrow color={P.pink} style={{ marginBottom: 16 }}>// Capabilities</Eyebrow>
      <h2 style={{ fontFamily: P.display, fontWeight: 700, fontSize: 'clamp(1.9rem,4vw,3rem)',
        letterSpacing: '-0.02em', margin: '0 0 44px', maxWidth: 640 }}>
        Everything it takes to build the future of fandom.</h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(240px,1fr))', gap: 16 }}>
        {CAPS.map((c, i) => <CapCard key={i} {...c} />)}
      </div>
    </section>
  );
}
function CapCard({ n, t, d }) {
  const [h, setH] = React.useState(false);
  return (
    <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ position: 'relative', background: P.surface, border: `1px solid ${h ? 'transparent' : P.line}`,
        borderRadius: 14, padding: 24, transition: 'transform .2s', transform: h ? 'translateY(-4px)' : 'none',
        boxShadow: h ? '0 0 30px rgba(255,46,154,.1)' : 'none' }}>
      {h && <div style={{ position: 'absolute', inset: 0, borderRadius: 14, padding: 1, background: P.duo,
        WebkitMask: 'linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)',
        WebkitMaskComposite: 'xor', maskComposite: 'exclude', pointerEvents: 'none' }} />}
      <div style={{ fontFamily: P.mono, fontSize: 13, color: P.faint, marginBottom: 36 }}>{n}</div>
      <h3 style={{ fontFamily: P.display, fontWeight: 600, fontSize: '1.35rem', letterSpacing: '-0.01em', margin: '0 0 10px' }}>{t}</h3>
      <p style={{ fontFamily: P.body, fontSize: 14.5, color: P.muted, lineHeight: 1.55, margin: 0 }}>{d}</p>
    </div>
  );
}

const SHOTS = ['home.png', 'timeline_scoring.png', 'takes_make.png', 'club_leaderboards.png', 'podium_win.png'];
const RIVAL_URL = 'https://playrival.app';
const CONTACT_EMAIL = 'rob@playthefuture.uk';
function Work({ onOpenRival }) {
  const [active, setActive] = React.useState(0);
  return (
    <section id="work" style={{ background: P.ink2, borderTop: `1px solid ${P.line}`, borderBottom: `1px solid ${P.line}` }}>
      <div style={{ maxWidth: 1160, margin: '0 auto', padding: 'clamp(56px,8vw,96px) clamp(20px,5vw,48px)' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 40, gap: 20, flexWrap: 'wrap' }}>
          <div>
            <Eyebrow color={P.teal} style={{ marginBottom: 16 }}>// Flagship work</Eyebrow>
            <h2 style={{ fontFamily: P.display, fontWeight: 700, fontSize: 'clamp(2.4rem,5vw,3.6rem)',
              letterSpacing: '-0.02em', margin: '0 0 8px' }}>RIVAL</h2>
            <p style={{ fontFamily: P.display, fontWeight: 600, fontSize: 'clamp(1.1rem,2.2vw,1.45rem)',
              letterSpacing: '-0.01em', color: P.text, margin: 0 }}>Step out of the stands.</p>
          </div>
          <p style={{ fontFamily: P.body, fontSize: 16, color: P.muted, lineHeight: 1.55, maxWidth: 420, margin: 0 }}>
            RIVAL turns every football match into a game you compete in. Strategy, brand, product, and
            engineering — built end-to-end at Play The Future.</p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, alignItems: 'center' }}>
          <div style={{ position: 'relative', display: 'flex', justifyContent: 'center', minHeight: 480 }}>
            <div style={{ position: 'absolute', top: '46%', width: 300, height: 300, borderRadius: '50%', transform: 'translateY(-50%)',
              background: 'radial-gradient(circle, rgba(21,214,232,.16), rgba(255,46,154,.10), transparent 66%)', filter: 'blur(14px)' }} />
            <img key={active} src={`assets/app_screenshots/${SHOTS[active]}`} alt="RIVAL screen"
              style={{ position: 'relative', maxHeight: 480, maxWidth: '100%', objectFit: 'contain',
                filter: 'drop-shadow(0 26px 60px rgba(0,0,0,.5))', animation: 'fadeIn .4s ease' }} />
          </div>
          <div>
            <p style={{ fontFamily: P.body, fontSize: 16, color: P.muted, lineHeight: 1.6, margin: '0 0 14px' }}>
              Every match is an arena. Don't just read up on your club's next game — play it. You're a player,
              not a spectator.</p>
            <p style={{ fontFamily: P.body, fontSize: 15, color: P.faint, lineHeight: 1.55, margin: '0 0 22px' }}>
              The game begins at World Cup 2026. Early access is open now — get in before your rivals.</p>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 22 }}>
              {['The Timeline', 'Make your takes', 'Club standings', 'Match leaderboard'].map(t => (
                <span key={t} style={{ fontFamily: P.mono, fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase',
                  color: P.muted, border: `1px solid ${P.line2}`, borderRadius: 999, padding: '6px 12px' }}>{t}</span>
              ))}
            </div>
            <div style={{ display: 'flex', gap: 28, marginBottom: 26 }}>
              {[['2026', 'World Cup · Season 1'], ['Arena', 'every match'], ['Early', 'access open']].map(([v, l]) => (
                <div key={l}>
                  <div style={{ fontFamily: P.display, fontWeight: 700, fontSize: 30, background: P.duo,
                    WebkitBackgroundClip: 'text', backgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>{v}</div>
                  <div style={{ fontFamily: P.body, fontSize: 13, color: P.faint, marginTop: 2 }}>{l}</div>
                </div>
              ))}
            </div>
            <div style={{ display: 'flex', gap: 8, marginBottom: 26 }}>
              {SHOTS.map((s, i) => (
                <button key={s} onClick={() => setActive(i)} aria-label={`Screen ${i + 1}`} style={{
                  width: 46, aspectRatio: '9/17', borderRadius: 9, overflow: 'hidden', cursor: 'pointer', padding: 0,
                  border: `1.5px solid ${i === active ? P.teal : 'transparent'}`,
                  backgroundImage: `url(assets/app_screenshots/${s})`, backgroundSize: 'contain', backgroundPosition: 'center', backgroundRepeat: 'no-repeat', backgroundColor: P.surface2,
                  opacity: i === active ? 1 : .5, transition: 'opacity .2s, border-color .2s' }} />
              ))}
            </div>
            <Btn variant="duo" onClick={onOpenRival}>Get early access →</Btn>
          </div>
        </div>
      </div>
    </section>
  );
}

function Velocity() {
  const stats = [['High', 'velocity'], ['High', 'quality'], ['End-to-end', 'studio'], ['Sport', 'native']];
  return (
    <section id="studio" style={{ maxWidth: 1160, margin: '0 auto', padding: 'clamp(56px,8vw,96px) clamp(20px,5vw,48px)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '.9fr 1.1fr', gap: 48, alignItems: 'center' }}>
        <div>
          <Eyebrow color={P.pink} style={{ marginBottom: 16 }}>// The studio</Eyebrow>
          <h2 style={{ fontFamily: P.display, fontWeight: 700, fontSize: 'clamp(1.9rem,4vw,3rem)',
            letterSpacing: '-0.02em', margin: '0 0 18px' }}>Built for pace,<br />wired for sport.</h2>
          <p style={{ fontFamily: P.body, fontSize: 16.5, color: P.muted, lineHeight: 1.6, margin: 0, maxWidth: 440 }}>
            We're a small, senior team that ships fast without cutting corners. We know the rhythm of a
            matchday, and we build products that live inside it.</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          {stats.map(([a, b], i) => (
            <div key={i} style={{ background: P.surface, border: `1px solid ${P.line}`, borderRadius: 14, padding: '26px 22px' }}>
              <div style={{ fontFamily: P.display, fontWeight: 700, fontSize: 26, letterSpacing: '-0.01em' }}>{a}</div>
              <div style={{ fontFamily: P.mono, fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase',
                color: i % 2 ? P.teal : P.pink, marginTop: 6 }}>{b}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Contact({ refEl }) {
  const [sent, setSent] = React.useState(false);
  return (
    <section id="contact" ref={refEl} style={{ maxWidth: 1160, margin: '0 auto', padding: 'clamp(40px,6vw,80px) clamp(20px,5vw,48px) 90px' }}>
      <div style={{ position: 'relative', borderRadius: 20, overflow: 'hidden',
        background: 'radial-gradient(120% 140% at 0% 0%, rgba(255,46,154,.14), transparent 55%), radial-gradient(120% 140% at 100% 100%, rgba(21,214,232,.12), transparent 55%), #11151f',
        border: `1px solid ${P.line2}`, padding: 'clamp(32px,5vw,60px)', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 44, alignItems: 'center' }}>
        <div>
          <Eyebrow color={P.teal} style={{ marginBottom: 16 }}>// Start a project</Eyebrow>
          <h2 style={{ fontFamily: P.display, fontWeight: 700, fontSize: 'clamp(2rem,4.5vw,3.2rem)',
            letterSpacing: '-0.02em', margin: '0 0 14px' }}>Let's build<br />something fast.</h2>
          <p style={{ fontFamily: P.body, fontSize: 16, color: P.muted, lineHeight: 1.55, margin: '0 0 16px', maxWidth: 360 }}>
            Tell us about the product you want to put in your fans' hands.</p>
          <a href={`mailto:${CONTACT_EMAIL}`} style={{ fontFamily: P.mono, fontSize: 14, letterSpacing: '0.04em',
            color: P.teal, textDecoration: 'none' }}
            onMouseOver={e => e.target.style.color = P.tealSoft} onMouseOut={e => e.target.style.color = P.teal}>
            {CONTACT_EMAIL}</a>
        </div>
        <div>
          {sent ? (
            <div style={{ border: '1px solid rgba(21,214,232,.4)', background: 'rgba(21,214,232,.07)',
              borderRadius: 12, padding: '22px 24px', fontFamily: P.body, color: P.tealSoft, fontWeight: 600 }}>
              Thanks — we'll be in touch within a day.</div>
          ) : (
            <form onSubmit={e => {
              e.preventDefault();
              const f = e.target;
              const name = f.name.value.trim();
              const from = f.email.value.trim();
              const message = f.message.value.trim();
              const subject = encodeURIComponent(`Project enquiry from ${name}`);
              const body = encodeURIComponent(`Name: ${name}\nEmail: ${from}\n\n${message}`);
              window.location.href = `mailto:${CONTACT_EMAIL}?subject=${subject}&body=${body}`;
              setSent(true);
            }} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <input name="name" required type="text" placeholder="Name" style={fieldStyle()} />
              <input name="email" required type="email" placeholder="Email" style={fieldStyle()} />
              <textarea name="message" required rows={3} placeholder="What are you building?"
                style={{ ...fieldStyle(), resize: 'vertical', fontFamily: P.body }} />
              <Btn variant="duo" style={{ marginTop: 4 }}>Send it →</Btn>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}
function fieldStyle() {
  return { background: P.surface2, border: `1px solid ${P.line2}`, borderRadius: 10, padding: '13px 15px',
    color: P.text, fontFamily: P.body, fontSize: 15, outline: 'none', width: '100%', boxSizing: 'border-box' };
}

function Footer() {
  const cols = [
    ['Studio', [['Work', '#work'], ['Capabilities', '#capabilities'], ['About', '#studio'], ['Contact', '#contact']]],
    ['RIVAL', [
      ['Get early access', RIVAL_URL],
      ['Our Story', `${RIVAL_URL}/manifesto/`],
      ['RIVAL Elite', `${RIVAL_URL}/elite/`],
      ['Privacy', `${RIVAL_URL}/privacy`],
      ['Terms', `${RIVAL_URL}/terms`],
      ['Conduct', `${RIVAL_URL}/code-of-conduct/`],
    ]],
  ];
  return (
    <footer style={{ background: P.ink2, borderTop: `1px solid ${P.line}` }}>
      <div style={{ maxWidth: 1160, margin: '0 auto', padding: '52px clamp(20px,5vw,48px) 40px',
        display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr', gap: 32 }}>
        <div>
          <Wordmark size={22} />
          <p style={{ fontFamily: P.body, fontSize: 14, color: P.faint, lineHeight: 1.55, margin: '14px 0 0', maxWidth: 260 }}>
            A technology studio specialising in mobile gamification and fan engagement for sport.</p>
        </div>
        {cols.map(([h, items]) => (
          <div key={h}>
            <div style={{ fontFamily: P.mono, fontSize: 11.5, letterSpacing: '0.2em', textTransform: 'uppercase', color: P.muted, marginBottom: 14 }}>{h}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
              {items.map(([l, href]) => {
                const ext = href.startsWith('http');
                return <a key={l} href={href} {...(ext ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
                  style={{ fontFamily: P.body, fontSize: 14, color: P.faint, textDecoration: 'none' }}
                  onMouseOver={e => e.target.style.color = P.text} onMouseOut={e => e.target.style.color = P.faint}>{l}</a>;
              })}
            </div>
          </div>
        ))}
      </div>
      <div style={{ borderTop: `1px solid ${P.line}`, padding: '18px clamp(20px,5vw,48px)', maxWidth: 1160, margin: '0 auto',
        display: 'flex', justifyContent: 'space-between', fontFamily: P.mono, fontSize: 11.5, color: P.faint, letterSpacing: '0.06em' }}>
        <span>© Play The Future Ltd</span>
        <a href={`mailto:${CONTACT_EMAIL}`} style={{ color: P.faint, textDecoration: 'none' }}
          onMouseOver={e => e.target.style.color = P.teal} onMouseOut={e => e.target.style.color = P.faint}>{CONTACT_EMAIL}</a>
      </div>
    </footer>
  );
}

Object.assign(window, { P, Eyebrow, Wordmark, Btn, Backdrop, Nav, Hero, Marquee, Capabilities, Work, Velocity, Contact, Footer });