function Signals() {
  const signals = [
    { id: 'funding', n: '01', I: IFunding, h: 'Company funding', s: 1,
      one: 'Companies that just raised capital are investing in growth, and tools.',
      d: 'AiDA finds decision makers at newly funded companies, filtered by amount, round type, and recency. Series A through D, debt, secondary, pick what matches your ICP and AiDA watches the wires daily.' },
    { id: 'role', n: '02', I: INewRole, h: 'New role or promotion', s: 2,
      one: 'The first 90 days in a new role is when buyers re-evaluate everything.',
      d: 'AiDA catches role changes and promotions within weeks of the move, the window where the new leader is auditing their stack, vendors, and processes, and most open to a conversation.' },
    { id: 'tech', n: '03', I: ITechStack, h: 'Tech stack',
      one: 'Companies using a specific tool have known workflow gaps.',
      d: 'Pinpoint leaders at companies running competitor products, complementary tools, or technologies that signal a buying need, like CRMs, marketing automation, or specific stacks.' },
    { id: 'hiring', n: '04', I: IHiring, h: 'Hiring signals',
      one: 'A company hiring for a specific role is scaling that function.',
      d: 'When a company opens roles that map to your buyer, AiDA surfaces the hiring manager and their leadership team, the people building budget and authority around the new initiative.' },
    { id: 'engage', n: '05', I: IEngagement, h: 'Content engagement',
      one: 'When ideal buyers engage with relevant content, they raise their hand.',
      d: 'AiDA watches the posts and topics your ICP cares about. When they like, comment, or share, AiDA picks it up and starts a conversation grounded in what they just engaged with.' },
    { id: 'viewer', n: '06', I: IViewer, h: 'Website visitors',
      one: 'Someone browsing your website is already evaluating you.',
      d: 'AiDA identifies the companies and people visiting your website, qualifies them against your ICP automatically, and adds the best-fit visitors to a follow-up sequence within hours.' },
    { id: 'comp', n: '07', I: ICompetitor, h: 'Competitor engagement',
      one: 'People engaging with competitor content are actively researching.',
      d: 'Plug in competitor handles. AiDA monitors their followers, commenters, and engagers, and turns that audience into your pipeline with messaging that speaks to the comparison.' },
  ];
  const [open, setOpen] = React.useState('funding');

  return (
    <section className="section" id="signals">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow eyebrow-indigo">01 / Signal-based prospecting</div>
            <h2>Reach buyers<br/>in moments of change.</h2>
          </div>
          <p className="lede">
            AiDA doesn't blast cold lists. It watches real-time buying signals across your
            market and surfaces the people who are actually in motion right now — the only
            people worth reaching today. New signal types added as the market shifts.
          </p>
        </div>

        <div className="signals-grid">
          {signals.map((s, i) => {
            const IconC = s.I;
            const isOpen = open === s.id;
            return (
              <div
                key={s.id}
                className={`sig sig-${i+1} ${isOpen ? 'expanded' : ''}`}
                onClick={() => setOpen(isOpen ? null : s.id)}
              >
                <div className="num">{s.n}</div>
                <div className="ico"><IconC size={20} /></div>
                <h3>{s.h}</h3>
                <p className="one">{s.one}</p>
                <div className="detail">{s.d}</div>
                <div className="more">
                  {isOpen ? 'Less' : 'How it works'} <span className="chev"><IChev size={12}/></span>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}
window.Signals = Signals;