/* ═══════════════════════════════════════════════════════════════
   CALENDAR BAND

   EventCalendar on the front page: every scope and every type, all
   four visitor filters, starting on this month. The same component
   can go on any page with a narrower filter — a region's page would
   pass host, a classes page would pass type — and this file only
   adds the front page's heading around it.
   ═══════════════════════════════════════════════════════════════ */

import EventCalendar from '../EventCalendar.tsx'

type CalendarBandProps = { id: string; title: string; blurb?: string | null }

export default function CalendarBand({ id, title, blurb }: CalendarBandProps) {
  return (
    <section id={id} className="py-24" style={{ background: '#f6fbfc' }}>
      <div className="mx-auto mb-10 max-w-6xl px-6">
        <h2 className="font-display text-4xl font-extrabold text-[#073d4a] md:text-5xl">
          {title}
        </h2>
        {blurb && <p className="mt-3 max-w-xl text-lg text-[#4a6b72]">{blurb}</p>}
      </div>

      <EventCalendar />
    </section>
  )
}