// Shared platform capability sections used by the consolidated How It Works page.
const { useState: useStateFeat, useEffect: useEffectFeat } = React;

function PlatformCapabilities({ go }) {
  useReveal();
  const features = [
    { visual: <AskPreview variant="features"/>, eyebrow: 'Community search', title: 'Ask your community anything in plain language', body: "Search your community's complete history across Slack, email, and your online community. Synchronize answers from real conversations and resources, cites its sources, and identifies the members best suited to help.", accent: 'var(--brand)' },
    { visual: <AnalyticsPreview/>, eyebrow: 'Analytics', title: "See who is active, where they participate, and how engagement is changing", body: 'Understand participation across every surface, compare platform engagement, and identify Super Users, Rising Stars, Declining Contributors, Spectators, and inactive members from real behavior.', accent: 'var(--accent-mint)' },
    { visual: <OnboardingPreview/>, eyebrow: 'Onboarding', title: 'Welcome every new member with a journey that adapts to them', body: 'Create one welcome journey that adapts to each member, delivering the right message through Slack, email, or your community at the moment it is most useful.', accent: 'var(--accent-coral)' },
    { kind: 'members', eyebrow: 'Member management', title: 'Manage every member from one place', body: 'Create new members, update profiles, change settings, and keep every record accurate from one place. Filter by engagement or member type, then export exactly the segment you need.', accent: 'var(--accent-mint)' },
    { kind: 'spaces', eyebrow: 'Space configuration', title: 'Configure every space without the busywork', body: 'Configure access, notifications, and participation rules once, then apply every change across Slack, email, and your online community at the same time.', accent: 'var(--brand)' },
    { kind: 'apps', eyebrow: 'Application forms', title: 'Review and approve new members with ease', body: 'Keep every application and decision in one place. Once approved, a member is added to the community and the right spaces, and their onboarding automations begin immediately.', accent: 'var(--accent-coral)' },
    { kind: 'directory', eyebrow: 'Member directory', title: 'Help every member find the right people', body: 'Offer searchable directories inside your community, as a public or password-protected page, or directly in Slack through a custom app.', accent: 'var(--accent-violet)' },
    { kind: 'broadcast', eyebrow: 'Mass messaging', title: 'Reach the right members in a few clicks', body: 'Choose the right member segment, write one message, and send it quickly as a Slack DM or email broadcast.', accent: 'var(--brand)' },
    { kind: 'email', eyebrow: 'Inbox experience', title: 'Give every member the inbox experience they want', body: 'Offer weekly, twice-weekly, or daily digests, with available options depending on the customer’s plan. Synchronize Pro members can also receive every new conversation as it happens and reply directly from their inbox.', accent: '#315EFB' },
    { kind: 'enrichment', eyebrow: 'Profile enrichment', title: 'Turn incomplete profiles into useful member context', body: 'Automatically turn an email address into a useful member profile with verified public details from sources such as LinkedIn—including name, role, company, biography, and photo.', accent: '#0A66C2' },
    { kind: 'digestHeader', eyebrow: 'Custom digest header', title: 'Put timely updates at the top of every digest', body: 'Set custom text at the top of every email to put relevant, timely, and important content directly in front of members in their inbox.', accent: 'var(--accent-coral)' },
    { kind: 'sso', eyebrow: 'Custom SSO', title: 'Make secure sign-in feel seamless', badge: 'Synchronize Pro', body: 'Offer secure access through passwordless sign-in, a custom OAuth provider, or single sign-on with Google and Microsoft.', accent: 'var(--brand)' },
  ];
  return (
    <>
      <section className="section feature-sequence-section">
        <div className="page">
          <div className="feature-stack">
            {features.map((feature, index) => (
              <StackFeature key={feature.kind || feature.title} {...feature} index={index}/>
            ))}
          </div>
        </div>
      </section>

      <section className="section-tight">
        <div className="page">
          <div className="structured-cta" style={{
            padding: '48px 56px', background: '#fff', border: '1px solid var(--site-line)',
            borderRadius: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 24,
          }}>
            <h2 className="display-2" style={{ fontSize: 36 }}>See the complete platform in action?</h2>
            <a href="#/get-started" onClick={e=>{e.preventDefault();go('get-started');}} className="btn btn-primary btn-lg">Book a demo →</a>
          </div>
        </div>
      </section>
    </>
  );
}

// Backward-compatible component for old /features links.
function FeaturesPage({ go }) {
  return <HowItWorksPage go={go}/>;
}

function StackFeature({ kind, visual, eyebrow, title, body, accent, badge, index }) {
  const reversed = index % 2 === 1;
  return (
    <article className={`feature-stack-row reveal ${reversed ? 'is-reversed' : ''}`}>
      <div className={`feature-stack-visual ${visual ? 'has-custom-visual' : ''}`} style={{ order: reversed ? 2 : 1 }}>
        {visual || <MiniDemo kind={kind} accent={accent} expanded/>}
      </div>
      <div className="feature-stack-copy" style={{ order: reversed ? 1 : 2 }}>
        <div className="eyebrow" style={{ color: accent, marginBottom: 12 }}>{eyebrow}</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap', marginBottom: 16 }}>
          <h3 className="display-2" style={{ fontSize: 'clamp(34px,4vw,50px)', margin: 0 }}>{title}</h3>
          {badge && <span style={{ padding: '4px 9px', borderRadius: 999, background: 'var(--accent-mint-bg)', color: '#12865f', fontSize: 9, fontWeight: 800, letterSpacing: '.07em', textTransform: 'uppercase' }}>{badge}</span>}
        </div>
        <p style={{ color: 'var(--site-ink-soft)', fontSize: 17, lineHeight: 1.6, maxWidth: 520 }}>{body}</p>
      </div>
    </article>
  );
}

// ---------- MINI DEMOS ----------
function MiniDemo({ kind, accent, expanded = false }) {
  const frame = {
    background: '#fff',
    border: '1px solid var(--site-line)',
    borderRadius: 2,
    padding: expanded ? 22 : 12,
    height: expanded ? '100%' : 210,
    overflow: 'hidden',
    position: 'relative',
    boxShadow: 'none',
  };
  if (kind === 'members')   return <div style={frame}><DemoMembers accent={accent}/></div>;
  if (kind === 'spaces')    return <div style={frame}><DemoSpaces accent={accent}/></div>;
  if (kind === 'apps')      return <div style={frame}><DemoApps accent={accent}/></div>;
  if (kind === 'directory') return <div style={frame}><DemoDirectory accent={accent}/></div>;
  if (kind === 'broadcast') return <div style={frame}><DemoBroadcast accent={accent}/></div>;
  if (kind === 'email')     return <div style={frame}><DemoEmail accent={accent}/></div>;
  if (kind === 'enrichment') return <div style={frame}><DemoEnrichment accent={accent}/></div>;
  if (kind === 'digestHeader') return <div style={frame}><DemoDigestHeader accent={accent}/></div>;
  if (kind === 'sso') return <div style={frame}><DemoSSO accent={accent}/></div>;
  return null;
}

// 1. Members: cursor glides down a list, row highlights
function DemoMembers({ accent }) {
  const rows = [
    { name: 'Elena Rossi', role: 'VP Product · Lumen', type: 'Super user' },
    { name: 'Kwame Mensah', role: 'Head of Finance · Quay', type: 'Rising star' },
    { name: 'Leo Hart', role: 'Founder · Parc', type: 'Super user' },
    { name: 'Martin Vogel', role: 'COO · Zego', type: 'Contributor' },
    { name: 'Andre Kim', role: 'COO · Fieldwork', type: 'Super user' },
  ];
  const [phase, setPhase] = useStateFeat(0);
  useEffectFeat(() => {
    const timer = setInterval(() => setPhase(value => (value + 1) % 5), 1350);
    return () => clearInterval(timer);
  }, []);
  const visibleRows = phase >= 2 ? rows.filter(row => row.type === 'Super user') : rows;
  return (
    <div style={{ height: '100%', position: 'relative', display: 'flex', flexDirection: 'column' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
        <div style={{ flex: 1, height: 32, borderRadius: 7, background: 'var(--site-bg-alt)', display: 'flex', alignItems: 'center', padding: '0 10px', fontSize: 10.5, color: 'var(--site-ink-soft)' }}>⌕&nbsp;&nbsp;Search members…</div>
        <button style={{ height: 32, padding: '0 10px', border: `1px solid ${phase >= 1 ? accent : 'var(--site-line)'}`, background: phase >= 1 ? `color-mix(in srgb, ${accent} 8%, white)` : '#fff', color: phase >= 1 ? accent : 'var(--site-ink)', borderRadius: 7, font: 'inherit', fontSize: 10, fontWeight: 700 }}>☷ Filter</button>
        <button style={{ height: 32, padding: '0 10px', border: '1px solid var(--site-line)', background: phase >= 3 ? accent : '#fff', color: phase >= 3 ? '#fff' : 'var(--site-ink)', borderRadius: 7, font: 'inherit', fontSize: 10, fontWeight: 700, transition: 'all .3s' }}>Export ↗</button>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', marginBottom: 8, minHeight: 22 }}>
        <span style={{ fontSize: 9, fontWeight: 750, color: 'var(--site-ink-soft)', letterSpacing: '.06em' }}>{phase >= 2 ? 'FILTERED · SUPER USERS' : 'ALL MEMBERS · 412'}</span>
        {phase >= 2 && <span style={{ marginLeft: 7, padding: '3px 7px', borderRadius: 99, background: `color-mix(in srgb, ${accent} 12%, white)`, color: accent, fontSize: 8, fontWeight: 800, animation: 'stack-pop .35s both' }}>Super users ×</span>}
      </div>
      <div style={{ flex: 1, border: '1px solid var(--site-line)', borderRadius: 9, overflow: 'hidden', background: '#fff' }}>
        {visibleRows.map((r, i) => (
          <div key={r.name} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 11px', borderTop: i ? '1px solid var(--site-line)' : 'none', animation: `stack-row-in .38s ${i * .06}s both` }}>
            <PortraitAvatar name={r.name} size={28}/>
            <div style={{ minWidth: 0, flex: 1 }}>
              <div style={{ fontSize: 11.5, fontWeight: 700 }}>{r.name}</div>
              <div style={{ fontSize: 9.5, color: 'var(--site-ink-soft)' }}>{r.role}</div>
            </div>
            <span style={{ padding: '3px 6px', borderRadius: 99, background: r.type === 'Super user' ? `color-mix(in srgb, ${accent} 10%, white)` : 'var(--site-bg-alt)', color: r.type === 'Super user' ? accent : 'var(--site-ink-soft)', fontSize: 8.5, fontWeight: 700 }}>{r.type}</span>
          </div>
        ))}
      </div>
      {phase === 1 && (
        <div style={{ position: 'absolute', zIndex: 3, top: 38, right: 72, width: 150, padding: 9, border: '1px solid var(--site-line)', borderRadius: 8, background: '#fff', boxShadow: '0 12px 28px rgba(24,24,50,.13)', animation: 'stack-pop .3s both' }}>
          <div style={{ fontSize: 8, fontWeight: 800, color: 'var(--site-ink-soft)', marginBottom: 6 }}>MEMBER TYPE</div>
          {['Super users','Rising stars','Contributors'].map((label, i) => <div key={label} style={{ padding: '6px 7px', borderRadius: 5, background: i === 0 ? `color-mix(in srgb, ${accent} 9%, white)` : 'transparent', color: i === 0 ? accent : 'var(--site-ink)', fontSize: 9.5, fontWeight: i === 0 ? 700 : 500 }}>{i === 0 ? '✓ ' : '○ '}{label}</div>)}
        </div>
      )}
      {phase === 4 && <div style={{ position: 'absolute', right: 10, bottom: 10, padding: '8px 10px', borderRadius: 7, background: '#181832', color: '#fff', fontSize: 9.5, fontWeight: 700, animation: 'stack-pop .35s both' }}>✓ 38 members exported</div>}
      <style>{`
        @keyframes stack-pop { from { opacity: 0; transform: translateY(5px) scale(.98); } to { opacity: 1; transform: none; } }
        @keyframes stack-row-in { from { opacity: .2; transform: translateY(4px); } to { opacity: 1; transform: none; } }
      `}</style>
    </div>
  );
}

// 2. Spaces: tree of spaces with toggle switches animating on
function DemoSpaces({ accent }) {
  const spaces = [
    { name: 'Member asks', members: 238, plats: ['slack','email','circle'] },
    { name: 'Leadership roundtables', members: 186, plats: ['slack','email'] },
    { name: 'Local meetups', members: 142, plats: ['email'] },
    { name: 'Operator opportunities', members: 209, plats: ['slack','circle'] },
  ];
  const [phase, setPhase] = useStateFeat(0);
  useEffectFeat(() => {
    const timer = setInterval(() => setPhase(value => (value + 1) % 6), 1250);
    return () => clearInterval(timer);
  }, []);
  return (
    <div style={{ height: '100%', position: 'relative', display: 'flex', flexDirection: 'column', gap: 8 }}>
      <div style={{ display: 'flex', alignItems: 'center', marginBottom: 4 }}>
        <div style={{ fontSize: 10, fontWeight: 750, color: 'var(--site-ink-soft)', letterSpacing: '0.05em' }}>COMMUNITY SPACES · 4</div>
        <span style={{ marginLeft: 'auto', fontSize: 9, color: accent, fontWeight: 750 }}>+ New space</span>
      </div>
      {spaces.map((s, i) => (
        <div key={s.name} style={{
          display: 'flex', alignItems: 'center', gap: 8,
          padding: '10px 11px', borderRadius: 8, border: '1px solid var(--site-line)',
          background: i === 0 && phase >= 1 ? `color-mix(in srgb, ${accent} 7%, white)` : '#fff', fontSize: 11,
          borderColor: i === 0 && phase >= 1 ? accent : 'var(--site-line)', transition: 'all .3s',
        }}>
          <span style={{ width: 6, height: 6, borderRadius: 2, background: accent }}/>
          <span style={{ minWidth: 0, flex: 1 }}><b style={{ display: 'block', fontSize: 10.5 }}>{s.name}</b><span style={{ fontSize: 8.5, color: 'var(--site-ink-soft)' }}>{s.members} members</span></span>
          <span style={{ display: 'flex', gap: 3, marginLeft: 'auto' }}>
            {s.plats.map(p => (
              <span key={p} style={{
                width: 20, height: 20, borderRadius: 4,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                background: '#fff', opacity: .85,
              }}><PlatformIcon kind={p} size={16}/></span>
            ))}
          </span>
          <span style={{ width: 31, height: 31, borderRadius: 7, display: 'flex', alignItems: 'center', justifyContent: 'center', background: i === 0 && phase >= 1 ? accent : 'var(--site-bg-alt)', color: i === 0 && phase >= 1 ? '#fff' : 'var(--site-ink-soft)', fontSize: 16 }}>⚙</span>
        </div>
      ))}
      {phase >= 1 && (
        <div style={{ position: 'absolute', inset: '34px 8px 8px', zIndex: 3, border: '1px solid var(--site-line)', borderRadius: 10, background: '#fff', boxShadow: '0 18px 42px rgba(24,24,50,.16)', padding: 15, animation: 'stack-pop .35s both' }}>
          <div style={{ display: 'flex', alignItems: 'center', paddingBottom: 11, borderBottom: '1px solid var(--site-line)' }}><div><b style={{ fontSize: 12 }}>Configure “Member asks”</b><div style={{ marginTop: 2, fontSize: 9, color: 'var(--site-ink-soft)' }}>Choose where this space appears and how it behaves.</div></div><span style={{ marginLeft: 'auto', color: 'var(--site-ink-soft)' }}>×</span></div>
          <div style={{ padding: '12px 0' }}>
            {[{label:'Sync new posts to Slack',kind:'slack',on:phase>=2},{label:'Include posts in email digests',kind:'email',on:phase>=3},{label:'Allow members to start threads',kind:'circle',on:true}].map((setting, i) => (
              <div key={setting.label} style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '9px 0', borderTop: i ? '1px solid var(--site-line)' : 'none' }}>
                <PlatformIcon kind={setting.kind} size={22}/><span style={{ flex: 1, fontSize: 10.5, fontWeight: 650 }}>{setting.label}</span>
                <span style={{ width: 30, height: 17, padding: 2, borderRadius: 99, background: setting.on ? accent : '#D6D4CE', display: 'flex', justifyContent: setting.on ? 'flex-end' : 'flex-start', transition: 'all .35s' }}><span style={{ width: 13, height: 13, borderRadius: '50%', background: '#fff' }}/></span>
              </div>
            ))}
          </div>
          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 7 }}><span style={{ padding: '7px 10px', fontSize: 9.5, color: 'var(--site-ink-soft)' }}>Cancel</span><span style={{ padding: '7px 12px', borderRadius: 6, background: phase >= 4 ? accent : 'var(--brand-tint)', color: phase >= 4 ? '#fff' : accent, fontSize: 9.5, fontWeight: 750, transition: 'all .3s' }}>{phase === 5 ? '✓ Saved' : 'Save changes'}</span></div>
        </div>
      )}
    </div>
  );
}

// 3. Applications: pending queue, approve/reject tags slide in
function DemoApps({ accent }) {
  const apps = [
    { name: 'Andre Kim', status: 'approve', reason: 'VC-backed · 120 employees' },
    { name: 'Monica Wells', status: 'pending', reason: 'Awaiting references' },
    { name: 'Ravi Desai', status: 'reject', reason: 'Out of scope: agency' },
  ];
  const [phase, setPhase] = useStateFeat(0);
  useEffectFeat(() => {
    const timer = setInterval(() => setPhase(value => (value + 1) % 4), 1550);
    return () => clearInterval(timer);
  }, []);
  return (
    <div style={{ height: '100%', position: 'relative' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 12 }}>
        <span style={{ fontSize: 10, fontWeight: 750, color: 'var(--site-ink-soft)', letterSpacing: '0.05em' }}>APPLICATION QUEUE</span>
        <span style={{ marginLeft: 'auto', fontSize: 10, fontWeight: 700, color: accent, background: `color-mix(in srgb, ${accent} 12%, white)`, padding: '1px 6px', borderRadius: 8 }}>3 new</span>
      </div>
      {apps.map((a, i) => (
        <div key={a.name} style={{
          display: 'flex', alignItems: 'center', gap: 10, padding: '11px 7px',
          borderBottom: i < apps.length - 1 ? '1px solid var(--site-line)' : 'none',
          fontSize: 11,
          background: i === 0 && phase >= 1 ? `color-mix(in srgb, ${accent} 7%, white)` : 'transparent',
          transition: 'all .35s ease',
        }}>
          <PortraitAvatar name={a.name} color={accent} size={30}/>
          <div style={{ minWidth: 0, flex: 1 }}>
            <div style={{ fontWeight: 700 }}>{a.name}</div>
            <div style={{ fontSize: 9.5, color: 'var(--site-ink-soft)', marginTop: 2 }}>{a.reason}</div>
          </div>
          <span style={{ fontSize: 9, fontWeight: 700, padding: '4px 8px', borderRadius: 99, background: '#FDF5E1', color: '#8A6500' }}>{i === 0 && phase === 3 ? '✓ Added' : 'Review →'}</span>
        </div>
      ))}
      {phase >= 1 && phase < 3 && (
        <div style={{ position: 'absolute', inset: '34px 5px 5px', zIndex: 3, padding: 12, border: '1px solid var(--site-line)', borderRadius: 10, background: '#fff', boxShadow: '0 18px 42px rgba(24,24,50,.16)', animation: 'stack-pop .35s both' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 9, paddingBottom: 8, borderBottom: '1px solid var(--site-line)' }}><PortraitAvatar name="Andre Kim" size={32}/><div><b style={{ fontSize: 12 }}>Andre Kim</b><div style={{ fontSize: 9, color: 'var(--site-ink-soft)' }}>Applied 12 minutes ago</div></div><span style={{ marginLeft: 'auto', color: 'var(--site-ink-soft)' }}>×</span></div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, padding: '9px 0' }}>
            {[['Current role','COO · Fieldwork'],['Company size','120 employees'],['Location','New York'],['Interested in','Operations, AI']].map(([label,value])=><div key={label} style={{ padding: 6, background: 'var(--site-bg-alt)', borderRadius: 6 }}><div style={{ fontSize: 8, color: 'var(--site-ink-soft)', marginBottom: 2 }}>{label}</div><b style={{ fontSize: 9.5 }}>{value}</b></div>)}
          </div>
          <div style={{ fontSize: 9, color: 'var(--site-ink-soft)', marginBottom: 8 }}>“I’m looking to compare operating systems with peers scaling through the same stage.”</div>
          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 7 }}><span style={{ padding: '7px 11px', border: '1px solid var(--site-line)', borderRadius: 6, fontSize: 9.5 }}>Decline</span><span style={{ padding: '7px 12px', borderRadius: 6, background: phase === 2 ? accent : `color-mix(in srgb, ${accent} 18%, white)`, color: phase === 2 ? '#fff' : accent, fontSize: 9.5, fontWeight: 750, transition: 'all .3s' }}>{phase === 2 ? '✓ Approving…' : 'Approve & add'}</span></div>
        </div>
      )}
      {phase === 3 && <div style={{ position: 'absolute', right: 8, bottom: 8, padding: '9px 11px', borderRadius: 7, background: '#168864', color: '#fff', fontSize: 9.5, fontWeight: 750, animation: 'stack-pop .35s both' }}>✓ Andre was added to the community</div>}
    </div>
  );
}

// 4. Directory: searchable profiles rendered across multiple directory surfaces
function DemoDirectory({ accent }) {
  const people = [
    { name: 'Victor L.', city: 'NYC', tags: ['NYC', 'Founders'] },
    { name: 'Caroline M.', city: 'LDN', tags: ['London'] },
    { name: 'Hassan K.', city: 'BLR', tags: ['Founders'] },
    { name: 'Gabriela S.', city: 'SFO', tags: [] },
    { name: 'Michael A.', city: 'BER', tags: ['Founders'] },
    { name: 'Yuna P.', city: 'TOR', tags: [] },
  ];
  const shareOptions = [
    { label: 'Embedded directory', detail: 'Inside your community', icon: 'circle' },
    { label: 'Public share link', detail: 'Anyone with the link', glyph: '↗' },
    { label: 'Password protected', detail: 'Require a shared password', glyph: '●' },
    { label: 'Slack directory app', detail: 'Search without leaving Slack', icon: 'slack' },
  ];
  const [phase, setPhase] = useStateFeat(0);
  useEffectFeat(() => {
    const timer = setInterval(() => setPhase(value => (value + 1) % 5), 1450);
    return () => clearInterval(timer);
  }, []);
  return (
    <div style={{ height: '100%', position: 'relative' }}>
      <div style={{ display: 'flex', alignItems: 'center', marginBottom: 12 }}>
        <div><b style={{ fontSize: 12 }}>Leadership Exchange directory</b><div style={{ fontSize: 9, color: 'var(--site-ink-soft)', marginTop: 2 }}>412 searchable members</div></div>
        <span style={{ marginLeft: 'auto', padding: '7px 10px', borderRadius: 6, border: `1px solid ${phase >= 1 ? accent : 'var(--site-line)'}`, background: phase >= 1 ? accent : '#fff', color: phase >= 1 ? '#fff' : 'var(--site-ink)', fontSize: 9.5, fontWeight: 750, transition: 'all .3s' }}>↗ Share directory</span>
      </div>
      <div style={{ height: 31, borderRadius: 7, background: 'var(--site-bg-alt)', display: 'flex', alignItems: 'center', padding: '0 10px', marginBottom: 10, color: 'var(--site-ink-soft)', fontSize: 9.5 }}>⌕&nbsp;&nbsp;Search by name, role, company, or expertise</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6 }}>
        {people.map((p, i) => (
          <div key={i} style={{
            padding: 10, border: '1px solid var(--site-line)', borderRadius: 8,
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
            background: '#fff', transition: `all .35s ${i * .035}s ease`,
          }}>
            <PortraitAvatar name={p.name} color={accent} size={30}/>
            <div style={{ fontSize: 10, fontWeight: 700, whiteSpace: 'nowrap' }}>{p.name}</div>
            <div style={{ fontSize: 8.5, color: 'var(--site-ink-soft)', letterSpacing: '0.04em' }}>{p.city}</div>
          </div>
        ))}
      </div>
      {phase >= 2 && (
        <div style={{ position: 'absolute', zIndex: 4, top: 42, right: 0, width: '88%', padding: 12, border: '1px solid var(--site-line)', borderRadius: 9, background: '#fff', boxShadow: '0 16px 36px rgba(24,24,50,.16)', animation: 'stack-pop .3s both' }}>
          <div style={{ fontSize: 10.5, fontWeight: 750, marginBottom: 8 }}>How should members access this directory?</div>
          {shareOptions.map((option, i) => {
            const selected = phase >= 3 && i === (phase === 3 ? 1 : 3);
            return <div key={option.label} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 7px', borderTop: i ? '1px solid var(--site-line)' : 'none', background: selected ? `color-mix(in srgb, ${accent} 8%, white)` : '#fff', transition: 'all .3s' }}>
              <span style={{ width: 24, height: 24, borderRadius: 6, background: selected ? accent : 'var(--site-bg-alt)', color: selected ? '#fff' : accent, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 9 }}>{option.icon ? <PlatformIcon kind={option.icon} size={18}/> : option.glyph}</span>
              <span style={{ flex: 1 }}><b style={{ display: 'block', fontSize: 9.5 }}>{option.label}</b><span style={{ fontSize: 8.5, color: 'var(--site-ink-soft)' }}>{option.detail}</span></span>
              <span style={{ width: 13, height: 13, borderRadius: '50%', border: `1px solid ${selected ? accent : 'var(--site-line)'}`, background: selected ? accent : '#fff', color: '#fff', fontSize: 8, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{selected ? '✓' : ''}</span>
            </div>;
          })}
        </div>
      )}
    </div>
  );
}

// 5. Broadcast: one message fans out to many recipients
function DemoBroadcast({ accent }) {
  const recipients = [
    'Samira Cole', 'Theo Bennett', 'Jules Martin', 'Anika Rao', 'Mateo Silva', 'Grace Liu',
  ];
  const [tick, setTick] = useStateFeat(0);
  useEffectFeat(() => {
    const timer = setInterval(() => setTick(value => (value + 1) % 8), 900);
    return () => clearInterval(timer);
  }, []);
  const mode = tick < 4 ? 'slack' : 'email';
  const sending = tick === 2 || tick === 6;
  const delivered = tick === 3 || tick === 7;
  return (
    <div style={{ position: 'relative', height: '100%' }}>
      <div style={{ display: 'flex', alignItems: 'center', marginBottom: 10 }}>
        <div style={{ fontSize: 9.5, fontWeight: 750, color: 'var(--site-ink-soft)', letterSpacing: '0.04em' }}>MESSAGE · RISING STARS · 104</div>
        <div style={{ display: 'flex', gap: 4, marginLeft: 'auto' }}>
          {[['slack','Slack DM'],['email','Email']].map(([kind,label])=><span key={kind} style={{ display: 'flex', alignItems: 'center', gap: 3, padding: '4px 6px', borderRadius: 6, background: mode === kind ? (kind === 'slack' ? 'var(--c-slack-bg)' : 'var(--c-email-bg)') : 'var(--site-bg-alt)', color: mode === kind ? (kind === 'slack' ? 'var(--c-slack)' : 'var(--c-email)') : 'var(--site-ink-soft)', fontSize: 8.5, fontWeight: 750, transition: 'all .3s' }}><PlatformIcon kind={kind} size={14}/>{label}</span>)}
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) 195px', gap: 0, height: 'calc(100% - 40px)', alignItems: 'stretch' }}>
        <div style={{ border: '1px solid var(--site-line)', borderRadius: 9, background: '#fff', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
          <div style={{ height: 30, display: 'flex', alignItems: 'center', gap: 7, padding: '0 9px', borderBottom: '1px solid var(--site-line)', background: 'var(--site-bg-alt)', color: 'var(--site-ink-soft)', fontSize: 9 }}>B&nbsp;&nbsp;<i>I</i>&nbsp;&nbsp;U&nbsp;&nbsp;↗&nbsp;&nbsp;☷ <span style={{ marginLeft: 'auto' }}>Personalize ▾</span></div>
          <div key={mode} style={{ flex: 1, padding: 11, animation: 'stack-row-in .35s both' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginBottom: 11 }}><PlatformIcon kind={mode} size={22}/><b style={{ fontSize: 10.5 }}>{mode === 'slack' ? 'Direct message' : 'Community announcement'}</b></div>
            <div style={{ fontSize: 11, fontWeight: 750, marginBottom: 7 }}>{mode === 'slack' ? 'Hi {FIRST_NAME}, a quick invitation' : 'Member roundtable this Thursday'}</div>
            <div style={{ fontSize: 9.5, lineHeight: 1.5, color: 'var(--site-ink-soft)' }}>{mode === 'slack' ? 'Join a small peer session on leading teams through change. Reply here and we’ll save your seat.' : 'We’re bringing together operators for a practical, 45-minute conversation. Reserve your place below.'}</div>
            <span style={{ display: 'inline-flex', marginTop: 12, padding: '6px 9px', borderRadius: 5, background: mode === 'slack' ? 'var(--c-slack)' : 'var(--c-email)', color: '#fff', fontSize: 8.5, fontWeight: 750 }}>{mode === 'slack' ? 'Reply to RSVP' : 'Reserve my place'}</span>
          </div>
          <div style={{ padding: '8px 10px', borderTop: '1px solid var(--site-line)', display: 'flex', alignItems: 'center' }}><span style={{ fontSize: 8.5, color: 'var(--site-ink-soft)' }}>104 selected</span><span style={{ marginLeft: 'auto', padding: '6px 9px', borderRadius: 5, background: sending || delivered ? accent : 'var(--brand-tint)', color: sending || delivered ? '#fff' : accent, fontSize: 8.5, fontWeight: 750 }}>{delivered ? '✓ Sent' : sending ? 'Sending…' : 'Send message'}</span></div>
        </div>
        <div style={{ display: 'grid', gridTemplateRows: `repeat(${recipients.length}, minmax(0,1fr))`, minHeight: 0 }}>
          {recipients.map((name, i) => <div key={name} style={{ minHeight: 0, display: 'grid', gridTemplateColumns: '66px minmax(0,1fr)', alignItems: 'center' }}>
            <span style={{ position: 'relative', width: '100%', height: 1, background: `color-mix(in srgb, ${accent} 34%, transparent)` }}>
              <span style={{ position: 'absolute', right: -1, top: '50%', width: 6, height: 6, borderTop: `1.5px solid ${accent}`, borderRight: `1.5px solid ${accent}`, transform: 'translateY(-50%) rotate(45deg)' }}/>
              {(sending || delivered) && <span style={{ position: 'absolute', left: 0, top: '50%', width: 5, height: 5, borderRadius: '50%', background: accent, transform: 'translateY(-50%)', boxShadow: `0 0 0 2px color-mix(in srgb, ${accent} 10%, transparent)`, animation: `message-fan 1s ${i * .1}s both` }}/>} 
            </span>
            <div style={{ minWidth: 0, paddingLeft: 8, display: 'flex', alignItems: 'center', gap: 7, opacity: delivered ? 1 : .78, transform: delivered ? 'translateX(0)' : 'translateX(2px)', transition: `all .3s ${i * .05}s` }}><PortraitAvatar name={name} size={28}/><span style={{ minWidth: 0 }}><b style={{ display: 'block', maxWidth: 84, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontSize: 8.5 }}>{name}</b><span style={{ display: 'block', marginTop: 1, fontSize: 7.5, color: delivered ? '#168864' : 'var(--site-ink-soft)' }}>{delivered ? '✓ Delivered' : 'Selected member'}</span></span></div>
          </div>)}
        </div>
      </div>
      <style>{`
        @keyframes message-fan { from { left: 0; opacity: 0; } 20% { opacity: 1; } 88% { opacity: 1; } to { left: calc(100% - 7px); opacity: .25; } }
      `}</style>
    </div>
  );
}

// 6. Email: cadence picker cycles; digest + reply-from-inbox
function DemoEmail({ accent }) {
  const experiences = [
    {
      tab: 'Weekly', subject: 'This week in Leadership Exchange', period: 'Conversations from the last week',
      summary: 'The discussions and member updates worth catching up on.',
      topics: [
        { name: 'Nadia Khan', space: 'AI in practice', title: 'How are teams teaching practical AI skills?', excerpt: 'We are testing small role-based workshops instead of one company-wide training.' },
        { name: 'Ben Carter', space: 'Member asks', title: 'A practical incident communications template', excerpt: 'Sharing the structure our team used to keep owners and updates clear.' },
      ],
    },
    {
      tab: 'Twice weekly', subject: 'Your midweek community catch-up', period: 'Conversations from the last three days',
      summary: 'A shorter recap of what members are discussing right now.',
      topics: [
        { name: 'Elena Rossi', space: 'Leadership', title: 'What makes an offsite genuinely useful?', excerpt: 'The best sessions seem to end with one decision and a clearly named owner.' },
        { name: 'Kwame Mensah', space: 'Member asks', title: 'Hiring your first security leader', excerpt: 'Would love to compare the scope and level that worked at this stage.' },
      ],
    },
    {
      tab: 'Daily', subject: 'Today in Leadership Exchange', period: 'Conversations from today',
      summary: 'A quick digest of today’s new questions and useful replies.',
      topics: [
        { name: 'Mina Alvarez', space: 'Member asks', title: 'How are teams evaluating AI tools?', excerpt: 'Looking for a lightweight review that product and security can both use.' },
        { name: 'Theo Bennett', space: 'Introductions', title: 'Meet three new community members', excerpt: 'New operators joined from Berlin, Toronto, and New York today.' },
      ],
    },
    {
      tab: 'Every convo', pro: true, subject: 'A new question in Member asks', sender: 'Maya Torres',
      period: 'Member asks · just now', title: 'How are teams setting boundaries for AI agents?',
      message: 'We are moving from experimentation into broader adoption. I’d love to learn what approval rules, data boundaries, and human review steps have worked for other teams.',
    },
  ];
  const [active, setActive] = useStateFeat(0);
  useEffectFeat(() => {
    const t = setInterval(() => setActive(a => (a + 1) % experiences.length), 2200);
    return () => clearInterval(t);
  }, []);
  const experience = experiences[active];
  const isLive = Boolean(experience.pro);
  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      <div style={{ display: 'flex', gap: 2, marginBottom: 6, background: 'var(--site-bg-alt)', padding: 2, borderRadius: 7 }}>
        {experiences.map((option, i) => (
          <div key={option.tab} style={{
            minWidth: 0, flex: 1, height: 22, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 3, textAlign: 'center', fontSize: 8.25, fontWeight: 650,
            padding: '0 2px', borderRadius: 5,
            background: i === active ? '#fff' : 'transparent',
            color: i === active ? accent : 'var(--site-ink-soft)',
            boxShadow: i === active ? '0 1px 3px rgba(0,0,0,0.08)' : 'none',
            transition: 'all .3s',
          }}><span style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{option.tab}</span>{option.pro && <span style={{ flexShrink: 0, padding: '1px 4px', borderRadius: 3, background: 'var(--accent-mint-bg)', color: '#12865f', fontSize: 6.25, fontWeight: 850, letterSpacing: '.03em' }}>PRO</span>}</div>
        ))}
      </div>
      <div style={{ border: '1px solid var(--site-line)', borderRadius: 10, overflow: 'hidden', background: '#fff', flex: 1, display: 'flex', flexDirection: 'column' }}>
        <div className="demo-email-message-head" style={{ display: 'flex', alignItems: 'center', gap: 7, padding: '9px 10px', borderBottom: '1px solid var(--site-line)', background: '#F8FAFD' }}>
          <span className="demo-email-icon-frame demo-email-icon-frame--inbox"><PlatformIcon kind="email" size={17}/></span>
          {isLive
            ? <span className="demo-email-icon-frame demo-email-icon-frame--avatar"><PortraitAvatar name={experience.sender} size={24}/></span>
            : <span className="demo-email-icon-frame demo-email-icon-frame--community"><PlatformIcon kind="circle" size={16}/></span>}
          <div style={{ minWidth: 0, flex: 1 }}>
            <div key={active} style={{ fontSize: 10.5, fontWeight: 700, color: 'var(--site-ink)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', animation: 'hit-in .35s both' }}>
              {experience.subject}
            </div>
            <div style={{ fontSize: 8.5, color: 'var(--site-ink-soft)' }}>{isLive ? `${experience.sender} via Leadership Exchange` : 'Leadership Exchange'} · to you</div>
          </div>
          <span style={{ color: 'var(--site-ink-soft)', fontSize: 11 }}>☆&nbsp;&nbsp;↩</span>
        </div>
        {!isLive ? (
          <div key={'digest-'+active} style={{ padding: '12px 13px', display: 'flex', flexDirection: 'column', gap: 8, flex: 1, animation: 'email-experience-in .4s both' }}>
            <div><div style={{ fontFamily: 'var(--font-display)', fontSize: 15, fontWeight: 650, lineHeight: 1.15 }}>{experience.period}</div><div style={{ marginTop: 3, fontSize: 8.5, color: 'var(--site-ink-soft)' }}>{experience.summary}</div></div>
            {experience.topics.map((topic, i) => <div key={topic.title} style={{ padding: '8px 9px', border: '1px solid var(--site-line)', borderRadius: 7, background: i === 0 ? 'var(--c-email-bg)' : '#fff' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}><PortraitAvatar name={topic.name} size={22}/><span style={{ minWidth: 0, flex: 1 }}><b style={{ display: 'block', fontSize: 9.5 }}>{topic.name}</b><span style={{ display: 'block', fontSize: 7.5, color: 'var(--site-ink-soft)' }}>{topic.space}</span></span><span style={{ padding: '3px 5px', borderRadius: 4, border: `1px solid color-mix(in srgb, ${accent} 45%, white)`, color: accent, fontSize: 7, fontWeight: 700 }}>Open thread</span></div>
              <div style={{ marginTop: 6, fontSize: 9.5, fontWeight: 750 }}>{topic.title}</div>
              <div style={{ marginTop: 2, fontSize: 8, lineHeight: 1.35, color: 'var(--site-ink-soft)' }}>{topic.excerpt}</div>
              <div className="demo-email-actions demo-email-actions--digest">
                <span className="demo-email-action"><PlatformIcon kind="email" size={11}/>Reply by email</span>
                <span className="demo-email-action"><PlatformIcon kind="circle" size={11}/>Respond in community</span>
              </div>
            </div>)}
          </div>
        ) : (
          <div key={'live-'+active} style={{ padding: '13px 14px', display: 'flex', flexDirection: 'column', flex: 1, animation: 'email-experience-in .4s both' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><PortraitAvatar name={experience.sender} size={30}/><span><b style={{ display: 'block', fontSize: 10.5 }}>{experience.sender}</b><span style={{ fontSize: 8, color: 'var(--site-ink-soft)' }}>{experience.period}</span></span></div>
            <div style={{ marginTop: 14, fontFamily: 'var(--font-display)', fontSize: 15, fontWeight: 650, lineHeight: 1.18 }}>{experience.title}</div>
            <div style={{ marginTop: 8, fontSize: 9.5, lineHeight: 1.5, color: 'var(--site-ink-soft)' }}>{experience.message}</div>
            <div className="demo-email-actions demo-email-actions--live">
              <span className="demo-email-action" style={{ borderColor: accent, color: accent }}><PlatformIcon kind="circle" size={11}/>Community</span>
              <span className="demo-email-action" style={{ borderColor: accent, color: accent }}><PlatformIcon kind="slack" size={11}/>Slack</span>
              <span className="demo-email-action" style={{ borderColor: accent, color: accent }}><PlatformIcon kind="email" size={11}/>Reply by email</span>
            </div>
            <div style={{ marginTop: 'auto', padding: '8px 9px', background: 'var(--site-bg-alt)', borderRadius: 6, textAlign: 'center', fontSize: 8.25, color: 'var(--site-ink-soft)' }}>Replying to this email posts your response back to the shared conversation.</div>
          </div>
        )}
      </div>
      <style>{`
        @keyframes hit-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
        @keyframes email-experience-in { from { opacity: .35; transform: translateY(5px); } to { opacity: 1; transform: none; } }
      `}</style>
    </div>
  );
}

// 7. Enrichment: incomplete member data becomes a complete public profile
function DemoEnrichment({ accent }) {
  const [phase, setPhase] = useStateFeat(0);
  useEffectFeat(() => {
    const timer = setInterval(() => setPhase(value => (value + 1) % 6), 1050);
    return () => clearInterval(timer);
  }, []);
  const enabled = phase >= 1;
  const revealed = Math.max(0, phase - 1);
  const details = [
    ['Company', 'Northstar'],
    ['Location', 'Berlin, Germany'],
    ['Biography', 'Scaling engineering teams and AI infrastructure.'],
  ];
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginBottom: 14, padding: '10px 11px', borderRadius: 8, border: `1px solid ${enabled ? accent : 'var(--site-line)'}`, background: enabled ? `color-mix(in srgb, ${accent} 6%, white)` : '#fff', transition: 'all .35s' }}>
        <span style={{ width: 23, height: 23, borderRadius: 5, background: '#0A66C2', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 800 }}>in</span>
        <span style={{ fontSize: 10.5, fontWeight: 750, color: 'var(--site-ink)' }}>Enrich new members automatically</span>
        <span style={{ marginLeft: 'auto', width: 32, height: 18, borderRadius: 99, padding: 2, background: enabled ? accent : '#C9C7C0', display: 'flex', justifyContent: enabled ? 'flex-end' : 'flex-start', boxShadow: enabled ? `0 0 0 3px color-mix(in srgb, ${accent} 10%, transparent)` : 'none', transition: 'all .35s' }}>
          <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#fff' }}/>
        </span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '112px 30px minmax(0,1fr)', alignItems: 'center', gap: 8, flex: 1 }}>
        <div style={{ alignSelf: 'stretch', border: '1px solid var(--site-line)', borderRadius: 9, padding: 11, background: 'var(--site-bg-alt)', display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 10 }}>
          <span style={{ width: 30, height: 30, borderRadius: '50%', background: '#fff', border: '1px solid var(--site-line)', color: 'var(--site-ink-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13 }}>@</span>
          <div><div style={{ fontSize: 8, color: 'var(--site-ink-soft)', marginBottom: 3 }}>NEW MEMBER</div><div style={{ fontSize: 10, fontWeight: 700, lineHeight: 1.25, wordBreak: 'break-word' }}>alex@northstar.ai</div></div>
          <div style={{ fontSize: 8, color: 'var(--site-ink-soft)' }}>Name, role, and profile details missing</div>
        </div>
        <div style={{ position: 'relative', height: 20, alignSelf: 'center', width: '100%' }}>
          <span style={{ position: 'absolute', left: 0, right: 4, top: '50%', height: 1, transform: 'translateY(-50%)', background: enabled ? accent : 'var(--site-line)', transition: 'background .3s' }}/>
          <span style={{ position: 'absolute', right: 1, top: '50%', width: 7, height: 7, borderTop: `1.5px solid ${enabled ? accent : 'var(--site-line)'}`, borderRight: `1.5px solid ${enabled ? accent : 'var(--site-line)'}`, transform: 'translateY(-50%) rotate(45deg)', transition: 'border-color .3s' }}/>
          {enabled && <span style={{ position: 'absolute', left: 0, top: '50%', width: 7, height: 7, borderRadius: '50%', background: accent, transform: 'translateY(-50%)', boxShadow: '0 0 0 3px color-mix(in srgb, #0A66C2 12%, transparent)', animation: 'enrich-travel 1.2s infinite ease-in-out' }}/>} 
        </div>
        <div style={{ position: 'relative', alignSelf: 'stretch', overflow: 'hidden', border: `1px solid ${revealed >= 4 ? accent : 'var(--site-line)'}`, borderRadius: 9, padding: 11, background: '#fff', transition: 'border-color .35s', display: 'flex', flexDirection: 'column', gap: 8 }}>
          {(phase === 2 || phase === 3) && <span key={phase} style={{ position: 'absolute', zIndex: 3, left: 0, right: 0, height: 28, top: 0, background: `linear-gradient(180deg, color-mix(in srgb, ${accent} 6%, transparent), color-mix(in srgb, ${accent} 24%, transparent), transparent)`, borderBottom: `1px solid ${accent}`, animation: 'enrich-sweep 1.05s ease-in-out both' }}/>} 
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            {revealed >= 1 ? <div style={{ animation: 'enriched-field-in .4s both' }}><PortraitAvatar name="Alex Morgan" size={34}/></div> : <span style={{ width: 34, height: 34, borderRadius: '50%', background: '#E7E6E1', flexShrink: 0 }}/>} 
            {revealed >= 1 ? <div style={{ animation: 'enriched-field-in .4s both' }}><b style={{ display: 'block', fontSize: 11 }}>Alex Morgan</b><div style={{ fontSize: 8.5, color: 'var(--site-ink-soft)', marginTop: 2 }}>VP Engineering</div></div> : <div style={{ flex: 1 }}><span style={{ display: 'block', width: '58%', height: 7, borderRadius: 5, background: '#D9D8D2' }}/><span style={{ display: 'block', width: '42%', height: 5, marginTop: 6, borderRadius: 5, background: '#E7E6E1' }}/></div>}
          </div>
          {details.map(([label,value], i) => {
            const isFilled = revealed >= i + 2;
            return <div key={label} style={{ minHeight: 31, padding: '6px 7px', borderRadius: 5, background: isFilled ? `color-mix(in srgb, ${accent} 6%, white)` : 'var(--site-bg-alt)', transition: `all .4s ${i * .07}s` }}><div style={{ fontSize: 7.5, color: 'var(--site-ink-soft)' }}>{label}</div>{isFilled ? <div style={{ marginTop: 2, fontSize: 8.5, fontWeight: 650, animation: 'enriched-field-in .4s both' }}>{value}</div> : <span style={{ display: 'block', width: i === 2 ? '86%' : '52%', height: 5, marginTop: 5, borderRadius: 5, background: '#DDDBD5' }}/>}</div>;
          })}
          <span style={{ marginTop: 'auto', alignSelf: 'flex-start', fontSize: 7.5, fontWeight: 800, color: revealed >= 4 ? '#168864' : accent }}>{revealed >= 4 ? '✓ PROFILE ENRICHED' : enabled ? 'ENRICHING PROFILE…' : 'AUTOMATION OFF'}</span>
        </div>
      </div>
      <style>{`
        @keyframes enrich-travel { from { left: 0; opacity: 0; } 20% { opacity: 1; } to { left: calc(100% - 9px); opacity: .2; } }
        @keyframes enrich-sweep { from { top: -28px; opacity: 0; } 15% { opacity: 1; } to { top: calc(100% - 20px); opacity: 0; } }
        @keyframes enriched-field-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
      `}</style>
    </div>
  );
}

// 8. Digest header: configurable content rotates into the top of every digest
function DemoDigestHeader({ accent }) {
  const content = [
    { tab: 'Announcement', eyebrow: 'Community update', title: 'Applications for the fall cohort close Friday.', bg: '#EEEAFE' },
    { tab: 'Event', eyebrow: 'Upcoming event', title: 'Member roundtable · Thursday at 1 PM ET', bg: '#E5F7EF' },
    { tab: 'Sponsor', eyebrow: 'Partner spotlight', title: 'This week’s digest is supported by Northstar.', bg: '#FFF0E9' },
  ];
  const [active, setActive] = useStateFeat(0);
  const [typed, setTyped] = useStateFeat('');
  useEffectFeat(() => {
    let cancelled = false;
    const timers = [];
    const title = content[active].title;
    let index = 0;
    setTyped('');
    const type = () => {
      if (cancelled) return;
      index += 1;
      setTyped(title.slice(0, index));
      if (index < title.length) timers.push(setTimeout(type, 42));
      else timers.push(setTimeout(() => setActive(value => (value + 1) % content.length), 1500));
    };
    timers.push(setTimeout(type, 500));
    return () => { cancelled = true; timers.forEach(clearTimeout); };
  }, [active]);
  const item = content[active];
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
      <div style={{ display: 'flex', gap: 4, marginBottom: 8 }}>
        {content.map((option, i) => (
          <span key={option.tab} style={{ flex: 1, minWidth: 0, textAlign: 'center', padding: '4px 3px', borderRadius: 6, background: i === active ? accent : 'var(--site-bg-alt)', color: i === active ? '#fff' : 'var(--site-ink-soft)', fontSize: 8.5, fontWeight: 700, transition: 'all .3s' }}>{option.tab}</span>
        ))}
      </div>
      <div style={{ marginBottom: 9, padding: 9, border: '1px solid var(--site-line)', borderRadius: 8, background: 'var(--site-bg-alt)' }}>
        <div style={{ display: 'flex', alignItems: 'center', marginBottom: 6 }}><span style={{ fontSize: 8, fontWeight: 800, color: 'var(--site-ink-soft)', letterSpacing: '.05em' }}>HEADER CONTENT</span><span style={{ marginLeft: 'auto', fontSize: 8, color: accent }}>Visible in every digest</span></div>
        <div style={{ minHeight: 45, padding: '8px 9px', borderRadius: 6, background: '#fff', border: `1px solid ${typed.length < item.title.length ? accent : 'var(--site-line)'}`, fontSize: 10.5, lineHeight: 1.35, transition: 'border-color .3s' }}>{typed || ' '}{typed.length < item.title.length && <span style={{ display: 'inline-block', width: 2, height: 12, background: accent, marginLeft: 1, verticalAlign: 'middle', animation: 'ask-blink 1s infinite' }}/>}</div>
        <div style={{ display: 'flex', gap: 6, marginTop: 7 }}><span style={{ padding: '5px 8px', borderRadius: 5, background: accent, color: '#fff', fontSize: 8, fontWeight: 750 }}>Save header</span><span style={{ padding: '5px 8px', borderRadius: 5, border: '1px solid var(--site-line)', fontSize: 8, color: 'var(--site-ink-soft)' }}>Schedule</span></div>
      </div>
      <div style={{ flex: 1, border: '1px solid var(--site-line)', borderRadius: 9, overflow: 'hidden', background: '#fff' }}>
        <div style={{ height: 26, display: 'flex', alignItems: 'center', gap: 7, padding: '0 9px', borderBottom: '1px solid var(--site-line)', color: 'var(--site-ink-soft)', fontSize: 8.5 }}>
          <PlatformIcon kind="email" size={16}/>
          <b style={{ color: 'var(--site-ink)' }}>Leadership Exchange digest</b>
          <span style={{ marginLeft: 'auto' }}>Preview</span>
        </div>
        <div key={active} style={{ margin: 9, padding: '10px 11px', borderRadius: 8, background: item.bg, borderLeft: `3px solid ${accent}`, animation: 'digest-header-in .45s cubic-bezier(.2,.8,.2,1) both' }}>
          <div style={{ color: accent, fontSize: 7.5, fontWeight: 800, letterSpacing: '.08em', textTransform: 'uppercase' }}>{item.eyebrow}</div>
          <div style={{ marginTop: 4, minHeight: 28, fontSize: 11, fontWeight: 750, lineHeight: 1.25 }}>{typed || 'Your custom content appears here.'}</div>
          <div style={{ marginTop: 6, fontSize: 8, fontWeight: 700, color: accent }}>Learn more →</div>
        </div>
        <div style={{ padding: '0 10px', display: 'flex', flexDirection: 'column', gap: 6 }}>
          <span style={{ width: '68%', height: 5, borderRadius: 4, background: '#D9D7D0' }}/>
          <span style={{ width: '91%', height: 4, borderRadius: 4, background: '#E8E6E0' }}/>
          <span style={{ width: '82%', height: 4, borderRadius: 4, background: '#E8E6E0' }}/>
        </div>
      </div>
      <style>{`@keyframes digest-header-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }`}</style>
    </div>
  );
}

// 9. SSO: a secure sign-in path cycles through supported identity options
function DemoSSO({ accent }) {
  const providers = [
    { name: 'Passwordless', glyph: '✦', detail: 'Secure email link', button: 'Email me a secure sign-in link' },
    { name: 'Custom OAuth', glyph: '↗', detail: 'Your own identity provider', button: 'Continue with custom OAuth' },
    { name: 'Single sign-on', glyph: '▦', detail: 'Google or Microsoft', button: null },
  ];
  const [active, setActive] = useStateFeat(0);
  useEffectFeat(() => {
    const timer = setInterval(() => setActive(index => (index + 1) % providers.length), 1900);
    return () => clearInterval(timer);
  }, []);
  const provider = providers[active];
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
      <div style={{ display: 'flex', alignItems: 'center', marginBottom: 10 }}>
        <div style={{ fontSize: 9.5, fontWeight: 750 }}>Sign-in configuration</div>
        <span style={{ marginLeft: 'auto', padding: '3px 7px', borderRadius: 99, color: '#12865f', background: 'var(--accent-mint-bg)', fontSize: 7.5, fontWeight: 800, letterSpacing: '.06em' }}>SYNCHRONIZE PRO</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,minmax(0,1fr))', gap: 5, marginBottom: 12 }}>
        {providers.map((option, i) => (
          <div key={option.name} style={{ minWidth: 0, padding: '6px 4px', borderRadius: 7, border: `1px solid ${i === active ? `color-mix(in srgb, ${accent} 45%, transparent)` : 'var(--site-line)'}`, background: i === active ? `color-mix(in srgb, ${accent} 6%, transparent)` : '#fff', textAlign: 'center', transition: 'all .3s' }}>
            <div style={{ width: 18, height: 18, margin: '0 auto 3px', borderRadius: 5, display: 'flex', alignItems: 'center', justifyContent: 'center', background: i === active ? accent : 'var(--site-bg-alt)', color: i === active ? '#fff' : 'var(--site-ink-soft)', fontSize: 9, fontWeight: 800 }}>{option.glyph}</div>
            <div style={{ fontSize: 8, fontWeight: 700, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{option.name}</div>
          </div>
        ))}
      </div>
      <div key={active} style={{ flex: 1, border: '1px solid var(--site-line)', borderRadius: 9, background: 'linear-gradient(145deg,#F4F3FF,#fff)', padding: 13, display: 'grid', gridTemplateColumns: '1.2fr .8fr', gap: 12, animation: 'sso-flow-in .4s both' }}>
        <div style={{ border: '1px solid var(--site-line)', borderRadius: 8, background: '#fff', padding: 14, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <div style={{ width: 31, height: 31, marginBottom: 10, borderRadius: 8, background: accent, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800 }}>S</div>
          <b style={{ fontFamily: 'var(--font-display)', fontSize: 15 }}>Sign in to Leadership Exchange</b>
          <span style={{ marginTop: 3, color: 'var(--site-ink-soft)', fontSize: 8.5 }}>{provider.detail}</span>
          {active === 0 && <div style={{ marginTop: 11, height: 31, border: '1px solid var(--site-line)', borderRadius: 6, display: 'flex', alignItems: 'center', padding: '0 9px', color: 'var(--site-ink-soft)', fontSize: 9 }}>you@company.com</div>}
          {active < 2 ? <div style={{ marginTop: active === 0 ? 7 : 16, minHeight: 32, borderRadius: 6, background: accent, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, fontSize: 9, fontWeight: 750 }}><span style={{ width: 17, height: 17, borderRadius: 4, background: 'rgba(255,255,255,.18)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{provider.glyph}</span>{provider.button}</div> : <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 12 }}>
            <div style={{ minHeight: 31, border: '1px solid var(--site-line)', borderRadius: 6, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7, background: '#fff', fontSize: 8.75, fontWeight: 700 }}><span style={{ width: 17, height: 17, borderRadius: '50%', border: '1px solid #E4E2DC', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: '#4285F4', fontSize: 10, fontWeight: 800 }}>G</span>Continue with Google</div>
            <div style={{ minHeight: 31, border: '1px solid var(--site-line)', borderRadius: 6, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7, background: '#fff', fontSize: 8.75, fontWeight: 700 }}><span style={{ width: 16, height: 16, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1 }}><span style={{ background: '#F25022' }}/><span style={{ background: '#7FBA00' }}/><span style={{ background: '#00A4EF' }}/><span style={{ background: '#FFB900' }}/></span>Continue with Microsoft</div>
          </div>}
          <div style={{ marginTop: 9, textAlign: 'center', color: 'var(--site-ink-soft)', fontSize: 7.5 }}>No password stored by Synchronize</div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center' }}>
          <div style={{ position: 'relative', width: 82, height: 82, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <span style={{ position: 'absolute', inset: 0, borderRadius: '50%', border: `1px solid color-mix(in srgb, ${accent} 30%, transparent)`, animation: 'security-ring 2s infinite ease-out' }}/>
            <span style={{ position: 'absolute', inset: 10, borderRadius: '50%', background: `color-mix(in srgb, ${accent} 8%, white)`, border: `1px solid color-mix(in srgb, ${accent} 26%, transparent)` }}/>
            <span style={{ position: 'relative', width: 34, height: 38, background: accent, color: '#fff', clipPath: 'polygon(50% 0, 92% 15%, 84% 70%, 50% 100%, 16% 70%, 8% 15%)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, fontWeight: 800 }}>✓</span>
          </div>
          <b style={{ marginTop: 10, fontSize: 10.5 }}>Identity verified</b>
          <span style={{ marginTop: 4, fontSize: 8.5, color: 'var(--site-ink-soft)', lineHeight: 1.35 }}>Encrypted sign-in<br/>Organization-managed access</span>
          <span style={{ marginTop: 9, padding: '4px 7px', borderRadius: 99, background: '#E6F7F0', color: '#168864', fontSize: 7.5, fontWeight: 800 }}>SECURE CONNECTION</span>
        </div>
      </div>
      <style>{`
        @keyframes sso-flow-in { from { opacity: .45; transform: translateY(4px); } to { opacity: 1; transform: none; } }
        @keyframes security-ring { from { opacity: .55; transform: scale(.72); } to { opacity: 0; transform: scale(1.12); } }
      `}</style>
    </div>
  );
}

Object.assign(window, { FeaturesPage, PlatformCapabilities });