// Footer.jsx — minimal, hairline
function Footer() {
  return (
    <footer style={footerStyles.wrap}>
      <div style={footerStyles.inner}>
        <div style={footerStyles.brand}>
          <div style={footerStyles.brandSerif}>Watershed</div>
          <div style={footerStyles.flanked}>
            <span style={footerStyles.rule} />
            <span style={footerStyles.flankedLabel}>Automations</span>
            <span style={footerStyles.rule} />
          </div>
          <div style={footerStyles.tag}>Everything starts flowing.</div>
        </div>
        <div style={footerStyles.cols}>
          <div style={footerStyles.col}>
            <div style={footerStyles.colHead}>Engagements</div>
            <a style={footerStyles.link}>Workflow Audit</a>
            <a style={footerStyles.link}>Pilot Build</a>
            <a style={footerStyles.link}>Ongoing Care</a>
          </div>
          <div style={footerStyles.col}>
            <div style={footerStyles.colHead}>Notes</div>
            <a style={footerStyles.link}>Field journal</a>
            <a style={footerStyles.link}>Case studies</a>
            <a style={footerStyles.link}>Approach</a>
          </div>
          <div style={footerStyles.col}>
            <div style={footerStyles.colHead}>Reach us</div>
            <a style={footerStyles.link}>hello@watershed.work</a>
            <a style={footerStyles.link}>Schedule a call</a>
          </div>
        </div>
      </div>
      <div style={footerStyles.foot}>
        <span style={footerStyles.copy}>© 2026 Watershed Automations · Made quietly in the Pacific Northwest</span>
        <span style={footerStyles.copy}>Privacy · Terms</span>
      </div>
    </footer>
  );
}

const footerStyles = {
  wrap: { background: 'var(--parchment)', borderTop: '1px solid var(--rule)', padding: '80px 32px 40px' },
  inner: { maxWidth: 1100, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.2fr 2fr', gap: 64 },
  brand: { display: 'flex', flexDirection: 'column', gap: 12 },
  brandSerif: { fontFamily: 'var(--serif-display)', fontWeight: 400, fontSize: 36, letterSpacing: '-0.01em', color: 'var(--ink)' },
  flanked: { display: 'inline-flex', alignItems: 'center', gap: 12, color: 'var(--accent)' },
  rule: { width: 24, height: 1, background: 'currentColor', opacity: 0.7, display: 'inline-block' },
  flankedLabel: { fontFamily: 'var(--sans-ui)', fontWeight: 300, fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase' },
  tag: { fontFamily: 'var(--serif-display)', fontStyle: 'italic', fontSize: 15, color: 'var(--ink-soft)', maxWidth: 36*9, marginTop: 4 },
  cols: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 },
  col: { display: 'flex', flexDirection: 'column', gap: 12 },
  colHead: { fontFamily: 'var(--sans-ui)', fontWeight: 300, fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 4 },
  link: { fontFamily: 'var(--sans-ui)', fontWeight: 300, fontSize: 15, color: 'var(--ink-brown)', cursor: 'pointer', textDecoration: 'none' },
  foot: { maxWidth: 1100, margin: '64px auto 0', paddingTop: 24, borderTop: '1px solid var(--rule)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' },
  copy: { fontFamily: 'var(--sans-ui)', fontWeight: 300, fontSize: 12, color: 'var(--ink-soft)' },
};

window.Footer = Footer;