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: '#050608', fontFamily: "'Segoe UI', Arial, sans-serif", color: '#f8f9fa' },
  nav:  { background: '#000000', padding: '0 40px', display: 'flex', alignItems: 'center', gap: 0, borderBottom: '1px solid #333' },
  logoWrap: { display: 'flex', alignItems: 'center', marginRight: '32px', padding: '14px 0' },
  logoImg:  { height: '28px', marginRight: '10px' },
  logoText: { color: '#f8f9fa', fontWeight: 800, fontSize: '18px', letterSpacing: '0.5px' },
  tab:  (active) => ({
    padding: '18px 22px',
    color: active ? '#f8f9fa' : 'rgba(248,249,250,0.6)',
    borderBottom: active ? '3px solid #d4af37' : '3px solid transparent',
    cursor: 'pointer', fontWeight: active ? 700 : 400, fontSize: '14px',
    background: 'none', border: 'none',
  }),
  card: { maxWidth: '1100px', margin: '30px auto', background: '#111217', borderRadius: '10px', boxShadow: '0 2px 16px rgba(0,0,0,0.6)', border: '1px solid #222' },
};

export default function App() {
  const [tab, setTab] = useState('dashboard');
  return (
    <div style={s.app}>
      <nav style={s.nav}>
        <div style={s.logoWrap}>
          <img src="/static/mpm-logo.png" alt="MPM" style={s.logoImg} />
          <div style={s.logoText}>CPAS Tracker</div>
        </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>
  );
}