function Outreach() {
  const feats = [
    { I: IInbox, h: 'Open Profile Detection',
      p: 'Identifies prospects with open profiles for free InMail, doubling outreach volume without burning a single connection request.' },
    { I: IRoute, h: 'Smart Routing',
      p: 'Auto-selects the right path per prospect: InMail for open profiles, connection request for everyone else, direct message for existing 1st-degree connections.' },
    { I: IClock, h: 'Human-like Sending',
      p: 'Randomized delays, business-hours-only, timezone-aware. Never looks automated. Never trips a pattern detector. Built to protect your LinkedIn account.' },
    { I: IShield, h: 'Account Safety',
      p: 'Daily and weekly caps, gradual ramp-up for new accounts, and global deduplication, no prospect is ever contacted twice, ever.' },
  ];

  return (
    <section className="section outreach" id="outreach">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow eyebrow-indigo">02 / Intelligent outreach engine</div>
            <h2>Not a bulk sender.<br/>A smart system.</h2>
          </div>
          <p className="lede">
            Mass-blast tools risk your account and burn your reputation in a week.
            AiDA sends like a human, routes like a strategist, and treats every send like it matters.
          </p>
        </div>

        <div className="outreach-grid">
          <div className="feature-list">
            {feats.map((f) => {
              const Ic = f.I;
              return (
                <div className="feature" key={f.h}>
                  <div className="ic"><Ic size={18}/></div>
                  <div>
                    <h4>{f.h}</h4>
                    <p>{f.p}</p>
                  </div>
                </div>
              );
            })}
          </div>

          <SequenceMock />
        </div>
      </div>
    </section>
  );
}

function SequenceMock() {
  return (
    <div className="seq-card">
      <div className="seq-head">
        <div className="title">
          <span className="tag">SEQUENCE</span>
          Open Profile Path · 5 steps
        </div>
        <div className="status"><span className="dot"></span> active</div>
      </div>
      <div className="seq-body">
        <div className="seq-step active">
          <div className="dot"><IViewer size={14}/></div>
          <div>
            <div className="lbl">View profile</div>
            <div className="sub">Light touch, appears in their notifications</div>
          </div>
          <div className="when">+0m</div>
        </div>
        <div className="seq-step">
          <div className="dot"><IClock size={14}/></div>
          <div>
            <div className="lbl">Wait 5 minutes</div>
            <div className="sub">Human-paced delay</div>
          </div>
          <div className="when">+5m</div>
        </div>
        <div className="seq-step">
          <div className="dot"><IMail size={14}/></div>
          <div>
            <div className="lbl">InMail · personalized opener</div>
            <div className="sub">3 variants · references buying signal</div>
          </div>
          <div className="when">Day 1</div>
        </div>
        <div className="seq-step">
          <div className="dot"><IMail size={14}/></div>
          <div>
            <div className="lbl">InMail follow-up</div>
            <div className="sub">Pattern-interrupt · only if no reply</div>
          </div>
          <div className="when">Day 4</div>
        </div>
        <div className="seq-step">
          <div className="dot"><IBolt size={14}/></div>
          <div>
            <div className="lbl">Final touch</div>
            <div className="sub">Soft close · social proof + CTA</div>
          </div>
          <div className="when">Day 8</div>
        </div>
        <div className="seq-branch">
          <IShuffle size={14}/> Branches automatically on connection status, open profile, 2nd degree, 1st degree.
        </div>
      </div>
    </div>
  );
}
window.Outreach = Outreach;