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

export const metadata: Metadata = {
  title: '1-to-1 Sessions',
  description: 'Individual sessions with Katheryn Trenshaw. Trauma-informed, somatic-based art therapy for individuals and couples.',
};

export default function OneToOneSessionsPage() {
  return (
    <div className="min-h-screen bg-white pt-24">
      {/* Header */}
      <section className="border-b border-gray-200">
        <div className="mx-auto max-w-7xl px-4 py-16 text-center">
          <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]">Sessions</h1>
          <p className="mt-4 font-serif text-2xl text-gray-600">1 to 1 sessions</p>
        </div>
      </section>

      {/* Main Description */}
      <section className="py-20">
        <div className="mx-auto max-w-3xl px-4">
          <div className="prose prose-lg mx-auto text-gray-600">
            <p className="text-xl leading-relaxed">
              Katheryn is a freedom doula. She is a pioneer in trauma-informed, somatic-based
              art therapy.
            </p>

            <p>
              Katheryn has worked internationally with groups, couples, individuals and
              organisations for over 35 years. She inspires passionate presence by helping
              people to embrace paradox and non-duality: shadow/shame, PTS, childhood trauma,
              long-term illness and facing mortality/grief &mdash; revealing the hidden to
              liberate freedom with curiosity, creativity and courage.
            </p>

            <p>
              My work is rooted in an art-and-somatic-therapy approach to revealing what
              is essential, authentic and true.
            </p>
          </div>
        </div>
      </section>

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

          <div className="grid gap-12 lg:grid-cols-2">
            {/* Individual Sessions */}
            <div className="relative">
              <div className="aspect-[4/3] relative mb-8 overflow-hidden">
                <Image
                  src="/images/sessions-individual.jpg"
                  alt="Individual Sessions"
                  fill
                  className="object-cover"
                  sizes="(max-width: 1024px) 100vw, 50vw"
                />
              </div>
              <h3 className="font-serif text-2xl text-[#222] mb-4">Individual Sessions</h3>
              <p className="text-gray-600 mb-6">
                One-on-one sessions tailored to your personal journey. A safe, confidential
                space to explore your deepest calling and what holds you back. Available
                in person or via video call.
              </p>
              <Link
                href="/contact"
                className="inline-block text-sm text-[#222] underline underline-offset-4 hover:no-underline"
              >
                Book a session
              </Link>
            </div>

            {/* Couples Sessions */}
            <div className="relative">
              <div className="aspect-[4/3] relative mb-8 overflow-hidden">
                <Image
                  src="/images/sessions-couples.jpg"
                  alt="Couples Sessions"
                  fill
                  className="object-cover"
                  sizes="(max-width: 1024px) 100vw, 50vw"
                />
              </div>
              <h3 className="font-serif text-2xl text-[#222] mb-4">Couples Sessions</h3>
              <p className="text-gray-600 mb-6">
                Work together with your partner in a supportive environment. Explore
                communication, connection, and creative expression as a couple. Sessions
                available in person or online.
              </p>
              <Link
                href="/contact"
                className="inline-block text-sm text-[#222] underline underline-offset-4 hover:no-underline"
              >
                Book a session
              </Link>
            </div>
          </div>
        </div>
      </section>

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

          <div className="space-y-8">
            <div className="flex gap-6">
              <div className="flex-shrink-0 w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center">
                <span className="font-serif text-xl text-[#222]">1</span>
              </div>
              <div>
                <h3 className="font-serif text-xl text-[#222] mb-2">Safe, Confidential Space</h3>
                <p className="text-gray-600">
                  A nurturing environment where you can explore your most uncomfortable feelings
                  and bring awareness to troubling thoughts.
                </p>
              </div>
            </div>

            <div className="flex gap-6">
              <div className="flex-shrink-0 w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center">
                <span className="font-serif text-xl text-[#222]">2</span>
              </div>
              <div>
                <h3 className="font-serif text-xl text-[#222] mb-2">Somatic Awareness</h3>
                <p className="text-gray-600">
                  Working with the body as well as the mind, integrating art and movement
                  to access deeper wisdom and healing.
                </p>
              </div>
            </div>

            <div className="flex gap-6">
              <div className="flex-shrink-0 w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center">
                <span className="font-serif text-xl text-[#222]">3</span>
              </div>
              <div>
                <h3 className="font-serif text-xl text-[#222] mb-2">Authentic Expression</h3>
                <p className="text-gray-600">
                  Express the authentic truth and courage of your inner world through
                  creative exploration and presence.
                </p>
              </div>
            </div>

            <div className="flex gap-6">
              <div className="flex-shrink-0 w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center">
                <span className="font-serif text-xl text-[#222]">4</span>
              </div>
              <div>
                <h3 className="font-serif text-xl text-[#222] mb-2">Liberation & Freedom</h3>
                <p className="text-gray-600">
                  Revealing the hidden to liberate freedom with curiosity, creativity
                  and courage.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

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

          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
            {[
              'Shadow Work',
              'Shame & Vulnerability',
              'Post-Traumatic Stress',
              'Childhood Trauma',
              'Long-term Illness',
              'Grief & Mortality',
              'Creative Blocks',
              'Life Transitions',
              'Authentic Expression',
            ].map((area, index) => (
              <div
                key={index}
                className="p-4 bg-white text-center border border-gray-200"
              >
                <span className="text-sm text-gray-600">{area}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Availability */}
      <section className="py-20">
        <div className="mx-auto max-w-3xl px-4 text-center">
          <h2 className="font-serif text-3xl text-[#222] mb-6">Availability</h2>
          <p className="text-gray-600 mb-4">
            Sessions are available in person (by arrangement) or online via video call.
          </p>
          <p className="text-gray-600 mb-8">
            Session lengths: 2 hours, half day, or full day
          </p>
          <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"
          >
            Book a Session
          </Link>
        </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">Begin Your Journey</h2>
          <p className="text-gray-300 mb-8">
            Reach out to discuss how 1-to-1 sessions might support you.
          </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>
  );
}
