const RES = [
  ['Guide', 'How to write a labour requirement that gets comparable bids', 'The eleven fields that decide whether four contractors quote the same scope — and what happens to your bid table when one of them is left blank.', '8 min read', 'brand/res-req-fields.png'],
  ['Guide', 'GST and KYC verification: what to keep ready', 'The exact documents a construction business needs for verification, who signs them, and the three reasons submissions come back for resubmission.', '6 min read', 'brand/res-gst-kyc.png'],
  ['Playbook', 'Running a bid comparison your management can sign off', 'Rate is one column of six. A working method for scoring workforce, availability, history and fulfilment risk together.', '10 min read', 'brand/res-bid-comparison.png'],
  ['Case study', 'Residential tower, Pune — five trades, one project', 'How a phase-two workforce plan splits into masons, helpers, carpenters, bar benders and electricians, and how each requirement is awarded separately.', '5 min read', 'brand/res-residential-tower.png'],
  ['Case study', 'Labour contractor onboarding, on High Rise Projects', 'A labour contractor from registration to first awarded requirement: verification, profile, discovery, bid.', '5 min read', 'brand/res-contractor-onboarding.png'],
  ['Article', 'Why construction hiring never digitised', 'Fragmented supply, informal contracting and a phone-first culture — and what has changed in the last three years.', '7 min read', 'brand/res-why-digitised.png'],
];

const HELP = [
  ['Registration & verification', [
    ['Choosing your business type', 'Register as an EPC or infrastructure contractor, a builder or developer, or a labour contractor. EPCs and builders post requirements and receive bids. Labour contractors register their workforce, discover open requirements and bid on them. All three get access to the registered labour pool. If your firm does both, register once as the buyer type and tell us in the notes — we will enable supply on the same account.'],
    ['Documents required for GST verification', 'GST certificate, PAN of the entity, and one address proof for the registered office. Labour contractors also submit their CLRA licence number if they hold one, and PF and ESIC codes if registered. Documents must be in the entity name — a proprietor may submit personal PAN with the proprietorship GST.'],
    ['Tracking verification status', 'Status shows on your dashboard as submitted, under review, or verified. Most submissions are reviewed within one working day. You can use the platform while verification is pending, but contact reveals and bidding open only once the account is verified.'],
    ['What to do if a submission is rejected', 'The rejection note names the document and the reason — usually a name mismatch with the GST record, an expired document, or an unreadable scan. Fix that one item and resubmit from the same screen; the rest of your submission is retained.'],
  ]],
  ['Requirements & bidding', [
    ['Creating a project', 'A project is the site the work sits under: name, location, expected duration and your internal reference. Every requirement belongs to a project, so bids, awards and supply records stay grouped by site.'],
    ['Posting a labour requirement', 'Pick the trade, the number of workers, skill level, wage band, start date, duration, shift pattern and the site. Complete fields are what make bids comparable — a blank field is the most common reason four contractors quote four different scopes.'],
    ['Setting a bid deadline', 'Set the deadline when you post. Contractors see the countdown and cannot submit after it closes. Seven to ten days ahead of your start date gives contractors time to confirm availability; you can extend a deadline once without reposting.'],
    ['Comparing and awarding bids', 'The comparison table puts rate beside workforce on hand, availability against your start date, past fulfilment and verification status. Award to one contractor or split a requirement across two. Everyone who bid is notified of the outcome.'],
  ]],
  ['Contractors & connections', [
    ['Searching the supply base', 'Filter verified contractors by trade, city, workforce size and verification status. Listings show capability and history only — no worker personal data appears on any search result.'],
    ['Inviting a contractor to bid', 'Open a contractor from search and invite them to an existing requirement. Invited contractors are notified and appear in your bid table alongside contractors who found the requirement themselves.'],
    ['Shortlisting and connection stages', 'A connection moves through shortlisted, contacted, in discussion and awarded. Stages are yours to set and are visible only to your team, so procurement and site can see where each contractor stands.'],
    ['Recording notes against a connection', 'Add dated notes to any contractor — rates discussed, workers seen at another site, documents pending. Notes stay with the contractor record, so the next person handling the requirement sees the history.'],
  ]],
  ['Account & billing', [
    ['Adding team members and roles', 'Invite colleagues by email or mobile. Admins manage billing and team, members post requirements and award bids, viewers see requirements and bids without acting on them. Contact reveals draw from one shared account quota, not per user.'],
    ['Changing your plan', 'Ask for a change from the plan screen and we will send a revised quote covering the new scope. Upgrades apply from acceptance; reductions apply from the next cycle. Scope, not price, is what you pick on the site — figures come in the written quote.'],
    ['Downloading GST invoices', 'Every payment generates a GST invoice under Billing, downloadable as PDF with your GSTIN, place of supply and tax bifurcation. Invoices carry our registered billing address, which may differ from the office address on the contact page.'],
    ['Cancelling a subscription', 'Cancel from Billing. Access continues to the end of the paid period and your requirement and bid history stays available in read-only form. Retainer agreements follow the notice period in their own terms.'],
  ]],
];

function ResourcesPage() {
  const [tab, setTab] = useState('All');
  const [open, setOpen] = useState('');
  const tabs = ['All', 'Guide', 'Playbook', 'Case study', 'Article'];
  const list = tab === 'All' ? RES : RES.filter(r => r[0] === tab);
  return (
    <Page page="resources.html">
      <PHero center eyebrow="Resources" title="How to run construction workforce procurement properly." sub="Guides, playbooks, case studies and help articles for the people posting requirements and the people bidding on them." />
      <section className="band"><div className="wrap">
        <div className="center" style={{ marginBottom: 30 }}>
          <div className="toggle">{tabs.map(t => <button key={t} className={tab === t ? 'on' : ''} onClick={() => setTab(t)}>{t}</button>)}</div>
        </div>
        <div className="grid3">
          {list.map(([k, t, b, m, img]) => (
            <a className="rescard" href="#" key={t} onClick={e => e.preventDefault()}>
              <img className="rescover" src={img} alt="" loading="lazy" />
              <div className="body">
                <span className="badge info">{k}</span>
                <h3>{t}</h3>
                <p>{b}</p>
                <div className="meta"><Icon n="clock" size={14} /> {m}</div>
              </div>
            </a>
          ))}
        </div>
      </div></section>
      <section className="band" style={{ background: 'var(--lav-2)' }}><div className="wrap">
        <SecTitle eyebrow="Help centre" title="Answers by area of the platform" />
        <div className="grid2">
          {HELP.map(([t, items]) => (
            <div className="svc" key={t}>
              <h3>{t}</h3>
              <div className="helplist">
                {items.map(([q, a]) => (
                  <div className={'helpq' + (open === q ? ' on' : '')} key={q}>
                    <button onClick={() => setOpen(open === q ? '' : q)} aria-expanded={open === q}>{q} <span className="ar">→</span></button>
                    {open === q ? <p>{a}</p> : null}
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div></section>
      <CtaBand title="Bring us a live site." sub="Tell us your business type and where your site is, and we will come and look at it." primary={['Contact us', 'contact.html']} secondary={['Register your business', 'get-started.html']} />
    </Page>
  );
}

LTMount('resources', <ResourcesPage />);