// Booking + Footer
const CAL_ORIGIN = "https://app.cal.eu";
const CAL_LINK = "pulse/audit";
const CAL_NAMESPACE = "audit";

function Booking() {
  const leftRef = useReveal();
  const rightRef = useReveal();

  return (
    <section id="booking" data-screen-label="06 Booking" className="section" style={{ position: "relative", overflow: "hidden" }}>
      <div style={{
        position: "absolute",
        top: "8%", right: "-10%",
        width: 600, height: 600,
        background: "radial-gradient(circle, var(--accent-glow), transparent 65%)",
        opacity: 0.4,
        pointerEvents: "none",
      }} />

      <div className="container" style={{ position: "relative" }}>
        <div className="booking-grid" style={{ display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.05fr)", gap: 46, alignItems: "start" }}>
          <div ref={leftRef} className="reveal" style={{ display: "flex", flexDirection: "column", gap: 18, minWidth: 0 }}>
            <span className="eyebrow">/ Discutons de votre projet</span>
            <h2 className="t-display-lg" style={{ margin: 0, textWrap: "balance" }}>
              Discutons de votre projet.
            </h2>
            <p className="t-body-lg" style={{ margin: 0, maxWidth: 500 }}>
              Un échange de 30 minutes pour discuter de votre activité et identifier les domaines où l'IA peut vraiment vous faire gagner du temps et de la croissance.
            </p>

            <ul style={{ listStyle: "none", padding: 0, margin: "8px 0 0", display: "flex", flexDirection: "column", gap: 14 }}>
              {[
                "Comprendre votre entreprise et vos enjeux",
                "Identifier les bons leviers pour intégrer l'IA",
                "Recevoir une estimation sur-mesure (budget et délai)",
                "Audit gratuit et sans engagement",
              ].map((b, i) => (
                <li key={i} style={{ display: "flex", alignItems: "center", gap: 12, color: "var(--body)" }}>
                  <span style={{
                    width: 18, height: 18, borderRadius: 9999,
                    background: "color-mix(in oklab, var(--accent) 20%, transparent)",
                    border: "1px solid var(--accent)",
                    display: "grid", placeItems: "center",
                    flexShrink: 0,
                  }}>
                    <svg width="9" height="9" viewBox="0 0 12 12" fill="none">
                      <path d="M2 6.5 5 9l5-6" stroke="var(--accent)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                  </span>
                  <span style={{ fontSize: 15 }}>{b}</span>
                </li>
              ))}
            </ul>

          </div>

          {/* Right — Cal.com inline embed */}
          <div ref={rightRef} className="reveal cal-reveal" style={{
            transitionDelay: "150ms",
            minHeight: 480,
            minWidth: 0,
          }}>
            <CalEmbed origin={CAL_ORIGIN} calLink={CAL_LINK} namespace={CAL_NAMESPACE} />
          </div>
        </div>

        <style>{`
          @media (max-width: 880px) {
            .booking-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 36px !important; }
          }
          .cal-reveal,
          .cal-reveal.in {
            transform: none !important;
          }
          .cal-reveal {
            transition:
              opacity 980ms var(--ease-reveal) 120ms !important;
          }
          .cal-embed-body {
            overflow: visible;
          }
          .cal-embed-card {
            width: min(100%, 640px);
          }
          @media (max-width: 600px) {
            .cal-embed-card {
              width: calc(100% - 12px);
              margin: 0 auto;
            }
            .cal-embed-host { min-height: 560px !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

// ── Cal.com inline embed ────────────────────────────────────────
function CalEmbed({ origin, calLink, namespace }) {
  const embedId = "my-cal-inline-audit";

  React.useEffect(() => {
    const selector = `#${embedId}`;
    const host = origin.replace(/\/$/, "");

    bootstrapCalEmbed(`${host}/embed/embed.js`);

    window.Cal("init", namespace, { origin: host });
    window.Cal.ns[namespace]("inline", {
      elementOrSelector: selector,
      config: {
        layout: "month_view",
        useSlotsViewOnSmallScreen: true,
        "ui.autoscroll": false,
        theme: "dark",
      },
      calLink,
    });
    window.Cal.ns[namespace]("ui", {
      theme: "dark",
      hideEventTypeDetails: false,
      layout: "month_view",
      "ui.autoscroll": false,
    });

    return () => {
      const el = document.querySelector(selector);
      if (el) el.innerHTML = "";
    };
  }, [origin, calLink, namespace]);

  return (
    <div className="cal-embed-card" style={{
      background: "var(--canvas-card)",
      border: "1px solid var(--hairline)",
      borderRadius: "var(--radius-sm)",
      overflow: "hidden",
      minHeight: 480,
    }}>
      <div className="cal-embed-body">
        <div
          id={embedId}
          className="cal-embed-host"
          style={{
            width: "100%",
            minHeight: 620,
            overflow: "visible",
          }}
        />
      </div>
    </div>
  );
}

function bootstrapCalEmbed(src) {
  (function (C, A, L) {
    const p = function (a, ar) { a.q.push(ar); };
    const d = C.document;
    C.Cal = C.Cal || function () {
      const cal = C.Cal;
      const ar = arguments;
      if (!cal.loaded) {
        cal.ns = {};
        cal.q = cal.q || [];
        const script = d.createElement("script");
        script.src = A;
        script.async = true;
        d.head.appendChild(script);
        cal.loaded = true;
      }
      if (ar[0] === L) {
        const api = function () { p(api, arguments); };
        const namespace = ar[1];
        api.q = api.q || [];
        if (typeof namespace === "string") {
          cal.ns[namespace] = cal.ns[namespace] || api;
          p(cal.ns[namespace], ar);
          p(cal, ["initNamespace", namespace]);
        } else {
          p(cal, ar);
        }
        return;
      }
      p(cal, ar);
    };
  })(window, src, "init");
}

// ── Footer ──────────────────────────────────────────────────────
function Footer() {
  return (
    <footer data-screen-label="07 Footer" style={{
      borderTop: "1px solid var(--hairline)",
      paddingTop: 48,
      paddingBottom: 28,
      background: "var(--canvas)",
    }}>
      <div className="container">
        <div className="footer-grid" style={{ display: "grid", gridTemplateColumns: "1fr", gap: 32, marginBottom: 40 }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <PulseLogo size={26} />
            </div>
            <p style={{ margin: 0, color: "var(--body)", fontSize: 14, maxWidth: 320, lineHeight: 1.55 }}>
              Nous déployons des agents et automatisations sur-mesure pour TPE, PME, ETI et grands groupes.
            </p>
            <div style={{ display: "flex", gap: 8, marginTop: 8 }}>
              <a href="#" aria-label="Instagram" style={{
                width: 36, height: 36, borderRadius: 9999,
                border: "1px solid var(--hairline-strong)",
                display: "grid", placeItems: "center",
                color: "var(--body)",
                transition: "color 0.15s, border-color 0.15s",
              }}
                onMouseEnter={(e) => { e.currentTarget.style.color = "var(--ink)"; e.currentTarget.style.borderColor = "var(--accent)"; }}
                onMouseLeave={(e) => { e.currentTarget.style.color = "var(--body)"; e.currentTarget.style.borderColor = "var(--hairline-strong)"; }}
              >
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="2" y="2" width="20" height="20" rx="5"/>
                  <circle cx="12" cy="12" r="4.5"/>
                  <circle cx="17.5" cy="6.5" r="1" fill="currentColor"/>
                </svg>
              </a>
            </div>
          </div>
        </div>

        <div style={{
          paddingTop: 24,
          borderTop: "1px solid var(--hairline)",
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          gap: 16,
          flexWrap: "wrap",
        }}>
          <span className="t-mono-sm" style={{ color: "var(--body-mid)" }}>© 2026 PULSE · TOUS DROITS RÉSERVÉS</span>
        </div>

        <style>{`
          @media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr !important; } }
          @media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr !important; } }
        `}</style>
      </div>
    </footer>
  );
}

function FooterCol({ title, links }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
      <span className="t-mono-sm" style={{ color: "var(--body-mid)" }}>{title.toUpperCase()}</span>
      <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 10 }}>
        {links.map((l, i) => (
          <li key={i}>
            <a href="#" style={{ color: "var(--body)", fontSize: 14, transition: "color 0.15s" }}
              onMouseEnter={(e) => e.currentTarget.style.color = "var(--ink)"}
              onMouseLeave={(e) => e.currentTarget.style.color = "var(--body)"}
            >{l}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

Object.assign(window, { Booking, Footer });