/* ═══════════════════════════════════════════════════════════════
   RETREATS BAND

   The National Retreats carousel from the Retreats page, as-is:
   same component, same filter, so an event edited in the admin
   shows up identically in both places. This file only adds the
   front page's heading and a way through to the full page.
   ═══════════════════════════════════════════════════════════════ */

import { Link } from 'react-router-dom'

import EventListCards from '../EventList-Cards.tsx'

const TEAL = '#138ba0'

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

export default function RetreatsBand({ id, title, blurb }: RetreatsBandProps) {
  return (
    <section id={id} className="overflow-hidden py-24" style={{ background: '#eef9fb' }}>
      <div className="mx-auto mb-12 flex max-w-6xl flex-wrap items-end gap-6 px-6">
        <div>
          <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>
        <Link
          to="/retreats"
          className="ml-auto rounded-full border px-5 py-2 text-sm font-semibold transition-colors hover:bg-white"
          style={{ borderColor: TEAL, color: TEAL }}
        >
          All retreats →
        </Link>
      </div>

      <EventListCards section="national" type="retreat" view="carousel" accent={TEAL} />
    </section>
  )
}