// Footer.jsx — minimal, hairline ruled

const footStyles = {
  outer: { background: 'var(--ink-1000)', color: 'var(--ink-0)', borderTop: '1px solid rgba(246,242,231,0.12)' },
  inner: { maxWidth: 'var(--container-max)', margin: '0 auto', padding: '36px var(--container-pad)' },
  top: { display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 48, paddingBottom: 36, borderBottom: '1px solid rgba(246,242,231,0.12)' },
  cols: { display: 'flex', gap: 64, fontFamily: 'var(--font-sans)', fontSize: 14 },
  col: { display: 'flex', flexDirection: 'column', gap: 10 },
  colH: { fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(246,242,231,0.55)', fontWeight: 500, marginBottom: 4 },
  link: { color: 'rgba(246,242,231,0.85)', textDecoration: 'none' },
  bot: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 24, fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em', color: 'rgba(246,242,231,0.55)' },
};

function Footer() {
  return (
    <footer style={footStyles.outer}>
      <div style={footStyles.inner}>
        <div style={footStyles.top} data-footer-top>
          <Wordmark size={28} color="var(--ink-0)" variant="stacked"/>
          <div style={footStyles.cols} data-footer-cols>
            <div style={footStyles.col}>
              <div style={footStyles.colH}>Studio</div>
              <a href="#thesis" style={footStyles.link}>Thesis</a>
              <a href="#process" style={footStyles.link}>Process</a>
              <a href="#pricing" style={footStyles.link}>Engagement</a>
            </div>
            <div style={footStyles.col}>
              <div style={footStyles.colH}>Work</div>
              <a href="#work" style={footStyles.link}>Case studies</a>
              <a href="#calc" style={footStyles.link}>Calculator</a>
              <a href="#" style={footStyles.link}>Monthly report sample</a>
            </div>
            <div style={footStyles.col}>
              <div style={footStyles.colH}>Contact</div>
              <a href="mailto:hello@drypowder.in" style={footStyles.link}>hello@drypowder.in</a>
              <a href="#" style={footStyles.link}>+91 98765 43210</a>
              <a href="#" style={footStyles.link}>Pune · India</a>
            </div>
          </div>
        </div>
        <div style={footStyles.bot} data-footer-bot>
          <span>© 2026 Dry Powder Studios LLP</span>
          <span>One job. More leads.</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Footer });