import Image from "next/image";
import Navigation from "@/components/Navigation";
import Footer from "@/components/Footer";
import Newsletter from "@/components/Newsletter";

export const metadata = {
  title: "Choose Your Own Growth Adventure — Nusqool",
  description: "Leave the city. Step off the grid. Return to your true self. Self-directed retreat experiences at Nusqool.",
};

export default function GrowthAdventure() {
  return (
    <main>
      <Navigation />

      {/* Hero */}
      <section className="relative pt-28 pb-20 px-6 bg-nusqool-cream">
        <div className="max-w-4xl mx-auto text-center">
          <h1 className="heading-xl text-nusqool-brown mb-6">
            Choose Your Own Growth Adventure
          </h1>
          <p className="text-xl md:text-2xl font-serif text-nusqool-warmGray italic mb-8">
            Leave the city. Step off the grid. Return to your true self.
          </p>
          <p className="body-text max-w-2xl mx-auto">
            What if your retreat was designed by your soul? At Nusqool, you choose your own pace and focus. We walk alongside you through a co-created experience at our century-old rural schoolhouse in Mount Horeb, Ontario.
          </p>
        </div>
      </section>

      {/* Chapter 1: The Seed */}
      <section className="section-padding bg-white">
        <div className="max-w-5xl mx-auto">
          <div className="text-center mb-12">
            <span className="text-sm uppercase tracking-wider text-nusqool-sage font-medium">Chapter 1</span>
            <h2 className="heading-lg text-nusqool-brown mt-2">The Seed</h2>
            <p className="body-text mt-4 max-w-2xl mx-auto">Choose your retreat window and set your intention.</p>
          </div>

          <div className="grid md:grid-cols-2 gap-8">
            <div className="p-8 bg-nusqool-cream rounded-sm">
              <div className="text-4xl mb-4">&#127793;</div>
              <h3 className="text-xl font-serif text-nusqool-brown mb-3">Gentle Drop-In Session</h3>
              <p className="text-sm text-nusqool-sage font-medium mb-3">1.5 hours</p>
              <p className="body-text text-sm">
                Reset and reconnect with your truth. A gentle introduction to the Nusqool experience.
              </p>
              <a
                href="https://calendly.com/nusqool/connect"
                target="_blank"
                rel="noopener noreferrer"
                className="btn-primary mt-6 inline-block text-sm"
              >
                Book 1.5 Hours
              </a>
            </div>

            <div className="p-8 bg-nusqool-cream rounded-sm">
              <div className="text-4xl mb-4">&#127804;</div>
              <h3 className="text-xl font-serif text-nusqool-brown mb-3">Deeper Transformation</h3>
              <p className="text-sm text-nusqool-sage font-medium mb-3">3 hours</p>
              <p className="body-text text-sm">
                Step into an extended adventure with more time for exploration, healing, and integration.
              </p>
              <a
                href="https://calendly.com/nusqool/connect"
                target="_blank"
                rel="noopener noreferrer"
                className="btn-primary mt-6 inline-block text-sm"
              >
                Book 3 Hours
              </a>
            </div>
          </div>

          <div className="mt-12 p-8 bg-nusqool-sage/10 rounded-sm text-center">
            <p className="body-text">
              Upon arrival, select your opening tea from locally-harvested herbs: <span className="font-medium text-nusqool-brown">dandelion, lemon balm, nettle, tulsi, rose, and mint</span> &mdash; setting your intention with the first sip.
            </p>
          </div>
        </div>
      </section>

      {/* Chapter 2: The Sprout */}
      <section className="section-padding bg-nusqool-cream">
        <div className="max-w-5xl mx-auto">
          <div className="text-center mb-12">
            <span className="text-sm uppercase tracking-wider text-nusqool-sage font-medium">Chapter 2</span>
            <h2 className="heading-lg text-nusqool-brown mt-2">The Sprout</h2>
            <p className="body-text mt-4 max-w-2xl mx-auto">Choose your care modalities.</p>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            <div className="p-6 bg-white rounded-sm">
              <h3 className="text-lg font-serif text-nusqool-brown mb-4">Hands on Healing</h3>
              <ul className="space-y-3 body-text text-sm">
                <li className="flex items-start">
                  <span className="text-nusqool-yellow mr-2">&#8226;</span>
                  Nervous System Calibration
                </li>
                <li className="flex items-start">
                  <span className="text-nusqool-yellow mr-2">&#8226;</span>
                  Access Bars (32-point head energy practice)
                </li>
              </ul>
            </div>

            <div className="p-6 bg-white rounded-sm">
              <h3 className="text-lg font-serif text-nusqool-brown mb-4">Guided Movement</h3>
              <ul className="space-y-3 body-text text-sm">
                <li className="flex items-start">
                  <span className="text-nusqool-yellow mr-2">&#8226;</span>
                  TRE (Trauma &amp; Tension Release Exercises)
                </li>
                <li className="flex items-start">
                  <span className="text-nusqool-yellow mr-2">&#8226;</span>
                  Medical Qi Gong
                </li>
              </ul>
            </div>

            <div className="p-6 bg-white rounded-sm">
              <h3 className="text-lg font-serif text-nusqool-brown mb-4">Soul Conversations</h3>
              <ul className="space-y-3 body-text text-sm">
                <li className="flex items-start">
                  <span className="text-nusqool-yellow mr-2">&#8226;</span>
                  Coaching Conversation
                </li>
                <li className="flex items-start">
                  <span className="text-nusqool-yellow mr-2">&#8226;</span>
                  Intuitive Somatic Coaching
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Chapter 3: Bloom */}
      <section className="section-padding bg-white">
        <div className="max-w-4xl mx-auto text-center">
          <span className="text-sm uppercase tracking-wider text-nusqool-sage font-medium">Chapter 3</span>
          <h2 className="heading-lg text-nusqool-brown mt-2 mb-6">Bloom</h2>
          <p className="body-text max-w-2xl mx-auto mb-8">
            After your session, choose your own integration path: explore the grounds, rest in hammocks, journal, walk barefoot in the grass, or sit in quiet reflection.
          </p>
        </div>
      </section>

      {/* About the Guide */}
      <section className="section-padding bg-nusqool-cream">
        <div className="max-w-5xl mx-auto">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div className="relative aspect-[4/5] rounded-sm overflow-hidden">
              <Image
                src="/images/coaching-portrait.jpg"
                alt="Thu Nguyen"
                fill
                className="object-cover"
              />
            </div>
            <div>
              <h2 className="heading-lg text-nusqool-brown mb-6">Meet Your Guide</h2>
              <p className="body-text mb-4">
                <strong>Thu Nguyen</strong> (she/her) is a somatic leadership coach and Nusqool founder. PCC-certified through the International Coach Federation with expertise in Co-Active Coaching, neuroscience of change, relational trauma coaching, and financial trauma.
              </p>
              <p className="body-text">
                Her personal journey navigated cancer, chronic illness, burnout, complex PTSD, and near-death experiences, redirecting her toward body-centered healing work. She brings 20 years of tech startup experience across Toronto and Silicon Valley.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="section-padding bg-white">
        <div className="max-w-3xl mx-auto">
          <h2 className="heading-lg text-nusqool-brown mb-12 text-center">Frequently Asked Questions</h2>

          <div className="space-y-8">
            <div>
              <h3 className="text-xl font-serif text-nusqool-brown mb-3">Is this for me?</h3>
              <p className="body-text">
                Yes, if you&apos;re seeking reconnection, nervous system regulation, or creative birth. No prior experience necessary.
              </p>
            </div>

            <div>
              <h3 className="text-xl font-serif text-nusqool-brown mb-3">How does it work?</h3>
              <ol className="space-y-2 body-text list-decimal pl-6">
                <li>Book your adventure and complete the intake form</li>
                <li>Optional clarification call</li>
                <li>Arrive in comfortable clothing</li>
                <li>Bring a journal and pen</li>
                <li>Let the land facilitate your transformation</li>
              </ol>
            </div>

            <div>
              <h3 className="text-xl font-serif text-nusqool-brown mb-3">Where is Nusqool?</h3>
              <p className="body-text">
                Mount Horeb x Hillhead Road, north of Highway 115 on Route 35 (Kawartha Lakes). About 1.5 hours from Toronto, 30 minutes from Peterborough. GO Bus alternative available from the Oshawa-Peterborough route with pickup option.
              </p>
            </div>

            <div>
              <h3 className="text-xl font-serif text-nusqool-brown mb-3">What about meals?</h3>
              <p className="body-text">
                Snacks are included. Optional nourishing soup and salad available for $22, or bring your own. Nearby chip truck (10 min) and Lindsay dining options (20 min).
              </p>
            </div>
          </div>
        </div>
      </section>

      <Newsletter />
      <Footer />
    </main>
  );
}
