const COMPANY_TRACK = [
  ['You submit a brief','Post your role — or upload a JD. We extract the requirements, employment type, pay range, and seniority level. You can run this as full-service (we source) or self-service (you search).','Brief submission form with key fields highlighted'],
  ['We source and score','New applicants and our existing vetted pool are both matched against your brief. Every candidate is AI-scored across role fit, experience depth, adjacent capability, and seniority. A human reviews every score before it reaches you.','Scoring engine — AI layer then human review layer in sequence'],
  ['You receive a scored shortlist','Your shortlist arrives with a written rationale per candidate — not just a number. Rationale covers why they fit, what to probe in interview, and what’s unverified. Contact details are locked until you request an introduction.','Shortlist card with score bar, three-line rationale, lock icon on contact details'],
  ['You engage and interview','Request introductions to candidates you want to unlock. Once approved, contact details are released. Track every stage — engaged, interviewing, offer — across your whole team.',null],
  ['You hire. We pay them.','Once a hire is made, Talensity becomes Agent of Record for the placement — cross-border payment, FX, local tax, and contractor documentation. One invoice to you. Compliant in-market. Upgradeable to Employer of Record when you convert them to staff.','Payments hub with invoice and payment confirmation'],
];
const TALENT_TRACK = [
  ['You sign up','Name, email, password. Verify your email. Profile completion is at your pace — we don’t wall you behind a form.'],
  ['You build your profile','Upload your CV and LinkedIn data export. AI parses it into role-fit tags, experience level, and seniority. Consistency is checked against both. Your portfolio adds signal for design and product roles.'],
  ['You get discovered — or you apply','Browse public roles without an account. Apply with your profile. Or be surfaced automatically to companies whose briefs match your profile — without having to apply to each role individually.'],
  ['You track your status','Every application has a real-time status. Once your application clears review, you see your AI match score and fit rationale for that role. If you advance to interview and don’t get the role, you receive an explicit notification.'],
  ['You get placed — and you check in','After placement, Talensity checks in at 60 days, 6 months, and 12 months. A one-tap prompt: still at the company? Your history builds your track record in the network — strong outcomes make you more visible for future roles.'],
];
const ENGINE = [
  ['Input',['Role brief → structured criteria (role, seniority, must-haves, pay range, employment type)','Talent profile → parsed experience, role-fit tags, inferred seniority, verification tier']],
  ['Processing',['AI scores fit across role alignment, adjacent capability, experience depth, seniority match, and consistency of claimed experience.','Admin review gate: every score reviewed before a shortlist is delivered.']],
  ['Output',['Scored shortlist with written rationale per candidate.','Verification tier visible per candidate.','Locked contact details until engagement approved.']],
];
const FAQS = [
  ['For companies','What’s the difference between full-service and self-service?','Full-service: we source, score, and deliver. Self-service: you describe what you need and search the pool yourself. Both use the same vetted network and the same fee model.'],
  ['For companies','Do I need to have an HR team to use Talensity?','No. Full-service is designed for teams without HR — but it’s also available to companies that have HR and still need sourcing support.'],
  ['For companies','When do I pay?','On successful placement only. No upfront fees.'],
  ['For companies','What is the 60-day replacement guarantee?','If a placed candidate leaves within 60 days of starting, we replace them at no additional fee.'],
  ['For companies','Can recruitment agencies use Talensity?','Yes. Agencies are welcome on the same terms as direct hiring companies.'],
  ['For talent','Is it free to join?','Yes. Joining and maintaining your profile is free. You pay nothing.'],
  ['For talent','Do I need to apply to each role individually?','Not always. Once your profile is complete, it can be surfaced automatically to companies whose briefs match your background.'],
  ['For talent','What does AI-verified mean?','Your CV and LinkedIn export are cross-referenced by AI on entry. Reference verification happens at shortlist stage. Background checks are available as a premium add-on.'],
];

function Timeline({ items, light }) {
  return (
    <div className="stack" style={{gap:0}}>
      {items.map(([t, d, ph], i) => (
        <div key={t} className="grid rv" style={{gridTemplateColumns:'64px 1fr',gap:'var(--space-5)',padding:'28px 0',borderTop:'1px solid ' + (light ? 'rgba(14,21,18,.1)' : 'rgba(255,255,255,.12)')}}>
          <span className={light ? 'num hollow' : 'num'} style={{width:'44px',height:'44px',fontSize:'19px'}}>{i + 1}</span>
          <div className="stack g3">
            <span style={{fontSize:'19px',fontWeight:600,color:light ? 'var(--near-black)' : '#fff'}}>{t}</span>
            <p className="body" style={{maxWidth:'720px'}}>{d}</p>
            {ph && <Ph label={ph} height={130} style={{maxWidth:'560px'}} />}
          </div>
        </div>
      ))}
    </div>
  );
}

function Faq({ q, a, cat }) {
  return (
    <details className="card plain rv" style={{padding:'20px 0',borderRadius:0,border:0,borderBottom:'1px solid rgba(14,21,18,.1)'}}>
      <summary style={{cursor:'pointer',listStyle:'none',display:'flex',gap:'16px',alignItems:'baseline',fontSize:'16.5px',fontWeight:500,color:'var(--near-black)'}}>
        <span style={{fontSize:'11px',letterSpacing:'var(--tracking-widest)',textTransform:'uppercase',color:'var(--sea-green)',flex:'none',width:'112px',paddingTop:'3px'}}>{cat}</span>
        {q}
      </summary>
      <p className="body" style={{margin:'12px 0 0 128px',maxWidth:'620px'}}>{a}</p>
    </details>
  );
}

function HowPage() {
  return (
    <Page>
      <section className="sec dark">
        <div className="pat"></div>
        <div className="wrap stack g5">
          <Eyebrow>How Talensity works</Eyebrow>
          <h1 className="h1">From brief to payslip.<br />Every layer. One platform.</h1>
          <p className="sub" style={{maxWidth:'560px'}}>Talensity is not a recruiter and not a job board. It’s the intelligence layer that connects companies with pre-scored talent — and handles everything in between.</p>
        </div>
      </section>

      <section className="sec light on-light">
        <div className="wrap stack g7">
          <Head eyebrow="For companies" title="The full-service journey." />
          <Timeline items={COMPANY_TRACK} light />
        </div>
      </section>

      <section className="sec dark">
        <div className="wrap stack g7">
          <Head eyebrow="For talent" tone="gold" title="The talent journey." />
          <Timeline items={TALENT_TRACK} />
        </div>
      </section>

      <section className="sec light on-light">
        <div className="wrap stack g8">
          <Head eyebrow="The technology" title="How the matching works." sub="AI scores every candidate. Humans verify. The output is a ranked shortlist with a written rationale — not a black box." />
          <div className="grid c3">
            {ENGINE.map(([t, lines], i) => (
              <div key={t} className="card stack g4 rv">
                <div className="row g3">
                  <span className="num" style={{width:'28px',height:'28px',fontSize:'14px'}}>{i + 1}</span>
                  <span style={{fontSize:'17px',fontWeight:600,color:'var(--near-black)'}}>{t}</span>
                </div>
                <div className="stack g3">{lines.map(l => <p key={l} className="body">{l}</p>)}</div>
              </div>
            ))}
          </div>
          <Ph label="Diagram — input, processing, output flow with visual layers. Eagle Green and Golden Yellow. Technical but readable." height={240} />
        </div>
      </section>

      <section className="sec light on-light" id="faqs" style={{paddingTop:0}}>
        <div className="wrap stack g6">
          <Head eyebrow="Common questions" title="Frequently asked." />
          <div className="stack" style={{gap:0,borderTop:'1px solid rgba(14,21,18,.1)'}}>
            {FAQS.map(([cat, q, a]) => <Faq key={q} cat={cat} q={q} a={a} />)}
          </div>
        </div>
      </section>

      <section className="sec green">
        <div className="pat wht"></div>
        <div className="wrap stack g5" style={{textAlign:'center',alignItems:'center'}}>
          <h2 className="h2">Ready to start?</h2>
          <div className="row g4" style={{justifyContent:'center'}}>
            <a href="For Companies.html" className="btn white">Post a brief</a>
            <a href="For Talent.html" className="btn whiteline">Join the network</a>
          </div>
        </div>
      </section>
    </Page>
  );
}
window.HowPage = HowPage;
