/* Willow Creek — Book a time: embeds the WC Sober Cal booking page.
   Set window.WC_CAL_URL (e.g. in index.html) to point at the deployed calendar;
   falls back to the local dev server. */
const { Icon: KIcon, useParallax: KuseParallax, Reveal: KReveal, Container: KContainer, Eyebrow: KEyebrow } = window.WC;
const { useState: kUseState } = React;

const CAL_URL = window.WC_CAL_URL || "http://localhost:3100/book/wc";

function CalendarScreen({ go }) {
  const { Alert } = window.WillowCreekDesignSystem_90378c;
  const [loaded, setLoaded] = kUseState(false);
  const ref = KuseParallax();

  return (
    <>
      <section ref={ref} style={{ position: "relative", overflow: "hidden", background: "var(--grad-canopy)", color: "#fffdf8" }}>
        <div data-depth="0.3" style={{ position: "absolute", top: "-40%", right: "8%", width: 360, height: 360, borderRadius: "50%", background: "radial-gradient(circle, rgba(255,241,214,.3), transparent 66%)" }} />
        <KContainer style={{ position: "relative", zIndex: 2, padding: "calc(var(--space-10) + 40px) var(--gutter) var(--space-9)" }}>
          <KReveal><KEyebrow style={{ color: "var(--sage-200)" }}>Book a time</KEyebrow></KReveal>
          <KReveal delay={80}><h1 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-d1)", letterSpacing: "0.01em", textTransform: "uppercase", margin: "14px 0 0", maxWidth: "16ch", color: "#fffdf8" }}>Find a time to talk.</h1></KReveal>
          <KReveal delay={140}><p style={{ fontSize: "var(--text-lg)", color: "var(--sage-200)", maxWidth: "50ch", marginTop: 18, lineHeight: 1.6 }}>
            Pick a check-in, a sponsor call, or a welcome chat. It's private, and there's no pressure, ever.
          </p></KReveal>
        </KContainer>
      </section>

      <section style={{ padding: "var(--section-y) 0", background: "var(--surface-page)" }}>
        <KContainer>
          <KReveal>
            <div style={{ overflow: "hidden", position: "relative", background: "var(--surface-card)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-xl)", boxShadow: "var(--shadow-lg)" }}>
              {!loaded && (
                <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", gap: 10, color: "var(--text-muted)" }}>
                  <KIcon name="calendar" size={20} /> Loading the calendar…
                </div>
              )}
              <iframe
                src={CAL_URL}
                title="Book a time with Willow Creek"
                loading="lazy"
                onLoad={() => setLoaded(true)}
                style={{ display: "block", width: "100%", minHeight: 900, border: 0, background: "var(--surface-card)", opacity: loaded ? 1 : 0, transition: "opacity var(--dur-base) var(--ease-out)" }}
              />
            </div>
          </KReveal>
          <KReveal delay={80}>
            <p style={{ textAlign: "center", color: "var(--text-muted)", fontSize: "var(--text-sm)", marginTop: 14, display: "flex", alignItems: "center", justifyContent: "center", gap: 6, flexWrap: "wrap" }}>
              <KIcon name="external-link" size={13} /> Calendar not showing?
              <a href={CAL_URL} target="_blank" rel="noopener" style={{ color: "var(--text-link, var(--brand-primary))", fontWeight: 600 }}>Open it in a new tab</a>
              or call <a href="tel:19402682950" style={{ fontWeight: 600 }}>(940) 268-2950</a>.
            </p>
          </KReveal>
          <KReveal delay={140}>
            <div style={{ maxWidth: 720, margin: "var(--space-7) auto 0" }}>
              <Alert variant="info" title="In crisis right now?" icon={<KIcon name="life-buoy" size={20} />}>
                Don't wait for a slot. Call or text <strong>988</strong> for the Suicide &amp; Crisis Lifeline — free, confidential, 24/7.
              </Alert>
            </div>
          </KReveal>
        </KContainer>
      </section>
    </>
  );
}
window.WC.CalendarScreen = CalendarScreen;