'use client'

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { MapPin, Phone, Mail, Clock } from 'lucide-react'
import { siteConfig, formatFullAddress } from '@/lib/site-config'

export default function CourseVenue() {
  const venues = [
    {
      name: 'BCTCI Training Centre — Bangkok',
      location: `${siteConfig.address.city}, ${siteConfig.address.country}`,
      address: formatFullAddress('\n'),
      capacity: '500+ participants',
      facilities: ['Conference Halls', 'Training Rooms', 'Meeting Rooms', 'Cafe & Dining', 'WiFi', 'Parking'],
      contact: siteConfig.phone,
      email: siteConfig.email,
    },
  ]

  return (
    <main>
      <div className="min-h-screen bg-background">
        <section className="bg-primary text-primary-foreground py-20">
          <div className="container mx-auto px-4">
            <h1 className="text-4xl md:text-5xl font-bold mb-4">Course Venues</h1>
            <p className="text-lg opacity-90">State-of-the-art training facilities in Bangkok, Thailand.</p>
          </div>
        </section>

        <section className="py-16">
          <div className="container mx-auto px-4">
            <div className="grid gap-8 mb-12">
              {venues.map((venue, index) => (
                <Card key={index} className="overflow-hidden">
                  <CardHeader className="bg-muted/50">
                    <CardTitle className="text-2xl">{venue.name}</CardTitle>
                    <CardDescription className="text-base">{venue.location}</CardDescription>
                  </CardHeader>
                  <CardContent className="pt-6">
                    <div className="grid md:grid-cols-2 gap-8">
                      <div className="space-y-4">
                        <div>
                          <h4 className="font-semibold text-primary mb-2">Address</h4>
                          <div className="flex gap-2">
                            <MapPin className="w-5 h-5 text-primary flex-shrink-0 mt-1" />
                            <p className="whitespace-pre-line">{venue.address}</p>
                          </div>
                        </div>
                        <div>
                          <h4 className="font-semibold text-primary mb-2">Capacity</h4>
                          <p>{venue.capacity}</p>
                        </div>
                        <div>
                          <h4 className="font-semibold text-primary mb-2">Contact</h4>
                          <div className="space-y-2">
                            <div className="flex gap-2">
                              <Phone className="w-5 h-5 text-primary flex-shrink-0" />
                              <a href={`tel:${venue.contact.replace(/\s/g, '')}`} className="hover:text-primary">{venue.contact}</a>
                            </div>
                            <div className="flex gap-2">
                              <Mail className="w-5 h-5 text-primary flex-shrink-0" />
                              <a href={`mailto:${venue.email}`} className="hover:text-primary">{venue.email}</a>
                            </div>
                          </div>
                        </div>
                        <div>
                          <h4 className="font-semibold text-primary mb-2">Business Hours</h4>
                          <div className="flex gap-2">
                            <Clock className="w-5 h-5 text-primary flex-shrink-0" />
                            <p>{siteConfig.businessHours.weekdays}: {siteConfig.businessHours.hours}</p>
                          </div>
                        </div>
                      </div>
                      <div>
                        <h4 className="font-semibold text-primary mb-4">Facilities & Amenities</h4>
                        <div className="grid grid-cols-2 gap-3">
                          {venue.facilities.map((facility, idx) => (
                            <div key={idx} className="flex items-center gap-2 text-sm">
                              <span className="w-2 h-2 rounded-full bg-primary" />
                              {facility}
                            </div>
                          ))}
                        </div>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        </section>
      </div>
    </main>
  )
}