// Crease website — middle sections: features, deep dives, roles, live scoring

const { useState: useFSt, useEffect: useFEff } = React;

// ─────────────────────────────────────────────────────────────
// FEATURES — interactive carousel with switchable preview
// Each feature has its own "panel" component shown to the right
// ─────────────────────────────────────────────────────────────
const FEATURE_LIST_PLAYERS = [
  { id: 'rsvp',    icon: 'check',  title: 'Availability in one tap',  desc: 'Set Available, Maybe, or Can\u2019t for every fixture. Captains see the full picture instantly.' },
  { id: 'live',    icon: 'bat',    title: 'Live ball by ball',         desc: 'Follow every ball as it\u2019s scored. Push notified the moment they happen.' },
  { id: 'report',  icon: 'post',   title: 'After match reports',       desc: 'Stumps trigger an auto generated match report — scorecard, POTM nominations — posted to the feed.' },
  { id: 'bot',     icon: 'chat',   title: '@crease bot in chat',       desc: 'Ask "who\u2019s coming Saturday?" or "show my last 5 innings." It answers in chat. No menus.' },
];

const FEATURE_LIST_CLUBS = [
  { id: 'fixtures',  icon: 'cal',    title: 'Fixtures + availability', desc: 'Add a fixture, the squad gets notified. See the XI form itself in real time.' },
  { id: 'scoring',   icon: 'bat',    title: 'Live scoring on the field', desc: 'Ball by ball at the ground. Stats roll up automatically — no end of day data entry.' },
  { id: 'report',    icon: 'post',   title: 'After match reports',     desc: 'The moment a match ends, Crease drafts a report from the scorecard. Publish in 30 seconds.' },
  { id: 'bot',       icon: 'chat',   title: '@crease bot',             desc: 'A club assistant in chat. Pull availability, generate selection options, draft posts — by asking.' },
];

const FeatureSection = ({ audience }) => {
  const list = audience === 'players' ? FEATURE_LIST_PLAYERS : FEATURE_LIST_CLUBS;
  const [active, setActive] = useFSt(list[0].id);
  // Reset selection when audience changes
  useFEff(() => { setActive(list[0].id); }, [audience]);

  const activeColor = audience === 'players' ? SITE.player : SITE.admin;

  return (
    <section id="features" className="site-section-pad" style={{ padding: '80px 28px', position: 'relative' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <SectionHeader
          eyebrow="What's inside"
          title={audience === 'players' ? 'Every fixture, every score, every vote — in your pocket.' : 'The full club, on one stack.'}
          sub="Click a feature to preview it live."
        />

        <div className="site-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, marginTop: 56, alignItems: 'center' }}>
          {/* Left — feature list */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {list.map(f => {
              const isActive = f.id === active;
              return (
                <div key={f.id} onClick={() => setActive(f.id)} className="site-tabbtn" style={{
                  display: 'flex', gap: 16, padding: 18, borderRadius: 16,
                  background: isActive ? `rgba(${audience === 'players' ? '56,189,248' : '245,158,11'}, 0.06)` : SITE.surface,
                  border: `1px solid ${isActive ? activeColor + '66' : SITE.border}`,
                  cursor: 'pointer', transition: 'all .2s',
                }}>
                  <div style={{
                    width: 44, height: 44, borderRadius: 12, flexShrink: 0,
                    background: isActive ? `${activeColor}22` : SITE.surfaceAlt,
                    color: isActive ? activeColor : SITE.textDim,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    border: `1px solid ${isActive ? activeColor + '44' : SITE.border}`,
                    transition: 'all .2s',
                  }}>
                    <SiteIcon name={f.icon} size={20} stroke={2} />
                  </div>
                  <div style={{ flex: 1 }}>
                    <div style={{ color: 'white', fontSize: 17, fontWeight: 700, marginBottom: 6 }}>{f.title}</div>
                    <div style={{ color: SITE.textDim, fontSize: 14, lineHeight: 1.5 }}>{f.desc}</div>
                  </div>
                  <div style={{
                    color: isActive ? activeColor : 'transparent', display: 'flex',
                    alignItems: 'center', transition: 'color .2s',
                  }}>
                    <SiteIcon name="chev" size={16} />
                  </div>
                </div>
              );
            })}
          </div>

          {/* Right — preview */}
          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: 600 }}>
            <FeaturePreview activeId={active} audience={audience} />
          </div>
        </div>
      </div>
    </section>
  );
};

// ─────────────────────────────────────────────────────────────
// Feature preview — different visual per feature key
// ─────────────────────────────────────────────────────────────
const FeaturePreview = ({ activeId, audience }) => {
  // Player previews
  if (activeId === 'rsvp') return <PreviewRSVP />;
  if (activeId === 'live') return <PreviewLive />;
  if (activeId === 'feed') return <PreviewFeed />;
  if (activeId === 'stats') return <PreviewStats />;
  if (activeId === 'chat') return <PreviewChat />;
  if (activeId === 'report') return <PreviewReport />;
  if (activeId === 'bot') return <PreviewBot />;
  // Club previews
  if (activeId === 'fixtures') return <PreviewFixturesAdmin />;
  if (activeId === 'scoring')  return <PreviewLive />;
  if (activeId === 'training') return <PreviewTraining />;
  if (activeId === 'comms')    return <PreviewComms />;
  if (activeId === 'admin')    return <PreviewBrand />;
  return null;
};

// Helper: phone frame wrapper for previews
const PreviewPhone = ({ children, color = SITE.player }) => (
  <div style={{ position: 'relative', filter: `drop-shadow(0 24px 60px ${color}33)` }}>
    <IOSDevice width={300} height={620} dark={true}>
      <div style={{ position: 'relative', width: '100%', height: '100%' }}>
        {children}
      </div>
    </IOSDevice>
  </div>
);

// ── RSVP preview: a single fixture card with the avail buttons live
const PreviewRSVP = () => {
  const [pick, setPick] = useFSt('avail');
  const f = FIXTURES[0];
  return (
    <PreviewPhone color={SITE.player}>
      <div style={{ position: 'absolute', inset: 0, background: COLORS.bg, padding: '60px 20px 0', color: 'white', fontFamily: SITE_FONT, display: 'flex', flexDirection: 'column' }}>
        <div style={{ color: 'white', fontSize: 24, fontWeight: 800, marginBottom: 16 }}>Fixtures</div>
        <div style={{
          background: COLORS.surface, border: `1px solid ${COLORS.border}`,
          borderRadius: 16, padding: 16,
        }}>
          <div style={{ display: 'flex', gap: 6, marginBottom: 10 }}>
            <MBadge tone="slate">League</MBadge>
            <MBadge tone="slate">Away</MBadge>
          </div>
          <div style={{ color: 'white', fontSize: 17, fontWeight: 800 }}>vs {f.opponent}</div>
          <div style={{ color: COLORS.textSecondary, fontSize: 12, marginTop: 4 }}>{f.date} · {f.time}</div>

          <div style={{ display: 'flex', gap: 6, marginTop: 14 }}>
            {[
              { id: 'avail', label: 'Available', tone: 'accent', icon: 'check' },
              { id: 'maybe', label: 'Maybe',     tone: 'amber',  icon: 'qmark' },
              { id: 'unavail',label:'Can\u2019t',tone: 'danger', icon: 'x' },
            ].map(b => {
              const active = pick === b.id;
              return (
                <div key={b.id} onClick={() => setPick(b.id)} className="crease-press" style={{
                  flex: 1, padding: '10px 4px', borderRadius: 10,
                  display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
                  background: active ? COLORS[b.tone] : 'transparent',
                  border: `1px solid ${active ? COLORS[b.tone] : COLORS.border}`,
                  color: active ? (b.tone === 'accent' ? COLORS.accentInk : '#0B1220') : COLORS.textSecondary,
                  cursor: 'pointer', transition: 'background .22s, color .22s',
                }}>
                  <SiteIcon name={b.icon} size={14} stroke={2.5} />
                  <span style={{ fontSize: 11, fontWeight: 700 }}>{b.label}</span>
                </div>
              );
            })}
          </div>

          <div style={{ marginTop: 14, paddingTop: 12, borderTop: `1px solid ${COLORS.border}`, color: COLORS.textMuted, fontSize: 11 }}>
            <span style={{ color: COLORS.accent, fontWeight: 700 }}>9</span> available · <span style={{ color: COLORS.amber }}>2</span> maybe · 1 can't
          </div>
        </div>

        <div style={{ marginTop: 16, padding: 12, borderRadius: 10, background: 'rgba(56,189,248,0.08)', border: '1px solid rgba(56,189,248,0.22)', color: SITE.player, fontSize: 12, display: 'flex', alignItems: 'center', gap: 8 }}>
          <SiteIcon name="check" size={14} stroke={3} /> Saved · captain notified
        </div>
      </div>
    </PreviewPhone>
  );
};

// ── Live scoring preview: scoreboard ticking up with last 6 balls
const PreviewLive = () => {
  const [score, setScore] = useFSt({ runs: 124, wickets: 3, overs: 18.2 });
  const [balls, setBalls] = useFSt(['1', '4', 'W', '·', '2', '6']);
  useFEff(() => {
    const seq = [
      { d: { runs: 130, wickets: 3, overs: 18.3 }, b: '6' },
      { d: { runs: 130, wickets: 3, overs: 18.4 }, b: '·' },
      { d: { runs: 131, wickets: 3, overs: 18.5 }, b: '1' },
      { d: { runs: 131, wickets: 4, overs: 18.6 }, b: 'W' },
      { d: { runs: 135, wickets: 4, overs: 19.1 }, b: '4' },
      { d: { runs: 137, wickets: 4, overs: 19.2 }, b: '2' },
    ];
    let i = 0;
    const t = setInterval(() => {
      const step = seq[i % seq.length];
      setScore(step.d);
      setBalls(prev => [...prev.slice(1), step.b]);
      i++;
    }, 1800);
    return () => clearInterval(t);
  }, []);
  const ballColor = (b) => b === 'W' ? COLORS.danger : (b === '4' || b === '6') ? COLORS.accent : COLORS.textSecondary;
  return (
    <PreviewPhone color={SITE.accent}>
      <div style={{ position: 'absolute', inset: 0, background: COLORS.bg, padding: '60px 20px 0', color: 'white', fontFamily: SITE_FONT }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
          <div style={{ color: 'white', fontSize: 22, fontWeight: 800 }}>Live</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, color: COLORS.danger, fontSize: 11, fontWeight: 800 }}>
            <span className="site-blink" style={{ width: 7, height: 7, borderRadius: 999, background: COLORS.danger }} />
            LIVE · 287 watching
          </div>
        </div>

        {/* Scoreboard */}
        <div style={{ background: COLORS.surface, border: `1px solid ${COLORS.border}`, borderRadius: 16, padding: 18, marginBottom: 14 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <div>
              <div style={{ color: COLORS.textMuted, fontSize: 11, fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase' }}>Riverside CC</div>
              <div style={{ color: 'white', fontSize: 38, fontWeight: 900, fontVariantNumeric: 'tabular-nums', lineHeight: 1 }}>{score.runs}<span style={{ fontSize: 22, color: COLORS.textSecondary }}>/{score.wickets}</span></div>
              <div style={{ color: COLORS.textMuted, fontSize: 12, marginTop: 4 }}>{score.overs} overs · CRR {(score.runs / (Math.floor(score.overs) + (score.overs % 1) * 10 / 6)).toFixed(2)}</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{ color: COLORS.textMuted, fontSize: 11, fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase' }}>vs Northbank</div>
              <div style={{ color: COLORS.accent, fontSize: 12, fontWeight: 700, marginTop: 6 }}>Target 168</div>
            </div>
          </div>
        </div>

        {/* Last 6 balls */}
        <div style={{ marginBottom: 14 }}>
          <div style={{ color: COLORS.textMuted, fontSize: 10, fontWeight: 700, letterSpacing: 0.5, textTransform: 'uppercase', marginBottom: 8 }}>Last 6 balls</div>
          <div style={{ display: 'flex', gap: 6 }}>
            {balls.map((b, i) => (
              <div key={i + b + score.overs} style={{
                width: 32, height: 32, borderRadius: 999, display: 'flex', alignItems: 'center', justifyContent: 'center',
                background: COLORS.surface, border: `1.5px solid ${ballColor(b)}`,
                color: ballColor(b), fontSize: 13, fontWeight: 800,
                animation: i === balls.length - 1 ? 'site-pop .35s cubic-bezier(.2,1.3,.3,1)' : 'none',
              }}>{b}</div>
            ))}
          </div>
        </div>

        {/* Batters */}
        <div style={{ background: COLORS.surface, border: `1px solid ${COLORS.border}`, borderRadius: 12, padding: 14 }}>
          {[
            { name: 'A Patel*', r: 62, b: 48 },
            { name: 'T Whitfield', r: 24, b: 19 },
          ].map(p => (
            <div key={p.name} style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0', color: 'white', fontSize: 13 }}>
              <span>{p.name}</span>
              <span style={{ color: COLORS.textSecondary, fontVariantNumeric: 'tabular-nums' }}>{p.r} <span style={{ color: COLORS.textMuted }}>({p.b})</span></span>
            </div>
          ))}
        </div>
      </div>
    </PreviewPhone>
  );
};

// ── Feed preview
const PreviewFeed = () => (
  <PreviewPhone color={SITE.player}>
    <div style={{ position: 'absolute', inset: 0, background: COLORS.bg, padding: '60px 20px 0', color: 'white', fontFamily: SITE_FONT, overflow: 'hidden' }}>
      <div style={{ color: 'white', fontSize: 22, fontWeight: 800, marginBottom: 14 }}>Team feed</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {POSTS.slice(0, 3).map(p => (
          <div key={p.id} style={{ background: COLORS.surface, borderRadius: 14, padding: 14, border: `1px solid ${COLORS.border}` }}>
            <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 8 }}>
              {p.pinned && <span style={{ color: COLORS.amber, display: 'inline-flex' }}><SiteIcon name="pin2" size={11} stroke={2.5} /></span>}
              <MBadge tone={p.tag === 'Training' ? 'sky' : p.tag === 'Kit' ? 'purple' : p.tag === 'Match report' ? 'accent' : 'slate'}>{p.tag}</MBadge>
              <span style={{ marginLeft: 'auto', color: COLORS.textMuted, fontSize: 10 }}>{p.date}</span>
            </div>
            <div style={{ color: 'white', fontSize: 13, fontWeight: 700, lineHeight: 1.3 }}>{p.title}</div>
            <div style={{ color: COLORS.textSecondary, fontSize: 12, marginTop: 4, lineHeight: 1.45, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{p.excerpt}</div>
          </div>
        ))}
      </div>
    </div>
  </PreviewPhone>
);

// ── Stats preview
const PreviewStats = () => (
  <PreviewPhone color={SITE.player}>
    <div style={{ position: 'absolute', inset: 0, background: COLORS.bg, padding: '60px 20px 0', color: 'white', fontFamily: SITE_FONT }}>
      <div style={{ color: 'white', fontSize: 22, fontWeight: 800, marginBottom: 14 }}>Your averages</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, marginBottom: 16 }}>
        {[
          { l: 'Matches', v: '11', c: 'white' },
          { l: 'Runs',    v: '487', c: COLORS.accent },
          { l: 'Average', v: '48.7', c: COLORS.sky },
        ].map(s => (
          <div key={s.l} style={{ background: COLORS.surface, border: `1px solid ${COLORS.border}`, borderRadius: 12, padding: 12, textAlign: 'center' }}>
            <div style={{ color: COLORS.textMuted, fontSize: 9, fontWeight: 700, letterSpacing: 0.4, textTransform: 'uppercase' }}>{s.l}</div>
            <div style={{ color: s.c, fontSize: 20, fontWeight: 800, marginTop: 4 }}>{s.v}</div>
          </div>
        ))}
      </div>
      <div style={{ color: COLORS.textMuted, fontSize: 10, fontWeight: 700, letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: 8 }}>Form · last 6</div>
      <div style={{ display: 'flex', gap: 4, alignItems: 'flex-end', height: 90 }}>
        {[34, 18, 81, 12, 56, 42].map((r, i) => (
          <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
            <div style={{ color: 'white', fontSize: 10, fontWeight: 700 }}>{r}</div>
            <div style={{ width: '100%', height: r * 0.9, background: r > 50 ? COLORS.accent : r > 25 ? COLORS.sky : COLORS.textDisabled, borderRadius: 4 }} />
          </div>
        ))}
      </div>
    </div>
  </PreviewPhone>
);

// ── Chat preview
const PreviewChat = () => (
  <PreviewPhone color={SITE.player}>
    <div style={{ position: 'absolute', inset: 0, background: COLORS.bg, padding: '60px 20px 0', color: 'white', fontFamily: SITE_FONT, display: 'flex', flexDirection: 'column' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14, paddingBottom: 12, borderBottom: `1px solid ${COLORS.border}` }}>
        <MAvatar initials="1X" size={36} tone="accent" />
        <div>
          <div style={{ color: 'white', fontSize: 15, fontWeight: 700 }}>1st XI players</div>
          <div style={{ color: COLORS.accent, fontSize: 11 }}>11 online</div>
        </div>
      </div>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 8 }}>
        {[
          { who: 'TW', name: 'Tom', t: 'lift to Northbank Sat anyone?', mine: false },
          { who: 'RS', name: 'Rav', t: 'I can take 3', mine: false },
          { who: 'me', name: 'You', t: 'I\u2019ll bring kit', mine: true },
          { who: 'OB', name: 'Olivia', t: 'pickup at the green?', mine: false },
        ].map((m, i) => (
          <div key={i} style={{ display: 'flex', justifyContent: m.mine ? 'flex-end' : 'flex-start', gap: 8 }}>
            {!m.mine && <MAvatar initials={m.who} size={22} tone="slate" />}
            <div style={{
              padding: '8px 12px', borderRadius: 14,
              background: m.mine ? SITE.player : COLORS.surface,
              color: m.mine ? '#0B1220' : 'white',
              fontSize: 13, fontWeight: m.mine ? 600 : 500,
              maxWidth: '74%',
              borderTopLeftRadius: !m.mine ? 4 : 14,
              borderTopRightRadius: m.mine ? 4 : 14,
            }}>{m.t}</div>
          </div>
        ))}
      </div>
      <div style={{ padding: '10px 12px', background: COLORS.surface, borderRadius: 999, color: COLORS.textMuted, fontSize: 12, marginTop: 12, display: 'flex', alignItems: 'center', gap: 8 }}>
        Message · <span style={{ marginLeft: 'auto', color: SITE.player }}><SiteIcon name="sendH" size={14} /></span>
      </div>
    </div>
  </PreviewPhone>
);

// ── Admin fixtures preview (browser, smaller)
const PreviewFixturesAdmin = () => (
  <div style={{ width: 460, transform: 'scale(0.92)', transformOrigin: 'center' }}>
    <ChromeWindow tabs={[{ title: 'Crease · Riverside CC' }]} activeIndex={0} url="crease.app/riverside-cc/fixtures" width={460} height={520}>
      <div style={{ background: COLORS.bg, color: 'white', fontFamily: SITE_FONT, padding: 20, height: '100%', boxSizing: 'border-box' }}>
        <div style={{ color: 'white', fontSize: 20, fontWeight: 800, marginBottom: 14 }}>Fixtures</div>
        {FIXTURES.slice(0, 4).map(f => {
          const isUp = f.status === 'upcoming';
          const total = f.counts.avail + f.counts.maybe + f.counts.unavail + f.counts.pending;
          return (
            <div key={f.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 0', borderBottom: `1px solid ${COLORS.border}` }}>
              <div style={{ width: 56 }}>
                <div style={{ color: 'white', fontSize: 13, fontWeight: 700 }}>{f.date}</div>
                <div style={{ color: COLORS.textMuted, fontSize: 11 }}>{f.time}</div>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ color: 'white', fontSize: 13, fontWeight: 600 }}>vs {f.opponent}</div>
                <div style={{ color: COLORS.textMuted, fontSize: 11 }}>{f.homeAway} · {f.venue}</div>
              </div>
              {isUp ? (
                <div style={{ width: 100 }}>
                  <div style={{ height: 4, background: COLORS.border, borderRadius: 2, display: 'flex', overflow: 'hidden' }}>
                    <div style={{ flex: f.counts.avail, background: COLORS.accent }} />
                    <div style={{ flex: f.counts.maybe, background: COLORS.amber }} />
                    <div style={{ flex: f.counts.unavail, background: COLORS.danger }} />
                    <div style={{ flex: f.counts.pending, background: COLORS.borderStrong }} />
                  </div>
                  <div style={{ color: COLORS.textMuted, fontSize: 10, marginTop: 4 }}>
                    <span style={{ color: COLORS.accent, fontWeight: 700 }}>{f.counts.avail}</span>/{total} responded
                  </div>
                </div>
              ) : (
                <MBadge tone={f.status === 'result' ? 'accent' : 'slate'}>{f.status === 'result' ? 'Won' : 'Rained off'}</MBadge>
              )}
            </div>
          );
        })}
      </div>
    </ChromeWindow>
  </div>
);

// ── Training preview
const PreviewTraining = () => (
  <PreviewPhone color={SITE.admin}>
    <div style={{ position: 'absolute', inset: 0, background: COLORS.bg, padding: '60px 20px 0', color: 'white', fontFamily: SITE_FONT }}>
      <div style={{ color: 'white', fontSize: 22, fontWeight: 800, marginBottom: 14 }}>Training</div>
      <div style={{ background: COLORS.surface, border: `1px solid ${COLORS.border}`, borderRadius: 14, padding: 14, marginBottom: 12 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
          <MBadge tone="sky">Indoor nets</MBadge>
          <span style={{ color: COLORS.textMuted, fontSize: 11 }}>Thu 21 May · 7pm</span>
        </div>
        <div style={{ color: 'white', fontSize: 14, fontWeight: 700, marginBottom: 10 }}>Reaction drills + slower-ball focus</div>
        <div style={{ color: COLORS.textMuted, fontSize: 11, marginBottom: 10 }}>Attendance · 11 of 14</div>
        <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
          {SQUAD.slice(0, 14).map((p, i) => (
            <div key={p.id} style={{
              padding: '3px 8px', borderRadius: 999, fontSize: 10, fontWeight: 700,
              background: i < 11 ? 'rgba(34,197,94,0.16)' : 'rgba(239,68,68,0.12)',
              color: i < 11 ? COLORS.accent : COLORS.danger,
            }}>{p.initials}</div>
          ))}
        </div>
      </div>
      <div style={{ background: COLORS.surface, border: `1px solid ${COLORS.border}`, borderRadius: 14, padding: 14 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
          <span style={{ color: 'white', fontSize: 13, fontWeight: 700 }}>Tactical · pre-Northbank</span>
          <span style={{ color: COLORS.textMuted, fontSize: 11 }}>Fri 22 May</span>
        </div>
        <div style={{ color: COLORS.textMuted, fontSize: 11 }}>Mandatory · 1XI selectees</div>
      </div>
    </div>
  </PreviewPhone>
);

// ── Comms preview
const PreviewComms = () => (
  <PreviewPhone color={SITE.admin}>
    <div style={{ position: 'absolute', inset: 0, background: COLORS.bg, padding: '60px 20px 0', color: 'white', fontFamily: SITE_FONT }}>
      <div style={{ color: 'white', fontSize: 22, fontWeight: 800, marginBottom: 14 }}>New post</div>
      <div style={{ background: COLORS.surface, border: `1px solid ${COLORS.border}`, borderRadius: 14, padding: 14, marginBottom: 12 }}>
        <div style={{ color: COLORS.textMuted, fontSize: 10, fontWeight: 700, letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: 6 }}>Title</div>
        <div style={{ color: 'white', fontSize: 15, fontWeight: 700 }}>Kit order — confirm sizes by Fri</div>
      </div>
      <div style={{ background: COLORS.surface, border: `1px solid ${COLORS.border}`, borderRadius: 14, padding: 14, marginBottom: 12 }}>
        <div style={{ color: COLORS.textMuted, fontSize: 10, fontWeight: 700, letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: 8 }}>Audience</div>
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          <MBadge tone="accent">1st XI</MBadge>
          <MBadge tone="accent">2nd XI</MBadge>
          <MBadge tone="slate">+ Coaches</MBadge>
        </div>
      </div>
      <div style={{ background: COLORS.surface, border: `1px solid ${COLORS.border}`, borderRadius: 14, padding: 14, marginBottom: 12 }}>
        <div style={{ color: COLORS.textMuted, fontSize: 10, fontWeight: 700, letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: 8 }}>Notify</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'white', fontSize: 13 }}>
          <div style={{ width: 36, height: 20, background: COLORS.accent, borderRadius: 999, position: 'relative' }}>
            <div style={{ position: 'absolute', top: 2, right: 2, width: 16, height: 16, background: '#fff', borderRadius: 999 }} />
          </div>
          Push notification
        </div>
      </div>
      <button style={{
        width: '100%', background: COLORS.accent, color: COLORS.accentInk,
        border: 'none', borderRadius: 12, padding: '12px', fontWeight: 800, fontSize: 14,
        fontFamily: SITE_FONT, cursor: 'pointer',
      }}>Post to 24 people</button>
    </div>
  </PreviewPhone>
);

// ── After-match report preview — a polished feed post written from the scorecard
const PreviewReport = () => (
  <PreviewPhone color={SITE.accent}>
    <div style={{ position: 'absolute', inset: 0, background: COLORS.bg, padding: '60px 18px 20px', color: 'white', fontFamily: SITE_FONT, overflow: 'hidden' }}>
      <div style={{ color: 'white', fontSize: 20, fontWeight: 800, marginBottom: 12 }}>Match report</div>
      <div style={{
        background: COLORS.surface, border: `1px solid ${COLORS.border}`,
        borderRadius: 14, padding: 14, position: 'relative', overflow: 'hidden',
      }}>
        {/* Auto drafted badge */}
        <div style={{
          position: 'absolute', top: 12, right: 12,
          display: 'inline-flex', alignItems: 'center', gap: 5,
          padding: '3px 8px', borderRadius: 6,
          background: 'rgba(34,197,94,0.16)', 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: 8 }}>
          <MBadge tone="accent">Match report</MBadge>
        </div>
        <div style={{ color: 'white', fontSize: 14, fontWeight: 800, lineHeight: 1.3 }}>Riverside cruise past St Mary's</div>
        <div style={{ color: COLORS.textMuted, fontSize: 10, marginTop: 4 }}>Sun 10 May · Won by 34 runs</div>

        {/* Mini scorecard */}
        <div style={{ marginTop: 12, padding: 10, background: COLORS.surfaceAlt, borderRadius: 10 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
            <span style={{ color: 'white', fontSize: 11, fontWeight: 600 }}>Riverside CC</span>
            <span style={{ color: 'white', fontSize: 13, fontWeight: 800, fontVariantNumeric: 'tabular-nums' }}>186/4 <span style={{ color: COLORS.textMuted, fontSize: 10 }}>(20)</span></span>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <span style={{ color: COLORS.textSecondary, fontSize: 11 }}>St Mary's</span>
            <span style={{ color: COLORS.textSecondary, fontSize: 13, fontWeight: 700, fontVariantNumeric: 'tabular-nums' }}>152 <span style={{ color: COLORS.textMuted, fontSize: 10 }}>(19.2)</span></span>
          </div>
        </div>

        {/* Body */}
        <div style={{ color: COLORS.textSecondary, fontSize: 11, lineHeight: 1.55, marginTop: 12 }}>
          A composed <b style={{ color: 'white' }}>81 off 62</b> from the skipper set the platform; Tom kept the engine ticking with 41 at 5. Rav's <b style={{ color: 'white' }}>4-for in the back end</b> sealed it.
        </div>

        {/* POTM nominee */}
        <div style={{ marginTop: 12, 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: 10 }}>
          <span style={{ color: COLORS.amber }}><SiteIcon name="trophy" size={14} /></span>
          <div style={{ flex: 1 }}>
            <div style={{ color: COLORS.amber, fontSize: 10, fontWeight: 700, letterSpacing: 0.4, textTransform: 'uppercase' }}>POTM nominee</div>
            <div style={{ color: 'white', fontSize: 11, fontWeight: 700, marginTop: 2 }}>Asha Patel · 81 (62)</div>
          </div>
          <span style={{ color: COLORS.sky, fontSize: 11, fontWeight: 700 }}>Vote ›</span>
        </div>

        {/* Actions */}
        <div style={{ display: 'flex', gap: 6, marginTop: 12 }}>
          <button style={{ flex: 1, padding: '8px 0', background: COLORS.accent, color: COLORS.accentInk, border: 'none', borderRadius: 8, fontWeight: 800, fontSize: 11, fontFamily: SITE_FONT, cursor: 'pointer' }}>Publish</button>
          <button style={{ flex: 1, padding: '8px 0', background: 'transparent', color: 'white', border: `1px solid ${COLORS.border}`, borderRadius: 8, fontWeight: 600, fontSize: 11, fontFamily: SITE_FONT, cursor: 'pointer' }}>Edit draft</button>
        </div>
      </div>
    </div>
  </PreviewPhone>
);

// ── @crease bot preview — chat thread w/ a bot reply
const PreviewBot = () => {
  // Use a render counter to re-key the typing-then-reply animation so it
  // looks live without depending on real intervals.
  const [tick, setTick] = useFSt(0);
  useFEff(() => {
    const t = setInterval(() => setTick(x => (x + 1) % 4), 1400);
    return () => clearInterval(t);
  }, []);
  return (
    <PreviewPhone color={SITE.accent}>
      <div style={{ position: 'absolute', inset: 0, background: COLORS.bg, color: 'white', fontFamily: SITE_FONT, display: 'flex', flexDirection: 'column' }}>
        {/* Header */}
        <div style={{ padding: '60px 16px 12px', display: 'flex', alignItems: 'center', gap: 12, borderBottom: `1px solid ${COLORS.border}` }}>
          <div style={{
            width: 38, height: 38, borderRadius: 999,
            background: `linear-gradient(135deg, ${SITE.accent}, ${SITE.player})`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: '#0B1220', fontWeight: 900, fontSize: 15,
            border: `1.5px solid rgba(34,197,94,0.5)`,
          }}>@</div>
          <div>
            <div style={{ color: 'white', fontSize: 14, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 6 }}>
              @crease
              <span style={{
                padding: '1px 6px', borderRadius: 4,
                background: 'rgba(34,197,94,0.16)', color: SITE.accent,
                fontSize: 9, fontWeight: 800, letterSpacing: 0.3,
              }}>BOT</span>
            </div>
            <div style={{ color: SITE.accent, fontSize: 10, fontWeight: 600 }}>Online · pulls from your club's data</div>
          </div>
        </div>

        {/* Messages */}
        <div style={{ flex: 1, padding: 14, overflow: 'hidden', 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: 12, fontWeight: 600,
            }}>@crease who hasn't replied to Sat?</div>
          </div>

          {/* Bot reply */}
          <div style={{ display: 'flex', gap: 6, alignItems: 'flex-start' }}>
            <div style={{
              width: 22, height: 22, borderRadius: 999, flexShrink: 0,
              background: `linear-gradient(135deg, ${SITE.accent}, ${SITE.player})`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: '#0B1220', fontWeight: 900, fontSize: 10,
            }}>@</div>
            <div style={{
              maxWidth: '82%', padding: '8px 12px', borderRadius: 14, borderTopLeftRadius: 4,
              background: COLORS.surface, color: 'white',
              fontSize: 12, lineHeight: 1.5, border: `1px solid ${COLORS.border}`,
            }}>
              3 players haven't responded to <b>Northbank, Sat 17 May</b>:
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, marginTop: 6 }}>
                {['Ben Carrow', 'Marcus Lin', 'Theo Marsh'].map(n => (
                  <span key={n} style={{ padding: '3px 8px', borderRadius: 999, background: COLORS.surfaceAlt, fontSize: 10, fontWeight: 600 }}>{n}</span>
                ))}
              </div>
              <div style={{ marginTop: 8, display: 'flex', gap: 6 }}>
                <button style={{
                  padding: '5px 10px', borderRadius: 8, border: 'none',
                  background: SITE.accent, color: SITE.accentInk,
                  fontSize: 10, fontWeight: 800, fontFamily: SITE_FONT, cursor: 'pointer',
                }}>Nudge all 3</button>
                <button style={{
                  padding: '5px 10px', borderRadius: 8,
                  background: 'transparent', color: 'white', border: `1px solid ${COLORS.border}`,
                  fontSize: 10, fontWeight: 600, fontFamily: SITE_FONT, cursor: 'pointer',
                }}>DM each</button>
              </div>
            </div>
          </div>

          {/* User #2 */}
          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
            <div style={{
              maxWidth: '78%', padding: '8px 12px', borderRadius: 14, borderTopRightRadius: 4,
              background: SITE.player, color: '#0B1220',
              fontSize: 12, fontWeight: 600,
            }}>draft a selection note</div>
          </div>

          {/* Typing dots */}
          <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
            <div style={{
              width: 22, height: 22, borderRadius: 999, flexShrink: 0,
              background: `linear-gradient(135deg, ${SITE.accent}, ${SITE.player})`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: '#0B1220', fontWeight: 900, fontSize: 10,
            }}>@</div>
            <div style={{
              padding: '10px 14px', borderRadius: 14, borderTopLeftRadius: 4,
              background: COLORS.surface, border: `1px solid ${COLORS.border}`,
              display: 'flex', gap: 4,
            }}>
              {[0, 1, 2].map(i => (
                <span key={i} style={{
                  width: 5, height: 5, borderRadius: 999, background: COLORS.textSecondary,
                  animation: `cl-dots 1.2s ease-in-out ${i * 0.18}s infinite`,
                }} />
              ))}
            </div>
          </div>
        </div>

        {/* Composer */}
        <div style={{ padding: 14, borderTop: `1px solid ${COLORS.border}` }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 14px', background: COLORS.surfaceAlt, borderRadius: 999 }}>
            <span style={{ color: SITE.accent, fontSize: 12, fontWeight: 700 }}>@crease</span>
            <span style={{ color: COLORS.textMuted, fontSize: 11 }}>ask anything…</span>
            <span style={{ marginLeft: 'auto', color: SITE.accent }}><SiteIcon name="sendH" size={14} /></span>
          </div>
        </div>
      </div>
    </PreviewPhone>
  );
};

// ── Club brand preview
const PreviewBrand = () => {
  const [accent, setAccent] = useFSt('#22C55E');
  const swatches = ['#22C55E', '#38BDF8', '#F59E0B', '#8B5CF6', '#EF4444'];
  return (
    <PreviewPhone color={SITE.admin}>
      <div style={{ position: 'absolute', inset: 0, background: COLORS.bg, padding: '60px 20px 0', color: 'white', fontFamily: SITE_FONT }}>
        <div style={{ color: 'white', fontSize: 22, fontWeight: 800, marginBottom: 14 }}>Club setup</div>
        <div style={{ background: COLORS.surface, border: `1px solid ${COLORS.border}`, borderRadius: 14, padding: 16, marginBottom: 12 }}>
          <div style={{ color: COLORS.textMuted, fontSize: 10, fontWeight: 700, letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: 10 }}>Accent colour</div>
          <div style={{ display: 'flex', gap: 10 }}>
            {swatches.map(s => (
              <div key={s} onClick={() => setAccent(s)} className="crease-press" style={{
                width: 32, height: 32, borderRadius: 10, background: s,
                border: `2px solid ${accent === s ? 'white' : 'transparent'}`,
                cursor: 'pointer', transition: 'border-color .15s',
              }} />
            ))}
          </div>
        </div>
        <div style={{ background: COLORS.surface, border: `1px solid ${COLORS.border}`, borderRadius: 14, padding: 16, marginBottom: 16 }}>
          <div style={{ color: COLORS.textMuted, fontSize: 10, fontWeight: 700, letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: 10 }}>Preview</div>
          <div style={{
            background: accent + '20', border: `1px solid ${accent}`, borderRadius: 10,
            padding: '10px 14px', color: accent, fontSize: 13, fontWeight: 700,
            display: 'flex', alignItems: 'center', gap: 8, transition: 'all .25s',
          }}>
            <SiteIcon name="check" size={14} stroke={2.5} /> Riverside CC · Available
          </div>
        </div>
        <div style={{ color: COLORS.textMuted, fontSize: 11, lineHeight: 1.5 }}>The accent applies to buttons, active tabs, and confirmation states across the whole club's app.</div>
      </div>
    </PreviewPhone>
  );
};

// Section header
const SectionHeader = ({ eyebrow, title, sub, align = 'center' }) => (
  <div style={{ textAlign: align, maxWidth: align === 'center' ? 720 : 'none', margin: align === 'center' ? '0 auto' : 0 }}>
    {eyebrow && (
      <div style={{ color: SITE.accent, fontSize: 12, fontWeight: 800, letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 14 }}>{eyebrow}</div>
    )}
    <h2 className="site-h2" style={{
      margin: 0, color: 'white', fontSize: 44, fontWeight: 900, letterSpacing: -1.2,
      lineHeight: 1.1, textWrap: 'balance',
    }}>{title}</h2>
    {sub && <p style={{ color: SITE.textDim, fontSize: 17, lineHeight: 1.6, marginTop: 16 }}>{sub}</p>}
  </div>
);

Object.assign(window, { FeatureSection, SectionHeader });