function InfosPratiques() {
  const w = useW();
  const isMobile = w < 600;
  const [tab, setTab] = React.useState('pharmacies');
  const tabs = [
    { id: 'pharmacies', label: '🏥 Pharmacies' },
    { id: 'sante', label: '🩺 Santé' },
    { id: 'securite', label: '🚔 Sécurité' },
    { id: 'hotels', label: '🏨 Hôtels' },
    { id: 'restaurants', label: '🍽 Restaurants' },
    { id: 'commerces', label: '🛒 Commerces' },
  ];

  const pharmacies = [
    { nom: 'Pharmacie de la Gare', garde: true },
    { nom: 'Grande Pharmacie du Sud-Ouest', garde: false },
    { nom: 'Pharmacie de la Mairie de Soubré', garde: false },
    { nom: "Pharmacie de l'Immaculée", garde: false },
    { nom: 'Pharmacie du Sud Ouest', tel: '27 34 72 32 19', mobile: '07 08 72 81 74', mail: 'gbohoussou@hotmail.com', garde: false },
    { nom: 'Pharmacie de la Mosquée', tel: '07 07 89 95 83', mobile: '07 67 25 98 65', mail: 'phciedmosque18@gmail.com', garde: false },
  ];

  const hotels = [
    { nom: 'MARINA', mobile: '07 18 62 66 55', mail: 'mohamedmoghnieh@gmail.com' },
    { nom: 'BERGE RIVE', mobile: '05 76 15 71 71', mail: 'bergerivehotel@gmail.com' },
    { nom: 'COMPLEXE HOTELIER ANOUAZE', tel: '27 34 72 26 58', mobile: '07 47 14 60 41', whatsapp: '07 58 06 09 23', mail: 'hotelanouaze@gmail.com' },
  ];

  const commerces = [
    { nom: 'NUMER ONE', mobile: '07 06 70 00 00' },
    { nom: 'SUPER MARCHE MARINA', mobile: '07 13 39 34 97' },
    { nom: 'SUPER MARCHE BON PRIX', mobile: '07 87 30 11 50' },
  ];

  const restaurants = [{ nom: 'MARINA', mobile: '07 00 24 88 86' }];

  const sante = [
    { nom: 'PHARMACIE DE LA MOSQUEE', tel: '07 07 89 95 83', mobile: '07 67 25 98 65', whatsapp: '07 67 25 98 65', mail: 'phciedmosque18@gmail.com' },
    { nom: 'PHARMACIE SUD-OUEST', tel: '27 34 72 32 19', mobile: '07 08 72 81 74', whatsapp: '07 08 72 81 74', mail: 'gbohoussou@hotmail.com' },
  ];

  const ContactTable = ({ rows }) => (
    isMobile ? (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {rows.map((r, i) => (
          <div key={i} style={{ background: '#fff', border: '1px solid #eee', borderRadius: 10, padding: '16px' }}>
            <div style={{ fontWeight: 700, fontSize: 14, color: '#0f3219', fontFamily: "'Source Sans 3', sans-serif", marginBottom: 10 }}>{r.nom}</div>
            {r.tel && <div style={{ fontSize: 13, color: '#555', marginBottom: 4, fontFamily: "'Source Sans 3', sans-serif" }}>📞 {r.tel}</div>}
            {r.mobile && <div style={{ fontSize: 13, color: '#555', marginBottom: 4, fontFamily: "'Source Sans 3', sans-serif" }}>📱 {r.mobile}</div>}
            {r.whatsapp && <div style={{ fontSize: 13, color: '#555', marginBottom: 4, fontFamily: "'Source Sans 3', sans-serif" }}>💬 {r.whatsapp}</div>}
            {r.mail && <a href={`mailto:${r.mail}`} style={{ fontSize: 13, color: '#e07020', textDecoration: 'none', fontFamily: "'Source Sans 3', sans-serif" }}>✉ {r.mail}</a>}
          </div>
        ))}
      </div>
    ) : (
      <div style={{ overflowX: 'auto' }}>
        <table style={{ width: '100%', borderCollapse: 'collapse', fontFamily: "'Source Sans 3', sans-serif" }}>
          <thead>
            <tr style={{ background: '#0f3219', color: '#fff' }}>
              {['Service', 'Téléphone', 'Mobile', 'WhatsApp', 'Email'].map(h => (
                <th key={h} style={{ padding: '12px 16px', textAlign: 'left', fontSize: 12, letterSpacing: 0.5, fontWeight: 700 }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {rows.map((r, i) => (
              <tr key={i} style={{ background: i % 2 === 0 ? '#fff' : '#f8f6f0', borderBottom: '1px solid #eee' }}>
                <td style={{ padding: '14px 16px', fontWeight: 700, fontSize: 14, color: '#0f3219' }}>{r.nom}</td>
                <td style={{ padding: '14px 16px', fontSize: 13, color: '#555' }}>{r.tel || '—'}</td>
                <td style={{ padding: '14px 16px', fontSize: 13, color: '#555' }}>{r.mobile || '—'}</td>
                <td style={{ padding: '14px 16px', fontSize: 13, color: '#555' }}>{r.whatsapp || '—'}</td>
                <td style={{ padding: '14px 16px', fontSize: 13 }}>{r.mail ? <a href={`mailto:${r.mail}`} style={{ color: '#e07020', textDecoration: 'none' }}>{r.mail}</a> : '—'}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    )
  );

  const pharmacyGrid = isMobile ? '1fr 1fr' : w < 960 ? '1fr 1fr' : 'repeat(3, 1fr)';

  return (
    <div>
      <PageHeader title="Infos Pratiques" subtitle="Pharmacies, hôtels, urgences et adresses utiles à Soubré" />
      <div style={{ background: '#fff', borderBottom: '1px solid #eee', overflowX: 'auto' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', padding: '0 16px', display: 'flex', gap: 0, minWidth: 'max-content' }}>
          {tabs.map(t => (
            <button key={t.id} onClick={() => setTab(t.id)} style={{ padding: isMobile ? '12px 12px' : '14px 18px', background: 'none', border: 'none', whiteSpace: 'nowrap', borderBottom: tab === t.id ? '3px solid #e07020' : '3px solid transparent', color: tab === t.id ? '#0f3219' : '#666', fontWeight: tab === t.id ? 700 : 400, fontSize: isMobile ? 12 : 13, cursor: 'pointer', fontFamily: "'Source Sans 3', sans-serif" }}>{t.label}</button>
          ))}
        </div>
      </div>

      <div style={{ maxWidth: 1100, margin: '0 auto', padding: isMobile ? '24px 16px' : '48px 24px' }}>
        {tab === 'pharmacies' && (
          <div>
            <div style={{ background: '#e07020', color: '#fff', borderRadius: 10, padding: '18px 20px', marginBottom: 28, display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
              <span style={{ fontSize: 28 }}>🏥</span>
              <div style={{ flex: 1, minWidth: 200 }}>
                <div style={{ fontFamily: "'Playfair Display', serif", fontSize: 16, fontWeight: 700 }}>Pharmacie de garde actuellement</div>
                <div style={{ fontSize: isMobile ? 18 : 22, fontWeight: 700, marginTop: 2, fontFamily: "'Source Sans 3', sans-serif" }}>Pharmacie de la Gare</div>
              </div>
              <button style={{ background: '#fff', color: '#e07020', border: 'none', padding: '10px 18px', borderRadius: 6, fontWeight: 700, fontSize: 13, cursor: 'pointer', fontFamily: "'Source Sans 3', sans-serif", flexShrink: 0 }}>Appeler →</button>
            </div>
            <h3 style={{ fontFamily: "'Playfair Display', serif", fontSize: 22, color: '#0f3219', margin: '0 0 16px' }}>Liste des pharmacies</h3>
            <div style={{ display: 'grid', gridTemplateColumns: pharmacyGrid, gap: 12 }}>
              {pharmacies.map((p, i) => (
                <div key={i} style={{ background: p.garde ? '#0f3219' : '#fff', border: '1px solid', borderColor: p.garde ? '#0f3219' : '#eee', borderRadius: 10, padding: '16px', position: 'relative' }}>
                  {p.garde && <div style={{ position: 'absolute', top: 10, right: 10, background: '#e07020', color: '#fff', fontSize: 9, padding: '2px 8px', borderRadius: 10, fontFamily: "'Source Sans 3', sans-serif", fontWeight: 700 }}>DE GARDE</div>}
                  <div style={{ fontWeight: 700, fontSize: 13, color: p.garde ? '#fff' : '#0f3219', fontFamily: "'Source Sans 3', sans-serif", marginBottom: p.tel ? 6 : 0, paddingRight: p.garde ? 52 : 0 }}>{p.nom}</div>
                  {p.mobile && <div style={{ fontSize: 12, color: p.garde ? 'rgba(255,255,255,0.7)' : '#888', fontFamily: "'Source Sans 3', sans-serif" }}>{p.mobile}</div>}
                  {p.mail && <a href={`mailto:${p.mail}`} style={{ display: 'block', fontSize: 11, color: '#e07020', marginTop: 4, textDecoration: 'none', fontFamily: "'Source Sans 3', sans-serif", wordBreak: 'break-all' }}>{p.mail}</a>}
                </div>
              ))}
            </div>
          </div>
        )}
        {tab === 'sante' && (<div><h3 style={{ fontFamily: "'Playfair Display', serif", fontSize: 22, color: '#0f3219', margin: '0 0 20px' }}>Contacts Santé</h3><ContactTable rows={sante} /></div>)}
        {tab === 'securite' && (
          <div style={{ background: '#f8f6f0', borderRadius: 12, padding: '40px', textAlign: 'center', color: '#888', fontFamily: "'Source Sans 3', sans-serif" }}>
            <div style={{ fontSize: 40, marginBottom: 12 }}>🚔</div>
            <div style={{ fontSize: 15 }}>Les contacts des services de sécurité seront disponibles prochainement.</div>
            <div style={{ fontSize: 13, marginTop: 8, color: '#aaa' }}>En cas d'urgence : 110 (Police) — 111 (Gendarmerie)</div>
          </div>
        )}
        {tab === 'hotels' && (<div><h3 style={{ fontFamily: "'Playfair Display', serif", fontSize: 22, color: '#0f3219', margin: '0 0 20px' }}>Établissements Hôteliers</h3><ContactTable rows={hotels} /></div>)}
        {tab === 'restaurants' && (<div><h3 style={{ fontFamily: "'Playfair Display', serif", fontSize: 22, color: '#0f3219', margin: '0 0 20px' }}>Restaurants</h3><ContactTable rows={restaurants} /></div>)}
        {tab === 'commerces' && (<div><h3 style={{ fontFamily: "'Playfair Display', serif", fontSize: 22, color: '#0f3219', margin: '0 0 20px' }}>Établissements Commerciaux</h3><ContactTable rows={commerces} /></div>)}
      </div>
    </div>
  );
}

function Actualites() {
  const w = useW();
  const isMobile = w < 700;
  const articles = [
    { date: '03 Mai 2025', titre: 'Remise de clés de trois salles de classe à EPP Djoutoubo', cat: 'Éducation', img: 'assets/image2.jpg', resume: "Le Sénateur-Maire TRAORÉ Lassina a procédé à la remise officielle des clés de trois nouvelles salles de classe à l'École Primaire Publique de Djoutoubo, renforçant l'infrastructure éducative de la commune." },
    { date: '15 Avril 2025', titre: 'Le Sénateur-Maire reçoit le prix du Meilleur Maire', cat: 'Distinction', img: 'assets/image5.png', resume: "La commune de Soubré est à l'honneur : TRAORÉ Lassina a été distingué Meilleur Maire de Côte d'Ivoire, récompensant son action exemplaire au service des citoyens." },
    { date: '02 Avril 2025', titre: 'Inauguration de nouvelles infrastructures communales', cat: 'Infrastructure', img: 'assets/image2.jpg', resume: "La Mairie de Soubré a procédé à l'inauguration de nouvelles infrastructures dans plusieurs quartiers, améliorant les conditions de vie des habitants." },
    { date: '20 Mars 2025', titre: 'Lancement du programme Emploi pour Tous', cat: 'Emploi', img: 'assets/image1.png', resume: "La Mairie de Soubré lance une nouvelle session de son programme « Emploi pour Tous », visant à favoriser l'insertion professionnelle des jeunes de la commune." },
  ];

  return (
    <div>
      <PageHeader title="Actualités" subtitle="Les dernières informations de la Mairie de Soubré" image="assets/image2.jpg" />
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: isMobile ? '24px 16px' : '60px 24px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 24 }}>
          {articles.map((a, i) => (
            <div key={i} style={{ background: '#fff', border: '1px solid #eee', borderRadius: 12, overflow: 'hidden', boxShadow: '0 2px 8px rgba(0,0,0,0.05)', cursor: 'pointer', transition: 'all 0.2s' }}
              onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = '0 12px 32px rgba(0,0,0,0.1)'; }}
              onMouseLeave={e => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.05)'; }}>
              <div style={{ height: 160, overflow: 'hidden' }}>
                <img src={a.img} alt={a.titre} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
              <div style={{ padding: '18px 20px' }}>
                <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 8 }}>
                  <span style={{ background: '#e07020', color: '#fff', fontSize: 10, padding: '3px 10px', borderRadius: 10, fontFamily: "'Source Sans 3', sans-serif", fontWeight: 700 }}>{a.cat}</span>
                  <span style={{ color: '#999', fontSize: 12, fontFamily: "'Source Sans 3', sans-serif" }}>{a.date}</span>
                </div>
                <h3 style={{ fontFamily: "'Playfair Display', serif", fontSize: 17, color: '#0f3219', margin: '0 0 10px', lineHeight: 1.4 }}>{a.titre}</h3>
                <p style={{ color: '#666', fontSize: 13, lineHeight: 1.7, fontFamily: "'Source Sans 3', sans-serif", margin: 0 }}>{a.resume}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function Galerie() {
  const w = useW();
  const isMobile = w < 600;
  const imgs = ['assets/image1.png','assets/image2.jpg','assets/image3.jpg','assets/image5.png','assets/image7.jpeg','assets/image17.jpg','assets/image11.jpg','assets/image13.jpg'];
  const [lightbox, setLightbox] = React.useState(null);

  return (
    <div>
      <PageHeader title="Galerie Photos" subtitle="Images de la commune et des activités de la Mairie" image="assets/image2.jpg" />
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: isMobile ? '24px 16px' : '48px 24px' }}>
        <div style={{ columns: isMobile ? 2 : 3, gap: 12 }}>
          {imgs.map((src, i) => (
            <div key={i} onClick={() => setLightbox(i)} style={{ breakInside: 'avoid', marginBottom: 12, cursor: 'pointer', borderRadius: 8, overflow: 'hidden' }}>
              <img src={src} alt={`Photo ${i + 1}`} style={{ width: '100%', display: 'block', transition: 'transform 0.3s' }}
                onMouseEnter={e => e.target.style.transform = 'scale(1.04)'}
                onMouseLeave={e => e.target.style.transform = ''} />
            </div>
          ))}
        </div>
      </div>
      {lightbox !== null && (
        <div onClick={() => setLightbox(null)} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.92)', zIndex: 9999, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16, cursor: 'zoom-out' }}>
          <img src={imgs[lightbox]} alt="" style={{ maxWidth: '90vw', maxHeight: '90vh', objectFit: 'contain', borderRadius: 8 }} />
          <button onClick={e => { e.stopPropagation(); setLightbox(l => (l - 1 + imgs.length) % imgs.length); }}
            style={{ position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)', background: 'rgba(255,255,255,0.15)', border: 'none', color: '#fff', fontSize: 28, width: 44, height: 44, borderRadius: '50%', cursor: 'pointer' }}>‹</button>
          <button onClick={e => { e.stopPropagation(); setLightbox(l => (l + 1) % imgs.length); }}
            style={{ position: 'absolute', right: 12, top: '50%', transform: 'translateY(-50%)', background: 'rgba(255,255,255,0.15)', border: 'none', color: '#fff', fontSize: 28, width: 44, height: 44, borderRadius: '50%', cursor: 'pointer' }}>›</button>
        </div>
      )}
    </div>
  );
}

function Contact() {
  const w = useW();
  const isMobile = w < 700;
  const [form, setForm] = React.useState({ nom: '', tel: '', email: '', sujet: '', message: '' });
  const [sent, setSent] = React.useState(false);

  return (
    <div>
      <PageHeader title="Nous Contacter" subtitle="La Mairie de Soubré est à votre disposition" />
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: isMobile ? '32px 16px' : '60px 24px', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.4fr', gap: isMobile ? 36 : 60 }}>
        <div>
          <h2 style={{ fontFamily: "'Playfair Display', serif", fontSize: isMobile ? 22 : 28, color: '#0f3219', margin: '0 0 28px' }}>Coordonnées</h2>
          {[
            { icon: '📞', label: 'Téléphone', lines: ['22 52 73 59 93 / 93 930'] },
            { icon: '📱', label: 'Mobile / WhatsApp', lines: ['05 04 98 76 72'] },
            { icon: '✉️', label: 'Email', lines: ['mairiedesoubre1@gmail.com'] },
            { icon: '🌐', label: 'Site web', lines: ['www.mairiesoubre.net'] },
          ].map((c, i) => (
            <div key={i} style={{ display: 'flex', gap: 14, marginBottom: 20 }}>
              <div style={{ width: 42, height: 42, borderRadius: '50%', background: '#f8f6f0', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18, flexShrink: 0 }}>{c.icon}</div>
              <div>
                <div style={{ fontWeight: 700, fontSize: 13, color: '#0f3219', fontFamily: "'Source Sans 3', sans-serif", marginBottom: 2 }}>{c.label}</div>
                {c.lines.map((l, j) => <div key={j} style={{ color: '#555', fontSize: 14, fontFamily: "'Source Sans 3', sans-serif" }}>{l}</div>)}
              </div>
            </div>
          ))}
          <div style={{ marginTop: 24, background: '#0f3219', borderRadius: 12, overflow: 'hidden' }}>
            <div style={{ padding: '18px 22px', color: '#fff' }}>
              <div style={{ fontFamily: "'Playfair Display', serif", fontSize: 17, marginBottom: 6 }}>Secrétariat Général</div>
              <div style={{ color: 'rgba(255,255,255,0.7)', fontSize: 13, fontFamily: "'Source Sans 3', sans-serif", lineHeight: 1.7 }}>Lundi — Vendredi<br />7h30–12h30 / 14h30–17h30</div>
            </div>
            <img src="assets/image17.jpg" alt="Secrétariat" style={{ width: '100%', height: 140, objectFit: 'cover', objectPosition: 'top' }} />
          </div>
        </div>

        <div>
          <h2 style={{ fontFamily: "'Playfair Display', serif", fontSize: isMobile ? 22 : 28, color: '#0f3219', margin: '0 0 28px' }}>Envoyez-nous un message</h2>
          {sent ? (
            <div style={{ background: '#e7f5ec', color: '#0f3219', border: '1px solid #b8dfc4', borderRadius: 10, padding: '24px', fontFamily: "'Source Sans 3', sans-serif" }}>
              <div style={{ fontSize: 32, marginBottom: 10 }}>✓</div>
              <div style={{ fontWeight: 700, fontSize: 16, marginBottom: 6 }}>Message envoyé avec succès !</div>
              <div style={{ fontSize: 14, lineHeight: 1.6 }}>Merci de nous avoir contactés. Notre équipe vous répondra dans les plus brefs délais.</div>
            </div>
          ) : (
            <div style={{ background: '#f8f6f0', borderRadius: 12, padding: isMobile ? '20px 16px' : '32px' }}>
              <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: '0 16px' }}>
                {[{ label: 'Nom et Prénoms', key: 'nom', type: 'text', placeholder: 'Votre nom complet', req: true },
                  { label: 'Téléphone', key: 'tel', type: 'tel', placeholder: 'Votre numéro', req: true }].map(f => (
                  <div key={f.key} style={{ marginBottom: 16 }}>
                    <label style={{ display: 'block', fontFamily: "'Source Sans 3', sans-serif", fontSize: 13, fontWeight: 600, color: '#2a2a2a', marginBottom: 6 }}>{f.label}{f.req && <span style={{ color: '#e07020' }}> *</span>}</label>
                    <input type={f.type} placeholder={f.placeholder} value={form[f.key]} onChange={e => setForm({ ...form, [f.key]: e.target.value })} style={{ width: '100%', padding: '11px 14px', border: '1.5px solid #ddd', borderRadius: 6, fontSize: 14, boxSizing: 'border-box', fontFamily: "'Source Sans 3', sans-serif" }} />
                  </div>
                ))}
              </div>
              {[{ label: 'Adresse e-mail', key: 'email', type: 'email', placeholder: 'votre@email.com' }].map(f => (
                <div key={f.key} style={{ marginBottom: 16 }}>
                  <label style={{ display: 'block', fontFamily: "'Source Sans 3', sans-serif", fontSize: 13, fontWeight: 600, color: '#2a2a2a', marginBottom: 6 }}>{f.label}</label>
                  <input type={f.type} placeholder={f.placeholder} value={form[f.key]} onChange={e => setForm({ ...form, [f.key]: e.target.value })} style={{ width: '100%', padding: '11px 14px', border: '1.5px solid #ddd', borderRadius: 6, fontSize: 14, boxSizing: 'border-box', fontFamily: "'Source Sans 3', sans-serif" }} />
                </div>
              ))}
              <div style={{ marginBottom: 16 }}>
                <label style={{ display: 'block', fontFamily: "'Source Sans 3', sans-serif", fontSize: 13, fontWeight: 600, color: '#2a2a2a', marginBottom: 6 }}>Sujet</label>
                <select value={form.sujet} onChange={e => setForm({ ...form, sujet: e.target.value })} style={{ width: '100%', padding: '11px 14px', border: '1.5px solid #ddd', borderRadius: 6, fontSize: 14, boxSizing: 'border-box', fontFamily: "'Source Sans 3', sans-serif", background: '#fff' }}>
                  <option value="">Sélectionner un sujet...</option>
                  <option>Renseignement général</option><option>État civil</option><option>Services techniques</option><option>Plainte / Réclamation</option><option>Partenariat</option><option>Autre</option>
                </select>
              </div>
              <div style={{ marginBottom: 20 }}>
                <label style={{ display: 'block', fontFamily: "'Source Sans 3', sans-serif", fontSize: 13, fontWeight: 600, color: '#2a2a2a', marginBottom: 6 }}>Message <span style={{ color: '#e07020' }}>*</span></label>
                <textarea rows={5} placeholder="Votre message..." value={form.message} onChange={e => setForm({ ...form, message: e.target.value })} style={{ width: '100%', padding: '11px 14px', border: '1.5px solid #ddd', borderRadius: 6, fontSize: 14, resize: 'vertical', boxSizing: 'border-box', fontFamily: "'Source Sans 3', sans-serif" }} />
              </div>
              <button onClick={() => { if (form.nom && form.tel && form.message) setSent(true); else alert('Veuillez remplir les champs obligatoires (*)'); }} style={{ background: '#0f3219', color: '#fff', border: 'none', padding: '13px 28px', borderRadius: 6, fontSize: 14, fontWeight: 700, cursor: 'pointer', fontFamily: "'Source Sans 3', sans-serif" }}>Envoyer le message</button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { InfosPratiques, Actualites, Galerie, Contact });