import type { Metadata } from 'next'
import ContactForm from '../../../components/ContactForm'

export async function generateMetadata({ params: { locale } }: { params: { locale: string } }): Promise<Metadata> {
  return { title: locale === 'en' ? 'Contact' : 'İletişim' }
}

export default function IletisimPage({ params: { locale } }: { params: { locale: string } }) {
  const en = locale === 'en'
  return (
    <div className="pt-20">
      <div className="max-w-7xl mx-auto px-6 md:px-10 py-16 grid grid-cols-1 lg:grid-cols-2 gap-16">
        <div>
          <p className="font-body text-xs tracking-widest uppercase text-orange mb-3">
            {en ? 'Contact' : 'İletişim'}
          </p>
          <h1 className="font-display text-5xl font-light text-brown mb-8">
            {en ? "Let's Talk" : 'Konuşalım'}
          </h1>
          <p className="font-body text-sm text-brown/60 mb-12 leading-relaxed max-w-sm">
            {en
              ? 'For dealer partnership, project consulting, or product information, reach us through the channels below.'
              : 'Bayi ortaklığı, proje danışmanlığı veya ürün bilgisi için aşağıdaki kanallardan ulaşabilirsiniz.'}
          </p>

          <div className="space-y-4">
            {[
              {
                label: en ? 'Email' : 'E-posta',
                value: 'iletisim@peyzajart.com',
                href: 'mailto:iletisim@peyzajart.com',
              },
              {
                label: en ? 'WhatsApp' : 'WhatsApp',
                value: '+90 545 183 07 07',
                href: 'https://wa.me/905451830707',
              },
              {
                label: en ? 'Address' : 'Adres',
                value: 'Türkiye',
                href: null,
              },
            ].map(c => (
              <div key={c.label} className="rounded-xl bg-sand p-5 flex gap-6 items-start">
                <span className="font-body text-xs tracking-widest uppercase text-brown/30 w-20 flex-none">{c.label}</span>
                {c.href
                  ? <a href={c.href} className="font-body text-sm text-brown hover:text-orange transition-colors break-all">{c.value}</a>
                  : <span className="font-body text-sm text-brown">{c.value}</span>}
              </div>
            ))}
          </div>

          <div className="mt-12 aspect-video bg-sand rounded-xl overflow-hidden">
            <div className="w-full h-full flex items-center justify-center text-brown/20 font-display text-sm">Google Maps</div>
          </div>
        </div>

        <div>
          <div className="bg-sand rounded-xl p-8 md:p-12">
            <h2 className="font-display text-2xl font-light text-brown mb-8">
              {en ? 'Send a Message' : 'Mesaj Gönder'}
            </h2>
            <ContactForm locale={locale as 'tr' | 'en'} />
          </div>
        </div>
      </div>
    </div>
  )
}