// Pipeline hero visualization — leads stream through 3 columns
function HeroPipeline() {
  const { COMPANIES } = window.PIPELANE_DATA;
  const [tick, setTick] = React.useState(0);

  // Each card has: id, company, stage (0=discovered, 1=scoring, 2=qualified), score, signals
  const [cards, setCards] = React.useState(() => {
    // Seed with a few cards in each column
    const seed = [];
    for (let i = 0; i < 3; i++) {
      const c = COMPANIES[i];
      seed.push({ id: `s-${i}`, company: c, stage: 0, score: null, age: i * 0.5 });
    }
    for (let i = 0; i < 2; i++) {
      const c = COMPANIES[3 + i];
      const sc = 40 + Math.floor(Math.random() * 35);
      seed.push({ id: `s-m-${i}`, company: c, stage: 1, score: sc, age: i });
    }
    for (let i = 0; i < 2; i++) {
      const c = COMPANIES[5 + i];
      const sc = 80 + Math.floor(Math.random() * 18);
      seed.push({ id: `s-q-${i}`, company: c, stage: 2, score: sc, age: i });
    }
    return seed;
  });

  React.useEffect(() => {
    const interval = setInterval(() => setTick(t => t + 1), 1800);
    return () => clearInterval(interval);
  }, []);

  React.useEffect(() => {
    setCards(prev => {
      let next = prev.map(c => ({ ...c, age: c.age + 1 }));

      // Promote one card from stage 0 -> 1
      const discovered = next.filter(c => c.stage === 0);
      if (discovered.length > 0) {
        const oldest = discovered.reduce((a, b) => a.age > b.age ? a : b);
        oldest.stage = 1;
        oldest.score = 30 + Math.floor(Math.random() * 50);
        oldest.age = 0;
      }

      // Promote one from stage 1 -> 2 (only if score is high)
      const scoring = next.filter(c => c.stage === 1 && c.age >= 1);
      if (scoring.length > 0) {
        const candidate = scoring[0];
        if (candidate.score > 65) {
          candidate.stage = 2;
          candidate.score = Math.min(99, candidate.score + Math.floor(Math.random() * 20));
          candidate.age = 0;
        } else {
          // Drop low scores
          next = next.filter(c => c.id !== candidate.id);
        }
      }

      // Drop oldest qualified (cycle)
      const qualified = next.filter(c => c.stage === 2);
      if (qualified.length > 4) {
        const oldest = qualified.reduce((a, b) => a.age > b.age ? a : b);
        next = next.filter(c => c.id !== oldest.id);
      }

      // Add new discovered card
      const used = new Set(next.map(c => c.company.domain));
      const fresh = COMPANIES.find(c => !used.has(c.domain));
      if (fresh) {
        next.unshift({
          id: `c-${Date.now()}`,
          company: fresh,
          stage: 0,
          score: null,
          age: 0,
        });
      }

      // Cap stage 0
      const disc = next.filter(c => c.stage === 0);
      if (disc.length > 4) {
        const oldest = disc.reduce((a, b) => a.age > b.age ? a : b);
        next = next.filter(c => c.id !== oldest.id);
      }

      return next;
    });
  }, [tick]);

  const cols = [
    { stage: 0, label: 'Discovered', cards: cards.filter(c => c.stage === 0).slice(0, 4) },
    { stage: 1, label: 'Scoring', cards: cards.filter(c => c.stage === 1).slice(0, 4) },
    { stage: 2, label: 'Qualified', cards: cards.filter(c => c.stage === 2).slice(0, 4) },
  ];

  return (
    <div className="pipeline">
      <div className="pipeline-head">
        <span>pipelane.live · intent stream</span>
        <span className="live">LIVE</span>
      </div>
      <div className="pipeline-cols">
        {cols.map(col => (
          <div className="pcol" key={col.stage}>
            <div className="pcol-head">
              <span>{col.label}</span>
              <span className="count">{col.cards.length}</span>
            </div>
            <div className="pcol-body">
              {col.cards.map(card => (
                <LeadCard key={card.id} card={card} />
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function LeadCard({ card }) {
  const { company, stage, score } = card;
  const scoreClass = score == null ? '' : score >= 80 ? 'high' : score >= 50 ? 'med' : 'low';
  const stageClass = stage === 1 ? 'scoring' : stage === 2 ? 'qualified' : '';

  return (
    <div className={`lead-card ${stageClass}`}>
      <div className="lead-row1">
        <div>
          <div className="lead-name">{company.name}</div>
          <div className="lead-domain mono">{company.domain}</div>
        </div>
        {score != null && <div className={`score ${scoreClass}`}>{score}</div>}
      </div>
      {stage === 0 && (
        <div className="lead-meta mono">scanning… · {company.industry}</div>
      )}
      {stage === 1 && (
        <>
          <div className={`score-bar ${scoreClass}`}>
            <span style={{ width: `${score}%` }} />
          </div>
          <div className="lead-meta mono">
            {company.size} ppl · {company.revenue}
          </div>
        </>
      )}
      {stage === 2 && (
        <>
          <div className={`score-bar ${scoreClass}`}>
            <span style={{ width: `${score}%` }} />
          </div>
          <div className="lead-meta mono" style={{ color: 'var(--accent)' }}>
            ✓ ready for outreach
          </div>
        </>
      )}
    </div>
  );
}

window.HeroPipeline = HeroPipeline;