// Footer.jsx — Strato BIM site footer (responsive)
const Footer = ({ lang, onNavigate }) => {
  const mobile = window.useIsMobile(768);
  const copy = {
    it: {
      tagline: 'Strumenti Revit costruiti da chi li usa ogni giorno.',
      links: [
        { label: 'Home', id: 'home' },
        { label: 'Chi siamo', id: 'about' },
        { label: 'Supporto', id: 'support' },
        { label: 'Changelog', id: 'changelog' },
        { label: 'Privacy Policy', id: 'privacy' },
        { label: 'EULA', id: 'eula' },
      ],
      contact: 'support@strato-bim.com · risposta entro 48h',
      built: 'Costruito da Zak Iljas Kosseifi',
    },
    en: {
      tagline: 'Revit tools built by someone who uses them every day.',
      links: [
        { label: 'Home', id: 'home' },
        { label: 'About', id: 'about' },
        { label: 'Support', id: 'support' },
        { label: 'Changelog', id: 'changelog' },
        { label: 'Privacy Policy', id: 'privacy' },
        { label: 'EULA', id: 'eula' },
      ],
      contact: 'support@strato-bim.com · response within 48h',
      built: 'Built by Zak Iljas Kosseifi',
    },
  }[lang];

  return (
    <footer style={{
      background: 'var(--neutral-800)', borderTop: 'none',
      padding: mobile ? '36px 20px 24px' : '48px 32px 32px',
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{
          display: 'flex',
          flexDirection: mobile ? 'column' : 'row',
          justifyContent: 'space-between', alignItems: mobile ? 'flex-start' : 'flex-start',
          gap: mobile ? 32 : 0,
          marginBottom: 40,
        }}>
          {/* Brand */}
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
              <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ flexShrink: 0 }}>
                <rect width="32" height="32" rx="4" fill="var(--brand)"/>
                <line x1="7" y1="7" x2="25" y2="7" stroke="#FAFAF8" strokeWidth="2.2" strokeLinecap="round"/>
                <line x1="7" y1="13" x2="25" y2="13" stroke="#FAFAF8" strokeWidth="2.2" strokeLinecap="round"/>
                <line x1="7" y1="19" x2="25" y2="19" stroke="#FAFAF8" strokeWidth="2.2" strokeLinecap="round"/>
                <line x1="7" y1="25" x2="25" y2="25" stroke="#FAFAF8" strokeWidth="2.2" strokeLinecap="round"/>
              </svg>
              <span style={{ fontFamily: 'var(--font-sans)', fontSize: 19, fontWeight: 600, color: 'var(--white)', letterSpacing: '-0.02em', lineHeight: 1 }}>
                Strato BIM
              </span>
            </div>
            <p style={{ fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--neutral-400)', lineHeight: 1.6, maxWidth: 280 }}>
              {copy.tagline}
            </p>
          </div>

          {/* Links */}
          <nav style={{
            display: 'flex', flexDirection: 'column', gap: 8,
            ...(mobile ? { flexDirection: 'row', flexWrap: 'wrap', gap: '8px 20px' } : {}),
          }}>
            {copy.links.map(l => (
              <a key={l.id} href={l.external || '#'} target={l.external ? '_blank' : undefined} rel={l.external ? 'noopener noreferrer' : undefined} onClick={e => { if (!l.external) { e.preventDefault(); onNavigate(l.id); } }} style={{
                fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--neutral-400)',
                textDecoration: 'none', transition: 'color 120ms',
              }}
              onMouseEnter={e => e.currentTarget.style.color = 'var(--white)'}
              onMouseLeave={e => e.currentTarget.style.color = 'var(--neutral-400)'}>
                {l.label}
              </a>
            ))}
          </nav>
        </div>

        <div style={{ height: 1, background: 'var(--neutral-700)', marginBottom: 24 }}/>

        <div style={{
          display: 'flex',
          flexDirection: mobile ? 'column' : 'row',
          justifyContent: 'space-between', alignItems: mobile ? 'flex-start' : 'center',
          gap: 8,
        }}>
          <span style={{ fontFamily: 'var(--font-sans)', fontSize: 12, color: 'var(--neutral-500)' }}>
            {copy.contact}
          </span>
          <span style={{ fontFamily: 'var(--font-sans)', fontSize: 12, color: 'var(--neutral-600)' }}>{copy.built}</span>
        </div>
      </div>
    </footer>
  );
};

Object.assign(window, { Footer });