/* global React */

// ===================== PARCOURS CONSULTATION =====================
function ParcoursPage() {
  const steps = [
    {
      n: "01",
      title: "Accueil & orientation",
      body: "À votre arrivée, un agent d'accueil vous orientera vers le bureau des admissions, puis vers le service médical concerné.",
      icon: IconMap,
    },
    {
      n: "02",
      title: "Admission",
      body: "Au bureau des admissions, un dossier administratif est constitué à partir des informations fournies et un justificatif de prise en charge vous est remis.",
      icon: IconBookOpen,
    },
    {
      n: "03",
      title: "Étiquettes d'identification",
      body: "Des étiquettes nominatives — nom, prénom, date de naissance, numéro de dossier unique — sont remises pour garantir la sécurité et la traçabilité tout au long du parcours.",
      icon: IconShield,
    },
    {
      n: "04",
      title: "Facturation & tarifs",
      body: "Le règlement des actes médicaux s'effectue avant la consultation ou les soins, sauf indication contraire. Les tarifs sont affichés sur place et communiqués à la prise de rendez-vous.",
      icon: IconPill,
    },
    {
      n: "05",
      title: "Consultation médicale",
      body: "Recueil des documents par la secrétaire médicale, prise des constantes par l'infirmier, consultation par le médecin et programmation éventuelle d'examens complémentaires ou d'un suivi.",
      icon: IconStethoscope,
    },
    {
      n: "06",
      title: "Clôture de la visite",
      body: "Le médecin vous remet votre compte rendu de consultation. Pensez à récupérer vos documents personnels avant de quitter l'établissement.",
      icon: IconCheck,
    },
  ];

  return (
    <main>
      <section className="page-hero">
        <div className="container">
          <Crumbs trail={[
            { label: "Accueil", href: "#/" },
            { label: "Venir au CHIC", href: "#/rdv" },
            { label: "Parcours consultation" },
          ]} />
          <div className="eyebrow" style={{ marginTop: 16, marginBottom: 18 }}>Votre parcours de soins</div>
          <h1 className="h1" style={{ maxWidth: "22ch" }}>
            De l'accueil à la sortie, <span className="italic-accent">étape par étape.</span>
          </h1>
          <p className="lead" style={{ marginTop: 22, maxWidth: "62ch" }}>
            Pour faciliter votre venue au CHIC, voici le déroulement type d'une consultation,
            de l'accueil aux remises de comptes rendus.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="journey">
            {steps.map((s, i) => {
              const Icon = s.icon;
              return (
                <FadeUp key={s.n} delay={i * 80}>
                  <article className="journey-step">
                    <div className="rail">
                      <span className="dot" />
                      {i < steps.length - 1 && <span className="line" />}
                    </div>
                    <div className="card">
                      <div className="hd">
                        <span className="num">{s.n}</span>
                        <span className="ic"><Icon size={18} /></span>
                      </div>
                      <h3 className="h3">{s.title}</h3>
                      <p>{s.body}</p>
                    </div>
                  </article>
                </FadeUp>
              );
            })}
          </div>
        </div>
      </section>

      <section className="section tight">
        <div className="container">
          <div className="cta-band">
            <div>
              <div className="eyebrow" style={{ marginBottom: 12 }}>Prêt·e à prendre rendez-vous ?</div>
              <h3 className="h3">Réservez votre consultation en quelques étapes.</h3>
            </div>
            <div className="right">
              <a className="btn btn-outline btn-lg" href="#/venir/horaires">Horaires & accès <IconArrowRight size={14} /></a>
              <a className="btn btn-primary btn-lg" href="#/rdv">Prendre RDV <IconArrowRight size={14} /></a>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

// ===================== HORAIRES & ACCÈS =====================
function HorairesPage() {
  return (
    <main>
      <section className="page-hero">
        <div className="container">
          <Crumbs trail={[
            { label: "Accueil", href: "#/" },
            { label: "Venir au CHIC", href: "#/rdv" },
            { label: "Horaires et accès" },
          ]} />
          <div className="eyebrow" style={{ marginTop: 16, marginBottom: 18 }}>Pratique · venir au CHIC</div>
          <h1 className="h1" style={{ maxWidth: "22ch" }}>
            Horaires d'ouverture <span className="italic-accent">& plan d'accès.</span>
          </h1>
        </div>
      </section>

      {/* Horaires */}
      <section className="section">
        <div className="container">
          <div className="hours-grid">
            <FadeUp>
              <div className="hours-card">
                <div className="eyebrow" style={{ marginBottom: 18 }}>Horaires d'ouverture</div>
                <div className="hours-time">
                  <span className="big">08h00 – 17h00</span>
                  <span className="sub">Du lundi au vendredi</span>
                </div>
                <p style={{ marginTop: 24, color: "var(--chic-400)" }}>
                  Les services médicaux fonctionnent selon ces horaires pour les consultations,
                  examens et activités administratives.
                </p>
                <div className="hours-divider" />
                <div className="contact-rows">
                  <div className="row">
                    <span className="lbl"><IconPhone size={14} /> Standard</span>
                    <span className="val">+229 01 21 400 100</span>
                  </div>
                  <div className="row">
                    <span className="lbl"><IconCalendar size={14} /> Prise de RDV</span>
                    <span className="val">+229 01 21 400 111</span>
                  </div>
                  <div className="row">
                    <span className="lbl"><IconMail size={14} /> E-mail</span>
                    <span className="val">contact@chichopital.bj</span>
                  </div>
                </div>
              </div>
            </FadeUp>
            <FadeUp delay={120}>
              <div className="map-card" aria-label="Plan d'accès">
                <div className="map-placeholder">
                  <img src="assets/photos/aerial-day.jpg" alt="Vue aérienne du CHIC" />
                  <div className="map-label">
                    <small>CHIC · Centre Hospitalier International de Calavi</small>
                    <span>Quartier Aïtchédji, Abomey-Calavi</span>
                  </div>
                </div>
                <div className="map-footer">
                  <span>18 km de Cotonou · en face du Tribunal de première instance</span>
                  <a className="btn btn-outline btn-sm" href="#" onClick={e => e.preventDefault()}>
                    <IconDownload size={14} /> Plan du site (PDF)
                  </a>
                </div>
              </div>
            </FadeUp>
          </div>
        </div>
      </section>

      <hr className="rule" />

      {/* Accès au site */}
      <section className="section tight">
        <div className="container">
          <div className="access-band">
            <div className="alert-card">
              <div className="alert-ic"><IconAlert size={20} /></div>
              <div>
                <div className="eyebrow" style={{ marginBottom: 8, color: "var(--soon)" }}>À noter</div>
                <p>
                  L'accès au CHIC se fait par le <b>portail principal</b>, situé en face du Tribunal
                  de première instance de Calavi. Des agents sont présents sur place pour vous orienter
                  vers l'accueil.
                </p>
              </div>
            </div>
          </div>

          <div className="info-grid" style={{ marginTop: 56 }}>
            <FadeUp>
              <div className="info-card">
                <span className="ic"><IconUser size={20} /></span>
                <h4 className="h4">Service d'accueil</h4>
                <p>Un agent d'accueil vous guidera dès votre arrivée, sous l'apatam du hall principal.</p>
              </div>
            </FadeUp>
            <FadeUp delay={80}>
              <div className="info-card">
                <span className="ic"><IconBuilding size={20} /></span>
                <h4 className="h4">Stationnement</h4>
                <p>Des places de stationnement sont disponibles aux abords de l'établissement.</p>
              </div>
            </FadeUp>
            <FadeUp delay={160}>
              <div className="info-card">
                <span className="ic"><IconMap size={20} /></span>
                <h4 className="h4">Transports en commun</h4>
                <p>Les transports en commun desservent la zone ; consultez les itinéraires locaux pour plus de détails.</p>
              </div>
            </FadeUp>
          </div>

          <p style={{ marginTop: 48, color: "var(--chic-400)", textAlign: "center" }}>
            Pour toute information complémentaire : <b style={{ color: "var(--ink)" }}>+229 01 21 400 100</b> (appel local)
          </p>
        </div>
      </section>
    </main>
  );
}

// ===================== MODALITÉS D'ADMISSION =====================
function AdmissionPage() {
  return (
    <main>
      <section className="page-hero">
        <div className="container">
          <Crumbs trail={[
            { label: "Accueil", href: "#/" },
            { label: "Venir au CHIC", href: "#/rdv" },
            { label: "Modalités d'admission" },
          ]} />
          <div className="eyebrow" style={{ marginTop: 16, marginBottom: 18 }}>Comment être pris·e en charge</div>
          <h1 className="h1" style={{ maxWidth: "20ch" }}>
            Modalités <span className="italic-accent">d'admission.</span>
          </h1>
          <p className="lead" style={{ marginTop: 22, maxWidth: "60ch" }}>
            Deux cas de figure sont possibles pour accéder aux soins du Centre Hospitalier International de Calavi.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="admission-grid">
            <FadeUp>
              <article className="admission-card">
                <div className="hd">
                  <span className="num">01</span>
                  <span className="tag">Accès direct</span>
                </div>
                <h3 className="h3">Vous prenez rendez-vous directement.</h3>
                <ul className="rich-list">
                  <li>
                    Tout patient peut consulter directement au CHIC, muni d'une prescription médicale
                    ou d'un courrier d'adressage pour les actes techniques (imagerie, explorations
                    fonctionnelles, etc.), en suivant les modalités précisées dans la rubrique
                    « Prise de rendez-vous ».
                  </li>
                  <li>
                    Les soins doivent être <b>payés à l'avance</b>, sauf si le patient est couvert par
                    une assurance ou une mutuelle conventionnée avec le CHIC, qui peut alors prendre
                    en charge tout ou partie des frais.
                  </li>
                </ul>
                <a className="btn btn-primary" href="#/rdv" style={{ marginTop: 24 }}>
                  Prendre rendez-vous <IconArrowRight size={14} />
                </a>
              </article>
            </FadeUp>

            <FadeUp delay={120}>
              <article className="admission-card">
                <div className="hd">
                  <span className="num">02</span>
                  <span className="tag">Référencement CNHU</span>
                </div>
                <h3 className="h3">Vous êtes orienté·e par le CNHU.</h3>
                <ul className="rich-list">
                  <li>
                    Le CHIC accueille des patients dans le cadre du dispositif national
                    d'évacuation sanitaire interne.
                  </li>
                  <li>
                    Ces patients — notamment les <b>agents permanents de l'État</b> — sont orientés
                    vers le CHIC par le CNHU, selon les procédures définies par le Ministère
                    de la Santé pour les soins de recours.
                  </li>
                </ul>
                <a className="btn btn-outline" href="#/venir/parcours" style={{ marginTop: 24 }}>
                  Découvrir le parcours <IconArrowRight size={14} />
                </a>
              </article>
            </FadeUp>
          </div>
        </div>
      </section>

      <section className="section tight" style={{ background: "var(--chic-50)" }}>
        <div className="container">
          <div className="quick-info">
            <div className="qi-block">
              <span className="ic"><IconPhone size={20} /></span>
              <div>
                <div className="lbl">Prise de RDV</div>
                <div className="val">+229 01 21 400 111</div>
                <small>lundi au vendredi · 8h–20h</small>
              </div>
            </div>
            <div className="qi-block">
              <span className="ic"><IconMail size={20} /></span>
              <div>
                <div className="lbl">Contact</div>
                <div className="val">contact@chichopital.bj</div>
              </div>
            </div>
            <div className="qi-block">
              <span className="ic"><IconMap size={20} /></span>
              <div>
                <div className="lbl">Adresse</div>
                <div className="val">Quartier Aïtchédji, Abomey-Calavi</div>
                <small>18 km de Cotonou</small>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

window.ParcoursPage = ParcoursPage;
window.HorairesPage = HorairesPage;
window.AdmissionPage = AdmissionPage;