import Link from 'next/link'
import { ArrowLeft, Building, Eye, Shield, Users } from 'lucide-react'
import { prisma } from '@/lib/prisma'

export const metadata = { title: 'من نحن - عقار ديزاين', description: 'تعرف على منصة عقار ديزاين الرائدة في المجال العقاري بالمغرب' }

async function getBrandName() {
  const s = await prisma.siteSetting.findMany()
  const brand = s.find(x => x.key === 'brand')?.value as any
  return (brand as any)?.name || 'عقار ديزاين'
}

export default async function AboutPage() {
  const name = await getBrandName()

  const stats = [
    { icon: Building, label: 'عقار', count: 'أكثر من 500' },
    { icon: Users, label: 'عميل', count: 'أكثر من 1000' },
    { icon: Eye, label: 'جولة 360°', count: 'أكثر من 200' },
    { icon: Shield, label: 'موثوق', count: 'ضمان الجودة' },
  ]

  return (
    <div className="min-h-screen bg-gray-50" dir="rtl">
      <div className="bg-gradient-to-br from-blue-600 to-blue-800 text-white">
        <div className="container mx-auto px-4 py-16">
          <Link href="/" className="inline-flex items-center gap-2 text-blue-200 hover:text-white mb-6 transition-colors">
            <ArrowLeft className="w-4 h-4 rotate-180" /> العودة للرئيسية
          </Link>
          <h1 className="text-3xl sm:text-4xl font-bold mb-4">من نحن</h1>
          <p className="text-blue-100 text-lg max-w-2xl">{name} — أول منصة عقارية متكاملة في المغرب مع تقنيات العرض ثلاثي الأبعاد والجولات الافتراضية</p>
        </div>
      </div>

      <div className="container mx-auto px-4 py-12">
        <div className="grid grid-cols-2 sm:grid-cols-4 gap-6 mb-16">
          {stats.map((s) => (
            <div key={s.label} className="bg-white rounded-2xl p-6 text-center shadow-sm border border-gray-100">
              <div className="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mx-auto mb-3">
                <s.icon className="w-6 h-6 text-blue-600" />
              </div>
              <div className="text-2xl font-bold text-gray-900">{s.count}</div>
              <div className="text-sm text-gray-500">{s.label}</div>
            </div>
          ))}
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-16">
          <div>
            <h2 className="text-2xl font-bold text-gray-900 mb-4">قصتنا</h2>
            <p className="text-gray-600 leading-relaxed mb-4">
              انطلقت {name} بهدف تغيير طريقة بيع وشراء العقارات في المغرب. نحن نؤمن بأن التكنولوجيا يمكنها تبسيط كل خطوة من خطوات الرحلة العقارية، من البحث إلى الزيارة إلى الشراء.
            </p>
            <p className="text-gray-600 leading-relaxed mb-4">
              نقدم للمستخدمين تجربة غامرة عبر الجولات الافتراضية 360° والتصميم ثلاثي الأبعاد، مما يمكنهم من استكشاف العقارات عن بُعد قبل زيارتها ميدانياً.
            </p>
            <p className="text-gray-600 leading-relaxed">
              كما نحرص على توفير منصة موثوقة تجمع بين الوكالات العقارية، الحرفيين المتخصصين، والباحثين عن العقار في مكان واحد.
            </p>
          </div>
          <div className="bg-white rounded-2xl p-8 shadow-sm border border-gray-100">
            <h2 className="text-2xl font-bold text-gray-900 mb-4">رؤيتنا</h2>
            <p className="text-gray-600 leading-relaxed mb-4">
              أن نكون المنصة العقارية الأولى في المغرب والعالم العربي، من خلال دمج أحدث التقنيات في خدمة القطاع العقاري وتقديم تجربة مستخدم استثنائية.
            </p>
            <h2 className="text-2xl font-bold text-gray-900 mb-4 mt-8">رسالتنا</h2>
            <p className="text-gray-600 leading-relaxed">
              تمكين الجميع من الوصول إلى معلومات عقارية دقيقة وموثوقة، وتوفير أدوات مبتكرة تساعد في اتخاذ قرارات شراء وبيع مدروسة.
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}