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

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

  /* Inline Calendly widget — uses initInlineWidget API for reliable re-init */
  const CALENDLY_URL = "https://calendly.com/contact-camillebardiau/kinesiologie?hide_event_type_details=1&background_color=FBF8F3&text_color=3A332A&primary_color=B27E5F";

  function CalendlyWidget() {
    const ref = React.useRef(null);
    const [ready, setReady] = React.useState(false);

    React.useEffect(() => {
      if (!ref.current) return;
      const mount = () => {
        if (window.Calendly && ref.current) {
          window.Calendly.initInlineWidget({ url: CALENDLY_URL, parentElement: ref.current });
          setReady(true);
        }
      };
      // Script preloaded in <head> — just poll until Calendly is available
      if (window.Calendly) {
        mount();
      } else {
        const t = setInterval(() => {
          if (window.Calendly) { mount(); clearInterval(t); }
        }, 80);
        return () => clearInterval(t);
      }
    }, []);

    return (
      <div className="cb-cal-shell">
        {/* Warm skeleton — fades out once Calendly mounts */}
        <div style={{
          position: "absolute", inset: 0, borderRadius: "inherit",
          background: "var(--paper)", display: "flex", flexDirection: "column",
          alignItems: "center", justifyContent: "center", gap: 14,
          opacity: ready ? 0 : 1,
          transition: "opacity .5s ease",
          pointerEvents: ready ? "none" : "auto",
          zIndex: 1,
        }}>
          <img src="/assets/logo-monogram.png" alt="" style={{ height: 56, opacity: .55 }} />
          <div style={{ display: "flex", flexDirection: "column", gap: 10, width: "72%", maxWidth: 280 }}>
            {[1,0.85,0.7].map((w,i) => (
              <div key={i} style={{
                height: 14, borderRadius: 7,
                background: "var(--linen)",
                width: (w * 100) + "%",
                animation: "cbSkel 1.6s ease-in-out infinite",
                animationDelay: (i * 0.18) + "s",
              }} />
            ))}
          </div>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", color: "var(--ink-muted)", margin: 0 }}>Chargement du calendrier…</p>
        </div>
        <div ref={ref} className="cb-cal-container" style={{ width: "100%", height: "100%" }} />
      </div>
    );
  }

  /* ---- Live Google Reviews via Featurable ---- */
  function GoogleReviewsSection() {
    const widgetId = D.featurableWidgetId;
    const isConfigured = widgetId && widgetId !== 'YOUR_WIDGET_ID';

    React.useEffect(() => {
      if (!isConfigured) return;
      // Load Featurable embed script once
      if (!document.getElementById('featurable-script')) {
        const s = document.createElement('script');
        s.id = 'featurable-script';
        s.src = 'https://cdn.featurable.com/widget/v2/embed.js';
        s.defer = true;
        s.charset = 'UTF-8';
        document.body.appendChild(s);
      }
    }, [isConfigured]);

    return (
      <Section bg="var(--cream)">
        <div style={{ textAlign: "center", marginBottom: 18 }}>
          <Eyebrow line={false}>Avis Google</Eyebrow>
          <h2 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-h2)", fontWeight: 700, color: "var(--clay-deep)", margin: "8px 0 0" }}>
            Vos retours après séance
          </h2>
        </div>

        {isConfigured ? (
          /* Live widget — appears once Featurable script loads */
          <div id={"featurable-" + widgetId} data-featurable-async data-location-code="fr" />
        ) : (
          /* Setup placeholder */
          <div style={{ maxWidth: 680, margin: "0 auto", background: "var(--paper)", border: "1px dashed var(--sand-deep)", borderRadius: "var(--radius-lg)", padding: "var(--space-7)", textAlign: "center" }}>
            <div style={{ fontSize: 28, letterSpacing: 4, color: "#FBBC04", marginBottom: 14 }}>★★★★★</div>
            <h3 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-h4)", color: "var(--ink)", margin: "0 0 10px", fontWeight: 500 }}>
              Connectez vos vrais avis Google
            </h3>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", color: "var(--ink-soft)", lineHeight: 1.7, maxWidth: 480, margin: "0 auto 20px" }}>
              En 5 minutes, vos avis 5★ s'affichent ici en temps réel et se mettent à jour automatiquement.
            </p>
            <ol style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", color: "var(--ink-soft)", lineHeight: 2, textAlign: "left", maxWidth: 400, margin: "0 auto 20px", paddingLeft: 20 }}>
              <li>Créer un compte gratuit sur <a href="https://featurable.com" target="_blank" rel="noopener" style={{ color: "var(--clay-deep)" }}>featurable.com</a></li>
              <li>Créer un widget <strong>Google Reviews</strong> lié à votre fiche Google</li>
              <li>Filtrer sur 5 étoiles uniquement dans les réglages</li>
              <li>Copier votre <strong>Widget ID</strong> (dans le code d'intégration)</li>
              <li>Dans <code style={{ background: "var(--linen)", padding: "1px 6px", borderRadius: 4 }}>data.js</code>, remplacer <code style={{ background: "var(--linen)", padding: "1px 6px", borderRadius: 4 }}>YOUR_WIDGET_ID</code> par votre ID</li>
            </ol>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", color: "var(--ink-muted)", margin: 0 }}>
              Gratuit · Mise à jour automatique · Filtre 5★ · Quota d'affichage généreux
            </p>
          </div>
        )}
      </Section>
    );
  }

    function Home({ onNavigate }) {
    return (
      <div>
        {/* HERO — headline left, Calendly right (immediate booking, zero friction) */}
        <section style={{ background: "var(--paper-tint)", borderBottom: "1px solid var(--hairline)" }}>
          <div style={{ maxWidth: "var(--maxw)", margin: "0 auto", padding: "clamp(40px,5vw,72px) var(--gutter)", display: "grid", gridTemplateColumns: "1fr 1.5fr", gap: "clamp(28px,4vw,52px)", alignItems: "start" }} className="cb-hero">
            {/* Left: pitch */}
            <div style={{ paddingTop: 16 }}>
              <Eyebrow>Kinésiologue · Nîmes</Eyebrow>
              <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: "var(--text-h1)", lineHeight: 1.1, letterSpacing: "-0.01em", color: "var(--ink)", margin: "14px 0 0" }}>
                La kinésiologie<br />au service de<br /><em style={{ fontStyle: "italic", color: "var(--clay-deep)" }}>votre bien-être</em>
              </h1>
              <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-body)", lineHeight: 1.75, color: "var(--ink-soft)", maxWidth: 390, margin: "18px 0 0" }}>
                Je vous accompagne afin de libérer tout ce qui entrave votre équilibre : stress, anxiété, confiance en soi, troubles du sommeil, troubles digestifs, chocs traumatiques, tensions physiques, émotions refoulées, tristesse, colère… Votre corps a un message à vous faire passer.
              </p>

              <div style={{ display: "flex", flexDirection: "column", gap: 10, marginTop: 24 }}>
                {[
                  { icon: "clock", t: "Séance individuelle · 1h / 1h15" },
                  { icon: "map-pin", t: "11 bis rue de Genève, Nîmes" },
                  { icon: "calendar", t: "Vendredi & Samedi · 9h30–20h" },
                ].map(x => (
                  <div key={x.t} style={{ display: "flex", alignItems: "center", gap: 9, fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", color: "var(--ink-soft)" }}>
                    {Icon(x.icon, { style: { width: 15, height: 15, color: "var(--clay)", flexShrink: 0 } })}
                    {x.t}
                  </div>
                ))}
              </div>
              <div style={{ display: "flex", gap: 8, marginTop: 14, flexWrap: "wrap" }}>
                {["Adolescent", "Adulte", "Sportif(ve)"].map(tag => (
                  <span key={tag} style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", color: "var(--clay-deep)", background: "var(--linen)", padding: "3px 10px", borderRadius: "var(--radius-pill)", border: "1px solid var(--sand-deep)" }}>{tag}</span>
                ))}
              </div>

              <div style={{ marginTop: 24, paddingTop: 20, borderTop: "1px solid var(--hairline)" }}>
                <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", color: "var(--ink-soft)", margin: "0 0 8px", lineHeight: 1.6 }}>
                  👉 Sélectionnez le créneau qui vous convient.
                </p>
                <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", color: "var(--ink-muted)", margin: 0, lineHeight: 1.65 }}>
                  Si aucun créneau ne correspond à vos disponibilités, ou en cas de besoin urgent, vous pouvez me contacter directement au{" "}
                  <a href={`tel:${D.brand.phoneRaw}`} style={{ color: "var(--clay-deep)", fontWeight: 600, textDecoration: "none", whiteSpace: "nowrap" }}>{D.brand.phone}</a>.
                </p>
              </div>
            </div>

            {/* Right: Calendly widget */}
            <div style={{ background: "var(--paper)", borderRadius: "var(--radius-xl)", overflow: "hidden", boxShadow: "var(--shadow-md)", border: "1px solid var(--hairline)" }}>
              <CalendlyWidget />
            </div>
          </div>
        </section>

        {/* What is kinésiologie */}
        <Section>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(28px,5vw,64px)", alignItems: "center" }} className="cb-split">
            <div style={{ borderRadius: "var(--radius-xl)", aspectRatio: "3/4", overflow: "hidden", boxShadow: "var(--shadow-sm)" }}>
              <img src={D.photos.session.src} alt={D.photos.session.alt} width={D.photos.session.width} height={D.photos.session.height} style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "50% 76%", display: "block" }} />
            </div>
            <div>
              <SectionHeading
                eyebrow="La kinésiologie"
                title={<>Le corps sait.<br /><em>La kinésiologie permet de l'écouter.</em></>}
              />
              <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-body)", lineHeight: 1.8, color: "var(--ink-soft)", margin: "8px 0 0" }}>
                Le corps garde parfois la trace d'expériences, d'émotions ou de mécanismes d'adaptation qui continuent d'influencer notre façon de penser, de ressentir et d'agir.
              </p>
              <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-body)", lineHeight: 1.8, color: "var(--ink-soft)", margin: "10px 0 0" }}>
                Grâce au test musculaire, la kinésiologie permet d'explorer ces blocages afin de retrouver davantage de clarté, de sérénité et de liberté intérieure.
              </p>
              <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-body)", lineHeight: 1.8, color: "var(--ink-soft)", margin: "10px 0 0" }}>
                Son objectif n'est pas de vous dire quoi choisir, mais de vous rendre le choix : un choix moins influencé par les peurs, les blessures ou les croyances limitantes, et davantage aligné avec ce qui est juste pour vous.
              </p>
              <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", color: "var(--ink-muted)", margin: "12px 0 0", fontStyle: "italic", lineHeight: 1.6 }}>
                La kinésiologie est une approche de bien-être et ne se substitue pas à un suivi médical.
              </p>
              <div style={{ marginTop: 18, display: "flex", flexDirection: "column", gap: 9 }}>
                {D.benefits.map(t => (
                  <div key={t} style={{ display: "flex", alignItems: "flex-start", gap: 10, fontFamily: "var(--font-sans)", color: "var(--ink-soft)", fontSize: "var(--text-sm)", lineHeight: 1.5 }}>
                    <span style={{ color: "var(--clay)", display: "flex", marginTop: 3, flexShrink: 0 }}>{Icon("check", { style: { width: 15, height: 15 } })}</span>
                    {t}
                  </div>
                ))}
              </div>
              <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", color: "var(--ink-soft)", margin: "16px 0 0", fontStyle: "italic", lineHeight: 1.65, borderLeft: "2px solid var(--clay-soft)", paddingLeft: 12 }}>
                Dès la première séance, de nombreuses personnes décrivent une sensation de légèreté, comme un poids en moins.
              </p>
              <div style={{ marginTop: 22 }}>
                <Button variant="ghost" iconRight={Icon("arrow-right")} onClick={() => onNavigate("approach")}>En savoir plus sur l'approche</Button>
              </div>
            </div>
          </div>
        </Section>

        {/* Google Reviews — live Featurable embed */}
        <GoogleReviewsSection />

        {/* Secondary soins — subtle, quieter treatment */}
        <Section>
          <div style={{ maxWidth: 820, margin: "0 auto" }}>
            <Divider ornament="diamond" />
            <div style={{ marginTop: 16, marginBottom: 10, textAlign: "center" }}>
              <span style={{ fontFamily: "var(--font-label)", textTransform: "uppercase", letterSpacing: ".18em", fontSize: "var(--text-xs)", color: "var(--ink-muted)" }}>Autres soins disponibles</span>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }} className="cb-grid-2">
              {D.secondaryServices.map(s => (
                <Card key={s.title} surface="linen" pad="md" elevation="flat">
                  <div style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                    <span style={{ width: 40, height: 40, borderRadius: "var(--radius-md)", background: "var(--sand)", color: "var(--clay-soft)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                      {Icon(s.icon, { style: { width: 19, height: 19 } })}
                    </span>
                    <div>
                      <div style={{ fontFamily: "var(--font-display)", fontSize: "1.22rem", color: "var(--ink)", marginBottom: 5 }}>{s.title}</div>
                      <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", color: "var(--ink-soft)", margin: "0 0 8px", lineHeight: 1.55 }}>{s.desc}</p>
                      <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                        {s.options.map(o => (
                          <span key={o} style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", color: "var(--clay-deep)", background: "var(--linen)", padding: "4px 12px", borderRadius: "var(--radius-pill)", fontWeight: 600, border: "1px solid var(--sand-deep)" }}>{o}</span>
                        ))}
                      </div>
                    </div>
                  </div>
                </Card>
              ))}
            </div>
            <p style={{ textAlign: "center", marginTop: 16, fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", color: "var(--ink-muted)" }}>
              Pour les massages et soins LaHoChi, <a href={`mailto:${D.brand.email}`} style={{ color: "var(--clay-deep)" }}>contactez-moi directement</a>.
            </p>
          </div>
        </Section>

        {/* CTA band */}
        <section style={{ background: "#91997A", color: "var(--on-dark)" }}>
          <div style={{ maxWidth: "var(--maxw)", margin: "0 auto", padding: "clamp(24px,3.5vw,40px) var(--gutter)", textAlign: "center" }}>
            <p style={{ fontFamily: "var(--font-label)", textTransform: "uppercase", letterSpacing: ".2em", fontSize: "var(--text-xs)", color: "rgba(246,239,227,.7)", margin: "0 0 16px" }}>Premier pas</p>
            <h2 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-h1)", color: "var(--on-dark)", margin: "0 0 14px", fontWeight: 500 }}>
              Prêt(e) à vous offrir ce temps&nbsp;?
            </h2>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-lead)", color: "rgba(246,239,227,.82)", maxWidth: 480, margin: "0 auto 30px", lineHeight: 1.7 }}>
              Réservez en ligne dès maintenant. Un premier pas suffit parfois pour amorcer un réel changement.
            </p>
            <Button variant="primary" size="lg" as="a" href={D.brand.booking} target="_blank" rel="noopener">Réserver une séance</Button>
          </div>
        </section>
      </div>
    );
  }

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