import { setRequestLocale } from 'next-intl/server';
import { getTranslations } from 'next-intl/server';
import type { Metadata } from 'next';
import Link from 'next/link';
import Image from 'next/image';
import { Brain, Mic, Workflow, Cloud, Code, ArrowRight, MapPin, Bot, Building, ShoppingCart, Factory } from 'lucide-react';
import { services, techServices, industryServices } from '@/data/services';
import { cities } from '@/data/cities';
import { BreadcrumbJsonLd, FAQJsonLd } from '@/components/seo';
import { type Locale } from '@/i18n/config';

type Props = {
  params: Promise<{ locale: string }>;
};

const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
  Brain,
  Mic,
  Workflow,
  Cloud,
  Code,
  Bot,
  Building,
  ShoppingCart,
  Factory,
};

const BASE_URL = process.env.NEXT_PUBLIC_SITE_URL || 'https://damjan-savic.com';

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

  const titles: Record<string, string> = {
    de: 'Leistungen - KI-Entwicklung, Voice AI & Automatisierung | Damjan Savić',
    en: 'AI Development Services | Voice AI, Automation & SaaS | Remote Developer',
    sr: 'Usluge - AI Razvoj, Voice AI & Automatizacija | Damjan Savić',
  };

  const descriptions: Record<string, string> = {
    de: 'Professionelle KI-Entwicklung, Voice AI, Prozessautomatisierung und SaaS-Entwicklung. Maßgeschneiderte Lösungen für Unternehmen in Köln, Düsseldorf, Frankfurt und ganz Deutschland.',
    en: 'Expert AI development services for businesses in USA, UK & Europe. Specialized in AI agents, Voice AI, n8n automation, and custom SaaS solutions. Remote-first, German engineering quality. Get a free consultation.',
    sr: 'Profesionalni AI razvoj, Voice AI, n8n automatizacija i SaaS razvoj. Prilagođena rešenja za kompanije iz Srbije (Beograd, Novi Sad, Niš) i srpsku dijasporu u Nemačkoj, Austriji i Švajcarskoj.',
  };

  const keywords: Record<string, string[]> = {
    de: [
      'KI-Entwicklung',
      'Voice AI',
      'Prozessautomatisierung',
      'SaaS Entwicklung',
      'n8n',
      'GPT-4 Integration',
      'KI-Agenten',
      'Automatisierung Köln',
      'AI Developer Deutschland',
    ],
    en: [
      'AI Development Services',
      'Voice AI Developer',
      'Process Automation',
      'SaaS Development',
      'n8n Automation',
      'GPT-4 Integration',
      'AI Agents',
      'ChatGPT Integration',
      'Remote AI Developer',
      'AI Developer USA',
      'AI Developer UK',
      'AI Developer London',
      'AI Developer New York',
      'Freelance AI Developer',
      'AI Consultant',
      'LLM Integration',
      'Custom AI Solutions',
    ],
    sr: [
      'AI Razvoj Srbija',
      'Voice AI Srbija',
      'Automatizacija procesa',
      'SaaS Razvoj Srbija',
      'n8n Automatizacija',
      'GPT-4 Integracija',
      'AI Agenti Beograd',
      'Fullstack Programer Srbija',
      'AI Developer Novi Sad',
      'Python Programer Srbija',
      'Remote Developer Dijaspora',
      'Softverski Razvoj Beograd',
    ],
  };

  const localePath = locale === 'de' ? '/leistungen' : `/${locale}/leistungen`;

  return {
    title: titles[locale] || titles.de,
    description: descriptions[locale] || descriptions.de,
    keywords: keywords[locale] || keywords.de,
    alternates: {
      canonical: `${BASE_URL}${localePath}`,
      languages: {
        'x-default': `${BASE_URL}/leistungen`,
        de: `${BASE_URL}/leistungen`,
        en: `${BASE_URL}/en/leistungen`,
        sr: `${BASE_URL}/sr/leistungen`,
      },
    },
    openGraph: {
      title: titles[locale] || titles.de,
      description: descriptions[locale] || descriptions.de,
      url: `${BASE_URL}${localePath}`,
      type: 'website',
      locale: locale === 'de' ? 'de_DE' : locale === 'sr' ? 'sr_RS' : 'en_US',
      alternateLocale: ['de_DE', 'en_US', 'sr_RS'].filter(l => l !== (locale === 'de' ? 'de_DE' : locale === 'sr' ? 'sr_RS' : 'en_US')),
    },
  };
}

export default async function ServicesPage({ params }: Props) {
  const { locale } = await params;
  setRequestLocale(locale);

  const breadcrumbItems = [
    { name: locale === 'de' ? 'Start' : locale === 'sr' ? 'Početna' : 'Home', url: `/${locale}` },
    { name: locale === 'de' ? 'Leistungen' : locale === 'sr' ? 'Usluge' : 'Services', url: `/${locale}/leistungen` },
  ];

  const faqItems = locale === 'de' ? [
    {
      question: 'Welche KI-Technologien setzen Sie ein?',
      answer: 'Ich arbeite mit führenden LLM-Anbietern wie OpenAI (GPT-4, GPT-4o), Anthropic (Claude) und Open-Source-Modellen wie Llama. Für Voice AI nutze ich Vapi, ElevenLabs und Whisper.',
    },
    {
      question: 'Wie lange dauert die Entwicklung eines MVP?',
      answer: 'Ein typisches MVP kann in 4-8 Wochen entwickelt werden, abhängig vom Umfang und den Anforderungen des Projekts. Komplexere SaaS-Produkte benötigen 8-12 Wochen.',
    },
    {
      question: 'Arbeiten Sie auch mit Unternehmen außerhalb von Köln?',
      answer: 'Ja, ich arbeite remote mit Unternehmen in ganz Deutschland (Düsseldorf, Frankfurt, München, Berlin, Hamburg, Stuttgart) und international. Die meisten meiner Projekte werden vollständig remote abgewickelt.',
    },
    {
      question: 'Was kostet eine KI-Automatisierung?',
      answer: 'Die Kosten variieren je nach Komplexität. Einfache n8n-Workflows starten ab ca. 1.500€, während komplexe KI-Agenten-Systeme zwischen 5.000€ und 25.000€ kosten können. Ich erstelle gerne ein individuelles Angebot.',
    },
    {
      question: 'Sind Ihre Lösungen DSGVO-konform?',
      answer: 'Ja, Datenschutz hat höchste Priorität. Ich setze auf Self-Hosted-Lösungen (n8n, Supabase) und sichere API-Anbindungen. Bei Bedarf können alle Daten in deutschen Rechenzentren verarbeitet werden.',
    },
    {
      question: 'Bieten Sie auch Support und Wartung an?',
      answer: 'Ja, ich biete flexible Support-Pakete für Wartung, Updates und Weiterentwicklung. Nach dem Launch bin ich weiterhin für Sie da, um Ihre Lösung optimal zu betreuen.',
    },
  ] : locale === 'en' ? [
    {
      question: 'Do you work with clients in the USA and UK?',
      answer: 'Yes! I work remotely with clients worldwide, including the USA (New York, Los Angeles, San Francisco, Miami, Chicago) and UK (London). Most of my international projects are handled completely remotely with regular video calls to accommodate different time zones.',
    },
    {
      question: 'What AI technologies do you use?',
      answer: 'I work with leading LLM providers like OpenAI (GPT-4, GPT-4o), Anthropic (Claude) and open-source models like Llama. For Voice AI, I use Vapi, ElevenLabs and Whisper. I also specialize in n8n for workflow automation.',
    },
    {
      question: 'How long does MVP development take?',
      answer: 'A typical MVP can be developed in 4-8 weeks, depending on the scope and requirements of the project. More complex SaaS products require 8-12 weeks. I follow agile methodologies with weekly demos.',
    },
    {
      question: 'What are your rates for international clients?',
      answer: 'I offer competitive rates for international clients. Simple n8n automations start at around $1,600, while complex AI agent systems range from $5,500 to $27,000. I provide detailed proposals with fixed-price options for most projects.',
    },
    {
      question: 'How do you handle time zone differences?',
      answer: 'I am flexible with communication and can accommodate US Eastern, US Pacific, and UK time zones. I typically overlap 4-6 hours with US clients and have full overlap with UK working hours. Async communication via Slack/Email works great for most projects.',
    },
    {
      question: 'Are your solutions GDPR and data privacy compliant?',
      answer: 'Yes, data protection is a top priority. I am well-versed in GDPR, CCPA, and international data privacy regulations. I use self-hosted solutions (n8n, Supabase) and can ensure data stays in specific regions (US, EU) as needed.',
    },
    {
      question: 'What makes you different from US/UK-based developers?',
      answer: 'I combine German engineering precision with competitive rates and strong English communication. You get enterprise-quality solutions at freelancer prices, plus experience working with international Fortune 500 companies and startups alike.',
    },
    {
      question: 'Do you offer ongoing support and maintenance?',
      answer: 'Yes, I offer flexible support packages including 24/7 monitoring for critical systems, regular maintenance windows, and priority support SLAs. I can work within your existing ticketing and communication systems.',
    },
  ] : [
    {
      question: 'Koje AI tehnologije koristite?',
      answer: 'Radim sa vodećim LLM provajderima kao što su OpenAI (GPT-4, GPT-4o), Anthropic (Claude) i open-source modeli kao Llama. Za Voice AI koristim Vapi, ElevenLabs i Whisper.',
    },
    {
      question: 'Koliko traje razvoj MVP-a?',
      answer: 'Tipičan MVP može se razviti za 4-8 nedelja, u zavisnosti od obima i zahteva projekta. Kompleksniji SaaS proizvodi zahtevaju 8-12 nedelja.',
    },
    {
      question: 'Da li radite i sa kompanijama van Kelna?',
      answer: 'Da, radim remote sa kompanijama širom Nemačke (Diseldorf, Frankfurt, Minhen, Berlin, Hamburg, Štutgart) i međunarodno. Većina mojih projekata se obrađuje potpuno remote.',
    },
    {
      question: 'Koliko košta AI automatizacija?',
      answer: 'Troškovi variraju u zavisnosti od kompleksnosti. Jednostavni n8n radni tokovi počinju od oko 1.500€, dok kompleksni sistemi AI agenata mogu koštati između 5.000€ i 25.000€. Rado ću vam dati individualizovanu ponudu.',
    },
    {
      question: 'Da li su vaša rešenja usklađena sa GDPR-om?',
      answer: 'Da, zaštita podataka ima najviši prioritet. Oslanjam se na self-hosted rešenja (n8n, Supabase) i sigurne API konekcije. Po potrebi, svi podaci mogu se obrađivati u nemačkim data centrima.',
    },
    {
      question: 'Da li nudite podršku i održavanje?',
      answer: 'Da, nudim fleksibilne pakete podrške za održavanje, ažuriranja i dalji razvoj. Nakon lansiranja, tu sam za vas da optimalno podržim vaše rešenje.',
    },
  ];

  const pageTitle = locale === 'de' ? 'Meine Leistungen' : locale === 'sr' ? 'Moje Usluge' : 'My Services';
  const pageSubtitle = locale === 'de'
    ? 'Von KI-Entwicklung über Voice AI bis zur Prozessautomatisierung - maßgeschneiderte Lösungen für Ihr Unternehmen.'
    : locale === 'sr'
    ? 'Od AI razvoja preko Voice AI do automatizacije procesa - prilagođena rešenja za vašu kompaniju.'
    : 'From AI development to Voice AI to process automation - customized solutions for your business.';

  const citiesTitle = locale === 'de' ? 'Standorte' : locale === 'sr' ? 'Lokacije' : 'Locations';
  const citiesSubtitle = locale === 'de'
    ? 'Ich arbeite mit Unternehmen in folgenden Städten:'
    : locale === 'sr'
    ? 'Radim sa kompanijama u sledećim gradovima:'
    : 'I work with companies in the following cities:';

  // Section titles for service categories
  const coreServicesTitle = locale === 'de' ? 'Kern-Leistungen' : locale === 'sr' ? 'Osnovne Usluge' : 'Core Services';
  const techServicesTitle = locale === 'de' ? 'Technologie-Spezialisierungen' : locale === 'sr' ? 'Tehnološke Specijalizacije' : 'Technology Specializations';
  const industryServicesTitle = locale === 'de' ? 'Branchen-Lösungen' : locale === 'sr' ? 'Industrijska Rešenja' : 'Industry Solutions';

  return (
    <div className="min-h-screen">
      <BreadcrumbJsonLd items={breadcrumbItems} locale={locale as Locale} />
      <FAQJsonLd items={faqItems} locale={locale as Locale} />

      {/* Hero Section */}
      <section className="py-24">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div className="text-center lg:text-left">
              <h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
                {pageTitle}
              </h1>
              <p className="text-xl text-zinc-400 max-w-2xl">
                {pageSubtitle}
              </p>
            </div>
            <div className="relative aspect-video rounded-2xl overflow-hidden">
              <Image
                src="/images/gallery/walking-phone.avif"
                alt="Damjan Savić - Professional Services"
                fill
                sizes="(max-width: 1024px) 100vw, 50vw"
                className="object-cover"
              />
            </div>
          </div>
        </div>
      </section>

      {/* Core Services Grid */}
      <section className="pb-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-2xl font-bold text-white mb-8">{coreServicesTitle}</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {services.map((service) => {
              const IconComponent = iconMap[service.icon] || Brain;
              return (
                <Link
                  key={service.slug}
                  href={`/${locale}/leistungen/${service.slug}`}
                  className="group bg-zinc-800/30 border border-zinc-800 rounded-xl p-6 hover:border-zinc-700 transition-all duration-300"
                >
                  <div className="p-3 bg-zinc-800/50 rounded-lg w-fit mb-4">
                    <IconComponent className="h-6 w-6 text-zinc-400 group-hover:text-white transition-colors" />
                  </div>
                  <h3 className="text-xl font-semibold text-white mb-2">
                    {service.name[locale as Locale]}
                  </h3>
                  <p className="text-zinc-400 mb-4">
                    {service.shortDescription[locale as Locale]}
                  </p>
                  <div className="flex flex-wrap gap-2 mb-4">
                    {service.technologies.slice(0, 4).map((tech) => (
                      <span
                        key={tech}
                        className="px-2 py-1 bg-zinc-800/50 text-xs text-zinc-400 rounded"
                      >
                        {tech}
                      </span>
                    ))}
                  </div>
                  <div className="flex items-center text-zinc-400 group-hover:text-white transition-colors">
                    <span className="text-sm">
                      {locale === 'de' ? 'Mehr erfahren' : locale === 'sr' ? 'Saznaj više' : 'Learn more'}
                    </span>
                    <ArrowRight className="h-4 w-4 ml-2 group-hover:translate-x-1 transition-transform" />
                  </div>
                </Link>
              );
            })}
          </div>
        </div>
      </section>

      {/* Technology Services Grid */}
      <section className="pb-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-2xl font-bold text-white mb-8">{techServicesTitle}</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {techServices.map((service) => {
              const IconComponent = iconMap[service.icon] || Brain;
              return (
                <Link
                  key={service.slug}
                  href={`/${locale}/leistungen/${service.slug}`}
                  className="group bg-gradient-to-br from-zinc-800/40 to-zinc-800/20 border border-zinc-700/50 rounded-xl p-6 hover:border-zinc-600 transition-all duration-300"
                >
                  <div className="p-3 bg-zinc-700/50 rounded-lg w-fit mb-4">
                    <IconComponent className="h-6 w-6 text-zinc-300 group-hover:text-white transition-colors" />
                  </div>
                  <h3 className="text-xl font-semibold text-white mb-2">
                    {service.name[locale as Locale]}
                  </h3>
                  <p className="text-zinc-400 mb-4">
                    {service.shortDescription[locale as Locale]}
                  </p>
                  <div className="flex flex-wrap gap-2 mb-4">
                    {service.technologies.slice(0, 4).map((tech) => (
                      <span
                        key={tech}
                        className="px-2 py-1 bg-zinc-700/50 text-xs text-zinc-300 rounded"
                      >
                        {tech}
                      </span>
                    ))}
                  </div>
                  <div className="flex items-center text-zinc-400 group-hover:text-white transition-colors">
                    <span className="text-sm">
                      {locale === 'de' ? 'Mehr erfahren' : locale === 'sr' ? 'Saznaj više' : 'Learn more'}
                    </span>
                    <ArrowRight className="h-4 w-4 ml-2 group-hover:translate-x-1 transition-transform" />
                  </div>
                </Link>
              );
            })}
          </div>
        </div>
      </section>

      {/* Industry Services Grid */}
      <section className="pb-24">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-2xl font-bold text-white mb-8">{industryServicesTitle}</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {industryServices.map((service) => {
              const IconComponent = iconMap[service.icon] || Brain;
              return (
                <Link
                  key={service.slug}
                  href={`/${locale}/leistungen/${service.slug}`}
                  className="group bg-gradient-to-br from-zinc-800/30 to-zinc-900/30 border border-zinc-800 rounded-xl p-6 hover:border-zinc-600 transition-all duration-300"
                >
                  <div className="p-3 bg-zinc-800/70 rounded-lg w-fit mb-4">
                    <IconComponent className="h-6 w-6 text-zinc-400 group-hover:text-white transition-colors" />
                  </div>
                  <h3 className="text-xl font-semibold text-white mb-2">
                    {service.name[locale as Locale]}
                  </h3>
                  <p className="text-zinc-400 mb-4">
                    {service.shortDescription[locale as Locale]}
                  </p>
                  <div className="flex flex-wrap gap-2 mb-4">
                    {service.technologies.slice(0, 4).map((tech) => (
                      <span
                        key={tech}
                        className="px-2 py-1 bg-zinc-800/50 text-xs text-zinc-400 rounded"
                      >
                        {tech}
                      </span>
                    ))}
                  </div>
                  <div className="flex items-center text-zinc-400 group-hover:text-white transition-colors">
                    <span className="text-sm">
                      {locale === 'de' ? 'Mehr erfahren' : locale === 'sr' ? 'Saznaj više' : 'Learn more'}
                    </span>
                    <ArrowRight className="h-4 w-4 ml-2 group-hover:translate-x-1 transition-transform" />
                  </div>
                </Link>
              );
            })}
          </div>
        </div>
      </section>

      {/* Cities Section */}
      <section className="py-24 bg-zinc-800/20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-white mb-4">{citiesTitle}</h2>
            <p className="text-zinc-400">{citiesSubtitle}</p>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
            {cities.map((city) => (
              <Link
                key={city.slug}
                href={`/${locale}/leistungen/standort/${city.slug}`}
                className="group flex items-center gap-2 p-4 bg-zinc-800/30 border border-zinc-800 rounded-lg hover:border-zinc-700 transition-all duration-300"
              >
                <MapPin className="h-4 w-4 text-zinc-500 group-hover:text-white transition-colors" />
                <span className="text-zinc-300 group-hover:text-white transition-colors">
                  {city.name[locale as Locale]}
                </span>
              </Link>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ Section */}
      <section className="py-24">
        <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl font-bold text-white text-center mb-12">
            {locale === 'de' ? 'Häufige Fragen' : locale === 'sr' ? 'Česta pitanja' : 'Frequently Asked Questions'}
          </h2>
          <div className="space-y-6">
            {faqItems.map((item, index) => (
              <div
                key={index}
                className="bg-zinc-800/30 border border-zinc-800 rounded-lg p-6"
              >
                <h3 className="text-lg font-semibold text-white mb-2">
                  {item.question}
                </h3>
                <p className="text-zinc-400">{item.answer}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-24 bg-zinc-800/20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div className="relative aspect-video rounded-2xl overflow-hidden order-2 lg:order-1">
              <Image
                src="/images/gallery/handshake.avif"
                alt="Business Partnership"
                fill
                sizes="(max-width: 1024px) 100vw, 50vw"
                className="object-cover"
              />
            </div>
            <div className="text-center lg:text-left order-1 lg:order-2">
              <h2 className="text-3xl font-bold text-white mb-4">
                {locale === 'de' ? 'Bereit für Ihr Projekt?' : locale === 'sr' ? 'Spremni za vaš projekat?' : 'Ready for your project?'}
              </h2>
              <p className="text-zinc-400 mb-8">
                {locale === 'de'
                  ? 'Lassen Sie uns besprechen, wie ich Ihnen helfen kann.'
                  : locale === 'sr'
                  ? 'Razgovarajmo o tome kako vam mogu pomoći.'
                  : "Let's discuss how I can help you."}
              </p>
              <Link
                href={`/${locale}/contact`}
                className="inline-flex items-center px-8 py-4 bg-white text-zinc-900 font-semibold rounded-lg hover:bg-zinc-100 transition-colors"
              >
                {locale === 'de' ? 'Kontakt aufnehmen' : locale === 'sr' ? 'Kontaktirajte me' : 'Get in touch'}
                <ArrowRight className="h-5 w-5 ml-2" />
              </Link>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}