import { getTranslations, setRequestLocale } from 'next-intl/server'
import { MapPin, Phone, Mail, Send } from 'lucide-react'

export default async function ContactPage({ params }: { params: Promise<{ locale: string }> }) {
  const { locale } = await params
  setRequestLocale(locale)
  
  const t = await getTranslations('contact')

  return (
    <div className="container mx-auto px-4 py-24">
      <div className="max-w-5xl mx-auto">
        <h1 className="text-4xl md:text-5xl font-bold text-primary mb-12 text-center uppercase tracking-wider">
          {t('title')}
        </h1>
        
        <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
          {/* Contact Info */}
          <div className="space-y-8 bg-card p-8 rounded-lg border border-border/50">
            <h2 className="text-2xl font-bold text-foreground uppercase">Teras Steakhouse</h2>
            <div className="space-y-6">
              <div className="flex items-start gap-4">
                <MapPin className="w-6 h-6 text-primary shrink-0" />
                <div>
                  <h3 className="font-semibold text-foreground">Adres</h3>
                  <p className="text-muted-foreground mt-1">{t('address')}</p>
                </div>
              </div>
              <div className="flex items-start gap-4">
                <Phone className="w-6 h-6 text-primary shrink-0" />
                <div>
                  <h3 className="font-semibold text-foreground">Telefon</h3>
                  <a href={`tel:${t('phone').replace(/\s/g, '')}`} className="text-muted-foreground hover:text-primary transition-colors mt-1 block">
                    {t('phone')}
                  </a>
                </div>
              </div>
              <div className="flex items-start gap-4">
                <Mail className="w-6 h-6 text-primary shrink-0" />
                <div>
                  <h3 className="font-semibold text-foreground">E-posta</h3>
                  <a href={`mailto:${t('email')}`} className="text-muted-foreground hover:text-primary transition-colors mt-1 block">
                    {t('email')}
                  </a>
                </div>
              </div>
            </div>
          </div>

          {/* Contact Form */}
          <div className="bg-card p-8 rounded-lg border border-border/50">
            <form className="space-y-6" action="#" method="POST">
              <div className="space-y-2">
                <label htmlFor="name" className="text-sm font-medium text-foreground">
                  {t('form_name')}
                </label>
                <input
                  id="name"
                  type="text"
                  required
                  className="w-full bg-background border border-border rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-primary/50 text-foreground"
                />
              </div>
              <div className="space-y-2">
                <label htmlFor="email" className="text-sm font-medium text-foreground">
                  {t('form_email')}
                </label>
                <input
                  id="email"
                  type="email"
                  required
                  className="w-full bg-background border border-border rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-primary/50 text-foreground"
                />
              </div>
              <div className="space-y-2">
                <label htmlFor="message" className="text-sm font-medium text-foreground">
                  {t('form_message')}
                </label>
                <textarea
                  id="message"
                  required
                  rows={5}
                  className="w-full bg-background border border-border rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-primary/50 text-foreground resize-none"
                />
              </div>
              <button
                type="submit"
                className="w-full bg-primary text-white font-bold uppercase tracking-wider py-4 rounded-md hover:bg-primary/90 transition-colors flex items-center justify-center gap-2"
              >
                {t('form_submit')}
                <Send className="w-4 h-4" />
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
  )
}