'use client'

import { Target, ExternalLink, ArrowRight } from 'lucide-react'
import { useLanguage } from '@/lib/LanguageContext'
import { getTranslation } from '@/lib/i18n'

export default function Services() {
  const { language } = useLanguage()
  return (
    <section className="py-24 md:py-32 bg-brand-light">
      <div className="container mx-auto px-6">
        <div className="max-w-4xl mb-20">
          <h2 className="text-4xl md:text-7xl font-extrabold tracking-tighter uppercase mb-6 leading-none">
            {getTranslation(language, 'services.title')} <br /> <span className="text-brand-primary italic">{getTranslation(language, 'services.titleAccent')}</span>
          </h2>
          <p className="text-sm sm:text-base uppercase tracking-wide font-medium opacity-60">
            {getTranslation(language, 'services.subtitle')}
          </p>
        </div>

        <div className="grid md:grid-cols-2 gap-6 md:gap-8">
          {/* Buyer Card */}
          <div className="app-card bg-white p-6 sm:p-8 md:p-10 lg:p-16 flex flex-col justify-between min-h-[400px] sm:min-h-[450px]">
            <div>
              <div className="w-10 h-10 sm:w-12 sm:h-12 bg-brand-light rounded-full flex items-center justify-center mb-6 sm:mb-10 border border-brand-accent/30">
                <Target size={18} className="sm:w-5 sm:h-5 text-brand-primary" />
              </div>
              <h3 className="text-2xl sm:text-3xl font-extrabold uppercase mb-4 sm:mb-6">{getTranslation(language, 'services.buyers.title')}</h3>
              <p className="text-sm font-medium leading-relaxed text-gray-500 mb-6 sm:mb-8">
                {getTranslation(language, 'services.buyers.description')}
              </p>
            </div>
            <a
              href="#search"
              className="flex items-center text-xs sm:text-sm font-semibold uppercase tracking-wide text-brand-primary group"
            >
              {getTranslation(language, 'services.buyers.cta')}{' '}
              <ArrowRight size={12} className="sm:w-[14px] sm:h-[14px] ml-2 group-hover:translate-x-1 transition-transform" />
            </a>
          </div>

          {/* Seller Card */}
          <div className="app-card bg-brand-primary text-white p-6 sm:p-8 md:p-10 lg:p-16 flex flex-col justify-between min-h-[400px] sm:min-h-[450px]">
            <div>
              <div className="w-10 h-10 sm:w-12 sm:h-12 bg-white/10 rounded-full flex items-center justify-center mb-6 sm:mb-10 border border-white/10">
                <ExternalLink size={18} className="sm:w-5 sm:h-5 text-brand-accent" />
              </div>
              <h3 className="text-2xl sm:text-3xl font-extrabold uppercase mb-4 sm:mb-6">{getTranslation(language, 'services.sellers.title')}</h3>
              <p className="text-sm font-medium leading-relaxed opacity-70 mb-6 sm:mb-8">
                {getTranslation(language, 'services.sellers.description')}
              </p>
            </div>
            <a
              href="#sell"
              className="flex items-center text-xs sm:text-sm font-semibold uppercase tracking-wide text-white group"
            >
              {getTranslation(language, 'services.sellers.cta')}{' '}
              <ArrowRight size={12} className="sm:w-[14px] sm:h-[14px] ml-2 group-hover:translate-x-1 transition-transform" />
            </a>
          </div>
        </div>
      </div>
    </section>
  )
}