// Footer.jsx — Site footer
Object.assign(window, { Footer });

function Footer({ onNavigate }) {
  return (
    <footer style={footerStyles.wrapper}>
      <div style={footerStyles.inner}>
        {/* Logo + tagline */}
        <div style={footerStyles.brand}>
          <div style={footerStyles.logo} onClick={() => onNavigate("home")}>
            <div style={footerStyles.bars}>
              {[16,24,32,20].map((h,i) => (
                <div key={i} style={{...footerStyles.bar, height:h, background: i===1?"#9747FF":i===3?"#0095B7":"#fff"}} />
              ))}
            </div>
            <div>
              <div style={footerStyles.logoMain}>Data Dudes</div>
              <div style={footerStyles.logoSub}>CONSULTING</div>
            </div>
          </div>
          <p style={footerStyles.tagline}>Making data feel human since day one.</p>
          <div style={footerStyles.socials}>
            {["LinkedIn","Twitter","GitHub"].map(s => (
              <span key={s} style={footerStyles.social}>{s}</span>
            ))}
          </div>
        </div>

        {/* Nav columns */}
        <div style={footerStyles.columns}>
          <div style={footerStyles.col}>
            <div style={footerStyles.colTitle}>Services</div>
            {["Power BI","Data Architecture","Data Modeling","Analysis","ETL & Pipelines","Training"].map(l => (
              <span key={l} style={footerStyles.link} onClick={() => onNavigate("services")}>{l}</span>
            ))}
          </div>
          <div style={footerStyles.col}>
            <div style={footerStyles.colTitle}>Company</div>
            {["About Us","Our Work","Case Studies","Blog","Careers"].map(l => (
              <span key={l} style={footerStyles.link} onClick={() => onNavigate("about")}>{l}</span>
            ))}
          </div>
          <div style={footerStyles.col}>
            <div style={footerStyles.colTitle}>Get in Touch</div>
            <span style={footerStyles.contactItem}>hello@datadudes.com</span>
            <span style={footerStyles.contactItem}>(555) 123-4567</span>
            <button style={footerStyles.ctaBtn} onClick={() => onNavigate("contact")}>Schedule a Call</button>
          </div>
        </div>
      </div>

      <div style={footerStyles.bottom}>
        <span style={footerStyles.copy}>© 2025 Data Dudes Consulting, LLC. All rights reserved.</span>
        <div style={footerStyles.legal}>
          <span style={footerStyles.legalLink}>Privacy Policy</span>
          <span style={footerStyles.legalLink}>Terms of Service</span>
        </div>
      </div>
    </footer>
  );
}

const footerStyles = {
  wrapper: { background:"#1b1b1b", color:"#fff", padding:"64px 32px 32px" },
  inner: { maxWidth:1200, margin:"0 auto", display:"grid", gridTemplateColumns:"280px 1fr", gap:64, paddingBottom:48, borderBottom:"1px solid rgba(255,255,255,0.1)" },
  brand: { display:"flex", flexDirection:"column", gap:16 },
  logo: { display:"flex", alignItems:"center", gap:10, cursor:"pointer" },
  bars: { display:"flex", alignItems:"flex-end", gap:3 },
  bar: { width:6, borderRadius:"2px 2px 0 0" },
  logoMain: { fontFamily:"'Patrick Hand',cursive", fontSize:22, color:"#fff", lineHeight:1 },
  logoSub: { fontFamily:"'Inter',sans-serif", fontSize:9, fontWeight:600, letterSpacing:"0.18em", color:"#737373", marginTop:2 },
  tagline: { fontFamily:"'Patrick Hand',cursive", fontSize:18, color:"#737373", margin:0, lineHeight:1.5 },
  socials: { display:"flex", gap:16 },
  social: { fontFamily:"'Patrick Hand',cursive", fontSize:16, color:"#737373", cursor:"pointer", textDecoration:"underline" },
  columns: { display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:32 },
  col: { display:"flex", flexDirection:"column", gap:10 },
  colTitle: { fontFamily:"'Patrick Hand',cursive", fontSize:18, color:"#fff", marginBottom:4 },
  link: { fontFamily:"'Patrick Hand',cursive", fontSize:16, color:"#737373", cursor:"pointer" },
  contactItem: { fontFamily:"'Patrick Hand',cursive", fontSize:16, color:"#737373" },
  ctaBtn: { marginTop:8, background:"#69BAC9", color:"#fff", border:"none", borderRadius:9999, padding:"8px 20px", fontFamily:"'Patrick Hand',cursive", fontSize:17, cursor:"pointer", alignSelf:"flex-start" },
  bottom: { maxWidth:1200, margin:"24px auto 0", display:"flex", justifyContent:"space-between", alignItems:"center" },
  copy: { fontFamily:"'Inter',sans-serif", fontSize:12, color:"#737373" },
  legal: { display:"flex", gap:24 },
  legalLink: { fontFamily:"'Inter',sans-serif", fontSize:12, color:"#737373", cursor:"pointer", textDecoration:"underline" },
};