import CalendarBoard from "../components/CalendarBoard";
import EventForm from "../components/EventForm";

export default function HomePage() {
  return (
    <div className="space-y-8">
      <section className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-brand-500 via-brand-700 to-slate-900 p-8 text-white shadow-lg">
        <div className="absolute -right-16 -top-16 h-40 w-40 rounded-full bg-white/20 blur-2xl" />
        <div className="absolute -bottom-20 left-10 h-56 w-56 rounded-full bg-white/10 blur-3xl" />
        <div className="relative">
          <h1 className="text-3xl font-semibold">Vereinskalender</h1>
          <p className="mt-2 max-w-2xl text-sm text-white/90">
            Termine einstellen, abstimmen und als persoenlichen Kalender abonnieren.
          </p>
        </div>
      </section>

      <div className="grid gap-8 lg:grid-cols-[1.2fr_0.8fr]">
        <CalendarBoard />
        <EventForm />
      </div>
    </div>
  );
}