import type { Metadata } from 'next'
import { Link } from '@/i18n/navigation'

export async function generateMetadata({ params: { locale } }: { params: { locale: string } }): Promise<Metadata> {
  return { title: locale === 'en' ? 'About' : 'Hakkımızda' }
}

export default function HakkimizdaPage({ params: { locale } }: { params: { locale: string } }) {
  const en = locale === 'en'
  const base = en ? '/en' : ''
  return (
    <div className="pt-20">
      <section className="py-24 bg-sand">
        <div className="max-w-7xl mx-auto px-6 md:px-10 grid grid-cols-1 md:grid-cols-2 gap-16 items-center">
          <div>
            <p className="font-body text-xs tracking-widest uppercase text-orange mb-4">
              {en ? 'About Us' : 'Hakkımızda'}
            </p>
            <h1 className="font-display text-5xl md:text-6xl font-light text-brown leading-none mb-8">
              {en ? <><span>A Brand</span><br /><em>Telling</em><br /><span>with Form</span></>
                  : <><span>Formla</span><br /><em>Anlatan</em><br /><span>Bir Marka</span></>}
            </h1>
            <p className="font-body text-base text-brown/60 leading-relaxed">
              {en
                ? 'PeyzajArt is a Turkish manufacturer specializing in decorative planters and landscaping products. With our production infrastructure and design philosophy developed over the years, we provide solutions for both corporate and architectural projects.'
                : 'PeyzajArt, dekoratif saksı ve peyzaj ürünleri alanında uzmanlaşmış bir Türk üreticisidir. Yıllar içinde geliştirdiğimiz üretim altyapısı ve tasarım anlayışıyla hem kurumsal hem de mimari projelere çözüm üretiyoruz.'}
            </p>
          </div>
          <div className="aspect-video bg-earth/20 rounded-xl" />
        </div>
      </section>

      <section className="py-24 bg-cream">
        <div className="max-w-7xl mx-auto px-6 md:px-10">
          <div className="mb-12">
            <p className="font-body text-xs tracking-widest uppercase text-orange mb-3">
              {en ? 'Our Values' : 'Değerlerimiz'}
            </p>
            <h2 className="font-display text-4xl font-light text-brown">
              {en ? 'What We Work For' : 'Ne İçin Çalışıyoruz'}
            </h2>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-8">
            {(en ? [
              { title: 'Lasting Design', body: 'We work on forms and materials that gain value over time, beyond trends.' },
              { title: 'Sustainable Production', body: 'Materials sourced from local resources and environmentally friendly production processes.' },
              { title: 'B2B Trust', body: 'We build long-term business partnerships with architectural studios and major construction groups.' },
              { title: 'Custom Production', body: 'Comprehensive custom production capability for project-specific size, color, and texture requirements.' },
            ] : [
              { title: 'Kalıcı Tasarım', body: 'Trendlerin ötesinde, zamanla değer kazanan formlar ve malzemeler üzerine çalışıyoruz.' },
              { title: 'Sürdürülebilir Üretim', body: 'Yerel kaynaklardan temin edilen malzemeler ve çevre dostu üretim süreçleri.' },
              { title: 'B2B Güven', body: 'Mimari stüdyolar ve büyük inşaat gruplarıyla uzun vadeli iş ortaklıkları kuruyoruz.' },
              { title: 'Özel Üretim', body: 'Projeye özgü ebat, renk ve doku gereksinimleri için kapsamlı özel üretim imkânı.' },
            ]).map(v => (
              <div key={v.title} className="p-8 bg-sand rounded-xl">
                <h3 className="font-display text-2xl font-light text-brown mb-3">{v.title}</h3>
                <p className="font-body text-sm text-brown/60 leading-relaxed">{v.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="py-20 bg-dark text-cream">
        <div className="max-w-7xl mx-auto px-6 md:px-10">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
            {[
              { num: '500+', label: en ? 'Completed Projects' : 'Tamamlanan Proje' },
              { num: '80+', label: en ? 'Active Dealers' : 'Aktif Bayi' },
              { num: '4', label: en ? 'Product Series' : 'Ürün Serisi' },
              { num: '12+', label: en ? 'Years Experience' : 'Yıllık Tecrübe' },
            ].map(s => (
              <div key={s.label}>
                <p className="font-display text-5xl font-light text-orange">{s.num}</p>
                <p className="font-body text-xs tracking-widest uppercase text-cream/50 mt-2">{s.label}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="py-20 bg-cream text-center">
        <div className="max-w-2xl mx-auto px-6">
          <h2 className="font-display text-4xl font-light text-brown mb-4">
            {en ? "Let's Work Together" : 'Birlikte Çalışalım'}
          </h2>
          <p className="font-body text-sm text-brown/60 mb-8 leading-relaxed">
            {en ? 'Contact us for your projects or dealer partnership.' : 'Projeleriniz veya bayi ortaklığı için bize ulaşın.'}
          </p>
          <Link 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">
            {en ? 'Get in Touch' : 'İletişime Geç'}
          </Link>
        </div>
      </section>
    </div>
  )
}