import { Metadata } from 'next';
import Image from 'next/image';
import Link from 'next/link';

export const metadata: Metadata = {
  title: 'Passionate Presence Centre',
  description: 'International training and facilitation in movement, art, and personal development. Workshops, retreats, and consulting.',
};

export default function PassionatePresenceCentrePage() {
  const livingAwakeSeries = [
    '01. Getting Messy',
    '02. Living as Art',
    '03. A Different Kind of Beauty',
    '04. Dancing with Paradox',
    '05. The Spaces in Between',
    '06. Fluid and Fluent in Change',
    '07. Freedom as Limits',
    '08. Grief, Grace and Gratitude',
    '09. Curiosity and Creativity',
    '10. Women in Wonder and Wabi-Sabi Wanderings',
    '11. Dying to Live',
    '12. In Your Own Skin',
  ];

  return (
    <div className="min-h-screen bg-white pt-24">
      {/* Hero Section */}
      <section className="relative">
        <div className="mx-auto max-w-7xl px-4">
          <div className="grid gap-12 lg:grid-cols-2 items-center py-16">
            {/* Image */}
            <div className="relative aspect-[4/5] overflow-hidden">
              <Image
                src="/images/passionate-presence.jpg"
                alt="Katheryn Trenshaw - Passionate Presence"
                fill
                className="object-cover"
                priority
                sizes="(max-width: 1024px) 100vw, 50vw"
              />
            </div>

            {/* Content */}
            <div>
              <p className="text-xs uppercase tracking-[0.3em] text-gray-500 mb-4">Work With Me</p>
              <h1 className="font-serif text-4xl md:text-5xl text-[#222] mb-8">
                Passionate Presence Centre
              </h1>

              <div className="prose prose-lg text-gray-600">
                <p>
                  The Passionate Presence Center operates internationally without physical walls,
                  offering training and facilitation in movement, art, and personal development.
                </p>
                <p>
                  The organization provides workshops, educational events, and consulting for
                  individuals, groups, and organizations across the United States, Europe, and globally.
                </p>
                <p>
                  Services range from 2-hour sessions to 2-week residential retreats, designed to
                  reveal authentic strengths and natural abilities for professional, artistic, and
                  personal development.
                </p>
              </div>

              <div className="mt-8">
                <Link
                  href="/contact"
                  className="inline-block px-8 py-4 bg-[#222] text-white text-sm uppercase tracking-wider rounded-full hover:bg-[#444] transition-colors"
                >
                  Get in Touch
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Services Section */}
      <section className="py-20 bg-gray-50">
        <div className="mx-auto max-w-4xl px-4">
          <h2 className="font-serif text-3xl text-center text-[#222] mb-12">Services Offered</h2>

          <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
            {[
              { title: 'Workshops', desc: 'Group experiences in creativity and presence' },
              { title: 'Consultations', desc: 'Individual and organizational guidance' },
              { title: 'Lectures & Talks', desc: 'Inspiring presentations and discussions' },
              { title: 'Retreats', desc: 'Immersive residential experiences' },
            ].map((service, index) => (
              <div key={index} className="text-center p-6 bg-white">
                <h3 className="font-serif text-xl text-[#222] mb-2">{service.title}</h3>
                <p className="text-sm text-gray-600">{service.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Living Awake Series */}
      <section className="py-20 bg-white">
        <div className="mx-auto max-w-4xl px-4">
          <div className="text-center mb-12">
            <h2 className="font-serif text-3xl text-[#222] mb-4">Living Awake Series</h2>
            <p className="text-gray-600">A 12-part workshop sequence exploring presence, creativity, and authentic living</p>
          </div>

          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
            {livingAwakeSeries.map((workshop, index) => (
              <div
                key={index}
                className="p-4 border border-gray-200 hover:border-gray-400 transition-colors"
              >
                <span className="text-sm text-gray-600">{workshop}</span>
              </div>
            ))}
          </div>

          <div className="mt-12 p-8 bg-gray-50 text-center">
            <p className="text-sm text-gray-600 mb-4">
              Maximum 12 participants per workshop. Most courses require application and online session prerequisite.
            </p>
            <Link
              href="/contact"
              className="inline-block text-sm text-[#222] underline underline-offset-4 hover:no-underline"
            >
              Inquire about upcoming dates
            </Link>
          </div>
        </div>
      </section>

      {/* Additional Courses */}
      <section className="py-20 bg-gray-50">
        <div className="mx-auto max-w-4xl px-4">
          <h2 className="font-serif text-3xl text-center text-[#222] mb-12">Additional Courses</h2>

          <div className="space-y-6">
            <div className="p-6 bg-white">
              <h3 className="font-serif text-xl text-[#222] mb-2">Wild and Precious Life</h3>
              <p className="text-gray-600">Women Living With & Beyond Breast Cancer</p>
            </div>
            <div className="p-6 bg-white">
              <h3 className="font-serif text-xl text-[#222] mb-2">Affirming the Female Body</h3>
              <p className="text-gray-600">Weeklong intensive workshop</p>
            </div>
            <div className="p-6 bg-white">
              <h3 className="font-serif text-xl text-[#222] mb-2">Drawing Down the Moon</h3>
              <p className="text-gray-600">Yearlong journey of exploration</p>
            </div>
          </div>
        </div>
      </section>

      {/* Testimonial */}
      <section className="py-20 bg-white">
        <div className="mx-auto max-w-3xl px-4 text-center">
          <blockquote className="font-serif text-2xl md:text-3xl text-[#222] italic leading-relaxed">
            &ldquo;The retreat with Katheryn evolved my life and my essential happiness.&rdquo;
          </blockquote>
          <footer className="mt-6 text-sm uppercase tracking-wider text-gray-500">
            &mdash; KMJ, UK Teacher
          </footer>
        </div>
      </section>

      {/* CTA */}
      <section className="py-20 bg-[#222] text-white">
        <div className="mx-auto max-w-2xl px-4 text-center">
          <h2 className="font-serif text-3xl mb-6">Ready to Begin?</h2>
          <p className="text-gray-300 mb-8">
            Contact us to discuss which offering might be right for your journey.
          </p>
          <Link
            href="/contact"
            className="inline-block px-8 py-4 border-2 border-white text-white text-sm uppercase tracking-wider rounded-full hover:bg-white hover:text-[#222] transition-colors"
          >
            Get in Touch
          </Link>
        </div>
      </section>
    </div>
  );
}
