// Footer
function Footer() {
  return (
    // Outer wrapper — full width so the bottom bar can stretch edge-to-edge
    <div data-screen-label="08 Footer" style={{ borderTop: '1px solid var(--border-subtle)' }}>

      {/* Main columns — constrained to 1440px */}
      <div style={{
        maxWidth: '1440px', margin: '0 auto',
        padding: '64px 32px 48px',
      }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: '2fr 1fr 1fr',
          gap: '48px',
        }}>
          {/* Brand */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: '14px' }}>
            <Wordmark size={28} />
            <p style={{
              fontFamily: 'var(--font-body)', fontSize: '14px',
              color: 'var(--text-secondary)', maxWidth: '38ch',
              margin: 0, lineHeight: 1.55,
            }}>Produkční sub-brand pod marketingovou agenturou Galandr. AI kreativy pro placené reklamy.</p>
          </div>

          {/* Kontakt */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
            <Eyebrow>Kontakt</Eyebrow>
            <a href="mailto:agentura@galandr.com" style={{ fontFamily: 'var(--font-body)', fontSize: '14px', color: 'var(--text-primary)', textDecoration: 'none' }}>agentura@galandr.com</a>
            <a href="tel:+420776292036" style={{ fontFamily: 'var(--font-mono)', fontSize: '12px', color: 'var(--text-secondary)', textDecoration: 'none', letterSpacing: '0.05em' }}>+420 776 292 036</a>
          </div>

          {/* Firemní */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
            <Eyebrow>Firemní</Eyebrow>
            <span style={{ fontFamily: 'var(--font-body)', fontSize: '13px', fontWeight: 600, color: 'var(--text-primary)' }}>GALANDR MARKETING s.r.o.</span>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: '12px', color: 'var(--text-secondary)' }}>IČ 23336609</span>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: '12px', color: 'var(--text-secondary)' }}>DIČ CZ23336609</span>
          </div>
        </div>
      </div>

      {/* Bottom bar — full width, edge-to-edge */}
      <div style={{
        borderTop: '1px solid var(--border-subtle)',
        padding: '16px 32px',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        gap: '24px',
      }}>
        <span style={{
          fontFamily: 'var(--font-mono)', fontSize: '11px',
          color: 'var(--text-tertiary)', letterSpacing: '0.04em',
        }}>
          © 2000–2026 GALANDR MARKETING s.r.o. Zlín
        </span>
        <div style={{ display: 'flex', alignItems: 'center', gap: '20px' }}>
          <a
            href="/obchodni-podminky"
            style={{ fontFamily: 'var(--font-mono)', fontSize: '11px', color: 'var(--text-tertiary)', textDecoration: 'none', letterSpacing: '0.04em' }}
            onMouseEnter={e => e.target.style.color = 'var(--text-secondary)'}
            onMouseLeave={e => e.target.style.color = 'var(--text-tertiary)'}
          >
            Obchodní podmínky
          </a>
          <span style={{ color: 'var(--border-strong)', fontSize: '10px' }}>|</span>
          <a
            href="/gdpr"
            style={{ fontFamily: 'var(--font-mono)', fontSize: '11px', color: 'var(--text-tertiary)', textDecoration: 'none', letterSpacing: '0.04em' }}
            onMouseEnter={e => e.target.style.color = 'var(--text-secondary)'}
            onMouseLeave={e => e.target.style.color = 'var(--text-tertiary)'}
          >
            GDPR
          </a>
        </div>
      </div>
    </div>
  );
}

window.Footer = Footer;