import { Check, Sun, MapPin } from 'lucide-react';
import { Container } from '@/components/ui/container';
import { Button } from '@/components/ui/button';
import { Reveal } from '@/components/ui/reveal';
import { buildMetadata } from '@/lib/seo';
import { siteConfig } from '@/data/site-config';
import type { Locale } from '@/i18n/config';

export async function generateMetadata({ params: { locale } }: { params: { locale: Locale } }) {
  return buildMetadata({
    locale,
    path: '/about',
    title: locale === 'ar' ? 'من نحن' : 'À propos',
    description:
      locale === 'ar' ? `تعرف على ${siteConfig.companyName}.` : `Découvrez ${siteConfig.companyName}.`
  });
}

// Editorial copy written from the company's verified public positioning
// (solar specialist, founded 2017, based in Kebili) — safe to refine with
// the real company story, team and mission once provided.

export default function AboutPage({ params: { locale } }: { params: { locale: Locale } }) {
  const isAr = locale === 'ar';

  const stats = [
    { value: '2017', label: isAr ? 'سنة التأسيس' : "année de création" },
    { value: isAr ? 'أفراد وشركات' : 'Particuliers & pros', label: isAr ? 'الفئات المدعومة' : 'clients accompagnés' },
    { value: isAr ? 'كل تونس' : 'Partout en Tunisie', label: isAr ? 'دائرة التدخل' : 'zones d’intervention' }
  ];

  const services = [
    isAr ? 'دراسة الجدوى وحساب الأبعاد' : 'Étude de faisabilité et dimensionnement',
    isAr ? 'بيع تجهيزات الطاقة الشمسية' : 'Vente d’équipements photovoltaïques',
    isAr ? 'التركيب والتشغيل' : 'Installation et mise en service',
    isAr ? 'المتابعة والصيانة' : 'Suivi et maintenance dans la durée'
  ];

  const engagements = [
    {
      title: isAr ? 'جودة التجهيزات' : 'Matériel de qualité',
      text: isAr ? 'تجهيزات محترمة وفق المواصفات' : 'Équipements conformes aux spécifications appliquées.'
    },
    {
      title: isAr ? 'تركيب وفق القواعد' : 'Pose soignée',
      text: isAr ? 'وضع محمول وفق قواعد الفن' : 'Mise en place selon les règles de l’art, en toute sécurité.'
    },
    {
      title: isAr ? 'مرافقة مستمرة' : 'Accompagnement',
      text: isAr ? 'دعم طوال دورة حياة المنشآت' : 'Soutien tout au long du cycle de vie de l’installation.'
    }
  ];

  return (
    <Container className="max-w-4xl py-16 sm:py-20">
      <Reveal variant="up">
        <span className="inline-flex items-center gap-2 rounded-full bg-copper-600/10 px-3 py-1 text-xs font-medium text-copper-600">
          {isAr ? 'من نحن' : 'À propos'}
        </span>
      </Reveal>
      <Reveal variant="up" delay={80}>
        <h1 className="mt-4 font-display text-3xl font-semibold sm:text-4xl">
          {isAr ? 'من نحن' : 'À propos de nous'}
        </h1>
      </Reveal>
      <Reveal variant="up" delay={160}>
        <p className="mt-6 text-lg text-graphite-900/70">
          {isAr
            ? `${siteConfig.companyName} شركة تونسية متخصصة في دراسة وتصميم وبيع وتركيب الأنظمة الكهروضوئية، وذلك للأفراد والشركات في كامل أنحاء البلاد.`
            : `${siteConfig.companyName} est une entreprise tunisienne spécialisée dans l’étude, la conception, la vente et l’installation de systèmes photovoltaïques, pour particuliers et professionnels, partout en Tunisie.`}
        </p>
      </Reveal>

      <div className="mt-10 grid gap-4 sm:grid-cols-3">
        {stats.map((s, i) => (
          <Reveal key={s.label} variant="scale" delay={i * 90}>
            <div className="rounded-2xl border border-graphite-800/10 bg-white p-5 text-center transition-transform duration-300 hover:-translate-y-1">
              <p className="font-display text-2xl font-semibold text-copper-600">{s.value}</p>
              <p className="mt-1 text-xs font-medium text-graphite-900/50">{s.label}</p>
            </div>
          </Reveal>
        ))}
      </div>

      <Reveal variant="up" className="mt-12">
        <h2 className="font-display text-2xl font-semibold">
          {isAr ? 'لماذا نحن؟' : 'Qui sommes-nous ?'}
        </h2>
        <p className="mt-4 text-graphite-900/70">
          {isAr
            ? `منذ عام ${siteConfig.foundedYear}، ومن مقرنا في ${siteConfig.address.city}، يرافقكم فريقنا في كل مرحلة من مشروعكم: من الفهم الأول لاحتياجكم إلى المتابعة ما بعد التركيب.`
            : `Depuis ${siteConfig.foundedYear}, depuis notre bureau de ${siteConfig.address.city}, notre équipe vous accompagne à chaque étape de votre projet : de la première écoute de votre besoin jusqu’au suivi après installation.`}
        </p>
      </Reveal>

      <Reveal variant="up" className="mt-10">
        <h2 className="font-display text-2xl font-semibold">
          {isAr ? 'ماذا نقدم؟' : 'Ce que nous faisons'}
        </h2>
      </Reveal>
      <ul className="mt-4 grid gap-3 sm:grid-cols-2">
        {services.map((s, i) => (
          <Reveal key={s} as="li" variant="up" delay={(i % 2) * 80}>
            <div className="flex items-start gap-3 text-graphite-900/80">
              <span className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-copper-600/10">
                <Check className="h-3.5 w-3.5 text-leaf-500" />
              </span>
              <span className="text-sm">{s}</span>
            </div>
          </Reveal>
        ))}
      </ul>

      <div className="mt-12 space-y-4">
        <Reveal variant="up">
          <h2 className="font-display text-2xl font-semibold">
            {isAr ? 'التزاماتنا' : 'Nos engagements'}
          </h2>
        </Reveal>
        <div className="grid gap-4 sm:grid-cols-3">
          {engagements.map((e, i) => (
            <Reveal key={e.title} variant="up" delay={i * 90} className="h-full">
              <div className="h-full rounded-2xl border border-graphite-800/10 bg-white p-5 transition-transform duration-300 hover:-translate-y-1">
                <h3 className="text-sm font-semibold text-graphite-900">{e.title}</h3>
                <p className="mt-2 text-sm text-graphite-900/60">{e.text}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>

      <Reveal variant="scale" className="mt-12">
        <div className="flex flex-col items-start gap-4 rounded-2xl bg-graphite-900 p-6 text-paper-50">
          <Sun className="h-6 w-6 text-copper-400" />
          <div>
            <p className="font-display text-lg font-semibold">
              {isAr ? 'جاهزون للانتقال إلى الطاقة الشمسية؟' : 'Prêt à passer au solaire ?'}
            </p>
            <p className="mt-1 text-sm text-paper-100/70">
              {isAr
                ? 'احصل على عرض سعر مخصص عبر صفحة طلب العروض.'
                : 'Obtenez un devis personnalisé depuis la page de demande de devis.'}
            </p>
          </div>
          <Button href={`/${locale}/devis`} className="mt-1">
            {isAr ? 'اطلب عرض سعر' : 'Demander un devis'}
          </Button>
          <p className="flex items-center gap-2 text-xs text-paper-100/50">
            <MapPin className="h-3.5 w-3.5" />
            {siteConfig.address.street}, {siteConfig.address.postalCode} {siteConfig.address.city} — {siteConfig.phone}
          </p>
        </div>
      </Reveal>
    </Container>
  );
}