import { serverGet } from '@/lib/api'
import type { Gym, Paginated } from '@/lib/types'
import { GymsBrowser } from '@/components/GymsBrowser'

export const metadata = {
  title: 'Gyms & Fitness Facilities',
  description: 'Browse verified gyms and fitness facilities on Fitorza. Filter by city, access and amenities, or find gyms near you.',
  alternates: { canonical: '/gyms' },
  openGraph: { title: 'Gyms & Fitness Facilities · Fitorza', description: 'Find gyms near you and check in with one membership.', type: 'website', url: '/gyms' },
}

async function getGyms(): Promise<Gym[]> {
  try { const r = await serverGet<Paginated<Gym>>('/gyms?sort=rating', 300); return r.data ?? [] } catch { return [] }
}

export default async function GymsPage() {
  const initial = await getGyms()
  return (
    <div className="container-x py-8">
      <h1 className="h-section">Gyms &amp; fitness facilities</h1>
      <p className="mt-1 text-sm text-muted">Verified gyms near you — filter by city, access and facilities, then check in with one membership.</p>
      <div className="mt-6"><GymsBrowser initial={initial} /></div>
    </div>
  )
}