import { FeaturedEventCard, MiniEventCard } from "@/components/EventCard";
import { featuredEvents, miniEvents } from "@/lib/data";

export const metadata = { title: "Events — UP Parivaar Dallas" };

export default function EventsPage() {
  return (
    <>
      <section className="page-glow page-hero--tight">
        <div className="container hero-center">
          <span className="eyebrow">Events</span>
          <h1 className="display-title ts-36-48 events-hero__title">
            Worth driving across the metroplex for
          </h1>
          <p className="events-hero__lead">
            Not events. Experiences — where food, music, culture and family come
            together.
          </p>
        </div>
      </section>

      <section className="section-white">
        <div className="container events-list">
          <FeaturedEventCard e={featuredEvents[0]} />

          <div className="events-list__grid">
            {miniEvents.map((e) => (
              <MiniEventCard key={e.title} e={e} />
            ))}
          </div>

          <FeaturedEventCard e={featuredEvents[1]} />
        </div>
      </section>
    </>
  );
}