// ---------- Features ----------
function FeaturesPage() {
  const sections = [
    { tag: '01', t: 'Capture', body: 'Photos, voice notes, location pins, trade tags. Offline-first on any phone. Every defect gets a unique ID and audit trail from the first tap.', bullets: ['Photo + annotation', 'Voice-to-text notes', 'GPS + floor plan pin', 'Custom defect taxonomies'] },
    { tag: '02', t: 'Assign', body: 'Route defects to the right sub-contractor in two taps. Auto-notify via email and SMS. Trades update status from their own phone — no login required.', bullets: ['Two-tap trade routing', 'SMS + email notification', 'No-login trade portal', 'Auto-chase overdue items'] },
    { tag: '03', t: 'Report', body: 'Generate compliance-ready PDFs in seconds. Five formats: handover, compliance, liability, weekly brief, trade summary. Fully white-labelled on Enterprise.', bullets: ['5 PDF report formats', 'Custom branding', 'Scheduled auto-reports', 'CSV + API export'] },
    { tag: '04', t: 'Audit', body: 'Every action is timestamped and attributed. Records are tamper-proof after sign-off. Export a complete chain of custody for any defect, any day.', bullets: ['Tamper-proof records', 'Chain-of-custody export', 'Role-based edit locks', 'Retention controls'] },
  ];
  return (
    <SideRailLayout current="/features">
      <Block pad="56px 56px 32px">
        <Headline eyebrow="Features" title="Every capability, one connected platform." subtitle="From first capture to final compliance sign-off — four modules, one audit trail." align="left" />
      </Block>
      <Block pad="0 56px 72px">
        <div style={{ display: 'grid', gap: 14 }}>
          {sections.map(s => (
            <div key={s.tag} style={{
              display: 'grid', gridTemplateColumns: '100px 1fr 1fr', gap: 32,
              padding: '32px 0', borderTop: '1px solid var(--rule)', alignItems: 'flex-start',
            }} className="feat-row">
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--accent)', letterSpacing: '0.06em' }}>FEAT {s.tag}</div>
              <div>
                <h3 style={{ fontSize: 26, fontWeight: 500, margin: '0 0 12px', letterSpacing: '-0.02em' }}>{s.t}</h3>
                <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--ink-2)', margin: 0 }}>{s.body}</p>
              </div>
              <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'grid', gap: 8 }}>
                {s.bullets.map(b => (
                  <li key={b} style={{ fontSize: 13, display: 'flex', gap: 8, color: 'var(--ink-2)' }}>
                    <span style={{ color: 'var(--accent)', fontWeight: 600 }}>→</span>{b}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </Block>
      <style>{`@media(max-width:720px){.feat-row{grid-template-columns:1fr !important;}}`}</style>
    </SideRailLayout>
  );
}

window.FeaturesPage = FeaturesPage;