// ---------- Customers ----------
function CustomersPage() {
  const cases = [
    { c: 'Hartley Build Group', sector: 'Residential · 240-dwelling', m: '3-day → same-day', d: 'Sign-off time collapsed from three days to same-day. Inspectors work offline through basements and stairwells without losing work.' },
    { c: 'Boral Inspections', sector: 'Commercial certification', m: '100% audit coverage', d: 'Every defect has a timestamped trail. No more chasing paper for compliance claims.' },
    { c: 'Coastal Constructions', sector: 'Multi-residential', m: '2-tap trade assign', d: 'Replaced a phone-text-followup workflow with two taps and an SMS. Trades arrive prepared.' },
    { c: 'Meridian Group', sector: 'Commercial · white-label', m: 'Client-facing branding', d: 'Meridian\'s branding is what sub-contractors and clients see — keeping the relationship where it belongs.' },
  ];
  return (
    <SideRailLayout current="/customers">
      <Block pad="56px 56px 32px">
        <Headline eyebrow="Customers" title="Real field reports from real sites." subtitle="Construction teams across Australia run IssuesId on every site." align="left" />
      </Block>
      <Block pad="0 56px 72px">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }} className="cust-grid">
          {cases.map(c => (
            <div key={c.c} style={{
              padding: 28, borderRadius: 12, background: 'var(--paper-2)', border: '1px solid var(--rule)',
              display: 'flex', flexDirection: 'column', gap: 14,
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <div style={{ fontSize: 17, fontWeight: 600, letterSpacing: '-0.01em' }}>{c.c}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>{c.sector}</div>
              </div>
              <div style={{
                display: 'inline-flex', alignSelf: 'flex-start', padding: '6px 10px', borderRadius: 5,
                background: 'color-mix(in oklab, var(--accent) 14%, transparent)',
                border: '1px dashed var(--accent)',
                fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--accent-ink)',
              }}>↗ {c.m}</div>
              <div style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--ink-2)' }}>{c.d}</div>
            </div>
          ))}
        </div>
      </Block>
      <style>{`@media(max-width:720px){.cust-grid{grid-template-columns:1fr !important;}}`}</style>
    </SideRailLayout>
  );
}

window.CustomersPage = CustomersPage;