const { useState, useEffect, useRef } = React;

const NAV = [
  ['Home', 'index.html'],
  ['About', 'about.html'],
  ['How it works', 'how-it-works.html'],
];
const SOLUTIONS = [
  ['For Labour Contractors', 'Find requirements, bid, win work.', 'for-contractors.html'],
  ['For EPC & general contractors', 'Post requirements, compare bids, hire.', 'for-epcs.html'],
  ['For builders & developers', 'Run workforce procurement across projects.', 'for-builders.html'],
];
const NAV2 = [
  ['Resources', 'resources.html'],
  ['Contact', 'contact.html'],
];

function Icon({ n, size = 20 }) {
  const r = useRef(null);
  useEffect(() => { if (r.current && window.lucide) window.lucide.createIcons({ attrs: { width: size, height: size }, nameAttr: 'data-lucide', root: r.current }); });
  return <span ref={r} style={{ display: 'inline-flex' }}><i data-lucide={n}></i></span>;
}

function Logo({ dark }) {
  return (
    <a href="index.html" className="logo">
      <span className="logo-mark">LT</span>
      <span className="logo-t">
        <b>Labour Tech</b>
        <span className="logo-tag">Digitizing India's construction workforce</span>
      </span>
    </a>
  );
}

function Nav({ page }) {
  const [open, setOpen] = useState(false);
  const [drawer, setDrawer] = useState(false);
  const solOn = ['for-contractors.html', 'for-epcs.html', 'for-builders.html'].includes(page);
  return (
    <header className="nav">
      <div className="wrap nav-in">
        <Logo />
        <ul>
          {NAV.map(([t, h]) => <li key={h}><a href={h} className={page === h ? 'on' : ''}>{t}</a></li>)}
          <li className={'navdrop' + (solOn ? ' on' : '')} onMouseEnter={() => setOpen(true)} onMouseLeave={() => setOpen(false)}>
            <button onClick={() => setOpen(!open)} aria-expanded={open}>Solutions <Icon n="chevron-down" size={15} /></button>
            {open && <div className="menu">{SOLUTIONS.map(([t, d, h]) => <a key={h} href={h}><b>{t}</b><span>{d}</span></a>)}</div>}
          </li>
          {NAV2.map(([t, h]) => <li key={h}><a href={h} className={page === h ? 'on' : ''}>{t}</a></li>)}
        </ul>
        <div className="nav-right">
          <a className="lg" href="login.html">Log in</a>
          <a className="btn btn-primary btn-sm" href="get-started.html">Get started</a>
        </div>
        <button className="burger" onClick={() => setDrawer(!drawer)} aria-label="Menu"><i></i><i></i><i></i></button>
      </div>
      {drawer && (
        <div className="drawer">
          {[...NAV, ...SOLUTIONS.map(s => [s[0], s[2]]), ...NAV2, ['Log in', 'login.html'], ['Get started', 'get-started.html']].map(([t, h]) => <a key={h + t} href={h} onClick={() => setDrawer(false)}>{t}</a>)}
        </div>
      )}
    </header>
  );
}

const FOOT = [
  ['Platform', [['How it works', 'how-it-works.html'], ['Subscription', 'pricing.html'], ['Contractor discovery', 'for-epcs.html'], ['Bidding & comparison', 'for-builders.html'], ['Dashboard preview', 'dashboard.html']]],
  ['Who it is for', [['Labour Contractors', 'for-contractors.html'], ['EPC & general contractors', 'for-epcs.html'], ['Builders & developers', 'for-builders.html']]],
  ['Company', [['About Labour Tech', 'about.html'], ['Resources', 'resources.html'], ['Contact', 'contact.html'], ['Get started', 'get-started.html']]],
];

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="cols">
          <div>
            <div className="logo on-dark" style={{ marginBottom: 18 }}>
              <span className="logo-mark">LT</span>
              <span className="logo-t"><b>Labour Tech</b><span className="logo-tag">Digitizing India's construction workforce</span></span>
            </div>
            <p>A B2B marketplace for construction workforce procurement. Get verified workers, post requirements, discover verified labour contractors, compare bids and manage hiring in one place.</p>
            <p style={{ marginTop: 14, fontSize: 13, color: 'rgba(255,255,255,.55)' }}>Managed labour and compliances.</p>
          </div>
          {FOOT.map(([h, links]) => (
            <div key={h}>
              <h4>{h}</h4>
              {links.map(([t, u]) => <a key={t} href={u}>{t}</a>)}
            </div>
          ))}
        </div>
      </div>
      <div className="wrap" style={{ display: 'flex', flexWrap: 'wrap', gap: 18, paddingTop: 26, marginTop: 8, borderTop: '1px solid rgba(255,255,255,.12)' }}>
        {[['Terms of service', 'terms.html'], ['Privacy policy', 'privacy.html'], ['Refund & cancellation', 'refunds.html'], ['Contact', 'contact.html'], ['Staff sign-in', 'admin/index.html']].map(([t, u]) => <a key={u} href={u} style={{ fontSize: 13 }}>{t}</a>)}
      </div>
      <div className="copyright">© 2026 Labour Tech. Labour Tech is a business platform — worker-facing services are delivered through a separate product.</div>
    </footer>
  );
}

function PHero({ eyebrow, title, sub, ctas, center }) {
  return (
    <section className={'phero' + (center ? ' center' : '')}>
      <div className="wrap">
        {eyebrow && <span className="eyebrow">{eyebrow}</span>}
        <h1>{title}</h1>
        {sub && <p>{sub}</p>}
        {ctas && <div className="hero-btns">{ctas.map(([t, h, v]) => <a key={t} className={'btn ' + (v || 'btn-primary')} href={h}>{t}</a>)}</div>}
      </div>
    </section>
  );
}

function SecTitle({ eyebrow, title, sub, center = true }) {
  return (
    <div className={'sec-title' + (center ? ' center' : '')}>
      {eyebrow && <span className="eyebrow">{eyebrow}</span>}
      <h2 className="h2" style={{ marginTop: 10 }}>{title}</h2>
      {sub && <p className="lead" style={{ marginTop: 12 }}>{sub}</p>}
    </div>
  );
}

function Ticks({ items }) {
  return <ul className="ticks">{items.map((t, i) => <li key={i}>{typeof t === 'string' ? <span>{t}</span> : t}</li>)}</ul>;
}

function Ph({ label, style }) {
  return <div className="ph" style={style}>{label}</div>;
}

function CtaBand({ title, sub, primary = ['Post a requirement', 'get-started.html'], secondary = ['Book a demo', 'contact.html'] }) {
  return (
    <section className="band-sm"><div className="wrap">
      <div className="ctacard" style={{ alignItems: 'center', textAlign: 'center' }}>
        <h3>{title}</h3>
        <p style={{ color: 'rgba(255,255,255,.86)', maxWidth: '60ch' }}>{sub}</p>
        <div className="hero-btns" style={{ justifyContent: 'center' }}>
          <a className="btn btn-light" href={primary[1]}>{primary[0]}</a>
          <a className="btn btn-ghost" style={{ background: 'transparent', color: '#fff', borderColor: 'rgba(255,255,255,.5)' }} href={secondary[1]}>{secondary[0]}</a>
        </div>
      </div>
    </div></section>
  );
}

function Page({ page, children }) {
  useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
  return <React.Fragment><Nav page={page} /><main>{children}</main><Footer /></React.Fragment>;
}

function LTMount(key, el) {
  const host = document.getElementById('m-' + key);
  if (host) { ReactDOM.createRoot(host).render(el); return; }
  const root = document.getElementById('root');
  if (root && !root.dataset.mounted) { root.dataset.mounted = '1'; ReactDOM.createRoot(root).render(el); }
}

const LT_LOCATIONS = ["Pune city","Pimpri-Chinchwad (PCMC)","Hinjawadi / Wakad","Baner / Balewadi","Kharadi / Wagholi","Hadapsar / Magarpatta","Ravet / Punawale","Chakan / Talegaon","Undri / NIBM","Alandi / Lonikand","Mulshi / Pirangut","Other location in Pune Metropolitan Region"];

Object.assign(window, { LT_LOCATIONS, LTMount, Icon, Logo, Nav, Footer, PHero, SecTitle, Ticks, Ph, CtaBand, Page, useState, useEffect, useRef });