/* App.jsx , Composes the Bright Floppy campaign outreach dashboard. */
const { useState } = React;

function App() {
 const [activeCampaign, setActiveCampaign] = useState('c1');
 const [draft, setDraft] = useState('');
 const [filter, setFilter] = useState('all');

 const campaigns = [
  { id: 'c1', name: 'Lumen Skincare · Q3 launch', client: 'Lumen Skincare', status: 'In flight', dot: 'active', creators: 3, last: '2h ago' },
  { id: 'c2', name: 'Northbound Outdoors · Spring trail', client: 'Northbound', status: 'Reporting', dot: 'pending', creators: 2, last: 'Yesterday' },
  { id: 'c3', name: 'Pixel & Pour · Coffee drop', client: 'Pixel & Pour', status: 'Brief sent', dot: 'active', creators: 4, last: '3 days ago' },
  { id: 'c4', name: 'Sora Studio · Headphone launch', client: 'Sora Studio', status: 'Drafting', dot: 'paused', creators: 2, last: '5 days ago' },
  { id: 'c5', name: 'Bento Cat · Apparel collab', client: 'Bento Cat', status: 'Approved', dot: 'active', creators: 1, last: '1 week ago' },
 ];

 const filtered = campaigns.filter(c => filter === 'all' || c.dot === filter);

 return (
  <div className="bf-app">
   <Sidebar
    activeId={activeCampaign}
    onSelect={setActiveCampaign}
    filter={filter}
    onFilterChange={setFilter}
   />
   <BriefArea
    campaign={campaigns.find(c => c.id === activeCampaign)}
    draft={draft}
    onDraftChange={setDraft}
   />
  </div>
 );
}

window.App = App;