// CTA actions: "calendly" opens Maya's booking page in a new tab,
// "apply" scrolls to the petition form (full mode), "waitlist"
// scrolls to the petition form (mini mode) by setting the hash.
const TIERS = [
  {
    tag: "Curiosity",
    name: "The Call",
    price: "0",
    desc: "Fifteen minutes with Maya on Zoom. We see if Neverland is your door. No obligation either way.",
    items: ["15 min · video call", "Direct with Maya and Mathias", "Booked via Calendly", "Ask for whatever you need"],
    featured: false,
    cta: "Book the Call",
    action: "calendly",
  },
  {
    tag: "Edition 01 · 14 — 21 August 2026",
    name: "The Explorer",
    price: "1,300",
    deposit: "€300 deposit holds your seat · up to 8 weeks before arrival",
    desc: "Twelve seats. Seven days. One private island.",
    includesLabel: "Includes",
    items: [
      "7 nights on a private island",
      "A full escape from your daily world",
      "All meals, chef-prepared",
      (<>Daily breathwork, meditation <span className="amp">&amp;</span> embodiment with Maya</>),
      (<>Ritual photography session with Johnny <span className="amp">&amp;</span> Mathias</>),
      (<>24+ edited photographs of you — <em>the part you can frame</em></>),
      (<>Sauna, fire, lake <span className="amp">&amp;</span> boats</>),
      "Space for emotional immersion",
      "Time to ask better questions",
      (<>Pre-trip integration call<span className="tier-note">60 minutes with Maya before arrival, so you arrive with intention rather than just a suitcase.</span></>),
      (<>Post-trip community access<span className="tier-note">Private group + integration call 6 weeks after, because returning from Neverland should come with a soft landing.</span></>),
    ],
    featured: true,
    cta: "Apply to Neverland",
    action: "apply",
  },
  {
    tag: "Edition 02",
    name: "The Waitlist",
    price: "TBA",
    desc: "Future editions will be larger, more produced, and more expensive. Join the waitlist — Maya writes to you before anyone else.",
    items: ["First access", "Edition 02 dates · TBA", "Sunday Letter included", "Pricing locked at announce"],
    featured: false,
    cta: "Join the Waitlist",
    action: "waitlist",
  },
];

function scrollToPetition(hash) {
  // Set the URL hash first so Petition's hashchange listener picks up
  // the right mode (apply vs waitlist), then smooth-scroll there.
  if (window.location.hash === hash) {
    // Same hash — manually dispatch so the form resets
    window.dispatchEvent(new HashChangeEvent("hashchange"));
  } else {
    history.replaceState(null, "", hash);
    window.dispatchEvent(new HashChangeEvent("hashchange"));
  }
  document.getElementById("petition")?.scrollIntoView({ behavior: "smooth" });
}

function handleTierCTA(action) {
  if (action === "calendly") {
    const url = (typeof window !== "undefined" && window.MAYA_CALENDLY_URL) || "";
    if (!url || url.includes("REPLACE_ME")) {
      alert("Calendly link not configured yet. Tell Wojtek to plug Maya's booking URL in.");
      return;
    }
    window.open(url, "_blank", "noopener,noreferrer");
  } else if (action === "waitlist") {
    scrollToPetition("#petition-waitlist");
  } else {
    scrollToPetition("#petition");
  }
}

function Tier({ tier }) {
  return (
    <div className={"tier" + (tier.featured ? " featured" : "")}>
      <span className="tag">{tier.tag}</span>
      <span className="name">{tier.name}</span>
      <span className="price">
        {tier.price === "TBA" ? <span style={{ fontSize: 36 }}>TBA</span> :
          tier.price === "0" ? <span style={{ fontSize: 36 }}>Free</span> :
          <React.Fragment><span className="cur">€</span>{tier.price}</React.Fragment>
        }
      </span>
      {tier.deposit ? <span className="price-deposit">{tier.deposit}</span> : null}
      <span className="desc">{tier.desc}</span>
      {tier.includesLabel ? <span className="tier-includes">{tier.includesLabel}</span> : null}
      <ul>
        {tier.items.map((it, i) => <li key={i}>{it}</li>)}
      </ul>
      <button
        className={"btn" + (tier.featured ? " solid on-dark" : "")}
        style={{ marginTop: "auto" }}
        onClick={() => handleTierCTA(tier.action)}
      >
        {tier.cta} ☞
      </button>
    </div>
  );
}

function Tithe() {
  return (
    <section id="tithe">
      <div className="grain"></div>
      <div className="container">
        <SectionHead
          eyebrow="The Investment · Edition 01 · VI"
          title="The investment in your inner paradise."
          lede={<>Twelve seats. €1,300 per explorer. Boats, meals, sauna <span className="amp">&amp;</span> 24 photographs of you — included.</>}
          ornaments={["alchemy-fire", "moon-full", "alchemy-water"]}
        />
        <div className="tithe">
          {TIERS.map((t, i) => (
            <Reveal key={t.name} delay={i * 100}>
              <Tier tier={t} />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Tithe, Tier, TIERS });