/* Approach screen — Camille Bardiau */
(function () {
  const NS = window.CamilleBardiauDesignSystem_92b58f;
  const { Button, Eyebrow, SectionHeading, Card, Divider } = NS;
  const Icon = (n, p) => window.CBKit.Icon(n, p);
  const D = window.CB_DATA;

  const Section = ({ children, bg }) => (
    <section style={{ background: bg || "transparent" }}>
      <div style={{ maxWidth: "var(--maxw)", margin: "0 auto", padding: "var(--section-y) var(--gutter)" }}>{children}</div>
    </section>
  );

  // Inject step animation keyframes once
  (function injectStepCSS(){
    if (typeof document === "undefined" || document.getElementById("cb-step-css")) return;
    var el = document.createElement("style");
    el.id = "cb-step-css";
    el.textContent = [
      "@keyframes cbStepIn{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}",
      "@keyframes cbLineGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}",
      ".cb-step-card{transition:box-shadow .25s,border-color .25s,background .2s;}",
      ".cb-step-card:hover{box-shadow:var(--shadow-sm)!important;border-color:var(--clay-soft)!important;}",
      ".cb-step-card.cb-step-active{border-color:var(--clay)!important;background:var(--cream)!important;box-shadow:0 4px 20px rgba(178,126,95,.13)!important;}",
      ".cb-step-num{transition:background .3s,border-color .3s,color .3s,box-shadow .3s;}",
      ".cb-step-num.cb-step-num-active{background:var(--clay)!important;border-color:var(--clay)!important;color:var(--on-dark)!important;box-shadow:0 4px 12px rgba(178,126,95,.35)!important;}",
      ".cb-step-line{transform-origin:top;transition:background .4s;}",
      ".cb-step-line.cb-line-active{background:var(--clay-soft)!important;}",
      ".cb-step-body{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1),opacity .35s;}",
      ".cb-step-body.cb-step-open{max-height:160px;opacity:1!important;}",
    ].join("");
    document.head.appendChild(el);
  })();

  function StepsSection() {
    const [active, setActive] = React.useState(null);
    const [hovered, setHovered] = React.useState(null);
    const [revealed, setRevealed] = React.useState([]);
    const rowRefs = React.useRef([]);

    const open = hovered !== null ? hovered : active;

    React.useEffect(() => {
      if (window.lucide) window.lucide.createIcons();
    }, [revealed]);

    React.useEffect(() => {
      const observers = [];
      D.pillars.forEach((_, i) => {
        const el = rowRefs.current[i];
        if (!el) return;
        const io = new IntersectionObserver(([entry]) => {
          if (entry.isIntersecting) {
            setTimeout(() => setRevealed(prev => prev.includes(i) ? prev : [...prev, i]), i * 100);
            io.disconnect();
          }
        }, { threshold: 0.15 });
        io.observe(el);
        observers.push(io);
      });
      return () => observers.forEach(o => o.disconnect());
    }, []);

    return (
      <div style={{ maxWidth: 840, margin: "44px auto 0", display: "flex", flexDirection: "column", gap: 0 }}>
        {D.pillars.map((p, i) => {
          const isOpen = open === i;
          const isRevealed = revealed.includes(i);
          return (
            <div key={p.title} ref={el => rowRefs.current[i] = el}
              style={{
                display: "flex", gap: 0, alignItems: "stretch",
                opacity: isRevealed ? 1 : 0,
                transform: isRevealed ? "none" : "translateX(-18px)",
                transition: "opacity .5s ease, transform .5s ease",
                transitionDelay: (i * 0.08) + "s",
                cursor: "pointer",
              }}
              onMouseEnter={() => setHovered(i)}
              onMouseLeave={() => setHovered(null)}
              onClick={() => setActive(active === i ? null : i)}>
              {/* Number + connector */}
              <div style={{ display: "flex", flexDirection: "column", alignItems: "center", width: 56, flexShrink: 0 }}>
                <div className={"cb-step-num" + (isOpen ? " cb-step-num-active" : "")} style={{
                  width: 44, height: 44, borderRadius: "50%",
                  background: isOpen ? "var(--clay)" : "var(--paper)",
                  border: "2px solid " + (isOpen ? "var(--clay)" : "var(--hairline)"),
                  color: isOpen ? "var(--on-dark)" : "var(--clay)",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  fontFamily: "var(--font-display)", fontSize: "1.22rem", fontWeight: 500,
                  zIndex: 1, position: "relative",
                }}>{i + 1}</div>
                {i < D.pillars.length - 1 && (
                  <div className={"cb-step-line" + (i < (open !== null ? open : -1) ? " cb-line-active" : "")}
                    style={{ flex: 1, width: 2, background: "var(--hairline)", margin: "4px 0", transformOrigin: "top", transform: isRevealed ? "scaleY(1)" : "scaleY(0)", transition: "transform .5s ease " + (i * 0.1 + 0.3) + "s, background .4s" }} />
                )}
              </div>
              {/* Card */}
              <div className={"cb-step-card" + (isOpen ? " cb-step-active" : "")} style={{
                flex: 1, background: "var(--paper)", borderRadius: "var(--radius-lg)",
                padding: "18px 22px", margin: "0 0 14px 12px",
                border: "1px solid var(--hairline)", boxShadow: "var(--shadow-xs)",
              }}>
                <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                  <span style={{ width: 34, height: 34, borderRadius: "var(--radius-sm)", background: isOpen ? "var(--clay-wash)" : "var(--cream)", color: "var(--clay-deep)", display: "flex", alignItems: "center", justifyContent: "center", transition: "background .3s", flexShrink: 0 }}>
                    {Icon(p.icon, { style: { width: 16, height: 16 } })}
                  </span>
                  <h3 style={{ fontFamily: "var(--font-display)", fontSize: "1.22rem", color: "var(--ink)", margin: 0, fontWeight: 500, lineHeight: 1.2, flex: 1 }}>{p.title}</h3>
                </div>
                <div style={{ paddingTop: 10 }}>
                  <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", lineHeight: 1.75, color: "var(--ink-soft)", margin: 0 }}>{p.desc}</p>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    );
  }

  function Approach({ onNavigate }) {
    return (
      <div>
        {/* Page header */}
        <section style={{ background: "var(--paper-tint)", borderBottom: "1px solid var(--hairline)" }}>
          <div style={{ maxWidth: "var(--maxw)", margin: "0 auto", padding: "clamp(48px,6vw,84px) var(--gutter)", textAlign: "center" }}>
            <SectionHeading align="center" eyebrow="L'approche"
              title={<>La kinésiologie — <em style={{ whiteSpace: "nowrap" }}>un dialogue avec le corps</em></>}
              intro="Une approche qui prend en compte le corps et l'esprit, étroitement liés. Votre corps a un message à vous faire passer." />
          </div>
        </section>

        {/* Story — real Camille copy */}
        <Section>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(28px,5vw,64px)", alignItems: "center" }} className="cb-split">
            <div>
              <Eyebrow style={{ whiteSpace: "nowrap" }}>Qui suis-je</Eyebrow>
              <h2 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-h2)", color: "var(--ink)", margin: "16px 0 0", fontWeight: 500, lineHeight: 1.15 }}>
                Je suis Camille Bardiau,<br /><em style={{ fontStyle: "italic", color: "var(--clay-deep)" }}>kinésiologue</em>
              </h2>
              <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-body)", lineHeight: 1.8, color: "var(--ink-soft)", marginTop: 18 }}>
                Très tôt, je me suis intéressée à l'humain. Pourquoi certaines personnes réagissent-elles de cette façon ? Pourquoi les mêmes schémas se répètent-ils ? Pourquoi certaines maladies, émotions ou difficultés apparaissent-elles à un moment précis de la vie ?
              </p>
              <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-body)", lineHeight: 1.8, color: "var(--ink-soft)", marginTop: 12 }}>
                Cette curiosité m'a naturellement amenée vers la kinésiologie, une approche qui considère que le corps, l'esprit et notre histoire sont intimement liés.
              </p>
              <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-body)", lineHeight: 1.8, color: "var(--ink-soft)", marginTop: 12 }}>
                Aujourd'hui, j'accompagne celles et ceux qui souhaitent mieux comprendre ce qu'ils vivent, dépasser certains blocages et retrouver davantage de liberté intérieure.
              </p>
              <div style={{ display: "flex", gap: 28, marginTop: 28, paddingTop: 20, borderTop: "1px solid var(--hairline)" }}>
                <div>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: "clamp(2.2rem,3.15vw,2.75rem)", color: "var(--clay-deep)" }}>Nîmes</div>
                  <div style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", color: "var(--ink-muted)", whiteSpace: "nowrap" }}>11 bis rue de Genève</div>
                </div>
                <div style={{ width: 1, background: "var(--hairline)" }} />
                <div>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: "clamp(2.2rem,3.15vw,2.75rem)", color: "var(--clay-deep)" }}>60 €</div>
                  <div style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", color: "var(--ink-muted)" }}>la séance</div>
                </div>
                <div style={{ width: 1, background: "var(--hairline)" }} />
                <div>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: "clamp(2.2rem,3.15vw,2.75rem)", color: "var(--clay-deep)" }}>≈ 1h</div>
                  <div style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", color: "var(--ink-muted)" }}>par séance</div>
                </div>
              </div>
            </div>

            {/* Real Camille portrait — reduced size per #25 */}
            <div style={{ borderRadius: "var(--radius-xl)", overflow: "hidden", aspectRatio: "4/5", background: "var(--cream)", position: "relative", maxWidth: "70%", margin: "0 auto" }}>
              <img src={D.photos.camille.src} alt={D.photos.camille.alt} width={D.photos.camille.width} height={D.photos.camille.height}
                style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "top center", display: "block" }} />

            </div>
          </div>
        </Section>

        {/* 5-step déroulement séance — #18 + #22 dynamic UI */}
        <Section bg="var(--cream)">
          <SectionHeading align="center" eyebrow="La méthode"
            title={<>Comment se déroule <em>une séance&nbsp;?</em></>}
            intro="Chaque séance suit un fil rassurant et personnalisé, à votre rythme." />
          <StepsSection />
          {D.pillarsNote && (
            <p style={{ textAlign: "center", marginTop: 20, fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", color: "var(--ink-muted)", fontStyle: "italic" }}>{D.pillarsNote}</p>
          )}
        </Section>

        {/* Quote */}
        <section style={{ padding: "var(--space-6) var(--gutter)" }}>
          <div style={{ maxWidth: 720, margin: "0 auto", textAlign: "center" }}>
            <Divider ornament="diamond" />
            <p style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: "clamp(1.22rem,2.05vw,1.68rem)", lineHeight: 1.45, color: "var(--ink-soft)", margin: "14px 0" }}>
              «&nbsp;Chaque être porte en lui une histoire que le mental ne dit pas toujours, mais que le corps sait murmurer à qui sait écouter.&nbsp;»
            </p>
            <Divider ornament="diamond" />
            <div style={{ marginTop: 24 }}>
              <Button variant="primary" size="md" as="a" href={D.brand.booking} target="_blank" rel="noopener">Réserver une séance</Button>
            </div>
          </div>
        </section>
      </div>
    );
  }

  window.CBScreens = window.CBScreens || {};
  window.CBScreens.Approach = Approach;
})();