/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakText, TweakRadio, TweakToggle, TweakSelect */
const { useState, useEffect, useRef } = React;

function trackDownload() {
  const params = new URLSearchParams(window.location.search);
  const payload = JSON.stringify({
    rawReferrer: document.referrer || null,
    utmSource: params.get("utm_source") || null,
    utmMedium: params.get("utm_medium") || null,
    utmCampaign: params.get("utm_campaign") || null
  });
  const blob = new Blob([payload], { type: "application/json" });
  if (navigator.sendBeacon) {
    navigator.sendBeacon("/api/track/download", blob);
  } else {
    fetch("/api/track/download", { method: "POST", headers: { "Content-Type": "application/json" }, body: payload, keepalive: true }).catch(() => {});
  }
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "A Serious Ceremonial Wellness Intensive in Atlantic Canada",
  "ctaLabel": "Apply for consideration",
  "heroLayout": "overlay",
  "showKambo": false,
  "complianceLocation": "footer",
  "accentColor": "gold"
} /*EDITMODE-END*/;

const ACCENTS = {
  gold: { hex: "#B78A43", name: "Prayer Gold" },
  umber: { hex: "#5A3727", name: "Ceremonial Umber" }
};

// --------------------------------------------------------------------------
// Reusable bits
// --------------------------------------------------------------------------
const GoldRule = ({ width = 64, accent }) =>
<span
  aria-hidden="true"
  style={{
    display: "inline-block",
    width,
    height: 1.5,
    background: accent,
    verticalAlign: "middle"
  }} />;



const Eyebrow = ({ children, accent, color = "var(--pine)" }) =>
<div
  style={{
    display: "flex",
    alignItems: "center",
    gap: 16,
    fontFamily: "Inter, sans-serif",
    fontSize: 12,
    letterSpacing: "0.22em",
    textTransform: "uppercase",
    color,
    fontWeight: 600,
    marginBottom: 6
  }}>
  
    <GoldRule width={36} accent={accent} />
    <span>{children}</span>
  </div>;


const PrimaryButton = ({ children, accent, href = "/retreat-application", style }) =>
<a
  href={href}
  style={{
    display: "inline-flex",
    alignItems: "center",
    gap: 12,
    background: accent,
    color: "#F6F0E7",
    padding: "16px 28px",
    fontFamily: "Inter, sans-serif",
    fontSize: 14,
    letterSpacing: "0.14em",
    textTransform: "uppercase",
    fontWeight: 500,
    textDecoration: "none",
    border: "none",
    cursor: "pointer",
    transition: "transform .2s ease, box-shadow .2s ease",
    ...style
  }}
  onMouseEnter={(e) => { if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) e.currentTarget.style.transform = "translateY(-1px)"; }}
  onMouseLeave={(e) => { if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) e.currentTarget.style.transform = "translateY(0)"; }}>
  
    {children}
    <span style={{ fontSize: 18, lineHeight: 1, fontFamily: "Georgia, serif" }}>→</span>
  </a>;


const GhostButton = ({ children, href = "assets/retreat-overview.pdf", download, target, rel, variant, onClick, style: extraStyle }) => {
  const onLight = variant === "onLight";
  return <a
  href={href}
  download={download}
  target={target}
  rel={rel}
  onClick={onClick}
  style={{
    display: "inline-flex",
    alignItems: "center",
    gap: 12,
    color: onLight ? "var(--cedar)" : "#F6F0E7",
    padding: "16px 24px",
    fontFamily: "Inter, sans-serif",
    fontSize: 14,
    letterSpacing: "0.14em",
    textTransform: "uppercase",
    fontWeight: onLight ? 400 : 500,
    textDecoration: "none",
    border: onLight ? "1px solid rgba(31,38,34,0.25)" : "1px solid rgba(246,240,231,0.4)",
    cursor: "pointer",
    opacity: onLight ? 0.75 : 1,
    ...extraStyle
  }}>
    {children}
  </a>;
};


// --------------------------------------------------------------------------
// Top nav
// --------------------------------------------------------------------------
const navLink = { color: "#F6F0E7", textDecoration: "none", opacity: 0.92 };

const NAV_LINKS = [
  { href: "#retreat", label: "The Retreat" },
  { href: "#facilitator", label: "Facilitator" },
  { href: "#investment", label: "Investment" },
  { href: "#apply", label: "Apply" },
];

const TopBar = () => {
  const [menuOpen, setMenuOpen] = useState(false);
  const hamburgerRef = useRef(null);
  const drawerRef = useRef(null);
  const liveRef = useRef(null);
  const wasOpenRef = useRef(false);
  const navigatingRef = useRef(false);

  const closeMenu = () => setMenuOpen(false);

  useEffect(() => {
    if (!wasOpenRef.current && !menuOpen) return;
    if (liveRef.current) {
      liveRef.current.textContent = menuOpen ? "Menu opened" : "Menu closed";
    }
  }, [menuOpen]);

  useEffect(() => {
    const onKeyDown = (e) => { if (e.key === "Escape") closeMenu(); };
    document.addEventListener("keydown", onKeyDown);
    window.addEventListener("popstate", closeMenu);
    window.addEventListener("hashchange", closeMenu);
    return () => {
      document.removeEventListener("keydown", onKeyDown);
      window.removeEventListener("popstate", closeMenu);
      window.removeEventListener("hashchange", closeMenu);
    };
  }, []);

  useEffect(() => {
    if (menuOpen) {
      const scrollY = window.scrollY;
      document.body.style.overflow = "hidden";
      document.body.style.position = "fixed";
      document.body.style.top = `-${scrollY}px`;
      document.body.style.width = "100%";

      let startY = 0;

      const onTouchStart = (e) => {
        startY = e.touches[0].clientY;
      };

      const preventTouchMove = (e) => {
        const drawer = drawerRef.current;
        if (drawer && drawer.contains(e.target)) {
          const isScrollable = drawer.scrollHeight > drawer.clientHeight;
          if (isScrollable) {
            const deltaY = e.touches[0].clientY - startY;
            const atTop = drawer.scrollTop <= 0;
            const atBottom = drawer.scrollTop + drawer.clientHeight >= drawer.scrollHeight;
            if (!(atTop && deltaY > 0) && !(atBottom && deltaY < 0)) {
              return;
            }
          }
        }
        e.preventDefault();
      };

      document.addEventListener("touchstart", onTouchStart, { passive: true });
      document.addEventListener("touchmove", preventTouchMove, { passive: false });

      return () => {
        document.removeEventListener("touchstart", onTouchStart);
        document.removeEventListener("touchmove", preventTouchMove);
        const restoredY = Math.abs(parseInt(document.body.style.top || "0", 10));
        const prevScrollBehavior = document.documentElement.style.scrollBehavior;
        document.documentElement.style.scrollBehavior = "auto";
        document.body.style.overflow = "";
        document.body.style.position = "";
        document.body.style.top = "";
        document.body.style.width = "";
        if (!navigatingRef.current) {
          window.scrollTo(0, restoredY);
        }
        document.documentElement.style.scrollBehavior = prevScrollBehavior;
        navigatingRef.current = false;
      };
    }
  }, [menuOpen]);

  useEffect(() => {
    if (menuOpen) {
      wasOpenRef.current = true;
      const drawer = drawerRef.current;
      if (!drawer) return;
      const focusable = drawer.querySelectorAll(
        'a[href], button, [tabindex]:not([tabindex="-1"])'
      );
      if (focusable.length) focusable[0].focus();

      const handleTab = (e) => {
        if (e.key !== "Tab") return;
        const items = Array.from(drawer.querySelectorAll(
          'a[href], button, [tabindex]:not([tabindex="-1"])'
        ));
        if (!items.length) return;
        const first = items[0];
        const last = items[items.length - 1];
        if (e.shiftKey) {
          if (document.activeElement === first) {
            e.preventDefault();
            last.focus();
          }
        } else {
          if (document.activeElement === last) {
            e.preventDefault();
            first.focus();
          }
        }
      };

      document.addEventListener("keydown", handleTab);
      return () => document.removeEventListener("keydown", handleTab);
    } else {
      if (wasOpenRef.current && hamburgerRef.current) {
        hamburgerRef.current.focus();
      }
    }
  }, [menuOpen]);

  useEffect(() => {
    const drawer = drawerRef.current;
    if (!drawer) return;
    // Skip initial mount when drawer is closed and has never been opened
    if (!wasOpenRef.current && !menuOpen) return;

    drawer.style.willChange = 'transform';

    let fallback;
    const onTransitionEnd = (e) => {
      if (e.target !== drawer || e.propertyName !== 'transform') return;
      drawer.style.willChange = '';
      clearTimeout(fallback);
    };
    drawer.addEventListener('transitionend', onTransitionEnd);
    // Fallback: derive duration from computed style so it stays in sync
    // with any future CSS timing changes (including reduced-motion overrides).
    const computed = parseFloat(getComputedStyle(drawer).transitionDuration) * 1000 || 300;
    fallback = setTimeout(() => {
      drawer.style.willChange = '';
    }, computed + 100);

    return () => {
      drawer.removeEventListener('transitionend', onTransitionEnd);
      clearTimeout(fallback);
      drawer.style.willChange = '';
    };
  }, [menuOpen]);

  const handleLinkClick = (e, href) => {
    e.preventDefault();
    navigatingRef.current = true;
    closeMenu();
    // Delay scroll until after the body scroll-lock styles are restored
    // (the cleanup effect runs asynchronously after setMenuOpen(false))
    setTimeout(() => {
      const target = document.querySelector(href);
      if (target) target.scrollIntoView({ behavior: "smooth" });
    }, 50);
  };

  return (
    <header
      style={{
        position: "absolute",
        top: 0, left: 0, right: 0,
        zIndex: 5,
        padding: "28px 56px",
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
        color: "#F6F0E7"
      }}>

      {/* Subtle pine gradient behind nav for legibility */}
      <div
        aria-hidden="true"
        style={{
          position: "absolute",
          inset: 0,
          bottom: "auto",
          height: 140,
          background: "linear-gradient(180deg, rgba(36,60,50,0.58) 0%, rgba(36,60,50,0) 100%)",
          pointerEvents: "none",
          zIndex: -1
        }} />

      <div style={{
        fontFamily: "'Cormorant Garamond', Georgia, serif",
        fontSize: 18,
        letterSpacing: "0.06em",
        fontWeight: 500
      }}>
        Atlantic Canada<br />
        <span style={{ fontSize: 11, letterSpacing: "0.32em", textTransform: "uppercase", opacity: 0.78, fontFamily: "Inter, sans-serif", fontWeight: 600 }}>
          Ceremonial Wellness Intensive
        </span>
      </div>

      {/* Desktop nav */}
      <nav className="nav-desktop" style={{
        display: "flex", gap: 36,
        fontFamily: "Inter, sans-serif",
        fontSize: 12,
        letterSpacing: "0.2em",
        textTransform: "uppercase",
        fontWeight: 600
      }}>
        {NAV_LINKS.map(({ href, label }) =>
          <a key={href} href={href} style={navLink}>{label}</a>
        )}
      </nav>

      {/* Visually hidden live region for screen reader announcements */}
      <span
        ref={liveRef}
        aria-live="polite"
        aria-atomic="true"
        style={{
          position: "absolute",
          width: 1,
          height: 1,
          padding: 0,
          margin: -1,
          overflow: "hidden",
          clip: "rect(0,0,0,0)",
          whiteSpace: "nowrap",
          border: 0
        }} />

      {/* Hamburger button — mobile only */}
      <button
        ref={hamburgerRef}
        className="hamburger-btn"
        aria-label={menuOpen ? "Close menu" : "Open menu"}
        aria-expanded={menuOpen}
        aria-controls="mobile-drawer"
        onClick={() => setMenuOpen(o => !o)}
        style={{
          display: "none",
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center",
          gap: 5,
          background: "none",
          border: "none",
          cursor: "pointer",
          padding: 6,
          zIndex: 20,
          position: "relative"
        }}>
        <span className={`ham-line ${menuOpen ? "ham-open-top" : ""}`} />
        <span className={`ham-line ${menuOpen ? "ham-open-mid" : ""}`} />
        <span className={`ham-line ${menuOpen ? "ham-open-bot" : ""}`} />
      </button>

      {/* Backdrop overlay */}
      {menuOpen && (
        <div
          className="drawer-backdrop"
          onClick={closeMenu}
          aria-hidden="true" />
      )}

      {/* Mobile slide-in drawer */}
      <nav
        ref={drawerRef}
        id="mobile-drawer"
        className={`mobile-drawer ${menuOpen ? "mobile-drawer--open" : ""}`}
        aria-label="Mobile navigation"
        aria-hidden={!menuOpen}
        inert={!menuOpen ? "" : undefined}>
        <button
          className="drawer-close-btn"
          aria-label="Close menu"
          onClick={closeMenu}>
          ✕
        </button>
        <ul style={{ listStyle: "none", margin: 0, padding: "80px 40px 40px", display: "grid", gap: 0 }}>
          {NAV_LINKS.map(({ href, label }) =>
            <li key={href}>
              <a
                href={href}
                className="drawer-link"
                onClick={e => handleLinkClick(e, href)}>
                {label}
              </a>
            </li>
          )}
        </ul>
      </nav>
    </header>
  );
};

// --------------------------------------------------------------------------
// HERO — overlay variant on the waterfront image
// --------------------------------------------------------------------------
const Hero = ({ headline, ctaLabel, accent }) =>
<section
  className="hero"
  style={{
    position: "relative",
    minHeight: "100vh",
    background: "#243C32",
    color: "#F6F0E7",
    overflow: "hidden"
  }}>
  
    <img
    src="assets/waterfront.png"
    alt="Atlantic Canada waterfront retreat property"
    style={{
      position: "absolute", inset: 0,
      width: "100%", height: "100%",
      objectFit: "cover",
      objectPosition: "center 55%"
    }} />

    {/* Primary directional pine overlay — strongest left, fading right; bottom dark for CTA legibility */}
    <div
    aria-hidden="true"
    style={{
      position: "absolute", inset: 0,
      background:
      "linear-gradient(90deg, rgba(36,60,50,0.74) 0%, rgba(36,60,50,0.60) 38%, rgba(36,60,50,0.30) 72%, rgba(36,60,50,0.16) 100%), linear-gradient(180deg, rgba(36,60,50,0.22) 0%, rgba(36,60,50,0.06) 45%, rgba(31,38,34,0.62) 100%)"
    }} />

    <TopBar />

    <div id="main-content" tabIndex={-1} className="hero-content" style={{
    position: "relative",
    zIndex: 2,
    maxWidth: 1280,
    marginLeft: 0,
    marginRight: "auto",
    padding: "196px 64px 120px 88px",
    display: "grid",
    gridTemplateColumns: "1fr",
    justifyItems: "start",
    gap: 24
  }}>
      <Eyebrow accent={accent} color="#F6F0E7">
        New Brunswick, Canada · July 09–15, 2026
      </Eyebrow>

      <h1 style={{
      fontFamily: "'Cormorant Garamond', Georgia, serif",
      fontSize: "clamp(36px, 4.9vw, 69px)",
      fontWeight: 500,
      lineHeight: 1.1,
      letterSpacing: "-0.01em",
      margin: "0 0 14px",
      maxWidth: 900,
      width: "100%",
      color: "#F6F0E7",
      textAlign: "left",
      textShadow: "0 1px 2px rgba(31,38,34,0.35)",
      textWrap: "balance"
    }}>
        A Serious Ceremonial Wellness Intensive in Atlantic Canada
      </h1>

      <p style={{
      fontFamily: "Inter, system-ui, sans-serif",
      fontSize: "clamp(19px, 1.55vw, 24px)",
      fontWeight: 400,
      lineHeight: 1.55,
      maxWidth: 780,
      color: "rgba(246,240,231,0.92)",
      margin: 0,
      textAlign: "left",
      textShadow: "0 1px 2px rgba(31,38,34,0.35)",
      textWrap: "pretty"
    }}>
        A five-day small-group retreat for adults already walking the
        transformational path — centered on prayer, breath, ancestral music,
        nature immersion, spiritual reflection, disciplined inner work,
        sacred medicines and integration.
      </p>

      <div style={{ display: "flex", gap: 14, flexWrap: "wrap", marginTop: 28 }}>
        <PrimaryButton accent={accent} href="#apply">Apply for consideration</PrimaryButton>
        <GhostButton href="assets/retreat-overview.pdf" onClick={() => navigator.sendBeacon ? navigator.sendBeacon("/api/track/view") : fetch("/api/track/view", { method: "POST", keepalive: true }).catch(() => {})} style={{ fontSize: 12, padding: "14px 21px" }}>View Overview</GhostButton>
        <GhostButton href="assets/retreat-overview.pdf" download="retreat-overview.pdf" onClick={trackDownload} style={{ fontSize: 12, padding: "14px 21px" }}>Download</GhostButton>
      </div>

      <div className="hero-stats" style={{
      marginTop: 64,
      display: "grid",
      gridTemplateColumns: "repeat(5, minmax(0, 1fr))",
      gap: 32,
      width: "100%",
      maxWidth: 1080,
      paddingTop: 28,
      borderTop: "1px solid rgba(246,240,231,0.18)",
      fontFamily: "Inter, sans-serif"
    }}>
        <Stat label="Duration" value="Six days / seven nights" />
        <Stat label="Group" value="Small group" />
        <Stat label="Setting" value="Waterfront property" />
        <Stat label="Entry" value="By application" />
        <Stat label="Investment" value="CAD $3,333" />
      </div>
    </div>

    {/* Scroll cue */}
    <div style={{
    position: "absolute",
    bottom: 28, left: "50%",
    transform: "translateX(-50%)",
    zIndex: 2,
    fontFamily: "Inter, sans-serif",
    fontSize: 10,
    letterSpacing: "0.32em",
    textTransform: "uppercase",
    color: "rgba(246,240,231,0.7)",
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    gap: 10
  }}>
      <span>Scroll</span>
      <span style={{ width: 1, height: 36, background: "rgba(246,240,231,0.5)" }} />
    </div>
  </section>;


const Stat = ({ label, value }) =>
<div>
    <div style={{
    fontFamily: "Inter, sans-serif",
    fontSize: 10.5, letterSpacing: "0.26em", textTransform: "uppercase",
    color: "rgba(246,240,231,0.7)",
    fontWeight: 600,
    marginBottom: 8
  }}>{label}</div>
    <div style={{
    fontFamily: "'Cormorant Garamond', Georgia, serif",
    fontSize: 20, fontWeight: 500,
    color: "#F6F0E7",
    lineHeight: 1.25
  }}>{value}</div>
  </div>;


// --------------------------------------------------------------------------
// REALITY CHECK — "This is not a spa retreat"
// --------------------------------------------------------------------------
const RealityCheck = ({ accent }) =>
<section style={{
  background: "#F6F0E7",
  padding: "140px 56px",
  color: "var(--cedar)"
}}>
    <div style={{ maxWidth: 920, margin: "0 auto", textAlign: "center" }}>
      <Eyebrow accent={accent}>Retreat Intention</Eyebrow>
      <h2 style={{
      fontFamily: "'Cormorant Garamond', Georgia, serif",
      fontSize: "clamp(36px, 4.5vw, 60px)",
      fontWeight: 400,
      lineHeight: 1.1,
      margin: "28px 0 32px",
      color: "var(--pine)",
      letterSpacing: "-0.01em"
    }}>
        This Is a Different Kind of Retreat Experience
      </h2>
      <div style={{
      display: "flex", justifyContent: "center", margin: "0 0 36px"
    }}>
        <GoldRule width={56} accent={accent} />
      </div>
      <p style={{
      fontFamily: "'Cormorant Garamond', Georgia, serif",
      fontStyle: "italic",
      fontSize: "clamp(20px, 1.8vw, 26px)",
      lineHeight: 1.55,
      color: "var(--umber)",
      maxWidth: 760,
      margin: "0 auto 28px",
      textWrap: "pretty"
    }}>
        The experience is designed for adults seeking depth, reflection, nature, meaningful connection, prayer, music, and intentional inner work within a small-group setting.
      </p>
      <p style={{
      fontFamily: "Inter, sans-serif",
      fontSize: 17,
      lineHeight: 1.7,
      maxWidth: 680,
      margin: "0 auto",
      opacity: 0.85,
      textWrap: "pretty"
    }}>
        Rather than focusing on luxury or entertainment, the retreat emphasizes presence, groundedness, preparation, and integration in a calm Atlantic Canada waterfront environment.
        {" "}
        For many participants, the value of the experience comes not only from the retreat itself, but from the space it creates for clarity, reflection, reconnection, and what they carry home afterward.
      </p>
    </div>
  </section>;


// --------------------------------------------------------------------------
// FOR / NOT FOR
// --------------------------------------------------------------------------
const ForNotFor = ({ accent }) => {
  const forItems = [
  "Adults with sincere interest in ceremony, breathwork, meditation, light yoga, medicine retreats, prayer, ancestral spirituality, or deep inner work.",
  "People who value preparation, intentionality, honesty, reflection, and integration as part of a meaningful retreat.",
  "Canadian and international participants willing to travel for a rare Atlantic Canada ceremonial container.",
  "Spiritually mature seekers, practitioners, healers, and retreat travelers already walking the transformational path."];

  return (
    <section style={{
      background: "var(--pine)",
      color: "#F6F0E7",
      padding: "140px 56px"
    }}>
      <div style={{ maxWidth: 1200, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 80 }}>
          <Eyebrow accent={accent} color="rgba(246,240,231,0.75)">Alignment</Eyebrow>
          <h2 style={{
            fontFamily: "'Cormorant Garamond', Georgia, serif",
            fontSize: "clamp(36px, 4.5vw, 56px)",
            fontWeight: 400,
            lineHeight: 1.15,
            margin: "24px 0 0",
            letterSpacing: "-0.01em"
          }}>
            This Experience May Resonate With
          </h2>
        </div>

        <div style={{
          background: "rgba(246,240,231,0.18)",
          border: "1px solid rgba(246,240,231,0.18)"
        }}>
          <Column
            heading="This retreat is for"
            items={forItems}
            accent={accent}
            tone="affirm" />
        </div>
      </div>
    </section>);

};

const Column = ({ heading, items, accent, tone }) =>
<div style={{
  background: "var(--pine)",
  padding: "48px 44px"
}}>
    <div style={{
    display: "flex", alignItems: "center", gap: 14,
    marginBottom: 32
  }}>
      <span style={{
      fontFamily: "'Cormorant Garamond', Georgia, serif",
      fontStyle: "italic",
      fontSize: 14,
      opacity: 0.7,
      color: tone === "affirm" ? accent : "rgba(246,240,231,0.55)",
      letterSpacing: "0.02em"
    }}>
        {tone === "affirm" ? "+" : "—"}
      </span>
      <h3 style={{
      fontFamily: "Inter, sans-serif",
      fontSize: 12,
      letterSpacing: "0.22em",
      textTransform: "uppercase",
      fontWeight: 500,
      margin: 0,
      opacity: 0.9
    }}>
        {heading}
      </h3>
    </div>
    <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 22 }}>
      {items.map((item, i) =>
    <li key={i} style={{
      fontFamily: "'Cormorant Garamond', Georgia, serif",
      fontSize: 19,
      lineHeight: 1.5,
      color: tone === "affirm" ? "#F6F0E7" : "rgba(246,240,231,0.55)",
      paddingBottom: 22,
      borderBottom: i === items.length - 1 ? "none" : "1px solid rgba(246,240,231,0.12)",
      textWrap: "pretty"
    }}>
          {item}
        </li>
    )}
    </ul>
  </div>;


// --------------------------------------------------------------------------
// RETREAT RHYTHM — morning / afternoon / evening
// --------------------------------------------------------------------------
const Rhythm = ({ accent }) => {
  const rhythms = [
  {
    time: "Morning",
    hour: "Before the world wakes",
    practices: ["Meditation", "Breathwork", "Gentle movement", "Quiet prayer", "Personal reflection"],
    copy: "The day begins in silence. Practices to settle the body and open the breath before the group gathers."
  },
  {
    time: "Afternoon",
    hour: "On the land",
    practices: ["Nature immersion", "Guided inner work", "Journaling", "Preparation", "Integration"],
    copy: "Quiet time on the property. Walking, journaling, sitting near the water — the land becomes part of the container."
  },
  {
    time: "Evening",
    hour: "Around the fire",
    practices: ["Ancestral music", "Sound", "Prayer", "Ceremonial reflection", "Integration circles"],
    copy: "The group gathers. Flute, harmonica, song, and prayer carry the work into the night, then into integration."
  }];


  return (
    <section id="retreat" style={{
      background: "#F6F0E7",
      padding: "140px 56px"
    }}>
      <div style={{ maxWidth: 1200, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 72, maxWidth: 760, margin: "0 auto 72px" }}>
          <Eyebrow accent={accent}>The Retreat Rhythm</Eyebrow>
          <h2 style={{
            fontFamily: "'Cormorant Garamond', Georgia, serif",
            fontSize: "clamp(36px, 4.5vw, 56px)",
            fontWeight: 400,
            lineHeight: 1.15,
            color: "var(--pine)",
            margin: "24px 0 24px",
            letterSpacing: "-0.01em",
            textWrap: "balance"
          }}>
            A week of prayer, breath, music, nature, reflection, and integration.
          </h2>
          <p style={{
            fontFamily: "Inter, sans-serif",
            fontSize: 16,
            lineHeight: 1.7,
            color: "var(--cedar)",
            opacity: 0.8,
            textWrap: "pretty"
          }}>
            Held in a quiet Atlantic Canada waterfront setting, the days move
            with the land. The value is not only what happens during the
            retreat, but what participants are prepared to carry home.
          </p>
        </div>

        <div className="grid-3col" style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: 24
        }}>
          {rhythms.map((r, i) =>
          <div key={r.time} style={{
            background: "var(--taupe)",
            padding: "44px 36px",
            position: "relative",
            minHeight: 420,
            display: "flex",
            flexDirection: "column"
          }}>
              <div style={{
              fontFamily: "Inter, sans-serif",
              fontSize: 11,
              letterSpacing: "0.32em",
              textTransform: "uppercase",
              color: accent,
              fontWeight: 500,
              marginBottom: 18
            }}>
                {String(i + 1).padStart(2, "0")} · {r.time}
              </div>
              <h3 style={{
              fontFamily: "'Cormorant Garamond', Georgia, serif",
              fontStyle: "italic",
              fontSize: 28,
              fontWeight: 400,
              color: "var(--pine)",
              margin: "0 0 24px",
              lineHeight: 1.2
            }}>
                {r.hour}
              </h3>
              <p style={{
              fontFamily: "Inter, sans-serif",
              fontSize: 14.5,
              lineHeight: 1.65,
              color: "var(--cedar)",
              opacity: 0.85,
              margin: "0 0 28px",
              textWrap: "pretty"
            }}>
                {r.copy}
              </p>
              <ul style={{
              listStyle: "none",
              padding: 0, margin: "auto 0 0",
              borderTop: `1px solid ${accent}33`,
              paddingTop: 20,
              display: "grid", gap: 8
            }}>
                {r.practices.map((p) =>
              <li key={p} style={{
                fontFamily: "'Cormorant Garamond', Georgia, serif",
                fontSize: 16,
                color: "var(--pine)",
                display: "flex",
                alignItems: "center",
                gap: 12
              }}>
                    <span style={{
                  width: 4, height: 4, background: accent, borderRadius: "50%"
                }} />
                    {p}
                  </li>
              )}
              </ul>
            </div>
          )}
        </div>
        <div style={{ textAlign: "center", marginTop: 56 }}>
          <GhostButton variant="onLight" href="assets/retreat-overview.pdf" target="_blank" rel="noopener noreferrer">
            Want the full retreat overview?
          </GhostButton>
        </div>
      </div>
    </section>);

};

// --------------------------------------------------------------------------
// DEVOTIONAL CURRENT
// --------------------------------------------------------------------------
const DevotionalCurrent = ({ accent }) =>
<section style={{
  background: "#F6F0E7",
  padding: "140px 56px",
  borderTop: `1px solid ${accent}22`
}}>
  <div style={{ maxWidth: 800, margin: "0 auto" }}>
    <Eyebrow accent={accent}>The Devotional Current</Eyebrow>
    <div style={{
      width: 64,
      height: 1,
      background: accent,
      margin: "20px 0 36px",
      opacity: 0.6
    }} />
    <h2 style={{
      fontFamily: "'Cormorant Garamond', Georgia, serif",
      fontSize: "clamp(34px, 4.5vw, 54px)",
      fontWeight: 400,
      lineHeight: 1.18,
      color: "var(--pine)",
      margin: "0 0 40px",
      letterSpacing: "-0.01em",
      textWrap: "balance"
    }}>
      Spiritual Immersion into the Divine Mother Heart
    </h2>
    <p style={{
      fontFamily: "Inter, sans-serif",
      fontSize: 16.5,
      lineHeight: 1.8,
      color: "var(--cedar)",
      opacity: 0.88,
      margin: "0 0 24px",
      textWrap: "pretty"
    }}>
      At the center of this intensive is a living devotional current — a thread of
      prayer, breath, ancestral music, and sacred memory that runs through every
      morning, afternoon, and evening of the five days. This is not a curriculum.
      It is a field. Participants enter it together, and the field does the work.
    </p>
    <p style={{
      fontFamily: "Inter, sans-serif",
      fontSize: 16.5,
      lineHeight: 1.8,
      color: "var(--cedar)",
      opacity: 0.72,
      margin: 0,
      textWrap: "pretty"
    }}>
      The music of the flute, harmonica, and voice carries old prayers across the
      land. Nature holds the container. Silence makes space for what arrives. Each
      participant is invited — not instructed — to bring their own sincerity, their
      own history of longing, and their willingness to remember something ancient
      that already lives within them. Preparation and integration are built into
      every day, before and after the ceremonial heart of the gathering.
    </p>
  </div>
</section>;

// --------------------------------------------------------------------------
// FACILITATOR — Richie
// --------------------------------------------------------------------------
const Facilitator = ({ accent }) =>
<section id="facilitator" style={{
  background: "var(--pine)",
  color: "#F6F0E7",
  padding: "140px 56px",
  position: "relative",
  overflow: "hidden"
}}>
    <div className="grid-2col" style={{
    maxWidth: 1280,
    margin: "0 auto",
    display: "grid",
    gridTemplateColumns: "minmax(280px, 460px) 1fr",
    gap: 80,
    alignItems: "center"
  }}>
      <div style={{ position: "relative" }}>
        <img
        src="assets/richie-angkor.png"
        alt="Richie Shivananda in prayer at an international ceremonial site"
        style={{
          width: "100%",
          display: "block",
          filter: "saturate(0.85) brightness(0.95)"
        }} />
      
        <div style={{
        position: "absolute",
        bottom: -1, left: -1, right: -1,
        height: 140,
        background: "linear-gradient(180deg, transparent 0%, var(--pine) 100%)",
        pointerEvents: "none"
      }} />
      </div>

      <div>
        <Eyebrow accent={accent} color="rgba(246,240,231,0.75)">The Facilitator</Eyebrow>
        <h2 style={{
        fontFamily: "'Cormorant Garamond', Georgia, serif",
        fontSize: "clamp(34px, 4vw, 52px)",
        fontWeight: 400,
        lineHeight: 1.15,
        margin: "24px 0 32px",
        letterSpacing: "-0.01em",
        textWrap: "balance"
      }}>
          Guided by Richie Shivananda — an internationally traveled facilitator,
          mentor, and ceremonial musician.
        </h2>

        <blockquote style={{
        margin: "0 0 36px",
        paddingLeft: 24,
        borderLeft: `1px solid ${accent}`,
        fontFamily: "'Cormorant Garamond', Georgia, serif",
        fontStyle: "italic",
        fontSize: 22,
        lineHeight: 1.5,
        color: "rgba(246,240,231,0.92)",
        maxWidth: 600
      }}>
          “I walk with the sound of the ancestors, offering prayer through
          breath, music, and medicine. I am not here to teach — I am here
          to remember with you… the eternal song that lives in your bones.”
          <footer style={{
          marginTop: 16,
          fontStyle: "normal",
          fontFamily: "Inter, sans-serif",
          fontSize: 11,
          letterSpacing: "0.22em",
          textTransform: "uppercase",
          opacity: 0.65
        }}>
            — Richie Shivananda
          </footer>
        </blockquote>

        <p style={{
        fontFamily: "Inter, sans-serif",
        fontSize: 16,
        lineHeight: 1.75,
        opacity: 0.88,
        maxWidth: 600,
        margin: "0 0 20px",
        textWrap: "pretty"
      }}>
          A prayer-centered guide with a devotional and ancestral ceremonial
          orientation. Richie's work weaves music, breath, prayer, remembrance,
          Vedic devotion, and Anahuac/Mayab symbolism, drawn from 10+ years of
          international retreat work across Latin America, Europe, and Asia.
        </p>
        <p style={{
        fontFamily: "Inter, sans-serif",
        fontSize: 16,
        lineHeight: 1.75,
        opacity: 0.7,
        maxWidth: 600,
        margin: 0,
        textWrap: "pretty"
      }}>
          For those who have traveled to Mexico, Peru, Costa Rica, Europe, India,
          or other sacred destinations for deep retreat work, this is a rare
          Atlantic Canada gathering with the same depth and disciplined facilitation.
        </p>
      </div>
    </div>
  </section>;


// --------------------------------------------------------------------------
// INVESTMENT + INCLUDED
// --------------------------------------------------------------------------
const Investment = ({ accent, ctaLabel }) => {
  const included = [
  "Accommodation in the New Brunswick retreat setting",
  "All meals during the retreat",
  "Meditation and personal reflection practices",
  "Breathwork and gentle somatic practices",
  "Sound ceremony and ancestral music",
  "Prayer and ceremonial reflection",
  "Nature immersion and quiet time on the land",
  "Group integration circles",
  "Preparation, screening, consent, and facilitator review",
  "Facilitation by Richie Shivananda and the hosting team"];


  return (
    <section id="investment" style={{
      background: "#F6F0E7",
      padding: "140px 56px"
    }}>
      <div className="grid-2col" style={{
        maxWidth: 1200,
        margin: "0 auto",
        display: "grid",
        gridTemplateColumns: "1.1fr 1fr",
        gap: 80,
        alignItems: "start"
      }}>
        {/* Left — included */}
        <div>
          <Eyebrow accent={accent}>What is included</Eyebrow>
          <h2 style={{
            fontFamily: "'Cormorant Garamond', Georgia, serif",
            fontSize: "clamp(32px, 3.6vw, 46px)",
            fontWeight: 400,
            lineHeight: 1.15,
            color: "var(--pine)",
            margin: "24px 0 36px",
            letterSpacing: "-0.01em",
            textWrap: "balance"
          }}>
            The full ceremonial container — not a room rental.
          </h2>
          <ul style={{
            listStyle: "none", padding: 0, margin: 0,
            display: "grid", gap: 0,
            borderTop: "1px solid rgba(31,38,34,0.12)"
          }}>
            {included.map((item, i) =>
            <li key={i} style={{
              display: "flex",
              alignItems: "center",
              gap: 20,
              padding: "16px 0",
              borderBottom: "1px solid rgba(31,38,34,0.12)",
              fontFamily: "Inter, sans-serif",
              fontSize: 15,
              color: "var(--cedar)"
            }}>
                <span style={{
                fontFamily: "'Cormorant Garamond', Georgia, serif",
                fontStyle: "italic",
                fontSize: 13,
                color: accent,
                width: 28,
                letterSpacing: "0.05em"
              }}>
                  {String(i + 1).padStart(2, "0")}
                </span>
                {item}
              </li>
            )}
          </ul>
          <p style={{
            marginTop: 28,
            fontFamily: "'Cormorant Garamond', Georgia, serif",
            fontStyle: "italic",
            fontSize: 17,
            lineHeight: 1.6,
            color: "var(--umber)",
            maxWidth: 540,
            textWrap: "pretty"
          }}>
            All accommodations are offered at the same standard. There are no
            upgraded tiers. The retreat is intentionally structured as one
            shared group container.
          </p>
        </div>

        {/* Right — price card */}
        <aside className="investment-aside" style={{
          background: "var(--pine)",
          color: "#F6F0E7",
          padding: "56px 44px",
          position: "sticky",
          top: 32
        }}>
          <Eyebrow accent={accent} color="rgba(246,240,231,0.75)">Retreat Investment</Eyebrow>
          <div style={{
            margin: "32px 0 8px",
            display: "flex",
            alignItems: "baseline",
            gap: 10
          }}>
            <span style={{
              fontFamily: "Inter, sans-serif", fontSize: 13,
              opacity: 0.65, letterSpacing: "0.04em"
            }}>CAD</span>
            <span style={{
              fontFamily: "'Cormorant Garamond', Georgia, serif",
              fontSize: 72, fontWeight: 400, lineHeight: 1,
              color: accent,
              letterSpacing: "-0.02em"
            }}>$3,333</span>
          </div>
          <div style={{
            fontFamily: "Inter, sans-serif",
            fontSize: 13, opacity: 0.7,
            marginBottom: 32,
            letterSpacing: "0.02em"
          }}>
            per participant
          </div>

          <p style={{
            fontFamily: "Inter, sans-serif",
            fontSize: 14,
            lineHeight: 1.7,
            opacity: 0.85,
            margin: "0 0 32px",
            textWrap: "pretty"
          }}>
            A single all-inclusive investment in the full week's ceremonial
            container — lodging, meals, facilitation, preparation, prayer,
            ancestral music, breathwork, nature, sacred medicines and integration.
          </p>

          <div style={{
            borderTop: "1px solid rgba(246,240,231,0.18)",
            paddingTop: 24,
            display: "grid",
            gap: 14,
            fontFamily: "Inter, sans-serif",
            fontSize: 13,
            opacity: 0.85
          }}>
            <DetailRow label="Dates" value="July 10–15, 2026" />
            <DetailRow label="Setting" value="New Brunswick · Waterfront" />
            <DetailRow label="Group" value="Small · By application only" />
          </div>

          <div style={{ marginTop: 36, display: "grid", gap: 12 }}>
            <PrimaryButton accent={accent} href="#apply" style={{ width: "100%", justifyContent: "center" }}>
              {ctaLabel}
            </PrimaryButton>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
              <GhostButton
                href="assets/retreat-overview.pdf"
                onClick={() => navigator.sendBeacon ? navigator.sendBeacon("/api/track/view") : fetch("/api/track/view", { method: "POST", keepalive: true }).catch(() => {})}
                style={{ justifyContent: "center", fontSize: 12, padding: "12px 12px" }}>
                View Overview
              </GhostButton>
              <GhostButton
                href="assets/retreat-overview.pdf"
                download="retreat-overview.pdf"
                onClick={trackDownload}
                style={{ justifyContent: "center", fontSize: 12, padding: "12px 12px" }}>
                Download
              </GhostButton>
            </div>
          </div>
          <p style={{
            marginTop: 16,
            fontFamily: "Inter, sans-serif",
            fontSize: 11,
            lineHeight: 1.6,
            opacity: 0.55,
            margin: "16px 0 0",
            textWrap: "pretty"
          }}>
            Payment links are provided only after application review,
            discovery call, and acceptance.
          </p>
        </aside>
      </div>
    </section>);

};

const DetailRow = ({ label, value }) =>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
    <span style={{
    fontSize: 10, letterSpacing: "0.28em", textTransform: "uppercase",
    opacity: 0.55
  }}>{label}</span>
    <span style={{
    fontFamily: "'Cormorant Garamond', Georgia, serif",
    fontSize: 16
  }}>{value}</span>
  </div>;


// --------------------------------------------------------------------------
// FAQ
// --------------------------------------------------------------------------
const Faq = ({ accent }) => {
  const items = [
  {
    q: "Is this a medical or therapeutic retreat?",
    a: "No. This retreat is offered for spiritual, educational, reflective, and general wellness purposes only. It is not medical care, psychotherapy, addiction treatment, trauma treatment, or a substitute for professional healthcare."
  },
  {
    q: "Is this a spa retreat?",
    a: "No. This is a premium ceremonial wellness intensive, not a spa vacation, luxury escape, or pampering retreat. The emphasis is depth, preparation, prayer, ancestral music, nature, disciplined inner work, and integration."
  },
  {
    q: "Who is this retreat for?",
    a: "Adults already walking the transformational path, including those with previous or sincere experience in ceremony, those who are open and have great interest in learning - remembering - more about themselves, breathwork, meditation, yoga, prayer, ancestral spirituality, retreats, or deep inner work."
  },
  {
    q: "Do I need prior retreat experience?",
    a: "Previous experience is helpful but not mandatory. Applicants should be comfortable with silence, group reflection, prayer, music, breathwork, nature immersion, preparation, and integration."
  },
  {
    q: "Why is there an application process?",
    a: "The retreat is intentionally small. The application process helps ensure participant alignment, readiness, consent, maturity, and respect for the group container."
  },
  {
    q: "Are all accommodations the same?",
    a: "Yes. All accommodations are offered at the same standard. There are no upgraded accommodation tiers."
  },
  {
    q: "Can I pay immediately?",
    a: "No. Payment and deposit links are provided only after application review, discovery call, and acceptance."
  },
  {
    q: "Are outcomes guaranteed?",
    a: "No. No medical, psychological, therapeutic, detox, healing, or transformational outcomes are promised or guaranteed. The retreat provides a serious container for preparation, reflection, prayer, music, nature, medicine work and integration."
  }];

  const [open, setOpen] = useState(0);

  return (
    <section style={{
      background: "var(--cream)",
      padding: "140px 56px",
      borderTop: "1px solid rgba(31,38,34,0.08)"
    }}>
      <div style={{
        maxWidth: 920, margin: "0 auto"
      }}>
        <div style={{ textAlign: "center", marginBottom: 64 }}>
          <Eyebrow accent={accent}>Frequently Asked</Eyebrow>
          <h2 style={{
            fontFamily: "'Cormorant Garamond', Georgia, serif",
            fontSize: "clamp(34px, 4vw, 50px)",
            fontWeight: 400,
            lineHeight: 1.15,
            color: "var(--pine)",
            margin: "24px 0 0",
            letterSpacing: "-0.01em"
          }}>
            What people ask before applying.
          </h2>
        </div>

        <div style={{ borderTop: "1px solid rgba(31,38,34,0.15)" }}>
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{
                borderBottom: "1px solid rgba(31,38,34,0.15)"
              }}>
                <button
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  style={{
                    width: "100%",
                    background: "none",
                    border: "none",
                    cursor: "pointer",
                    padding: "26px 0",
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "center",
                    gap: 24,
                    textAlign: "left",
                    fontFamily: "'Cormorant Garamond', Georgia, serif",
                    fontSize: 22,
                    color: "var(--pine)",
                    fontWeight: 400
                  }}>
                  
                  <span style={{ flex: 1 }}>{it.q}</span>
                  <span style={{
                    fontFamily: "Inter, sans-serif",
                    fontSize: 14,
                    color: accent,
                    width: 18,
                    textAlign: "center",
                    transform: isOpen ? "rotate(45deg)" : "rotate(0)",
                    transition: "transform .3s ease"
                  }}>+</span>
                </button>
                <div style={{
                  maxHeight: isOpen ? 400 : 0,
                  overflow: "hidden",
                  transition: "max-height .4s ease, padding .4s ease"
                }}>
                  <p style={{
                    fontFamily: "Inter, sans-serif",
                    fontSize: 15.5,
                    lineHeight: 1.75,
                    color: "var(--cedar)",
                    opacity: 0.85,
                    margin: "0 0 28px",
                    paddingRight: 56,
                    textWrap: "pretty"
                  }}>
                    {it.a}
                  </p>
                </div>
              </div>);

          })}
        </div>
      </div>
    </section>);

};

// --------------------------------------------------------------------------
// IF YOU ARE FEELING THE CALL — pre-application section
// --------------------------------------------------------------------------
const FeelTheCall = ({ accent }) =>
<section style={{
  background: "var(--taupe)",
  padding: "140px 56px",
  borderTop: `1px solid ${accent}22`
}}>
  <div style={{ maxWidth: 800, margin: "0 auto" }}>
    <Eyebrow accent={accent}>If You Are Feeling The Call</Eyebrow>
    <div style={{
      width: 64,
      height: 1,
      background: accent,
      margin: "20px 0 36px",
      opacity: 0.6
    }} />
    <h2 style={{
      fontFamily: "'Cormorant Garamond', Georgia, serif",
      fontSize: "clamp(34px, 4.5vw, 54px)",
      fontWeight: 400,
      lineHeight: 1.18,
      color: "var(--pine)",
      margin: "0 0 40px",
      letterSpacing: "-0.01em",
      textWrap: "balance"
    }}>
      You have not stumbled onto something new.
    </h2>
    <p style={{
      fontFamily: "Inter, sans-serif",
      fontSize: 16.5,
      lineHeight: 1.8,
      color: "var(--cedar)",
      opacity: 0.88,
      margin: "0 0 24px",
      textWrap: "pretty"
    }}>
      If this page happened to find you, - perhaps it is not coincidence.
    </p>
    <p style={{
      fontFamily: "Inter, sans-serif",
      fontSize: 16.5,
      lineHeight: 1.8,
      color: "var(--cedar)",
      opacity: 0.78,
      margin: "0 0 24px",
      textWrap: "pretty"
    }}>
      You have been led back to something ancient within yourself.
    </p>
    <p style={{
      fontFamily: "Inter, sans-serif",
      fontSize: 16.5,
      lineHeight: 1.8,
      color: "var(--cedar)",
      opacity: 0.68,
      margin: "0 0 56px",
      textWrap: "pretty"
    }}>
      Not to escape your life. Not to become someone else. But to listen again — to the Self calling the self back toward wholeness.
    </p>
  </div>
</section>;

// --------------------------------------------------------------------------
// APPLY — waitlist + apply CTA
// --------------------------------------------------------------------------
const Apply = ({ accent, ctaLabel, showKambo }) => {
  const [submitted, setSubmitted] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [submitError, setSubmitError] = useState(null);
  const [form, setForm] = useState({
    fullName: "", email: "", country: "", phone: "", source: "", sourceOther: "",
    ageConfirmed: false, calling: "", priorExperience: ""
  });

  const submit = async (e) => {
    e.preventDefault();
    setSubmitting(true);
    setSubmitError(null);
    try {
      const finalSource = form.source === "Other"
        ? (form.sourceOther?.trim() ? `Other: ${form.sourceOther.trim()}` : "Other")
        : form.source;
      const res = await fetch("/api/apply", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ ...form, source: finalSource })
      });
      const data = await res.json();
      if (res.status === 409 && data.duplicate) {
        setSubmitted("duplicate");
        return;
      }
      if (!res.ok) throw new Error(data.error || "Submission failed.");
      setSubmitted(true);
    } catch (err) {
      setSubmitError(err.message);
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <section id="apply" style={{
      background: "var(--pine)",
      color: "#F6F0E7",
      padding: "140px 56px",
      position: "relative",
      overflow: "hidden"
    }}>
      <div style={{
        position: "absolute", inset: 0,
        backgroundImage: "url('assets/waterfront.png')",
        backgroundSize: "cover", backgroundPosition: "center",
        opacity: 0.12, filter: "blur(3px)",
        pointerEvents: "none"
      }} />
      <div className="grid-2col" style={{
        position: "relative",
        maxWidth: 1100, margin: "0 auto",
        display: "grid",
        gridTemplateColumns: "1fr 1fr",
        gap: 80,
        alignItems: "center"
      }}>
        <div>
          <Eyebrow accent={accent} color="rgba(246,240,231,0.75)">Walk the path with us.</Eyebrow>
          <h2 style={{
            fontFamily: "'Cormorant Garamond', Georgia, serif",
            fontSize: "clamp(34px, 4vw, 52px)",
            fontWeight: 400,
            lineHeight: 1.15,
            margin: "24px 0 28px",
            letterSpacing: "-0.01em",
            textWrap: "balance"
          }}>
            We are not looking for volume. <em style={{ color: accent }}>We are looking for alignment.</em>
          </h2>
          <p style={{
            fontFamily: "Inter, sans-serif",
            fontSize: 16, lineHeight: 1.75,
            opacity: 0.85, margin: "0 0 24px",
            maxWidth: 460, textWrap: "pretty"
          }}>
            Request the retreat overview and begin the application process. This is not an instant booking or guarantee of acceptance. If your inquiry appears aligned, our facilitation team may invite you to a discovery call to review readiness, logistics, and next steps.
          </p>
          <div style={{
            display: "flex", gap: 16, alignItems: "center",
            opacity: 0.7, fontFamily: "Inter, sans-serif", fontSize: 13,
            letterSpacing: "0.04em"
          }}>
            <GoldRule width={32} accent={accent} />
            <span>July 9 evening arrival – July 15 morning departure · By application only</span>
          </div>
        </div>

        {/* Form card */}
        <form onSubmit={submit} style={{
          background: "var(--cream)",
          color: "var(--cedar)",
          padding: "44px 40px",
          display: submitted ? "none" : "grid",
          gap: 18
        }}>
          <div style={{
            fontFamily: "Inter, sans-serif",
            fontSize: 11, letterSpacing: "0.28em",
            textTransform: "uppercase",
            color: accent,
            marginBottom: 4
          }}>
            APPLICATION-BASED · NO PAYMENT REQUIRED
          </div>
          <h3 style={{
            fontFamily: "'Cormorant Garamond', Georgia, serif",
            fontSize: 26, fontWeight: 400, lineHeight: 1.2,
            color: "var(--pine)",
            margin: "0 0 8px"
          }}>
            Begin the Application Process.
          </h3>

          <Field label="Full name" required>
            <input required value={form.fullName} onChange={(e) => setForm({ ...form, fullName: e.target.value })} style={inputStyle} />
          </Field>
          <Field label="Email" required>
            <input required type="email" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} style={inputStyle} />
          </Field>
          <div className="grid-country-phone" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
            <Field label="Country / location" required>
              <input required value={form.country} onChange={(e) => setForm({ ...form, country: e.target.value })} style={inputStyle} />
            </Field>
            <Field label="Phone or WhatsApp">
              <input value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} style={inputStyle} />
            </Field>
          </div>
          <Field label="How did you hear about us?" required>
            <select
              required
              value={form.source}
              onChange={(e) => setForm({ ...form, source: e.target.value, sourceOther: "" })}
              style={{ ...inputStyle, cursor: "pointer", paddingRight: 24 }}>
              <option value="" disabled>Select a channel…</option>
              <option value="Instagram">Instagram</option>
              <option value="Facebook">Facebook</option>
              <option value="Word of mouth / Friend referral">Word of mouth / Friend referral</option>
              <option value="Google Search">Google Search</option>
              <option value="Email / Newsletter">Email / Newsletter</option>
              <option value="Podcast">Podcast</option>
              <option value="YouTube">YouTube</option>
              <option value="Retreat directory or listing site">Retreat directory or listing site</option>
              <option value="Other">Other…</option>
            </select>
          </Field>

          {form.source === "Other" &&
          <Field label="Please specify">
            <input
              value={form.sourceOther || ""}
              onChange={(e) => setForm({ ...form, sourceOther: e.target.value })}
              placeholder="Tell us where you heard about us"
              style={inputStyle} />
          </Field>
          }

          <div style={{ display: "flex", alignItems: "flex-start", gap: 10, marginTop: 4 }}>
            <input
              required
              type="checkbox"
              id="age-confirmed"
              checked={form.ageConfirmed}
              onChange={(e) => setForm({ ...form, ageConfirmed: e.target.checked })}
              style={{ marginTop: 3, accentColor: "var(--gold)", flexShrink: 0, width: 15, height: 15, cursor: "pointer" }} />
            <label htmlFor="age-confirmed" style={{
              fontFamily: "Inter, sans-serif",
              fontSize: 13, lineHeight: 1.5,
              color: "var(--cedar)", cursor: "pointer"
            }}>
              I confirm I am 18 years of age or older.
            </label>
          </div>

          <Field label="What is calling you to this retreat at this time?" required>
            <textarea
              required
              value={form.calling}
              onChange={(e) => setForm({ ...form, calling: e.target.value })}
              style={{ ...inputStyle, minHeight: 80, resize: "vertical", paddingTop: 10, paddingBottom: 10 }} />
          </Field>

          <Field label="Any previous experience with retreats, ceremony, breathwork, meditation, yoga, prayer, medicines or deep inner work?">
            <textarea
              value={form.priorExperience}
              onChange={(e) => setForm({ ...form, priorExperience: e.target.value })}
              style={{ ...inputStyle, minHeight: 80, resize: "vertical", paddingTop: 10, paddingBottom: 10 }} />
          </Field>

          {submitError &&
          <p style={{
            fontFamily: "Inter, sans-serif",
            fontSize: 13, lineHeight: 1.5,
            color: "#9B2020",
            margin: "4px 0 0",
            padding: "10px 14px",
            background: "rgba(155,32,32,0.08)",
            border: "1px solid rgba(155,32,32,0.2)"
          }}>
            {submitError}
          </p>
          }

          <button type="submit" disabled={submitting} style={{
            background: submitting ? "rgba(183,138,67,0.6)" : accent,
            color: "#F6F0E7",
            border: "none",
            padding: "16px 24px",
            fontFamily: "Inter, sans-serif",
            fontSize: 13,
            letterSpacing: "0.16em",
            textTransform: "uppercase",
            fontWeight: 500,
            cursor: submitting ? "not-allowed" : "pointer",
            marginTop: 10,
            transition: "background .2s ease"
          }}>
            {submitting ? "Submitting…" : "APPLY FOR CONSIDERATION →"}
          </button>


          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
            <GhostButton
              href="assets/retreat-overview.pdf"
              variant="onLight"
              onClick={() => navigator.sendBeacon ? navigator.sendBeacon("/api/track/view") : fetch("/api/track/view", { method: "POST", keepalive: true }).catch(() => {})}
              style={{ justifyContent: "center", fontSize: 12, padding: "12px 12px" }}>
              View Overview
            </GhostButton>
            <GhostButton
              href="assets/retreat-overview.pdf"
              download="retreat-overview.pdf"
              variant="onLight"
              onClick={trackDownload}
              style={{ justifyContent: "center", fontSize: 12, padding: "12px 12px" }}>
              Download
            </GhostButton>
          </div>

          <p style={{
            fontFamily: "Inter, sans-serif",
            fontSize: 11, lineHeight: 1.6,
            opacity: 0.6, margin: "8px 0 0",
            textWrap: "pretty"
          }}>
            By joining you confirm you are 18 or older and
            understand this retreat is offered for spiritual, educational,
            reflective, and general wellness purposes only.
          </p>
        </form>

        {submitted === true &&
        <div style={{
          background: "var(--cream)", color: "var(--cedar)",
          padding: "60px 40px", textAlign: "center"
        }}>
          <div style={{ color: accent, fontSize: 32, marginBottom: 12, fontFamily: "'Cormorant Garamond', Georgia, serif" }}>✦</div>
          <h3 style={{
            fontFamily: "'Cormorant Garamond', Georgia, serif",
            fontSize: 28, color: "var(--pine)", margin: "0 0 12px"
          }}>You are on the waitlist.</h3>
          <p style={{ fontFamily: "Inter, sans-serif", fontSize: 15, lineHeight: 1.7, opacity: 0.8 }}>
            We will be in touch with the retreat overview and application details.
          </p>
        </div>
        }

        {submitted === "duplicate" &&
        <div style={{
          background: "var(--cream)", color: "var(--cedar)",
          padding: "60px 40px", textAlign: "center"
        }}>
          <div style={{ color: accent, fontSize: 32, marginBottom: 12, fontFamily: "'Cormorant Garamond', Georgia, serif" }}>✦</div>
          <h3 style={{
            fontFamily: "'Cormorant Garamond', Georgia, serif",
            fontSize: 28, color: "var(--pine)", margin: "0 0 12px"
          }}>You are already on the waitlist.</h3>
          <p style={{ fontFamily: "Inter, sans-serif", fontSize: 15, lineHeight: 1.7, opacity: 0.8, maxWidth: 360, margin: "0 auto" }}>
            We already have your details on file. We will be in touch with the retreat overview and next steps.
          </p>
        </div>
        }
      </div>

      {showKambo &&
      <div style={{
        position: "relative",
        maxWidth: 920, margin: "100px auto 0",
        padding: "32px 36px",
        background: "rgba(246,240,231,0.06)",
        border: "1px solid rgba(246,240,231,0.18)",
        fontFamily: "'Cormorant Garamond', Georgia, serif",
        fontStyle: "italic",
        fontSize: 17, lineHeight: 1.6,
        color: "rgba(246,240,231,0.85)",
        textWrap: "pretty"
      }}>
          <span style={{
          fontFamily: "Inter, sans-serif", fontStyle: "normal",
          fontSize: 10, letterSpacing: "0.32em", textTransform: "uppercase",
          color: accent, display: "block", marginBottom: 10
        }}>For ceremony-aware applicants</span>
          This retreat is designed for adults already familiar with serious
          ceremonial work, including prayer, breath, ancestral music,
          integration, and Kambo-aware transformational communities — with all
          participation subject to application, screening, consent, and
          preparation protocols.
        </div>
      }
    </section>);

};

const Field = ({ label, required, children }) =>
<label style={{ display: "grid", gap: 6 }}>
    <span style={{
    fontFamily: "Inter, sans-serif",
    fontSize: 10, letterSpacing: "0.22em",
    textTransform: "uppercase",
    color: "var(--pine)",
    opacity: 0.75
  }}>
      {label} {required && <span style={{ opacity: 0.5 }}>*</span>}
    </span>
    {children}
  </label>;


const inputStyle = {
  background: "transparent",
  border: "none",
  borderBottom: "1px solid rgba(31,38,34,0.3)",
  padding: "10px 0 8px",
  fontFamily: "Inter, sans-serif",
  fontSize: 15,
  color: "var(--cedar)",
  width: "100%"
};

// --------------------------------------------------------------------------
// FOOTER + COMPLIANCE
// --------------------------------------------------------------------------
const Footer = ({ accent, complianceLocation }) =>
<footer style={{
  background: "#1F2622",
  color: "rgba(246,240,231,0.7)",
  padding: "80px 56px 56px"
}}>
    <div style={{ maxWidth: 1200, margin: "0 auto" }}>
      <div className="grid-footer" style={{
      display: "grid",
      gridTemplateColumns: "1.4fr 1fr 1fr",
      gap: 56,
      paddingBottom: 48,
      borderBottom: "1px solid rgba(246,240,231,0.12)"
    }}>
        <div>
          <div style={{
          fontFamily: "'Cormorant Garamond', Georgia, serif",
          fontSize: 22, color: "#F6F0E7",
          marginBottom: 8
        }}>
            Atlantic Canada Ceremonial Wellness Intensive
          </div>
          <p style={{
          fontFamily: "Inter, sans-serif",
          fontSize: 13, lineHeight: 1.7,
          opacity: 0.7, maxWidth: 380, margin: 0,
          textWrap: "pretty"
        }}>
            A rare waterfront ceremonial container with international
            facilitation, ancestral music, prayer, nature, and disciplined inner work.
          </p>
        </div>
        <div>
          <FooterHead accent={accent}>Retreat</FooterHead>
          <FooterLink>About the retreat</FooterLink>
          <FooterLink>Facilitator</FooterLink>
          <FooterLink>Investment</FooterLink>
          <FooterLink>Application</FooterLink>
        </div>
        <div>
          <FooterHead accent={accent}>Contact</FooterHead>
          <FooterLink>Pantheonadventures@gmail.com</FooterLink>
          <FooterLink>New Brunswick · Canada</FooterLink>
          <FooterLink>By application only</FooterLink>
        </div>
      </div>

      {complianceLocation === "footer" &&
    <div style={{
      padding: "32px 0",
      borderBottom: "1px solid rgba(246,240,231,0.12)",
      fontFamily: "Inter, sans-serif",
      fontSize: 12, lineHeight: 1.7,
      color: "rgba(246,240,231,0.6)",
      maxWidth: 920,
      textWrap: "pretty"
    }}>
          <span style={{
        display: "block", color: accent,
        fontSize: 10, letterSpacing: "0.32em",
        textTransform: "uppercase", marginBottom: 10
      }}>
            Compliance disclaimer
          </span>
          This retreat is offered for spiritual, educational, reflective, and
          general wellness purposes only. It is not medical care, psychotherapy,
          addiction treatment, trauma treatment, detox, or a substitute for
          professional healthcare. No medical, psychological, therapeutic,
          detox, or guaranteed transformational outcomes are promised or guaranteed.
        </div>
    }

      <div style={{
      marginTop: 32,
      display: "flex", justifyContent: "space-between", flexWrap: "wrap",
      gap: 16, fontSize: 11,
      fontFamily: "Inter, sans-serif",
      opacity: 0.5
    }}>
        <span>© 2026 Atlantic Canada Ceremonial Wellness Intensive</span>
        <span style={{ display: "flex", gap: 24 }}>
          <a href="#" style={{ color: "inherit", textDecoration: "none" }}>Top</a>
        </span>
      </div>
    </div>
  </footer>;


const FooterHead = ({ children, accent }) =>
<h4 style={{
  fontFamily: "Inter, sans-serif",
  fontSize: 11, letterSpacing: "0.28em",
  textTransform: "uppercase",
  color: accent, fontWeight: 500,
  margin: "0 0 18px"
}}>{children}</h4>;

const FooterLink = ({ children }) =>
<div style={{
  fontFamily: "'Cormorant Garamond', Georgia, serif",
  fontSize: 16, marginBottom: 10,
  color: "rgba(246,240,231,0.78)"
}}>{children}</div>;


// Small inline compliance band (when complianceLocation === "inline")
const ComplianceInline = ({ accent }) =>
<section style={{
  background: "var(--taupe)",
  padding: "40px 56px",
  borderTop: `1px solid ${accent}33`,
  borderBottom: `1px solid ${accent}33`
}}>
    <div style={{
    maxWidth: 920, margin: "0 auto",
    fontFamily: "Inter, sans-serif",
    fontSize: 12, lineHeight: 1.7,
    color: "var(--cedar)", opacity: 0.78,
    textWrap: "pretty"
  }}>
      <span style={{
      display: "inline-block", color: accent,
      fontSize: 10, letterSpacing: "0.32em",
      textTransform: "uppercase", marginRight: 12, fontWeight: 500
    }}>
        Compliance disclaimer ·
      </span>
      This retreat is offered for spiritual, educational, reflective, and
      general wellness purposes only. It is not medical care, psychotherapy,
      addiction treatment, trauma treatment, detox, or a substitute for
      professional healthcare. No medical, psychological, therapeutic,
      detox, or guaranteed transformational outcomes are promised or guaranteed.
    </div>
  </section>;


// --------------------------------------------------------------------------
// APP
// --------------------------------------------------------------------------
function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const accent = ACCENTS[tweaks.accentColor]?.hex || ACCENTS.gold.hex;

  return (
    <>
      <a
        href="#main-content"
        className="skip-to-content"
        onClick={e => {
          e.preventDefault();
          const target = document.getElementById("main-content");
          if (target) { target.focus(); }
        }}>
        Skip to main content
      </a>
      <Hero
        headline={tweaks.headline}
        ctaLabel={tweaks.ctaLabel}
        accent={accent} />
      
      <RealityCheck accent={accent} />
      <ForNotFor accent={accent} />
      <Rhythm accent={accent} />
      <DevotionalCurrent accent={accent} />
      <Facilitator accent={accent} />
      <Investment accent={accent} ctaLabel={tweaks.ctaLabel} />
      {tweaks.complianceLocation === "inline" && <ComplianceInline accent={accent} />}
      <Faq accent={accent} />
      <FeelTheCall accent={accent} />
      <Apply accent={accent} ctaLabel={tweaks.ctaLabel} showKambo={tweaks.showKambo} />
      <Footer accent={accent} complianceLocation={tweaks.complianceLocation} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Hero">
          <TweakText
            label="Headline"
            value={tweaks.headline}
            onChange={(v) => setTweak("headline", v)}
            multiline />
          
          <TweakText
            label="Primary CTA label"
            value={tweaks.ctaLabel}
            onChange={(v) => setTweak("ctaLabel", v)} />
          
        </TweakSection>
        <TweakSection title="Visual">
          <TweakRadio
            label="Accent color"
            value={tweaks.accentColor}
            onChange={(v) => setTweak("accentColor", v)}
            options={[
            { value: "gold", label: "Prayer Gold" },
            { value: "umber", label: "Ceremonial Umber" }]
            } />
          
        </TweakSection>
        <TweakSection title="Compliance & audience">
          <TweakRadio
            label="Compliance disclaimer placement"
            value={tweaks.complianceLocation}
            onChange={(v) => setTweak("complianceLocation", v)}
            options={[
            { value: "footer", label: "Footer (calm)" },
            { value: "inline", label: "Inline band" }]
            } />
          
          <TweakToggle
            label="Show Kambo-aware audience signal"
            value={tweaks.showKambo}
            onChange={(v) => setTweak("showKambo", v)} />
          
        </TweakSection>
      </TweaksPanel>
    </>);

}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);