/* UCS site — shared chrome (TopBar, Header, Footer, QuoteModal).
   Exposes window.UCSSite.{ Chrome }. Wrap a page like:
   <Chrome active="Services">{({openQuote}) => (<>...page...</>)}</Chrome> */
const UCS = window.UniversalControlsSolutionDesignSystem_84a86f;
const { Button, Input } = UCS;
const I = window.UCSIcons;
const { useState } = React;

const NAV = [
  ['Home','index.html'],
  ['Services','services.html'],
  ['Projects','projects.html'],
  ['About us','about.html'],
  ['Careers','careers.html'],
  ['Contact','contact.html'],
];
const PARTNERS = [
  ['ABB Cylon','https://new.abb.com/low-voltage/en-us/products/building-automation/product-range/abb-cylon/us'],
  ['Honeywell','https://buildings.honeywell.com'],
  ['Johnson Controls FX','https://www.johnsoncontrols.com/building-automation-and-controls/facility-explorer'],
  ['KODE Labs','https://kodelabs.com'],
  ['Niagara Mods \u2014 Reflow','https://niagaramodules.com'],
  ['Blue Ridge Technologies','https://brtint.com'],
  ['Neeve.ai','https://neeve.ai'],
];
const SERVICE_NAMES = ['Engineering','Service','Installation','Programming','Analytics','Consulting'];

function TopBar() {
  return (
    <div className="topbar"><div className="container">
      <a className="tb-email" href="mailto:contact@uniconllc.net"><I.mail/> contact@uniconllc.net</a>
      <a href="tel:7202825099"><I.phone/> (720) 282-5099</a>
      <span className="spacer"></span>
      <a className="incident" href="contact.html#incident">⚠ Incident Report</a>
    </div></div>
  );
}

function Header({ active, onQuote, onMenu }) {
  return (
    <header className="header"><div className="container">
      <a className="brand" href="index.html">
        <img src="../assets/logo-mark.png" alt="UCS"/>
        <span className="brand-wm"><b>Universal Controls</b><span>Solution</span></span>
      </a>
      <nav className="nav">{NAV.map(([l,h])=>(
        <a key={l} href={h} className={active===l||(active==='Home'&&l==='Home')?'active':''}>{l}</a>
      ))}</nav>
      <div className="right">
        <Button variant="primary" className="desktop-cta" onClick={onQuote}>Get a quote</Button>
        <button className="menu-btn" aria-label="Menu" onClick={onMenu}><I.menu/></button>
      </div>
    </div></header>
  );
}

function MobileMenu({ open, onQuote }) {
  if (!open) return null;
  return (
    <div className="mobile-menu" style={{display:'flex'}}>
      {NAV.map(([l,h])=><a key={l} href={h}>{l}</a>)}
      <div style={{marginTop:'10px'}}><Button variant="primary" fullWidth onClick={onQuote}>Get a quote</Button></div>
    </div>
  );
}

function Footer() {
  return (
    <footer className="footer"><div className="container">
      <div className="footer-grid">
        <div>
          <img src="../assets/logo-mark-white.png" alt="UCS"/>
          <div className="addr">contact@uniconllc.net<br/>(720) 282-5099<br/>Colorado-based &middot; Working nationally &amp; internationally</div>
          <div className="socials">
            <a href="https://www.linkedin.com/company/universal-controls-solution-llc" aria-label="LinkedIn"><I.linkedin/></a>
            <a href="https://www.facebook.com/people/Universal-Controls-Solution/61563383936920/" aria-label="Facebook"><I.facebook/></a>
          </div>
        </div>
        <div><h4>Company</h4>{NAV.map(([l,h])=><a key={l} href={h}>{l}</a>)}</div>
        <div><h4>Services</h4>{SERVICE_NAMES.slice(0,5).map(s=><a key={s} href="services.html">{s}</a>)}</div>
        <div><h4>Partners</h4>{PARTNERS.map(([n,u])=><a key={n} href={u} target="_blank" rel="noopener">{n}</a>)}</div>
      </div>
      <div style={{display:'flex',alignItems:'center',justifyContent:'center',gap:'10px',marginTop:'32px',textAlign:'center',flexWrap:'wrap'}}>
        <span style={{fontSize:'13px',color:'var(--steel-300)',fontStyle:'italic',maxWidth:'62ch'}}>“As each has received a gift, use it to serve one another, as good stewards of God’s grace.” &mdash; 1 Peter 4:10</span>
      </div>
      <div className="copyright"><span style={{display:'inline-flex',alignItems:'center',gap:'8px'}}><span style={{color:'var(--lime-electric)',display:'inline-flex'}}><I.fish/></span>© 2026 Universal Controls Solution</span><span>Colorado · Building Automation &amp; Control Systems</span></div>
    </div></footer>
  );
}

function QuoteModal({ onClose }) {
  const [sent,setSent] = useState(false);
  if (sent) return <div className="toast"><I.shield/> Request received — we&apos;ll be in touch.</div>;
  return (
    <div className="modal-bg" onClick={onClose}>
      <div className="modal" onClick={e=>e.stopPropagation()}>
        <div className="modal-head">
          <div><h3>Get a quote</h3><p>Tell us about your project and facility.</p></div>
          <button onClick={onClose} aria-label="Close"><I.x/></button>
        </div>
        <div className="modal-body">
          <div className="modal-row">
            <Input label="Name" placeholder="Jane Doe" required/>
            <Input label="Company" placeholder="Acme Facilities"/>
          </div>
          <Input label="Work email" type="email" placeholder="you@company.com" iconLeft={<I.mail/>} required/>
          <Input label="Facility / location" placeholder="Longmont, CO" iconLeft={<I.pin/>}/>
          <Button variant="primary" fullWidth size="lg" onClick={()=>setSent(true)}>Submit request</Button>
        </div>
      </div>
    </div>
  );
}

function Chrome({ active, children }) {
  const [quote,setQuote] = useState(false);
  const [menu,setMenu] = useState(false);
  const openQuote = ()=>setQuote(true);
  return (
    <>
      <TopBar/>
      <Header active={active} onQuote={openQuote} onMenu={()=>setMenu(m=>!m)}/>
      <MobileMenu open={menu} onQuote={()=>{setMenu(false);setQuote(true);}}/>
      {typeof children==='function' ? children({ openQuote }) : children}
      <Footer/>
      {quote && <QuoteModal onClose={()=>setQuote(false)}/>}
    </>
  );
}

window.UCSSite = { Chrome, NAV, PARTNERS, SERVICE_NAMES };