"use client";

import Image from "next/image";
import Link from "next/link";
import Navigation from "@/components/Navigation";

export default function EmbodimentCircle() {
  return (
    <main className="bg-nusqool-cream">
      <Navigation />

      {/* Hero Section */}
      <section className="relative min-h-[80vh] flex items-center pt-20">
        <Image
          src="/dandelion-hero.png"
          alt="Dandelion meadow"
          fill
          priority
          className="object-cover"
        />
        <div className="absolute inset-0 bg-gradient-to-b from-nusqool-cream/80 via-nusqool-cream/50 to-nusqool-cream" />

        <div className="relative z-10 max-w-4xl mx-auto px-6 text-center">
          <p className="text-nusqool-sage font-medium uppercase tracking-wider mb-4">
            Nusqool Community
          </p>
          <h1 className="text-4xl md:text-5xl lg:text-6xl font-serif text-nusqool-brown mb-6 leading-tight">
            Embodiment Circle
          </h1>
          <p className="text-xl md:text-2xl text-nusqool-warmGray max-w-3xl mx-auto mb-8 leading-relaxed">
            A 12-week celebration of your whole self — a seasonal journey into safety, creativity,
            courage, and aligned leadership, guided by a faculty of 18 incredibly special human beings.
          </p>
          <p className="text-lg text-nusqool-brown mb-8">
            Together, we remember who we are and support what wants to emerge next.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <a
              href="https://dandelion.nusqool.com/login"
              className="px-8 py-4 bg-nusqool-yellow text-nusqool-brown font-medium rounded-sm hover:bg-opacity-90 transition-all text-lg"
            >
              Join Today
            </a>
            <a
              href="#pricing"
              className="px-8 py-4 border-2 border-nusqool-brown text-nusqool-brown font-medium rounded-sm hover:bg-nusqool-brown hover:text-white transition-all text-lg"
            >
              See Pricing
            </a>
          </div>
        </div>
      </section>

      {/* Start Date Banner */}
      <section className="bg-nusqool-yellow py-6">
        <div className="max-w-4xl mx-auto px-6 text-center">
          <p className="text-xl md:text-2xl font-serif text-nusqool-brown">
            The next Embodiment Circle starts <strong>January 18, 2026!</strong>
          </p>
        </div>
      </section>

      {/* About Section */}
      <section className="py-20 px-6">
        <div className="max-w-4xl mx-auto">
          <div className="text-center mb-16">
            <span className="text-3xl mb-4 block">✨</span>
            <h2 className="text-3xl md:text-4xl font-serif text-nusqool-brown mb-4">
              About the Embodiment Circle
            </h2>
            <p className="text-xl text-nusqool-sage font-medium">
              The Safety, Freedom & Joy of Being Your True Self
            </p>
          </div>

          <div className="space-y-8 text-lg text-nusqool-warmGray leading-relaxed">
            <p className="text-xl text-center text-nusqool-brown border-l-4 border-nusqool-yellow pl-6 py-4 bg-white rounded-r-sm">
              A 12-week heart-centered safe space where people come together to practice being
              fully themselves — safely, creatively, and in relationship.
            </p>

            <p>
              This is not a program to fix you, teach you new skills or help you become more
              productive. It is a <strong>celebration</strong>, a <strong>homecoming</strong>,
              and a <strong>collective remembering</strong> of who we are and why we&apos;re here.
            </p>

            <p>
              Now in its <strong>5th year</strong>, Embodiment Circle brings together a faculty
              of 18 incredibly special human beings — healers, entrepreneurs, teachers, artists,
              somatic practitioners, musicians, dancers, creatives each offering their unique
              lived experience, wisdom, and medicine in service of the whole.
            </p>
          </div>
        </div>
      </section>

      {/* Seasonal Arc */}
      <section className="py-20 px-6 bg-white">
        <div className="max-w-5xl mx-auto">
          <div className="text-center mb-16">
            <span className="text-3xl mb-4 block">🌙</span>
            <h2 className="text-3xl md:text-4xl font-serif text-nusqool-brown mb-4">
              The Seasonal Arc
            </h2>
            <p className="text-lg text-nusqool-warmGray max-w-3xl mx-auto">
              Through five iterations, this online program has evolved into a deeply relational,
              trauma-informed, and seasonal container where participants are witnessed in their
              wholeness and supported to journey through the seasons.
            </p>
          </div>

          <p className="text-center text-nusqool-brown mb-12">
            We&apos;ll circle up every <strong>Thursday from 7-9pm EST</strong> to explore three chapters:
          </p>

          <div className="grid md:grid-cols-3 gap-8">
            <div className="bg-nusqool-cream p-8 rounded-sm text-center">
              <span className="text-4xl mb-4 block">❄️</span>
              <h3 className="text-xl font-serif text-nusqool-brown mb-3">
                Feeling Safe Enough
              </h3>
              <p className="text-nusqool-warmGray">
                Finding nervous system calm, safety and presence in the depths of Winter
              </p>
            </div>

            <div className="bg-nusqool-cream p-8 rounded-sm text-center">
              <span className="text-4xl mb-4 block">🔥</span>
              <h3 className="text-xl font-serif text-nusqool-brown mb-3">
                Feeling our Hearts
              </h3>
              <p className="text-nusqool-warmGray">
                Cultivating compassion, deep listening and sensing through our oracular bodies,
                setting intentions during Imbolc and dancing with the laws of nature
              </p>
            </div>

            <div className="bg-nusqool-cream p-8 rounded-sm text-center">
              <span className="text-4xl mb-4 block">🌷</span>
              <h3 className="text-xl font-serif text-nusqool-brown mb-3">
                Creating as our True Self
              </h3>
              <p className="text-nusqool-warmGray">
                Practicing courage, creativity, expression, shifting perspectives as we
                break ground and emerge in Spring
              </p>
            </div>
          </div>

          <div className="mt-12 text-center">
            <p className="text-nusqool-warmGray">
              <span className="text-xl mr-2">🔮</span>
              Every month we will have a collective reflection session dedicated to deepen
              our learnings and connections with each other.
            </p>
          </div>
        </div>
      </section>

      {/* In-Person Retreats */}
      <section className="py-20 px-6 bg-nusqool-sage/10">
        <div className="max-w-4xl mx-auto">
          <div className="text-center mb-12">
            <span className="text-3xl mb-4 block">⭐</span>
            <h2 className="text-3xl md:text-4xl font-serif text-nusqool-brown mb-4">
              New This Year: In-Person Retreats!
            </h2>
            <p className="text-lg text-nusqool-warmGray">
              We will begin and end this 12-week online gathering with two in-person retreats
              on two new moons that are <strong>included in your registration</strong>:
            </p>
          </div>

          <div className="grid md:grid-cols-2 gap-8">
            <div className="bg-white p-8 rounded-sm">
              <span className="text-3xl mb-4 block">🛖</span>
              <h3 className="text-xl font-serif text-nusqool-brown mb-2">Opening Retreat</h3>
              <p className="text-nusqool-sage font-medium mb-2">
                Sunday January 18, 2026, 11am-5pm
              </p>
              <p className="text-nusqool-warmGray">at Nusqool, Kawartha Lakes</p>
            </div>

            <div className="bg-white p-8 rounded-sm">
              <span className="text-3xl mb-4 block">🌲</span>
              <h3 className="text-xl font-serif text-nusqool-brown mb-2">Closing Retreat</h3>
              <p className="text-nusqool-sage font-medium mb-2">
                Saturday April 18, 2026, 11am-5pm
              </p>
              <p className="text-nusqool-warmGray">at The Farm, Hillsdale</p>
            </div>
          </div>
        </div>
      </section>

      {/* What You'll Get */}
      <section className="py-20 px-6 bg-white">
        <div className="max-w-4xl mx-auto">
          <h2 className="text-3xl md:text-4xl font-serif text-nusqool-brown mb-12 text-center">
            What You&apos;ll Get
          </h2>

          <div className="space-y-6">
            {[
              {
                icon: "🛖",
                title: "Opening In-Person Somatic Retreat",
                desc: "Embodying Yourself where you'll learn Qi Gong and the Bagua with Jesse Gottlieb-Jacob, Somatic Inquiry with LJ Bartle and TRE with Thu Nguyen."
              },
              {
                icon: "🌀",
                title: "12 weekly live online sessions",
                desc: "Thursdays from Jan 22-April 16th from 7-9pm EST (recordings will be posted within 3 days)"
              },
              {
                icon: "🌾",
                title: "Closing In-Person Retreat",
                desc: "Creating as Your True Self with Creative Artist & Facilitator Mirka Loiselle, Delicious Food Experience & Homesteading Extraordinaire: Anahita Belanger, and more musicians and artists."
              },
              {
                icon: "✨",
                title: "Embodiment practices and wisdom",
                desc: "From coaches, entrepreneurs, healers, artists, and creatives"
              },
              {
                icon: "🤍",
                title: "A non-hierarchical circle pedagogy container",
                desc: ""
              },
              {
                icon: "🌿",
                title: "A culture of care, trust, and mutual co-regulation",
                desc: "Of our nervous system"
              },
              {
                icon: "📕",
                title: "A digital workbook",
                desc: "To support your learning arc"
              },
              {
                icon: "🌐",
                title: "Meet the others",
                desc: "Who value kindness, inner transformation, and have taken steps in choosing to live as their true self"
              }
            ].map((item, i) => (
              <div key={i} className="flex gap-4 items-start bg-nusqool-cream p-6 rounded-sm">
                <span className="text-2xl flex-shrink-0">{item.icon}</span>
                <div>
                  <h3 className="font-medium text-nusqool-brown">{item.title}</h3>
                  {item.desc && <p className="text-nusqool-warmGray mt-1">{item.desc}</p>}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Who This Is For */}
      <section className="py-20 px-6">
        <div className="max-w-4xl mx-auto">
          <h2 className="text-3xl md:text-4xl font-serif text-nusqool-brown mb-8 text-center">
            Who This Is For
          </h2>

          <div className="bg-white p-8 rounded-sm mb-8">
            <p className="text-lg text-nusqool-brown mb-6">The Embodiment Circle is for:</p>
            <ul className="space-y-3 text-nusqool-warmGray">
              <li className="flex items-start gap-3">
                <span className="text-nusqool-yellow">•</span>
                Healers, coaches, facilitators, educators, and creatives
              </li>
              <li className="flex items-start gap-3">
                <span className="text-nusqool-yellow">•</span>
                Entrepreneurs, artists, and changemakers seeking community
              </li>
              <li className="flex items-start gap-3">
                <span className="text-nusqool-yellow">•</span>
                People in transition — personal, professional, or spiritual who are looking
                to lead a more heart-centred life of purpose, meaning, and alignment.
              </li>
              <li className="flex items-start gap-3">
                <span className="text-nusqool-yellow">•</span>
                Those longing to reconnect with their creativity, courage, and intuition.
              </li>
            </ul>
          </div>

          <p className="text-center text-nusqool-sage font-medium">
            This is a BIPOC-majority, gender-diverse, trauma-informed space grounded in
            nervous system awareness and relational care.
          </p>
        </div>
      </section>

      {/* Why This Is a Celebration */}
      <section className="py-20 px-6 bg-nusqool-brown text-white">
        <div className="max-w-3xl mx-auto text-center">
          <span className="text-3xl mb-4 block">💛</span>
          <h2 className="text-3xl md:text-4xl font-serif text-nusqool-yellow mb-8">
            Why This Is a Celebration
          </h2>
          <p className="text-xl leading-relaxed text-white/90">
            What transforms people here isn&apos;t one technique or facilitator. It&apos;s the
            experience of being <strong className="text-nusqool-yellow">seen</strong>,
            <strong className="text-nusqool-yellow"> witnessed</strong>, and
            <strong className="text-nusqool-yellow"> celebrated</strong> in your wholeness.
            Once you&apos;ve been reflected as your True Self, you can&apos;t unsee it.
            And neither can the world.
          </p>
        </div>
      </section>

      {/* What This Is Not */}
      <section className="py-20 px-6 bg-white">
        <div className="max-w-4xl mx-auto">
          <h2 className="text-3xl md:text-4xl font-serif text-nusqool-brown mb-8 text-center">
            What This Is Not
          </h2>

          <div className="grid md:grid-cols-2 gap-8 mb-8">
            <div className="space-y-4">
              <p className="text-nusqool-warmGray">This is <strong>not</strong>:</p>
              <ul className="space-y-2 text-nusqool-warmGray">
                <li className="flex items-center gap-2">
                  <span className="text-red-400">✕</span> a therapy group
                </li>
                <li className="flex items-center gap-2">
                  <span className="text-red-400">✕</span> a hustle or productivity container
                </li>
                <li className="flex items-center gap-2">
                  <span className="text-red-400">✕</span> a place to rescue or be rescued
                </li>
                <li className="flex items-center gap-2">
                  <span className="text-red-400">✕</span> a hierarchy with one voice at the center
                </li>
              </ul>
            </div>
            <div className="bg-nusqool-cream p-6 rounded-sm">
              <p className="text-nusqool-brown">
                Participants are responsible for their own needs and self-regulation.
              </p>
              <p className="text-nusqool-warmGray mt-4">
                This allows the space to remain nourishing and sustainable for everyone.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* If You Feel the Yes */}
      <section className="py-20 px-6 bg-nusqool-sage/10">
        <div className="max-w-3xl mx-auto text-center">
          <h2 className="text-3xl md:text-4xl font-serif text-nusqool-brown mb-8">
            If You Feel the Yes
          </h2>
          <p className="text-xl text-nusqool-warmGray leading-relaxed mb-6">
            The Embodiment Circle is a group process in liminal space: a place to plant seeds,
            remember your gifts, and be held as you step forward.
          </p>
          <p className="text-xl text-nusqool-brown font-medium">
            If your body feels a quiet yes, you&apos;re already part of the circle.
          </p>
        </div>
      </section>

      {/* Pricing */}
      <section id="pricing" className="py-20 px-6 bg-white">
        <div className="max-w-5xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-serif text-nusqool-brown mb-4">
              Pricing & Accessibility
            </h2>
            <p className="text-lg text-nusqool-warmGray max-w-3xl mx-auto">
              Embodiment Circle #5 (January 18 – April 18, 2026) includes full access to the
              12-week program plus one year of membership in the Nusqool Heartbeat community.
            </p>
            <p className="text-nusqool-sage mt-4">
              All options offer the same experience, access, and belonging.<br />
              No proof of income required — we trust you to choose what is honest and sustainable for you.
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
            {/* Standard */}
            <div className="bg-nusqool-cream p-6 rounded-sm border-2 border-nusqool-yellow">
              <div className="text-center mb-6">
                <span className="text-sm text-nusqool-sage uppercase tracking-wider">Standard Contribution</span>
                <div className="mt-2">
                  <span className="text-3xl font-serif text-nusqool-brown">$1,010</span>
                  <span className="text-nusqool-warmGray"> one-time</span>
                </div>
                <p className="text-sm text-nusqool-warmGray mt-1">
                  or $88/month for 12 months
                </p>
              </div>
              <p className="text-sm text-nusqool-warmGray text-center">
                This rate makes the program sustainable and supports scholarships for others.
              </p>
            </div>

            {/* 50% Scholarship */}
            <div className="bg-white p-6 rounded-sm border border-nusqool-brown/20">
              <div className="text-center mb-6">
                <span className="text-sm text-nusqool-sage uppercase tracking-wider">50% off Scholarship</span>
                <span className="text-xs bg-nusqool-sage/20 text-nusqool-sage px-2 py-1 rounded ml-2">5 spots</span>
                <div className="mt-2">
                  <span className="text-3xl font-serif text-nusqool-brown">$505</span>
                  <span className="text-nusqool-warmGray"> one-time</span>
                </div>
                <p className="text-sm text-nusqool-warmGray mt-1">
                  or $44/month for 12 months
                </p>
              </div>
              <p className="text-sm text-nusqool-warmGray text-center">
                For those who would benefit from additional financial support.
              </p>
            </div>

            {/* Community Care */}
            <div className="bg-white p-6 rounded-sm border border-nusqool-brown/20">
              <div className="text-center mb-6">
                <span className="text-sm text-nusqool-sage uppercase tracking-wider">Community Care</span>
                <span className="text-xs bg-nusqool-sage/20 text-nusqool-sage px-2 py-1 rounded ml-2">5 spots</span>
                <div className="mt-2">
                  <span className="text-3xl font-serif text-nusqool-brown">$252.50</span>
                  <span className="text-nusqool-warmGray"> one-time</span>
                </div>
                <p className="text-sm text-nusqool-warmGray mt-1">
                  or $22/month for 12 months
                </p>
              </div>
              <p className="text-sm text-nusqool-warmGray text-center">
                For those navigating significant financial constraints.
              </p>
            </div>

            {/* Full Scholarship */}
            <div className="bg-white p-6 rounded-sm border border-nusqool-brown/20">
              <div className="text-center mb-6">
                <span className="text-sm text-nusqool-sage uppercase tracking-wider">Full Scholarship</span>
                <span className="text-xs bg-nusqool-sage/20 text-nusqool-sage px-2 py-1 rounded ml-2">2 spots</span>
                <div className="mt-2">
                  <span className="text-3xl font-serif text-nusqool-brown">$0</span>
                </div>
                <p className="text-sm text-nusqool-warmGray mt-1">
                  &nbsp;
                </p>
              </div>
              <p className="text-sm text-nusqool-warmGray text-center">
                Offered with care for someone who would otherwise be unable to participate.
              </p>
            </div>
          </div>

          <div className="bg-nusqool-cream p-6 rounded-sm text-center mb-8">
            <p className="text-nusqool-brown mb-4">
              <strong>Your contribution supports:</strong>
            </p>
            <div className="flex flex-wrap justify-center gap-4 text-nusqool-warmGray">
              <span>A faculty of 18 facilitators</span>
              <span>•</span>
              <span>In-person retreat space and programming</span>
              <span>•</span>
              <span>Scholarships and community care</span>
              <span>•</span>
              <span>Stewardship of this relational container</span>
            </div>
          </div>

          <div className="text-center">
            <a
              href="https://dandelion.nusqool.com/login"
              className="inline-block px-10 py-4 bg-nusqool-yellow text-nusqool-brown font-medium rounded-sm hover:bg-opacity-90 transition-all text-lg"
            >
              Join Today
            </a>
            <p className="text-sm text-nusqool-warmGray mt-4">
              For scholarship applications, a discount code will be sent after review.
            </p>
          </div>
        </div>
      </section>

      {/* How We Practice Together */}
      <section className="py-20 px-6">
        <div className="max-w-4xl mx-auto">
          <div className="text-center mb-12">
            <span className="text-3xl mb-4 block">🌿</span>
            <h2 className="text-3xl md:text-4xl font-serif text-nusqool-brown mb-4">
              How We Practice Together
            </h2>
            <p className="text-xl text-nusqool-sage">
              This is a practice space — not a performance space.
            </p>
          </div>

          <div className="bg-white p-8 rounded-sm mb-8">
            <p className="text-nusqool-brown mb-6">You&apos;re invited to:</p>
            <ul className="space-y-3 text-nusqool-warmGray">
              <li className="flex items-start gap-3">
                <span className="text-nusqool-yellow">•</span>
                Arrive as you are: regulated or not
              </li>
              <li className="flex items-start gap-3">
                <span className="text-nusqool-yellow">•</span>
                Participate at your own pace (camera on or off)
              </li>
              <li className="flex items-start gap-3">
                <span className="text-nusqool-yellow">•</span>
                Share from lived experience, no need to give advice or fix anybody
              </li>
              <li className="flex items-start gap-3">
                <span className="text-nusqool-yellow">•</span>
                Care for your own needs and nervous system
              </li>
            </ul>
            <p className="text-nusqool-brown mt-6 text-center font-medium">
              There is no expectation to speak, perform, or be &quot;healed.&quot;<br />
              <span className="text-nusqool-sage">Presence is enough.</span>
            </p>
          </div>

          <div className="grid md:grid-cols-2 gap-8">
            <div className="bg-nusqool-cream p-6 rounded-sm">
              <span className="text-2xl mb-3 block">⏳</span>
              <h3 className="font-serif text-xl text-nusqool-brown mb-3">Time Commitment</h3>
              <ul className="space-y-2 text-nusqool-warmGray text-sm">
                <li><strong>Weekly:</strong> Thursdays, 7–9pm EST (live on Zoom & recorded)</li>
                <li><strong>In-person retreats:</strong> Optional but highly encouraged</li>
                <li><strong>Connect on Heartbeat:</strong> Optional if it supports you</li>
              </ul>
              <p className="text-sm text-nusqool-sage mt-4">
                We ask that you join live when possible, as the relational field is part of the medicine.
              </p>
            </div>

            <div className="bg-nusqool-cream p-6 rounded-sm">
              <span className="text-2xl mb-3 block">🌀</span>
              <h3 className="font-serif text-xl text-nusqool-brown mb-3">Beyond the Circle</h3>
              <p className="text-nusqool-warmGray text-sm mb-4">
                Your registration includes one year of access to the Nusqool Heartbeat community, where you can:
              </p>
              <ul className="space-y-1 text-nusqool-warmGray text-sm">
                <li>• Stay connected with the cohort</li>
                <li>• Attend weekly Neurogenic Dancing, TRE drop-in classes</li>
                <li>• Attend new moon circles</li>
                <li>• Continue practicing being your true self in relationship</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Choose Your Tier */}
      <section className="py-20 px-6 bg-nusqool-cream">
        <div className="max-w-5xl mx-auto">
          <h2 className="text-3xl md:text-4xl font-serif text-nusqool-brown mb-12 text-center">
            Choose Your Tier
          </h2>

          <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
            {/* Community Member - Free */}
            <div className="bg-white p-8 rounded-sm border border-nusqool-brown/20 flex flex-col">
              <div className="mb-6">
                <h3 className="text-xl font-serif text-nusqool-brown mb-2">Community Member</h3>
                <div className="text-3xl font-serif text-nusqool-brown mb-4">Free</div>
                <p className="text-nusqool-warmGray text-sm">
                  For everyone who has participated in an event, workshop, or group program with Nusqool,
                  our partners and faculty. Joining as a community member gives you access to our community
                  chat threads, including a channel to share your acts of kindness and witness other acts of
                  kindness in the community. You are invited to upgrade into a Friends of Nusqool or
                  Embodiment Circle membership to access the weekly events and programs offered at Nusqool.
                </p>
              </div>
              <div className="mt-auto">
                <a
                  href="https://dandelion.nusqool.com/login"
                  className="block text-center px-6 py-3 border-2 border-nusqool-brown text-nusqool-brown font-medium rounded-sm hover:bg-nusqool-brown hover:text-white transition-all"
                >
                  Choose
                </a>
              </div>
            </div>

            {/* Embodiment Circle Participant */}
            <div className="bg-white p-8 rounded-sm border-2 border-nusqool-yellow relative flex flex-col">
              <span className="absolute -top-3 left-1/2 -translate-x-1/2 bg-nusqool-yellow text-nusqool-brown text-xs font-medium px-3 py-1 rounded-full">
                Popular
              </span>
              <div className="mb-6">
                <h3 className="text-xl font-serif text-nusqool-brown mb-2">Embodiment Circle Participant</h3>
                <div className="text-3xl font-serif text-nusqool-brown mb-1">CA$1,010.00</div>
                <p className="text-nusqool-warmGray text-sm mb-4">
                  A 12-week celebration and practice space for being fully yourself — held with safety,
                  creativity, and community by 18 extraordinary facilitators.
                </p>
                <p className="text-sm text-nusqool-sage mb-4">
                  For the scholarship application, please complete{" "}
                  <a href="#scholarship" className="underline hover:text-nusqool-brown transition-colors">
                    this google form
                  </a>{" "}
                  and we&apos;ll send you a discount code to continue your registration.
                </p>
                <div className="space-y-3 bg-nusqool-cream p-4 rounded-sm">
                  <div>
                    <p className="text-sm font-medium text-nusqool-brown">One Time</p>
                    <p className="text-lg text-nusqool-brown">CA$1,010.00</p>
                  </div>
                  <div className="border-t border-nusqool-brown/10 pt-3">
                    <p className="text-sm font-medium text-nusqool-brown">Installment Plan (Monthly)</p>
                    <p className="text-lg text-nusqool-brown">CA$88.00 <span className="text-sm text-nusqool-warmGray">/ mo for 12 months</span></p>
                  </div>
                </div>
              </div>
              <div className="mt-auto">
                <a
                  href="https://dandelion.nusqool.com/login"
                  className="block text-center px-6 py-3 bg-nusqool-yellow text-nusqool-brown font-medium rounded-sm hover:bg-opacity-90 transition-all"
                >
                  Purchase
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <section className="py-20 px-6 bg-nusqool-brown text-white">
        <div className="max-w-3xl mx-auto text-center">
          <h2 className="text-3xl md:text-4xl font-serif text-nusqool-yellow mb-6">
            Ready to Join?
          </h2>
          <p className="text-xl text-white/80 mb-8">
            The next Embodiment Circle begins January 18, 2026
          </p>
          <a
            href="https://dandelion.nusqool.com/login"
            className="inline-block px-10 py-4 bg-nusqool-yellow text-nusqool-brown font-medium rounded-sm hover:bg-opacity-90 transition-all text-lg"
          >
            Join Today
          </a>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-nusqool-brown text-white py-12 px-6">
        <div className="max-w-7xl mx-auto text-center">
          <Link href="/" className="text-2xl font-serif text-nusqool-yellow font-bold">
            Nusqool
          </Link>
          <p className="text-white/60 text-sm mt-2">
            Where old souls come to grow new roots
          </p>
          <div className="border-t border-white/10 mt-8 pt-8 text-white/40 text-sm">
            <p>&copy; {new Date().getFullYear()} Nusqool. Rural Ontario, Canada.</p>
          </div>
        </div>
      </footer>
    </main>
  );
}
