/* global React, JOB_OFFERS, TENDERS */
const { useState: useState_op } = React;

// ===================== RECRUTEMENTS =====================
function RecrutementPage() {
  const [filter, setFilter] = useState_op("all");
  const filtered = filter === "all" ? JOB_OFFERS : JOB_OFFERS.filter((j) => j.contract === filter);

  return (
    <main>
      <section className="page-hero">
        <div className="container">
          <Crumbs trail={[
          { label: "Accueil", href: "#/" },
          { label: "Opportunités", href: "#/opportunites/recrutement" },
          { label: "Recrutements" }]
          } />
          <div className="eyebrow" style={{ marginTop: 16, marginBottom: 18 }}>Carrières · rejoindre le CHIC</div>
          <h1 className="h1" style={{ maxWidth: "22ch" }}>
            Construire l'hôpital <span className="italic-accent">de référence du Bénin.</span>
          </h1>
          <p className="lead" style={{ marginTop: 22, maxWidth: "62ch" }}>
            Le CHIC recrute des professionnels engagés pour relever un défi unique : développer
            un centre hospitalier de niveau international, au service du Bénin et de l'Afrique de l'Ouest.
          </p>
        </div>
      </section>

      <section className="section tight">
        <div className="container">
          <div className="offers-toolbar">
            <div className="filters" role="group">
              {[
              { id: "all", label: `Toutes (${JOB_OFFERS.length})` },
              { id: "CDI", label: "CDI" },
              { id: "CDD", label: "CDD" }].
              map((f) =>
              <button
                key={f.id}
                className={`fchip ${filter === f.id ? "active" : ""}`}
                onClick={() => setFilter(f.id)}>
                {f.label}</button>
              )}
            </div>
            <div className="tracker-search">
              <IconSearch size={16} />
              <input placeholder="Rechercher une offre…" aria-label="Rechercher" />
            </div>
          </div>

          <div className="offers-list">
            {filtered.map((j, i) =>
            <FadeUp key={j.ref} delay={i * 30}>
                <article className="offer-row">
                  <div className="meta">
                    <span className="ref">{j.ref}</span>
                    <span className="dot">·</span>
                    <span className="pole">{j.pole}</span>
                  </div>
                  <h3 className="h4">{j.title}</h3>
                  <div className="tags">
                    <span className="tag tag-contract">{j.contract}</span>
                    <span className="tag"><IconMap size={12} /> {j.location}</span>
                    <span className="tag tag-deadline"><IconClock size={12} /> Avant le {j.deadline}</span>
                  </div>
                  <a className="apply" href="#" onClick={(e) => e.preventDefault()}>
                    Candidater <IconArrowRight size={14} />
                  </a>
                </article>
              </FadeUp>
            )}
          </div>
          {filtered.length === 0 &&
          <div className="empty-state">
              <p>Aucune offre ne correspond aux filtres sélectionnés.</p>
            </div>
          }
        </div>
      </section>

      {/* Pourquoi nous rejoindre */}
      <section className="section" style={{ background: "var(--chic-50)" }}>
        <div className="container">
          <SectionHeader
            eyebrow="Pourquoi nous rejoindre"
            title={<>Un projet unique <span style={{ color: "var(--chic-400)" }}>en Afrique de l'Ouest.</span></>} />
          
          <div className="why-grid">
            {[
            { t: "Plateau technique de pointe", d: "IRM, scanner, accélérateurs linéaires Elekta, 9 salles opératoires." },
            { t: "Hospitalo-universitaire", d: "Soin, enseignement et recherche, en lien avec les facultés partenaires." },
            { t: "Équipes mixtes", d: "Expertise locale et internationale, encadrement par des professionnels chevronnés." },
            { t: "Formation continue", d: "Programmes de formation, participation aux journées scientifiques annuelles." }].
            map((b, i) =>
            <FadeUp key={b.t} delay={i * 60}>
                <div className="why-card">
                  <h4 className="h4">{b.t}</h4>
                  <p>{b.d}</p>
                </div>
              </FadeUp>
            )}
          </div>
        </div>
      </section>

      <section className="section tight">
        <div className="container">
          <div className="cta-band">
            <div>
              <div className="eyebrow" style={{ marginBottom: 12 }}>Candidature spontanée</div>
              <h3 className="h3">Aucune offre ne correspond ? Envoyez-nous votre candidature.</h3>
            </div>
            <div className="right">
              <a className="btn btn-outline btn-lg" href="mailto:rh@chichopital.bj">
                <IconMail size={14} /> rh@chichopital.bj
              </a>
              <a className="btn btn-primary btn-lg" href="#" onClick={(e) => e.preventDefault()}>
                Déposer une candidature <IconArrowRight size={14} />
              </a>
            </div>
          </div>
        </div>
      </section>
    </main>);

}

// ===================== APPELS D'OFFRES =====================
function TendersPage() {
  return (
    <main>
      <section className="page-hero">
        <div className="container">
          <Crumbs trail={[
          { label: "Accueil", href: "#/" },
          { label: "Opportunités", href: "#/opportunites/recrutement" },
          { label: "Appels d'offres" }]
          } />
          <div className="eyebrow" style={{ marginTop: 16, marginBottom: 18 }}>Marchés publics</div>
          <h1 className="h1" style={{ maxWidth: "22ch" }}>
            Appels d'offres <span className="italic-accent">en cours.</span>
          </h1>
          <p className="lead" style={{ marginTop: 22, maxWidth: "62ch" }}>
            Le CHIC publie ici l'ensemble de ses consultations en cours, conformément à la réglementation
            béninoise sur les marchés publics. Téléchargez le dossier de consultation pour chaque opération.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="tenders-table">
            <div className="th">
              <span>Référence</span>
              <span>Objet</span>
              <span>Type</span>
              <span>Date limite</span>
              <span>Statut</span>
              <span></span>
            </div>
            {TENDERS.map((t, i) =>
            <FadeUp key={t.ref} delay={i * 30}>
                <article className="tr">
                  <span className="ref">{t.ref}</span>
                  <span className="title">{t.title}</span>
                  <span className="type">{t.type}</span>
                  <span className="deadline">
                    <IconClock size={12} /> {t.deadline}
                  </span>
                  <span className={`status ${t.status === "En cours" ? "live" : "closed"}`}>
                    <span className="dot" />
                    {t.status}
                  </span>
                  <a className="dl" href="#" onClick={(e) => e.preventDefault()}>
                    <IconDownload size={14} /> Dossier
                  </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"><IconMail size={20} /></span>
              <div>
                <div className="lbl">Contact marchés</div>
                <div className="val">marches@chichopital.bj</div>
              </div>
            </div>
            <div className="qi-block">
              <span className="ic"><IconPhone size={20} /></span>
              <div>
                <div className="lbl">Direction des Services Économiques</div>
                <div className="val">+229 01 21 400 100</div>
              </div>
            </div>
            <div className="qi-block">
              <span className="ic"><IconBookOpen size={20} /></span>
              <div>
                <div className="lbl">Règlement</div>
                <div className="val">Code des marchés publics du Bénin</div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>);

}

window.RecrutementPage = RecrutementPage;
window.TendersPage = TendersPage;