// Footer.jsx — Delvecore Website UI Kit (responsive)
window.Footer = function Footer() {
  const mobile = useIsMobile();
  return (
    <footer style={{
      padding: mobile ? '32px 24px' : '40px 48px',
      borderTop: '1px solid #E0DFD8',
      display: 'flex',
      flexDirection: mobile ? 'column' : 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      gap: mobile ? 12 : 0,
      textAlign: mobile ? 'center' : 'left',
    }}>
      <a href="#hero" style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none', color: '#0C0C0A' }}>
        <svg width="18" height="18" viewBox="0 0 64 64" fill="none">
          <circle cx="32" cy="32" r="28" fill="none" stroke="#0C0C0A" strokeWidth="3"/>
          <circle cx="32" cy="32" r="20" fill="none" stroke="#0C0C0A" strokeWidth="1.5" opacity="0.4"/>
          <path d="M 32 17 Q 41 24 41 32 Q 41 40 32 47" fill="none" stroke="#0C0C0A" strokeWidth="2.5" strokeLinecap="round"/>
        </svg>
        <span style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: 18, fontWeight: 400, letterSpacing: '0.06em' }}>Delvecore</span>
      </a>
      <div style={{ fontSize: 12, color: '#C8C8C4', letterSpacing: '0.05em' }}>© 2026 Delvecore. All rights reserved.</div>
    </footer>
  );
};