/* Services screen — Camille Bardiau */
(function () {
  const NS = window.CamilleBardiauDesignSystem_92b58f;
  const { Button, Eyebrow, SectionHeading, Accordion, 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>
  );

  function Services({ onNavigate }) {
    return (
      <div>
        <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="Les séances"
              title={<>Un accompagnement <em>sur mesure</em></>}
              intro="Chaque séance est pensée pour vous — votre demande, votre rythme, votre histoire." />
          </div>
        </section>

        {/* Kinésiologie — PRIMARY, prominent */}
        <Section>
          <div style={{ display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: "clamp(28px,5vw,64px)", alignItems: "center" }} className="cb-split">
            <div>
              <Eyebrow>Soin principal</Eyebrow>
              <h2 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-h2)", color: "var(--ink)", margin: "14px 0 0", fontWeight: 500, lineHeight: 1.15 }}>
                Séance de<br /><em style={{ fontStyle: "italic", color: "var(--clay-deep)" }}>kinésiologie</em>
              </h2>
              <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-body)", lineHeight: 1.8, color: "var(--ink-soft)", marginTop: 16, maxWidth: 460 }}>
                Grâce au test musculaire, nous explorons ensemble ce qui peut aujourd'hui freiner votre élan de vie : stress, émotions, croyances limitantes, schémas répétitifs ou tensions physiques. La kinésiologie permet de retrouver davantage de compréhension, de sérénité et de liberté intérieure pour faire des choix moins guidés par les peurs et davantage alignés avec soi-même.
              </p>
              <div style={{ display: "flex", gap: 24, marginTop: 24, flexWrap: "wrap" }}>
                {[
                  { icon: "clock", t: "1h / 1h15" },
                  { icon: "map-pin", t: "Cabinet uniquement" },
                  { icon: "calendar", t: "Sur rendez-vous" },
                ].map(x => (
                  <div key={x.t} style={{ display: "flex", alignItems: "center", gap: 8, fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", color: "var(--ink-muted)" }}>
                    {Icon(x.icon, { style: { width: 16, height: 16, color: "var(--clay-soft)" } })}
                    {x.t}
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 28, display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
                <Button variant="primary" size="lg" as="a" href={D.brand.booking} target="_blank" rel="noopener">
                  {Icon("calendar", { style: { width: 17, height: 17 } })}
                  Prendre rendez-vous
                </Button>
                <Button variant="ghost" iconRight={Icon("arrow-right")} onClick={() => onNavigate("approach")}>
                  L'approche
                </Button>
              </div>
            </div>

            {/* Photo */}
            <div style={{ borderRadius: "var(--radius-xl)", overflow: "hidden", aspectRatio: "4/5", background: "var(--cream)" }}>
              <img src={D.photos.portrait.src} alt={D.photos.portrait.alt} width={D.photos.portrait.width} height={D.photos.portrait.height}
                style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
            </div>
          </div>

          {/* Practical info */}
          <div style={{ marginTop: 28 }}>
            <Card surface="linen" pad="lg" elevation="flat">
              <div style={{ display: "grid", gridTemplateColumns: "repeat(2,1fr)", gap: 24 }} className="cb-grid-3">
                {[
                  { icon: "map-pin", t: "Au cabinet", d: "11 bis rue de Genève, Nîmes. Un lieu chaleureux, dédié au bien-être." },
                  { icon: "credit-card", t: "Tarif", d: "60 € la séance. Réservation en ligne via Calendly. Si besoin urgent, contactez directement." },
                ].map(x => (
                  <div key={x.t} style={{ display: "flex", gap: 14 }}>
                    <span style={{ width: 42, height: 42, flex: "none", borderRadius: "var(--radius-md)", background: "var(--paper)", color: "var(--clay)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                      {Icon(x.icon, { style: { width: 19, height: 19 } })}
                    </span>
                    <div>
                      <div style={{ fontFamily: "var(--font-display)", fontSize: "1.22rem", color: "var(--ink)" }}>{x.t}</div>
                      <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", color: "var(--ink-soft)", margin: "4px 0 0", lineHeight: 1.6 }}>{x.d}</p>
                    </div>
                  </div>
                ))}
              </div>
            </Card>
          </div>
        </Section>

        {/* Secondary soins — much quieter, understated */}
        <Section bg="var(--cream)">
          <div style={{ maxWidth: 820, margin: "0 auto" }}>
            <div style={{ textAlign: "center", marginBottom: 28 }}>
              <Divider ornament="dot" />
              <span style={{ display: "inline-block", marginTop: 20, fontFamily: "var(--font-label)", textTransform: "uppercase", letterSpacing: ".18em", fontSize: "var(--text-eyebrow)", color: "var(--ink-muted)", whiteSpace: "nowrap" }}>
                Autres soins proposés
              </span>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }} className="cb-grid-2">
              {D.secondaryServices.map(s => (
                <Card key={s.title} surface="paper" pad="md" elevation="flat">
                  <div style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                    <span style={{ width: 40, height: 40, borderRadius: "50%", background: "var(--sand)", color: "var(--clay-soft)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                      {Icon(s.icon, { style: { width: 18, height: 18 } })}
                    </span>
                    <div>
                      <div style={{ fontFamily: "var(--font-display)", fontSize: "1.22rem", color: "var(--ink)", marginBottom: 4 }}>{s.title}</div>
                      <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", color: "var(--ink-soft)", margin: "0 0 8px", lineHeight: 1.55 }}>{s.desc}</p>
                      <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
                        {s.options.map(o => (
                          <span key={o} style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", color: "var(--ink-muted)", background: "var(--linen)", padding: "3px 10px", borderRadius: "var(--radius-pill)" }}>{o}</span>
                        ))}
                      </div>
                    </div>
                  </div>
                </Card>
              ))}
            </div>
            <p style={{ textAlign: "center", marginTop: 14, fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", color: "var(--ink-muted)" }}>
              Pour ces soins, <a href={`mailto:${D.brand.email}`} style={{ color: "var(--clay-deep)" }}>contactez-moi directement</a> — pas de réservation en ligne.
            </p>
          </div>
        </Section>

        {/* FAQ */}
        <Section>
          <div style={{ display: "grid", gridTemplateColumns: "0.8fr 1.2fr", gap: "clamp(28px,5vw,72px)", alignItems: "start" }} className="cb-split">
            <div>
              <SectionHeading eyebrow="Questions" title={<>Je vous <em>réponds</em></>}
                intro="Quelques réponses pour aborder votre première séance l'esprit tranquille." />
              <div style={{ marginTop: 24 }}>
                <Button variant="outline" onClick={() => onNavigate("contact")}>Une autre question ?</Button>
              </div>
            </div>
            <Accordion defaultOpen={[0]} items={D.faq} />
          </div>
        </Section>
      </div>
    );
  }

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