/* global React, Wordmark */
const DS_FOOT = window.SubEarthDesignSystem_9ae0a6;

function Footer() {
  const { Input, Marquee } = window.SubEarthDesignSystem_9ae0a6;
  // Wordmark is defined in Nav.jsx and available globally
  return (
    <footer style={{ position: 'relative', overflow: 'hidden', borderTop: '1px solid var(--line)' }}>
      <div style={{ padding: 'var(--space-20) var(--gutter) var(--space-12)', maxWidth: 'var(--max-w)', margin: '0 auto' }}>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-16)', justifyContent: 'space-between' }}>
          <div style={{ maxWidth: '34ch', display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}>
            <Wordmark size={26} />
            <p style={{ margin: 0, color: 'var(--text-tertiary)', fontSize: 'var(--fs-sm)', lineHeight: 1.6 }}>
              Sound tools from the underground. One plugin at a time.
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)', minWidth: '280px' }}>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-2xs)', letterSpacing: 'var(--tr-label)', textTransform: 'uppercase', color: 'var(--text-faint)' }}>Stay in the loop</span>
            <Input placeholder="your@email.com" button="Join" />
          </div>
        </div>

        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-6)', justifyContent: 'space-between', alignItems: 'center', marginTop: 'var(--space-16)', paddingTop: 'var(--space-8)', borderTop: '1px solid var(--line)' }}>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-2xs)', letterSpacing: 'var(--tr-mono)', color: 'var(--text-faint)' }}>© 2026 sub.earth</span>
          <div style={{ display: 'flex', gap: 'var(--space-6)' }}>
            {['Instagram', 'YouTube', 'Discord', 'Terms'].map((l) => (
              <a key={l} href="#" style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-2xs)', letterSpacing: 'var(--tr-mono)', textTransform: 'uppercase', color: 'var(--text-tertiary)' }}
                onMouseEnter={(e) => e.currentTarget.style.color = 'var(--text-primary)'}
                onMouseLeave={(e) => e.currentTarget.style.color = 'var(--text-tertiary)'}>{l}</a>
            ))}
          </div>
        </div>
      </div>

      {/* oversized ghost wordmark ticker */}
      <div style={{ opacity: 0.5, paddingBottom: 'var(--space-8)' }}>
        <Marquee items={['SUB.EARTH']} speed={40} size="clamp(3rem, 12vw, 9rem)" separator="✦" />
      </div>
    </footer>
  );
}

window.Footer = Footer;
window.__appReady.Footer = true;