// Signals — 6 signal cards with hover-reveal of source evidence.
const SIGNALS = [
  {
    label: 'Hiring momentum',
    icon: 'briefcase',
    body: 'A target company is hiring multiple roles connected to the problem you solve.',
    evidence: '"VP of Operations" + "Implementation Lead" + "Customer Success Architect" — 3 ops-adjacent roles posted in 14 days at Northwind Logistics.',
    angle: 'Operations is staffing up — handoff drag is the likely pain.',
    source: 'LinkedIn Jobs · 14d window',
  },
  {
    label: 'Role change',
    icon: 'user',
    body: 'A new leader joins and may be looking to make visible progress in their first year.',
    evidence: 'Sarah Chen joined Veridian Health as COO 21 days ago. Previous COO at Series-B SaaS that ran ops modernization.',
    angle: 'New COO + ops background → priority on early operational wins.',
    source: 'LinkedIn · profile change',
  },
  {
    label: 'Repeated job posting',
    icon: 'rotate',
    body: 'A role is reposted or stays open, suggesting pain, urgency, or a failed search.',
    evidence: '"Senior Implementation Manager" reposted at Rivermark Capital on day 28. Same listing, slightly higher band.',
    angle: 'Failed search → hiring or service alternative on the table.',
    source: 'Job board crawl · 28d',
  },
  {
    label: 'LinkedIn activity',
    icon: 'megaphone',
    body: 'Relevant people are posting about problems, initiatives, tools, conferences, or priorities tied to your offer.',
    evidence: '"We\'re finally tackling the spaghetti of post-sale handoffs this quarter…" — VP CS, 2.3k impressions, 41 comments.',
    angle: 'Public commitment to a project you can credibly help with.',
    source: 'LinkedIn post · 6d',
  },
  {
    label: 'Operational complexity',
    icon: 'layers',
    body: 'Public data suggests manual workflows, legacy systems, or process strain.',
    evidence: 'Career page mentions "Excel-based reporting" and "manual reconciliations" across 3 of 7 finance roles.',
    angle: 'Process strain showing up in the way they describe the work.',
    source: 'Careers page · scraped',
  },
  {
    label: 'Modernization intent',
    icon: 'spark',
    body: 'The company is hiring, posting, or investing around AI, automation, or transformation.',
    evidence: 'New "Head of AI Enablement" role + 2 LinkedIn posts from CEO mentioning "agentic workflows" in last 30 days.',
    angle: 'Active mandate to modernize → budget likely allocated.',
    source: 'Mixed · 30d',
  },
];

function SigIcon({ name }) {
  const stroke = 'currentColor';
  const sw = 1.6;
  const common = { width: 18, height: 18, viewBox: '0 0 24 24', fill: 'none', stroke, strokeWidth: sw, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'briefcase': return (<svg {...common}><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"/><path d="M3 13h18"/></svg>);
    case 'user': return (<svg {...common}><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>);
    case 'rotate': return (<svg {...common}><path d="M3 12a9 9 0 0 1 15-6.7L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16"/><path d="M3 21v-5h5"/></svg>);
    case 'megaphone': return (<svg {...common}><path d="M3 11v2a2 2 0 0 0 2 2h2l4 5V4l-4 5H5a2 2 0 0 0-2 2z"/><path d="M16 8a5 5 0 0 1 0 8"/><path d="M19 5a9 9 0 0 1 0 14"/></svg>);
    case 'layers': return (<svg {...common}><path d="M12 3 2 8l10 5 10-5-10-5z"/><path d="m2 13 10 5 10-5"/><path d="m2 18 10 5 10-5"/></svg>);
    case 'spark': return (<svg {...common}><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6 8 8M16 16l2.4 2.4M5.6 18.4 8 16M16 8l2.4-2.4"/></svg>);
    default: return null;
  }
}

function SignalCard({ s, layout = 'split', isActive, onActivate, onDeactivate }) {
  const open = isActive;
  return (
    <div
      className="card signal-card"
      onMouseEnter={onActivate}
      onMouseLeave={onDeactivate}
      onFocus={onActivate}
      onBlur={onDeactivate}
      tabIndex={0}
      style={{
        position: 'relative', overflow: 'hidden',
        transition: 'transform 300ms var(--ease-out), border-color 300ms, box-shadow 300ms',
        borderColor: open ? 'color-mix(in srgb, var(--signal) 35%, var(--rule))' : 'var(--rule)',
        cursor: 'default',
        ...(open ? {
          zIndex: 20,
          boxShadow: '0 20px 60px rgba(0,0,0,0.45), 0 0 0 1px color-mix(in srgb, var(--signal) 20%, transparent)',
        } : {}),
      }}
    >
      {/* Header */}
      <div style={{
        padding: '18px 20px',
        display: 'flex', alignItems: 'center', gap: 12,
        borderBottom: '1px solid var(--rule)',
      }}>
        <div style={{
          width: 32, height: 32, borderRadius: 8,
          background: 'color-mix(in srgb, var(--signal) 15%, transparent)',
          color: 'var(--signal)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <SigIcon name={s.icon} />
        </div>
        <div style={{ flex: 1 }}>
          <div style={{
            fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 500,
            color: 'var(--fg)', letterSpacing: '-0.01em',
          }}>{s.label}</div>
          <div className="upper-mono" style={{ marginTop: 2, fontSize: 9 }}>{s.source}</div>
        </div>
      </div>
      {/* Body */}
      <div style={{ padding: 20 }}>
        <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--fg-mute)', marginBottom: 14 }}>{s.body}</p>

        {/* Evidence — collapsed/expanded */}
        <div style={{
          maxHeight: open ? 200 : 0,
          opacity: open ? 1 : 0,
          overflow: 'hidden',
          transition: 'max-height 360ms var(--ease-out), opacity 240ms',
        }}>
          <div style={{
            padding: 12, borderRadius: 8,
            background: 'var(--bg)',
            border: '1px solid color-mix(in srgb, var(--signal) 25%, var(--rule))',
            marginBottom: 10,
          }}>
            <div className="upper-mono" style={{ fontSize: 9, marginBottom: 6, color: 'var(--signal)' }}>Evidence</div>
            <div style={{ fontFamily: 'var(--font-body)', fontStyle: 'italic', fontSize: 13, lineHeight: 1.5, color: 'var(--fg)' }}>{s.evidence}</div>
          </div>
          <div style={{
            padding: '10px 12px', borderRadius: 8,
            background: 'transparent', border: '1px dashed var(--rule-strong)',
          }}>
            <div className="upper-mono" style={{ fontSize: 9, marginBottom: 4 }}>Suggested angle</div>
            <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--fg)', lineHeight: 1.5 }}>{s.angle}</div>
          </div>
        </div>

        {!open && (
          <div className="upper-mono" style={{ fontSize: 10, color: 'var(--fg-mute)', display: 'flex', alignItems: 'center', gap: 6 }}>
            <span>Hover for evidence</span>
            <ArrowRight size={10} />
          </div>
        )}
      </div>
    </div>
  );
}

function Signals({ layout = 'grid' }) {
  const [activeIdx, setActiveIdx] = React.useState(null);
  const hasActive = activeIdx !== null;
  return (
    <section className="bp-section" id="signals">
      <div className="container">
        <SectionEyebrow num="03" label="Why now" />

        {/* Problem framing */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'minmax(0, 1.1fr) minmax(0, 1fr)',
          gap: 'clamp(32px, 5vw, 80px)', alignItems: 'start', marginBottom: 24,
        }}>
          <Reveal>
            <h2 className="t-h2" style={{ maxWidth: '14ch' }}>
              Your network <span className="t-italic" style={{ color: 'var(--signal)' }}>works.</span>{' '}
              It just has limits.
            </h2>
          </Reveal>
          <Reveal delay={120} style={{ paddingTop: 18 }}>
            <p className="t-lede" style={{ color: 'var(--fg-mute)', maxWidth: '46ch' }}>
              Referrals work because they come with real context. BetterPipe finds that same kind of context outside your existing network — by reading the signals companies are already putting out.
            </p>
          </Reveal>
        </div>

        {/* Transition to signals */}
        <Reveal delay={180} style={{ marginBottom: 56 }}>
          <p className="upper-mono" style={{ color: 'var(--signal)', fontSize: 11 }}>
            What we look for ↓
          </p>
        </Reveal>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 16,
          position: 'relative',
        }}>

          {SIGNALS.map((s, i) => (
            <Reveal key={i} delay={i * 60} style={{ position: 'relative', zIndex: activeIdx === i ? 20 : 1 }}>
              <SignalCard
                s={s}
                isActive={activeIdx === i}
                onActivate={() => setActiveIdx(i)}
                onDeactivate={() => setActiveIdx(null)}
              />
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          #signals .container > div:last-of-type { grid-template-columns: repeat(2, 1fr) !important; }
        }
        @media (max-width: 560px) {
          #signals .container > div:last-of-type { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

window.Signals = Signals;