import { Metadata } from 'next';
import Link from 'next/link';
import Image from 'next/image';
import { getPage, Page } from '@/lib/directus';

export const metadata: Metadata = {
  title: 'About | Katheryn Trenshaw',
  description: 'Katheryn Trenshaw is an American-born UK-based international artist, author, celebrant, speaker, film-maker and facilitator who has been offering workshops and consulting for more than 40 years.',
};

export const revalidate = 60;

async function getAboutPage(): Promise<Page | null> {
  try {
    return await getPage('about');
  } catch (error) {
    console.error('Error fetching about page:', error);
    return null;
  }
}

export default async function AboutPage() {
  const page = await getAboutPage();

  return (
    <div className="min-h-screen bg-white pt-24">
      {/* Header */}
      <div 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-2">ABOUT</p>
          <h1 className="font-serif text-4xl md:text-5xl text-[#222]">Katheryn Trenshaw</h1>
        </div>
      </div>

      {/* Content */}
      <div className="mx-auto max-w-6xl px-4 py-16">
        {page?.content ? (
          <div
            className="prose prose-lg mx-auto"
            dangerouslySetInnerHTML={{ __html: page.content }}
          />
        ) : (
          <>
            {/* Hero Section */}
            <div className="grid gap-12 lg:grid-cols-2 items-start mb-20">
              {/* Image */}
              <div className="relative aspect-[3/4] bg-gray-100 overflow-hidden">
                <Image
                  src="https://images.squarespace-cdn.com/content/v1/5aef40c1cc8feda235a99bb6/1554298674802-URS0LU6GR1ASLE3RPUS7/Katheryn+Trenshaw+tree+blossom2-17.jpg?format=original"
                  alt="Katheryn Trenshaw"
                  fill
                  className="object-cover"
                  sizes="(max-width: 1024px) 100vw, 50vw"
                  priority
                />
              </div>

              {/* Bio */}
              <div>
                <h2 className="font-serif text-3xl text-[#222] mb-6">The Artist & Teacher</h2>
                <div className="prose prose-lg text-gray-700">
                  <p>
                    Katheryn Trenshaw, the founder and creative director of the{' '}
                    <em>Passionate Presence Center for Creative Expression</em>, is an
                    American-born UK-based international artist, author, celebrant, speaker,
                    film-maker and facilitator who has been offering workshops and consulting
                    for more than 40 years.
                  </p>
                  <p>
                    She has been a professional artist for over 45 years and holds two BA Hons
                    in French & Psychology, as well as a host of postgraduate study in academics,
                    arts, movement, and trauma-informed somatics.
                  </p>
                  <p>
                    As a teacher, facilitator and consultant, Katheryn has a rare gift for
                    encouraging expressive risk-taking within a safe setting. Her contagious
                    passion for life and her ability to encourage celebration and making the
                    everyday sacred are hallmarks of her work.
                  </p>
                </div>
              </div>
            </div>

            {/* Quote */}
            <div className="my-20 py-12 border-y border-gray-200">
              <figure className="max-w-3xl mx-auto text-center">
                <blockquote className="font-serif text-2xl md:text-3xl italic text-[#222] leading-relaxed">
                  &ldquo;I love dancing with paradox. From this viewpoint I can see how we connect
                  and are joined by our commonalities. My work is about giving expression to
                  authentic human experience &ndash; of change and transformation, relationships
                  to people and nature and responding to the numinous ancient wisdom that
                  seeks our attention.&rdquo;
                </blockquote>
                <figcaption className="mt-6 text-sm text-gray-500 uppercase tracking-wider">
                  &mdash; Katheryn M Trenshaw
                </figcaption>
              </figure>
            </div>

            {/* The Artist Section */}
            <div className="mb-20">
              <h2 className="font-serif text-3xl text-[#222] mb-8">The Artist</h2>
              <div className="prose prose-lg text-gray-700 max-w-none">
                <blockquote className="border-l-4 border-gray-300 pl-6 italic">
                  <p>
                    &ldquo;The media in which I work are magical ones: the unpredictable qualities
                    of raku-fired ceramics and wet-washed watercolours that often seem to have
                    a life and message of their own to blend with mine. The silent, solitary
                    and contemplative time that precedes the execution of my work is a process
                    of &lsquo;remembering&rsquo; and honouring the primeval connections for which I
                    become a translator.
                  </p>
                  <p>
                    It is attentiveness to the simple sacred moments of living that evolves
                    into the sensuous forms, vivid colours and contemporary connection with
                    ancient energies that comprise my work. In this way my life is my work,
                    and my work is my life.&rdquo;
                  </p>
                </blockquote>
                <p>
                  Katheryn Trenshaw is a fine artist of international repute. For more than
                  40 years her work has been exhibited extensively throughout the US and Europe.
                  Concentrating largely on watercolour painting, print-making and ceramic
                  sculpture, she has received critical acclaim both as a painter and a sculptor.
                </p>
                <p>
                  Being involved in the creative arts since she discovered her opposable thumb,
                  Katheryn redefines art as a way of living and inspires people to recreate
                  their own lives as works of art, tapping into it as a vehicle for the
                  soul&apos;s expression.
                </p>
              </div>
            </div>

            {/* The Teacher Section */}
            <div className="mb-20">
              <h2 className="font-serif text-3xl text-[#222] mb-8">The Teacher</h2>
              <p className="text-lg text-gray-500 mb-6">
                The Educator, Inspiratrice and Evocateur of Presence and Possibility
              </p>
              <div className="prose prose-lg text-gray-700 max-w-none">
                <p>
                  Katheryn is an international artist, speaker, author, and radical well-being
                  facilitator who has offered, for over 45 years, training and facilitation
                  in movement, art and personal development particularly focused on awakening
                  as embodied consciousness.
                </p>
                <p>
                  She conducts educational events, workshops, multimedia projects and undertakes
                  consulting for individuals, groups and organisations in the United States,
                  Europe, Asia and around the world.
                </p>
                <p>
                  Her touring exhibition, <em>Breaking the Silence</em>, depicting the traumatic
                  effects of sexual abuse and the subsequent struggle towards healing through
                  100 raku masks, had a dramatic impact on both the media and the public in
                  the early nineties. The resulting publicity catapulted Katheryn onto the
                  international lecture and workshop circuit.
                </p>
                <p>
                  All of Katheryn&apos;s work is deeply rooted in nearly four decades of somatic
                  movement and embodied consciousness.
                </p>
              </div>
            </div>

            {/* Projects Section */}
            <div className="mb-20">
              <h2 className="font-serif text-3xl text-[#222] mb-8">Major Projects</h2>
              <div className="grid gap-8 md:grid-cols-2">
                <div className="p-8 bg-gray-50 rounded-lg">
                  <h3 className="font-serif text-xl text-[#222] mb-4">In Your Own Skin</h3>
                  <p className="text-gray-600">
                    A multimedia community art project including a book, documentary, and exhibition.
                    Connecting us all by revealing hidden truths from around the world through
                    photographic portraits.
                  </p>
                  <Link href="/in-your-own-skin" className="mt-4 inline-block text-sm underline underline-offset-4">
                    Learn More
                  </Link>
                </div>
                <div className="p-8 bg-gray-50 rounded-lg">
                  <h3 className="font-serif text-xl text-[#222] mb-4">Breaking the Silence</h3>
                  <p className="text-gray-600">
                    A 10-year touring project offering healing through illustrated talks,
                    mask-making workshops, and a forthcoming book about transformation through art.
                  </p>
                  <Link href="/breaking-the-silence" className="mt-4 inline-block text-sm underline underline-offset-4">
                    Learn More
                  </Link>
                </div>
              </div>
            </div>
          </>
        )}
      </div>

      {/* Media Banner */}
      <div className="bg-gray-50 py-12">
        <div className="mx-auto max-w-4xl px-4 text-center">
          <p className="text-xs uppercase tracking-[0.3em] text-gray-500 mb-6">AS FEATURED IN</p>
          <div className="relative h-24 md:h-32">
            <Image
              src="https://images.squarespace-cdn.com/content/v1/5aef40c1cc8feda235a99bb6/1526503000769-8Q3WLYWRWQO5NGX0L38Y/MediaBanner-1BW.png?format=original"
              alt="Media coverage"
              fill
              className="object-contain"
              sizes="800px"
            />
          </div>
        </div>
      </div>

      {/* CTA */}
      <div className="border-t border-gray-200">
        <div className="mx-auto max-w-7xl px-4 py-16 text-center">
          <h2 className="font-serif text-2xl text-[#222] mb-4">Interested in working together?</h2>
          <p className="text-gray-600 mb-8">
            Whether you&apos;re looking for a one-to-one session, workshop, or exhibition,
            I&apos;d love to hear from you.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link href="/sessions" className="px-8 py-4 bg-[#222] text-white text-sm uppercase tracking-wider rounded-full hover:bg-[#444] transition-colors">
              Book a Session
            </Link>
            <Link href="/contact" className="px-8 py-4 border-2 border-[#222] text-[#222] text-sm uppercase tracking-wider rounded-full hover:bg-[#222] hover:text-white transition-colors">
              Get in Touch
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}
