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

export const metadata = {
  title: "TRE - Tension and Stress Release Exercises — Nusqool",
  description: "TRE is a gentle and effective way to ground your nervous system and let go of tension and stress.",
};

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

      {/* Hero */}
      <section className="pt-28 pb-16 px-6 bg-nusqool-cream">
        <div className="max-w-4xl mx-auto text-center">
          <h1 className="heading-xl text-nusqool-brown mb-6">
            TRE&reg; is a gentle and effective way to ground your nervous system and let go of tension and stress
          </h1>
        </div>
      </section>

      {/* What is TRE */}
      <section className="section-padding bg-white">
        <div className="max-w-5xl mx-auto">
          <div className="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
            <div className="relative aspect-[4/3] rounded-sm overflow-hidden">
              <Image
                src="/images/tre-session.jpg"
                alt="TRE session"
                fill
                className="object-cover"
              />
            </div>

            <div>
              <h2 className="heading-lg text-nusqool-brown mb-6">What is TRE&reg;?</h2>
              <div className="space-y-4 body-text">
                <p>
                  Tension and Trauma Release Exercises are a simple set of exercises that trigger a natural gentle tremor response in the body to reboot our overprotective reflexes in our nervous system.
                </p>
                <p>
                  This shaking can release deep rooted tension and stress accumulated from the body. These gentle tremors reverberate from the psoas muscles, along the spine throughout the body from the sacrum to the cranium, allowing the body and nervous system to feel at ease, grounded and safe.
                </p>
                <p>
                  The process is simple, can be done in the comfort of your own home, and the goal is to enable you to get rooted into a self-directed practice where you can trust that the body will do its own healing and shake off overwhelming experiences.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Science */}
      <section className="section-padding bg-nusqool-cream">
        <div className="max-w-4xl mx-auto">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div>
              <h2 className="heading-lg text-nusqool-brown mb-6">The Science</h2>
              <div className="space-y-4 body-text">
                <p>
                  The body physiology of trauma is relatively simple while the psychology of trauma is complex. In trauma, the body and brain are stuck in patterns of survival, of fight-or-flight or freeze, and have their set of defences up.
                </p>
                <p>
                  TRE resets and down-regulates our neurophysiology. This technique is also used to shake off everyday circumstances of life &mdash; stressful and toxic workplaces, natural disasters, and life transitions.
                </p>
                <p>
                  The technique was created by <strong>Dr. David Berceli</strong>, inspired by his work providing trauma relief workshops and designing recovery programs for organizations around the world.
                </p>
              </div>
            </div>

            <div className="relative aspect-[4/3] rounded-sm overflow-hidden">
              <Image
                src="/images/tre-outdoors.jpg"
                alt="TRE outdoors practice"
                fill
                className="object-cover"
              />
            </div>
          </div>
        </div>
      </section>

      {/* Quote */}
      <section className="section-padding bg-nusqool-brown text-white">
        <div className="max-w-3xl mx-auto text-center">
          <blockquote>
            <p className="text-xl md:text-2xl font-serif italic leading-relaxed text-white/90">
              &ldquo;One of the best things each of us can do is to metabolize our pain and heal our trauma. When we heal our nervous systems, we heal the world.&rdquo;
            </p>
            <footer className="mt-6 text-nusqool-yellow font-medium">
              &mdash; Resmaa Menakem
            </footer>
          </blockquote>
        </div>
      </section>

      {/* Learn with Thu */}
      <section className="section-padding bg-white">
        <div className="max-w-5xl mx-auto">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div className="relative aspect-[4/3] rounded-sm overflow-hidden">
              <Image
                src="/images/tre-nature.jpg"
                alt="Nature and healing"
                fill
                className="object-cover"
              />
            </div>

            <div>
              <h2 className="heading-lg text-nusqool-brown mb-6">Learn TRE&reg; with Thu</h2>
              <div className="space-y-4 body-text">
                <p>
                  I offer monthly TRE&reg; Intro workshops for groups and on-going one-to-one TRE&reg; sessions. You will learn the exercises, learn how to feel and work with the tremors, and learn how to self-regulate the process.
                </p>
                <p>
                  For online sessions, you will need a yoga mat and a camera angle to show the length of the mat.
                </p>
                <p>
                  I am based outside of Toronto (EST) and offer TRE classes virtually to clients all over the world through Zoom. If you can&apos;t find a time that works in your time zone, feel free to contact me for a 1:1 introductory class.
                </p>
              </div>

              <div className="mt-8 flex flex-wrap gap-4">
                <a
                  href="https://calendly.com/nusqool/connect"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="btn-primary"
                >
                  Book with Thu
                </a>
                <a
                  href="https://calendly.com/nusqool/connect"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="btn-secondary"
                >
                  Book a 30 min Consult
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Weekly Practice */}
      <section className="section-padding bg-nusqool-sage/10">
        <div className="max-w-3xl mx-auto text-center">
          <h2 className="heading-lg text-nusqool-brown mb-6">Weekly Practice Sessions</h2>
          <p className="body-text mb-8">
            If you&apos;d like to get back into a regular practice or deepen your practice, we have weekly drop-ins on Tuesdays and Fridays. Check the calendar and plan to drop in!
          </p>
          <a href="/events" className="btn-primary">
            View Schedule
          </a>
        </div>
      </section>

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