function Intelligence() {
  return (
    <section className="section" id="intelligence">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow eyebrow-indigo">04 / Full prospect intelligence</div>
            <h2>Context before<br/>the conversation.</h2>
          </div>
          <p className="lede">
            Every lead lands with the dossier your team needs to walk in informed ,
            scoring, firmographics, the specific signal that surfaced them, and the
            best path to reach them.
          </p>
        </div>

        <div className="intel-grid">
          <div>
            <ul style={{listStyle:'none', padding:0, margin:0, display:'grid', gap:18}}>
              <IntelItem h="Contact + company scoring"
                p="AiDA ranks prospects so your team always works the strongest leads first, by signal strength, role match, and firmographic fit."/>
              <IntelItem h="Firmographics built in"
                p="Industry, headcount, HQ, and funding history, verified, not scraped, on every lead, automatically."/>
              <IntelItem h="Signal context attached"
                p="See exactly which signal surfaced them and why they're relevant now: the funding round, the role change, the post they engaged."/>
              <IntelItem h="Open-profile status flagged"
                p="Know upfront whether you can send free InMail or need a connection request, so the outreach path is always optimal."/>
            </ul>
          </div>
          <ProspectCard />
        </div>
      </div>
    </section>
  );
}

function IntelItem({ h, p }) {
  return (
    <li style={{paddingLeft: 28, position:'relative'}}>
      <span style={{
        position:'absolute', left:0, top:6, width:16, height:16, borderRadius:'50%',
        background:'var(--indigo-soft)', color:'var(--indigo)', display:'grid', placeItems:'center'
      }}><ICheck size={10}/></span>
      <h4 style={{fontSize: 17}}>{h}</h4>
      <p style={{margin:'4px 0 0', color:'var(--ink-mute)', fontSize:14.5, lineHeight:1.55}}>{p}</p>
    </li>
  );
}

function ProspectCard() {
  return (
    <div className="prospect-card">
      <div className="pc-head">
        <div className="pc-av">DP</div>
        <div>
          <div className="pc-name">Devin Park</div>
          <div className="pc-role">Head of RevOps · Lumen Bio</div>
        </div>
        <div className="pc-score">
          <div className="n">91</div>
          <div className="l">AiDA score</div>
        </div>
      </div>
      <div className="pc-grid">
        <div className="row"><span className="k">Industry</span><span className="v">Life Sciences</span></div>
        <div className="row"><span className="k">Headcount</span><span className="v">240</span></div>
        <div className="row"><span className="k">HQ</span><span className="v">Boston, MA</span></div>
        <div className="row"><span className="k">Funding</span><span className="v">Series B · $42M</span></div>
        <div className="row"><span className="k">Time in role</span><span className="v">11 days</span></div>
        <div className="row"><span className="k">Outreach</span><span className="tag">Open Profile</span></div>
      </div>
      <div className="pc-signal">
        <div className="pcs-h"><INewRole size={12}/> Signal: New role</div>
        <div className="pcs-t">
          Started as Head of RevOps at Lumen Bio 11 days ago. Previously RevOps Lead at
          Halio Therapeutics. Lumen Bio raised $42M Series B last quarter, growth mode.
        </div>
      </div>
      <div className="pc-foot">
        <span className="chip ok"><ICheck size={11}/> Verified email</span>
        <span className="chip">+1 415···</span>
        <span className="chip">ICP fit · 4 / 4</span>
      </div>
    </div>
  );
}
window.Intelligence = Intelligence;