/* global React, BOARD_MEMBERS, LEADERSHIP, CHIC_VALUES */
const { useState: useState_co } = React;

// ===================== MISSION & VALEURS =====================
function MissionPage() {
  return (
    <main>
      {/* Hero */}
      <section className="page-hero" style={{ padding: "32px 0px" }}>
        <div className="container">
          <Crumbs trail={[
          { label: "Accueil", href: "#/" },
          { label: "Connaître le CHIC", href: "#/connaitre/mission" },
          { label: "Mission et valeurs" }]
          } />
          <div className="eyebrow" style={{ marginTop: 16, marginBottom: 18 }}>L'institution · qui sommes-nous</div>
          <h1 className="h1" style={{ maxWidth: "20ch" }}>
            Mission et valeurs <span className="italic-accent">du CHIC.</span>
          </h1>
          <p className="lead" style={{ marginTop: 22, maxWidth: "62ch" }}>
            Conçu pour devenir un centre de référence au Bénin et en Afrique de l'Ouest,
            le CHIC est un hôpital public de niveau 4 situé au sommet de la pyramide sanitaire béninoise.
          </p>
        </div>
      </section>

      {/* Notre mission */}
      <section className="section tight">
        <div className="container">
          <div className="prose-grid">
            <div className="prose-side">
              <div className="eyebrow">Notre mission</div>
              <h2 className="h2" style={{ marginTop: 14 }}>
                Soigner, enseigner, <span style={{ color: "var(--chic-400)" }}>innover par la recherche.</span>
              </h2>
            </div>
            <div className="prose-body">
              <p className="lead">
                Le CHIC s'inscrit dans une stratégie globale du Gouvernement béninois visant
                à améliorer et promouvoir la santé de la population, tout en modernisant le système hospitalier.
              </p>
              <p>
                Son ouverture en 2025 marque une avancée majeure dans l'offre de soins du pays,
                avec trois missions fondamentales : <b>soigner</b>, <b>enseigner</b> et <b>innover par la recherche</b>.
              </p>
              <p>
                Grâce à des infrastructures modernes et des équipements de pointe, le CHIC propose
                une prise en charge avancée dans plusieurs spécialités médicales :
              </p>
              <ul className="rich-list">
                <li style={{ padding: "7px 0px 7px 26px" }}><b>Oncologie complète</b> — radiothérapie, curiethérapie, médecine nucléaire</li>
                <li style={{ padding: "7px 0px 7px 26px" }}><b>Pathologies chroniques</b> — solutions adaptées et suivi pluridisciplinaire</li>
                <li style={{ padding: "7px 0px 7px 26px" }}><b>Cardiologie</b> — soins conventionnels et interventions spécialisées</li>
                <li style={{ padding: "7px 0px 7px 26px" }}><b>Chirurgies complexes</b> — chirurgie cardiaque, neurochirurgie, etc.</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <hr className="rule" />

      {/* Nos valeurs */}
      <section className="section tight" style={{ background: "var(--chic-50)" }}>
        <div className="container">
          <SectionHeader
            eyebrow="Nos valeurs"
            title={<>7 principes qui <span style={{ color: "var(--chic-400)" }}>guident nos équipes au quotidien.</span></>}
            lead="L'engagement du CHIC repose sur des principes fondamentaux qui orientent chaque décision médicale, administrative et organisationnelle." />
          
          <div className="values-grid">
            {CHIC_VALUES.map((v, i) =>
            <FadeUp key={v.key} delay={i * 60}>
                <article className="value-card">
                  <div className="num">0{i + 1}</div>
                  <h3 className="h4">{v.key}</h3>
                  <p>{v.desc}</p>
                </article>
              </FadeUp>
            )}
          </div>
        </div>
      </section>

      {/* Amélioration continue */}
      <section className="section">
        <div className="container">
          <div className="commit-band">
            <div>
              <div className="eyebrow" style={{ marginBottom: 14 }}>Un engagement pour l'amélioration continue</div>
              <h2 className="h2" style={{ maxWidth: "24ch" }}>
                La qualité et la sécurité des soins <span style={{ color: "var(--chic-400)" }}>au cœur de notre fonctionnement.</span>
              </h2>
              <p className="lead" style={{ marginTop: 18 }}>
                Nos processus sont régulièrement évalués et ajustés afin d'assurer une amélioration constante des pratiques
                et une prise en charge toujours plus performante.
              </p>
            </div>
            <div className="commit-stats">
              <div className="cell"><Stat value="2025" label="Ouverture progressive" /></div>
              <div className="cell"><Stat value="3" label="Missions fondamentales" /></div>
              <div className="cell"><Stat value="434" label="Lits & places (cible)" /></div>
            </div>
          </div>
        </div>
      </section>
    </main>);

}

// ===================== LE CENTRE HOSPITALIER =====================
function CentrePage() {
  return (
    <main>
      <section className="page-hero">
        <div className="container">
          <Crumbs trail={[
          { label: "Accueil", href: "#/" },
          { label: "Connaître le CHIC", href: "#/connaitre/mission" },
          { label: "Le centre hospitalier" }]
          } />
          <div className="eyebrow" style={{ marginTop: 16, marginBottom: 18 }}>L'établissement · infrastructure</div>
          <h1 className="h1" style={{ maxWidth: "22ch" }}>
            40 000 m² au service <span className="italic-accent">de soins complexes.</span>
          </h1>
          <p className="lead" style={{ marginTop: 22, maxWidth: "64ch" }}>
            Le CHIC dispose d'une capacité d'accueil de 434 lits et places, alliant polyvalence,
            innovation et confort. Conçu selon les normes internationales, il offre un environnement
            médical moderne dédié à la prise en charge des patients du Bénin et de la sous-région.
          </p>
          <div className="hero-stats" style={{ marginTop: 40 }}>
            <div className="cell"><Stat value="40000" label="m² de plateau" suffix=" m²" /></div>
            <div className="cell"><Stat value="434" label="Lits & places" /></div>
            <div className="cell"><Stat value="6" label="Pôles d'hospitalisation" /></div>
            <div className="cell"><Stat value="9" label="Salles opératoires" /></div>
          </div>
        </div>
      </section>

      {/* Photo gallery — architecture */}
      <section className="photo-strip">
        <div className="psg-item span-2">
          <img src="assets/photos/facade-signage.jpg" alt="Façade emblématique du CHIC" />
        </div>
        <div className="psg-item">
          <img src="assets/photos/courtyard.jpg" alt="Cour intérieure" />
        </div>
        <div className="psg-item">
          <img src="assets/photos/walkway.jpg" alt="Passerelle couverte" />
        </div>
      </section>

      {/* Pôles d'hospitalisation */}
      <section className="section">
        <div className="container">
          <SectionHeader
            eyebrow="Espaces d'hospitalisation"
            title={<>6 pôles de 50 lits, <span style={{ color: "var(--chic-400)" }}>une prise en charge ciblée.</span></>}
            lead="Le CHIC est structuré en six pôles d'hospitalisation spécialisés, permettant une prise en charge ciblée et adaptée aux pathologies des patients." />
          
          <div className="poles-detailed">
            {[
            { id: "loco", title: "Locomoteur & Neurochirurgie", beds: "50 lits", icon: IconBrain },
            { id: "cardio", title: "Cardiovasculaire / Thoracique – Tête et cou", beds: "50 lits", icon: IconHeart },
            { id: "cardio-meta", title: "Cardiologie / Métabolisme", beds: "50 lits", icon: IconActivity },
            { id: "onco", title: "Oncologie", beds: "50 lits", icon: IconBolt },
            { id: "hgce", title: "Hépato-gastro-entérologie médico-chirurgicale", beds: "50 lits", icon: IconStethoscope },
            { id: "nephro", title: "Néphrologie / Urologie", beds: "50 lits", icon: IconDroplet }].
            map((p, i) => {
              const Icon = p.icon;
              return (
                <FadeUp key={p.id} delay={i * 60}>
                  <article className="pole-detail">
                    <div className="hd">
                      <span className="ic"><Icon size={22} /></span>
                      <span className="bd">{p.beds}</span>
                    </div>
                    <h3 className="h4">{p.title}</h3>
                  </article>
                </FadeUp>);

            })}
          </div>
        </div>
      </section>

      <hr className="rule" />

      {/* Ambulatoire & consultations */}
      <section className="section tight">
        <div className="container">
          <SectionHeader
            eyebrow="Ambulatoire & consultations"
            title="3 unités ambulatoires, 1 service de dialyse, 1 plateau de consultations complet." />
          
          <div className="ambu-grid">
            <div className="ambu-card">
              <div className="num">01</div>
              <h3 className="h4">Médecine</h3>
              <p>Unité ambulatoire dédiée aux prises en charge de jour en médecine.</p>
            </div>
            <div className="ambu-card">
              <div className="num">02</div>
              <h3 className="h4">Chirurgie</h3>
              <p>Unité de chirurgie ambulatoire pour interventions du jour.</p>
            </div>
            <div className="ambu-card">
              <div className="num">03</div>
              <h3 className="h4">Chimiothérapie</h3>
              <p>HDJ chimiothérapie — 20 places, préparations cytotoxiques centralisées.</p>
            </div>
            <div className="ambu-card highlight">
              <div className="num">04</div>
              <h3 className="h4">Dialyse</h3>
              <p>Service dédié aux patients souffrant d'insuffisance rénale chronique.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Plateau technique */}
      <section className="section" style={{ background: "var(--chic-800)", color: "#fff" }}>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 18, color: "var(--accent)" }}>Plateaux techniques de pointe</div>
          <h2 className="h2" style={{ color: "#fff", maxWidth: "22ch" }}>
            Un équipement de référence <span style={{ color: "var(--accent)" }}>en Afrique de l'Ouest.</span>
          </h2>
          <p className="lead" style={{ marginTop: 18, color: "rgba(255,255,255,0.7)", maxWidth: "60ch" }}>
            L'établissement est doté d'un plateau technique avancé pour répondre aux besoins des soins spécialisés.
          </p>

          <div className="dark-grid" style={{ marginTop: 56 }}>
            <div className="cell">
              <span className="ic"><IconBeaker size={22} /></span>
              <h3>Biologie & anatomopathologie</h3>
              <p>Laboratoire centralisé et service d'anatomopathologie pour des diagnostics précis.</p>
            </div>
            <div className="cell">
              <span className="ic"><IconScan size={22} /></span>
              <h3>Imagerie médicale</h3>
              <p>Radiographie, IRM, scanner, échographie et mammographie.</p>
            </div>
            <div className="cell">
              <span className="ic"><IconBolt size={22} /></span>
              <h3>Radiothérapie & médecine nucléaire</h3>
              <p>Plateau intégré : radiothérapie, curiethérapie, médecine nucléaire — équipé d'un cyclotron.</p>
            </div>
            <div className="cell wide">
              <span className="ic"><IconActivity size={22} /></span>
              <h3>Bloc opératoire — 9 salles</h3>
              <p>Salles équipées des dernières technologies, avec éclairage naturel pour le confort des équipes :</p>
              <ul>
                <li>1 salle d'angiographie dédiée à la cardiologie interventionnelle</li>
                <li>1 salle pour la chirurgie cardiaque avec circulation extracorporelle (CEC)</li>
                <li>1 salle dédiée aux endoscopies digestives</li>
                <li>Équipements adaptés aux interventions cœlioscopiques</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Équipements de pointe — galerie */}
      <section className="section tight">
        <div className="container">
          <SectionHeader
            eyebrow="Équipements de pointe"
            title="Un parc technologique de référence."
            lead="Imagerie médicale dernière génération, radiothérapie de haute précision, laboratoire automatisé : le CHIC s'équipe pour soigner localement les pathologies les plus complexes." />
          
          <div className="equip-grid">
            <FadeUp>
              <article className="equip-card">
                <div className="ph"><img src="assets/photos/elekta.jpg" alt="Accélérateur linéaire Elekta Versa HD" /></div>
                <div className="caption">
                  <div className="tag">Radiothérapie</div>
                  <h4>Accélérateur Elekta Versa HD</h4>
                  <p>Radiothérapie guidée par l'image (IGRT), traitement haute précision.</p>
                </div>
              </article>
            </FadeUp>
            <FadeUp delay={80}>
              <article className="equip-card">
                <div className="ph"><img src="assets/photos/scanner.jpg" alt="Scanner Fujifilm Scenaria View" /></div>
                <div className="caption">
                  <div className="tag">Imagerie</div>
                  <h4>Scanner dernière génération</h4>
                  <p>TDM multi-coupes pour diagnostics rapides et précis.</p>
                </div>
              </article>
            </FadeUp>
            <FadeUp delay={160}>
              <article className="equip-card">
                <div className="ph"><img src="assets/photos/lab.jpg" alt="Laboratoire centralisé" /></div>
                <div className="caption">
                  <div className="tag">Laboratoire</div>
                  <h4>Laboratoire centralisé Cobas Pro</h4>
                  <p>Biochimie, hématologie, hormonologie et sérologies automatisées.</p>
                </div>
              </article>
            </FadeUp>
            <FadeUp delay={240}>
              <article className="equip-card">
                <div className="ph"><img src="assets/photos/pneumo.jpg" alt="Pléthysmographe pulmonaire" /></div>
                <div className="caption">
                  <div className="tag">Pneumologie</div>
                  <h4>Pléthysmographe pulmonaire</h4>
                  <p>Mesure complète de la fonction respiratoire.</p>
                </div>
              </article>
            </FadeUp>
            <FadeUp delay={320}>
              <article className="equip-card">
                <div className="ph"><img src="assets/photos/chimio.jpg" alt="HDJ chimiothérapie" /></div>
                <div className="caption">
                  <div className="tag">Oncologie</div>
                  <h4>HDJ chimiothérapie — 20 places</h4>
                  <p>Fauteuils ergonomiques, préparations cytotoxiques centralisées.</p>
                </div>
              </article>
            </FadeUp>
            <FadeUp delay={400}>
              <article className="equip-card">
                <div className="ph"><img src="assets/photos/corridor-signage.jpg" alt="Plateau de consultations" /></div>
                <div className="caption">
                  <div className="tag">Consultations</div>
                  <h4>Plateau de consultations & explorations</h4>
                  <p>Diagnostic rapide et prise en charge multidisciplinaire.</p>
                </div>
              </article>
            </FadeUp>
          </div>
        </div>
      </section>

      {/* Services hôteliers & logistiques */}
      <section className="section">
        <div className="container">
          <SectionHeader
            eyebrow="Services hôteliers & logistiques"
            title="Le bien-être des patients et du personnel, à chaque étage."
            lead="Le CHIC propose des services logistiques et hôteliers modernes et performants." />
          
          <div className="logi-grid">
            {[
            { t: "Blanchisserie", d: "Traitement du linge hospitalier et des tenues professionnelles.", ic: IconShield },
            { t: "Pharmacie hospitalière", d: "Dispensation des traitements, préparations cytotoxiques centralisées.", ic: IconPill },
            { t: "Restauration", d: "Espaces adaptés aux patients et aux équipes médicales.", ic: IconBookOpen },
            { t: "Stérilisation centralisée", d: "Unité dédiée pour garantir une asepsie irréprochable.", ic: IconBolt },
            { t: "Chambres confortables", d: "Conditions optimales pour une hospitalisation sereine.", ic: IconBuilding },
            { t: "Hélisurface", d: "Évacuations médicales d'urgence facilitées par voie aérienne.", ic: IconActivity }].
            map((s, i) => {
              const Icon = s.ic;
              return (
                <FadeUp key={s.t} delay={i * 50}>
                  <div className="logi-card">
                    <span className="ic"><Icon size={20} /></span>
                    <h4>{s.t}</h4>
                    <p>{s.d}</p>
                  </div>
                </FadeUp>);

            })}
          </div>
        </div>
      </section>
    </main>);

}

// ===================== ÉQUIPES & ORGANISATION =====================
function EquipesPage() {
  return (
    <main>
      <section className="page-hero">
        <div className="container">
          <Crumbs trail={[
          { label: "Accueil", href: "#/" },
          { label: "Connaître le CHIC", href: "#/connaitre/mission" },
          { label: "Équipes et organisation" }]
          } />
          <div className="eyebrow" style={{ marginTop: 16, marginBottom: 18 }}>Gouvernance · équipe de direction</div>
          <h1 className="h1" style={{ maxWidth: "22ch" }}>
            Une gouvernance structurée, <span className="italic-accent">une équipe pluridisciplinaire.</span>
          </h1>
          <p className="lead" style={{ marginTop: 22, maxWidth: "64ch" }}>
            Le CHIC repose sur une organisation structurée et une équipe de direction expérimentée,
            engagée à assurer un service de santé de qualité.
          </p>
        </div>
      </section>

      {/* Conseil d'administration */}
      <section className="section">
        <div className="container">
          <SectionHeader
            eyebrow="Conseil d'administration"
            title={<>Un conseil <span style={{ color: "var(--chic-400)" }}>au service de la stratégie.</span></>}
            lead="Le CHIC est doté d'un Conseil d'Administration présidé par le Ministre de la Santé. Ce conseil joue un rôle essentiel dans l'orientation stratégique de l'établissement." />
          
          <div className="board-list">
            {BOARD_MEMBERS.map((m, i) => {
              const [role, ...rest] = m.split(" — ");
              return (
                <FadeUp key={m} delay={i * 50}>
                  <article className="board-row">
                    <div className="idx">{String(i + 1).padStart(2, "0")}</div>
                    <div className="info">
                      <div className="name">{role}</div>
                      {rest.length > 0 && <div className="role">{rest.join(" — ")}</div>}
                    </div>
                  </article>
                </FadeUp>);

            })}
          </div>
        </div>
      </section>

      <hr className="rule" />

      {/* Direction */}
      <section className="section">
        <div className="container">
          <SectionHeader
            eyebrow="Équipe de direction"
            title={<>10 directions, <span style={{ color: "var(--chic-400)" }}>une expertise hospitalière confirmée.</span></>}
            lead="L'administration du CHIC est assurée par une équipe aux compétences complémentaires, ayant exercé dans des hôpitaux béninois et français." />
          
          <div className="leadership-grid">
            {LEADERSHIP.map((p, i) =>
            <FadeUp key={p.name} delay={i * 40}>
                <article className="leader-card">
                  <div className="avatar" aria-hidden="true">
                    {p.name.split(" ").filter((w) => w[0] && w[0] === w[0].toUpperCase() && !w.startsWith("(")).slice(0, 2).map((w) => w[0]).join("")}
                  </div>
                  <div className="info">
                    <div className="area">{p.area}</div>
                    <div className="name">{p.name}</div>
                    <div className="role">{p.role}</div>
                  </div>
                </article>
              </FadeUp>
            )}
          </div>
        </div>
      </section>

      {/* Hospitalo-universitaire */}
      <section className="section" style={{ background: "var(--chic-50)" }}>
        <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Hospitalo-universitaire</div>
            <h2 className="h2" style={{ marginBottom: 20 }}>
              Soigner, enseigner, <span style={{ color: "var(--chic-400)" }}>chercher.</span>
            </h2>
            <p className="lead">
              Le CHIC est un établissement hospitalo-universitaire à part entière. Notre personnel médical
              assure les missions de soin, de formation des internes et de recherche scientifique,
              en lien avec les facultés de médecine partenaires.
            </p>
          </div>
          <div style={{ aspectRatio: "4/3", borderRadius: "var(--r-lg)", overflow: "hidden", border: "1px solid var(--chic-100)" }}>
            <img src="assets/photos/walkway.jpg" alt="Architecture du CHIC" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
          </div>
        </div>
      </section>
    </main>);

}

window.MissionPage = MissionPage;
window.CentrePage = CentrePage;
window.EquipesPage = EquipesPage;