import Layout from '@/components/layout/Layout'

// Placeholder for QMS modules that are on the roadmap but not yet implemented.
// Keeps navigation links and role redirects valid instead of 404-ing.
export default function ComingSoon({ title, blurb }: { title: string; blurb?: string }) {
  return (
    <Layout title={title}>
      <div style={{ maxWidth: '520px', margin: '48px auto', textAlign: 'center' }}>
        <div style={{
          width: '52px', height: '52px', borderRadius: '14px', background: '#EEEDFE',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: '16px'
        }}>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#534AB7" strokeWidth="2">
            <path strokeLinecap="round" strokeLinejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
          </svg>
        </div>
        <h2 style={{ fontSize: '18px', fontWeight: 600, margin: '0 0 8px' }}>{title}</h2>
        <p style={{ fontSize: '13px', color: '#888', lineHeight: 1.6, margin: '0 0 18px' }}>
          {blurb || 'This module is part of the QMS roadmap and is not built yet. The data model and navigation are already in place.'}
        </p>
        <span style={{
          fontSize: '11px', fontWeight: 500, color: '#3C3489', background: '#EEEDFE',
          padding: '4px 12px', borderRadius: '12px'
        }}>
          Coming soon
        </span>
      </div>
    </Layout>
  )
}