/* global React, SERVICES_DATA, SERVICES_STATS, POLE_ICONS */
const { useState: useState_h } = React;

// Pôles config for Home cards
const HOME_POLES = [
{ id: "Urgences & Réanimation", title: "Urgences & Réanimation", desc: "Réanimation, soins critiques, anesthésie", meta: "42 lits · UHCD + Réa" },
{ id: "Cardio-Métabolisme", title: "Cardio-Métabolisme", desc: "Cardiologie, endocrinologie, USIC", meta: "62 lits · USIC 12 lits" },
{ id: "Digestif Médico-Chirurgical", title: "Digestif Médico-Chirurgical", desc: "Hépato-gastro, chirurgie digestive", meta: "50 lits" },
{ id: "Cardiovasc., Thoracique, Tête & Cou", title: "Cardiovasc., Thoracique, T&C", desc: "ORL, ophtalmo, vasculaire, maxillo", meta: "50 lits" },
{ id: "Néphro-Urologique", title: "Néphro-Urologique", desc: "Néphrologie, urologie, dialyse", meta: "50 lits · 28 dialyse" },
{ id: "Oncologie", title: "Oncologie", desc: "Chimio, radiothérapie, curiethérapie", meta: "50 lits · 20 HDJ" },
{ id: "Médecine Interne", title: "Médecine Interne", desc: "Rhumato, pneumo, neurologie, diététique", meta: "" },
{ id: "Locomoteur & Neurochirurgical", title: "Locomoteur & Neurochirurgical", desc: "Traumato, orthopédie, neurochirurgie", meta: "50 lits" }];


function HomePage({ tweaks }) {
  const stats = SERVICES_STATS;

  // Featured: 6 open services for the home preview
  const featured = SERVICES_DATA.filter((s) => s.status === "open").slice(0, 6);

  const CinematicHero =
  <section className="hero-cine">
      <div className="bg">
        <img src="assets/photos/aerial-wide.jpg" alt="Centre Hospitalier International de Calavi" />
      </div>
      <div className="container">
        <div className="content">
          <FadeUp>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Centre Hospitalier International de Calavi · Bénin</div>
          </FadeUp>
          <FadeUp delay={120}>
            <h1 className="h1">
              Un hôpital de référence
              <br />
              <span className="italic-accent" style={{ color: "var(--accent)" }}>au service de l’Afrique.</span>
            </h1>
          </FadeUp>
          <FadeUp delay={220}>
            <p className="lead">
              Au sommet du 4<sup>e</sup> niveau de la pyramide sanitaire nationale, le CHIC associe innovation,
              expertise et hospitalité pour offrir des soins de référence en Afrique de l’Ouest. Ouverture progressive depuis juin 2025.
            </p>
          </FadeUp>
          <FadeUp delay={320}>
            <div className="hero-actions">
              <a href="#/rdv" className="btn btn-primary btn-on-dark btn-lg">
                Prendre rendez-vous <IconArrowRight size={14} />
              </a>
              <a href="#/services" className="btn btn-outline btn-on-dark btn-lg">
                Découvrir nos services <IconArrowRight size={14} />
              </a>
            </div>
          </FadeUp>
        </div>
      </div>
    </section>;


  const SplitHero =
  <section className="hero">
      <div className="hero-split">
        <div className="text">
          <FadeUp><div className="hero-eyebrow eyebrow">Centre Hospitalier International de Calavi · Bénin</div></FadeUp>
          <FadeUp delay={100}>
            <h1 className="h1">
              Un hôpital de référence{" "}
              <span className="italic-accent">au service de l’Afrique.</span>
            </h1>
          </FadeUp>
          <FadeUp delay={200}>
            <p className="lead">
              Au sommet du 4<sup>e</sup> niveau de la pyramide sanitaire nationale, le CHIC associe innovation, expertise et hospitalité pour offrir des soins de référence en Afrique de l’Ouest.
            </p>
          </FadeUp>
          <FadeUp delay={280}>
            <div className="hero-actions">
              <a href="#/rdv" className="btn btn-primary btn-lg">Prendre rendez-vous <IconArrowRight size={14} /></a>
              <a href="#/services" className="btn btn-outline btn-lg">Découvrir nos services <IconArrowRight size={14} /></a>
            </div>
          </FadeUp>
        </div>
        <div className="visual">
          <img src="assets/photos/facade-signage.jpg" alt="Façade emblématique du CHIC" />
        </div>
      </div>
      <div className="hero-stats">
        <div className="cell"><Stat value="434" label="Lits & places (cible)" /></div>
        <div className="cell"><Stat value="8" label="Pôles médicaux" /></div>
        <div className="cell"><Stat value="18" label="Spécialités médicales et chirurgicales" /></div>
      </div>
    </section>;


  return (
    <main>
      {tweaks.hero === "cinematic" ? CinematicHero : SplitHero}

      {/* ===== 1. Présentation institutionnelle ===== */}
      <section className="section">
        <div className="container">
          <FadeUp>
            <div className="eyebrow" style={{ marginBottom: 20 }}>L’institution</div>
            <h2 className="h2" style={{ maxWidth: "22ch" }}>
              Un centre hospitalier de référence,{" "}
              <span style={{ color: "var(--chic-400)" }}>au sommet de la pyramide sanitaire nationale.</span>
            </h2>
          </FadeUp>
          <div style={{
            display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 28,
            marginTop: 40
          }} className="vision-grid">
            <FadeUp>
              <div style={{ paddingTop: 24, borderTop: "1px solid var(--chic-100)" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 18 }}>
                  <span style={{ width: 38, height: 38, borderRadius: 8, background: "var(--chic-50)", color: "var(--chic-800)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}><IconGlobe size={18} /></span>
                  <div className="eyebrow">Vision</div>
                </div>
                <h3 className="h3" style={{ marginBottom: 12 }}>Une destination de référence pour les soins de haute qualité.</h3>
                <p style={{ color: "var(--chic-400)" }}>
                  Faire du Bénin un pôle d’excellence médicale en Afrique de l’Ouest, capable de prendre en charge les pathologies les plus complexes localement.
                </p>
              </div>
            </FadeUp>
            <FadeUp delay={120}>
              <div style={{ paddingTop: 24, borderTop: "1px solid var(--chic-100)" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 18 }}>
                  <span style={{ width: 38, height: 38, borderRadius: 8, background: "var(--chic-50)", color: "var(--chic-800)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}><IconHand size={18} /></span>
                  <div className="eyebrow">Mission</div>
                </div>
                <h3 className="h3" style={{ marginBottom: 12 }}>Prendre en charge les pathologies complexes, localement.</h3>
                <p style={{ color: "var(--chic-400)" }}>
                  Limiter les évacuations sanitaires à l’étranger en offrant un plateau technique de pointe et des équipes hospitalo-universitaires hautement qualifiées.
                </p>
              </div>
            </FadeUp>
            <FadeUp delay={220}>
              <div style={{ paddingTop: 24, borderTop: "1px solid var(--chic-100)" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 18 }}>
                  <span style={{ width: 38, height: 38, borderRadius: 8, background: "var(--chic-50)", color: "var(--chic-800)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}><IconStar size={18} /></span>
                  <div className="eyebrow">Ambition</div>
                </div>
                <h3 className="h3" style={{ marginBottom: 12 }}>Renforcer l’offre de soins en Afrique de l’Ouest.</h3>
                <p style={{ color: "var(--chic-400)" }}>
                  Associer innovation, recherche et formation pour bâtir un centre hospitalo-universitaire de premier plan, ouvert sur la sous-région.
                </p>
              </div>
            </FadeUp>
          </div>
        </div>
      </section>

      <hr className="rule" />

      {/* ===== 2. Live tracker preview ===== */}
      <section className="section tight">
        <div className="container">
          <SectionHeader
            eyebrow="Services disponibles · mis à jour en temps réel"
            title={<>Suivez l’ouverture de nos services,<br /><span style={{ color: "var(--chic-400)" }}>jour après jour.</span></>}
            lead="Notre établissement ouvre ses services de manière échelonnée. Découvrez ce qui est déjà disponible et ce qui arrive prochainement."
            right={
            <a href="#/services" className="btn btn-outline">
                Tous les services <IconArrowRight size={14} />
              </a>
            } />
          

          <FadeUp>
            <div className="tracker-grid">
              {featured.map((s) =>
              <SpecialtyCard key={s.name} s={s} />
              )}
            </div>
          </FadeUp>

          <div style={{ textAlign: "center", marginTop: 32 }}>
            <a href="#/services" className="btn btn-primary btn-lg">
              Explorer tous les services <IconArrowRight size={14} />
            </a>
          </div>
        </div>
      </section>

      <hr className="rule" />

      {/* ===== 3. Pôles médicaux ===== */}
      <section className="section">
        <div className="container">
          <SectionHeader
            eyebrow="Nos pôles médicaux"
            title={<>8 pôles, un même engagement :<br /><span style={{ color: "var(--chic-400)" }}>la qualité des soins.</span></>}
            lead="Le CHIC est structuré autour de huit pôles médicaux majeurs, complétés par un plateau technique transverse et le Check-up Center ambulatoire." />
          
          <div className="poles-grid">
            {HOME_POLES.map((p, i) => {
              const Icon = POLE_ICONS[p.id] || IconHeart;
              return (
                <FadeUp key={p.id} delay={i * 60}>
                  <a className="pole-card" href="#/services">
                    <span className="icon"><Icon size={22} /></span>
                    <div className="title">{p.title}</div>
                    <div className="desc">{p.desc}</div>
                    <div className="meta">{p.meta}</div>
                  </a>
                </FadeUp>);

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

      {/* ===== 4. Plateau technique & innovation ===== */}
      <section className="section" style={{ background: "var(--chic-50)" }}>
        <div className="container">
          <SectionHeader
            eyebrow="Plateau technique & innovation"
            title="Une infrastructure unique en Afrique de l’Ouest."
            lead="Pour offrir des soins de qualité supérieure, le CHIC s’appuie sur des équipements de pointe et des technologies rares dans la région." />
          
          <div className="innov-grid" style={{ borderRadius: "var(--r-lg)", overflow: "hidden", border: "1px solid var(--chic-100)", background: "#fff" }}>
            <div className="cell">
              <div className="num">01</div>
              <span style={{ width: 36, height: 36, borderRadius: 8, background: "var(--chic-50)", color: "var(--chic-800)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}><IconScan size={20} /></span>
              <h4 className="h4">Imagerie médicale</h4>
              <p>Radiographie, échographie, scanner, IRM, coloscanner. Mammographie à venir.</p>
            </div>
            <div className="cell">
              <div className="num">02</div>
              <span style={{ width: 36, height: 36, borderRadius: 8, background: "var(--chic-50)", color: "var(--chic-800)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}><IconBeaker size={20} /></span>
              <h4 className="h4">Laboratoire centralisé</h4>
              <p>Biologie médicale & anatomopathologie. Hématologie, biochimie, sérologies, hormonologie, marqueurs tumoraux.</p>
            </div>
            <div className="cell">
              <div className="num">03</div>
              <span style={{ width: 36, height: 36, borderRadius: 8, background: "var(--chic-50)", color: "var(--chic-800)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}><IconBolt size={20} /></span>
              <h4 className="h4">Radiothérapie & oncologie</h4>
              <p>Accélérateurs linéaires Elekta Versa HD avec IGRT. TEP-TDM et cyclotron en cours de déploiement.</p>
            </div>
            <div className="cell">
              <div className="num">04</div>
              <span style={{ width: 36, height: 36, borderRadius: 8, background: "var(--chic-50)", color: "var(--chic-800)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}><IconActivity size={20} /></span>
              <h4 className="h4">9 salles opératoires</h4>
              <p>Bloc multidisciplinaire pour interventions cardiaques, digestives, ophtalmologiques et thoraciques.</p>
            </div>
            <div className="cell">
              <div className="num">05</div>
              <span style={{ width: 36, height: 36, borderRadius: 8, background: "var(--chic-50)", color: "var(--chic-800)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}><IconDroplet size={20} /></span>
              <h4 className="h4">Dialyse · 28 places</h4>
              <p>Unité dédiée à l’insuffisance rénale chronique, équipement de dernière génération.</p>
            </div>
            <div className="cell">
              <div className="num">06</div>
              <span style={{ width: 36, height: 36, borderRadius: 8, background: "var(--chic-50)", color: "var(--chic-800)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}><IconHeart size={20} /></span>
              <h4 className="h4">HDJ chimiothérapie</h4>
              <p>20 places, préparation cytotoxique centralisée, chambres implantables, RCP.</p>
            </div>
            <div className="cell">
              <div className="num">07</div>
              <span style={{ width: 36, height: 36, borderRadius: 8, background: "var(--chic-50)", color: "var(--chic-800)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}><IconPill size={20} /></span>
              <h4 className="h4">Pharmacie hospitalière</h4>
              <p>Préparation cytotoxique centralisée, dispensation des traitements hospitaliers.</p>
            </div>
            <div className="cell">
              <div className="num">08</div>
              <span style={{ width: 36, height: 36, borderRadius: 8, background: "var(--chic-50)", color: "var(--chic-800)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}><IconShield size={20} /></span>
              <h4 className="h4">Check-up Center</h4>
              <p>7 bilans clé-en-main : standard, cardiovasculaire, cancer, diabète, métabolique, infectieux, alcool/tabac.</p>
            </div>
          </div>
        </div>
      </section>

      {/* ===== 5. Hôpital universitaire ===== */}
      <section className="section">
        <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "center" }}>
          <FadeUp>
            <div className="eyebrow" style={{ marginBottom: 16 }}>Hôpital 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, en partie hospitalo-universitaire, assure les missions de soin, de formation des internes et de recherche scientifique.
            </p>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, marginTop: 28 }}>
              <div>
                <div className="stat-value" style={{ fontSize: 36 }}><Counter to={9} suffix="" /></div>
                <div className="stat-label">Salles opératoires multidisciplinaires</div>
              </div>
              <div>
                <div className="stat-value" style={{ fontSize: 36 }}>
                  <Counter to={3} suffix="" />
                </div>
                <div className="stat-label">Missions universitaires majeures</div>
              </div>
            </div>
            <div style={{ marginTop: 24 }}>
              <a href="#/connaitre/mission" className="btn btn-outline">
                En savoir plus <IconArrowRight size={14} />
              </a>
            </div>
          </FadeUp>
          <FadeUp delay={150}>
            <div style={{ aspectRatio: "4/3", borderRadius: "var(--r-lg)", overflow: "hidden", position: "relative", border: "1px solid var(--chic-100)" }}>
              <img src="assets/photos/architecture-detail.jpg" alt="Plateau technique du CHIC" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
              <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 50%, rgba(20,50,60,0.6))" }} />
              <div style={{ position: "absolute", left: 24, bottom: 24, color: "#fff" }}>
                <div className="eyebrow" style={{ color: "rgba(255,255,255,0.7)", marginBottom: 8 }}>Recherche · Formation · Coopération</div>
                <h3 className="h3">Un plateau technique au service de la science.</h3>
              </div>
            </div>
          </FadeUp>
        </div>
      </section>

      {/* ===== 5b. Vidéos ===== */}
      <VideosSection />

      {/* ===== 7. Actualités ===== */}
      <section className="section tight">
        <div className="container">
          <SectionHeader
            eyebrow="Actualités"
            title="Restez informés"
            lead="Ouvertures de services, conférences scientifiques, campagnes de prévention et événements officiels."
            right={<a href="#" className="btn btn-outline" onClick={(e) => e.preventDefault()}>Toutes les actualités <IconArrowRight size={14} /></a>} />
          
          <div className="news-grid">
            <article className="news-card">
              <div className="visual news-img"><img src="assets/photos/elekta.jpg" alt="Radiothérapie Elekta Versa HD" /></div>
              <div className="body">
                <div className="tag">Ouverture · Oncologie</div>
                <h3>La radiothérapie ouvre ses portes au CHIC.</h3>
                <div className="date">14 mai 2026</div>
              </div>
            </article>
            <article className="news-card">
              <div className="visual news-img"><img src="assets/photos/facade-signage.jpg" alt="Façade du CHIC" /></div>
              <div className="body">
                <div className="tag">Événement · Recherche</div>
                <h3>1ères Journées Scientifiques du CHIC : 5, 6 et 7 juin 2026.</h3>
                <div className="date">27 mars 2026</div>
              </div>
            </article>
            <article className="news-card">
              <div className="visual news-img"><img src="assets/photos/chimio.jpg" alt="Unité de soins" /></div>
              <div className="body">
                <div className="tag">Article · Néphrologie</div>
                <h3>Hémodialyse : l’unité de 28 places monte en charge.</h3>
                <div className="date">10 juillet 2025</div>
              </div>
            </article>
          </div>
        </div>
      </section>

      {/* ===== 8. CTA finale ===== */}
      <section className="section tight">
        <div className="container">
          <div className="cta-band">
            <div>
              <div className="eyebrow" style={{ marginBottom: 12 }}>Prêt à prendre rendez-vous ?</div>
              <h3 className="h3">Le CHIC fonctionne exclusivement sur rendez-vous.</h3>
              <p className="lead" style={{ marginTop: 12, fontSize: 15 }}>
                Consultations réglées par Mobile Money à la prise de RDV. Lundi au vendredi, 8h–17h.
              </p>
            </div>
            <div className="right">
              <a className="btn btn-outline btn-lg" href="tel:+22901214000111">
                <IconPhone size={14} /> +229 01 21 400 111
              </a>
              <a className="btn btn-primary btn-lg" href="#/rdv">
                Réserver en ligne <IconArrowRight size={14} />
              </a>
            </div>
          </div>
        </div>
      </section>
    </main>);

}

window.HomePage = HomePage;

// ===== Videos section component =====
const VIDEOS = [
{
  tag: "Présentation institutionnelle",
  title: "Le CHIC en 2 minutes — visite guidée",
  duration: "2:14",
  label: "Visite cinématique du CHIC"
},
{
  tag: "Plateau technique",
  title: "Radiothérapie : Elekta Versa HD et IGRT au service des patients",
  duration: "3:42",
  label: "Bloc radiothérapie · Elekta Versa HD"
},
{
  tag: "Parcours patient",
  title: "Une journée à l'hôpital de jour de chimiothérapie",
  duration: "4:08",
  label: "HDJ chimiothérapie · 20 places"
},
{
  tag: "Recherche & formation",
  title: "1ères Journées Scientifiques du CHIC — temps forts",
  duration: "5:21",
  label: "JSCHIC · journées scientifiques"
}];


function VideosSection() {
  const [active, setActive] = useState_h(0);
  const main = VIDEOS[active];
  return (
    <section className="section tight">
      <div className="container">
        <SectionHeader
          eyebrow="Vidéos · découvrir le CHIC"
          title={<>Voir le CHIC en images,<br /><span style={{ color: "var(--chic-400)" }}>au plus près de ses équipes et de ses patients.</span></>}
          lead="Visites institutionnelles, plateaux techniques, parcours patient et événements scientifiques."
          right={<a href="#" className="btn btn-outline" onClick={(e) => e.preventDefault()}>Toutes les vidéos <IconArrowRight size={14} /></a>} />
        
        <div className="video-section">
          <FadeUp>
            <div className="video-main" onClick={(e) => e.preventDefault()} role="button" aria-label={`Lire : ${main.title}`}>
              <div className="thumb placeholder">[ {main.label} ]</div>
              <span className="duration">{main.duration}</span>
              <span className="play-btn" aria-hidden="true"><span className="play-tri" /></span>
              <div className="info">
                <div className="tag">{main.tag}</div>
                <h3>{main.title}</h3>
              </div>
            </div>
          </FadeUp>
          <div className="video-side">
            {VIDEOS.map((v, i) => i === active ? null :
            <button
              key={i}
              className={`video-thumb ${i === active ? "active" : ""}`}
              onClick={() => setActive(i)}>
              
                <div className="thumb-mini">
                  <span className="play-mini"><span className="play-tri sm" /></span>
                </div>
                <div className="meta">
                  <div className="tag">{v.tag}</div>
                  <h4>{v.title}</h4>
                  <span className="duration"><IconClock size={11} /> {v.duration}</span>
                </div>
              </button>
            )}
          </div>
        </div>
      </div>
    </section>);

}