/* AKMBD Website — Footer (deep-indigo ground) */

function Footer({ onNav, onHome }) {
  const cols = [
    { h:'Explore', links:[['Work','work'],['Services','services'],['Studio','studio'],['Contact','contact']] },
  ];
  const FootLink = ({ label, id }) => {
    const [h, setH] = useState(false);
    return (
      <button onClick={()=> id && onNav(id)} onMouseEnter={()=>setH(true)} onMouseLeave={()=>setH(false)}
        style={{ background:'none', border:'none', textAlign:'left', cursor: id?'pointer':'default', padding:'5px 0',
          fontFamily:'var(--font-body)', fontSize:14.5, color: h&&id ? '#fff' : 'rgba(255,255,255,.62)', transition:'color .2s' }}>
        {label}
      </button>
    );
  };
  return (
    <footer style={{ background:'var(--akm-indigo-900)', color:'#fff', padding:'clamp(56px,7vw,88px) 0 clamp(28px,3vw,40px)' }}>
      <div style={{ maxWidth:1320, margin:'0 auto', padding:'0 clamp(20px,5vw,48px)' }}>
        <div className="akm-foot-grid" style={{ display:'grid', gridTemplateColumns:'1.5fr 1.2fr', gap:'clamp(32px,5vw,72px)', paddingBottom:'clamp(40px,5vw,64px)' }}>
          <div>
            <Wordmark reversed size={34} onClick={onHome} />
            <p style={{ fontFamily:'var(--font-body)', fontSize:15, color:'rgba(255,255,255,.66)', lineHeight:1.6, maxWidth:340, marginTop:24 }}>
              A design–build firm carrying every project from first sketch to final walkthrough. Southern California.
            </p>
          </div>
          {cols.map(c => (
            <div key={c.h}>
              <div style={{ fontFamily:'var(--font-display)', fontSize:11, letterSpacing:'0.18em', textTransform:'uppercase', color:'var(--akm-indigo-300)', marginBottom:16 }}>{c.h}</div>
              <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gridTemplateRows:'auto auto', gridAutoFlow:'column', columnGap:'clamp(24px,4vw,56px)', rowGap:2 }}>
                {c.links.map(([l,id]) => <FootLink key={l} label={l} id={id} />)}
              </div>
            </div>
          ))}
        </div>
        <div style={{ borderTop:'1px solid var(--line-on-dark)', paddingTop:24, display:'flex', justifyContent:'space-between', alignItems:'center', gap:18, flexWrap:'wrap' }}>
          <span style={{ fontFamily:'var(--font-body)', fontSize:12.5, color:'rgba(255,255,255,.45)' }}>
            &copy; {new Date().getFullYear()} AKM Building &amp; Design. All rights reserved.
          </span>
          <span style={{ fontFamily:'var(--font-display)', fontSize:11, letterSpacing:'0.14em', textTransform:'uppercase', color:'rgba(255,255,255,.45)' }}>
            CA General &amp; Electrical Contractor
          </span>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;