// Footer.jsx — dark footer shared across all pages
function Footer({ onNavigate }) {
  const hours = [
    ['Lunedì', '14:00 – 20:00'],
    ['Martedì–Sabato', '09:00 – 20:00'],
    ['Domenica', 'Chiuso'],
  ];
  return (
    <footer style={{ background: '#1A1A1A', color: '#FFFFFF', paddingTop: 72, paddingBottom: 24, position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'var(--ds-pattern-dark)', opacity: 0.6, pointerEvents: 'none' }} />
      <div className="container" style={{ position: 'relative' }}>
        <div className="footer-grid" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 48, paddingBottom: 48, borderBottom: '1px solid rgba(255,255,255,0.08)' }}>
          {/* Brand */}
          <div>
            <div style={{ marginBottom: 18 }}>
              <Logo height={84} style={{ filter: 'brightness(0) invert(1)' }} />
            </div>
            <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 14, lineHeight: 1.65, color: 'rgba(255,255,255,0.7)', maxWidth: 320 }}>
              La tua abbronzatura, dal 2009. A Carmagnola, in Corso Sacchirone.
            </p>
            <div style={{ display: 'flex', gap: 10, marginTop: 22 }}>
              <a href="https://instagram.com/deuxsolei_carmagnola" target="_blank" rel="noopener" style={iconBtnStyle} aria-label="Instagram"><Icon.Instagram color="#FFFFFF" size={16}/></a>
              <a href="https://facebook.com/Deuxsolei" target="_blank" rel="noopener" style={iconBtnStyle} aria-label="Facebook"><Icon.Facebook color="#FFFFFF" size={16}/></a>
            </div>
          </div>

          {/* Contatti */}
          <div>
            <FooterTitle>Contatti</FooterTitle>
            <FooterRow icon={<Icon.Pin size={14} color="rgba(255,255,255,0.7)"/>}>Corso Sacchirone, 13<br/>10022 Carmagnola (TO)</FooterRow>
            <FooterRow icon={<Icon.Phone size={14} color="rgba(255,255,255,0.7)"/>}><a href="tel:0119721717" style={{ color: '#fff' }}>011 972 1717</a></FooterRow>
          </div>

          {/* Orari */}
          <div>
            <FooterTitle>Orari</FooterTitle>
            <div style={{ display: 'grid', gap: 6 }}>
              {hours.map(([d, h]) => (
                <div key={d} style={{ display: 'flex', justifyContent: 'space-between', gap: 10, fontFamily: "'DM Sans', sans-serif", fontSize: 13, color: 'rgba(255,255,255,0.7)' }}>
                  <span>{d}</span><span style={{ color: '#FFFFFF' }}>{h}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Pagine */}
          <div>
            <FooterTitle>Pagine</FooterTitle>
            <ul style={{ listStyle: 'none', padding: 0, display: 'grid', gap: 8 }}>
              {[
                ['home','Home'],
                ['servizi','Servizi'],
                ['chi-siamo','Chi siamo'],
                ['prodotti','Prodotti'],
                ['recensioni','Recensioni'],
                ['contatti','Contatti'],
              ].map(([id, label]) => (
                <li key={id}>
                  <a href={`#${id}`} onClick={(e) => { e.preventDefault(); onNavigate && onNavigate(id); }}
                     style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13, color: 'rgba(255,255,255,0.7)' }}>{label}</a>
                </li>
              ))}
            </ul>
          </div>
        </div>

        <div style={{ height: 2, background: 'var(--ds-grad-solar)', borderRadius: 2, margin: '32px 0 20px' }} />
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12, fontFamily: "'DM Sans', sans-serif", fontSize: 12, color: 'rgba(255,255,255,0.45)' }}>
          <span>© 2026 Deux Soleil · Franco Girgenti · P.IVA 03523140048</span>
          <span style={{ fontStyle: 'italic' }}>la tua abbronzatura</span>
        </div>
      </div>
    </footer>
  );
}

function FooterTitle({ children }) {
  return <div style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 700, fontSize: 13, letterSpacing: 2, textTransform: 'uppercase', color: '#FFFFFF', marginBottom: 16 }}>{children}</div>;
}
function FooterRow({ icon, children }) {
  return (
    <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10, marginBottom: 10, fontFamily: "'DM Sans', sans-serif", fontSize: 13, lineHeight: 1.55, color: 'rgba(255,255,255,0.75)' }}>
      <span style={{ marginTop: 2, flexShrink: 0 }}>{icon}</span>
      <span>{children}</span>
    </div>
  );
}
const iconBtnStyle = { width: 36, height: 36, borderRadius: 999, border: '1px solid rgba(255,255,255,0.18)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: '#fff', transition: 'background 240ms' };

Object.assign(window, { Footer });