// L'Aqua Fure — Contact / infos pratiques + Footer
function Contact() {
  const { MapPin, Phone, Clock, Check, Arrow } = window.Icons;
  const mapsQuery = encodeURIComponent('L\'Aqua fure, 23 Rte des Marines, 30240 Le Grau-du-Roi');
  const itinerary = 'https://www.google.com/maps/dir/?api=1&destination=' + mapsQuery;

  const rows = [
    { icon: MapPin, label: 'Adresse', lines: ['23 Rte des Marines, 30240 Le Grau-du-Roi', 'Centre Commercial Le Trident'] },
    { icon: Phone, label: 'Téléphone', lines: ['04 66 77 35 11'], href: 'tel:0466773511' },
    { icon: Clock, label: 'Horaires', lines: ['Vendredi : ouverture à 9h', 'Autres jours : à compléter'] },
    { icon: Check, label: 'Accès', lines: ['Accès personnes à mobilité réduite'] },
  ];

  return (
    <section id="contact" style={{ background: 'var(--surface-page)', padding: 'clamp(64px, 11vh, 130px) var(--gutter-page) 0' }}>
      <div style={{ maxWidth: 'var(--container-lg)', margin: '0 auto' }}>
        <div style={{ marginBottom: 'clamp(32px,5vh,52px)' }}>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--brand-accent)', margin: '0 0 14px' }}>Contact</p>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'clamp(32px, 5vw, 52px)', lineHeight: 1.08, letterSpacing: '-0.02em', color: 'var(--text-strong)', margin: 0 }}>
            Infos pratiques &amp; itinéraire
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 'clamp(24px, 4vw, 48px)', alignItems: 'start' }}>
          {/* Info column */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {rows.map((r) => {
              const Icon = r.icon;
              const content = (
                <div style={{ display: 'flex', gap: 16, padding: '18px 0', borderBottom: '1px solid var(--border-subtle)' }}>
                  <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 44, height: 44, borderRadius: '50%', background: 'var(--char-900)', color: 'var(--brand-bright)', flex: 'none' }}>
                    <Icon size={20} />
                  </span>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
                    <span style={{ fontFamily: 'var(--font-sans)', fontSize: 11.5, fontWeight: 600, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--text-subtle)' }}>{r.label}</span>
                    {r.lines.map((l, i) => (
                      <span key={i} style={{ fontFamily: 'var(--font-sans)', fontSize: i === 0 ? 17 : 14, fontWeight: i === 0 ? 600 : 400, color: i === 0 ? 'var(--text-strong)' : 'var(--text-muted)', lineHeight: 1.4 }}>{l}</span>
                    ))}
                  </div>
                </div>
              );
              return r.href ? <a key={r.label} href={r.href} style={{ textDecoration: 'none' }}>{content}</a> : <div key={r.label}>{content}</div>;
            })}

            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 22 }}>
              <a href="tel:0466773511" style={{ display: 'inline-flex', alignItems: 'center', gap: 9, textDecoration: 'none', fontFamily: 'var(--font-sans)', fontSize: 15, fontWeight: 600, color: 'var(--char-950)', background: 'var(--brand-bright)', padding: '14px 24px', borderRadius: 'var(--radius-pill)' }}>
                <Phone size={17} stroke={2} /> Appeler
              </a>
              <a href={itinerary} target="_blank" rel="noopener" style={{ display: 'inline-flex', alignItems: 'center', gap: 9, textDecoration: 'none', fontFamily: 'var(--font-sans)', fontSize: 15, fontWeight: 600, color: 'var(--text-strong)', background: 'transparent', border: '1px solid var(--border-default)', padding: '14px 24px', borderRadius: 'var(--radius-pill)' }}>
                <Arrow size={17} /> Itinéraire
              </a>
            </div>
          </div>

          {/* Map */}
          <div style={{ borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: 'var(--shadow-md)', minHeight: 380, height: '100%', border: '1px solid var(--border-subtle)' }}>
            <iframe
              title="Carte L'Aqua fure"
              src={'https://maps.google.com/maps?q=' + mapsQuery + '&t=&z=15&ie=UTF8&iwloc=&output=embed'}
              style={{ width: '100%', height: '100%', minHeight: 380, border: 0, display: 'block', filter: 'grayscale(0.3) contrast(1.05)' }}
              loading="lazy"
            />
          </div>
        </div>
      </div>
    </section>
  );
}
window.Contact = Contact;

function Footer({ onNav }) {
  const { Instagram, Phone, MapPin } = window.Icons;
  const links = [['Accueil','accueil'],['Le salon','salon'],['Prestations','prestations'],['Avis','avis'],['Contact','contact']];
  return (
    <footer style={{ background: 'var(--surface-deepest)', color: 'var(--bone-50)', padding: 'clamp(56px,8vh,90px) var(--gutter-page) 32px', marginTop: 'clamp(56px,9vh,110px)' }}>
      <div style={{ maxWidth: 'var(--container-lg)', margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 40, paddingBottom: 40, borderBottom: '1px solid var(--border-deep)' }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
              <img src="assets/logo-mark-deep.svg" alt="" style={{ width: 40, height: 40 }} />
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 24 }}>L'Aqua&nbsp;fure</span>
            </div>
            <p style={{ fontFamily: 'var(--font-sans)', fontSize: 14, lineHeight: 1.6, color: 'var(--text-on-deep-muted)', margin: 0, maxWidth: 280 }}>
              Salon de coiffure mixte au Grau-du-Roi. Coupe, couleur, lissages brésiliens &amp; soins Ybera Paris.
            </p>
          </div>

          <div>
            <p style={{ fontFamily: 'var(--font-sans)', fontSize: 11.5, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--brand-bright)', margin: '0 0 16px' }}>Navigation</p>
            <nav style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
              {links.map(([l, id]) => (
                <a key={id} onClick={() => onNav(id)} style={{ fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--text-on-deep)', cursor: 'pointer', opacity: 0.82 }}>{l}</a>
              ))}
            </nav>
          </div>

          <div>
            <p style={{ fontFamily: 'var(--font-sans)', fontSize: 11.5, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--brand-bright)', margin: '0 0 16px' }}>Contact</p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <a href="tel:0466773511" style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none', fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--text-on-deep)' }}>
                <Phone size={16} stroke={2} /> 04 66 77 35 11
              </a>
              <span style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--text-on-deep-muted)', lineHeight: 1.5 }}>
                <MapPin size={16} style={{ marginTop: 2, flex: 'none' }} /> 23 Rte des Marines,<br />30240 Le Grau-du-Roi
              </span>
              <span style={{ display: 'flex', alignItems: 'center', gap: 10, fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--text-on-deep-muted)' }}>
                <Instagram size={16} /> À compléter : réseaux sociaux
              </span>
            </div>
          </div>
        </div>

        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, justifyContent: 'space-between', paddingTop: 26, fontFamily: 'var(--font-sans)', fontSize: 12.5, color: 'var(--text-on-deep-muted)' }}>
          <span>© {new Date().getFullYear()} L'Aqua fure · Tous droits réservés</span>
          <span>Mentions légales · À compléter · Crédits photos : L'Aqua fure</span>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;