/* global React */
const { useState: useStateP } = React;

function PlatformShowcase() {
  const tabs = [
    { id: 'pipeline', label: 'Pipeline', icon: 'git-branch' },
    { id: 'matching', label: 'Match scoring', icon: 'target' },
    { id: 'comp', label: 'Comp data', icon: 'trending-up' },
  ];
  const [active, setActive] = useStateP('pipeline');

  return (
    <section id="platform" className="section section--light platform">
      <div className="container">
        <div className="platform__head">
          <div>
            <div className="eyebrow">A look inside</div>
            <h2 className="h2 platform__title">The cockpit your team actually uses.</h2>
          </div>
          <p className="platform__sub">
            Every role runs in one place. Live shortlists, comp benchmarks, and a single
            queue of decisions waiting on you — never a spreadsheet, never a thread to chase.
          </p>
        </div>

        <div className="platform__tabs">
          {tabs.map((t) => (
            <button
              key={t.id}
              className={"platform__tab" + (active === t.id ? " is-active" : "")}
              onClick={() => setActive(t.id)}
            >
              <i data-lucide={t.icon}></i>
              <span>{t.label}</span>
            </button>
          ))}
        </div>

        <div className="platform__panel">
          {active === 'pipeline' && <PipelinePanel />}
          {active === 'matching' && <MatchingPanel />}
          {active === 'comp' && <CompPanel />}
        </div>
      </div>
    </section>
  );
}

function PipelinePanel() {
  const cols = [
    { title: 'Sourced', count: 8412, items: [
      { name: 'A. Chen', meta: 'Stripe · 6y' },
      { name: 'M. Okonkwo', meta: 'Square · 5y' },
      { name: '+ 8,410 more', meta: '', muted: true },
    ]},
    { title: 'Screened', count: 142, items: [
      { name: 'D. Park', meta: 'Plaid · 7y · 96 match' },
      { name: 'P. Raman', meta: 'Datadog · 5y · 91 match' },
      { name: 'J. Whitman', meta: 'Brex · 6y · 89 match' },
    ]},
    { title: 'Pre-qualified', count: 12, items: [
      { name: 'D. Park', meta: 'Avail. immediately' },
      { name: 'P. Raman', meta: 'Avail. in 2 weeks' },
      { name: 'M. Okonkwo', meta: 'Avail. in 30d' },
    ]},
    { title: 'With you', count: 5, items: [
      { name: 'D. Park', meta: 'Interview Wed', flag: 'orange' },
      { name: 'P. Raman', meta: 'Round 2 scheduled', flag: 'teal' },
      { name: '3 more', meta: 'Awaiting your review', muted: true },
    ]},
  ];
  return (
    <div className="pipeline">
      {cols.map((c) => (
        <div className="pipeline__col" key={c.title}>
          <div className="pipeline__col-head">
            <span>{c.title}</span>
            <span className="pipeline__count">{c.count}</span>
          </div>
          <div className="pipeline__items">
            {c.items.map((it, i) => (
              <div className={"pipeline__card" + (it.muted ? " is-muted" : "")} key={i}>
                {it.flag && <div className={"pipeline__flag pipeline__flag--" + it.flag}></div>}
                <div className="pipeline__name">{it.name}</div>
                <div className="pipeline__meta">{it.meta}</div>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

function MatchingPanel() {
  const factors = [
    { label: 'Backend systems (Go, distributed)', score: 98 },
    { label: 'Payments / fintech experience', score: 92 },
    { label: 'Comp band ($220k–$260k base)', score: 95 },
    { label: 'Available within 30 days', score: 88 },
    { label: 'Remote, US time zones', score: 100 },
  ];
  return (
    <div className="matching">
      <div className="matching__candidate">
        <div className="matching__avatar">DP</div>
        <div>
          <div className="matching__name">Daniel Park</div>
          <div className="matching__role">Staff Backend Engineer · Plaid · 7 years</div>
        </div>
        <div className="matching__big">
          <div className="matching__big-num">94</div>
          <div className="matching__big-label">overall match</div>
        </div>
      </div>
      <div className="matching__factors">
        {factors.map((f) => (
          <div className="matching__factor" key={f.label}>
            <div className="matching__factor-row">
              <span className="matching__factor-label">{f.label}</span>
              <span className="matching__factor-score">{f.score}</span>
            </div>
            <div className="matching__bar">
              <div className="matching__bar-fill" style={{ width: f.score + '%' }}></div>
            </div>
          </div>
        ))}
      </div>
      <div className="matching__note">
        <i data-lucide="cpu"></i>
        <span>Scored against 40 signals from public profiles, our private network, and a 25-minute screen call.</span>
      </div>
    </div>
  );
}

function CompPanel() {
  const bars = [
    { label: 'P10', value: 32, amount: '$185k' },
    { label: 'P25', value: 48, amount: '$210k' },
    { label: 'P50', value: 68, amount: '$240k', highlight: true },
    { label: 'P75', value: 82, amount: '$272k' },
    { label: 'P90', value: 96, amount: '$310k' },
  ];
  return (
    <div className="comp">
      <div className="comp__head">
        <div>
          <div className="comp__title">Senior Backend Engineer · SF / Remote US</div>
          <div className="comp__sub">Total cash, last 90 days · 1,240 data points from active hires</div>
        </div>
        <div className="comp__chip"><span className="comp__chip-dot"></span> Live</div>
      </div>
      <div className="comp__chart">
        {bars.map((b) => (
          <div className={"comp__bar" + (b.highlight ? " is-highlight" : "")} key={b.label}>
            <div className="comp__bar-amount">{b.amount}</div>
            <div className="comp__bar-track">
              <div className="comp__bar-fill" style={{ height: b.value + '%' }}></div>
            </div>
            <div className="comp__bar-label">{b.label}</div>
          </div>
        ))}
      </div>
      <div className="comp__legend">
        <div><span className="comp__legend-dot comp__legend-dot--orange"></span> Your offer band — $230k–$260k tracks the 50th percentile.</div>
        <div><span className="comp__legend-dot comp__legend-dot--teal"></span> 6 of 8 final candidates fit inside your band.</div>
      </div>
    </div>
  );
}

window.PlatformShowcase = PlatformShowcase;