const { Badge } = window.Talensity_b45625;

const TALENT_STEPS = [
  ['Sign up','Name, email, password. That’s it. Verify your email and you’re in. Complete your profile at your own pace — we don’t wall you behind a form before you can even create an account.'],
  ['Build your profile','Upload your CV and LinkedIn data export. We parse it into structured experience data — role-fit tags, experience level, seniority — so your real background is visible, not just what you typed in a dropdown. Portfolio optional but weighted positively for relevant roles.'],
  ['Get matched and discovered','Once your profile is complete, our AI scores your fit against roles in the network — including adjacent titles you’re genuinely capable of. You’re surfaced to companies without having to apply to each one individually.'],
  ['Track and advance','See every application’s status in real time — submitted, under review, shortlisted, interviewing, offer. Once your application clears review, your AI match score and fit rationale for that role are visible to you.'],
];
const DIFFERENT = [
  ['AI match score — visible to you','Once your application clears admin review, you see your AI match score and the rationale for that specific role. You see your role-fit tags — the adjacent titles you’re also being matched for across the network.'],
  ['One profile, applied everywhere','Edit once. Your profile is reused across every application. No re-submitting your CV per role. No re-filling the same form. One record — updated when you update it.'],
  ['Matched to roles you can actually do','Our AI doesn’t just match exact job titles. It identifies adjacent roles your experience qualifies you for — so a product manager surfaces for product owner or delivery lead roles without having to apply separately.'],
];
const TIERS = [
  ['Tier 1','Consistency-checked','On entry','info','When your profile is submitted, our AI cross-references your CV against your LinkedIn export — checking for consistency in role titles, tenure, and experience claims. All new network members start here.'],
  ['Tier 2','Reference-verified','At shortlist stage','success','When you’re shortlisted for a role, Talensity’s team verifies references. Companies see your verification tier before engaging.'],
  ['Tier 3','Background-checked','Optional premium','highlight','An additional background check — available as a premium add-on — for roles where companies require it.'],
];
const PAY = [
  ['A contract that holds up','As Agent of Record, Talensity papers the engagement properly — scope, rate, and payment terms documented in a form that works in your country and theirs.'],
  ['Employment, if it’s offered','When a client converts you to a full employee, Talensity becomes the legal employer on record — PAYE, pension, and statutory contributions filed where you live.'],
  ['Your currency, a visible rate','Payment is converted and delivered locally. You see the rate and the date before the money moves.'],
  ['Tax handled where you live','Withholding and filings are handled in-market, so being paid by a foreign company doesn’t leave you exposed at home.'],
];
const STAGES = ['Submitted','Under review','Shortlisted','Interviewing','Offer','Hired / not selected'];

function TalentPage() {
  return (
    <Page>
      <section className="sec dark">
        <div className="pat"></div>
        <div className="wrap grid split" style={{gridTemplateColumns:'1.25fr 1fr',alignItems:'center',gap:'var(--space-8)'}}>
          <div className="stack g5">
            <Eyebrow tone="gold">For talent</Eyebrow>
            <h1 className="h1">One profile.<br />Every opportunity.</h1>
            <p className="sub" style={{maxWidth:'520px'}}>Build your Talensity profile once. Get matched to roles across the network — without re-applying from scratch every time. Your AI match score and fit rationale are visible to you.</p>
            <div className="row g4">
              <a href="#join" className="btn goldfill">Join the network</a>
              <a href="Open Roles.html" className="btn ghost">Browse open roles →</a>
            </div>
            <div className="row g2">
              {['Free to join','AI role-fit scoring','Application tracking','One profile, many roles'].map(p => <span key={p} className="chip">{p}</span>)}
            </div>
          </div>
          <Ph label="Hero visual — stylised talent profile card floating with match score badge, role-fit tags and verification status. Editorial and confident, not stock photography." height={380} />
        </div>
      </section>

      <section className="sec light on-light">
        <div className="wrap stack g8">
          <Head eyebrow="How it works" title="From profile to placed." />
          <div className="grid c4">
            {TALENT_STEPS.map(([t, d], i) => (
              <div key={t} className="stack g4 rv">
                <span className="num g">{i + 1}</span>
                <span style={{fontSize:'18px',fontWeight:600,color:'var(--near-black)'}}>{t}</span>
                <p className="body">{d}</p>
              </div>
            ))}
          </div>
          <Ph label="Illustrated flow — talent profile to AI matching to role card to status tracker. Golden Yellow and Eagle Green accents." height={220} />
        </div>
      </section>

      <section className="sec dark">
        <div className="wrap stack g8">
          <Head eyebrow="Why Talensity" tone="gold" title="You’re not a CV in a pile." sub="In the Talensity network, your profile is pre-scored, your fit is explained, and your status is visible. No black boxes." />
          <div className="grid c3">
            {DIFFERENT.map(([t, d], i) => (
              <div key={t} className="card glass stack g4 rv">
                <span className="num g">{i + 1}</span>
                <span style={{fontSize:'18px',fontWeight:600,color:'#fff'}}>{t}</span>
                <p className="body">{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="sec light on-light">
        <div className="wrap stack g8">
          <Head eyebrow="How we verify" title="Earning your place in the network." />
          <div className="grid c3">
            {TIERS.map(([tier, name, when, tone, d]) => (
              <div key={tier} className="card stack g4 rv">
                <div className="row g3">
                  <Badge tone={tone}>{name}</Badge>
                  <span className="muted" style={{fontSize:'12px'}}>{tier} · {when}</span>
                </div>
                <p className="body">{d}</p>
              </div>
            ))}
          </div>
          <Ph label="Illustration — the three verification badge tiers as a progression. Clean, minimal, trustworthy." height={180} />
        </div>
      </section>

      <section className="sec dark">
        <div className="wrap stack g8">
          <Head eyebrow="Your applications" tone="gold" title="Track every application like a delivery." sub="No more guessing where you stand. Your status updates at every stage — and if you’re rejected after interview, you receive an explicit notification, not a passive status change." />
          <div className="grid split" style={{gridTemplateColumns:'1fr 1fr',alignItems:'center',gap:'var(--space-7)'}}>
            <Ph label="Talent dashboard mockup — application tracker with role names, company, current stage pill and AI match score per application. Mobile-first layout." height={340} />
            <div className="stack g5">
              <div className="row g2">
                {STAGES.map((s, i) => (
                  <React.Fragment key={s}>
                    <span className={'chip ' + (i < 3 ? 'g' : '')}>{s}</span>
                    {i < STAGES.length - 1 && <span style={{color:'rgba(255,255,255,.3)',fontSize:'13px'}}>→</span>}
                  </React.Fragment>
                ))}
              </div>
              <p className="body">Rejection after interview triggers an explicit notification — we don’t leave you hanging after you’ve invested time.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="sec light on-light">
        <div className="wrap stack g8">
          <Head eyebrow="Getting paid" title="Paid in full. On time. Properly documented." sub="Your client is in London or San Francisco. Your account is in Lagos. That gap is our job, not yours." />
          <p className="body" style={{maxWidth:'760px',marginTop:'calc(-1 * var(--space-4))'}}>Most African professionals working for global companies get paid through whatever their client could improvise — a wire that lands late, an FX rate nobody explains, a contract that means nothing where you live. When you are placed through Talensity, payment is infrastructure instead. We act as Agent of Record: a real contract, a payout date you can plan around, and money in your local currency at a rate you can see. If your client converts you to staff, we become the legal employer in your country — so tax, statutory contributions, and benefits are handled correctly from that day forward.</p>
          <div className="grid c4">
            {PAY.map(([t, d]) => (
              <div key={t} className="stack g3 rv">
                <hr className="hr" />
                <span style={{fontSize:'18px',fontWeight:600,color:'var(--near-black)'}}>{t}</span>
                <p className="body">{d}</p>
              </div>
            ))}
          </div>
          <p style={{fontFamily:'var(--font-serif-display)',fontSize:'clamp(1.25rem,1.1rem + 0.7vw,1.75rem)',lineHeight:1.25,letterSpacing:'-0.01em',color:'var(--near-black)',maxWidth:'720px'}}>You do the work. We are the rails that get you paid for it.</p>
        </div>
      </section>

      <section className="sec gold on-light">
        <div className="wrap stack g5" style={{textAlign:'center',alignItems:'center'}}>
          <h2 className="h2" style={{fontSize:'clamp(2rem,1.7rem + 1.8vw,3rem)'}}>Join the network. Get discovered.</h2>
          <p className="sub" style={{color:'rgba(0,0,0,.7)'}}>Free to join. One profile. Matched to roles you can genuinely do.</p>
          <a href="#join" className="btn fill">Create your profile</a>
          <p style={{fontSize:'13px',color:'rgba(0,0,0,.65)'}}>Already have an account? <a href="#login" style={{color:'var(--eagle-green)',textDecoration:'underline',textUnderlineOffset:'3px'}}>Log in →</a></p>
        </div>
      </section>
    </Page>
  );
}
window.TalentPage = TalentPage;