'use client'

import { ArrowRight } from 'lucide-react'
import Link from 'next/link'
import { imageUrls } from '@/lib/images'
import { useLanguage } from '@/lib/LanguageContext'
import { getTranslation } from '@/lib/i18n'

export default function About() {
  const { language } = useLanguage()
  return (
    <section className="relative bg-gray-100 flex flex-col-reverse lg:flex-row min-h-screen overflow-hidden">
      {/* Image Section - First on mobile (vertical Instagram style), second on desktop (horizontal with fade) */}
      <div className="w-full lg:w-1/2 min-h-[60vh] md:min-h-[500px] lg:min-h-screen relative overflow-hidden order-1 lg:order-2">
        {/* Desktop: Horizontal image with gradient transition to text */}
        <div
          className="hidden lg:block absolute inset-0 bg-cover bg-center transition-transform duration-1000 hover:scale-105"
          style={{
            backgroundImage: `url('${imageUrls.about.kevin}')`,
            backgroundPosition: 'center',
          }}
        />
        <div className="hidden lg:block absolute inset-0 bg-gradient-to-r from-gray-900/40 via-gray-900/10 to-transparent" />
        
        {/* Mobile: Vertical image with gradient transition to text */}
        <div
          className="lg:hidden absolute inset-0 bg-cover bg-center"
          style={{
            backgroundImage: `url('${imageUrls.about.kevin}')`,
            backgroundPosition: 'center top',
          }}
        />
        <div className="lg:hidden absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-gray-900/50" />
        
        {/* Glassmorphism Badge - Desktop only */}
        <div className="absolute bottom-8 right-8 glass p-6 rounded-2xl hidden lg:block backdrop-blur-xl bg-white/90 border border-white/30 shadow-2xl">
          <p className="text-xs sm:text-sm uppercase font-semibold tracking-wide text-brand-text">
            Kevin Victor
          </p>
          <p className="text-[10px] sm:text-xs uppercase opacity-70 tracking-wide text-brand-text mt-1">
            {getTranslation(language, 'about.certified')}
          </p>
        </div>
      </div>
      
      {/* Content Section - Second on mobile, first on desktop */}
      <div className="w-full lg:w-1/2 p-8 md:p-12 lg:p-24 flex flex-col justify-center text-brand-text relative z-10 order-2 lg:order-1 bg-gray-100">
        <span className="text-xs sm:text-sm uppercase tracking-[0.3em] sm:tracking-[0.4em] text-brand-primary mb-4 sm:mb-6 font-semibold">
          {getTranslation(language, 'about.label')}
        </span>
        <h2 className="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-extrabold tracking-tighter uppercase mb-6 md:mb-10 leading-tight">
          {getTranslation(language, 'about.title')}
        </h2>
        <div className="space-y-5 md:space-y-6 text-sm md:text-base font-normal leading-relaxed text-gray-700 max-w-lg">
          <p>
            {getTranslation(language, 'about.bio1')}
          </p>
          <p>
            {getTranslation(language, 'about.bio2')}
          </p>
          <p>
            {getTranslation(language, 'about.bio3')}
          </p>
          <p>
            {getTranslation(language, 'about.bio4')}
          </p>
        </div>
        <Link
          href={`/${language}/contact`}
          className="mt-8 md:mt-12 bg-brand-primary text-white w-fit px-6 md:px-8 py-3 md:py-4 rounded-xl text-sm font-semibold uppercase tracking-wide flex items-center group hover:bg-opacity-90 transition-all"
        >
          {getTranslation(language, 'about.cta')}{' '}
          <ArrowRight size={14} className="ml-3 group-hover:translate-x-2 transition-transform" />
        </Link>
      </div>
    </section>
  )
}