// Crease website — bottom sections: live demo, roles, pricing, FAQ, footer

const { useState: useBSt } = React;

// ─────────────────────────────────────────────────────────────
// LIVE — full-width interactive showcase with both phones
// ─────────────────────────────────────────────────────────────
const LiveShowcase = () => (
  <section id="live" className="site-section-pad" style={{ padding: '100px 28px', background: SITE.surface, borderTop: `1px solid ${SITE.border}`, borderBottom: `1px solid ${SITE.border}` }}>
    <div style={{ maxWidth: 1200, margin: '0 auto' }}>
      <SectionHeader
        eyebrow="Try it live"
        title="A real prototype. In your browser. Right now."
        sub="Tap any tab on either phone. iOS and Android run the same code through the same backend — pick the one you carry."
      />

      <div style={{ display: 'flex', gap: 60, justifyContent: 'center', marginTop: 64, flexWrap: 'wrap' }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 }}>
          <div style={{ color: SITE.player, fontSize: 11, fontWeight: 800, letterSpacing: '0.18em', textTransform: 'uppercase' }}>iOS</div>
          <div style={{ filter: `drop-shadow(0 30px 60px ${SITE.player}33)` }}>
            <IOSDevice width={300} height={620} dark={true}>
              <div style={{ position: 'relative', width: '100%', height: '100%' }}>
                <LiveMobileDemo platform="ios" />
              </div>
            </IOSDevice>
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 }}>
          <div style={{ color: SITE.admin, fontSize: 11, fontWeight: 800, letterSpacing: '0.18em', textTransform: 'uppercase' }}>Android</div>
          <div style={{ filter: `drop-shadow(0 30px 60px ${SITE.admin}33)` }}>
            <AndroidDevice width={300} height={650} dark={true}>
              <div style={{ position: 'relative', width: '100%', height: '100%' }}>
                <LiveMobileDemo platform="android" />
              </div>
            </AndroidDevice>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ─────────────────────────────────────────────────────────────
// SIGNATURE SPOTLIGHT — After-match report + @crease bot
// Two-column feature highlight with mini mocks; the visual hook of the page.
// ─────────────────────────────────────────────────────────────
const SignatureSection = () => (
  <section id="signature" className="site-section-pad" style={{ padding: '100px 28px', background: SITE.surface, borderTop: `1px solid ${SITE.border}`, borderBottom: `1px solid ${SITE.border}` }}>
    <div style={{ maxWidth: 1200, margin: '0 auto' }}>
      <SectionHeader
        eyebrow="Signature features"
        title="Two things you won't find anywhere else."
        sub="The bits we built because no other cricket app did them properly."
      />

      <div className="site-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginTop: 64 }}>
        {/* After-match report */}
        <div className="site-card-hover" style={{
          background: SITE.bg, border: `1px solid ${SITE.border}`,
          borderRadius: 24, padding: 32, position: 'relative', overflow: 'hidden',
        }}>
          {/* Accent corner glow */}
          <div style={{ position: 'absolute', top: -60, right: -60, width: 200, height: 200, borderRadius: '50%', background: 'radial-gradient(circle, rgba(34,197,94,0.18), transparent 70%)', pointerEvents: 'none' }} />

          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
            <div style={{
              width: 44, height: 44, borderRadius: 12,
              background: 'rgba(34,197,94,0.18)', color: COLORS.accent,
              border: `1px solid rgba(34,197,94,0.45)`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <SiteIcon name="post" size={20} />
            </div>
            <div style={{
              padding: '3px 10px', borderRadius: 6,
              background: 'rgba(34,197,94,0.16)', color: COLORS.accent,
              fontSize: 10, fontWeight: 800, letterSpacing: 0.4, textTransform: 'uppercase',
            }}>New</div>
          </div>

          <h3 style={{ margin: 0, color: 'white', fontSize: 28, fontWeight: 800, letterSpacing: -0.6, lineHeight: 1.15 }}>
            After match reports{' '}
            <span style={{
              background: 'linear-gradient(135deg, #22C55E, #14B8A6)',
              WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
            }}>draft themselves.</span>
          </h3>
          <p style={{ color: SITE.textDim, fontSize: 15, lineHeight: 1.6, marginTop: 14, marginBottom: 22 }}>
            Stumps drawn? Crease pulls the scorecard, partnerships and milestones into a publishable report. Captains tweak a line, hit publish, the squad gets a push notification. POTM voting opens automatically.
          </p>

          {/* Mini mock */}
          <div style={{
            background: COLORS.surface, border: `1px solid ${COLORS.border}`,
            borderRadius: 14, padding: 16, position: 'relative',
          }}>
            <div style={{
              position: 'absolute', top: 14, right: 14,
              display: 'inline-flex', alignItems: 'center', gap: 4,
              padding: '3px 8px', borderRadius: 6,
              background: 'rgba(34,197,94,0.18)', color: COLORS.accent,
              fontSize: 9, fontWeight: 800, letterSpacing: 0.4, textTransform: 'uppercase',
            }}>
              <SiteIcon name="check" size={10} stroke={3} /> Auto drafted
            </div>
            <div style={{ display: 'flex', gap: 6, marginBottom: 10 }}>
              <MBadge tone="accent">Match report</MBadge>
            </div>
            <div style={{ color: 'white', fontSize: 16, fontWeight: 800 }}>Riverside cruise past St Mary's</div>
            <div style={{ color: COLORS.textMuted, fontSize: 11, marginTop: 4 }}>Sun 10 May · Won by 34 runs</div>

            <div style={{ marginTop: 14, padding: 12, background: COLORS.surfaceAlt, borderRadius: 10 }}>
              {[
                { team: 'Riverside CC',  score: '186/4', over: '(20)' },
                { team: "St Mary's",     score: '152',   over: '(19.2)', dim: true },
              ].map((r, i) => (
                <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: i ? '6px 0 0' : '0' }}>
                  <span style={{ color: r.dim ? COLORS.textSecondary : 'white', fontSize: 12, fontWeight: 600 }}>{r.team}</span>
                  <span style={{ color: r.dim ? COLORS.textSecondary : 'white', fontSize: 14, fontWeight: 800, fontVariantNumeric: 'tabular-nums' }}>
                    {r.score} <span style={{ color: COLORS.textMuted, fontSize: 11, fontWeight: 600 }}>{r.over}</span>
                  </span>
                </div>
              ))}
            </div>

            <div style={{ color: COLORS.textSecondary, fontSize: 12, lineHeight: 1.6, marginTop: 12 }}>
              A composed <b style={{ color: 'white' }}>81 off 62</b> from the skipper set the platform; Rav's <b style={{ color: 'white' }}>4-for</b> sealed it.
            </div>

            <div style={{ marginTop: 14, padding: 10, borderRadius: 10, background: 'rgba(245,158,11,0.10)', border: '1px solid rgba(245,158,11,0.3)', display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ color: COLORS.amber }}><SiteIcon name="trophy" size={14} /></span>
              <div style={{ flex: 1 }}>
                <div style={{ color: COLORS.amber, fontSize: 9, fontWeight: 800, letterSpacing: 0.4, textTransform: 'uppercase' }}>POTM vote open</div>
                <div style={{ color: 'white', fontSize: 12, fontWeight: 700, marginTop: 2 }}>3 nominees · 6 votes in</div>
              </div>
            </div>
          </div>

          {/* Bullet row */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, marginTop: 20 }}>
            {[
              { v: '30s', l: 'to publish' },
              { v: 'Auto',l: 'POTM nominees' },
              { v: 'Push',l: 'to whole club' },
            ].map(s => (
              <div key={s.l} style={{ background: 'transparent', borderTop: `1px solid ${SITE.border}`, paddingTop: 12 }}>
                <div style={{ color: 'white', fontSize: 18, fontWeight: 800 }}>{s.v}</div>
                <div style={{ color: SITE.textMuted, fontSize: 11, marginTop: 2 }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>

        {/* @crease bot */}
        <div className="site-card-hover" style={{
          background: SITE.bg, border: `1px solid ${SITE.border}`,
          borderRadius: 24, padding: 32, position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ position: 'absolute', top: -60, right: -60, width: 200, height: 200, borderRadius: '50%', background: 'radial-gradient(circle, rgba(56,189,248,0.18), transparent 70%)', pointerEvents: 'none' }} />

          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
            <div style={{
              width: 44, height: 44, borderRadius: 12,
              background: `linear-gradient(135deg, ${SITE.accent}, ${SITE.player})`,
              color: '#0B1220',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 20, fontWeight: 900,
            }}>@</div>
            <div style={{
              padding: '3px 10px', borderRadius: 6,
              background: 'rgba(56,189,248,0.16)', color: SITE.player,
              fontSize: 10, fontWeight: 800, letterSpacing: 0.4, textTransform: 'uppercase',
            }}>Beta</div>
          </div>

          <h3 style={{ margin: 0, color: 'white', fontSize: 28, fontWeight: 800, letterSpacing: -0.6, lineHeight: 1.15 }}>
            Meet{' '}
            <span style={{
              background: `linear-gradient(135deg, ${SITE.accent}, ${SITE.player})`,
              WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
            }}>@crease</span>{' '}
            — your club's assistant.
          </h3>
          <p style={{ color: SITE.textDim, fontSize: 15, lineHeight: 1.6, marginTop: 14, marginBottom: 22 }}>
            Type <code style={{ background: SITE.surfaceAlt, padding: '2px 6px', borderRadius: 4, color: SITE.accent, fontFamily: "'JetBrains Mono', monospace", fontSize: 13 }}>@crease</code> in any chat. Ask about availability, fixtures, form, selection options, kit orders — get a real answer with action buttons, not a menu to dig through.
          </p>

          {/* Sample exchange */}
          <div style={{
            background: COLORS.surface, border: `1px solid ${COLORS.border}`,
            borderRadius: 14, padding: 16, display: 'flex', flexDirection: 'column', gap: 8,
          }}>
            {/* User */}
            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
              <div style={{
                maxWidth: '78%', padding: '8px 12px', borderRadius: 14, borderTopRightRadius: 4,
                background: SITE.player, color: '#0B1220',
                fontSize: 13, fontWeight: 600,
              }}>@crease pick my best XI for Sat</div>
            </div>
            {/* Bot */}
            <div style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
              <div style={{
                width: 26, height: 26, borderRadius: 999, flexShrink: 0,
                background: `linear-gradient(135deg, ${SITE.accent}, ${SITE.player})`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: '#0B1220', fontWeight: 900, fontSize: 12,
              }}>@</div>
              <div style={{
                flex: 1, padding: '10px 12px', borderRadius: 14, borderTopLeftRadius: 4,
                background: COLORS.surfaceAlt, color: 'white',
                fontSize: 13, lineHeight: 1.55, border: `1px solid ${COLORS.border}`,
              }}>
                Based on availability + last-3 form, your best XI is:
                <div style={{ marginTop: 8, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 4, fontSize: 11 }}>
                  {SQUAD.slice(0, 11).map((p, i) => (
                    <div key={p.id} style={{ display: 'flex', alignItems: 'center', gap: 6, color: COLORS.textSecondary }}>
                      <span style={{ width: 14, color: COLORS.textMuted, fontVariantNumeric: 'tabular-nums', fontSize: 10 }}>{i + 1}.</span>
                      <span>{p.name}</span>
                      {p.role === 'Captain' && <MBadge tone="accent">C</MBadge>}
                      {p.role === 'Vice-capt' && <MBadge tone="sky">VC</MBadge>}
                    </div>
                  ))}
                </div>
                <div style={{ marginTop: 10, display: 'flex', gap: 6 }}>
                  <button style={{
                    padding: '6px 12px', borderRadius: 8, border: 'none',
                    background: SITE.accent, color: SITE.accentInk,
                    fontSize: 11, fontWeight: 800, fontFamily: SITE_FONT, cursor: 'pointer',
                  }}>Lock as draft XI</button>
                  <button style={{
                    padding: '6px 12px', borderRadius: 8,
                    background: 'transparent', color: 'white', border: `1px solid ${COLORS.border}`,
                    fontSize: 11, fontWeight: 600, fontFamily: SITE_FONT, cursor: 'pointer',
                  }}>Show alternative</button>
                </div>
              </div>
            </div>
          </div>

          {/* Try-it suggestions */}
          <div style={{ marginTop: 20 }}>
            <div style={{ color: SITE.textMuted, fontSize: 10, fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase', marginBottom: 8 }}>Try saying</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
              {[
                '@crease who hasn\'t replied to Sat?',
                '@crease draft a kit-order post',
                '@crease show Asha\'s last 5 innings',
                '@crease set up nets for Thursday',
                '@crease who\'s POTM leader?',
              ].map(s => (
                <span key={s} style={{
                  padding: '5px 10px', borderRadius: 999,
                  background: SITE.surfaceAlt, border: `1px solid ${SITE.border}`,
                  color: SITE.textDim, fontSize: 11, fontWeight: 500,
                }}>{s}</span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ─────────────────────────────────────────────────────────────
// LIVE SCORING — special spotlight section
// ─────────────────────────────────────────────────────────────
const LiveScoringSpotlight = () => (
  <section style={{ padding: '100px 28px', position: 'relative', overflow: 'hidden' }}>
    {/* glow behind */}
    <div style={{
      position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
      width: 800, height: 400, borderRadius: '50%',
      background: 'radial-gradient(ellipse, rgba(34,197,94,0.12) 0%, transparent 65%)',
      pointerEvents: 'none', filter: 'blur(40px)',
    }} />
    <div style={{ maxWidth: 1100, margin: '0 auto', position: 'relative' }}>
      <div className="site-scoring-grid" style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 60, alignItems: 'center' }}>
        <div>
          <div style={{ color: COLORS.danger, fontSize: 12, fontWeight: 800, letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 14, display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            <span className="site-blink" style={{ width: 7, height: 7, borderRadius: 999, background: COLORS.danger }} />
            Live · ball by ball
          </div>
          <h2 style={{ margin: 0, color: 'white', fontSize: 44, fontWeight: 900, letterSpacing: -1.2, lineHeight: 1.05 }}>
            Score on the field.<br />
            Stats roll up{' '}
            <span style={{
              background: 'linear-gradient(135deg, #22C55E, #14B8A6)',
              WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
            }}>automatically.</span>
          </h2>
          <p style={{ color: SITE.textDim, fontSize: 17, lineHeight: 1.6, marginTop: 20, maxWidth: 480 }}>
            No bookkeeping after stumps. Score each ball as it's bowled — wides, no-balls, byes, wickets, dismissal types — and your fans get live push updates while batters' averages update in real time.
          </p>

          <div style={{ display: 'grid', gap: 14, marginTop: 28 }}>
            {[
              { v: 'Full Laws coverage', d: 'Extras, dismissals, overs, partnerships — modelled to MCC Laws.' },
              { v: 'Push to topic subscribers', d: 'Fans who subscribed to the match get every wicket and boundary push notified.' },
              { v: 'Auto stats', d: 'Strike rate, economy, averages — auto computed from the ball log. Zero data entry.' },
            ].map((row, i) => (
              <div key={i} style={{ display: 'flex', gap: 12 }}>
                <div style={{
                  width: 22, height: 22, flexShrink: 0, borderRadius: 6,
                  background: 'rgba(34,197,94,0.18)', color: SITE.accent,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <SiteIcon name="check" size={14} stroke={3} />
                </div>
                <div>
                  <div style={{ color: 'white', fontSize: 14, fontWeight: 700 }}>{row.v}</div>
                  <div style={{ color: SITE.textDim, fontSize: 13, lineHeight: 1.5, marginTop: 2 }}>{row.d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Scoring interface mock */}
        <div style={{ filter: 'drop-shadow(0 24px 60px rgba(34,197,94,0.18))' }}>
          <ScoringUI />
        </div>
      </div>
    </div>
  </section>
);

const ScoringUI = () => (
  <div style={{ background: COLORS.surface, border: `1px solid ${COLORS.border}`, borderRadius: 24, padding: 24, fontFamily: SITE_FONT, color: 'white' }}>
    {/* Big scoreboard */}
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 22 }}>
      <div>
        <div style={{ color: COLORS.textMuted, fontSize: 11, fontWeight: 800, letterSpacing: 1, textTransform: 'uppercase' }}>Riverside CC</div>
        <div style={{ color: 'white', fontSize: 56, fontWeight: 900, fontVariantNumeric: 'tabular-nums', lineHeight: 1, marginTop: 4 }}>
          124<span style={{ color: COLORS.textSecondary, fontSize: 30 }}>/3</span>
        </div>
        <div style={{ color: COLORS.textMuted, fontSize: 13, marginTop: 6 }}>18.2 overs · CRR 6.78</div>
      </div>
      <div style={{ textAlign: 'right' }}>
        <div style={{ color: COLORS.textMuted, fontSize: 11 }}>Need</div>
        <div style={{ color: COLORS.accent, fontSize: 20, fontWeight: 800 }}>43 in 10 overs</div>
      </div>
    </div>

    {/* This over */}
    <div style={{ marginBottom: 18 }}>
      <div style={{ color: COLORS.textMuted, fontSize: 10, fontWeight: 700, letterSpacing: 0.5, textTransform: 'uppercase', marginBottom: 8 }}>This over</div>
      <div style={{ display: 'flex', gap: 6 }}>
        {['1', '4', 'W', '·', '2', null].map((b, i) => (
          <div key={i} style={{
            width: 36, height: 36, borderRadius: 999,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            background: b ? COLORS.surfaceAlt : 'transparent',
            border: `1.5px solid ${b === 'W' ? COLORS.danger : b === '4' || b === '6' ? COLORS.accent : b ? COLORS.border : COLORS.borderStrong}`,
            color: b === 'W' ? COLORS.danger : b === '4' || b === '6' ? COLORS.accent : 'white',
            fontSize: 14, fontWeight: 800,
            borderStyle: b ? 'solid' : 'dashed',
          }}>{b}</div>
        ))}
      </div>
    </div>

    {/* Scoring keypad */}
    <div style={{ marginBottom: 18 }}>
      <div style={{ color: COLORS.textMuted, fontSize: 10, fontWeight: 700, letterSpacing: 0.5, textTransform: 'uppercase', marginBottom: 8 }}>Next ball</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
        {[
          { l: '·', c: COLORS.textSecondary }, { l: '1' }, { l: '2' }, { l: '3' },
          { l: '4', c: COLORS.accent }, { l: '6', c: COLORS.accent }, { l: 'WD', c: COLORS.amber }, { l: 'NB', c: COLORS.amber },
        ].map(k => (
          <div key={k.l} className="crease-press" style={{
            padding: '14px 0', textAlign: 'center',
            background: COLORS.surfaceAlt, border: `1px solid ${COLORS.border}`,
            borderRadius: 10, color: k.c || 'white', fontSize: 16, fontWeight: 800,
            cursor: 'pointer',
          }}>{k.l}</div>
        ))}
      </div>
      <div className="crease-press" style={{
        marginTop: 8, padding: 14, textAlign: 'center', borderRadius: 10,
        background: 'rgba(239,68,68,0.12)', border: '1px solid rgba(239,68,68,0.5)',
        color: COLORS.danger, fontSize: 14, fontWeight: 800, letterSpacing: 0.5, textTransform: 'uppercase',
        cursor: 'pointer',
      }}>+ Wicket</div>
    </div>

    {/* Batters */}
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8, paddingTop: 18, borderTop: `1px solid ${COLORS.border}` }}>
      {[
        { name: 'A Patel*', r: 62, b: 48, sr: 129.2 },
        { name: 'T Whitfield', r: 24, b: 19, sr: 126.3 },
      ].map(p => (
        <div key={p.name} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <MAvatar initials={p.name.split(' ').map(n => n[0]).join('')} size={28} tone="slate" />
          <div style={{ flex: 1 }}>
            <div style={{ color: 'white', fontSize: 13, fontWeight: 600 }}>{p.name}</div>
            <div style={{ color: COLORS.textMuted, fontSize: 11 }}>SR {p.sr}</div>
          </div>
          <div style={{ color: 'white', fontSize: 16, fontWeight: 800, fontVariantNumeric: 'tabular-nums' }}>{p.r} <span style={{ color: COLORS.textMuted, fontSize: 12, fontWeight: 600 }}>({p.b})</span></div>
        </div>
      ))}
    </div>
  </div>
);

// ─────────────────────────────────────────────────────────────
// ROLES matrix
// ─────────────────────────────────────────────────────────────
const RolesSection = () => {
  const roles = [
    { id: 'fan',    color: '#22C55E', name: 'Fan',         desc: 'Following the club',         tabs: ['Feed', 'Fixtures', 'Live', 'Chat', 'Profile'] },
    { id: 'player', color: '#38BDF8', name: 'Player',      desc: 'In the squad',               tabs: ['Feed', 'Fixtures', 'Chat', 'Averages', 'Profile'] },
    { id: 'admin',  color: '#F59E0B', name: 'Coach / Admin', desc: 'Running the club',         tabs: ['Dashboard', 'Fixtures', 'Training', 'Teams', 'Stats', 'Scoring', 'Chat', '+ more'] },
  ];
  return (
    <section id="roles" className="site-section-pad" style={{ padding: '100px 28px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <SectionHeader
          eyebrow="Built around roles"
          title="One app. Three apps inside it."
          sub="Crease adapts the navigation, the data, and the permissions to who's signed in. No clutter, no confusion."
        />

        <div className="site-3col" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, marginTop: 56 }}>
          {roles.map(r => (
            <div key={r.id} className="site-card-hover" style={{
              background: SITE.surface, border: `1px solid ${SITE.border}`,
              borderRadius: 20, padding: 28, position: 'relative', overflow: 'hidden',
            }}>
              {/* Accent corner */}
              <div style={{ position: 'absolute', top: -40, right: -40, width: 120, height: 120, borderRadius: '50%', background: `radial-gradient(circle, ${r.color}30, transparent 70%)` }} />
              <div style={{
                width: 48, height: 48, borderRadius: 14, background: `${r.color}22`,
                border: `1px solid ${r.color}55`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: r.color, marginBottom: 18,
              }}>
                <SiteIcon name={r.id === 'fan' ? 'bell' : r.id === 'player' ? 'bat' : 'gear'} size={22} />
              </div>
              <div style={{ color: 'white', fontSize: 22, fontWeight: 800, marginBottom: 4 }}>{r.name}</div>
              <div style={{ color: SITE.textDim, fontSize: 14, marginBottom: 20 }}>{r.desc}</div>
              <div style={{ color: SITE.textMuted, fontSize: 10, fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase', marginBottom: 10 }}>Tabs</div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                {r.tabs.map(t => (
                  <span key={t} style={{
                    padding: '5px 10px', borderRadius: 8,
                    background: SITE.surfaceAlt, border: `1px solid ${SITE.border}`,
                    color: 'white', fontSize: 12, fontWeight: 600,
                  }}>{t}</span>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ─────────────────────────────────────────────────────────────
// PRICING
// ─────────────────────────────────────────────────────────────
const PricingSection = () => {
  const plans = [
    {
      id: 'free',  name: 'Starter', price: 'Free', sub: 'forever',
      desc: 'For any player or club getting started.',
      cta: 'Get started free',
      features: ['Club creation & management', 'Fixtures + availability', 'Team feed + chat', 'Live scoring', 'Basic player stats', 'iOS & Android'],
      highlight: false,
    },
    {
      id: 'pro',   name: 'Pro', price: 'CAD $7.99', sub: '/user/month',
      desc: 'For players and clubs that want the full picture.',
      cta: 'Start 7 day free trial',
      features: ['Advanced stats + leaderboards', 'Verified badge ✓', 'Private club chat', 'Photo gallery', 'After match reports', '@crease AI bot', 'Priority support'],
      highlight: true,
    },
    {
      id: 'league', name: 'League', price: 'Custom', sub: '',
      desc: 'For leagues and federations.',
      cta: 'Talk to us',
      features: ['Many clubs, one league', 'Centralised fixture sync', 'Cross-club leaderboard', 'White-label option', 'SSO + custom domains', 'Dedicated CSM'],
      highlight: false,
    },
  ];
  return (
    <section id="pricing" className="site-section-pad" style={{ padding: '100px 28px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <SectionHeader
          eyebrow="Pricing"
          title="Free to start. Honest when you grow."
          sub="No per-feature pricing. No surprise add-ons. One flat rate per user on Pro."
        />

        <div className="site-3col" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginTop: 56 }}>
          {plans.map(p => (
            <div key={p.id} style={{
              background: p.highlight ? 'rgba(34,197,94,0.05)' : SITE.surface,
              border: `1px solid ${p.highlight ? SITE.accent : SITE.border}`,
              borderRadius: 20, padding: 32, position: 'relative',
            }}>
              {p.highlight && (
                <div style={{
                  position: 'absolute', top: -12, left: 32,
                  background: SITE.accent, color: SITE.accentInk,
                  padding: '4px 12px', borderRadius: 8, fontSize: 11, fontWeight: 800, letterSpacing: 0.4,
                }}>MOST POPULAR</div>
              )}
              <div style={{ color: 'white', fontSize: 20, fontWeight: 800 }}>{p.name}</div>
              <div style={{ color: SITE.textDim, fontSize: 14, marginTop: 6, marginBottom: 24 }}>{p.desc}</div>

              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 24 }}>
                <span style={{ color: 'white', fontSize: 48, fontWeight: 900, letterSpacing: -2, lineHeight: 1 }}>{p.price}</span>
                <span style={{ color: SITE.textDim, fontSize: 14 }}>{p.sub}</span>
              </div>

              <button onClick={() => p.id === 'league'
                  ? (window.location.href = 'mailto:nextcodeca@gmail.com?subject=Crease League Enquiry')
                  : window.open('https://cricket-5ee0d-admin.web.app', '_blank')
              } style={{
                width: '100%', padding: 14, borderRadius: 12, fontWeight: 800, fontSize: 14,
                fontFamily: SITE_FONT, cursor: 'pointer',
                background: p.highlight ? SITE.accent : 'transparent',
                color: p.highlight ? SITE.accentInk : 'white',
                border: p.highlight ? 'none' : `1px solid ${SITE.borderStrong}`,
                marginBottom: 24,
              }}>{p.cta}</button>

              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {p.features.map(f => (
                  <div key={f} style={{ display: 'flex', alignItems: 'center', gap: 10, color: SITE.textDim, fontSize: 13 }}>
                    <SiteIcon name="check" size={14} stroke={3} style={{ color: SITE.accent }} />
                    {f}
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ─────────────────────────────────────────────────────────────
// FAQ — expandable
// ─────────────────────────────────────────────────────────────
const FAQSection = () => {
  const faqs = [
    { q: 'Is Crease really free?', a: 'Yes. The Starter tier is free forever — including club setup, live scoring, team feed and chat. Pro is CAD $7.99/user/month and comes with a 7 day free trial, no card required to start.' },
    { q: 'Does Crease work without internet at the ground?', a: 'Yes for scoring — the scoring screen queues balls offline and syncs when you reconnect. Spectator features need a signal.' },
    { q: 'Can players opt out of certain notifications?', a: 'Yes. Each user can pick which notification types to receive: fixtures, posts, live match, availability reminders, votes — independently.' },
    { q: 'Who owns the data?', a: 'Your club. Export any time — fixtures, scoresheets, gallery, posts — as JSON or CSV. We never sell or share club data.' },
  ];
  const [open, setOpen] = useBSt(0);
  return (
    <section id="faq" className="site-section-pad" style={{ padding: '100px 28px', background: SITE.surface, borderTop: `1px solid ${SITE.border}`, borderBottom: `1px solid ${SITE.border}` }}>
      <div style={{ maxWidth: 820, margin: '0 auto' }}>
        <SectionHeader eyebrow="Frequently asked" title="Anything else?" />
        <div style={{ marginTop: 48, display: 'flex', flexDirection: 'column', gap: 12 }}>
          {faqs.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{
                background: SITE.bg, border: `1px solid ${SITE.border}`, borderRadius: 14,
                overflow: 'hidden', transition: 'border-color .2s',
                borderColor: isOpen ? SITE.borderStrong : SITE.border,
              }}>
                <div onClick={() => setOpen(isOpen ? -1 : i)} className="site-tabbtn" style={{
                  padding: '20px 24px', display: 'flex', alignItems: 'center', gap: 16,
                  cursor: 'pointer',
                }}>
                  <span style={{ flex: 1, color: 'white', fontSize: 16, fontWeight: 700 }}>{f.q}</span>
                  <div style={{
                    width: 28, height: 28, borderRadius: 8,
                    background: isOpen ? `${SITE.accent}22` : SITE.surfaceAlt,
                    color: isOpen ? SITE.accent : SITE.textDim,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    transition: 'all .2s',
                    transform: isOpen ? 'rotate(45deg)' : 'rotate(0)',
                  }}>
                    <SiteIcon name="plus" size={16} stroke={2.5} />
                  </div>
                </div>
                <div style={{
                  maxHeight: isOpen ? 200 : 0, overflow: 'hidden',
                  transition: 'max-height .3s ease, padding .3s ease',
                  padding: isOpen ? '0 24px 20px' : '0 24px',
                  color: SITE.textDim, fontSize: 15, lineHeight: 1.6,
                }}>{f.a}</div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

// ─────────────────────────────────────────────────────────────
// FINAL CTA
// ─────────────────────────────────────────────────────────────
const FinalCTA = ({ audience }) => (
  <section style={{ padding: '120px 28px', textAlign: 'center', position: 'relative', overflow: 'hidden' }}>
    {/* Glow background */}
    <div style={{
      position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
      width: 900, height: 500, borderRadius: '50%',
      background: 'radial-gradient(ellipse, rgba(34,197,94,0.18) 0%, transparent 65%)',
      pointerEvents: 'none', filter: 'blur(40px)',
    }} />
    <div style={{ maxWidth: 720, margin: '0 auto', position: 'relative' }}>
      {/* Animated logo */}
      <div style={{ display: 'inline-block', marginBottom: 28 }}>
        <CreaseLogo height={64} mode="loop" loopDelay={0} />
      </div>
      <h2 className="site-final-h2" style={{ margin: 0, color: 'white', fontSize: 56, fontWeight: 900, letterSpacing: -1.8, lineHeight: 1.05 }}>
        Ready to retire the WhatsApp poll?
      </h2>
      <p style={{ color: SITE.textDim, fontSize: 18, lineHeight: 1.6, marginTop: 20, marginBottom: 36 }}>
        {audience === 'players'
          ? 'Ask your captain to start a club on Crease — or join one with an invite code.'
          : 'Set up your club in 5 minutes. Free for the first 25 members, no card required.'}
      </p>
      <div className="site-cta-btns" style={{ display: 'flex', gap: 12, justifyContent: 'center' }}>
        <button onClick={() => window.open('https://cricket-5ee0d-admin.web.app', '_blank')} style={{
          background: SITE.accent, color: SITE.accentInk, border: 'none',
          borderRadius: 12, padding: '16px 28px', fontWeight: 800, fontSize: 16,
          fontFamily: SITE_FONT, cursor: 'pointer',
          display: 'inline-flex', alignItems: 'center', gap: 8,
          boxShadow: '0 12px 36px rgba(34,197,94,0.32)',
        }}>
          {audience === 'players' ? 'Download Crease' : 'Set up your club'} <SiteIcon name="arrow" size={16} stroke={2.5} />
        </button>
        <button onClick={() => { window.location.href = 'mailto:nextcodeca@gmail.com?subject=Crease Demo Request'; }} style={{
          background: 'transparent', color: 'white', border: `1px solid ${SITE.borderStrong}`,
          borderRadius: 12, padding: '16px 28px', fontWeight: 700, fontSize: 16,
          fontFamily: SITE_FONT, cursor: 'pointer',
        }}>
          Book a 15-min demo
        </button>
      </div>
    </div>
  </section>
);

// ─────────────────────────────────────────────────────────────
// FOOTER
// ─────────────────────────────────────────────────────────────
const Footer = () => (
  <footer style={{ padding: '60px 28px 40px', borderTop: `1px solid ${SITE.border}` }}>
    <div className="site-footer-grid" style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr 1fr', gap: 40 }}>
      <div className="site-footer-brand">
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
          <CreaseLogo height={24} mode="static" />
          <span style={{ color: 'white', fontSize: 16, fontWeight: 800 }}>Crease</span>
        </div>
        <p style={{ color: SITE.textDim, fontSize: 13, lineHeight: 1.6, margin: 0 }}>
          The cricket app your team actually wants to open.
        </p>
        <div style={{ display: 'flex', gap: 8, marginTop: 20 }}>
          {['App Store', 'Google Play'].map(b => (
            <div key={b} onClick={() => window.open('https://cricket-5ee0d-admin.web.app', '_blank')} style={{
              padding: '8px 14px', background: SITE.surface,
              border: `1px solid ${SITE.border}`, borderRadius: 10,
              color: 'white', fontSize: 12, fontWeight: 600, cursor: 'pointer',
            }}>{b}</div>
          ))}
        </div>
      </div>
      {[
        { title: 'Product', links: ['Features', 'Live scoring', 'Roles', 'Pricing', 'Changelog'] },
        { title: 'Clubs',   links: ['Set up a club', 'For coaches', 'For leagues', 'Migrate from Spond', 'Templates'] },
        { title: 'Company', links: ['About', 'Careers', 'Press', 'Brand kit'] },
        { title: 'Help',    links: ['Help centre', 'API docs', 'Status', 'Contact'] },
      ].map(col => (
        <div key={col.title}>
          <div style={{ color: 'white', fontSize: 12, fontWeight: 800, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 16 }}>{col.title}</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {col.links.map(l => <a key={l} className="site-link" style={{ fontSize: 13 }}>{l}</a>)}
          </div>
        </div>
      ))}
    </div>
    <div style={{ maxWidth: 1200, margin: '40px auto 0', paddingTop: 24, borderTop: `1px solid ${SITE.border}`, display: 'flex', justifyContent: 'space-between', color: SITE.textMuted, fontSize: 12 }}>
      <div>© 2026 Crease. All rights reserved.</div>
      <div style={{ display: 'flex', gap: 24 }}>
        <span>Terms</span><span>Privacy</span><span>Cookies</span>
      </div>
    </div>
  </footer>
);

Object.assign(window, { LiveShowcase, LiveScoringSpotlight, SignatureSection, RolesSection, PricingSection, FAQSection, FinalCTA, Footer });