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

export const metadata: Metadata = {
  title: 'Breaking The Silence',
  description: 'A creative project exploring voice, expression, and the power of speaking our truth',
};

export default function BreakingTheSilencePage() {
  return (
    <div className="min-h-screen bg-white">
      {/* Hero with artwork */}
      <div className="relative min-h-[70vh] flex items-center justify-center bg-gray-900">
        <div className="absolute inset-0">
          <Image
            src="/images/you-stole-my-voice.jpg"
            alt="You Stole My Voice - Artwork by Katheryn Trenshaw"
            fill
            className="object-cover opacity-60"
            priority
          />
        </div>
        <div className="relative text-center px-4 py-20 max-w-4xl mx-auto text-white">
          <h1 className="font-serif text-4xl md:text-6xl">Breaking The Silence</h1>
          <p className="mt-6 text-lg text-gray-200 max-w-2xl mx-auto">
            A creative project exploring voice, expression, and the power of speaking our truth
          </p>
        </div>
      </div>

      {/* Content */}
      <div className="mx-auto max-w-3xl px-4 py-16">
        <div className="prose prose-lg mx-auto">
          <p>
            <em>Breaking The Silence</em> is an ongoing creative project that explores
            the themes of voice, expression, and the transformative power of speaking
            our truth.
          </p>

          <p>
            Through visual art, written word, and collaborative experiences, this
            project invites participants to explore the silences in their own lives
            and find new ways to give voice to their stories.
          </p>

          <h2 className="font-serif">The Art</h2>
          <p>
            The artwork &ldquo;You Stole My Voice&rdquo; represents the central theme of this
            project &ndash; the reclaiming of voice after it has been silenced, suppressed,
            or taken away. It speaks to experiences of trauma, oppression, and the
            courage required to speak again.
          </p>

          <h2 className="font-serif">The Project</h2>
          <p>
            This project takes many forms: workshops, exhibitions, collaborative
            art-making, and individual sessions. Each offering creates space for
            participants to explore their own relationship with voice and silence.
          </p>
        </div>
      </div>

      {/* Video Section */}
      <div className="bg-[#222] py-16">
        <div className="mx-auto max-w-4xl px-4">
          <h2 className="font-serif text-3xl text-white text-center mb-8">Watch the Film</h2>
          <div className="relative aspect-video">
            <iframe
              src="https://www.youtube.com/embed/hpzvEQs9vEk"
              title="Breaking The Silence"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowFullScreen
              className="absolute inset-0 w-full h-full"
            />
          </div>
        </div>
      </div>

      {/* Artwork showcase */}
      <div className="bg-gray-50 py-16">
        <div className="mx-auto max-w-4xl px-4">
          <div className="relative aspect-[4/3]">
            <Image
              src="/images/you-stole-my-voice.jpg"
              alt="You Stole My Voice - Full artwork"
              fill
              className="object-contain"
              sizes="(max-width: 1024px) 100vw, 800px"
            />
          </div>
          <p className="mt-4 text-center text-sm text-gray-500 italic">
            &ldquo;You Stole My Voice&rdquo; &ndash; Katheryn Trenshaw
          </p>
        </div>
      </div>

      {/* CTA */}
      <div className="border-t border-gray-200">
        <div className="mx-auto max-w-7xl px-4 py-16 text-center">
          <h3 className="font-serif text-2xl">Interested in This Project?</h3>
          <p className="mt-4 text-gray-600">
            Get in touch to learn more about upcoming workshops or collaborations.
          </p>
          <Link href="/contact" className="mt-8 inline-block btn btn-primary">
            Get In Touch
          </Link>
        </div>
      </div>
    </div>
  );
}
