const { Badge, Card } = window.Talensity_b45625;

const STEPS = [
  ['1','Source','We tap a curated, pre-vetted network of professionals matched to your brief. Not a broadcast. A targeted signal.'],
  ['2','Score','Every candidate is rated by AI across role fit, seniority, and experience — before you see a single name. A human reviews every score before it reaches you.'],
  ['3','Hire','You receive a shortlist with a written rationale per candidate explaining exactly why they fit. Review, engage, interview, and move.'],
  ['4','Pay','You hire in Nigeria, Kenya, or Ghana. We act as Agent of Record — cross-border payment, FX, and local compliance handled. Keep your own payroll.'],
];
const COMPANY_FEATURES = [
  'Full-service and self-service paths, your choice',
  'AI-scored, human-reviewed shortlists',
  'Written rationale per candidate — not just a score',
  '60-day replacement guarantee',
  'AOR and EOR coverage for the talent we place',
];
const TALENT_FEATURES = [
  'One profile, reused across every application',
  'AI role-fit scoring — visible to you once reviewed',
  'Application status tracking at every stage',
  'Roles matched to adjacent titles you can genuinely do',
  'No cold outreach — you’re in a curated network',
];
const WHY = [
  ['Pre-scored pool — dense converging nodes','The pool is earned, not open.','Every professional in the Talensity network has been assessed before you see them. Consistency-checked by AI on entry. Reference-verified at shortlist stage. You’re always choosing from a curated set — not a crowd.'],
  ['AI + human hybrid mark','AI scores it. Humans verify it.','Our AI rates every candidate against your role and generates a written rationale explaining why they fit. A human reviews every score before it reaches you. The shortlist you receive is the output of both — not a black box.'],
  ['Closed loop / full circle mark','One partner. Every layer.','Sourcing, scoring, matching, payment, and compliance — all in one place. No stitching tools together. No switching platforms mid-hire. The 60-day replacement guarantee means we stay accountable even after the hire.'],
];
const STATS = [['60 days','Replacement guarantee window'],['3-tier','Candidate verification — AI, reference, background'],['1 platform','From brief to payslip']];
const ROLES = [
  { tags:['Remote · Full-time'], tone:'s', title:'Senior Product Manager', co:'Confidential', lock:true, pay:'$80,000 – $110,000 / year', fit:'Product Strategy · Roadmapping · B2B SaaS' },
  { tags:['Hybrid · Contract'], tone:'o', title:'Lead Backend Engineer', co:'TechCo Ltd', pay:'$6,000 – $8,000 / month', fit:'Node.js · System Design · API Architecture' },
  { tags:['Remote · Consulting'], tone:'e', title:'Head of Growth', co:'Confidential', lock:true, pay:'Competitive · Negotiable', fit:'Growth Strategy · B2C · Acquisition' },
];
const LOGOS = ['Northbeam','Kestrel','Vantia','Orbit Labs','Halden','Meridian','Solvay','Tundra'];

function Stat({ n, l }) {
  return (
    <div className="stack g2">
      <span style={{fontFamily:'var(--font-serif-display)',fontSize:'42px',color:'var(--golden-yellow)',lineHeight:1}}>{n}</span>
      <span style={{fontSize:'14px',color:'rgba(255,255,255,.7)',maxWidth:'240px',lineHeight:1.5}}>{l}</span>
    </div>
  );
}

function HomePage() {
  return (
    <Page>
      {/* Hero */}
      <section className="sec dark" style={{minHeight:'82vh',display:'flex',alignItems:'center',paddingTop:'var(--space-9)'}}>
        <div className="pat"></div>
        <div className="wrap stack g5">
          <Eyebrow>AI-native talent platform</Eyebrow>
          <h1 className="h1" style={{maxWidth:'860px'}}>The intelligence layer<br />for hiring talent.</h1>
          <p className="sub" style={{maxWidth:'520px'}}>Pre-scored professionals. AI-matched to your brief. Sourcing, matching, and payment rails — one platform.</p>
          <div className="row g4">
            <a href="For Companies.html" className="btn fill">Post a brief</a>
            <a href="For Talent.html" className="btn goldline">Join the network</a>
          </div>
          <p className="muted">No upfront cost · 60-day replacement guarantee · Agencies welcome</p>
          <div className="rv" style={{marginTop:'var(--space-5)'}}>
            <Ph label="Abstract hero visual — dense network of nodes converging into a single point. Eagle Green and Golden Yellow on dark. Precision, not noise. Full-bleed." height={280} />
          </div>
        </div>
      </section>

      {/* Social proof */}
      <section style={{background:'#111815',borderTop:'1px solid rgba(255,255,255,.08)',borderBottom:'1px solid rgba(255,255,255,.08)',padding:'32px var(--container-pad)',overflow:'hidden'}}>
        <div className="wrap stack g5">
          <span className="eyebrow dim">Trusted by startups and scale-ups globally</span>
          <div className="row g7" style={{opacity:.4,fontFamily:'var(--font-serif-display)',fontSize:'19px',color:'#fff',rowGap:'16px'}}>
            {LOGOS.map(l => <span key={l}>{l}</span>)}
          </div>
        </div>
      </section>

      {/* How it works */}
      <section className="sec light on-light">
        <div className="wrap stack g8">
          <Head eyebrow="How it works" title="Source. Score. Hire. Pay." sub="From first brief to first payslip — we handle every layer so you don’t have to." />
          <div className="grid c4">
            {STEPS.map(([n, t, d]) => (
              <div key={n} className="stack g4 rv">
                <span className="num">{n}</span>
                <span style={{fontSize:'18px',fontWeight:600,color:'var(--near-black)'}}>{t}</span>
                <p className="body">{d}</p>
              </div>
            ))}
          </div>
          <Ph label="Step-flow diagram of the four-step journey — clean, minimal, Eagle Green and Golden Yellow accents" height={200} />
        </div>
      </section>

      {/* Two paths */}
      <section className="sec dark">
        <div className="wrap stack g8">
          <Head eyebrow="Who is this for" title="One platform. Two doors." sub="Whether you’re hiring or looking — Talensity is built for both sides of the match." subWidth={500} />
          <div className="grid c2">
            <div className="card glass top-accent stack g4 rv">
              <Badge tone="success">For companies</Badge>
              <h3 className="h3">Hire the talent you actually need.</h3>
              <p className="body">Post a brief and get a scored shortlist with written rationale per candidate. Or search the vetted pool yourself and engage directly. Either way — you see match score, rationale, and candidate summary before you unlock contact details. Payroll and compliance included.</p>
              <div className="stack g3" style={{marginTop:'4px'}}>
                {COMPANY_FEATURES.map(f => <div key={f} className="li" style={{fontSize:'14px',color:'rgba(255,255,255,.78)',lineHeight:1.5}}><Tick /><span>{f}</span></div>)}
              </div>
              <a href="For Companies.html" className="btn fill" style={{alignSelf:'flex-start',marginTop:'8px'}}>Start hiring</a>
            </div>
            <div className="card glass top-accent g stack g4 rv">
              <Badge tone="highlight">For talent</Badge>
              <h3 className="h3">Get matched to roles you’ll actually want.</h3>
              <p className="body">Build one profile. Get discovered across multiple roles without re-applying from scratch. Your AI match score and role-fit rationale are visible to you once your application clears review. Track every application like a delivery.</p>
              <div className="stack g3" style={{marginTop:'4px'}}>
                {TALENT_FEATURES.map(f => <div key={f} className="li" style={{fontSize:'14px',color:'rgba(255,255,255,.78)',lineHeight:1.5}}><Tick gold /><span>{f}</span></div>)}
              </div>
              <a href="For Talent.html" className="btn goldline" style={{alignSelf:'flex-start',marginTop:'8px'}}>Join the network</a>
            </div>
          </div>
        </div>
      </section>

      {/* Why Talensity */}
      <section className="sec light on-light">
        <div className="wrap stack g8">
          <Head eyebrow="Why Talensity" title="Signal, not noise." sub="Every decision we’ve made is designed to put the right people in front of the right companies — nothing else." />
          <div className="grid c3">
            {WHY.map(([ph, t, d]) => (
              <div key={t} className="stack g4 rv">
                <Ph label={ph} height={104} />
                <span style={{fontSize:'18px',fontWeight:600,color:'var(--near-black)'}}>{t}</span>
                <p className="body">{d}</p>
              </div>
            ))}
          </div>
          <div style={{background:'var(--near-black)',borderRadius:'var(--radius-lg)',padding:'44px clamp(24px,4vw,56px)'}}>
            <div className="grid c3">{STATS.map(([n, l]) => <Stat key={n} n={n} l={l} />)}</div>
          </div>
        </div>
      </section>

      {/* Open roles preview */}
      <section className="sec dark">
        <div className="wrap stack g8">
          <Head eyebrow="Open roles" title="A network. Not a job board." sub="Roles on Talensity are curated and visible to vetted network members. Browse publicly — apply with your profile." />
          <div className="grid c3">
            {ROLES.map(r => (
              <div key={r.title} className="card stack g3 rv">
                <div className="row g2">{r.tags.map(t => <span key={t} className={'chip ' + r.tone}>{t}</span>)}</div>
                <span style={{fontSize:'18px',fontWeight:600,color:'#fff',marginTop:'6px'}}>{r.title}</span>
                <span className="row g2" style={{fontSize:'14px',color:'rgba(255,255,255,.6)'}}>{r.lock && <Lock />}{r.co}</span>
                <span style={{fontSize:'14px',color:'#fff'}}>{r.pay}</span>
                <span className="muted" style={{lineHeight:1.6}}>{r.fit}</span>
                <a href="Open Roles.html" className="btn ghost" style={{alignSelf:'flex-start'}}>View role →</a>
              </div>
            ))}
          </div>
          <div className="stack g3">
            <p className="muted">Account required to apply. Joining is free.</p>
            <a href="Open Roles.html" style={{color:'#5fb3c4',fontSize:'15px',fontWeight:500}}>Browse all open roles →</a>
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <section className="sec green">
        <div className="pat wht"></div>
        <div className="wrap stack g5" style={{textAlign:'center',alignItems:'center'}}>
          <span className="eyebrow dim">Get started</span>
          <h2 className="h2" style={{fontSize:'clamp(2.25rem,1.8rem + 2vw,3.25rem)'}}>Ready to hire smarter?</h2>
          <p className="sub" style={{color:'rgba(255,255,255,.75)'}}>One partner. Every layer of the hire.</p>
          <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 as talent</a>
          </div>
          <p className="muted" style={{color:'rgba(255,255,255,.6)'}}>No upfront fees · Agencies welcome · 60-day replacement guarantee</p>
        </div>
      </section>
    </Page>
  );
}
window.HomePage = HomePage;