function PageHeader({ title, subtitle, image }) {
  const w = useW();
  const isMobile = w < 600;
  return (
    <div style={{ position: 'relative', height: isMobile ? 180 : 260, overflow: 'hidden', background: image ? undefined : '#0f3219' }}>
      {image && <img src={image} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', filter: 'brightness(0.4)' }} />}
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(135deg, rgba(15,50,25,0.85), rgba(224,112,32,0.3))' }} />
      <div style={{ position: 'relative', zIndex: 1, height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', padding: isMobile ? '0 16px 24px' : '0 0 40px 60px', maxWidth: 1200 }}>
        <div style={{ color: '#e07020', fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', fontFamily: "'Source Sans 3', sans-serif", fontWeight: 700, marginBottom: 6 }}>Mairie de Soubré</div>
        <h1 style={{ fontFamily: "'Playfair Display', serif", color: '#fff', fontSize: isMobile ? 26 : 42, fontWeight: 700, margin: 0 }}>{title}</h1>
        {subtitle && <p style={{ color: 'rgba(255,255,255,0.75)', fontSize: isMobile ? 13 : 15, margin: '6px 0 0', fontFamily: "'Source Sans 3', sans-serif" }}>{subtitle}</p>}
      </div>
    </div>
  );
}

function Commune() {
  const w = useW();
  const isMobile = w < 600;
  const isTablet = w < 960;
  const [tab, setTab] = React.useState('historique');

  const tabs = [
    { id: 'historique', label: 'Historique' },
    { id: 'geographie', label: 'Situation Géographique' },
    { id: 'atouts', label: 'Les Atouts' },
  ];

  const twoCols = isMobile ? '1fr' : '1fr 1fr';
  const threeCols = isMobile ? '1fr' : isTablet ? '1fr 1fr' : 'repeat(3, 1fr)';
  const pad = isMobile ? '32px 16px' : '60px 24px';

  return (
    <div>
      <PageHeader title="La Commune" subtitle="Histoire, géographie et atouts de Soubré" image="assets/image2.jpg" />
      <div style={{ background: '#fff', borderBottom: '1px solid #eee', overflowX: 'auto' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', padding: '0 16px', display: 'flex', gap: 0 }}>
          {tabs.map(t => (
            <button key={t.id} onClick={() => setTab(t.id)} style={{ padding: isMobile ? '12px 14px' : '16px 28px', background: 'none', border: 'none', borderBottom: tab === t.id ? '3px solid #e07020' : '3px solid transparent', color: tab === t.id ? '#0f3219' : '#666', fontWeight: tab === t.id ? 700 : 400, fontSize: isMobile ? 13 : 14, cursor: 'pointer', fontFamily: "'Source Sans 3', sans-serif", whiteSpace: 'nowrap' }}>{t.label}</button>
          ))}
        </div>
      </div>

      <div style={{ maxWidth: 1100, margin: '0 auto', padding: pad }}>
        {tab === 'historique' && (
          <div style={{ display: 'grid', gridTemplateColumns: twoCols, gap: isMobile ? 32 : 60 }}>
            <div>
              <h2 style={{ fontFamily: "'Playfair Display', serif", fontSize: isMobile ? 24 : 32, color: '#0f3219', margin: '0 0 20px' }}>Origine du nom « Soubré »</h2>
              <p style={{ color: '#444', fontSize: 15, lineHeight: 1.9, fontFamily: "'Source Sans 3', sans-serif", marginBottom: 16 }}>Au XIX<sup>ème</sup> siècle, les explorateurs français parcouraient les lieux pour choisir le point d'implantation du nouveau chef-lieu de la région. Confus, ils rencontrèrent deux chasseurs qui furent interrogés pour donner le nom du lieu.</p>
              <p style={{ color: '#444', fontSize: 15, lineHeight: 1.9, fontFamily: "'Source Sans 3', sans-serif", marginBottom: 16 }}>Ceux-ci, surpris par les colons, répondirent en guise de mise en garde : <strong style={{ color: '#0f3219' }}>« bèlèsobli »</strong> — ce qui signifie en langue bété : <em>« nous ne sommes pas seulement que deux »</em>.</p>
              <p style={{ color: '#444', fontSize: 15, lineHeight: 1.9, fontFamily: "'Source Sans 3', sans-serif" }}>C'est la déformation de cette réponse qui donna naissance au nom <strong>Soubré</strong>.</p>
              <div style={{ marginTop: 28, padding: '18px 20px', background: '#f8f6f0', borderLeft: '4px solid #e07020', borderRadius: '0 8px 8px 0' }}>
                <div style={{ fontFamily: "'Playfair Display', serif", fontSize: 18, color: '#0f3219', fontStyle: 'italic' }}>« Bèlèsobli »</div>
                <div style={{ color: '#666', fontSize: 13, marginTop: 4, fontFamily: "'Source Sans 3', sans-serif" }}>Origine bété du nom Soubré — « nous ne sommes pas seulement que deux »</div>
              </div>
            </div>
            <div>
              <img src="assets/image2.jpg" alt="Soubré" style={{ width: '100%', height: isMobile ? 200 : 320, objectFit: 'cover', borderRadius: 12, boxShadow: '0 8px 32px rgba(0,0,0,0.12)', marginBottom: 20 }} />
              <img src="assets/image4.jpg" alt="Blason" style={{ width: 120, display: 'block', margin: '0 auto', opacity: 0.85 }} />
              <div style={{ textAlign: 'center', marginTop: 8, color: '#888', fontSize: 12, fontFamily: "'Source Sans 3', sans-serif" }}>Blason de la Commune de Soubré<br /><em>Union — Paix — Progrès</em></div>
            </div>
          </div>
        )}

        {tab === 'geographie' && (
          <div style={{ display: 'grid', gridTemplateColumns: twoCols, gap: isMobile ? 32 : 60 }}>
            <div>
              <h2 style={{ fontFamily: "'Playfair Display', serif", fontSize: isMobile ? 24 : 32, color: '#0f3219', margin: '0 0 20px' }}>Situation Géographique</h2>
              <p style={{ color: '#444', fontSize: 15, lineHeight: 1.9, fontFamily: "'Source Sans 3', sans-serif", marginBottom: 16 }}>La commune de Soubré est située au <strong>sud-ouest de la Côte d'Ivoire</strong>, plus précisément au centre-ouest du département du même nom, dans la <strong>région de la Nawa</strong>.</p>
              <p style={{ color: '#444', fontSize: 15, lineHeight: 1.9, fontFamily: "'Source Sans 3', sans-serif", marginBottom: 16 }}>Le périmètre communal couvre une superficie de <strong>148 km²</strong>.</p>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, margin: '24px 0' }}>
                {[
                  { label: 'San-Pédro', dist: '135 km', desc: 'Chef-lieu du District du Bas-Sassandra' },
                  { label: 'Yamoussoukro', dist: '240 km', desc: 'Capitale politique' },
                  { label: 'Abidjan', dist: '380 km', desc: 'Capitale économique' },
                  { label: 'Superficie', dist: '148 km²', desc: 'Périmètre communal' },
                ].map((d, i) => (
                  <div key={i} style={{ background: '#f8f6f0', borderRadius: 10, padding: '14px', border: '1px solid #eee' }}>
                    <div style={{ color: '#e07020', fontFamily: "'Playfair Display', serif", fontSize: 20, fontWeight: 700 }}>{d.dist}</div>
                    <div style={{ color: '#0f3219', fontWeight: 700, fontSize: 13, margin: '4px 0 2px', fontFamily: "'Source Sans 3', sans-serif" }}>{d.label}</div>
                    <div style={{ color: '#888', fontSize: 12, fontFamily: "'Source Sans 3', sans-serif" }}>{d.desc}</div>
                  </div>
                ))}
              </div>
            </div>
            <div>
              <img src="assets/image2.jpg" alt="Vue aérienne" style={{ width: '100%', height: isMobile ? 200 : 340, objectFit: 'cover', borderRadius: 12, boxShadow: '0 8px 32px rgba(0,0,0,0.12)' }} />
              <div style={{ marginTop: 16, padding: 20, background: '#0f3219', borderRadius: 10, color: '#fff' }}>
                <div style={{ fontFamily: "'Playfair Display', serif", fontSize: 16, marginBottom: 8 }}>Région de la Nawa</div>
                <div style={{ fontSize: 13, lineHeight: 1.7, color: 'rgba(255,255,255,0.75)', fontFamily: "'Source Sans 3', sans-serif" }}>Soubré est le chef-lieu de la région de la Nawa, reconnue pour son potentiel économique, ses richesses naturelles et son barrage hydroélectrique de renommée nationale.</div>
              </div>
            </div>
          </div>
        )}

        {tab === 'atouts' && (
          <div>
            <h2 style={{ fontFamily: "'Playfair Display', serif", fontSize: isMobile ? 24 : 32, color: '#0f3219', margin: '0 0 12px', textAlign: 'center' }}>Les Atouts de Soubré</h2>
            <p style={{ textAlign: 'center', color: '#666', maxWidth: 600, margin: '0 auto 36px', fontFamily: "'Source Sans 3', sans-serif", lineHeight: 1.7, fontSize: 15 }}>Soubré dispose d'atouts considérables qui en font un pôle de développement majeur de la Côte d'Ivoire.</p>
            <div style={{ display: 'grid', gridTemplateColumns: threeCols, gap: 20 }}>
              {[
                { icon: '⚡', titre: 'Énergie Hydroélectrique', desc: "Le barrage hydroélectrique de Soubré, l'un des plus grands de Côte d'Ivoire, produit une énergie essentielle pour le pays." },
                { icon: '🌿', titre: 'Richesses Naturelles', desc: "La commune est entourée de forêts tropicales denses, de cours d'eau et d'une biodiversité exceptionnelle." },
                { icon: '🌾', titre: 'Agriculture', desc: "La région est reconnue pour la culture du cacao, du café et d'autres cultures vivrières qui font sa renommée." },
                { icon: '🏘️', titre: 'Dynamisme Urbain', desc: "Une ville en plein essor avec des infrastructures modernes, un marché dynamique et une croissance démographique soutenue." },
                { icon: '🎓', titre: 'Éducation', desc: "Plusieurs établissements scolaires et un lycée moderne assurent la formation des jeunes générations de la commune." },
                { icon: '🤝', titre: 'Cohésion Sociale', desc: "Une population diverse et solidaire, caractérisée par la cohabitation harmonieuse de nombreuses communautés." },
              ].map((a, i) => (
                <div key={i} style={{ background: '#fff', border: '1px solid #eee', borderRadius: 12, padding: 24, boxShadow: '0 2px 8px rgba(0,0,0,0.04)' }}>
                  <div style={{ fontSize: 32, marginBottom: 14 }}>{a.icon}</div>
                  <div style={{ fontFamily: "'Playfair Display', serif", fontSize: 17, color: '#0f3219', fontWeight: 700, marginBottom: 8 }}>{a.titre}</div>
                  <div style={{ color: '#666', fontSize: 14, lineHeight: 1.75, fontFamily: "'Source Sans 3', sans-serif" }}>{a.desc}</div>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { Commune, PageHeader });