const LOGO = "assets/logo/wordmark-white.svg";
const NAV = [
  { label:'Platform', items:[
    { t:'Full-service hiring', d:'We source, score and deliver your shortlist', h:'How It Works.html' },
    { t:'Self-service search', d:'Search the vetted pool yourself', h:'For Companies.html' },
    { t:'Payments & compliance', d:'AOR and EOR for the talent we place', h:'For Companies.html' },
    { t:'For agencies', d:'Recruitment and staffing agencies welcome', h:'Pricing.html' } ] },
  { label:'For companies', items:[
    { t:'How it works', d:'The full-service hiring flow', h:'How It Works.html' },
    { t:'Self-service', d:'Describe what you need, get matched candidates', h:'For Companies.html' },
    { t:'Pricing', d:'Success-fee model with no upfront cost', h:'Pricing.html' },
    { t:'Start hiring →', h:'For Companies.html', cta:true } ] },
  { label:'For talent', items:[
    { t:'Join the network', d:'Build your profile and get discovered', h:'For Talent.html' },
    { t:'How matching works', d:'AI-scored, human-reviewed', h:'How It Works.html' },
    { t:'Application tracking', d:'Follow your progress in real time', h:'For Talent.html' },
    { t:'Open roles →', h:'Open Roles.html', cta:true, gold:true } ] },
  { label:'Open roles', href:'Open Roles.html' },
  { label:'Resources', items:[
    { t:'Blog', h:'blog.html' },
    { t:'How Talensity works', h:'How It Works.html' },
    { t:'FAQs', h:'How It Works.html#faqs' },
    { t:'Contact us', h:'#contact' } ] },
];
const Chev = () => (
  <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 4l3 3 3-3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>
);
const Tick = ({ gold }) => (
  <svg className={gold ? 'tick g' : 'tick'} width="14" height="14" viewBox="0 0 14 14" fill="none" style={{marginTop:'4px'}}><path d="M2 7.5l3.2 3.2L12 3.8" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/></svg>
);
const Lock = () => (
  <svg width="11" height="11" viewBox="0 0 12 12" fill="none" style={{opacity:.6}}><rect x="2" y="5" width="8" height="6" rx="1.4" stroke="currentColor" strokeWidth="1.2"/><path d="M4 5V3.8a2 2 0 014 0V5" stroke="currentColor" strokeWidth="1.2"/></svg>
);

function SiteNav() {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 8);
    on(); window.addEventListener('scroll', on, { passive:true });
    return () => window.removeEventListener('scroll', on);
  }, []);
  return (
    <>
      <nav className={scrolled ? 'nav scrolled' : 'nav'}>
        <a href="index.html" style={{display:'flex',alignItems:'center'}}><img src={LOGO} alt="Talensity" /></a>
        <div className="navlinks">
          {NAV.map(n => (
            <div className="navitem" key={n.label}>
              {n.href ? <a href={n.href}>{n.label}</a> : <span>{n.label}<Chev /></span>}
              {n.items && (
                <div className="drop">
                  {n.items.map(i => (
                    <a key={i.t} href={i.h} className={i.cta ? (i.gold ? 'cta gold' : 'cta') : ''}>{i.t}{i.d && <em>{i.d}</em>}</a>
                  ))}
                </div>
              )}
            </div>
          ))}
        </div>
        <div className="navright">
          <a href="#login" className="btn ghost sm" style={{padding:'8px 4px'}}>Login</a>
          <a href="For Companies.html" className="btn fill sm">Post a brief</a>
        </div>
        <button className="burger" aria-label="Menu" onClick={() => setOpen(o => !o)}>{open ? '✕' : '☰'}</button>
      </nav>
      {open && (
        <div className="overlay">
          {NAV.map(n => n.href
            ? <a key={n.label} href={n.href} style={{padding:'18px 0',fontSize:'17px',color:'#fff',borderBottom:'1px solid rgba(255,255,255,.1)'}}>{n.label}</a>
            : <details key={n.label}><summary>{n.label}</summary>{n.items.map(i => <a key={i.t} href={i.h}>{i.t}</a>)}</details>
          )}
          <div className="row g4" style={{marginTop:'28px'}}>
            <a href="For Companies.html" className="btn fill">Post a brief</a>
            <a href="#login" className="btn line">Login</a>
          </div>
        </div>
      )}
    </>
  );
}

const FOOT = [
  { h:'Platform', items:[['Full-service hiring','How It Works.html'],['Self-service search','For Companies.html'],['Payments & compliance','For Companies.html'],['For agencies','Pricing.html'],['Pricing','Pricing.html']] },
  { h:'Company', items:[['About','#about'],['Blog','blog.html'],['Careers','#careers'],['Contact','#contact']] },
  { h:'Legal & support', items:[['Privacy policy','#privacy'],['Terms of service','#terms'],['Cookie policy','#cookies'],['FAQs','How It Works.html#faqs']] },
];
function SiteFooter() {
  return (
    <footer className="foot">
      <div className="wrap footgrid">
        <div className="stack g4">
          <img src={LOGO} alt="Talensity" style={{height:'22px',alignSelf:'flex-start'}} />
          <p className="body" style={{maxWidth:'240px',fontSize:'14px'}}>The intelligence layer for hiring talent.</p>
          <div className="row g3">
            <a href="#linkedin" aria-label="LinkedIn" style={{color:'rgba(255,255,255,.6)'}}>
              <svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5zM3 9h4v12H3zM9 9h3.8v1.7h.05c.53-.95 1.83-1.95 3.77-1.95C20.2 8.75 21 11 21 14.1V21h-4v-6.1c0-1.46-.5-2.45-1.8-2.45-1.05 0-1.67.7-1.95 1.38-.1.24-.12.58-.12.92V21H9z"/></svg>
            </a>
            <a href="#x" aria-label="X" style={{color:'rgba(255,255,255,.6)'}}>
              <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M18.9 2H22l-6.8 7.8L22.6 22h-6.3l-4.9-6.4L5.6 22H2.4l7.3-8.3L1.8 2h6.4l4.6 6.1zM17.7 20h1.7L6.4 3.8H4.6z"/></svg>
            </a>
          </div>
        </div>
        {FOOT.map(c => (
          <div key={c.h}>
            <h4>{c.h}</h4>
            {c.items.map(([t, h]) => <a key={t} href={h}>{t}</a>)}
          </div>
        ))}
      </div>
      <div className="wrap footbar">
        <span>© 2026 Talensity. All rights reserved.</span>
        <span>Registered in the United Kingdom.</span>
      </div>
    </footer>
  );
}

function Ph({ label, height = 200, style }) {
  return <div className="ph" style={{minHeight:height + 'px', ...style}}><span>Placeholder — {label}</span></div>;
}
function Eyebrow({ children, tone }) {
  return <span className={tone ? 'eyebrow ' + tone : 'eyebrow'}>{children}</span>;
}
function Head({ eyebrow, tone, title, sub, subWidth, align, children }) {
  return (
    <div className="stack g4" style={{maxWidth:'760px',margin:align === 'center' ? '0 auto' : undefined,textAlign:align}}>
      {eyebrow && <Eyebrow tone={tone}>{eyebrow}</Eyebrow>}
      <h2 className="h2" style={{whiteSpace:'pre-line'}}>{title}</h2>
      {sub && <p className="sub" style={{maxWidth:(subWidth || 620) + 'px',margin:align === 'center' ? '0 auto' : undefined}}>{sub}</p>}
      {children}
    </div>
  );
}
function useReveal() {
  React.useEffect(() => {
    const io = new IntersectionObserver(es => es.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }), { rootMargin:'-40px' });
    document.querySelectorAll('.rv').forEach((el, i) => { el.style.transitionDelay = (i % 4) * 60 + 'ms'; io.observe(el); });
    return () => io.disconnect();
  }, []);
}
function Page({ children }) {
  useReveal();
  return <>
    <SiteNav />
    {children}
    <SiteFooter />
  </>;
}
Object.assign(window, { LOGO, SiteNav, SiteFooter, Ph, Eyebrow, Head, Tick, Lock, Chev, useReveal, Page });