/* global React */
const { useEffect, useState } = React;

function useTickingNumber(target, duration = 1400) {
  const [n, setN] = useState(0);
  useEffect(() => {
    const start = performance.now();
    let raf;
    const tick = (t) => {
      const k = Math.min(1, (t - start) / duration);
      const eased = 1 - Math.pow(1 - k, 3);
      setN(Math.round(eased * target));
      if (k < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [target, duration]);
  return n;
}

function HeroPreview() {
  const candidates = [
    { name: 'Maya Okonkwo', role: 'Senior Backend · Stripe', score: 96, tags: ['Go', 'Distributed', 'On-call'] },
    { name: 'Daniel Park', role: 'Staff Backend · Plaid', score: 94, tags: ['Go', 'Postgres', 'Payments'] },
    { name: 'Priya Raman', role: 'Senior Backend · Datadog', score: 91, tags: ['Go', 'Kafka', 'AWS'] },
  ];
  return (
    <div className="hero-preview" aria-hidden>
      <div className="hero-preview__chrome">
        <span className="hero-preview__dot" style={{ background: '#FF5F56' }}></span>
        <span className="hero-preview__dot" style={{ background: '#FFBD2E' }}></span>
        <span className="hero-preview__dot" style={{ background: '#27C93F' }}></span>
        <div className="hero-preview__url">app.asteroid.com / roles / senior-backend-engineer</div>
      </div>
      <div className="hero-preview__body">
        <div className="hero-preview__head">
          <div>
            <div className="hero-preview__eyebrow">Live shortlist</div>
            <div className="hero-preview__title">Senior Backend Engineer</div>
          </div>
          <div className="hero-preview__pulse">
            <span className="hero-preview__pulse-dot"></span>
            <span>Sourcing · 8,412 screened</span>
          </div>
        </div>
        <div className="hero-preview__list">
          {candidates.map((c, i) => (
            <div className="hero-preview__row" key={i}>
              <div className="hero-preview__avatar">{c.name.split(' ').map(s => s[0]).join('')}</div>
              <div className="hero-preview__col">
                <div className="hero-preview__name">{c.name}</div>
                <div className="hero-preview__role">{c.role}</div>
                <div className="hero-preview__tags">
                  {c.tags.map(t => <span className="hero-preview__tag" key={t}>{t}</span>)}
                </div>
              </div>
              <div className="hero-preview__score">
                <div className="hero-preview__score-num">{c.score}</div>
                <div className="hero-preview__score-label">match</div>
              </div>
            </div>
          ))}
        </div>
        <div className="hero-preview__foot">
          <span><i data-lucide="check-circle-2"></i> 5 finalists ready · 2 more incoming</span>
          <span className="hero-preview__cta">Review shortlist →</span>
        </div>
      </div>
    </div>
  );
}

function Hero() {
  const candidates = useTickingNumber(10247);
  const days = useTickingNumber(3);
  return (
    <section className="hero">
      <div className="hero__bg" aria-hidden>
        <img src="assets/logo-mark-transparent.png" className="hero__watermark" alt="" />
      </div>
      <div className="container hero__inner">
        <div className="hero__grid">
          <div className="hero__copy">
            <div className="eyebrow hero__eyebrow">For founders &amp; hiring teams</div>
            <h1 className="display-lg hero__title">
              Hire in days,<br/>not months.
            </h1>
            <p className="hero__sub">
              You tell us the role. We source, screen, and deliver 5 ready-to-interview
              candidates &mdash; every one matched on skills, comp, and availability.
            </p>
            <div className="hero__ctas">
              <a href="#cta" className="btn btn-flame btn-lg">Get 5 candidates <span aria-hidden>→</span></a>
              <a href="#how" className="btn btn-ghost btn-lg">See how it works</a>
            </div>
            <div className="hero__trust">
              <span className="hero__trust-label">Trusted by teams at</span>
              <div className="hero__trust-row">
                <span>Linear</span>
                <span>Vercel</span>
                <span>Ramp</span>
                <span>Mercury</span>
              </div>
            </div>
          </div>
          <div className="hero__preview-wrap">
            <HeroPreview />
            <div className="hero__sparkle" aria-hidden></div>
          </div>
        </div>
        <div className="hero__stats">
          <div className="hero__stat">
            <div className="hero__stat-num">{candidates.toLocaleString()}</div>
            <div className="hero__stat-label">Candidates screened this week</div>
          </div>
          <div className="hero__stat">
            <div className="hero__stat-num">{days}<span className="hero__stat-suffix">d</span></div>
            <div className="hero__stat-label">Median time to first shortlist</div>
          </div>
          <div className="hero__stat">
            <div className="hero__stat-num">94<span className="hero__stat-suffix">%</span></div>
            <div className="hero__stat-label">Match accuracy on placed roles</div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;