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

export const metadata: Metadata = {
  title: 'Workshops',
  description: 'Group workshops exploring art, creativity, and self-expression',
};

export default function WorkshopsPage() {
  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">Workshops</h1>
          <p className="mt-4 text-gray-600">
            Group experiences exploring art, creativity, and self-expression
          </p>
        </div>
      </div>

      {/* Content */}
      <div className="mx-auto max-w-3xl px-4 py-16">
        <div className="prose prose-lg mx-auto">
          <p>
            Workshops offer a unique opportunity to explore creativity in a group
            setting. The energy and insights that emerge when people create together
            can be truly transformative.
          </p>

          <h2 className="font-serif">Workshop Themes</h2>
          <p>
            Workshops vary in focus and duration, but typically explore themes such as:
          </p>
          <ul>
            <li>Creative self-expression and identity</li>
            <li>Art as a tool for reflection and insight</li>
            <li>Colour, mark-making, and visual language</li>
            <li>Connecting with nature through creativity</li>
            <li>Collaborative art-making</li>
          </ul>

          <h2 className="font-serif">Upcoming Workshops</h2>
          <p>
            Check the <Link href="/events">Events page</Link> for upcoming workshop
            dates and details, or sign up for the newsletter to be notified of new offerings.
          </p>
        </div>

        <div className="mt-12 text-center">
          <Link href="/events" className="btn btn-primary">
            View Events
          </Link>
        </div>
      </div>
    </div>
  );
}
