function Administration({ subpage, setPage }) {
  const sections = {
    maire: <MairePage setPage={setPage} />,
    adjoints: <AdjointsPage />,
    conseillers: <ConseillersPage />,
    services: <ServicesAdminPage />,
  };
  return sections[subpage] || <MairePage setPage={setPage} />;
}

function MairePage({ setPage }) {
  const w = useW();
  const isMobile = w < 600;
  const [showForm, setShowForm] = React.useState(false);
  const [form, setForm] = React.useState({ nom: '', tel: '', email: '', message: '' });
  const [sent, setSent] = React.useState(false);

  return (
    <div>
      <PageHeader title="Le Maire" subtitle="TRAORÉ Lassina — Sénateur-Maire de la Commune de Soubré" image="assets/image5.png" />
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: isMobile ? '32px 16px' : '60px 24px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '300px 1fr', gap: isMobile ? 28 : 60 }}>
          <div>
            <img src="assets/image5.png" alt="TRAORÉ Lassina" style={{ width: '100%', maxWidth: isMobile ? 240 : '100%', display: 'block', margin: isMobile ? '0 auto 20px' : '0 0 20px', borderRadius: 12, boxShadow: '0 12px 40px rgba(0,0,0,0.15)' }} />
            <div style={{ background: '#0f3219', borderRadius: 10, padding: 20, color: '#fff', fontFamily: "'Source Sans 3', sans-serif" }}>
              <div style={{ fontFamily: "'Playfair Display', serif", fontSize: 20, marginBottom: 4 }}>TRAORÉ Lassina</div>
              <div style={{ color: '#e07020', fontSize: 13, marginBottom: 12 }}>Sénateur-Maire</div>
              {[['Meilleur Maire', 'Distinction nationale'], ['Meilleur Sénateur', 'Distinction nationale'], ['Mérite', 'Ordre national']].map(([t, s], i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0', borderBottom: i < 2 ? '1px solid rgba(255,255,255,0.1)' : 'none' }}>
                  <span style={{ color: '#e07020' }}>★</span>
                  <div><div style={{ fontSize: 13, fontWeight: 700 }}>{t}</div><div style={{ fontSize: 11, color: 'rgba(255,255,255,0.6)' }}>{s}</div></div>
                </div>
              ))}
            </div>
            <button onClick={() => setShowForm(!showForm)} style={{ width: '100%', marginTop: 14, background: '#e07020', color: '#fff', border: 'none', padding: '13px', borderRadius: 8, fontSize: 14, fontWeight: 700, cursor: 'pointer', fontFamily: "'Source Sans 3', sans-serif" }}>✉ Écrire au Maire</button>
          </div>

          <div>
            <div style={{ color: '#e07020', fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', fontFamily: "'Source Sans 3', sans-serif", fontWeight: 700, marginBottom: 10 }}>Biographie</div>
            <h2 style={{ fontFamily: "'Playfair Display', serif", fontSize: isMobile ? 24 : 32, color: '#0f3219', margin: '0 0 20px' }}>Un engagement au service de Soubré</h2>
            <p style={{ color: '#444', fontSize: 15, lineHeight: 1.9, fontFamily: "'Source Sans 3', sans-serif", marginBottom: 14 }}>TRAORÉ Lassina est le Sénateur-Maire de la commune de Soubré. Homme d'État engagé et reconnu, il cumule les fonctions de maire et de sénateur, témoignant de la confiance que lui accordent ses concitoyens et les institutions de la République de Côte d'Ivoire.</p>
            <p style={{ color: '#444', fontSize: 15, lineHeight: 1.9, fontFamily: "'Source Sans 3', sans-serif", marginBottom: 14 }}>Son leadership a valu à la commune plusieurs distinctions nationales, notamment le titre de <strong>Meilleur Maire</strong> et de <strong>Meilleur Sénateur</strong>, récompensant son action en faveur du développement local, de la cohésion sociale et de l'amélioration des conditions de vie des habitants.</p>
            <p style={{ color: '#444', fontSize: 15, lineHeight: 1.9, fontFamily: "'Source Sans 3', sans-serif", marginBottom: 28 }}>Sous sa direction, la commune a connu d'importants développements infrastructurels : construction de salles de classe, réhabilitation des routes communales, renforcement des services administratifs, et promotion de l'emploi local à travers le programme « Emploi pour Tous ».</p>

            {showForm && (
              <div style={{ background: '#f8f6f0', borderRadius: 12, padding: isMobile ? '20px 16px' : 28, border: '1px solid #eee', marginTop: 16 }}>
                <h3 style={{ fontFamily: "'Playfair Display', serif", fontSize: 20, color: '#0f3219', margin: '0 0 18px' }}>Écrire au Maire</h3>
                {sent ? (
                  <div style={{ background: '#e7f5ec', color: '#0f3219', border: '1px solid #b8dfc4', borderRadius: 8, padding: '14px 18px', fontFamily: "'Source Sans 3', sans-serif", fontSize: 14 }}>✓ Message envoyé avec succès. Nous vous répondrons dans les plus brefs délais.</div>
                ) : (
                  <>
                    {[{ label: 'Nom complet *', key: 'nom', type: 'text', placeholder: 'Votre nom et prénoms' }, { label: 'Téléphone *', key: 'tel', type: 'tel', placeholder: 'Votre numéro' }, { label: 'Adresse e-mail', key: 'email', type: 'email', placeholder: 'votre@email.com' }].map(f => (
                      <div key={f.key} style={{ marginBottom: 14 }}>
                        <label style={{ display: 'block', fontFamily: "'Source Sans 3', sans-serif", fontSize: 13, fontWeight: 600, color: '#333', 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: '10px 14px', border: '1px 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: '#333', marginBottom: 6 }}>Message *</label>
                      <textarea rows={4} placeholder="Votre message..." value={form.message} onChange={e => setForm({ ...form, message: e.target.value })} style={{ width: '100%', padding: '10px 14px', border: '1px 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) setSent(true); else alert('Veuillez remplir les champs obligatoires.'); }} style={{ background: '#0f3219', color: '#fff', border: 'none', padding: '12px 24px', borderRadius: 6, fontSize: 14, fontWeight: 700, cursor: 'pointer', fontFamily: "'Source Sans 3', sans-serif" }}>Envoyer</button>
                  </>
                )}
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

function AdjointsPage() {
  const w = useW();
  const isMobile = w < 700;
  const adjoints = [
    { num: '1er', nom: 'ADAMA Diarrassouba', img: 'assets/image7.jpeg', bio: "Né le 19 septembre 1963 à Boundiali, Monsieur ADAMA Diarrassouba est une figure éminente de la vie politique et administrative de la commune. Son parcours, marqué par un engagement indéfectible, illustre sa passion pour le service public et l'éducation." },
    { num: '2ème', nom: 'GUEI Laléa Albertine', img: null, bio: "Madame GUEI Laléa Albertine, deuxième adjointe au Maire, contribue activement à la gestion de la commune avec dévouement et professionnalisme." },
    { num: '3ème', nom: 'SANGARE Moussa', img: null, bio: "Monsieur SANGARE Moussa, actuel Député et troisième adjoint au Maire, a complété ses études secondaires au Lycée Moderne de San-Pédro. Il a obtenu son baccalauréat et suivi une formation au CAFOP supérieur." },
    { num: '4ème', nom: 'Madame Fanta DIARRA', img: null, bio: "Madame Fanta DIARRA, quatrième adjointe au Maire, joue un rôle important dans la coordination des services municipaux." },
    { num: '5ème', nom: 'ARRA Joseph', img: null, bio: "Monsieur ARRA Joseph, cinquième adjoint au Maire, assiste directement le Maire dans ses fonctions et est chargé d'une délégation importante pour la commune." },
    { num: '6ème', nom: 'SILUE Kloyeri', img: null, bio: "Monsieur SILUE Kloyeri, sixième adjoint au Maire, contribue activement à la gestion de la commune au quotidien." },
  ];

  const [selected, setSelected] = React.useState(0);
  const a = adjoints[selected];

  return (
    <div>
      <PageHeader title="Les Adjoints au Maire" subtitle="L'équipe municipale de la Commune de Soubré" />
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: isMobile ? '32px 16px' : '60px 24px' }}>
        {/* On mobile show list as horizontal scroll tabs */}
        {isMobile ? (
          <div style={{ display: 'flex', gap: 8, overflowX: 'auto', marginBottom: 20, paddingBottom: 8 }}>
            {adjoints.map((adj, i) => (
              <button key={i} onClick={() => setSelected(i)} style={{ flexShrink: 0, padding: '8px 14px', borderRadius: 20, border: '2px solid', borderColor: selected === i ? '#0f3219' : '#ddd', background: selected === i ? '#0f3219' : '#fff', color: selected === i ? '#fff' : '#333', fontSize: 12, fontWeight: 700, cursor: 'pointer', fontFamily: "'Source Sans 3', sans-serif", whiteSpace: 'nowrap' }}>{adj.num}</button>
            ))}
          </div>
        ) : (
          <div style={{ display: 'grid', gridTemplateColumns: '260px 1fr', gap: 32 }}>
            <div>
              {adjoints.map((adj, i) => (
                <button key={i} onClick={() => setSelected(i)} style={{ display: 'flex', width: '100%', alignItems: 'center', gap: 12, padding: '12px 14px', background: selected === i ? '#0f3219' : '#f8f6f0', border: 'none', borderRadius: 8, marginBottom: 6, cursor: 'pointer', textAlign: 'left' }}>
                  <div style={{ width: 36, height: 36, borderRadius: '50%', overflow: 'hidden', flexShrink: 0 }}>
                    <img src={adj.img || 'assets/image6.jpg'} alt={adj.nom} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top' }} />
                  </div>
                  <div>
                    <div style={{ color: selected === i ? '#e07020' : '#999', fontSize: 11, fontWeight: 700, fontFamily: "'Source Sans 3', sans-serif" }}>{adj.num} Adjoint</div>
                    <div style={{ color: selected === i ? '#fff' : '#333', fontSize: 13, fontWeight: 600, fontFamily: "'Source Sans 3', sans-serif" }}>{adj.nom}</div>
                  </div>
                </button>
              ))}
            </div>
            <AdjointDetail a={a} />
          </div>
        )}
        {isMobile && <AdjointDetail a={a} />}
      </div>
    </div>
  );
}

function AdjointDetail({ a }) {
  return (
    <div style={{ background: '#fff', borderRadius: 12, border: '1px solid #eee', overflow: 'hidden', boxShadow: '0 4px 16px rgba(0,0,0,0.06)' }}>
      <div style={{ background: '#0f3219', padding: '24px 28px', display: 'flex', alignItems: 'center', gap: 20, flexWrap: 'wrap' }}>
        <div style={{ width: 72, height: 72, borderRadius: '50%', overflow: 'hidden', border: '3px solid #e07020', flexShrink: 0 }}>
          <img src={a.img || 'assets/image6.jpg'} alt={a.nom} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top' }} />
        </div>
        <div>
          <div style={{ color: '#e07020', fontSize: 11, letterSpacing: 1, fontFamily: "'Source Sans 3', sans-serif", fontWeight: 700 }}>{a.num} ADJOINT AU MAIRE</div>
          <div style={{ color: '#fff', fontFamily: "'Playfair Display', serif", fontSize: 22, fontWeight: 700 }}>{a.nom}</div>
        </div>
      </div>
      <div style={{ padding: '24px 28px' }}>
        <h3 style={{ fontFamily: "'Playfair Display', serif", fontSize: 18, color: '#0f3219', margin: '0 0 14px' }}>Biographie</h3>
        <p style={{ color: '#555', fontSize: 15, lineHeight: 1.85, fontFamily: "'Source Sans 3', sans-serif", marginBottom: 20 }}>{a.bio}</p>
        <div style={{ background: '#f8f6f0', borderRadius: 8, padding: 18, borderLeft: '4px solid #e07020' }}>
          <div style={{ fontWeight: 700, fontSize: 13, color: '#0f3219', fontFamily: "'Source Sans 3', sans-serif", marginBottom: 6 }}>Attributions</div>
          <p style={{ color: '#666', fontSize: 14, lineHeight: 1.75, fontFamily: "'Source Sans 3', sans-serif", margin: 0 }}>Les adjoints assistent directement le Maire dans ses fonctions. Chaque adjoint peut être chargé d'un secteur particulier (finances, éducation, culture…) et peuvent suppléer le Maire dans certains cas.</p>
        </div>
      </div>
    </div>
  );
}

function ConseillersPage() {
  const w = useW();
  const isMobile = w < 600;
  const conseillers = ['BROUAHIMA Dosso','COULIBALI Diabou','DEMBELE Zedou','DIARRA Maïmouna','DOUMBIA Aboubacar','GOLY Koffi Alexandre','COULIBALY Bafarogbé','DEMBELE Adjara','DONWAHI Roland','KOUDOUGNON Elvis Aboubacar','KANE Moussa','KASSI N\'guessan','KONATE Oumarou','KONE Kiyegbo Guillaume','KOUASSI Elvis','MAMADOU Koné','KARAMOKO Mamadou','KOMENAN Marie Zohonon','KOUADIO Ahou Adwige Laure','KOUEI Thomas','MEA OI Mea Jean Jacques','MEITE Sita','SERI Dadegbo Véronique','SIDIBE Yacouba Ben Loceni','TOURE Macongnon','ZOBRE Constant Angénor','MEITE Awa','SEKOUE Yakeusseu Christine','TESSIA Gobero Henriette','VAH Gnandji Etienne Arthure','ZIRIGNON Sekou Lignon','DOUMBIA Aminata','YAO Kouadio Fulgence','BAMBA Korotoumou','SAKI Suomion Justin','GBAZA Zadou Catherine','IBRAHIMA Koné','YELIBI Sibili','GOBA Clémentine Laurence','MABE Boli Innocent','KOFFI Yao Richard','N\'GUESSAN Kouadio Trésor','DISSIA Mathrow Eveline','COULIBALY Piena Aboubakar','TIENE Zoumana','SY Savane Mariam'];
  const gridCols = isMobile ? '1fr 1fr' : w < 960 ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)';

  return (
    <div>
      <PageHeader title="Les Conseillers Municipaux" subtitle={`${conseillers.length} conseillers au service de la commune`} />
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: isMobile ? '32px 16px' : '60px 24px' }}>
        <div style={{ background: '#f8f6f0', borderRadius: 12, padding: '20px 24px', marginBottom: 32, borderLeft: '4px solid #e07020' }}>
          <h3 style={{ fontFamily: "'Playfair Display', serif", fontSize: 18, color: '#0f3219', margin: '0 0 10px' }}>Attributions des Conseillers</h3>
          <p style={{ color: '#555', fontSize: 14, lineHeight: 1.8, fontFamily: "'Source Sans 3', sans-serif", margin: 0 }}>Les conseillers municipaux participent activement à la gestion de la collectivité. Ils votent les délibérations, adoptent les décisions concernant la commune, soumettent des propositions et représentent les habitants dans les instances décisionnelles.</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: gridCols, gap: 10 }}>
          {conseillers.map((c, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, background: '#fff', border: '1px solid #eee', borderRadius: 8, padding: '10px 14px' }}>
              <div style={{ width: 30, height: 30, borderRadius: '50%', background: '#e07020', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 700, fontSize: 11, flexShrink: 0, fontFamily: "'Source Sans 3', sans-serif" }}>{i + 1}</div>
              <div style={{ fontFamily: "'Source Sans 3', sans-serif", fontSize: isMobile ? 12 : 13, fontWeight: 600, color: '#2a2a2a' }}>{c}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function ServicesAdminPage() {
  const w = useW();
  const isMobile = w < 700;
  const [activeService, setActiveService] = React.useState('secretariat');
  const services = [
    { id: 'secretariat', label: 'Secrétariat Général', nom: 'NOMEL BAKA Ambroise', img: 'assets/image17.jpg', desc: 'Le Secrétariat Général de la Mairie de Soubré assure plusieurs attributions importantes permettant le fonctionnement de la collectivité.', missions: ['Rédaction et suivi des actes administratifs','Gestion des ressources humaines','Coordination des services municipaux','Supervision du budget','Communication institutionnelle'] },
    { id: 'administratif', label: 'Service Administratif', nom: null, img: null, desc: 'Le service administratif joue un rôle crucial dans le fonctionnement de la collectivité locale.', missions: ['Rédaction des actes administratifs','Gestion des dossiers et archives','Accueil et information du public','État civil (naissances, mariages, décès)','Gestion des ressources humaines'] },
    { id: 'financier', label: 'Service Financier', nom: 'KOUADIO Konan René', img: null, desc: 'Le service financier assure une gestion saine et transparente des finances publiques.', missions: ['Élaboration du budget municipal','Contrôle de l\'exécution budgétaire','Gestion de la trésorerie','Recouvrement des recettes communales','Reporting financier'] },
    { id: 'technique', label: 'Service Technique', nom: 'KOUASSI KOUADIO Guillaume', img: null, desc: 'Le service technique joue un rôle essentiel dans l\'entretien et le développement des infrastructures.', missions: ['Entretien des bâtiments publics','Aménagement urbain','Services de voirie','Gestion des espaces verts','Projets d\'infrastructure'] },
    { id: 'socioculturel', label: 'Service Socioculturel', nom: 'OULAI Naho Fulgence', img: null, desc: 'Le service socioculturel est chargé de promouvoir le bien-être social, culturel et éducatif des citoyens.', missions: ['Organisation d\'événements culturels','Soutien aux associations','Programmes d\'éducation et formation','Aide sociale','Promotion du sport et de la jeunesse'] },
  ];
  const s = services.find(x => x.id === activeService);

  return (
    <div>
      <PageHeader title="Les Services Municipaux" subtitle="Organisation administrative de la Mairie de Soubré" />
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: isMobile ? '32px 16px' : '60px 24px' }}>
        <div style={{ display: 'flex', gap: 8, marginBottom: 32, flexWrap: 'wrap' }}>
          {services.map(sv => (
            <button key={sv.id} onClick={() => setActiveService(sv.id)} style={{ padding: '9px 16px', borderRadius: 20, border: '2px solid', borderColor: activeService === sv.id ? '#0f3219' : '#ddd', background: activeService === sv.id ? '#0f3219' : '#fff', color: activeService === sv.id ? '#fff' : '#555', fontWeight: 600, fontSize: 13, cursor: 'pointer', fontFamily: "'Source Sans 3', sans-serif" }}>{sv.label}</button>
          ))}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 28 : 48 }}>
          <div>
            <div style={{ color: '#e07020', fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', fontFamily: "'Source Sans 3', sans-serif", fontWeight: 700, marginBottom: 10 }}>{s.label}</div>
            <h2 style={{ fontFamily: "'Playfair Display', serif", fontSize: isMobile ? 22 : 28, color: '#0f3219', margin: '0 0 16px' }}>{s.label}</h2>
            <p style={{ color: '#555', fontSize: 15, lineHeight: 1.85, fontFamily: "'Source Sans 3', sans-serif", marginBottom: 24 }}>{s.desc}</p>
            <h3 style={{ fontFamily: "'Playfair Display', serif", fontSize: 17, color: '#0f3219', margin: '0 0 14px' }}>Principales Missions</h3>
            <ul style={{ padding: 0, listStyle: 'none', margin: 0 }}>
              {s.missions.map((m, i) => (
                <li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, marginBottom: 10, fontFamily: "'Source Sans 3', sans-serif", fontSize: 14, color: '#444' }}>
                  <span style={{ color: '#e07020', fontWeight: 700, marginTop: 2, flexShrink: 0 }}>→</span>{m}
                </li>
              ))}
            </ul>
          </div>
          {s.nom && (
            <div style={{ background: '#0f3219', borderRadius: 12, overflow: 'hidden', color: '#fff', alignSelf: 'start' }}>
              <div style={{ height: 200, overflow: 'hidden', background: '#1a4a28' }}>
                {s.img ? <img src={s.img} alt={s.nom} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top' }} /> : <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><img src="assets/image6.jpg" alt="" style={{ width: 100, opacity: 0.6 }} /></div>}
              </div>
              <div style={{ padding: '18px 22px' }}>
                <div style={{ color: '#e07020', fontSize: 11, letterSpacing: 1, fontFamily: "'Source Sans 3', sans-serif", fontWeight: 700, marginBottom: 4 }}>Chef de Service</div>
                <div style={{ fontFamily: "'Playfair Display', serif", fontSize: 19, fontWeight: 700 }}>{s.nom}</div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Administration });