import React, { useState } from 'react';
import ViolationForm from './components/ViolationForm';
import Dashboard     from './components/Dashboard';

const tabs = [
    { id: 'dashboard', label: '📊 Dashboard' },
    { id: 'violation', label: '+ New Violation' },
];

const s = {
    app:     { minHeight: '100vh', background: '#f5f6fa', fontFamily: "'Segoe UI', Arial, sans-serif" },
    nav:     { background: 'linear-gradient(135deg, #2c3e50, #34495e)', padding: '0 40px', display: 'flex', alignItems: 'center', gap: 0 },
    logo:    { color: 'white', fontWeight: 800, fontSize: '18px', letterSpacing: '0.5px', marginRight: '32px', padding: '18px 0' },
    tab:     (active) => ({
        padding: '18px 22px', color: active ? 'white' : 'rgba(255,255,255,0.6)',
        borderBottom: active ? '3px solid #667eea' : '3px solid transparent',
        cursor: 'pointer', fontWeight: active ? 700 : 400, fontSize: '14px',
        background: 'none', border: 'none', borderBottom: active ? '3px solid #667eea' : '3px solid transparent',
    }),
    card:    { maxWidth: '1100px', margin: '30px auto', background: 'white', borderRadius: '10px', boxShadow: '0 2px 12px rgba(0,0,0,0.08)' },
};

export default function App() {
    const [tab, setTab] = useState('dashboard');
    return (
        <div style={s.app}>
            <nav style={s.nav}>
                <div style={s.logo}>CPAS Tracker</div>
                {tabs.map(t => (
                    <button key={t.id} style={s.tab(tab === t.id)} onClick={() => setTab(t.id)}>
                        {t.label}
                    </button>
                ))}
            </nav>
            <div style={s.card}>
                {tab === 'dashboard' ? <Dashboard /> : <ViolationForm />}
            </div>
        </div>
    );
}