/* Realistic UI mockups used as product screenshots across the marketing pages */
function MkFrame({ title, children, pad }) {
  return (
    <div className="mk">
      <div className="mk-bar"><span>{title}</span></div>
      <div className={'mk-body' + (pad ? ' pad' : '')}>{children}</div>
    </div>
  );
}

const MKNAV = [['layout-dashboard', 'Dashboard'], ['grid-2x2', 'Seat board'], ['file-stack', 'Registers'], ['folder-check', 'Audit pack'], ['layers', 'Sites'], ['users-round', 'Labour pool']];

function MkSide({ active = 'Dashboard' }) {
  return (
    <div className="mk-side">
      <div className="mk-brand"><span className="mk-logo">LT</span><b>Labour Tech</b></div>
      {MKNAV.map(([ic, t]) => <div key={t} className={'mk-nav' + (t === active ? ' on' : '')}><Icon n={ic} size={13} />{t}</div>)}
    </div>
  );
}

function MkKpis({ items }) {
  return <div className="mk-kpis">{items.map(([l, v, d]) => <div className="mk-kpi" key={l}><span>{l}</span><b>{v}</b><i>{d}</i></div>)}</div>;
}

function MkTable({ head, rows }) {
  return (
    <table className="mk-tbl">
      <thead><tr>{head.map(h => <th key={h}>{h}</th>)}</tr></thead>
      <tbody>{rows.map((r, i) => <tr key={i}>{r.map((c, j) => <td key={j}>{c}</td>)}</tr>)}</tbody>
    </table>
  );
}

const B = (t, c) => <span className={'mk-badge ' + c}>{t}</span>;

function MkBars({ data, y }) {
  return <div className="mk-bars">{data.map(([l, v]) => <div key={l}><u className={y ? 'y' : ''} style={{ height: v + '%' }}></u><em>{l}</em></div>)}</div>;
}

function MockDashboard() {
  return (
    <MkFrame title="Dashboard — Sunridge Infra Projects">
      <div className="mk-split">
        <MkSide />
        <div className="mk-main">
          <div className="mk-head"><div><b>Good morning, Sunridge Infra</b><span>Four sites on retainer · three seats empty</span></div><div className="mk-btn">Seat board</div></div>
          <MkKpis items={[['Sites on retainer', '4', '1 mobilising'], ['Seats filled', '119/175', '3 empty'], ['Registers', '11 of 11', '+2 nil'], ['Filings', '4 of 4', 'prepared']]} />
          <div className="mk-card">
            <div className="mk-cardhead"><b>Needs a decision today</b><span>Registers & filings</span></div>
            <MkTable head={['Item', 'Site', 'Due', 'State']} rows={[
              [<b>Approve August wage sheet</b>, 'Tower Phase 2', '4 Sep', B('Awaiting you', 'wait')],
              [<b>Bank proof — seat S-24</b>, 'Tower Phase 2', 'Overdue 3 days', B('Awaiting you', 'bad')],
              [<b>PF ECR deposit</b>, 'All sites', '15 Sep', B('Prepared', 'info')],
              [<b>Replacement — seat S-12</b>, 'Tower Phase 2', '41 hrs left', B('With us', 'info')],
            ]} />
          </div>
        </div>
      </div>
    </MkFrame>
  );
}

function MockBids() {
  return (
    <MkFrame title="Bids — 40 masons, Pune Residential Tower Phase 2">
      <div className="mk-main pad">
        <div className="mk-head"><div><b>Bid comparison</b><span>5 bids · deadline 22 Aug</span></div><div className="mk-btn">Award requirement</div></div>
        <MkKpis items={[['Bids received', '5', ''], ['Avg. rate', '₹784', 'per day'], ['Workforce offered', '227', 'vs 40 required'], ['Fastest start', '2 days', '']]} />
        <div className="mk-card">
          <MkTable head={['Contractor', 'Workers', 'Rate', 'Rating', 'Exp.', 'Status']} rows={[
            [<b>Sahyadri Labour Services</b>, '50', '₹780', '4.8', '8 yrs', B('Shortlisted', 'wait')],
            [<b>Mahalaxmi Workforce LLP</b>, '45', '₹745', '4.6', '6 yrs', B('Under review', 'info')],
            [<b>Shreenath Manpower</b>, '50', '₹810', '4.4', '4 yrs', B('Under review', 'info')],
            [<b>Konkan Enterprises</b>, '32', '₹725', '4.7', '11 yrs', B('Clarification', 'wait')],
            [<b>Deccan Contracting Co.</b>, '50', '₹860', '4.9', '14 yrs', B('Rejected', 'bad')],
          ]} />
        </div>
      </div>
    </MkFrame>
  );
}

function MockRequirement() {
  return (
    <MkFrame title="Post a labour requirement">
      <div className="mk-main pad">
        <div className="mk-head"><div><b>Post a labour requirement</b><span>Pune Residential Tower — Phase 2</span></div><div className="mk-btn">Post</div></div>
        <div className="mk-card pad">
          <div className="mk-fields">
            {[['Project', 'Pune Residential Tower — Phase 2'], ['Site location', 'Hinjawadi, Pune'], ['Bid deadline', '22 Aug 2026'], ['Start date', '15 Sep 2026'], ['Duration', '3 months'], ['Shift', 'Day shift']].map(([l, v]) => (
              <div className="mk-field" key={l}><span>{l}</span><div>{v}</div></div>
            ))}
          </div>
        </div>
        <div className="mk-card">
          <div className="mk-cardhead"><b>Workforce lines</b><span>+ Add trade</span></div>
          <MkTable head={['Trade', 'Number', 'Rate band / day', 'Start']} rows={[
            [<b>Masonry</b>, '40', '₹750–800', '15 Sep'],
            [<b>Helpers</b>, '30', '₹520–560', '15 Sep'],
            [<b>Carpentry</b>, '15', '₹800–850', '22 Sep'],
            [<b>Bar bending</b>, '10', '₹780–820', '22 Sep'],
          ]} />
        </div>
      </div>
    </MkFrame>
  );
}

function MockDiscovery() {
  return (
    <MkFrame title="Contractor discovery">
      <div className="mk-main pad">
        <div className="mk-head"><div><b>Contractor discovery</b><span>38 verified businesses in Pune</span></div><div className="mk-btn">Invite to bid</div></div>
        <div className="mk-filters">{['Pune', 'Masonry', '100–300 workers', '4.5+ rating', 'Verified only'].map(f => <span key={f}>{f}</span>)}</div>
        <div className="mk-card">
          {[['SL', 'Sahyadri Labour Services', 'Pune · 420 workers · 8 yrs', '4.8', 'Available'], ['MW', 'Mahalaxmi Workforce LLP', 'Pune · PCMC · 260 workers · 6 yrs', '4.6', 'Available'], ['KE', 'Konkan Enterprises', 'Mumbai / MMR · 180 workers · 11 yrs', '4.7', 'Partly booked'], ['SN', 'Shreenath Manpower', 'Thane · 540 workers · 4 yrs', '4.4', 'Available']].map(c => (
            <div className="mk-ctr" key={c[1]}>
              <span className="mk-lg">{c[0]}</span>
              <div><b>{c[1]} {B('Verified', 'ok')}</b><span>{c[2]} · ★ {c[3]}</span></div>
              <span className={'mk-badge ' + (c[4] === 'Available' ? 'ok' : 'wait')}>{c[4]}</span>
              <span className="mk-btn ghost">Invite</span>
            </div>
          ))}
        </div>
      </div>
    </MkFrame>
  );
}

function MockFeed() {
  return (
    <MkFrame title="Open requirements — Pune">
      <div className="mk-main pad">
        <div className="mk-head"><div><b>Open requirements</b><span>14 live in your cities · 3 closing this week</span></div><div className="mk-btn">Submit bid</div></div>
        <div className="mk-filters">{['Pune', 'Masonry', 'Helpers', 'Starts in 30 days'].map(f => <span key={f}>{f}</span>)}</div>
        <div className="mk-card">
          {[['40 masons', 'Sunridge Infra · Hinjawadi', '₹750–800 / day · 3 months', '22 Aug'], ['30 helpers', 'Sunridge Infra · Hinjawadi', '₹520–560 / day · 3 months', '22 Aug'], ['15 carpenters', 'Meridian Builders · Kharadi', '₹800–850 / day · 6 weeks', '24 Aug'], ['25 shuttering', 'Deccan EPC · Chakan', '₹700–760 / day · 4 months', '27 Aug']].map(r => (
            <div className="mk-ctr" key={r[0] + r[1]}>
              <span className="mk-lg y">{r[0].split(' ')[0]}</span>
              <div><b>{r[0]} {B('Verified buyer', 'ok')}</b><span>{r[1]} · {r[2]}</span></div>
              <span className="mk-badge wait">Bid by {r[3]}</span>
              <span className="mk-btn ghost">Bid</span>
            </div>
          ))}
        </div>
      </div>
    </MkFrame>
  );
}

function MockBidSubmit() {
  return (
    <MkFrame title="Submit bid — 40 masons, Hinjawadi">
      <div className="mk-main pad">
        <div className="mk-head"><div><b>Submit your bid</b><span>Sunridge Infra · 40 masons · starts 15 Sep</span></div><div className="mk-btn">Submit</div></div>
        <div className="mk-card pad">
          <div className="mk-fields">
            {[['Workforce offered', '50 masons'], ['Rate per day', '₹780'], ['Availability', 'Immediate'], ['Start date', '15 Sep 2026'], ['Fulfilment time', '3 days'], ['Supervisor', 'Provided']].map(([l, v]) => (
              <div className="mk-field" key={l}><span>{l}</span><div>{v}</div></div>
            ))}
          </div>
          <div className="mk-note">Your verified profile, workforce capacity and completed engagements are attached automatically.</div>
        </div>
        <div className="mk-card">
          <div className="mk-cardhead"><b>My bids</b><span>View all</span></div>
          <MkTable head={['Requirement', 'Buyer', 'Rate', 'Status']} rows={[
            [<b>30 helpers</b>, 'Sunridge Infra', '₹540', B('Shortlisted', 'wait')],
            [<b>15 carpenters</b>, 'Meridian Builders', '₹820', B('Negotiating', 'wait')],
            [<b>20 masons</b>, 'Deccan EPC', '₹760', B('Awarded', 'ok')],
          ]} />
        </div>
      </div>
    </MkFrame>
  );
}

function MockProjects() {
  return (
    <MkFrame title="Sites on retainer — Meridian Developers">
      <div className="mk-split">
        <MkSide active="Projects" />
        <div className="mk-main">
          <div className="mk-head"><div><b>Projects</b><span>4 sites · 9 open requirements</span></div><div className="mk-btn">New project</div></div>
          <div className="mk-card">
            <MkTable head={['Project', 'Location', 'Status', 'Open reqs', 'Supplied']} rows={[
              [<b>Tower — Phase 2</b>, 'Hinjawadi, Pune', B('Bidding', 'wait'), '5', '62 / 100'],
              [<b>Commercial Block A</b>, 'Kharadi, Pune', B('Active', 'ok'), '3', '70 / 70'],
              [<b>Warehouse fit-out</b>, 'Chinchwad, PCMC', B('Open', 'info'), '2', '0 / 45'],
              [<b>Township — Phase 1</b>, 'Thane, MMR', B('Draft', 'off'), '0', '—'],
            ]} />
          </div>
        </div>
      </div>
    </MkFrame>
  );
}

function MockAnalytics() {
  return (
    <MkFrame title="Analytics — portfolio">
      <div className="mk-main pad">
        <div className="mk-head"><div><b>Portfolio analytics</b><span>Last 6 months · 4 projects</span></div><div className="mk-btn ghost">Export</div></div>
        <MkKpis items={[['Requirements', '38', '+6'], ['Fulfilment rate', '92%', '+3 pts'], ['Avg. bids / req.', '4.6', '+0.4'], ['Avg. fulfilment', '9 days', '−2 days']]} />
        <div className="mk-2col">
          <div className="mk-card pad"><div className="mk-cardhead" style={{ padding: 0, border: 0 }}><b>Requirements per month</b></div><MkBars data={[['Mar', 42], ['Apr', 58], ['May', 51], ['Jun', 74], ['Jul', 66], ['Aug', 88]]} /></div>
          <div className="mk-card pad"><div className="mk-cardhead" style={{ padding: 0, border: 0 }}><b>Trade-wise demand</b></div><MkBars y data={[['Masons', 90], ['Helpers', 72], ['Carp.', 48], ['Bar b.', 40], ['Elec.', 26]]} /></div>
        </div>
      </div>
    </MkFrame>
  );
}

function MockPool() {
  return (
    <MkFrame title="Labour pool — availability, Pune">
      <div className="mk-main pad">
        <div className="mk-head"><div><b>Labour pool availability</b><span>Registered on the Labour Tech app · Pune · updated today</span></div><div className="mk-btn">Request allocation</div></div>
        <MkKpis items={[['Workers in pool', '4,280', 'Pune'], ['Available now', '1,140', '+180 this week'], ['ID verified', '86%', '+2 pts'], ['Skill-tested', '41%', '+4 pts']]} />
        <div className="mk-card">
          <MkTable head={['Trade', 'In pool', 'Available', 'Verified', 'Avg. day rate']} rows={[
            [<b>Masonry</b>, '980', '265', '91%', '₹765'],
            [<b>Helpers</b>, '1,420', '480', '84%', '₹530'],
            [<b>Carpentry</b>, '610', '155', '88%', '₹820'],
            [<b>Bar bending</b>, '430', '110', '90%', '₹790'],
            [<b>Electrical</b>, '260', '58', '94%', '₹910'],
          ]} />
        </div>
        <div className="mk-note">Workers are engaged through your appointed labour contractor. Individual worker records stay in the Labour Tech app.</div>
      </div>
    </MkFrame>
  );
}

function MockSeats() {
  const seats = [];
  for (let i = 1; i <= 50; i++) seats.push([i, i === 12 || i === 31 || i === 46 ? 'empty' : (i === 24 ? 'pend' : 'ok')]);
  return (
    <MkFrame title="Seat board — Pune Residential Tower, Phase 2">
      <div className="mk-main pad">
        <div className="mk-head"><div><b>50 seats on retainer</b><span>47 occupied · 3 empty · replacement clock running</span></div><div className="mk-btn">Request replacement</div></div>
        <MkKpis items={[['Seats', '50', 'included'], ['Occupied', '47', '94% filled'], ['Empty', '3', 'oldest 31 hrs'], ['Replacements', '7', '5 left this month']]} />
        <div className="mk-card pad">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(26px,1fr))', gap: 5 }}>
            {seats.map(([n, st]) => (
              <span key={n} style={{ height: 24, borderRadius: 6, display: 'grid', placeItems: 'center', fontSize: 9.5, fontWeight: 600, border: '1px solid ' + (st === 'empty' ? '#f0b4b4' : st === 'pend' ? '#f2d9a0' : 'rgba(0,0,0,.08)'), background: st === 'empty' ? '#fdf0f0' : st === 'pend' ? '#fdf7e8' : '#f4f3ff', color: st === 'empty' ? '#b03636' : st === 'pend' ? '#8a6300' : '#111340' }}>{String(n).padStart(2, '0')}</span>
            ))}
          </div>
        </div>
        <div className="mk-card">
          <MkTable head={['Seat', 'Trade', 'State', 'Days held', 'Note']} rows={[
            [<b>S-01</b>, 'Masonry', B('Occupied', 'ok'), '142', 'Returning worker'],
            [<b>S-12</b>, 'Masonry', B('Empty', 'bad'), '—', 'Replacement due in 41 hrs'],
            [<b>S-24</b>, 'Helpers', B('Occupied', 'wait'), '11', 'Bank proof pending'],
            [<b>S-33</b>, 'Carpentry', B('Occupied', 'ok'), '204', 'Returning worker'],
            [<b>S-46</b>, 'Shuttering', B('Empty', 'bad'), '—', 'Released — F&F acknowledged'],
          ]} />
        </div>
      </div>
    </MkFrame>
  );
}

function MockRegisters() {
  return (
    <MkFrame title="Registers & filings — August 2026">
      <div className="mk-main pad">
        <div className="mk-head"><div><b>Registers & filings</b><span>68 unique workers across 50 seats</span></div><div className="mk-btn">Download all</div></div>
        <MkKpis items={[['Unique workers', '68', 'this month'], ['Attendance days', '1,412', '100%'], ['Registers', '11 of 11', '+2 nil'], ['Filings', '4 of 4', 'prepared']]} />
        <div className="mk-card">
          <div className="mk-cardhead"><b>Statutory registers</b><span>August 2026</span></div>
          <MkTable head={['Form', 'Register', 'State']} rows={[
            [<b>Form 12</b>, 'Muster Roll', B('Generated', 'ok')],
            [<b>Form 13</b>, 'Register of Wages', B('Generated', 'ok')],
            [<b>Form 14</b>, 'Wages-cum-Muster Roll', B('Generated', 'ok')],
            [<b>Form 18</b>, 'Register of Advances', B('Generated', 'ok')],
            [<b>Form 17</b>, 'Register of Fines', B('Nil return', 'off')],
            [<b>CLRA XIII</b>, 'Workmen by Contractor', B('Prepared', 'ok')],
          ]} />
        </div>
        <div className="mk-card">
          <div className="mk-cardhead"><b>Filing calendar</b><span>Deposits made by you</span></div>
          <MkTable head={['Filing', 'Prepared', 'Due', 'State']} rows={[
            [<b>PF ECR — August</b>, '13 Sep', '15 Sep', B('Prepared', 'info')],
            [<b>ESIC — August</b>, '13 Sep', '15 Sep', B('Prepared', 'info')],
            [<b>PF ECR — July</b>, '12 Aug', 'Deposited', B('Acknowledged', 'ok')],
          ]} />
        </div>
      </div>
    </MkFrame>
  );
}

function MockAudit() {
  return (
    <MkFrame title="Audit pack — Pune Residential Tower, Phase 2">
      <div className="mk-main pad">
        <div className="mk-head"><div><b>Audit pack</b><span>One download per site, per month</span></div><div className="mk-btn">Download July pack</div></div>
        <MkKpis items={[['Packs published', '11', 'since mobilisation'], ['Latest', 'July 2026', '33 files'], ['Next', '20 Sep', 'August'], ['Inspections', '1', 'no adverse finding']]} />
        <div className="mk-card">
          <div className="mk-cardhead"><b>What is in the pack</b><span>July 2026</span></div>
          <MkTable head={['Section', 'Contents', 'Files']} rows={[
            [<b>Statutory registers</b>, 'Forms 9 to 19 and Form D', '11'],
            [<b>CLRA registers</b>, 'Form XII and Form XIII', '2'],
            [<b>Wage records</b>, 'Wage sheet, payslips, payout file, proof', '4'],
            [<b>Contributions</b>, 'PF, ESIC, PT, TDS with bifurcation', '4'],
            [<b>Acknowledgements</b>, 'Deposit receipts and portal acks', '6'],
            [<b>Safety</b>, 'Induction, PPE, toolbox talks, incidents', '4'],
          ]} />
        </div>
      </div>
    </MkFrame>
  );
}

const MOCKS = { seats: MockSeats, registers: MockRegisters, audit: MockAudit, pool: MockPool, dashboard: MockDashboard, bids: MockBids, requirement: MockRequirement, discovery: MockDiscovery, feed: MockFeed, bidsubmit: MockBidSubmit, projects: MockProjects, analytics: MockAnalytics };

function Mock({ kind, dark }) {
  const C = MOCKS[kind] || MockDashboard;
  return <div className={'mk-wrap' + (dark ? ' dark' : '')}><C /></div>;
}

Object.assign(window, { Mock, MkFrame, MkSide, MkTable, MkKpis, MkBars, MockPool });