const { Input } = window.Talensity_b45625;

const ROLE_LIST = [
  { t:'Senior Product Manager', co:'Confidential', lock:true, pay:'$80,000 – $110,000 / year', type:'Full-time', loc:'Remote', tone:'s', fit:['Product strategy','Roadmapping','B2B SaaS'] },
  { t:'Lead Backend Engineer', co:'TechCo Ltd', pay:'$6,000 – $8,000 / month', type:'Contract', loc:'Hybrid · Berlin', tone:'o', fit:['Node.js','System design','API architecture'] },
  { t:'Head of Growth', co:'Confidential', lock:true, pay:'Competitive · Negotiable', type:'Consulting', loc:'Remote', tone:'e', fit:['Growth strategy','B2C','Acquisition'] },
  { t:'Senior Product Designer', co:'Halden Studio', pay:'$70,000 – $92,000 / year', type:'Full-time', loc:'Remote · EU', tone:'s', fit:['Design systems','Product discovery','Prototyping'] },
  { t:'Finance Operations Lead', co:'Confidential', lock:true, pay:'$85,000 – $105,000 / year', type:'Full-time', loc:'Hybrid · London', tone:'e', fit:['Controls','Multi-entity','Reporting'] },
  { t:'Staff Data Engineer', co:'Meridian Analytics', pay:'$9,000 – $12,000 / month', type:'Contract', loc:'Remote', tone:'o', fit:['dbt','Warehouse design','Streaming'] },
  { t:'Customer Success Manager', co:'Orbit Labs', pay:'$55,000 – $68,000 / year', type:'Full-time', loc:'Remote · US', tone:'s', fit:['Onboarding','Retention','B2B SaaS'] },
  { t:'Engineering Manager', co:'Confidential', lock:true, pay:'$120,000 – $150,000 / year', type:'Full-time', loc:'Hybrid · Amsterdam', tone:'e', fit:['Team leadership','Platform','Hiring'] },
  { t:'Brand & Content Lead', co:'Vantia', pay:'$4,500 – $6,000 / month', type:'Consulting', loc:'Remote', tone:'o', fit:['Editorial','Positioning','Campaigns'] },
];
const EXPLAINER = [
  ['Curated, not broadcast','Roles on Talensity are posted by verified companies. Not a feed of scraped listings.'],
  ['Pre-matched, not cold','When you apply, your existing profile is used. AI match score generated automatically.'],
  ['Two visibility tiers','Public roles are open to all. Network-visible roles appear on your dashboard once your application clears review.'],
];
const FILTERS = [['Role type',['Engineering','Product','Design','Growth','Operations']],['Location / remote',['Remote','Hybrid','On-site']],['Contract type',['Full-time','Contract','Consulting']],['Pay range',['Up to $60k','$60k – $100k','$100k+']]];

function RoleCard({ r }) {
  return (
    <div className="card stack g3 rv">
      <div className="row g2" style={{justifyContent:'space-between',alignItems:'flex-start'}}>
        <span style={{fontSize:'18px',fontWeight:600,color:'var(--near-black)',maxWidth:'62%',lineHeight:1.3}}>{r.t}</span>
        <span className={'chip ' + r.tone}>{r.loc}</span>
      </div>
      <span className="row g2" style={{fontSize:'14px',color:'var(--warm-grey)'}}>{r.lock && <Lock />}{r.co}</span>
      <span style={{fontSize:'14.5px',fontWeight:500,color:'var(--near-black)'}}>{r.pay}</span>
      <span className="muted" style={{fontSize:'13px'}}>{r.type}</span>
      <div className="row g2">{r.fit.map(f => <span key={f} className="chip">{f}</span>)}</div>
      <a href="#role" className="btn ghost" style={{alignSelf:'flex-start'}}>View role →</a>
    </div>
  );
}

function RolesPage() {
  return (
    <Page>
      <section className="sec dark compact">
        <div className="pat"></div>
        <div className="wrap stack g6">
          <div className="stack g4">
            <Eyebrow>Network job board</Eyebrow>
            <h1 className="h2" style={{fontSize:'clamp(2rem,1.7rem + 1.8vw,3rem)'}}>Open roles in the network.</h1>
            <p className="sub">Curated, pre-matched openings. Browse freely — apply with your Talensity profile. Account required to apply.</p>
          </div>
          <div className="card glass" style={{padding:'20px'}}>
            <div className="grid filterbar" style={{gridTemplateColumns:'1.6fr repeat(4,1fr) auto',alignItems:'end',gap:'var(--space-3)'}}>
              <Input label="Search" placeholder="Search by role, skill, or keyword…" />
              {FILTERS.map(([l, opts]) => (
                <label key={l} className="stack g2" style={{fontSize:'12px',color:'rgba(255,255,255,.6)'}}>{l}
                  <select style={{appearance:'none',background:'rgba(255,255,255,.05)',border:'1px solid var(--border-hairline)',borderRadius:'var(--radius-sm)',color:'#fff',fontFamily:'var(--font-sans)',fontSize:'14px',padding:'12px 14px'}}>
                    <option>Any</option>
                    {opts.map(o => <option key={o}>{o}</option>)}
                  </select>
                </label>
              ))}
              <button className="btn fill" style={{height:'46px'}}>Apply filters</button>
            </div>
          </div>
        </div>
      </section>

      <section className="sec light on-light">
        <div className="wrap grid split" style={{gridTemplateColumns:'1fr 300px',gap:'var(--space-7)',alignItems:'start'}}>
          <div className="grid" style={{gridTemplateColumns:'repeat(auto-fill,minmax(260px,1fr))'}}>
            {ROLE_LIST.map(r => <RoleCard key={r.t} r={r} />)}
          </div>
          <aside className="card stack g4" style={{position:'sticky',top:'88px'}}>
            <span className="eyebrow">Not in the network yet?</span>
            <p className="body">Join free — your profile unlocks network-visible roles and application tracking.</p>
            <a href="For Talent.html" className="btn goldfill" style={{alignSelf:'flex-start'}}>Join the network</a>
          </aside>
        </div>
      </section>

      <section className="sec dark compact">
        <div className="wrap grid c3">
          {EXPLAINER.map(([t, d]) => (
            <div key={t} className="stack g3 rv">
              <hr className="hr" />
              <span style={{fontSize:'16px',fontWeight:600,color:'#fff'}}>{t}</span>
              <p className="body" style={{fontSize:'14px'}}>{d}</p>
            </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">Want to see network-visible roles?</h2>
          <p className="sub" style={{color:'rgba(255,255,255,.75)'}}>Join the network and unlock the full board.</p>
          <a href="For Talent.html" className="btn white">Create your profile</a>
        </div>
      </section>
    </Page>
  );
}
window.RolesPage = RolesPage;