function Personalization() {
  return (
    <section className="section pers" id="personalization">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow eyebrow-on-dark">03 / AI-powered personalization</div>
            <h2 style={{color:'#fff'}}>
              Every message<br/>
              <span className="serif-it" style={{color:'#a5b4fc'}}>knows why it's there.</span>
            </h2>
          </div>
          <p className="lede">
            AiDA writes signal-specific icebreakers that reference exactly why the prospect is
            relevant right now, by role, company, and the event that triggered the match.
            Edit any template. Warm and professional. Never robotic.
          </p>
        </div>

        <div className="compare">
          <div className="msg bad">
            <div className="tag">Generic cold message</div>
            <div className="from">
              <div className="av" style={{background:'#444'}}>SD</div>
              <div className="from-meta">
                <div className="nm">Some SDR</div>
                <div className="ro">A platform you've never heard of</div>
              </div>
            </div>
            <div className="body">
              <p>Hi {'{first_name}'},</p>
              <p>
                I hope this finds you well. I came across your profile and noticed you
                work at {'{company}'}. We help teams like yours streamline their
                operations and drive growth. Would you be open to a quick 15-minute call
                next week?
              </p>
              <p>Best,<br/>Some SDR</p>
            </div>
            <div className="msg-foot">
              <span className="bad">● merge field leak</span>
              <span className="bad">● zero context</span>
              <span className="bad">● sub-1% reply</span>
            </div>
          </div>

          <div className="msg good">
            <div className="tag"><ISparkle size={11}/> AiDA · signal-based</div>
            <div className="from">
              <div className="av">AD</div>
              <div className="from-meta">
                <div className="nm">You, written by AiDA</div>
                <div className="ro">Signal: New Role · 11 days in</div>
              </div>
            </div>
            <div className="body">
              <p>Hey Devin,</p>
              <p>
                Saw you stepped into <span className="hl">Head of RevOps at Lumen Bio</span> a
                couple weeks back, congrats. First 90 days is usually when teams audit the stack,
                so the timing felt right.
              </p>
              <p>
                We work with revenue leaders at <span className="hl">post-Series-B life-sci companies</span> on
                the pipeline-to-quota gap, happy to share what's working for similar teams if useful.
                Worth 15 minutes?
              </p>
            </div>
            <div className="msg-foot">
              <span className="ok">● signal-anchored</span>
              <span className="ok">● 2 ICP filters</span>
              <span className="ok">● ~14% reply</span>
            </div>
          </div>
        </div>

        <div style={{marginTop:48, display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:20}}>
          <FactCard h="Per-signal templates"
            p="Each signal type has its own editable opener. Merge fields, tone, and conversation plan you control."/>
          <FactCard h="Contextual every time"
            p="Role, company, signal, recency, and prior touches all feed the message, no two prospects get the same line."/>
          <FactCard h="Warm by default"
            p="Trained on what actually gets replies in B2B services. Confident, direct, never gimmicky or AI-sounding."/>
        </div>
      </div>
    </section>
  );
}

function FactCard({ h, p }) {
  return (
    <div style={{
      background: 'rgba(255,255,255,0.03)',
      border: '1px solid rgba(255,255,255,0.08)',
      borderRadius: 14,
      padding: 22,
    }}>
      <h4 style={{color:'#fff', fontSize: 15}}>{h}</h4>
      <p style={{color:'rgba(255,255,255,0.6)', fontSize: 14, lineHeight:1.55, margin:'8px 0 0'}}>{p}</p>
    </div>
  );
}
window.Personalization = Personalization;