import React from 'react';
import Link from 'next/link';
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Events | Louisiana Association of the Deaf',
  description: 'Upcoming events and activities from the Louisiana Association of the Deaf.',
};

interface Event {
  title: string;
  date: string;
  location: string;
  description: string;
  slug: string;
  featured?: boolean;
}

const events: Event[] = [
  {
    title: 'LAD 52nd Biennial State Conference',
    date: 'June 1–3, 2023',
    location: 'Sheraton Metairie, New Orleans area',
    description:
      '"Embracing the Challenges of Change" — Keynote by Dr. Natalie Delgado, 115th Anniversary Bash, comedian Sheena Lyles. $100 registration. Open to all.',
    slug: '52nd-biennial-conference',
    featured: true,
  },
  {
    title: 'NOBDA & LAD Collaboration — Book Reading with Franklin Jones on BASL',
    date: 'Saturday, May 23rd',
    location: 'To be announced',
    description:
      'A special book reading event in collaboration with the New Orleans Black Deaf Association, featuring Franklin Jones presenting on Black American Sign Language (BASL).',
    slug: 'nobda-lad-basl-book-reading',
    featured: true,
  },
  {
    title: 'LSDF 19th Annual Dash for Deaf Kids 5K',
    date: 'April 15, 2023',
    location: 'Louisiana',
    description:
      'LAD-sponsored annual 5K run/walk benefiting the Louisiana School for the Deaf Foundation\'s programs for deaf youth.',
    slug: 'dash-for-deaf-kids-2023',
  },
  {
    title: 'LAD Quarterly Board Meeting',
    date: 'January 21, 2023',
    location: 'Rapides Parish Main Library, Alexandria, LA',
    description:
      'Quarterly Board Meeting open to all LAD members.',
    slug: 'quarterly-board-meeting-jan-2023',
  },
  {
    title: 'LAD Quarterly Meeting',
    date: 'April 1, 2023',
    location: 'Deaf Action Center, Shreveport, LA',
    description: 'Quarterly general membership meeting.',
    slug: 'quarterly-meeting-apr-2023',
  },
  {
    title: 'Meet Deaf Santa',
    date: 'December 11, 2022',
    location: 'LAD Office',
    description:
      'Annual holiday event for deaf children — meet Deaf Santa, games, and holiday celebration.',
    slug: 'meet-deaf-santa-2022',
  },
  {
    title: 'Deaf Seniors Luncheon',
    date: 'December 6, 2022',
    location: "Mike Anderson's, Gonzales, LA",
    description: 'Annual luncheon celebrating deaf seniors in our community.',
    slug: 'deaf-seniors-luncheon-2022',
  },
  {
    title: 'LAD Happy Hour Social',
    date: 'January 22, 2020',
    location: 'Tin Roof Brewing, Baton Rouge',
    description: 'Casual social gathering for LAD members and the broader Deaf community.',
    slug: 'happy-hour-2020',
  },
  {
    title: 'New Year Workshop with Gary W. Olsen',
    date: 'January 11, 2020',
    location: 'Louisiana School for the Deaf',
    description:
      'Free workshop for all LAD members featuring Gary W. Olsen, former President of the National Association of the Deaf.',
    slug: 'new-year-workshop-2020',
  },
  {
    title: 'Deaf Focus 10th Anniversary Gala',
    date: 'October 5, 2019',
    location: 'Baton Rouge',
    description:
      'Celebrating 10 years of Deaf Focus with special guests John Maucere and DJ Nico DiMarco.',
    slug: 'deaf-focus-10th-anniversary',
  },
  {
    title: 'Monthly ASL Meet & Greet',
    date: 'Last Thursday of each month (except Nov/Dec)',
    location: "Torchy's Tacos, Baton Rouge",
    description:
      'Monthly social gathering — ASL practice, networking, and community. All skill levels welcome. Check Facebook for current location updates.',
    slug: 'asl-meet-and-greet',
  },
  {
    title: 'LAD Annual Crawfish Boil',
    date: 'March 8, 2020',
    location: 'Louisiana',
    description: 'First annual LAD Crawfish Boil — proceeds support the LAD Youth Fund.',
    slug: 'crawfish-boil-2020',
  },
];

const EventCard = ({ event }: { event: Event }) => (
  <div className={`card event-card-gold-border h-full flex flex-col ${event.featured ? 'ring-2 ring-[var(--color-primary)]' : ''}`}>
    <div className="p-6 flex-grow flex flex-col">
      {event.featured && (
        <span className="featured-badge self-start mb-3 px-2 py-0.5 rounded-full text-xs">
          Featured
        </span>
      )}
      <h3 className="card-title event-card-title-gold text-xl font-semibold mb-2">{event.title}</h3>
      <p className="card-date font-medium text-sm mb-1">{event.date}</p>
      <p className="section-text text-sm mb-3">{event.location}</p>
      <p className="card-description mb-4 flex-grow">{event.description}</p>
    </div>
  </div>
);

export default function EventsPage() {
  const featuredEvents = events.filter((e) => e.featured);
  const upcomingEvents = events.filter((e) => !e.featured);

  return (
    <div className="bg-color-bg">
      {/* Hero */}
      <section className="py-16 bg-color-bg-secondary">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center">
            <h1 className="hero-title text-4xl md:text-5xl font-bold mb-6">Events & Calendar</h1>
            <p className="hero-subtitle text-xl">
              Connect with the Louisiana Deaf community through LAD events statewide.
            </p>
          </div>
        </div>
      </section>

      {/* Featured events */}
      {featuredEvents.length > 0 && (
        <section className="py-12 bg-color-bg">
          <div className="container mx-auto px-4">
            <h2 className="section-heading text-3xl font-bold mb-8 text-center">Featured Events</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
              {featuredEvents.map((event) => (
                <EventCard key={event.slug} event={event} />
              ))}
            </div>
          </div>
        </section>
      )}

      {/* All events */}
      <section className="py-12 bg-color-bg-secondary">
        <div className="container mx-auto px-4">
          <h2 className="section-heading text-3xl font-bold mb-8 text-center">All Events</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {upcomingEvents.map((event) => (
              <EventCard key={event.slug} event={event} />
            ))}
          </div>
        </div>
      </section>

      {/* Event categories */}
      <section className="py-12 bg-color-bg">
        <div className="container mx-auto px-4">
          <h2 className="section-heading text-2xl font-bold mb-6 text-center">Types of Events</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {[
              { name: 'Social Gatherings', desc: 'Meet & greets, happy hours, and community socials.' },
              { name: 'Educational Workshops', desc: 'ASL classes, advocacy workshops, and professional development.' },
              { name: 'Biennial Conferences', desc: 'LAD\'s flagship statewide conference held every two years.' },
              { name: 'Board & Quarterly Meetings', desc: 'Open to all members — participate in LAD governance.' },
            ].map((cat) => (
              <div key={cat.name} className="card event-card-gold-border p-6 text-center">
                <h3 className="benefit-card-title event-card-title-gold text-lg font-semibold mb-3">{cat.name}</h3>
                <p className="benefit-card-description text-sm">{cat.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-16 cta-section">
        <div className="container mx-auto px-4 text-center">
          <h2 className="cta-title text-3xl font-bold mb-4">Suggest an Event</h2>
          <p className="cta-description text-xl max-w-3xl mx-auto mb-8">
            Have an idea for a community event? We&apos;d love to hear from you.
          </p>
          <Link
            href="/contact"
            className="cta-button-primary px-6 py-3 rounded-lg font-medium text-lg inline-block"
          >
            Contact Us
          </Link>
        </div>
      </section>
    </div>
  );
}