// Section 2, The research moment: Company Intelligence + linked challenge
const Research = () => {
  const signals = [
    {
      id: 'S-01',
      sources: ['LinkedIn hiring', 'G2 reviews'],
      headline: '8 of your last 11 engineering hires focus on data infrastructure.',
      body: 'G2 reviews from the same period mention "slow reporting" 14 times. You\u2019re building what customers are asking for, but not fast enough, or not in the direction they expect.',
      tag: 'product / engineering',
      linked: true,
    },
    {
      id: 'S-02',
      sources: ['Companies House', 'Job postings'],
      headline: 'You\u2019ve hired a Head of Partnerships twice in two years.',
      body: 'That\u2019s usually a strategy gap, not a hiring gap. Worth asking your commercial team what\u2019s actually blocking the partnerships motion before a third hire.',
      tag: 'commercial',
      linked: false,
    },
    {
      id: 'S-03',
      sources: ['Glassdoor', 'Press releases'],
      headline: '"Decisions feel opaque" appears in 23% of Glassdoor reviews this year, up from 8% two years ago.',
      body: 'Three VP-level departures in 18 months. This is an execution risk, not a culture problem. Strategy isn\u2019t reaching the people meant to carry it out.',
      tag: 'leadership',
      linked: false,
    },
  ];

  return (
    <section style={{
      background: T.paper,
      padding: '120px 32px 140px',
      position: 'relative',
    }}>
      <div style={{ maxWidth: 1120, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <SectionLabel>Why the questions land</SectionLabel>
          <h2 className="display" style={{
            fontSize: 'clamp(28px, 3.6vw, 44px)',
            fontWeight: 700, letterSpacing: -0.8, color: T.ink,
            lineHeight: 1.15, maxWidth: 820, margin: '0 auto',
          }}>
            Other tools start with a blank form. Spark reads your company first.
          </h2>
          <p style={{
            marginTop: 18, fontSize: 17, lineHeight: 1.55, color: T.ink2,
            maxWidth: 640, marginLeft: 'auto', marginRight: 'auto',
          }}>
            That is why every challenge is specific to you, not a template. Public hiring, reviews, press, financials and competitive moves, triangulated into a briefing your team would otherwise spend a week assembling.
          </p>
        </div>

        {/* Intelligence card */}
        <div style={{
          background: T.paper,
          borderRadius: 16,
          border: `1px solid ${T.border}`,
          boxShadow: '0 16px 48px rgba(15,43,26,0.06)',
          overflow: 'hidden',
        }}>
          {/* Card header */}
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            padding: '20px 28px',
            borderBottom: `1px solid ${T.borderSoft}`,
            background: T.paperOff,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
              <div style={{
                width: 36, height: 36, borderRadius: 8,
                background: T.greenLight, color: T.greenDark,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Icon d={["M21 21l-4.35-4.35", "M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16z"]} size={18} />
              </div>
              <div>
                <div className="mono" style={{ fontSize: 11, color: T.ink4, letterSpacing: 0.5, marginBottom: 2 }}>
                  COMPANY INTELLIGENCE, BRIEFING
                </div>
                <div style={{ fontSize: 16, fontWeight: 600, color: T.ink, letterSpacing: -0.2 }}>
                  Northwind Analytics <span style={{ color: T.ink4, fontWeight: 400 }}>· 218 employees · Series B · London</span>
                </div>
              </div>
            </div>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              fontSize: 12, fontWeight: 600, color: T.greenDark,
              padding: '6px 10px', borderRadius: 999,
              background: T.greenLight,
            }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: T.green }} className="pulse-dot" />
              Researched 12 min ago · 47 sources
            </div>
          </div>

          {/* Signals */}
          <div style={{ padding: '8px 0' }}>
            {signals.map((s, i) => (
              <div key={s.id} id={s.linked ? 'signal-anchor' : undefined} style={{
                display: 'grid',
                gridTemplateColumns: '64px 1fr 200px',
                gap: 24,
                padding: '24px 28px',
                borderTop: i === 0 ? 'none' : `1px solid ${T.borderSoft}`,
                position: 'relative',
                background: s.linked ? 'linear-gradient(90deg, rgba(255,94,0,0.04), transparent 60%)' : 'transparent',
              }}>
                <div className="mono" style={{
                  fontSize: 12, fontWeight: 600, color: T.ink4, paddingTop: 2,
                  letterSpacing: 0.5,
                }}>
                  {s.id}
                </div>
                <div>
                  <div style={{
                    fontSize: 17, fontWeight: 600, color: T.ink,
                    lineHeight: 1.4, letterSpacing: -0.1,
                    marginBottom: 8,
                  }}>
                    {s.headline}
                  </div>
                  <div style={{
                    fontSize: 14.5, lineHeight: 1.6, color: T.ink2,
                  }}>
                    {s.body}
                  </div>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'flex-start' }}>
                  <div className="mono" style={{ fontSize: 10.5, color: T.ink4, letterSpacing: 0.6 }}>SOURCES</div>
                  {s.sources.map(src => (
                    <div key={src} style={{
                      fontSize: 12, fontWeight: 500, color: T.ink2,
                      padding: '4px 9px', borderRadius: 6,
                      background: T.greenTint,
                      border: `1px solid ${T.borderSoft}`,
                    }}>{src}</div>
                  ))}
                </div>
                {s.linked && (
                  <div style={{
                    position: 'absolute', right: -1, top: '50%', transform: 'translateY(-50%)',
                    width: 6, height: '70%', background: T.orange, borderRadius: '3px 0 0 3px',
                  }} />
                )}
              </div>
            ))}
          </div>
        </div>

        {/* Connection line + linked challenge */}
        <div style={{ position: 'relative', marginTop: 0 }}>
          <ConnectorAndChallenge />
        </div>
      </div>
    </section>
  );
};

const ConnectorAndChallenge = () => (
  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
    {/* dashed connector */}
    <div style={{ height: 56, position: 'relative', width: 2 }}>
      <div style={{
        position: 'absolute', inset: 0,
        borderLeft: `2px dashed ${T.orange}`,
        opacity: 0.7,
      }} />
    </div>
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      padding: '6px 14px', borderRadius: 999,
      background: T.orange, color: 'white',
      fontSize: 11.5, fontWeight: 700, letterSpacing: 0.6,
      textTransform: 'uppercase',
      marginBottom: 16,
    }}>
      <Icon d="M13 2L3 14h7l-1 8 10-12h-7l1-8z" size={12} sw={2} />
      Suggested Challenge, grounded in Signal S-01
    </div>

    <div style={{
      background: T.paper, borderRadius: 16,
      border: `1px solid ${T.border}`,
      boxShadow: '0 12px 36px rgba(15,43,26,0.08)',
      padding: 32, maxWidth: 820, width: '100%',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 24, marginBottom: 20 }}>
        <h3 style={{
          fontSize: 22, fontWeight: 700, color: T.ink,
          letterSpacing: -0.4, lineHeight: 1.3, maxWidth: 560,
        }}>
          How do we close the gap between what our customers are asking for and what we're shipping?
        </h3>
        <div style={{ display: 'flex', gap: 6, flexShrink: 0 }}>
          <Chip>Strategic</Chip>
          <Chip variant="amber">Transformational 8/10</Chip>
        </div>
      </div>

      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24,
        padding: '20px 22px', background: T.greenTint,
        borderRadius: 10, marginBottom: 20,
        border: `1px solid ${T.borderSoft}`,
      }}>
        <div>
          <div className="mono" style={{ fontSize: 10.5, color: T.ink4, letterSpacing: 0.6, marginBottom: 6 }}>WHY NOW</div>
          <div style={{ fontSize: 14, lineHeight: 1.55, color: T.ink2 }}>
            Signal S-01, 73% of recent eng hires sit in data infra, while "slow reporting" appears 14× in G2 reviews this quarter. The roadmap is solving the right problem in the wrong order.
          </div>
        </div>
        <div>
          <div className="mono" style={{ fontSize: 10.5, color: T.ink4, letterSpacing: 0.6, marginBottom: 6 }}>EMPLOYEE FRAMING</div>
          <div style={{ fontSize: 14, lineHeight: 1.55, color: T.ink2, fontStyle: 'italic' }}>
            "We're moving fast on infrastructure. What's a customer pain you've heard repeatedly that we haven't shipped against yet, and what would the smallest version of fixing it look like?"
          </div>
        </div>
      </div>

      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 13, color: T.ink3 }}>
        <span>Estimated outcome value · <strong style={{ color: T.ink }}>£180K to £420K</strong> over 12 months</span>
        <span style={{ color: T.greenDark, fontWeight: 600 }}>
          + 2 more suggestions waiting
        </span>
      </div>
    </div>
  </div>
);

const Chip = ({ children, variant }) => {
  const styles = {
    default: { bg: T.greenLight, fg: T.greenDark },
    amber: { bg: T.amberBg, fg: T.amber },
  };
  const s = styles[variant] || styles.default;
  return (
    <span style={{
      fontSize: 11, fontWeight: 600, letterSpacing: 0.3,
      padding: '4px 10px', borderRadius: 999,
      background: s.bg, color: s.fg,
      whiteSpace: 'nowrap',
    }}>{children}</span>
  );
};

window.Research = Research;