"use client";

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

// Hero Section
function Hero() {
  return (
    <section className="relative min-h-screen flex items-center justify-center">
      <Image
        src="/dandelion-hero.png"
        alt="Dandelion meadow in golden sunlight"
        fill
        priority
        className="object-cover"
      />
      <div className="absolute inset-0 bg-gradient-to-b from-nusqool-cream/70 via-nusqool-cream/40 to-nusqool-cream/80" />
      <div className="relative z-10 text-center max-w-4xl mx-auto px-6 pt-20">
        <h1 className="heading-xl text-nusqool-brown mb-6">
          Nusqool: where old souls come to grow new roots
        </h1>
        <p className="body-text max-w-2xl mx-auto mb-10">
          A sanctuary for healing, growth, and reconnection in the heart of rural Ontario.
        </p>
        <a href="https://dandelion.nusqool.com/login" className="btn-primary">
          Join the Next Embodiment Circle
        </a>
      </div>
      <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
        <svg className="w-6 h-6 text-nusqool-brown/50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
        </svg>
      </div>
    </section>
  );
}

// About Section
function About() {
  return (
    <section id="about" className="section-padding bg-white">
      <div className="max-w-7xl mx-auto">
        <div className="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
          <div className="relative aspect-[4/5] rounded-sm overflow-hidden">
            <Image
              src="/images/thu-portrait.jpg"
              alt="Thu Nguyen, founder of Nusqool"
              fill
              className="object-cover"
            />
          </div>
          <div>
            <h2 className="heading-lg text-nusqool-brown mb-6">
              There comes a moment when your old ways of being no longer fits your becoming
            </h2>
            <div className="space-y-6 body-text">
              <p>
                I&apos;ve unraveled many times—after medical emergencies, through cancer, through
                near-death experiences, and startup failures.
              </p>
              <p>
                Each time, I found myself craving a safe space where my body could simply
                <em> be</em>—without pressure to perform or explain. A space to breathe, to
                feel, to slowly find my way back to myself.
              </p>
              <p>
                That longing became the seed of <strong>Nusqool</strong>.
              </p>
            </div>
            <div className="mt-8">
              <Link href="/about-thu" className="btn-secondary">
                Learn more about Thu
              </Link>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// The Space Section
function TheSpace() {
  return (
    <section className="section-padding bg-nusqool-cream">
      <div className="max-w-7xl mx-auto">
        <div className="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
          <div className="lg:order-2">
            <h2 className="heading-lg text-nusqool-brown mb-6">
              So we converted an old school house into a space for healing, creative expression
              and reconnection to our true selves
            </h2>
            <div className="space-y-6 body-text">
              <p>
                Nestled in the countryside of rural Ontario, Nusqool is surrounded by
                meadows, forests, and the gentle rhythm of nature.
              </p>
              <p>
                Here, we offer programming through 1:1 work and Embodiment Circles,
                alongside a community of facilitators, creatives, healers, musicians, and coaches.
              </p>
              <p className="font-medium text-nusqool-brown">
                If you&apos;re looking for a space for your sacred pause, we welcome you.
              </p>
            </div>
          </div>
          <div className="lg:order-1 grid grid-cols-2 gap-4">
            <div className="relative aspect-square rounded-sm overflow-hidden">
              <Image src="/images/tre-nature.jpg" alt="Nature at Nusqool" fill className="object-cover" />
            </div>
            <div className="relative aspect-square rounded-sm overflow-hidden">
              <Image src="/images/retreat-opening.jpg" alt="Retreat at Nusqool" fill className="object-cover" />
            </div>
            <div className="relative aspect-square rounded-sm overflow-hidden">
              <Image src="/images/tre-outdoors.jpg" alt="Outdoor practice" fill className="object-cover" />
            </div>
            <div className="relative aspect-square rounded-sm overflow-hidden">
              <Image src="/images/caretent.jpg" alt="Care Tent" fill className="object-cover" />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// Services Section
function Services() {
  const services = [
    {
      title: "Virtual Sessions",
      description: "1:1 support that meets you where you are — weaving somatics, coaching, and embodied leadership",
      icon: "\uD83D\uDCBB",
      href: "/coaching",
    },
    {
      title: "In Person Sessions",
      description: "Custom days at Nusqool including self-reflection with tea, movement, nature, and deep rest",
      icon: "\uD83C\uDF3F",
      href: "/grow",
    },
    {
      title: "Group Workshops",
      description: "Rooted in lived experience and uplifting collaborations",
      icon: "\uD83D\uDC65",
      href: "/events",
    },
    {
      title: "Team Building & Offsites",
      description: "Indoor and outdoor space for groups to slow down and reconnect",
      icon: "\uD83C\uDFE1",
      href: "/grow",
    },
    {
      title: "Keynotes & Speaking",
      description: "Topics include authenticity, worthiness, belonging, burnout, and nervous system healing",
      icon: "\uD83C\uDFA4",
      href: "/coaching",
    },
    {
      title: "Neurogenic Dancing",
      description: "Music and movement for conscious gatherings, weaving Ecstatic Dance with Neurogenic Tremoring",
      icon: "\uD83D\uDC83",
      href: "/events",
    },
  ];

  return (
    <section id="adventure" className="section-padding bg-white">
      <div className="max-w-7xl mx-auto">
        <div className="text-center mb-16">
          <h2 className="heading-lg text-nusqool-brown mb-4">
            Choose Your Own Growth Adventure
          </h2>
          <p className="body-text max-w-2xl mx-auto">
            Whether you&apos;re seeking individual support or a collective experience,
            we offer pathways to help you feel, heal, grow, create, and return to
            the pulse of your true self.
          </p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {services.map((service, index) => (
            <Link
              key={index}
              href={service.href}
              className="group p-8 bg-nusqool-cream rounded-sm hover:shadow-lg transition-all duration-300"
            >
              <div className="text-4xl mb-4">{service.icon}</div>
              <h3 className="text-xl font-serif text-nusqool-brown mb-3 group-hover:text-nusqool-yellow transition-colors">
                {service.title}
              </h3>
              <p className="body-text text-sm">{service.description}</p>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}

// Care Tent Section
function CareTent() {
  return (
    <section className="section-padding bg-nusqool-sage/10">
      <div className="max-w-7xl mx-auto">
        <div className="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
          <div className="relative aspect-video rounded-sm overflow-hidden">
            <Image
              src="/images/caretent.jpg"
              alt="The Care Tent at Coralus UnSummit 2025"
              fill
              className="object-cover"
            />
          </div>
          <div>
            <span className="text-sm uppercase tracking-wider text-nusqool-sage font-medium">
              Pop-Up Sanctuary
            </span>
            <h2 className="heading-lg text-nusqool-brown mt-2 mb-6">
              The Care Tent
            </h2>
            <div className="space-y-4 body-text">
              <p>
                Launched at the Coralus 10th Year Anniversary, the Care Tent is a
                pop-up sanctuary for conferences and festivals—a space for rest,
                regulation, and gentle reconnection.
              </p>
              <ul className="space-y-2 pl-4">
                <li className="flex items-start">
                  <span className="text-nusqool-yellow mr-2">&#8226;</span>
                  Rest spaces with hammocks, rugs, and pillows
                </li>
                <li className="flex items-start">
                  <span className="text-nusqool-yellow mr-2">&#8226;</span>
                  Self-guided practices and art supplies
                </li>
                <li className="flex items-start">
                  <span className="text-nusqool-yellow mr-2">&#8226;</span>
                  Nervous system reset tools
                </li>
                <li className="flex items-start">
                  <span className="text-nusqool-yellow mr-2">&#8226;</span>
                  Optional 1:1 somatic sessions
                </li>
              </ul>
            </div>
            <div className="mt-8">
              <Link href="/care-tent" className="btn-primary">
                Get in touch
              </Link>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// Manifesto Section
function Manifesto() {
  return (
    <section className="section-padding bg-nusqool-brown text-white">
      <div className="max-w-4xl mx-auto text-center">
        <h2 className="heading-lg text-nusqool-yellow mb-8">
          Let&apos;s bloom and navigate the mysteries of liminal space together
        </h2>
        <div className="space-y-6 text-lg leading-relaxed text-white/80">
          <p>
            Like the dandelion, we trust the wisdom of being scattered.
          </p>
          <p>
            We believe that on the other side of fear is not failure—
            <span className="text-nusqool-yellow font-medium"> but Transformation.</span>
          </p>
        </div>
      </div>
    </section>
  );
}

// Coralus Section
function Coralus() {
  return (
    <section className="section-padding bg-white">
      <div className="max-w-4xl mx-auto text-center">
        <div className="inline-block p-4 bg-nusqool-cream rounded-full mb-6">
          <svg className="w-16 h-16 text-nusqool-sage" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 2L4 7v10l8 5 8-5V7l-8-5zm0 2.18l6 3.72v7.2l-6 3.72-6-3.72v-7.2l6-3.72z"/>
          </svg>
        </div>
        <p className="text-sm uppercase tracking-wider text-nusqool-sage font-medium mb-2">
          March 26, 2025
        </p>
        <h2 className="heading-lg text-nusqool-brown mb-6">
          Nusqool has been selected as a Coralus Venture
        </h2>
        <p className="body-text max-w-2xl mx-auto">
          We&apos;re honored to join a community of women and non-binary entrepreneurs
          who are building businesses that create positive change in the world.
        </p>
      </div>
    </section>
  );
}

// Newsletter Section
function Newsletter() {
  return (
    <section className="section-padding bg-nusqool-cream">
      <div className="max-w-2xl mx-auto text-center">
        <h2 className="heading-lg text-nusqool-brown mb-4">
          Stay Connected
        </h2>
        <p className="body-text mb-8">
          Join our community and receive updates on events, offerings, and
          musings on growth and healing.
        </p>
        <form className="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
          <input
            type="email"
            placeholder="Your email address"
            className="flex-1 px-4 py-3 border border-nusqool-brown/20 rounded-sm bg-white focus:outline-none focus:border-nusqool-yellow transition-colors"
          />
          <button type="submit" className="btn-primary whitespace-nowrap">
            Subscribe
          </button>
        </form>
        <p className="text-sm text-nusqool-warmGray/60 mt-4">
          We respect your privacy.
        </p>
      </div>
    </section>
  );
}

// Main Page Component
export default function Home() {
  return (
    <main>
      <Navigation />
      <Hero />
      <About />
      <TheSpace />
      <Services />
      <CareTent />
      <Manifesto />
      <Coralus />
      <Newsletter />
      <Footer />
    </main>
  );
}
