/* global React, CHECKUPS */
const { useState: useState_ck } = React;

function CheckupPage() {
  const [activeId, setActiveId] = useState_ck(CHECKUPS[0].id);
  const active = CHECKUPS.find((c) => c.id === activeId) || CHECKUPS[0];

  const journey = [
  {
    step: "Avant le bilan",
    title: "Préparation personnalisée",
    bullets: [
    "Prise de contact avec un Patient Manager (accompagnateur administratif)",
    "Auto-questionnaire et entretien médical préalable",
    "Médecin coordonnateur dédié"],

    icon: IconCalendar
  },
  {
    step: "Pendant le bilan",
    title: "Une expérience confort",
    bullets: [
    "Accueil dans un espace dédié",
    "Collation et déjeuner offerts",
    "Accompagnement par un agent dédié"],

    icon: IconStar
  },
  {
    step: "Après le bilan",
    title: "Synthèse & suivi",
    bullets: [
    "Consultation de synthèse avec compte rendu écrit",
    "Recommandations personnalisées",
    "Appel téléphonique de suivi à J+15"],

    icon: IconCheck
  }];


  return (
    <main>
      {/* Hero */}
      <section className="page-hero checkup-hero">
        <div className="container">
          <Crumbs trail={[
          { label: "Accueil", href: "#/" },
          { label: "Nos spécialités", href: "#/services" },
          { label: "Bilan de santé" }]
          } />
          <div className="eyebrow" style={{ marginTop: 16, marginBottom: 18 }}>Check-up Center · CHIC</div>
          <h1 className="h1" style={{ maxWidth: "20ch" }}>
            Préservez votre <span className="italic-accent">capital-santé.</span>
          </h1>
          <p className="lead" style={{ marginTop: 22, maxWidth: "62ch" }}>
            Adossé à un plateau technique de pointe (IRM, scanner dernière génération, échographie,
            explorations fonctionnelles cardiologiques et pneumologiques), le Check-up Center met
            à votre disposition une expertise multidisciplinaire et des équipements de référence au Bénin.
          </p>
          <div className="hero-actions" style={{ marginTop: 32 }}>
            <a href="#/rdv" className="btn btn-primary btn-lg">
              Prendre rendez-vous <IconArrowRight size={14} />
            </a>
            <a href="#" className="btn btn-outline btn-lg" onClick={(e) => e.preventDefault()}>
              <IconDownload size={14} /> Télécharger le guide
            </a>
          </div>
        </div>
      </section>

      {/* Promesse */}
      <section className="section">
        <div className="container">
          <SectionHeader
            eyebrow="Votre parcours de bilan inclut"
            title={<>9 garanties, <span style={{ color: "var(--chic-400)" }}>pour un bilan d'exception.</span></>} />
          
          <div className="promise-grid">
            {[
            "Un médecin référent dédié",
            "Une préparation personnalisée (auto-questionnaire et entretien médical préalable)",
            "Une organisation optimisée en un même lieu (rapidité, ponctualité, qualité de l'accueil)",
            "Une réponse médicale appuyée sur toutes les spécialités du CHIC",
            "Un bilan biologique pertinent : examens de base et biomarqueurs spécialisés",
            "Des formules conformes aux bonnes pratiques (cardiovasculaire, cancers, métabolique)",
            "Des résultats immédiats communiqués de façon sécurisée",
            "La possibilité de mise en place immédiate d'une réponse thérapeutique",
            "Un suivi personnalisé par consultation ou nouveau bilan"].
            map((p, i) =>
            <FadeUp key={i} delay={i * 40}>
                <div className="promise-card">
                  <span className="num">{String(i + 1).padStart(2, "0")}</span>
                  <p>{p}</p>
                </div>
              </FadeUp>
            )}
          </div>
        </div>
      </section>

      <hr className="rule" />

      {/* Bilans proposés */}
      <section className="section">
        <div className="container">
          <SectionHeader
            eyebrow="Les bilans proposés"
            title={<>7 formules de bilan, <span style={{ color: "var(--chic-400)" }}>une réponse adaptée à chaque profil.</span></>}
            lead="Sélectionnez un bilan pour découvrir le public concerné, les examens inclus et l'objectif principal." />
          
          <div className="checkup-explorer">
            <aside className="ck-tabs" role="tablist">
              {CHECKUPS.map((c) =>
              <button
                key={c.id}
                role="tab"
                className={`ck-tab ${c.id === activeId ? "active" : ""}`}
                onClick={() => setActiveId(c.id)}
                aria-selected={c.id === activeId}>
                
                  <span className="label">{c.label}</span>
                  <IconChevRight size={14} className="chev" />
                </button>
              )}
            </aside>

            <div className="ck-panel">
              <div className="ck-head">
                <div>
                  <div className="eyebrow">Bilan sélectionné</div>
                  <h3 className="h2" style={{ marginTop: 8 }}>{active.label}</h3>
                </div>
                <div className="ck-duration">
                  <IconClock size={14} /> {active.duration}
                </div>
              </div>

              <div className="ck-body">
                <div className="ck-col">
                  <div className="ck-lbl">Pour qui ?</div>
                  <p>{active.audience}</p>
                </div>
                <div className="ck-col">
                  <div className="ck-lbl">Objectif principal</div>
                  <p>{active.objective}</p>
                </div>
              </div>

              <div className="ck-exams">
                <div className="ck-lbl">Examens & analyses</div>
                <ul>
                  {active.exams.map((ex, i) =>
                  <li key={i}><IconCheck size={14} /> {ex}</li>
                  )}
                </ul>
              </div>

              <div className="ck-cta">
                <a className="btn btn-primary" href="#/rdv">
                  Réserver ce bilan <IconArrowRight size={14} />
                </a>
                <a className="btn btn-ghost" href="tel:+22901214000111">
                  <IconPhone size={14} /> +229 01 21 400 111
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Expérience patient */}
      <section className="section" style={{ background: "var(--chic-800)", color: "#fff" }}>
        <div className="container">
          <div className="eyebrow" style={{ color: "var(--accent)", marginBottom: 18 }}>Une expérience patient unique</div>
          <h2 className="h2" style={{ color: "#fff", maxWidth: "24ch" }}>
            Un accompagnement <span style={{ color: "var(--accent)" }}>de bout en bout.</span>
          </h2>

          <div className="exp-grid" style={{ marginTop: 56 }}>
            {journey.map((j, i) => {
              const Icon = j.icon;
              return (
                <article key={i} className="exp-card">
                  <div className="hd">
                    <span className="ic"><Icon size={20} /></span>
                    <span className="step">{j.step}</span>
                  </div>
                  <h3>{j.title}</h3>
                  <ul>
                    {j.bullets.map((b, k) => <li key={k}>{b}</li>)}
                  </ul>
                </article>);

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

      {/* FAQ */}
      <section className="section">
        <div className="container">
          <SectionHeader
            eyebrow="FAQ · vos questions sur le Check-up Center"
            title="Tout ce que vous devez savoir avant votre bilan." />
          
          <div className="faq-list">
            {[
            {
              q: "Combien de temps dure un bilan ?",
              a: "La durée varie selon le type de bilan : de quelques heures pour un bilan standard à une journée pour un bilan complet."
            },
            {
              q: "À quelle fréquence dois-je faire un bilan de santé ?",
              a: "Il est recommandé d'effectuer un check-up complet tous les 1 à 3 ans selon l'âge, les antécédents et le mode de vie."
            },
            {
              q: "Comment prendre rendez-vous pour un bilan ?",
              a: "Il vous suffit d'appeler le +229 01 21 400 111 ou d'écrire à checkupcenter@chichopital.bj. Notre équipe vous accompagnera dans le choix du créneau et les préparatifs nécessaires."
            },
            {
              q: "Quel est le prix d'un bilan de santé ?",
              a: "Les tarifs varient selon le type de bilan choisi. Pour connaître les prix en détail, veuillez contacter notre équipe au +229 01 21 400 111."
            }].
            map((f, i) => <FaqItem key={i} q={f.q} a={f.a} />)}
          </div>
        </div>
      </section>

      {/* Contact */}
      <section className="section tight" style={{ background: "var(--chic-50)" }}>
        <div className="container">
          <div className="contact-band">
            <div>
              <div className="eyebrow" style={{ marginBottom: 12 }}>Adresses</div>
              <h3 className="h3" style={{ marginBottom: 12 }}>Check-up Center — CHIC</h3>
              <p style={{ color: "var(--chic-700)" }}>
                Quartier Aïtchédji, Abomey-Calavi, Bénin — 18 km de Cotonou
              </p>
            </div>
            <div className="contact-stack">
              <a href="tel:+22901214000111" className="contact-item">
                <span className="ic"><IconPhone size={18} /></span>
                <div><small>Téléphone</small><b>+229 01 21 400 111</b></div>
              </a>
              <a href="mailto:checkupcenter@chichopital.bj" className="contact-item">
                <span className="ic"><IconMail size={18} /></span>
                <div><small>E-mail</small><b>checkupcenter@chichopital.bj</b></div>
              </a>
            </div>
          </div>
        </div>
      </section>
    </main>);

}

function FaqItem({ q, a }) {
  const [open, setOpen] = useState_ck(false);
  return (
    <article className={`faq-item ${open ? "open" : ""}`}>
      <button className="faq-q" onClick={() => setOpen((o) => !o)} aria-expanded={open}>
        <span>{q}</span>
        <span className="faq-ic"><IconArrowDown size={14} /></span>
      </button>
      {open && <div className="faq-a"><p>{a}</p></div>}
    </article>);

}

window.CheckupPage = CheckupPage;