function ServicesLigne({ subpage }) {
  const pages = {
    'etat-civil': <EtatCivil />,
    'courrier': <Courrier />,
    'manifestation': <Manifestation />,
    'emploi': <Emploi />,
  };
  return pages[subpage] || <EtatCivil />;
}

function FormField({ label, type = 'text', placeholder, required, children, half }) {
  return (
    <div style={{ marginBottom: 16 }}>
      <label style={{ display: 'block', fontFamily: "'Source Sans 3', sans-serif", fontSize: 13, fontWeight: 600, color: '#2a2a2a', marginBottom: 6 }}>
        {label} {required && <span style={{ color: '#e07020' }}>*</span>}
      </label>
      {children || <input type={type} placeholder={placeholder}
        style={{ width: '100%', padding: '11px 14px', border: '1.5px solid #ddd', borderRadius: 6, fontSize: 14, boxSizing: 'border-box', fontFamily: "'Source Sans 3', sans-serif" }}
        onFocus={e => e.target.style.borderColor = '#0f3219'}
        onBlur={e => e.target.style.borderColor = '#ddd'} />}
    </div>
  );
}

function SubmitBtn({ label = 'Envoyer' }) {
  const [sent, setSent] = React.useState(false);
  if (sent) return <div style={{ background: '#e7f5ec', color: '#0f3219', border: '1px solid #b8dfc4', borderRadius: 8, padding: '14px 20px', fontFamily: "'Source Sans 3', sans-serif", fontWeight: 600, fontSize: 14 }}>✓ Votre demande a été envoyée avec succès.</div>;
  return <button onClick={() => setSent(true)} style={{ background: '#0f3219', color: '#fff', border: 'none', padding: '13px 28px', borderRadius: 6, fontSize: 14, fontWeight: 700, cursor: 'pointer', fontFamily: "'Source Sans 3', sans-serif" }}>{label}</button>;
}

function EtatCivil() {
  const w = useW();
  const isMobile = w < 700;
  const [activeDoc, setActiveDoc] = React.useState('naissance');
  const docs = [
    { id: 'naissance', label: 'Extrait de naissance', icon: '👶', desc: "Un acte de naissance est un document juridique authentique attestant de la naissance d'une personnalité juridique.", docs: "Copie de l'acte sollicité ou les références", cout: '3 500 F CFA (même région) — 5 000 F CFA (autre région)' },
    { id: 'mariage', label: 'Acte de mariage', icon: '💍', desc: "Un acte de mariage est un document officiel rédigé par un officier d'état civil lors de la célébration d'un mariage civil.", docs: "Copie de l'acte sollicité ou les références", cout: '3 500 F CFA (même région) — 5 000 F CFA (autre région)' },
    { id: 'famille', label: 'Livret de famille', icon: '👨‍👩‍👧', desc: "Le livret de famille est un document officiel consistant en un recueil d'extraits d'actes d'état civil relatifs à une famille.", docs: "Pièce d'identité valide", cout: 'Gratuit à la délivrance' },
    { id: 'vie', label: 'Certificat de vie', icon: '❤️', desc: "Un certificat de vie est un document officiel attestant qu'une personne est vivante à un moment donné.", docs: "Pièce d'identité valide — présence physique requise", cout: 'Gratuit' },
    { id: 'deces', label: 'Certificat de décès', icon: '📋', desc: "Un acte de décès est un document officiel émis par l'état civil attestant du décès d'une personne.", docs: "Copie de l'acte sollicité ou les références", cout: '3 500 F CFA (même région) — 5 000 F CFA (autre région)' },
  ];
  const doc = docs.find(d => d.id === activeDoc);

  return (
    <div>
      <PageHeader title="État Civil" subtitle="Demandez vos actes et documents officiels en ligne" />

      {/* Doc selector */}
      <div style={{ background: '#fff', borderBottom: '1px solid #eee', overflowX: 'auto' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', padding: '0 16px', display: 'flex', gap: 4, minWidth: 'max-content' }}>
          {docs.map(d => (
            <button key={d.id} onClick={() => setActiveDoc(d.id)} style={{ padding: isMobile ? '10px 12px' : '14px 18px', background: 'none', border: 'none', borderBottom: activeDoc === d.id ? '3px solid #e07020' : '3px solid transparent', color: activeDoc === d.id ? '#0f3219' : '#666', fontWeight: activeDoc === d.id ? 700 : 400, fontSize: 13, cursor: 'pointer', fontFamily: "'Source Sans 3', sans-serif", display: 'flex', alignItems: 'center', gap: 6, whiteSpace: 'nowrap' }}>
              <span>{d.icon}</span>{!isMobile && d.label}
            </button>
          ))}
        </div>
      </div>

      <div style={{ maxWidth: 1100, margin: '0 auto', padding: isMobile ? '24px 16px' : '48px 24px', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '240px 1fr', gap: isMobile ? 24 : 36 }}>
        {/* Sidebar */}
        {!isMobile && (
          <div>
            {docs.map(d => (
              <button key={d.id} onClick={() => setActiveDoc(d.id)} style={{ display: 'flex', width: '100%', alignItems: 'center', gap: 10, padding: '12px 14px', background: activeDoc === d.id ? '#0f3219' : '#f8f6f0', border: 'none', borderRadius: 8, marginBottom: 6, cursor: 'pointer', textAlign: 'left' }}>
                <span style={{ fontSize: 18 }}>{d.icon}</span>
                <span style={{ fontFamily: "'Source Sans 3', sans-serif", fontSize: 13, fontWeight: 600, color: activeDoc === d.id ? '#fff' : '#333' }}>{d.label}</span>
              </button>
            ))}
          </div>
        )}

        <div>
          <div style={{ background: '#fff', border: '1px solid #eee', borderRadius: 12, overflow: 'hidden', boxShadow: '0 4px 16px rgba(0,0,0,0.06)', marginBottom: 24 }}>
            <div style={{ background: '#0f3219', padding: '18px 24px', display: 'flex', gap: 14, alignItems: 'center' }}>
              <span style={{ fontSize: 28 }}>{doc.icon}</span>
              <div>
                <div style={{ color: '#e07020', fontSize: 11, letterSpacing: 1.5, fontFamily: "'Source Sans 3', sans-serif", fontWeight: 700 }}>ÉTAT CIVIL</div>
                <div style={{ color: '#fff', fontFamily: "'Playfair Display', serif", fontSize: isMobile ? 18 : 22, fontWeight: 700 }}>{doc.label}</div>
              </div>
            </div>
            <div style={{ padding: '20px 24px' }}>
              <p style={{ color: '#555', fontSize: 15, lineHeight: 1.8, fontFamily: "'Source Sans 3', sans-serif", marginBottom: 16 }}>{doc.desc}</p>
              <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 12 }}>
                <div style={{ background: '#f8f6f0', borderRadius: 8, padding: 14 }}>
                  <div style={{ fontSize: 11, fontWeight: 700, color: '#0f3219', fontFamily: "'Source Sans 3', sans-serif", marginBottom: 6, textTransform: 'uppercase' }}>Documents à fournir</div>
                  <div style={{ color: '#555', fontSize: 13, lineHeight: 1.6, fontFamily: "'Source Sans 3', sans-serif" }}>{doc.docs}</div>
                </div>
                <div style={{ background: '#fff8f2', borderRadius: 8, padding: 14, border: '1px solid #f5dfc0' }}>
                  <div style={{ fontSize: 11, fontWeight: 700, color: '#c06010', fontFamily: "'Source Sans 3', sans-serif", marginBottom: 6, textTransform: 'uppercase' }}>Coût</div>
                  <div style={{ color: '#555', fontSize: 13, lineHeight: 1.6, fontFamily: "'Source Sans 3', sans-serif" }}>{doc.cout}</div>
                </div>
              </div>
            </div>
          </div>

          <div style={{ background: '#f8f6f0', borderRadius: 12, padding: isMobile ? '20px 16px' : '28px 32px' }}>
            <h3 style={{ fontFamily: "'Playfair Display', serif", fontSize: 20, color: '#0f3219', margin: '0 0 20px' }}>Faire la demande</h3>
            <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: '0 16px' }}>
              <FormField label="Nom et Prénoms" placeholder="Votre nom complet" required />
              <FormField label="Téléphone" type="tel" placeholder="Votre numéro" required />
              <FormField label="Adresse e-mail" type="email" placeholder="votre@email.com" />
              <FormField label="Numéro de l'acte" placeholder="Référence si disponible" />
            </div>
            <FormField label="Commentaire">
              <textarea rows={3} placeholder="Précisions sur votre demande..." 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" }} />
            </FormField>
            <SubmitBtn label="Envoyer la demande" />
          </div>
        </div>
      </div>
    </div>
  );
}

function Courrier() {
  const w = useW();
  const isMobile = w < 600;
  const [tab, setTab] = React.useState('soumettre');
  return (
    <div>
      <PageHeader title="Courrier" subtitle="Soumettez ou suivez votre courrier administratif" />
      <div style={{ background: '#fff', borderBottom: '1px solid #eee' }}>
        <div style={{ maxWidth: 900, margin: '0 auto', padding: '0 16px', display: 'flex' }}>
          {[{ id: 'soumettre', label: 'Soumettre un courrier' }, { id: 'suivi', label: 'Suivi courrier' }].map(t => (
            <button key={t.id} onClick={() => setTab(t.id)} style={{ padding: isMobile ? '12px 16px' : '16px 24px', 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" }}>{t.label}</button>
          ))}
        </div>
      </div>
      <div style={{ maxWidth: 700, margin: '0 auto', padding: isMobile ? '24px 16px' : '48px 24px' }}>
        <div style={{ background: '#f8f6f0', borderRadius: 12, padding: isMobile ? '20px 16px' : '32px 40px' }}>
          <h3 style={{ fontFamily: "'Playfair Display', serif", fontSize: 22, color: '#0f3219', margin: '0 0 24px' }}>{tab === 'soumettre' ? 'Soumettre un courrier' : 'Suivi de courrier'}</h3>
          <FormField label="Nom et Prénoms" placeholder="Votre nom complet" required />
          <FormField label="Contact" type="tel" placeholder="Votre numéro de téléphone" required />
          {tab === 'suivi' && <><FormField label="Objet du courrier" placeholder="Résumé de l'objet" required /><FormField label="N° de décharge" placeholder="Numéro de décharge reçu" /></>}
          <FormField label="Commentaire">
            <textarea rows={4} placeholder="Objet et contenu..." 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" }} />
          </FormField>
          {tab === 'soumettre' && <FormField label="Joindre le courrier (PDF)"><input type="file" accept=".pdf" style={{ fontFamily: "'Source Sans 3', sans-serif", fontSize: 14 }} /></FormField>}
          <SubmitBtn label={tab === 'soumettre' ? 'Envoyer le courrier' : 'Rechercher'} />
        </div>
      </div>
    </div>
  );
}

function Manifestation() {
  const w = useW();
  const isMobile = w < 600;
  return (
    <div>
      <PageHeader title="Autorisation de Manifestation" subtitle="Demandez votre autorisation pour organiser un événement" />
      <div style={{ maxWidth: 700, margin: '0 auto', padding: isMobile ? '24px 16px' : '48px 24px' }}>
        <div style={{ background: '#fff8f2', border: '1px solid #f5dfc0', borderRadius: 8, padding: '14px 18px', marginBottom: 24, fontFamily: "'Source Sans 3', sans-serif", fontSize: 14, color: '#805020', lineHeight: 1.6 }}>
          Toute manifestation publique doit faire l'objet d'une autorisation préalable délivrée par la Mairie. Veuillez soumettre votre demande au moins <strong>10 jours avant</strong> la date prévue.
        </div>
        <div style={{ background: '#f8f6f0', borderRadius: 12, padding: isMobile ? '20px 16px' : '32px 40px' }}>
          <h3 style={{ fontFamily: "'Playfair Display', serif", fontSize: 22, color: '#0f3219', margin: '0 0 24px' }}>Formulaire de demande</h3>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: '0 16px' }}>
            <FormField label="Nom" placeholder="Votre nom" required />
            <FormField label="Prénoms" placeholder="Vos prénoms" required />
            <FormField label="Lieu de résidence" placeholder="Votre adresse" required />
            <FormField label="Contact" type="tel" placeholder="Numéro de téléphone" required />
          </div>
          <FormField label="Adresse e-mail" type="email" placeholder="votre@email.com" />
          <FormField label="Lieu de la manifestation" placeholder="Adresse précise du lieu" required />
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: '0 16px' }}>
            <FormField label="Période / Date" type="date" required />
            <FormField label="Type de manifestation" required>
              <select 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>Sélectionner...</option>
                <option>Fête publique</option><option>Concert / Spectacle</option><option>Cortège / Défilé</option><option>Réunion publique</option><option>Événement sportif</option><option>Autre</option>
              </select>
            </FormField>
          </div>
          <FormField label="Commentaire / Précisions">
            <textarea rows={3} placeholder="Description de votre manifestation..." 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" }} />
          </FormField>
          <FormField label="Joindre votre CNI"><input type="file" accept="image/*,.pdf" style={{ fontFamily: "'Source Sans 3', sans-serif", fontSize: 14 }} /></FormField>
          <SubmitBtn label="Envoyer la demande" />
        </div>
      </div>
    </div>
  );
}

function Emploi() {
  const w = useW();
  const isMobile = w < 700;
  return (
    <div>
      <PageHeader title="Emploi pour Tous" subtitle="Initiative de la Mairie de Soubré pour l'insertion professionnelle" />
      <div style={{ maxWidth: 1000, margin: '0 auto', padding: isMobile ? '32px 16px' : '60px 24px' }}>
        <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 }}>Initiative Municipale</div>
            <h2 style={{ fontFamily: "'Playfair Display', serif", fontSize: isMobile ? 24 : 30, color: '#0f3219', margin: '0 0 16px' }}>L'Emploi pour Tous</h2>
            <p style={{ color: '#555', fontSize: 15, lineHeight: 1.85, fontFamily: "'Source Sans 3', sans-serif", marginBottom: 14 }}>En vue de permettre à tout un chacun d'avoir la chance de travailler, la Mairie de Soubré a initié le programme <strong>« Emploi pour Tous »</strong>. Ce programme facilite l'insertion professionnelle des habitants, particulièrement les jeunes.</p>
            <p style={{ color: '#555', fontSize: 15, lineHeight: 1.85, fontFamily: "'Source Sans 3', sans-serif", marginBottom: 24 }}>Des offres d'emploi sont régulièrement publiées dans divers secteurs. La Mairie joue le rôle d'intermédiaire entre les employeurs locaux et les demandeurs d'emploi.</p>
            <a href="https://emploijeune.ci" target="_blank" rel="noreferrer" style={{ background: '#e07020', color: '#fff', textDecoration: 'none', padding: '12px 20px', borderRadius: 6, fontSize: 14, fontWeight: 700, fontFamily: "'Source Sans 3', sans-serif" }}>Site Emploi Jeune →</a>
          </div>
          <div style={{ background: '#0f3219', borderRadius: 12, padding: 28, color: '#fff' }}>
            <div style={{ fontFamily: "'Playfair Display', serif", fontSize: 20, marginBottom: 18 }}>Offres disponibles</div>
            {[{ titre: "Agent d'accueil", type: 'Temps plein', secteur: 'Administration' }, { titre: 'Technicien de maintenance', type: 'CDD', secteur: 'Technique' }, { titre: 'Animateur socioculturel', type: 'Temps partiel', secteur: 'Culture' }, { titre: 'Agent de collecte', type: 'Journalier', secteur: 'Voirie' }].map((o, i) => (
              <div key={i} style={{ background: 'rgba(255,255,255,0.07)', borderRadius: 8, padding: '12px 14px', marginBottom: 8, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div>
                  <div style={{ fontWeight: 700, fontSize: 14, marginBottom: 2, fontFamily: "'Source Sans 3', sans-serif" }}>{o.titre}</div>
                  <div style={{ color: 'rgba(255,255,255,0.6)', fontSize: 12, fontFamily: "'Source Sans 3', sans-serif" }}>{o.secteur} — {o.type}</div>
                </div>
                <span style={{ background: '#e07020', color: '#fff', fontSize: 11, padding: '4px 10px', borderRadius: 10, fontFamily: "'Source Sans 3', sans-serif", fontWeight: 700, cursor: 'pointer' }}>Postuler</span>
              </div>
            ))}
            <div style={{ color: 'rgba(255,255,255,0.5)', fontSize: 12, marginTop: 10, fontFamily: "'Source Sans 3', sans-serif" }}>Contactez la Mairie : 05 04 98 76 72</div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ServicesLigne });