/* global React */

function Footer() {
  const cols = [
    {
      heading: 'Pagine',
      links: [
        { label: 'Home', href: '#/' },
        { label: 'Il Metodo', href: '#/il-metodo' },
        { label: 'Chi Siamo', href: '#/chi-siamo' },
        { label: 'Risultati', href: '#/risultati' },
      ],
    },
    {
      heading: 'Contatti',
      links: [
        { label: 'Via Borgo dei Leoni, 71/A, Ferrara' },
        { label: '366 392 1782' },
      ],
    },
    {
      heading: 'Orari',
      links: [
        { label: 'Lun – Ven: 09:00 – 21:00' },
        { label: 'Sab: 09:00 – 14:00' },
        { label: 'Dom: chiuso' },
      ],
    },
  ];

  return (
    <footer style={{
      background: 'var(--color-background)',
      borderTop: '1px solid var(--color-border)',
      padding: '72px 30px 32px',
    }}>
      <div style={{ maxWidth: 1370, margin: '0 auto' }}>
        <div className="footer-grid" style={{
          display: 'grid',
          gridTemplateColumns: '1.4fr 1fr 1fr 1fr',
          gap: 48, alignItems: 'start',
        }}>
          {/* Brand column */}
          <div>
            <img src="assets/logo-forma.png" alt="Progetto Forma" style={{ height: 36, width: 'auto', display: 'block' }} />
            <p style={{
              fontFamily: 'Fraunces, serif', fontStyle: 'italic', fontWeight: 400,
              fontSize: 18, lineHeight: 1.45, color: 'var(--color-text-secondary)',
              marginTop: 20, marginBottom: 0, maxWidth: 300,
            }}>L'unico metodo a Ferrara e dintorni che ti permette di ritrovare un corpo snello e tonico dopo i 40 in 4 fasi.</p>
          </div>

          {cols.map((c, i) => (
            <div key={i}>
              <div style={{
                fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 12,
                letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--color-primary)',
                marginBottom: 18,
              }}>{c.heading}</div>
              <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
                {c.links.map((l, j) => (
                  <li key={j}>
                    {l.href ? (
                      <a href={l.href} style={{
                        fontFamily: 'Inter, sans-serif', fontSize: 14, color: 'var(--color-text-primary)',
                        textDecoration: 'none',
                      }}>{l.label}</a>
                    ) : (
                      <span style={{
                        fontFamily: 'Inter, sans-serif', fontSize: 14, color: 'var(--color-text-secondary)',
                      }}>{l.label}</span>
                    )}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* hairline + bottom row */}
        <div style={{
          marginTop: 56, paddingTop: 24, borderTop: '1px solid var(--color-border)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, flexWrap: 'wrap',
        }}>
          <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, color: 'var(--color-text-muted)' }}>
            © {new Date().getFullYear()} Marco Gabrielli | Via Torquato Tasso 7, 44022 Lido degli Estensi (FE) | P.IVA 02065830388 | Tutti i diritti riservati
          </div>
          <div style={{ display: 'flex', gap: 18, alignItems: 'center' }}>
            <a href="https://www.instagram.com/progetto.forma.ferrara/" target="_blank" rel="noopener noreferrer" style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, color: 'var(--color-text-muted)', textDecoration: 'none' }}>Instagram</a>
            <span style={{ width: 4, height: 4, borderRadius: '9999px', background: 'var(--color-border-strong)' }} />
            <a href="https://www.facebook.com/progettoforma.net/" target="_blank" rel="noopener noreferrer" style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, color: 'var(--color-text-muted)', textDecoration: 'none' }}>Facebook</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;