import { prisma } from '@peyzajart/db'
import { Link } from '@/i18n/navigation'
import type { Metadata } from 'next'
import { getTranslations } from 'next-intl/server'

export const dynamic = 'force-dynamic'

export async function generateMetadata({ params: { locale } }: { params: { locale: string } }): Promise<Metadata> {
  const t = await getTranslations({ locale, namespace: 'hero' })
  return { title: `PeyzajArt — ${t('title')} ${t('titleHighlight')}` }
}

export default async function HomePage({ params: { locale } }: { params: { locale: string } }) {
  const t = await getTranslations({ locale, namespace: 'hero' })
  const tc = await getTranslations({ locale, namespace: 'collections' })
  const tb = await getTranslations({ locale, namespace: 'b2b' })
  const ts = await getTranslations({ locale, namespace: 'stats' })

  const featuredProducts = await prisma.product.findMany({
    where: { isActive: true },
    take: 6,
    orderBy: { createdAt: 'desc' },
    select: { id: true, slug: true, nameTr: true, nameEn: true, size: true, images: true, category: true, priceSelf: true },
  })

  const panelUrl = process.env.NEXT_PUBLIC_PANEL_URL ?? 'https://panel.peyzajart.com'
  const categoryLabel: Record<string, string> = { CUBO: 'Cubo', RECTA: 'Recta', GLOBE: 'Globe', OTHER: locale === 'en' ? 'Special' : 'Özel' }

  return (
    <>
      {/* ── HERO ─────────────────────────────────────────────────── */}
      <section className="min-h-screen flex flex-col md:flex-row">
        <div className="flex-[3] bg-dark flex items-center px-8 md:px-16 lg:px-24 pt-28 pb-16 md:pt-0">
          <div className="max-w-xl">
            <p className="font-body text-xs tracking-[0.25em] uppercase text-cream/40 mb-6">{t('badge')}</p>
            <h1 className="font-display text-5xl md:text-6xl lg:text-7xl font-light text-cream leading-[1.05] mb-8">
              {t('title')}{' '}
              <span className="relative inline-block">
                {t('titleHighlight')}
                <span className="absolute bottom-1 left-0 right-0 h-[3px] bg-orange" />
              </span>
            </h1>
            <p className="font-body text-base text-cream/50 leading-relaxed mb-10 max-w-md">{t('subtitle')}</p>
            <div className="flex flex-wrap gap-4">
              <Link href={`/${locale === 'tr' ? '' : locale + '/'}urunler`.replace('//', '/')}
                className="px-8 py-3 rounded-lg bg-orange text-cream font-body text-sm tracking-widest uppercase hover:bg-orange-hover transition-colors">
                {t('cta_products')}
              </Link>
              <a href={panelUrl}
                className="px-8 py-3 rounded-lg border border-cream/30 text-cream/70 font-body text-sm tracking-widest uppercase hover:border-cream hover:text-cream transition-colors">
                {t('cta_dealer')}
              </a>
            </div>
          </div>
        </div>

        <div className="flex-[2] bg-sand relative min-h-[40vw] md:min-h-0 flex items-center justify-center overflow-hidden">
          {featuredProducts[0] && (() => {
            const imgs: string[] = JSON.parse(featuredProducts[0].images || '[]')
            return imgs[0]
              ? <img src={imgs[0]} alt={featuredProducts[0].nameTr} className="w-full h-full object-cover absolute inset-0" />
              : <div className="w-full h-full flex items-center justify-center"><span className="font-display text-[12vw] text-brown/10">P</span></div>
          })()}
          <div className="absolute bottom-6 left-6 bg-orange text-cream px-4 py-2 rounded-full font-body text-xs tracking-widest uppercase z-10">
            {t('floatingBadge')}
          </div>
        </div>
      </section>

      {/* ── STATS ────────────────────────────────────────────────── */}
      <section className="bg-dark py-10 border-t border-white/5">
        <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: ts('stat1'), label: ts('stat1_label') },
              { num: ts('stat2'), label: ts('stat2_label') },
              { num: ts('stat3'), label: ts('stat3_label') },
              { num: ts('stat4'), label: ts('stat4_label') },
            ].map(s => (
              <div key={s.label}>
                <p className="font-display text-4xl font-light text-orange">{s.num}</p>
                <p className="font-body text-xs tracking-widest uppercase text-cream/40 mt-1">{s.label}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── ÜRÜN SERİLERİ ────────────────────────────────────────── */}
      <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">{tc('subtitle')}</p>
            <h2 className="font-display text-4xl md:text-5xl font-light text-brown">{tc('title')}</h2>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
            {featuredProducts.map(p => {
              const imgs: string[] = JSON.parse(p.images || '[]')
              const name = locale === 'en' ? p.nameEn : p.nameTr
              return (
                <Link key={p.id} href={`/${locale === 'tr' ? '' : locale + '/'}urunler/${p.slug}`.replace('//', '/')}
                  className="group rounded-xl border-l-4 border-transparent hover:border-orange transition-all duration-200 bg-sand hover:bg-sand/80 overflow-hidden">
                  <div className="aspect-[4/3] overflow-hidden">
                    {imgs[0]
                      ? <img src={imgs[0]} alt={name} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                      : <div className="w-full h-full flex items-center justify-center font-display text-5xl text-brown/10">{name[0]}</div>}
                  </div>
                  <div className="p-5">
                    <span className="inline-block bg-orange/10 text-orange font-body text-xs px-2 py-0.5 rounded-full tracking-widest uppercase mb-2">
                      {categoryLabel[p.category] ?? p.category}
                    </span>
                    <h3 className="font-display text-xl font-light text-brown group-hover:text-orange transition-colors">{name}</h3>
                    {p.size && <p className="font-body text-xs text-brown/40 mt-1">{p.size}</p>}
                    <p className="font-body text-sm text-orange font-medium mt-2">
                      {p.priceSelf > 0 ? `${p.priceSelf.toFixed(0)} USD` : locale === 'en' ? 'Call for price' : 'Fiyat için arayın'}
                    </p>
                  </div>
                </Link>
              )
            })}
          </div>
          <div className="mt-10 text-center">
            <Link href={`/${locale === 'tr' ? '' : locale + '/'}urunler`.replace('//', '/')}
              className="inline-flex px-8 py-3 rounded-lg border border-brown/20 text-brown font-body text-sm tracking-widest uppercase hover:border-orange hover:text-orange transition-colors">
              {tc('viewAll')}
            </Link>
          </div>
        </div>
      </section>

      {/* ── PORTFOLYO ────────────────────────────────────────────── */}
      <section className="py-24 bg-sage">
        <div className="max-w-7xl mx-auto px-6 md:px-10">
          <div className="mb-12 flex items-end justify-between">
            <div>
              <p className="font-body text-xs tracking-widest uppercase text-cream/50 mb-3">
                {locale === 'en' ? 'References' : 'Referanslar'}
              </p>
              <h2 className="font-display text-4xl md:text-5xl font-light text-cream">
                {locale === 'en' ? 'Our Projects' : 'Projelerimiz'}
              </h2>
            </div>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
            <div className="col-span-2 row-span-2 aspect-square md:aspect-auto bg-cream/10 relative overflow-hidden rounded-xl min-h-[200px]">
              <div className="absolute inset-0 flex items-end p-6 bg-gradient-to-t from-dark/60 to-transparent">
                <div>
                  <p className="font-body text-xs text-cream/60 uppercase tracking-widest">
                    {locale === 'en' ? 'Residential' : 'Konut'}
                  </p>
                  <p className="font-display text-xl text-cream">
                    {locale === 'en' ? 'Istanbul Residence' : 'İstanbul Rezidans'}
                  </p>
                </div>
              </div>
            </div>
            {[
              { cat: locale === 'en' ? 'Commercial' : 'Ticari', name: locale === 'en' ? 'Mall Landscaping' : 'AVM Peyzajı' },
              { cat: locale === 'en' ? 'Public' : 'Kamusal', name: locale === 'en' ? 'Municipality Park' : 'Belediye Parkı' },
            ].map(p => (
              <div key={p.name} className="aspect-square bg-cream/10 relative overflow-hidden rounded-xl">
                <div className="absolute inset-0 flex items-end p-4 bg-gradient-to-t from-dark/60 to-transparent">
                  <div>
                    <p className="font-body text-xs text-cream/60 uppercase tracking-widest">{p.cat}</p>
                    <p className="font-display text-base text-cream">{p.name}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── B2B CTA ─────────────────────────────────────────────── */}
      <section className="py-24 bg-orange">
        <div className="max-w-5xl mx-auto px-6 md:px-10">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
            <div>
              <p className="font-body text-xs tracking-widest uppercase text-dark/50 mb-3">{tb('subtitle')}</p>
              <h2 className="font-display text-4xl md:text-5xl font-light text-dark leading-tight mb-6">{tb('cta_dealer_title')}</h2>
              <p className="font-body text-base text-dark/70 leading-relaxed mb-8">{tb('body')}</p>
              <div className="flex flex-wrap gap-4">
                <a href={`${panelUrl}/register`}
                  className="px-8 py-3 rounded-lg bg-dark text-cream font-body text-sm tracking-widest uppercase hover:bg-dark/80 transition-colors">
                  {tb('cta_dealer_btn')}
                </a>
                <a href={panelUrl}
                  className="px-8 py-3 rounded-lg border border-dark/30 text-dark font-body text-sm tracking-widest uppercase hover:border-dark hover:bg-dark/10 transition-colors">
                  {tb('cta_panel')}
                </a>
              </div>
            </div>
            <div className="grid grid-cols-1 gap-4">
              {[
                { icon: '🚚', title: tb('trust1_title'), desc: tb('trust1_body') },
                { icon: '💵', title: tb('trust2_title'), desc: tb('trust2_body') },
                { icon: '🇹🇷', title: tb('trust3_title'), desc: tb('trust3_body') },
              ].map(f => (
                <div key={f.title} className="bg-dark/10 rounded-xl px-5 py-4 flex items-start gap-4">
                  <span className="text-2xl">{f.icon}</span>
                  <div>
                    <p className="font-body text-sm font-medium text-dark">{f.title}</p>
                    <p className="font-body text-xs text-dark/60 mt-0.5">{f.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </>
  )
}