// Content Intelligence (Content Agent Beta): product preview
function ContentIntelligence() {
  return (
    <section id="intelligence" className="ci-section" data-screen-label="Content Agent Beta">
      <div className="ci-inner">
        <div className="ci-head">
          <span className="hub-eyebrow" style={{color:'var(--emerald-light)'}}>Content Agent · Beta · Founder Content Intelligence</span>
          <h2>The private <strong style={{color:'var(--emerald-light)'}}>intelligence layer</strong> behind your founder voice.</h2>
          <p>Every call, essay, and deck you produce becomes training data for a private voice model. Content Agent surfaces the narratives your market cares about, drafts them in your cadence, and attributes outcomes back to content. Your voice, distributed at scale.</p>
        </div>

        <div className="ci-app">
          <aside className="ci-side">
            <div className="ci-side-brand">
              <span className="dot" style={{background:'var(--emerald-light)'}}/>
              <span>Content Agent · Beta</span>
            </div>
            <div className="ci-nav">
              <div className="ci-nav-item active"><IconGrid size={15}/> Overview</div>
              <div className="ci-nav-item"><IconTarget size={15}/> Signal Radar</div>
              <div className="ci-nav-item"><IconPen size={15}/> Drafts</div>
              <div className="ci-nav-item"><IconMic size={15}/> Voice Model</div>
              <div className="ci-nav-item"><IconBook size={15}/> Knowledge</div>
            </div>
            <div className="ci-nav-group">Channels</div>
            <div className="ci-nav">
              <div className="ci-nav-item"><IconMessage size={15}/> LinkedIn</div>
              <div className="ci-nav-item"><IconFile size={15}/> Newsletter</div>
              <div className="ci-nav-item"><IconUsers size={15}/> LP Briefs</div>
              <div className="ci-nav-item"><IconSettings size={15}/> Settings</div>
            </div>
          </aside>
          <div className="ci-main">
            <div className="ci-topbar">
              <div className="ci-crumb">Workspace / <span>Weekly Overview</span></div>
              <div className="ci-search"><IconSearch size={14}/> Search knowledge, drafts, signals…</div>
            </div>
            <div>
              <h3 className="ci-h2">This week's signal</h3>
              <p className="ci-h2-sub">Apr 19 to Apr 25 · 146 sources analyzed · synced with your voice model 2h ago</p>
            </div>
            <div className="ci-kpi-row">
              <div className="ci-kpi" style={{borderLeftColor:'var(--emerald)'}}><div className="ci-kpi-label">Voice Match</div><div className="ci-kpi-value">94<span style={{fontSize:14,color:'#94a3b8'}}>%</span></div><div className="ci-kpi-delta">+2.1 vs last wk</div></div>
              <div className="ci-kpi green"><div className="ci-kpi-label">Signal Score</div><div className="ci-kpi-value">88</div><div className="ci-kpi-delta">+6 vs last wk</div></div>
              <div className="ci-kpi" style={{borderLeftColor:'var(--emerald)'}}><div className="ci-kpi-label">Drafts Ready</div><div className="ci-kpi-value">12</div><div className="ci-kpi-delta">3 awaiting review</div></div>
              <div className="ci-kpi orange"><div className="ci-kpi-label">LP Reach</div><div className="ci-kpi-value">2.4k</div><div className="ci-kpi-delta down">-4.0% engagement</div></div>
            </div>
            <div className="ci-split">
              <div className="ci-card">
                <h4>Topic radar <span className="ci-pill" style={{background:'rgba(134,239,172,.14)',color:'var(--emerald-light)'}}>live</span></h4>
                <p className="ci-card-sub">Ranked by audience lift × voice fit</p>
                <div className="radar-list">
                  {[
                    {s: 92, c: 'hi', t: 'Why boutique AI firms outperform platforms for mid-market', m: [{tag:'Positioning'},'3 drafts','Trending']},
                    {s: 88, c: 'hi', t: 'The 30-day playbook: what actually ships in week 1', m: [{tag:'Method'},'2 drafts','High demand']},
                    {s: 74, c: 'med', t: 'AI governance for regulated brokers: a practical template', m: [{tag:'Compliance'},'1 draft']},
                    {s: 61, c: 'med', t: 'Content Agent vs hiring a content marketer: the math', m: [{tag:'GTM'},'—']},
                  ].map((x,i) => (
                    <div key={i} className="radar-item">
                      <div className={`radar-score ${x.c === 'med' ? 'med' : ''}`} style={x.c==='hi'?{borderColor:'var(--emerald)'}:{}}>{x.s}</div>
                      <div>
                        <div className="radar-title">{x.t}</div>
                        <div className="radar-meta">{x.m.map((y,j) => typeof y === 'string' ? <span key={j}>{y}</span> : <span key={j} className="tag" style={{color:'var(--emerald-light)'}}>#{y.tag}</span>)}</div>
                      </div>
                      <div className="radar-action"><IconArrowRight size={16}/></div>
                    </div>
                  ))}
                </div>
              </div>
              <div style={{display:'flex',flexDirection:'column',gap:18}}>
                <div className="ci-card">
                  <h4>Publishing cadence</h4>
                  <p className="ci-card-sub">Last 12 weeks</p>
                  <div className="chart">
                    {[30,45,38,62,50,70,55,80,72,95,88,110].map((h,i) => (
                      <div key={i} className="chart-col">
                        <div className={`chart-bar ${i > 8 ? 'accent' : ''}`} style={{height: h + 'px', background: i > 8 ? 'linear-gradient(180deg,var(--emerald-light),var(--emerald))' : 'linear-gradient(180deg,var(--emerald),var(--emerald-deep))'}}/>
                        <div className="chart-label">{i < 9 ? ['W04','W06','W08','W10','W12','W14','W16','W18','W20'][i] : ['W22','W24','Now'][i-9]}</div>
                      </div>
                    ))}
                  </div>
                  <div className="chart-legend">
                    <span><i style={{background:'var(--emerald)'}}/>Drafted</span>
                    <span><i style={{background:'var(--emerald-light)'}}/>Published</span>
                  </div>
                </div>
                <div className="ci-card">
                  <h4>Voice fingerprint</h4>
                  <p className="ci-card-sub">Derived from 142 founder artifacts</p>
                  <div className="voice-fp">
                    {[
                      {l:'Directness',v:82},
                      {l:'Numeracy',v:91},
                      {l:'Calm tone',v:78},
                      {l:'Contrarian',v:64},
                      {l:'Reassurance',v:71},
                    ].map((x,i) => (
                      <div key={i} className="voice-row">
                        <div className="voice-row-label">{x.l}</div>
                        <div className="voice-track"><div className="voice-fill" style={{width: x.v + '%', background:'linear-gradient(90deg,var(--emerald),var(--emerald-light))'}}/></div>
                        <div className="voice-row-val">{x.v}</div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:24,marginTop:56}} className="ci-features">
          {[
            {Icon: IconMic, t: 'Voice fingerprint', d: 'Your calls, essays, and memos train a private voice model. Never shared, never used to train anyone else.'},
            {Icon: IconTarget, t: 'Weekly signal radar', d: 'Surfaces the narratives your market is actually asking about, scored against your domain authority.'},
            {Icon: IconActivity, t: 'Outcome attribution', d: 'Ties published content to pipeline, LP touches, and inbound opportunities, not vanity metrics.'},
          ].map((f,i) => {
            const Ic = f.Icon;
            return (
              <div key={i} style={{padding:'20px 0'}}>
                <div style={{width:40,height:40,borderRadius:8,background:'rgba(134,239,172,.14)',display:'flex',alignItems:'center',justifyContent:'center',color:'var(--emerald-light)',marginBottom:14}}><Ic size={20}/></div>
                <h4 style={{font:'600 17px/1.3 var(--font-sans)',color:'#fff',margin:'0 0 6px'}}>{f.t}</h4>
                <p style={{font:'400 14px/1.6 var(--font-sans)',color:'#cbd5e1',margin:0,maxWidth:320}}>{f.d}</p>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}
window.ContentIntelligence = ContentIntelligence;