'use client';

import React from 'react';
import Link from 'next/link';
import Image from 'next/image';
import Hero from '../components/molecules/Hero';

// Featured Event Card Component
interface EventCardProps {
  title: string;
  description: string;
  date: string;
  imageUrl?: string;
  slug: string;
}

const EventCard: React.FC<EventCardProps> = ({ 
  title, 
  description, 
  date, 
  imageUrl, 
  slug 
}) => {
  return (
    <div className="card h-full flex flex-col">
      <div className="aspect-video bg-gray-200 relative">
        {imageUrl ? (
          <Image 
            src={imageUrl} 
            alt={title}
            fill
            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
            className="object-cover"
          />
        ) : (
          <div className="w-full h-full flex items-center justify-center">
            <span className="text-gray-400">No image available</span>
          </div>
        )}
      </div>
      <div className="p-6 flex-grow flex flex-col">
        <h3 className="text-xl font-semibold mb-2">{title}</h3>
        <p className="text-gray-600 dark:text-gray-300 mb-4 flex-grow">{description}</p>
        <div className="flex justify-between items-center mt-auto">
          <span className="text-primary font-medium">{date}</span>
          <Link href={`/events/${slug}`} className="text-primary hover:underline">
            Learn more
          </Link>
        </div>
      </div>
    </div>
  );
};

export default function Home() {
  return (
    <>
      {/* Hero Section */}
      <Hero 
        title="Olathe Club of the Deaf"
        subtitle="A community organization serving the deaf and hard-of-hearing community in Olathe since 1975."
        primaryButtonText="Upcoming Events"
        primaryButtonLink="/events"
        secondaryButtonText="Join OCD"
        secondaryButtonLink="/membership"
      />
      
      {/* Featured events section */}
      <section className="py-16 bg-white dark:bg-gray-900">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold mb-8 text-center">Featured Events</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <EventCard 
              title="Monthly Social"
              description="Join us for our monthly social gathering with games, refreshments, and great conversation."
              date="Apr 15, 2025"
              slug="monthly-social"
            />
            <EventCard 
              title="ASL Workshop"
              description="Learn new signs and practice your ASL skills with our certified instructors."
              date="Apr 22, 2025"
              slug="asl-workshop"
            />
            <EventCard 
              title="Board Meeting"
              description="Monthly board meeting open to all members. Come share your ideas and feedback."
              date="May 5, 2025"
              slug="board-meeting"
            />
          </div>
          <div className="text-center mt-10">
            <Link 
              href="/events" 
              className="btn-secondary inline-block"
            >
              View All Events
            </Link>
          </div>
        </div>
      </section>
      
      {/* About section with video */}
      <section className="py-16 bg-gray-50 dark:bg-gray-800">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold mb-8 text-center">About OCD</h2>
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div>
              <p className="text-lg mb-6">
                Olathe Club of the Deaf (OCD) is a non-profit organization dedicated to serving the deaf and hard-of-hearing community in Olathe and surrounding areas.
              </p>
              <p className="text-lg mb-6">
                Our mission is to promote social, educational, and recreational opportunities for deaf individuals and their families while fostering a sense of community and belonging.
              </p>
              <p className="text-lg mb-6">
                Founded in 1975, we have a rich history of advocacy and community service, working to bridge the gap between the deaf and hearing communities.
              </p>
              <Link href="/about" className="btn-primary inline-block">
                Learn More About Us
              </Link>
            </div>
            <div className="bg-white dark:bg-gray-700 rounded-lg shadow-md p-2 aspect-video relative">
              <div className="w-full h-full flex items-center justify-center bg-gray-200 dark:bg-gray-600 rounded">
                <p className="text-gray-600 dark:text-gray-300">ASL Video Introduction</p>
                {/* Video player will be implemented here */}
              </div>
            </div>
          </div>
        </div>
      </section>
      
      {/* Membership Benefits */}
      <section className="py-16 bg-white dark:bg-gray-900">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold mb-8 text-center">Membership Benefits</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <div className="card p-6">
              <h3 className="text-xl font-semibold mb-4">Community Events</h3>
              <p className="text-gray-600 dark:text-gray-300">
                Access to all OCD community events, socials, and gatherings throughout the year.
              </p>
            </div>
            <div className="card p-6">
              <h3 className="text-xl font-semibold mb-4">Voting Rights</h3>
              <p className="text-gray-600 dark:text-gray-300">
                Have your say in club decisions and vote in board elections.
              </p>
            </div>
            <div className="card p-6">
              <h3 className="text-xl font-semibold mb-4">Support Network</h3>
              <p className="text-gray-600 dark:text-gray-300">
                Connect with a supportive network of deaf and hard-of-hearing individuals.
              </p>
            </div>
          </div>
          <div className="text-center mt-10">
            <Link 
              href="/membership" 
              className="btn-primary inline-block"
            >
              Become A Member
            </Link>
          </div>
        </div>
      </section>
      
      {/* Call to action */}
      <section className="py-16 bg-primary text-white">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl font-bold mb-4">Join Our Community</h2>
          <p className="text-xl max-w-3xl mx-auto mb-8">
            Become a member today and connect with the deaf community in Olathe.
          </p>
          <div className="flex flex-col sm:flex-row justify-center gap-4">
            <Link 
              href="/membership" 
              className="bg-white text-primary hover:bg-gray-100 px-6 py-3 rounded-lg font-medium text-lg transition-colors duration-300"
            >
              Become a Member
            </Link>
            <Link 
              href="/donate" 
              className="bg-primary-dark text-white hover:bg-primary-light border border-white px-6 py-3 rounded-lg font-medium text-lg transition-colors duration-300"
            >
              Support Our Mission
            </Link>
          </div>
        </div>
      </section>
    </>
  );
}