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',
  description: 'Learn about Katheryn Trenshaw - artist, teacher, and facilitator',
};

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">
          <h1 className="font-serif text-4xl md:text-5xl">About</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 }}
          />
        ) : (
          <div className="grid gap-16 lg:grid-cols-2 items-start">
            {/* Image */}
            <div className="relative aspect-[3/4] bg-gray-100 overflow-hidden">
              <Image
                src="/images/katheryn-portrait.jpg"
                alt="Katheryn Trenshaw"
                fill
                className="object-cover"
                sizes="(max-width: 1024px) 100vw, 50vw"
                priority
              />
            </div>

            {/* Bio */}
            <div className="prose prose-lg">
              <h2 className="font-serif text-2xl mt-0">Katheryn Trenshaw</h2>
              <p>
                Katheryn Trenshaw is an artist, teacher, and facilitator dedicated to
                helping others discover their creative voice. Through the Passionate
                Presence Center for Creative Expression, she offers transformative
                experiences that combine art-making with personal development.
              </p>

              <p>
                Her work explores themes of identity, nature, and the human experience,
                inviting viewers to pause and reflect on their own journey. Drawing
                inspiration from the natural world and inner landscapes, each piece
                tells a unique story.
              </p>

              <h3 className="font-serif text-xl mt-12">The Art</h3>
              <p>
                Using a variety of media including oils, acrylics, and mixed media,
                Katheryn creates pieces that invite the viewer to look closer and
                discover something new with each viewing. Her work has been exhibited
                in galleries across the UK and internationally.
              </p>

              <h3 className="font-serif text-xl mt-12">Teaching &amp; Facilitation</h3>
              <p>
                Beyond personal artistic practice, Katheryn is passionate about
                helping others express themselves creatively. Through programs like
                <em> In Your Own Skin</em> and one-to-one sessions, she creates
                supportive spaces for creative exploration and self-discovery.
              </p>
            </div>
          </div>
        )}
      </div>

      {/* Media Banner */}
      <div className="bg-gray-50 py-12">
        <div className="mx-auto max-w-4xl px-4">
          <div className="relative h-24 md:h-32">
            <Image
              src="/images/media-banner.png"
              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">
          <p className="text-lg text-gray-600">
            Interested in working together?
          </p>
          <Link href="/contact" className="mt-6 inline-block btn btn-primary">
            Get in Touch
          </Link>
        </div>
      </div>
    </div>
  );
}
