import Navigation from "@/components/Navigation";
import Footer from "@/components/Footer";
import Newsletter from "@/components/Newsletter";

export const metadata = {
  title: "Events — Nusqool",
  description: "Upcoming events, workshops, and classes at Nusqool. TRE, Embodiment Circle, Neurogenic Dancing, and more.",
};

const upcomingEvents = [
  {
    title: "Embodiment Circle — Cohort #5",
    date: "January 22 – April 22, 2026",
    time: "Thursdays, 7–9pm EST",
    description: "A 12-week journey rooted in safety, creativity, courage, and lived wisdom. Guided by a diverse circle of facilitators.",
    price: "$1,010 CAD (or $88/month)",
    link: "https://dandelion.nusqool.com/login",
    featured: true,
  },
  {
    title: "Opening Retreat — Listening to Your Becoming",
    date: "Sunday, January 18, 2026",
    time: "11:00am – 5:00pm",
    description: "In-person retreat at Nusqool, Reaboro, Ontario. Somatic inquiry, Neurogenic Tremoring, Qi Gong Gardening.",
    price: "$177 + HST",
    link: "https://dandelion.nusqool.com/login",
  },
  {
    title: "Closing Retreat — Celebrating Your Becoming",
    date: "Saturday, April 18, 2026",
    time: "11:00am – 5:00pm",
    description: "In-person retreat at The Farm, Hillsdale, Ontario. Poetry, expressive arts, visual creation, singing, dancing.",
    price: "$177 + HST",
    link: "https://dandelion.nusqool.com/login",
  },
  {
    title: "TRE Drop-in Practice Sessions",
    date: "Bi-weekly Fridays",
    time: "12:00 – 1:00pm EST",
    description: "Regular practice sessions for those who have completed a TRE intro workshop. Virtual via Zoom.",
    price: "Drop-in rate",
    link: "https://lu.ma/nusqool",
  },
  {
    title: "Neurogenic Dancing",
    date: "Tuesday evenings (multiple dates)",
    time: "Evening sessions",
    description: "Movement-based sessions combining tremoring with ecstatic dancing to release stress and tension while building body connection.",
    price: "$22",
    link: "https://lu.ma/nusqool",
  },
  {
    title: "Intro to TRE (Virtual)",
    date: "Monthly workshops",
    time: "5:00 – 7:00pm EST",
    description: "Learn the foundations of Tension and Trauma Release Exercises in a supportive group setting.",
    price: "$88",
    link: "https://calendly.com/nusqool/connect",
  },
];

export default function Events() {
  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">Events</h1>
          <p className="body-text max-w-2xl mx-auto">
            Join us for workshops, circles, retreats, and weekly practice sessions. All events are designed to help you reconnect with your body, your community, and your true self.
          </p>
        </div>
      </section>

      {/* Events List */}
      <section className="section-padding bg-white">
        <div className="max-w-4xl mx-auto">
          <div className="space-y-8">
            {upcomingEvents.map((event, index) => (
              <div
                key={index}
                className={`p-8 rounded-sm ${
                  event.featured
                    ? "bg-nusqool-brown text-white"
                    : "bg-nusqool-cream"
                }`}
              >
                {event.featured && (
                  <span className="text-xs uppercase tracking-wider text-nusqool-yellow font-medium mb-2 block">
                    Featured
                  </span>
                )}
                <h3 className={`text-xl font-serif mb-2 ${
                  event.featured ? "text-nusqool-yellow" : "text-nusqool-brown"
                }`}>
                  {event.title}
                </h3>
                <div className={`flex flex-wrap gap-4 text-sm mb-4 ${
                  event.featured ? "text-white/70" : "text-nusqool-warmGray"
                }`}>
                  <span>{event.date}</span>
                  <span>&#8226;</span>
                  <span>{event.time}</span>
                  <span>&#8226;</span>
                  <span>{event.price}</span>
                </div>
                <p className={`mb-6 ${
                  event.featured ? "text-white/80" : "body-text"
                } text-sm`}>
                  {event.description}
                </p>
                <a
                  href={event.link}
                  target="_blank"
                  rel="noopener noreferrer"
                  className={event.featured ? "btn-primary" : "btn-secondary text-sm"}
                >
                  Learn More
                </a>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Luma Calendar CTA */}
      <section className="section-padding bg-nusqool-sage/10 text-center">
        <div className="max-w-2xl mx-auto">
          <h2 className="heading-lg text-nusqool-brown mb-6">Full Event Calendar</h2>
          <p className="body-text mb-8">
            View all upcoming events, register, and add them to your calendar.
          </p>
          <a
            href="https://lu.ma/nusqool"
            target="_blank"
            rel="noopener noreferrer"
            className="btn-primary"
          >
            View on Lu.ma
          </a>
        </div>
      </section>

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