const {useEffect,useMemo,useState}=React;
const request = async (path, options={}) => {
  const res = await fetch(`/api${path}`, { headers:{'Content-Type':'application/json', ...(options.headers||{})}, ...options });
  const data = await res.json().catch(()=>({}));
  if (!res.ok) throw new Error(data.message || 'Request failed');
  return data;
};
const api = {
  contact: payload => request('/contact',{method:'POST',body:JSON.stringify(payload)}),
  quote: payload => request('/quotes',{method:'POST',body:JSON.stringify(payload)}),
  incident: payload => request('/incidents',{method:'POST',body:JSON.stringify(payload)}),
  jobs: () => request('/jobs'),
  login: payload => request('/auth/login',{method:'POST',body:JSON.stringify(payload)}),
  me: token => request('/auth/me',{headers:{Authorization:`Bearer ${token}`}}),
  admin: (token, path) => request(path,{headers:{Authorization:`Bearer ${token}`}})
};

const companies=[
['Breeze Security Management','Security & Risk','Armed and unarmed guarding, VIP protection, CCTV, event security, mobile patrol and security consulting.','2,500+ guards'],
['Breeze Events Management','Events','Corporate events, AGMs, awards, weddings, AV, streaming, decor, catering, festivals and production.','800+ events'],
['Breeze Construction & Properties','Construction & Property','Commercial construction, residential estates, roads, property sales, leasing, renovation and project consultancy.','120+ projects'],
['Breeze Wood Works','Manufacturing','Bespoke furniture, architectural millwork, kitchens, wardrobes, doors, staircases and restoration.','5,000+ pieces'],
['Breeze Logistics','Logistics','Air, sea and land freight, warehousing, distribution, customs, fleet tracking and supply-chain management.','99.7% on-time*'],
['Breeze Financial Consult','Finance','Accounting, tax, valuation, fundraising, financial modelling, audit, risk and compliance advisory.','500+ clients'],
['Breeze Facility Management','Facilities','Cleaning, building maintenance, electrical, plumbing, HVAC, landscaping, pest control and property management.','200+ properties'],
['Breeze Travel and Tours','Travel','Flights, accommodation, visas, corporate travel, Ghana heritage tours, MICE and conference travel.','20K+ travellers'],
['Breeze Pharmaceuticals','Healthcare','Prescription and OTC distribution, cold-chain, medical devices, consumables and quality assurance.','1,000+ products'],
['Breeze Agribusiness and Farms','Agribusiness','Mechanised farming, livestock, aquaculture, processing, inputs, cold-chain and agronomic advisory.','5,000+ acres*'],
['Breeze-Gold','Mining & Gold','Licensed gold buying, refining, assay, export support, responsible sourcing and mining consultancy.','99.99% purity*'],
['Breeze Medicare Solutions','Healthcare','Health plans, employee wellness, telemedicine, hospital support, medical referrals and community health.','50K+ lives*'],
['Ark of Faith Charity Foundation','Social Impact','Scholarships, healthcare outreach, community development, disaster relief, youth and women empowerment.','25K+ lives*']
];
const industries=['Oil & Gas','Banking & Finance','Government','Healthcare','Real Estate','Mining','Hospitality','Education','Manufacturing','Retail & FMCG','Telecoms','NGOs'];
const projects=[['Integrated Mining Security','Security','Multi-layer security planning and operations for a mining environment.'],['Cold Chain Logistics','Logistics & Healthcare','Temperature-sensitive distribution and supply coordination.'],['Affordable Housing Estate','Construction','End-to-end delivery support for residential development.']];

function Layout({children,setPage}){return <><header><div className="top"><span>MA85 Gibson Street, Weija, Accra</span><span>Mon–Fri 8:00–17:00 · Sat 9:00–13:00</span></div><nav><button className="brand" onClick={()=>setPage('home')}>I VAC <b>COF</b><small>GROUP OF COMPANIES</small></button><div className="links">{[['home','Home'],['about','About'],['companies','Companies'],['industries','Industries'],['projects','Projects'],['careers','Careers'],['contact','Contact']].map(([p,l])=><button key={p} onClick={()=>setPage(p)}>{l}</button>)}</div><div className="actions"><button className="gold" onClick={()=>setPage('quote')}>Request Quote</button><button onClick={()=>setPage('portal')}>Client Portal</button></div></nav></header><main>{children}</main><footer><div><h3>I VAC COF</h3><p>Integrated business solutions across security, construction, logistics, finance, healthcare, travel and social impact.</p></div><div><h4>Contact</h4><p>059 318 8839<br/>059 291 9186<br/>P.O. Box OD 299, Odorkor, Accra</p></div><div><h4>Emergency</h4><p>For urgent incidents, use the incident reporting channel.</p><button className="danger" onClick={()=>setPage('incident')}>Report Incident</button></div><div><h4>Legal</h4><p>Privacy · Terms · Cookies</p><small>© {new Date().getFullYear()} I VAC COF Group.</small></div></footer></>}
function Hero({setPage}){return <section className="hero"><div><span className="eyebrow">INTEGRATED BUSINESS SOLUTIONS · GHANA</span><h1>One group.<br/><em>Many capabilities.</em></h1><p>I VAC COF brings specialised companies together to deliver coordinated solutions for businesses, institutions and communities.</p><div className="heroBtns"><button className="gold big" onClick={()=>setPage('companies')}>Explore Our Companies</button><button className="outline big" onClick={()=>setPage('quote')}>Start a Conversation</button></div></div><div className="heroCard"><span>GROUP PROFILE</span><strong>13</strong><p>specialised companies across critical sectors</p><div className="miniStats"><b>12</b><small>Industries</small><b>24/7</b><small>Selected support</small></div></div></section>}
function Home({setPage}){return <><Hero setPage={setPage}/><section className="stats"><div><b>13</b><span>Group Companies</span></div><div><b>12</b><span>Industries Served</span></div><div><b>16</b><span>Regional Coverage*</span></div><div><b>1</b><span>Integrated Group</span></div></section><section><div className="sectionHead"><span className="eyebrow">OUR PLATFORM</span><h2>Capabilities built for real-world operations.</h2><p>From protection and construction to logistics, healthcare, finance and social impact, our companies provide focused expertise under one group.</p></div><CompanyGrid setPage={setPage}/></section><section className="darkSplit"><div><span className="eyebrow">THE GROUP ADVANTAGE</span><h2>Specialists that can work together.</h2><p>Clients can engage a focused subsidiary or combine capabilities across the group for complex assignments.</p></div><div className="adv"><span>01</span><h3>Multi-sector expertise</h3><p>Practical capabilities across twelve industries.</p><span>02</span><h3>Coordinated delivery</h3><p>One group structure with specialised operating teams.</p><span>03</span><h3>Local context</h3><p>Ghana-focused delivery with regional ambitions.</p></div></section><section><div className="sectionHead"><span className="eyebrow">SELECTED WORK</span><h2>Projects and case studies</h2></div><div className="grid3">{projects.map(x=><article className="project" key={x[0]}><span>{x[1]}</span><h3>{x[0]}</h3><p>{x[2]}</p><button onClick={()=>setPage('projects')}>View project →</button></article>)}</div></section><CTA setPage={setPage}/></>}
function CompanyGrid({setPage,filter=''}){const list=companies.filter(c=>(c[0]+' '+c[1]+' '+c[2]).toLowerCase().includes(filter.toLowerCase()));return <div className="companyGrid">{list.map((c,i)=><article className="company" key={c[0]}><span>{String(i+1).padStart(2,'0')} · {c[1]}</span><h3>{c[0]}</h3><p>{c[2]}</p><strong>{c[3]}</strong><button onClick={()=>setPage('company:'+encodeURIComponent(c[0]))}>Explore →</button></article>)}</div>}
function About(){return <Page title="About I VAC COF" kicker="OUR STORY"><div className="twoCol"><div><h2>Built around complementary capabilities.</h2><p>I VAC COF Group of Companies is presented in the supplied company material as a diversified Ghanaian group operating through specialised subsidiaries. The group combines security, events, construction, woodworking, logistics, finance, facilities, travel, pharmaceuticals, agribusiness, gold, healthcare and charitable work.</p><p>This production website keeps the supplied company information as source content. Claims marked with an asterisk should be verified internally before public publication.</p></div><div className="values"><h3>Mission</h3><p>Deliver reliable, practical and coordinated services that create value for clients and communities.</p><h3>Vision</h3><p>Build a respected Ghanaian group with strong capabilities and sustainable regional reach.</p><h3>Values</h3><p>Integrity · Service · Accountability · Excellence · Collaboration</p></div></div></Page>}
function Companies({setPage}){const [q,setQ]=useState('');return <Page title="Our Companies" kicker="13 SPECIALISED BUSINESSES"><div className="toolbar"><input placeholder="Search companies or capabilities…" value={q} onChange={e=>setQ(e.target.value)}/></div><CompanyGrid setPage={setPage} filter={q}/></Page>}
function CompanyPage({name,setPage}){const c=companies.find(x=>x[0]===name)||companies[0];return <Page title={c[0]} kicker={c[1]}><div className="companyHero"><div><p className="lead">{c[2]}</p><div className="tag">{c[3]}</div></div><div className="sideCard"><b>Typical capabilities</b><p>Operational delivery · consulting · project support · client reporting</p><button className="gold" onClick={()=>setPage('quote')}>Request a Quote</button></div></div><div className="serviceGrid">{['Strategy & consulting','Operations & delivery','Quality & compliance','Reporting & support'].map(x=><article key={x}><h3>{x}</h3><p>Structured services designed around the needs of the assignment, with clear scopes, responsible teams and measurable deliverables.</p></article>)}</div></Page>}
function Industries(){return <Page title="Industries" kicker="WHERE WE OPERATE"><div className="industryGrid">{industries.map((x,i)=><article key={x}><span>0{i+1}</span><h3>{x}</h3><p>Relevant capabilities can be assembled across the group for sector-specific requirements.</p></article>)}</div></Page>}
function Projects(){return <Page title="Projects & Case Studies" kicker="SELECTED EXPERIENCE"><div className="grid3">{projects.map(x=><article className="project bigProject" key={x[0]}><span>{x[1]}</span><h3>{x[0]}</h3><p>{x[2]}</p><ul><li>Defined scope and delivery plan</li><li>Cross-functional coordination</li><li>Reporting and operational follow-through</li></ul></article>)}</div></Page>}
function Careers(){const [jobs,setJobs]=useState([]);useEffect(()=>{api.jobs().then(x=>setJobs(x.jobs||[])).catch(()=>{});},[]);return <Page title="Careers" kicker="JOIN THE GROUP"><p className="lead">Build a career across a diversified Ghanaian business group. Current positions are loaded from the production database.</p><div className="jobs">{(jobs.length?jobs:[['Senior Security Operations Manager','Accra','Full-time'],['Construction Project Engineer','Accra/Tema','Full-time'],['Logistics Coordinator','Tema','Full-time'],['Financial Analyst','Accra','Full-time'],['Registered Pharmacist','Accra','Full-time'],['Events Coordinator','Accra','Contract']]).map((j,i)=><article key={i}><div><span>{j.location||j[1]}</span><h3>{j.title||j[0]}</h3><p>{j.type||j[2]}</p></div><button className="outline" onClick={()=>location.href='#apply'}>Apply</button></article>)}</div><div id="apply" className="formCard"><h3>Application interest</h3><p>Use the contact form and include the role you are applying for. CV upload can be enabled after production storage is configured.</p></div></Page>}
function Contact({setPage}){const [msg,setMsg]=useState('');const submit=async e=>{e.preventDefault();try{await api.contact(Object.fromEntries(new FormData(e.target)));setMsg('Thank you. Your message has been received.');e.target.reset();}catch(err){setMsg(err.message)}};return <Page title="Contact" kicker="LET'S TALK"><div className="twoCol"><div><h2>Start a conversation.</h2><p>MA85 Gibson Street, Weija, Accra<br/>P.O. Box OD 299, Odorkor, Accra<br/>059 318 8839 · 059 291 9186</p><button className="danger" onClick={()=>setPage('incident')}>Emergency / Incident Reporting</button></div><Form onSubmit={submit} fields={['name','email','phone','message']} button="Send Message"/><p>{msg}</p></div></Page>}
function Quote(){const [msg,setMsg]=useState('');const submit=async e=>{e.preventDefault();try{await api.quote(Object.fromEntries(new FormData(e.target)));setMsg('Quote request submitted.');e.target.reset();}catch(err){setMsg(err.message)}};return <Page title="Request a Quote" kicker="BUSINESS ENQUIRY"><Form onSubmit={submit} fields={['name','email','phone','company','service','message']} button="Submit Quote Request"/><p>{msg}</p></Page>}
function Incident(){const [msg,setMsg]=useState('');const submit=async e=>{e.preventDefault();try{await api.incident(Object.fromEntries(new FormData(e.target)));setMsg('Incident report submitted. For emergencies, call 059 318 8839 immediately.');e.target.reset();}catch(err){setMsg(err.message)}};return <Page title="Incident Reporting" kicker="URGENT SUPPORT"><div className="alert"><b>Emergency contact: 059 318 8839</b><span>For immediate danger or life-threatening situations, contact the appropriate emergency services first.</span></div><Form onSubmit={submit} fields={['name','email','phone','location','description']} extra={<label>Severity<select name="severity"><option>Low</option><option>Medium</option><option>High</option><option>Critical</option></select></label>} button="Submit Incident Report"/><p>{msg}</p></Page>}
function Portal(){const [token,setToken]=useState(localStorage.getItem('ivac_token')||'');const [user,setUser]=useState(null);const [err,setErr]=useState('');useEffect(()=>{if(token)api.me(token).then(x=>setUser(x.user)).catch(()=>{localStorage.removeItem('ivac_token');setToken('')})},[token]);if(!user)return <Page title="Client Portal" kicker="SECURE ACCESS"><div className="portalLogin"><h2>Client sign in</h2><form onSubmit={async e=>{e.preventDefault();try{const r=await api.login(Object.fromEntries(new FormData(e.target)));localStorage.setItem('ivac_token',r.token);setToken(r.token);setErr('')}catch(x){setErr(x.message)}}}><input name="email" type="email" placeholder="Email" required/><input name="password" type="password" placeholder="Password" required/><button className="gold">Sign in</button></form><p>{err}</p><small>Administrator accounts should be created securely on the server before launch.</small></div></Page>;return <Page title="Client Dashboard" kicker="SECURE PORTAL"><div className="dashboard"><article><span>ACCOUNT</span><h3>{user.name}</h3><p>{user.email}</p></article><article><span>DOCUMENTS</span><h3>0</h3><p>No documents uploaded yet.</p></article><article><span>REPORTS</span><h3>0</h3><p>Operational reports will appear here.</p></article><article><span>INVOICES</span><h3>0</h3><p>Invoices will appear here.</p></article></div><button onClick={()=>{localStorage.removeItem('ivac_token');location.reload()}}>Sign out</button></Page>}
function Admin(){const [token,setToken]=useState(localStorage.getItem('ivac_admin')||'');const [data,setData]=useState(null);const [err,setErr]=useState('');if(!token)return <Page title="Admin" kicker="RESTRICTED"><div className="portalLogin"><form onSubmit={async e=>{e.preventDefault();try{const r=await api.login(Object.fromEntries(new FormData(e.target)));localStorage.setItem('ivac_admin',r.token);setToken(r.token);setErr('')}catch(x){setErr(x.message)}}}><input name="email" type="email" placeholder="Admin email" required/><input name="password" type="password" placeholder="Password" required/><button className="gold">Admin Sign in</button></form><p>{err}</p></div></Page>;if(!data)api.admin(token,'/admin/overview').then(setData).catch(e=>{setErr(e.message);setToken('');localStorage.removeItem('ivac_admin')});return <Page title="Admin Dashboard" kicker="RESTRICTED"><div className="dashboard">{Object.entries(data||{}).filter(([k])=>k!=='recent').map(([k,v])=><article key={k}><span>{k}</span><h3>{v}</h3><p>Current database count</p></article>)}</div><pre className="json">{JSON.stringify(data?.recent||[],null,2)}</pre></Page>}
function Form({onSubmit,fields,extra,button}){return <form className="formCard" onSubmit={onSubmit}>{fields.map(f=><label key={f}>{f[0].toUpperCase()+f.slice(1)}{f==='message'||f==='description'?<textarea name={f} rows="5" required={f!=='phone'}/>:<input name={f} type={f==='email'?'email':'text'} required={['name','email','message','description'].includes(f)}/>}</label>)}{extra}{<button className="gold" type="submit">{button}</button>}</form>}
function Page({title,kicker,children}){return <><section className="pageHero"><span className="eyebrow">{kicker}</span><h1>{title}</h1></section><section className="pageBody">{children}</section></>}
function CTA({setPage}){return <section className="cta"><div><span className="eyebrow">READY TO ENGAGE?</span><h2>Tell us what you need to achieve.</h2></div><button className="gold big" onClick={()=>setPage('quote')}>Request a Quote</button></section>}
function App(){const [page,setPage]=useState(location.pathname==='/admin'?'admin':'home');const route=p=>{setPage(p);history.pushState({},'',p==='home'?'/':p==='admin'?'/admin':'/'+p.split(':')[0])};useEffect(()=>{const f=()=>setPage(location.pathname==='/admin'?'admin':location.pathname.slice(1)||'home');addEventListener('popstate',f);return()=>removeEventListener('popstate',f)},[]);const content=useMemo(()=>{if(page==='home')return <Home setPage={route}/>;if(page==='about')return <About/>;if(page==='companies')return <Companies setPage={route}/>;if(page.startsWith('company:'))return <CompanyPage name={decodeURIComponent(page.slice(8))} setPage={route}/>;if(page==='industries')return <Industries/>;if(page==='projects')return <Projects/>;if(page==='careers')return <Careers/>;if(page==='contact')return <Contact setPage={route}/>;if(page==='quote')return <Quote/>;if(page==='incident')return <Incident/>;if(page==='portal')return <Portal/>;return <Admin/>},[page]);return page==='admin'?<Layout setPage={route}>{content}</Layout>:<Layout setPage={route}>{content}</Layout>}