import { getTranslations, setRequestLocale } from 'next-intl/server'
import { Link } from '@/i18n/routing'
import { CheckCircle, ShieldAlert, Award, Star } from 'lucide-react'
import type { Metadata } from 'next'
import { basicMetadata } from '@/lib/seo'

interface AboutPageProps {
  params: Promise<{ locale: string }>
}

export async function generateMetadata({ params }: AboutPageProps): Promise<Metadata> {
  const { locale } = await params

  const title =
    locale === 'en'
      ? 'About Us — Marmaris Local'
      : locale === 'ru'
        ? 'О нас — Marmaris Local'
        : 'Hakkımızda — Marmaris Local'

  const description =
    locale === 'en'
      ? 'Learn what the Marmaris Local approval seal means and how we curate the guide.'
      : locale === 'ru'
        ? 'Узнайте, что означает знак одобрения Marmaris Local и как мы составляем гид.'
        : "Marmaris Local yerel onay mührünün ne anlama geldiğini ve rehberi nasıl kürasyonladığımızı öğrenin."

  return basicMetadata(title, description, locale, '/about')
}

export default async function AboutPage({ params }: AboutPageProps) {
  const { locale } = await params
  setRequestLocale(locale)

  const t = await getTranslations('hero')
  const navT = await getTranslations('nav')

  return (
    <div className="flex-1 flex flex-col min-h-screen bg-stone text-ink">

      <main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16 flex-1 space-y-12">
        
        {/* Title */}
        <div className="text-center space-y-4">
          <div className="flex justify-center">
            <div className="w-14 h-14 rounded-full border-2 border-turquoise flex items-center justify-center relative bg-paper -rotate-6 shadow-sm">
              <div className="absolute inset-[3px] rounded-full border border-dashed border-turquoise/60" />
              <span className="font-heading font-extrabold text-pine text-xs tracking-tighter">ML</span>
            </div>
          </div>
          <h1 className="text-4xl font-heading font-extrabold text-pine lowercase leading-tight">
            {locale === 'tr' ? 'hakkımızda' : locale === 'en' ? 'about us' : 'о нас'}
          </h1>
          <p className="text-xs font-mono uppercase tracking-wider text-shutter">
            marmaris local • yerel bilgi rehberi
          </p>
        </div>

        {/* Content */}
        <div className="bg-paper p-8 sm:p-12 rounded-3xl border border-pine/8 shadow-sm space-y-8 leading-relaxed font-medium text-sm sm:text-base text-ink/80">
          
          <div className="space-y-4">
            <h2 className="text-xl sm:text-2xl font-heading font-bold text-pine lowercase">
              {locale === 'tr' ? 'turistin göremediği yerel bilgi' : locale === 'en' ? 'local knowledge hidden from tourists' : 'местные знания, скрытые от туристов'}
            </h2>
            <p>
              {locale === 'tr' && 'Marmaris Local, popüler tatil beldemiz Marmaris\'teki restoranları, apart otelleri ve tekne kiralama ya da dalış merkezleri gibi çeşitli yerel işletmeleri tek bir küratörlü rehberde toplayan bağımsız bir dizin sitesidir. Temel amacımız, yerli ve yabancı turistleri Marmaris\'in gerçek yerel halkının gittiği, kalitesinden ve samimiyetinden emin olduğu işletmelerle buluşturmaktır.'}
              {locale === 'en' && 'Marmaris Local is an independent directory site that gathers restaurants, apart hotels, and various local businesses such as boat rentals or diving centers in our popular holiday destination Marmaris into a single curated guide. Our main goal is to connect domestic and foreign tourists with establishments that the real local people of Marmaris visit, confident in their quality and friendliness.'}
              {locale === 'ru' && 'Marmaris Local — это независимый каталог, объединяющий рестораны, апарт-отели и различные местные предприятия, такие как аренда лодок или дайвинг-центры в нашем популярном месте отдыха Мармарис, в единый курируемый гид. Наша главная цель — познакомить местных и иностранных туристов с заведениями, которые посещают настоящие местные жители Мармариса, будучи уверенными в их качестве и дружелюбии.'}
            </p>
          </div>

          <hr className="border-dashed border-pine/10" />

          {/* How local approved works */}
          <div className="space-y-6">
            <div className="flex items-center gap-3">
              <div className="w-12 h-12 rounded-full border-2 border-turquoise bg-stone/30 flex items-center justify-center shrink-0 text-turquoise">
                <Award className="w-5 h-5" />
              </div>
              <h2 className="text-xl sm:text-2xl font-heading font-bold text-pine lowercase leading-tight">
                {locale === 'tr' ? 'yerel onaylı mührü nedir?' : locale === 'en' ? 'what is the local approved seal?' : 'что такое печать качества?'}
              </h2>
            </div>
            
            <p className="text-xs sm:text-sm text-ink/70">
              {t('approvedExplain')}
            </p>

            {/* Steps / Criteria */}
            <div className="grid grid-cols-1 sm:grid-cols-3 gap-6 pt-4 text-xs font-semibold text-pine font-mono">
              <div className="bg-stone/35 p-5 rounded-2xl border border-pine/5 space-y-2">
                <div className="text-turquoise text-lg font-bold">01</div>
                <div className="uppercase tracking-wider">
                  {locale === 'tr' ? 'editör ziyareti' : locale === 'en' ? 'editor visit' : 'визит редактора'}
                </div>
                <p className="text-[11px] font-sans font-medium text-ink/65 normal-case leading-relaxed">
                  {locale === 'tr' ? 'Her mekan editörlerimiz tarafından gizlice ziyaret edilir.' : locale === 'en' ? 'Every place is visited secretly by our editors.' : 'Каждое место тайно посещается нашими редакторами.'}
                </p>
              </div>

              <div className="bg-stone/35 p-5 rounded-2xl border border-pine/5 space-y-2">
                <div className="text-turquoise text-lg font-bold">02</div>
                <div className="uppercase tracking-wider">
                  {locale === 'tr' ? 'fiyat/performans' : locale === 'en' ? 'value for money' : 'цена / качество'}
                </div>
                <p className="text-[11px] font-sans font-medium text-ink/65 normal-case leading-relaxed">
                  {locale === 'tr' ? 'Hizmet kalitesi ile fiyat dengesi yerel standartlara göre değerlendirilir.' : locale === 'en' ? 'The balance between service quality and price is evaluated according to local standards.' : 'Баланс качества услуг и цены оценивается по местным стандартам.'}
                </p>
              </div>

              <div className="bg-stone/35 p-5 rounded-2xl border border-pine/5 space-y-2">
                <div className="text-turquoise text-lg font-bold">03</div>
                <div className="uppercase tracking-wider">
                  {locale === 'tr' ? 'yerel onay' : locale === 'en' ? 'local approval' : 'местное одобрение'}
                </div>
                <p className="text-[11px] font-sans font-medium text-ink/65 normal-case leading-relaxed">
                  {locale === 'tr' ? 'Marmaris sakinlerinin tavsiye ve memnuniyet oranları kontrol edilir.' : locale === 'en' ? 'Recommendations and satisfaction rates of Marmaris residents are checked.' : 'Проверяются рекомендации и уровень удовлетворенности жителей Мармариса.'}
                </p>
              </div>
            </div>
          </div>

          <hr className="border-dashed border-pine/10" />

          {/* Action Link */}
          <div className="text-center pt-4 space-y-4">
            <h3 className="font-heading font-bold text-pine lowercase text-lg">
              {locale === 'tr' ? 'kendi işletmenizi önermek ister misiniz?' : locale === 'en' ? 'would you like to suggest your own business?' : 'хотите предложить свой бизнес?'}
            </h3>
            <Link
              href="/add-business"
              className="inline-flex items-center gap-2 bg-turquoise hover:bg-turquoise/90 text-paper font-bold text-xs py-3.5 px-6 rounded-xl transition shadow-sm"
            >
              {navT('addBusiness')}
            </Link>
          </div>

        </div>
      </main>
    </div>
  )
}