import { useState } from 'react';
import { Calendar, Clock, MapPin, Ticket } from 'lucide-react';
import { EVENTS } from '../data/content';
import { PageHero } from '../components/ui/SectionHeading';
import { FadeIn } from '../components/ui/Motion';
import { Button, LinkButton } from '../components/ui/Button';
import { EventRsvpModal } from '../components/ui/EventRsvpModal';

export function EventsPage() {
  const [selectedEvent, setSelectedEvent] = useState<typeof EVENTS[0] | null>(null);

  return (
    <>
      <PageHero
        title="Community Events & Workshops"
        subtitle="Inclusive workshops, NDIS plan review seminars, and community morning teas across Victoria."
      />

      <section className="px-4 py-16">
        <div className="mx-auto max-w-4xl space-y-6">
          {EVENTS.map((event, i) => (
            <FadeIn key={event.id} delay={i * 0.08}>
              <article className="group flex flex-col md:flex-row gap-6 overflow-hidden rounded-3xl border border-theme bg-[var(--color-surface)] p-6 shadow-sm transition-all hover:border-primary hover:shadow-xl">
                <div className="md:w-1/3 aspect-video md:aspect-auto overflow-hidden rounded-2xl border border-theme shrink-0">
                  <img
                    src={event.image}
                    alt={event.title}
                    className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
                  />
                </div>

                <div className="flex-1 flex flex-col justify-between">
                  <div>
                    <div className="flex items-center justify-between gap-2 mb-2">
                      <span className="rounded-full bg-primary/10 px-3 py-0.5 text-[10px] font-bold text-primary uppercase tracking-wider">
                        {event.category}
                      </span>
                      <span className="text-[10px] font-bold text-secondary flex items-center gap-1">
                        <Ticket className="h-3 w-3" /> {event.seatsLeft} Seats Remaining
                      </span>
                    </div>

                    <h2 className="text-xl font-bold text-[var(--color-text)] group-hover:text-primary transition-colors">
                      {event.title}
                    </h2>

                    <div className="mt-3 flex flex-wrap gap-4 text-xs text-muted">
                      <span className="inline-flex items-center gap-1.5 font-semibold text-[var(--color-text)]">
                        <Calendar className="h-3.5 w-3.5 text-primary" />
                        {event.date}
                      </span>
                      <span className="inline-flex items-center gap-1.5">
                        <Clock className="h-3.5 w-3.5 text-primary" />
                        {event.time}
                      </span>
                      <span className="inline-flex items-center gap-1.5">
                        <MapPin className="h-3.5 w-3.5 text-primary" />
                        {event.location}
                      </span>
                    </div>

                    <p className="mt-3 text-xs text-muted leading-relaxed">{event.summary}</p>
                  </div>

                  <div className="mt-6 border-t border-theme pt-4 flex items-center justify-between">
                    <span className="text-[11px] text-muted font-medium">Free Entry · Refreshments Provided</span>
                    <Button onClick={() => setSelectedEvent(event)} className="!px-4 !py-2 text-xs">
                      Reserve Free Spot
                    </Button>
                  </div>
                </div>
              </article>
            </FadeIn>
          ))}

          <FadeIn className="mt-12 rounded-3xl border border-dashed border-theme p-8 text-center bg-[var(--color-bg-alt)]">
            <h3 className="text-lg font-bold text-[var(--color-text)]">Want to host an event or workshop with Embrace?</h3>
            <p className="mt-1 text-xs text-muted">We collaborate with local community hubs, support networks, and allied health practices.</p>
            <LinkButton to="/contact" variant="outline" className="mt-4">
              Get in touch with Event Team
            </LinkButton>
          </FadeIn>
        </div>
      </section>

      <EventRsvpModal event={selectedEvent} onClose={() => setSelectedEvent(null)} />
    </>
  );
}