import type { Metadata } from 'next'

export async function generateMetadata({ params: { locale } }: { params: { locale: string } }): Promise<Metadata> {
  return { title: locale === 'en' ? 'Projects' : 'Projeler' }
}

const PROJECTS = [
  { titleTr: 'İstanbul Rezidans — CUBO Serisi', titleEn: 'Istanbul Residence — CUBO Series', catTr: 'Konut', catEn: 'Residential', year: '2024' },
  { titleTr: 'Ankara AVM Peyzajı — GLOBE Serisi', titleEn: 'Ankara Mall Landscaping — GLOBE Series', catTr: 'Ticari', catEn: 'Commercial', year: '2024' },
  { titleTr: 'İzmir Otel Lobby — RECTA Serisi', titleEn: 'Izmir Hotel Lobby — RECTA Series', catTr: 'Konaklama', catEn: 'Hospitality', year: '2023' },
  { titleTr: 'Bodrum Villa Bahçesi', titleEn: 'Bodrum Villa Garden', catTr: 'Konut', catEn: 'Residential', year: '2023' },
  { titleTr: 'İstanbul Ofis Kompleksi', titleEn: 'Istanbul Office Complex', catTr: 'Ticari', catEn: 'Commercial', year: '2023' },
  { titleTr: 'Belediye Parkı Düzenlemesi', titleEn: 'Municipality Park Design', catTr: 'Kamusal', catEn: 'Public', year: '2022' },
]

export default function ProjelerPage({ params: { locale } }: { params: { locale: string } }) {
  const base = locale === 'tr' ? '' : `/${locale}`
  return (
    <div className="pt-20">
      <div className="max-w-7xl mx-auto px-6 md:px-10 py-16">
        <div className="mb-16">
          <p className="font-body text-xs tracking-widest uppercase text-orange mb-3">
            {locale === 'en' ? 'Portfolio' : 'Portföy'}
          </p>
          <h1 className="font-display text-5xl md:text-6xl font-light text-brown">
            {locale === 'en' ? 'Projects' : 'Projeler'}
          </h1>
          <p className="font-body text-base text-brown/50 mt-4 max-w-lg leading-relaxed">
            {locale === 'en'
              ? 'Selected applications in residential, commercial, and public spaces.'
              : 'Konut, ticari ve kamusal alanlarda gerçekleştirdiğimiz seçili uygulamalar.'}
          </p>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {PROJECTS.map((p, i) => (
            <div key={i} className="group">
              <div className="aspect-[4/3] bg-sand mb-4 overflow-hidden rounded-xl relative">
                <div className="absolute inset-0 flex items-end p-6 bg-gradient-to-t from-brown/20 to-transparent">
                  <span className="font-display text-4xl text-brown/10">{i + 1 < 10 ? `0${i + 1}` : i + 1}</span>
                </div>
              </div>
              <div className="flex items-start justify-between gap-2">
                <div>
                  <p className="font-body text-xs tracking-widest uppercase text-orange mb-1">
                    {locale === 'en' ? p.catEn : p.catTr}
                  </p>
                  <h2 className="font-display text-lg font-light text-brown">
                    {locale === 'en' ? p.titleEn : p.titleTr}
                  </h2>
                </div>
                <span className="font-body text-xs text-brown/30 mt-1 flex-none">{p.year}</span>
              </div>
            </div>
          ))}
        </div>

        <div className="mt-20 bg-sand rounded-xl p-10 text-center">
          <h2 className="font-display text-3xl font-light text-brown mb-4">
            {locale === 'en' ? 'Have a project?' : 'Projeniz mi var?'}
          </h2>
          <p className="font-body text-sm text-brown/60 mb-6 max-w-md mx-auto leading-relaxed">
            {locale === 'en'
              ? 'We provide product selection and technical consulting for architecture and landscaping projects.'
              : 'Mimarlık ve peyzaj projeleriniz için ürün seçimi ve teknik danışmanlık konularında destek sağlıyoruz.'}
          </p>
          <a href={`${base}/iletisim`}
            className="inline-flex px-8 py-3 rounded-lg bg-dark text-cream font-body text-sm tracking-widest uppercase hover:bg-orange transition-colors">
            {locale === 'en' ? 'Contact Us' : 'İletişime Geç'}
          </a>
        </div>
      </div>
    </div>
  )
}