function Home({ setPage }) {
  const w = useW();
  const isMobile = w < 600;
  const isTablet = w < 960;

  const news = [
    "Remise de clés de trois salles de classe à EPP Djoutoubo — 03/05/2025",
    "Le Sénateur-Maire TRAORÉ Lassina reçoit le prix du Meilleur Maire de Côte d'Ivoire",
    "Inauguration de nouvelles infrastructures dans la commune de Soubré",
    "Emploi pour Tous : nouvelle session de recrutement ouverte — contactez la Mairie",
  ];
  const [newsIdx, setNewsIdx] = React.useState(0);

  React.useEffect(() => {
    const t = setInterval(() => setNewsIdx(i => (i + 1) % news.length), 4000);
    return () => clearInterval(t);
  }, []);

  const navigate = (id) => { setPage(id); window.scrollTo({ top: 0 }); };

  const quickLinks = [
    { icon: '📋', label: 'Extrait de naissance', page: 'etat-civil' },
    { icon: '💍', label: 'Acte de mariage', page: 'etat-civil' },
    { icon: '✉️', label: 'Soumettre un courrier', page: 'courrier' },
    { icon: '🎪', label: 'Autorisation manifestation', page: 'manifestation' },
    { icon: '💼', label: 'Emploi pour tous', page: 'emploi' },
    { icon: '🏥', label: 'Pharmacies de garde', page: 'infos' },
  ];

  const stats = [
    { num: '148 km²', label: 'Superficie communale' },
    { num: '380 km', label: "Distance d'Abidjan" },
    { num: '135 km', label: 'Distance de San-Pédro' },
    { num: '6', label: 'Adjoints au Maire' },
  ];

  const quickCols = isMobile ? '1fr' : isTablet ? '1fr 1fr' : 'repeat(3, 1fr)';
  const statCols = isMobile ? '1fr 1fr' : 'repeat(4, 1fr)';
  const mayorCols = isMobile ? '1fr' : '1fr 2fr';
  const communeCols = isMobile ? '1fr' : '3fr 2fr';
  const footerCols = isMobile ? '1fr 1fr' : isTablet ? '1fr 1fr' : '2fr 1fr 1fr 1fr';

  return (
    <div>
      {/* Hero */}
      <div style={{ position: 'relative', height: '100vh', minHeight: 500, overflow: 'hidden' }}>
        <img src="assets/image2.jpg" alt="Barrage de Soubré" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', filter: 'brightness(0.55)' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to bottom, rgba(15,50,25,0.4) 0%, rgba(15,50,25,0.7) 100%)' }} />

        {/* News ticker */}
        <div style={{ position: 'absolute', top: 86, left: 0, right: 0, background: 'rgba(224,112,32,0.92)', padding: '8px 20px', display: 'flex', alignItems: 'center', gap: 12 }}>
          <span style={{ color: '#fff', fontWeight: 700, fontSize: 11, letterSpacing: 1.5, textTransform: 'uppercase', whiteSpace: 'nowrap' }}>INFO</span>
          <div style={{ color: '#fff', fontSize: 13, fontFamily: "'Source Sans 3', sans-serif", overflow: 'hidden', flex: 1 }}>
            <span key={newsIdx} style={{ animation: 'fadeSlide 0.5s ease' }}>{news[newsIdx]}</span>
          </div>
        </div>

        <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: '0 20px' }}>
          <img src="assets/image4.jpg" alt="Blason" style={{ height: isMobile ? 64 : 90, width: 'auto', marginBottom: 16, filter: 'drop-shadow(0 4px 12px rgba(0,0,0,0.5))' }} />
          <h1 style={{ fontFamily: "'Playfair Display', serif", color: '#fff', fontSize: isMobile ? 32 : 'clamp(36px, 6vw, 72px)', fontWeight: 700, margin: '0 0 12px', textShadow: '0 2px 20px rgba(0,0,0,0.4)' }}>Bienvenue à Soubré</h1>
          <p style={{ color: 'rgba(255,255,255,0.85)', fontSize: isMobile ? 15 : 18, maxWidth: 560, lineHeight: 1.6, marginBottom: 28, fontFamily: "'Source Sans 3', sans-serif" }}>
            Commune du sud-ouest de la Côte d'Ivoire,{isMobile ? ' ' : <br />}au cœur de la région de la Nawa
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center' }}>
            <button onClick={() => navigate('commune')} style={{ background: '#e07020', color: '#fff', border: 'none', padding: isMobile ? '12px 20px' : '14px 28px', borderRadius: 6, fontSize: isMobile ? 14 : 15, fontWeight: 700, cursor: 'pointer', fontFamily: "'Source Sans 3', sans-serif" }}>Découvrir la Commune</button>
            <button onClick={() => navigate('etat-civil')} style={{ background: 'transparent', color: '#fff', border: '2px solid rgba(255,255,255,0.6)', padding: isMobile ? '12px 20px' : '14px 28px', borderRadius: 6, fontSize: isMobile ? 14 : 15, fontWeight: 600, cursor: 'pointer', fontFamily: "'Source Sans 3', sans-serif" }}>Services en ligne</button>
          </div>
        </div>
        <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 60, background: 'linear-gradient(to bottom, transparent, rgba(248,246,240,1))' }} />
      </div>

      {/* Stats */}
      <div style={{ background: '#0f3219', padding: '28px 20px' }}>
        <div style={{ maxWidth: 900, margin: '0 auto', display: 'grid', gridTemplateColumns: statCols, gap: 16 }}>
          {stats.map((s, i) => (
            <div key={i} style={{ textAlign: 'center', padding: '12px 0', borderRight: (!isMobile && i < 3) ? '1px solid rgba(255,255,255,0.1)' : 'none' }}>
              <div style={{ color: '#e07020', fontFamily: "'Playfair Display', serif", fontSize: isMobile ? 24 : 30, fontWeight: 700 }}>{s.num}</div>
              <div style={{ color: 'rgba(255,255,255,0.65)', fontSize: 12, marginTop: 4, fontFamily: "'Source Sans 3', sans-serif" }}>{s.label}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Quick links */}
      <div style={{ background: '#f8f6f0', padding: isMobile ? '40px 16px' : '64px 24px' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 36 }}>
            <div style={{ color: '#e07020', fontSize: 12, letterSpacing: 2, textTransform: 'uppercase', fontFamily: "'Source Sans 3', sans-serif", fontWeight: 700 }}>Démarches administratives</div>
            <h2 style={{ fontFamily: "'Playfair Display', serif", fontSize: isMobile ? 26 : 36, color: '#0f3219', margin: '8px 0 0' }}>Nos services en ligne</h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: quickCols, gap: 16 }}>
            {quickLinks.map((ql, i) => (
              <button key={i} onClick={() => navigate(ql.page)} style={{ background: '#fff', border: '1px solid rgba(15,50,25,0.08)', borderRadius: 12, padding: '22px 18px', cursor: 'pointer', textAlign: 'left', display: 'flex', alignItems: 'center', gap: 14, boxShadow: '0 2px 8px rgba(0,0,0,0.04)', transition: 'all 0.2s', fontFamily: "'Source Sans 3', sans-serif" }}
                onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = '0 8px 24px rgba(15,50,25,0.12)'; e.currentTarget.style.borderColor = '#e07020'; }}
                onMouseLeave={e => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.04)'; e.currentTarget.style.borderColor = 'rgba(15,50,25,0.08)'; }}>
                <span style={{ fontSize: 26 }}>{ql.icon}</span>
                <div>
                  <div style={{ fontWeight: 700, color: '#0f3219', fontSize: 14 }}>{ql.label}</div>
                  <div style={{ color: '#e07020', fontSize: 12, marginTop: 2 }}>Accéder →</div>
                </div>
              </button>
            ))}
          </div>
        </div>
      </div>

      {/* Mayor message */}
      <div style={{ background: '#fff', padding: isMobile ? '48px 16px' : '80px 24px' }}>
        <div style={{ maxWidth: 1000, margin: '0 auto', display: 'grid', gridTemplateColumns: mayorCols, gap: isMobile ? 32 : 60, alignItems: 'center' }}>
          <div style={{ textAlign: 'center' }}>
            <div style={{ position: 'relative', display: 'inline-block' }}>
              <img src="assets/image5.png" alt="TRAORÉ Lassina" style={{ width: isMobile ? 180 : 240, height: isMobile ? 220 : 300, objectFit: 'cover', objectPosition: 'top', borderRadius: 12, boxShadow: '0 12px 40px rgba(0,0,0,0.15)' }} />
              <div style={{ position: 'absolute', bottom: -16, left: '50%', transform: 'translateX(-50%)', background: '#e07020', color: '#fff', padding: '8px 20px', borderRadius: 20, fontSize: 11, fontWeight: 700, whiteSpace: 'nowrap', fontFamily: "'Source Sans 3', sans-serif" }}>Sénateur-Maire</div>
            </div>
            <div style={{ marginTop: 28, fontFamily: "'Playfair Display', serif", fontSize: 20, color: '#0f3219', fontWeight: 700 }}>TRAORÉ Lassina</div>
            <div style={{ color: '#888', fontSize: 13, fontFamily: "'Source Sans 3', sans-serif" }}>Maire de Soubré</div>
          </div>
          <div>
            <div style={{ color: '#e07020', fontSize: 12, letterSpacing: 2, textTransform: 'uppercase', fontFamily: "'Source Sans 3', sans-serif", fontWeight: 700, marginBottom: 12 }}>Mot du Maire</div>
            <h2 style={{ fontFamily: "'Playfair Display', serif", fontSize: isMobile ? 24 : 32, color: '#0f3219', margin: '0 0 20px', lineHeight: 1.3 }}>Au service de notre commune</h2>
            <p style={{ color: '#444', fontSize: 15, lineHeight: 1.85, fontFamily: "'Source Sans 3', sans-serif", marginBottom: 16 }}>Chères habitantes et chers habitants de Soubré, c'est avec une grande fierté que je vous accueille sur le site officiel de notre commune. Soubré, capitale de la région de la Nawa, est une ville dynamique en plein essor, riche de ses atouts naturels, de ses hommes et femmes engagés pour son développement.</p>
            <p style={{ color: '#444', fontSize: 15, lineHeight: 1.85, fontFamily: "'Source Sans 3', sans-serif", marginBottom: 28 }}>Ce portail numérique a été conçu pour rapprocher la mairie de ses citoyens, faciliter vos démarches administratives et vous tenir informés des actions de votre municipalité.</p>
            <button onClick={() => navigate('maire')} style={{ background: '#0f3219', color: '#fff', border: 'none', padding: '12px 24px', borderRadius: 6, fontSize: 14, fontWeight: 600, cursor: 'pointer', fontFamily: "'Source Sans 3', sans-serif" }}>Lire la biographie complète →</button>
          </div>
        </div>
      </div>

      {/* About commune teaser */}
      <div style={{ background: '#f8f6f0', padding: isMobile ? '48px 16px' : '80px 24px' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', display: 'grid', gridTemplateColumns: communeCols, gap: isMobile ? 32 : 60, alignItems: 'center' }}>
          <div>
            <div style={{ color: '#e07020', fontSize: 12, letterSpacing: 2, textTransform: 'uppercase', fontFamily: "'Source Sans 3', sans-serif", fontWeight: 700, marginBottom: 12 }}>La Commune</div>
            <h2 style={{ fontFamily: "'Playfair Display', serif", fontSize: isMobile ? 26 : 36, color: '#0f3219', margin: '0 0 20px' }}>Soubré, entre fleuve et forêt</h2>
            <p style={{ color: '#444', fontSize: 15, lineHeight: 1.85, fontFamily: "'Source Sans 3', sans-serif", marginBottom: 16 }}>La commune de Soubré est située au sud-ouest de la Côte d'Ivoire, au centre-ouest du département du même nom, dans la région de la Nawa. Son périmètre communal couvre une superficie de 148 km².</p>
            <p style={{ color: '#444', fontSize: 15, lineHeight: 1.85, fontFamily: "'Source Sans 3', sans-serif", marginBottom: 24 }}>Son nom même — issu du mot bété <em>« bèlèsobli »</em> — témoigne d'une histoire riche, forgée au croisement des cultures et des peuples.</p>
            <button onClick={() => navigate('commune')} style={{ background: '#e07020', color: '#fff', border: 'none', padding: '12px 24px', borderRadius: 6, fontSize: 14, fontWeight: 600, cursor: 'pointer', fontFamily: "'Source Sans 3', sans-serif" }}>En savoir plus sur la commune →</button>
          </div>
          <div style={{ position: 'relative' }}>
            <img src="assets/image2.jpg" alt="Barrage de Soubré" style={{ width: '100%', height: 240, objectFit: 'cover', borderRadius: 12, boxShadow: '0 12px 40px rgba(0,0,0,0.15)' }} />
            <div style={{ position: 'absolute', bottom: 16, left: 16, background: 'rgba(15,50,25,0.85)', color: '#fff', padding: '6px 14px', borderRadius: 4, fontSize: 12, fontFamily: "'Source Sans 3', sans-serif", backdropFilter: 'blur(4px)' }}>Barrage hydroélectrique de Soubré</div>
          </div>
        </div>
      </div>

      {/* Footer */}
      <footer style={{ background: '#0a1f10', color: 'rgba(255,255,255,0.6)', padding: isMobile ? '40px 16px 20px' : '48px 24px 24px', fontFamily: "'Source Sans 3', sans-serif" }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <div style={{ display: 'grid', gridTemplateColumns: footerCols, gap: isMobile ? 28 : 40, marginBottom: 32 }}>
            <div style={{ gridColumn: isMobile ? 'span 2' : undefined }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
                <img src="assets/image4.jpg" alt="Blason" style={{ height: 44, borderRadius: 4 }} />
                <div>
                  <div style={{ color: '#fff', fontFamily: "'Playfair Display', serif", fontWeight: 700, fontSize: 16 }}>Mairie de Soubré</div>
                  <div style={{ fontSize: 11, letterSpacing: 1 }}>mairiesoubre.net</div>
                </div>
              </div>
              <p style={{ fontSize: 13, lineHeight: 1.7, margin: 0 }}>Union — Paix — Progrès<br />Commune de Soubré, Région de la Nawa, Côte d'Ivoire</p>
            </div>
            <div>
              <div style={{ color: '#fff', fontWeight: 700, fontSize: 13, marginBottom: 12, textTransform: 'uppercase', letterSpacing: 1 }}>Navigation</div>
              {['La Commune','Le Maire','Services','Contact'].map(l => <div key={l} style={{ marginBottom: 6, fontSize: 13 }}>{l}</div>)}
            </div>
            <div>
              <div style={{ color: '#fff', fontWeight: 700, fontSize: 13, marginBottom: 12, textTransform: 'uppercase', letterSpacing: 1 }}>Services</div>
              {['État Civil','Courrier','Emploi','Manifestation'].map(l => <div key={l} style={{ marginBottom: 6, fontSize: 13 }}>{l}</div>)}
            </div>
            <div>
              <div style={{ color: '#fff', fontWeight: 700, fontSize: 13, marginBottom: 12, textTransform: 'uppercase', letterSpacing: 1 }}>Contact</div>
              <div style={{ fontSize: 13, lineHeight: 2 }}>
                <div>22 52 73 59 93 / 93 930</div>
                <div>05 04 98 76 72</div>
                <div>mairiedesoubre1@gmail.com</div>
              </div>
            </div>
          </div>
          <div style={{ borderTop: '1px solid rgba(255,255,255,0.08)', paddingTop: 20, fontSize: 12, textAlign: 'center' }}>
            © 2025 Mairie de Soubré — Tous droits réservés — mairiesoubre.net
          </div>
        </div>
      </footer>
    </div>
  );
}

Object.assign(window, { Home });