const { useState: useStateP } = React;

// ---------- Solutions ----------
function SolutionsPage() {
  const [role, setRole] = useStateP(0);
  const roles = [
    { r: 'Inspector', line: 'Capture more defects per walkthrough — paperless, offline, defensible.', wins: ['40% more defects caught per hour', 'Auto-numbered register, no spreadsheets', 'Tamper-proof photo metadata'] },
    { r: 'Builder', line: 'See every open defect across every site, in one dashboard.', wins: ['Single-pane view across projects', 'Trade performance analytics', 'White-labelled to clients & subbies'] },
    { r: 'Trade', line: 'Get notified, show up prepared, mark complete — all from your phone.', wins: ['No-login portal, SMS alerts', 'Photo + voice updates on site', 'Get paid faster with proof-of-fix'] },
    { r: 'Project manager', line: 'Compliance handover in minutes, not half a day.', wins: ['One-click compliance PDFs', 'Live status across all sites', 'Auto-chase overdue trades'] },
    { r: 'Client', line: 'Full visibility on defect progress through handover.', wins: ['Read-only client portal', 'Weekly auto-summary emails', 'Defect sign-off at handover'] },
  ];
  return (
    <SideRailLayout current="/solutions">
      <Block pad="56px 56px 32px">
        <Headline eyebrow="Solutions" title="One platform, five role-specific views." subtitle="Each role sees a dashboard tailored to their responsibilities. No overload." align="left" />
      </Block>
      <Block pad="0 56px 72px">
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 32 }}>
          {roles.map((r, i) => (
            <button key={r.r} onClick={() => setRole(i)} style={{
              padding: '10px 14px', fontSize: 13, fontFamily: 'var(--font-sans)',
              background: role === i ? 'var(--ink)' : 'transparent',
              color: role === i ? 'var(--paper)' : 'var(--ink-2)',
              border: '1px solid ' + (role === i ? 'var(--ink)' : 'var(--rule)'),
              borderRadius: 6, cursor: 'pointer', fontWeight: 500,
            }}>{r.r}</button>
          ))}
        </div>
        <div style={{
          display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 32,
          padding: 32, borderRadius: 12,
          background: 'var(--paper-2)', border: '1px solid var(--rule)',
        }} className="sol-grid">
          <div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--accent)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 10 }}>For the {roles[role].r.toLowerCase()}</div>
            <h3 style={{ fontSize: 28, fontWeight: 500, margin: '0 0 16px', letterSpacing: '-0.02em', textWrap: 'balance' }}>{roles[role].line}</h3>
            <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'grid', gap: 10 }}>
              {roles[role].wins.map(w => (
                <li key={w} style={{ fontSize: 14, display: 'flex', gap: 8, color: 'var(--ink-2)' }}>
                  <span style={{ color: 'var(--accent)' }}>✓</span>{w}
                </li>
              ))}
            </ul>
          </div>
          <div style={{
            borderRadius: 10, padding: 24, minHeight: 220,
            background: 'var(--card)', border: '1px solid var(--rule)',
            fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-2)', lineHeight: 1.6,
          }}>
            <div style={{ color: 'var(--ink-3)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 10, fontSize: 10 }}>{roles[role].r} · today</div>
            {[['09:12', 'DEF-0421 captured', 'var(--ink-3)'], ['09:14', 'Assigned Wet Seal', 'var(--warn)'], ['11:02', 'DEF-0422 opened', 'var(--danger)'], ['14:30', '3 closed by Metro Tiles', 'var(--ok)'], ['16:02', 'DEF-0421 resolved', 'var(--ok)']].map(([t, l, c]) => (
              <div key={t} style={{ display: 'grid', gridTemplateColumns: '50px 1fr', gap: 6, marginBottom: 4 }}>
                <span style={{ color: 'var(--ink-3)' }}>{t}</span>
                <span style={{ color: c }}>{l}</span>
              </div>
            ))}
          </div>
        </div>
        <style>{`@media(max-width:720px){.sol-grid{grid-template-columns:1fr !important;}}`}</style>
      </Block>
    </SideRailLayout>
  );
}

window.SolutionsPage = SolutionsPage;