import { siteConfig } from '@/config/site'
import { content } from '@/content'
import type { Metadata } from 'next'

const { services: pageContent } = content.pages

export const metadata: Metadata = {
  title: `${pageContent.meta.title} | ${siteConfig.general.name}`,
  description: pageContent.meta.description,
  openGraph: {
    title: `${pageContent.meta.title} | ${siteConfig.general.name}`,
    description: pageContent.meta.ogDescription,
    url: `${siteConfig.general.url}/szolgaltatasok`,
  },
}

export default function ServicesPage() {
  return (
    <div className="space-y-16 py-8">
      {/* Hero Section */}
      <section className="bg-gradient-to-r from-blue-50 to-indigo-50 py-16">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
            {pageContent.hero.title}
          </h1>
          <p className="text-xl text-gray-600 leading-relaxed">
            {pageContent.hero.subtitle}
          </p>
        </div>
      </section>

      {/* Services Grid */}
      <section className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {content.pages.home.services.items.map((service) => (
            <div key={service.id} className="bg-white rounded-xl shadow-sm border border-gray-200 p-8 hover:shadow-md transition-shadow">
              <div className="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-6">
                <span className="text-2xl">{service.icon}</span>
              </div>
              
              <h2 className="text-2xl font-bold text-gray-900 mb-4">{service.title}</h2>
              <p className="text-gray-600 leading-relaxed mb-6">{service.description}</p>
              
              <div className="mb-6">
                <h3 className="text-lg font-semibold text-gray-900 mb-3">{content.common.labels.features}</h3>
                <ul className="space-y-2">
                  {service.features.map((feature, index) => (
                    <li key={index} className="flex items-start">
                      <span className="text-blue-500 mr-3 mt-0.5">✓</span>
                      <span className="text-gray-700">{feature}</span>
                    </li>
                  ))}
                </ul>
              </div>
              
              <a 
                href="/kapcsolat" 
                className="inline-flex items-center text-blue-600 hover:text-blue-700 font-medium transition-colors"
              >
                {service.ctaText}
                <svg className="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                </svg>
              </a>
            </div>
          ))}
        </div>
      </section>

      {/* Detailed Services */}
      <section className="bg-gray-50 py-16">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-900 mb-4">
              {pageContent.details.title}
            </h2>
            <p className="text-lg text-gray-600">
              {pageContent.details.subtitle}
            </p>
          </div>

          <div className="space-y-12">
            {pageContent.details.services.map((service) => (
              <div key={service.title} className="bg-white rounded-xl p-8 shadow-sm">
                <div className="flex items-start space-x-4">
                  <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
                    <span className="text-xl">{service.icon}</span>
                  </div>
                  <div className="flex-1">
                    <h3 className="text-2xl font-bold text-gray-900 mb-4">{service.title}</h3>
                    <div className="prose prose-lg text-gray-700">
                      <p>{service.description}</p>
                      <h4 className="text-lg font-semibold text-gray-900 mt-6 mb-3">{service.specs.title}</h4>
                      <ul className="space-y-1">
                        {service.specs.items.map((item, index) => (
                          <li key={index}>{item}</li>
                        ))}
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Support Section */}
      <section className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="bg-blue-50 rounded-xl p-8 text-center">
          <h2 className="text-2xl font-bold text-gray-900 mb-4">
            {pageContent.support.title}
          </h2>
          <p className="text-lg text-gray-700 mb-6">
            {pageContent.support.subtitle}
          </p>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 text-sm">
            {pageContent.support.channels.map((channel) => (
              <div key={channel.title}>
                <h3 className="font-semibold text-gray-900 mb-2">{channel.title}</h3>
                <p className="text-gray-600">{channel.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="bg-gray-900 text-white py-16">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-3xl font-bold mb-4">
            {pageContent.cta.title}
          </h2>
          <p className="text-xl text-gray-300 mb-8">
            {pageContent.cta.subtitle}
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <a
              href="/kapcsolat"
              className="inline-block bg-blue-600 hover:bg-blue-700 text-white font-medium px-8 py-3 rounded-md transition-colors"
            >
              {pageContent.cta.primaryButton}
            </a>
            <a
              href={content.pages.home.hero.cta.primary.href}
              target="_blank"
              rel="noopener noreferrer"
              className="inline-block border-2 border-white text-white hover:bg-white hover:text-gray-900 font-medium px-8 py-3 rounded-md transition-colors"
            >
              {pageContent.cta.secondaryButton}
            </a>
          </div>
        </div>
      </section>
    </div>
  )
}