import React, { useEffect, useState } from "react";
import { 
  ArrowRight, Calculator, Code2, Smartphone, Palette, LineChart, Eye, Menu, X, 
  Sun, Moon, ChevronDown, Phone, Mail, MessageCircle, Rocket, Users, Clock, 
  Headphones, Award
} from "lucide-react";
import AOS from "aos";
import "aos/dist/aos.css";

// Korean i18n strings to replace <%- __('...') %>
const t = {
  navigation: {
    home: "홈",
    about: "회사소개", 
    services: "서비스",
    portfolio: "포트폴리오",
    contact: "연락처",
    calculator: "비용계산기"
  },
  language: {
    korean: "한국어",
    english: "English", 
    russian: "Русский",
    kazakh: "Қазақша"
  },
  hero: {
    title: { smart: "스마트", solutions: "솔루션" },
    subtitle: "혁신적인 기술로 비즈니스를 성장시키세요",
    description: "비즈니스의 디지털 전환을 이끄는 혁신적인 웹개발, 모바일 앱, UI/UX 디자인",
    cta: { start: "시작하기", portfolio: "포트폴리오 보기" },
  },
  services: {
    title: { our: "우리의", services: "서비스" },
    subtitle: "아이디어를 현실로 만드는 전문 개발 서비스",
    description: "최첨단 기술과 창의적 아이디어로 완성하는 디지털 솔루션",
    view_all: "모든 서비스 보기",
    web: { title: "웹 개발", description: "반응형 웹사이트 및 웹 애플리케이션 개발", price: "500,000원부터" },
    mobile: { title: "모바일 앱", description: "iOS 및 Android 네이티브 앱 개발", price: "1,000,000원부터" },
    design: { title: "UI/UX 디자인", description: "사용자 중심의 인터페이스 및 경험 디자인", price: "300,000원부터" },
    marketing: { title: "디지털 마케팅", description: "SEO, 소셜미디어 마케팅, 광고 관리", price: "200,000원부터" },
    hero: {
      title: "우리의",
      title_highlight: "서비스",
      subtitle: "혁신적인 기술로 비즈니스 성장 지원"
    },
    cards: {
      starting_price: "시작 가격",
      consultation: "상담",
      calculate_cost: "비용 계산",
      popular: "인기"
    },
    process: {
      title: "프로젝트 수행 과정",
      subtitle: "체계적이고 전문적인 프로세스로 프로젝트를 진행합니다",
      step1: { title: "상담 및 기획", description: "고객의 요구사항을 정확히 파악하고 최적의 솔루션을 기획합니다" },
      step2: { title: "디자인 및 설계", description: "사용자 중심의 직관적인 디자인과 견고한 시스템 아키텍처를 설계합니다" },
      step3: { title: "개발 및 구현", description: "최신 기술과 모범 사례를 활용하여 효율적이고 확장 가능한 솔루션을 개발합니다" },
      step4: { title: "테스트 및 배포", description: "철저한 테스트를 통해 품질을 보장하고 안정적인 배포를 진행합니다" }
    },
    why_choose: {
      title: "왜 SmartSolTech를 선택해야 할까요?",
      modern_tech: { title: "최신 기술 활용", description: "항상 최신 기술 트렌드를 파악하고, 검증된 기술 스택을 활용하여 미래 지향적인 솔루션을 제공합니다." },
      expert_team: { title: "전문가 팀", description: "각 분야의 전문가들로 구성된 팀이 협력하여 최고 품질의 결과물을 보장합니다." },
      fast_response: { title: "빠른 대응", description: "신속한 의사소통과 빠른 피드백을 통해 프로젝트를 효율적으로 진행합니다." },
      continuous_support: { title: "지속적인 지원", description: "프로젝트 완료 후에도 지속적인 유지보수와 기술 지원을 제공합니다." },
      quality_guarantee: { title: "품질 보장", subtitle: "최고 품질의 결과물을 약속드립니다" }
    },
    cta: {
      title: "프로젝트를 시작할 준비가 되셨나요?",
      subtitle: "지금 바로 무료 상담을 받아보세요",
      calculate_cost: "비용 계산하기",
      view_portfolio: "포트폴리오 보기"
    }
  },
  portfolio: {
    title: { recent: "최근", projects: "프로젝트" },
    subtitle: "웹, 모바일, 브랜딩 분야의 선별된 작업들",
    view_all: "전체 포트폴리오 보기",
  },
  calculator: {
    cta: { title: "프로젝트 비용 계산기", subtitle: "몇 가지 질문에 답하여 빠른 견적을 받아보세요", button: "계산기 열기" },
  },
  contact: {
    cta: { ready: "시작할", start: "준비가", question: " 되셨나요?", subtitle: "프로젝트에 대해 알려주세요 - 하루 안에 답변드리겠습니다" },
    phone: { title: "전화", number: "+82 10-1234-5678" },
    email: { title: "이메일", address: "hello@smartsoltech.kr" },
    telegram: { title: "텔레그램", subtitle: "@smartsoltech" },
    form: {
      title: "빠른 연락",
      name: "성함",
      email: "이메일",
      phone: "전화번호 (선택사항)",
      service: {
        select: "어떤 서비스에 관심이 있으신가요?",
        web: "웹 개발",
        mobile: "모바일 앱",
        design: "UI/UX 디자인",
        branding: "브랜딩",
        consulting: "컨설팅",
        other: "기타",
      },
      message: "프로젝트에 대해 알려주세요",
      submit: "메시지 보내기",
    },
  },
  common: { view_details: "자세히 보기" },
  theme: { toggle: "테마 변경" }
};

const services = [
  { icon: <Code2 className="w-10 h-10" />, title: t.services.web.title, description: t.services.web.description, price: t.services.web.price, delay: 0, category: "개발" },
  { icon: <Smartphone className="w-10 h-10" />, title: t.services.mobile.title, description: t.services.mobile.description, price: t.services.mobile.price, delay: 100, category: "모바일" },
  { icon: <Palette className="w-10 h-10" />, title: t.services.design.title, description: t.services.design.description, price: t.services.design.price, delay: 200, category: "디자인" },
  { icon: <LineChart className="w-10 h-10" />, title: t.services.marketing.title, description: t.services.marketing.description, price: t.services.marketing.price, delay: 300, category: "마케팅" },
];

const demoPortfolio = [
  {
    _id: "p1",
    title: "핀테크 대시보드",
    category: "웹앱",
    images: [{ url: "https://picsum.photos/seed/fin/800/450", isPrimary: true }],
    technologies: ["React", "Tailwind", "Node"],
    description: "역할 기반 접근 제어를 갖춘 실시간 분석",
    shortDescription: "역할 기반 접근 제어를 갖춘 실시간 분석",
    viewCount: 423,
  },
  {
    _id: "p2", 
    title: "웰니스 트래커",
    category: "모바일",
    images: [{ url: "https://picsum.photos/seed/well/800/450", isPrimary: true }],
    technologies: ["Kotlin", "Compose"],
    description: "개인 건강 지표 및 알림",
    shortDescription: "개인 건강 지표 및 알림",
    viewCount: 1189,
  },
  {
    _id: "p3",
    title: "브랜드 리뉴얼",
    category: "브랜딩",
    images: [{ url: "https://picsum.photos/seed/brand/800/450", isPrimary: true }],
    technologies: ["Figma", "Design System"],
    description: "아이덴티티, 컴포넌트 및 마케팅 사이트",
    shortDescription: "아이덴티티, 컴포넌트 및 마케팅 사이트",
    viewCount: 762,
  },
];

export default function LandingDemo() {
  const [darkMode, setDarkMode] = useState(false);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [currentLanguage, setCurrentLanguage] = useState('ko');

  useEffect(() => {
    AOS.init({ duration: 800, easing: "ease-in-out", once: true });
    
    // Check for saved theme preference or default to light mode
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
      setDarkMode(true);
      document.documentElement.classList.add('dark');
    }
  }, []);

  const toggleTheme = () => {
    setDarkMode(!darkMode);
    if (!darkMode) {
      document.documentElement.classList.add('dark');
      localStorage.setItem('theme', 'dark');
    } else {
      document.documentElement.classList.remove('dark');
      localStorage.setItem('theme', 'light');
    }
  };

  const toggleMobileMenu = () => {
    setMobileMenuOpen(!mobileMenuOpen);
  };

  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      {/* Global styles for blob animation */}
      <style jsx global>{`
        @keyframes blob { 0% { transform: translate(0px,0px) scale(1); } 33% { transform: translate(20px,-30px) scale(1.1);} 66% { transform: translate(-10px,20px) scale(0.9);} 100% { transform: translate(0px,0px) scale(1);} }
        .animate-blob { animation: blob 12s infinite; }
        .animation-delay-2000 { animation-delay: 2s; }
        .animation-delay-4000 { animation-delay: 4s; }
        .glass-effect { backdrop-filter: blur(6px); }
        .hero-section::before { content: ""; position: absolute; inset: 0; background: radial-gradient(1200px 600px at 10% -10%, rgba(99,102,241,.35), transparent 60%), radial-gradient(1000px 500px at 110% 10%, rgba(168,85,247,.35), transparent 60%); pointer-events:none; }
        .cta-section { background: radial-gradient(1200px 600px at 10% 10%, rgba(59,130,246,.25), transparent 60%), linear-gradient(90deg, #3730a3, #7c3aed); }
        .form-input { outline: none; }
        .theme-toggle-slider { transform: translateX(0); }
        .dark .theme-toggle-slider { transform: translateX(1.75rem); }
        .theme-sun-icon { opacity: 1; }
        .dark .theme-sun-icon { opacity: 0; transform: rotate(180deg); }
        .theme-moon-icon { opacity: 0; transform: rotate(-180deg); }
        .dark .theme-moon-icon { opacity: 1; transform: rotate(0deg); }
      `}</style>

      {/* Navigation */}
      <nav className="bg-white dark:bg-gray-900 shadow-lg fixed w-full z-50 top-0 transition-colors duration-300">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-16">
            <div className="flex items-center">
              {/* Logo */}
              <a href="/" className="flex-shrink-0 flex items-center">
                <img className="h-8 w-auto" src="/images/logo.png" alt="SmartSolTech" />
                <span className="ml-2 text-xl font-bold text-gray-900 dark:text-white">SmartSolTech</span>
              </a>
            </div>
            
            {/* Desktop Navigation */}
            <div className="hidden md:flex items-center space-x-6">
              {/* Navigation Links */}
              <a href="#hero" className="text-blue-600 border-b-2 border-blue-600 px-3 py-2 text-sm font-medium transition-colors nav-link">
                {t.navigation.home}
              </a>
              <a href="#services" className="text-gray-700 dark:text-gray-300 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors nav-link">
                {t.navigation.services}
              </a>
              <a href="#portfolio" className="text-gray-700 dark:text-gray-300 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors nav-link">
                {t.navigation.portfolio}
              </a>
              <a href="#calculator" className="text-gray-700 dark:text-gray-300 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors nav-link">
                {t.navigation.calculator}
              </a>
              <a href="#contact" className="text-gray-700 dark:text-gray-300 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors nav-link">
                {t.navigation.contact}
              </a>
              
              {/* Language Dropdown */}
              <div className="relative group">
                <button className="flex items-center text-gray-700 dark:text-gray-300 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors">
                  <span className="mr-2">🇰🇷</span>
                  {t.language.korean}
                  <ChevronDown className="ml-1 w-4 h-4" />
                </button>
                <div className="absolute right-0 mt-2 w-40 bg-white dark:bg-gray-800 rounded-lg shadow-lg border dark:border-gray-700 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200">
                  <a href="#" className="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-t-lg">
                    🇰🇷 {t.language.korean}
                  </a>
                  <a href="#" className="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                    🇺🇸 {t.language.english}
                  </a>
                  <a href="#" className="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                    🇷🇺 {t.language.russian}
                  </a>
                  <a href="#" className="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-b-lg">
                    🇰🇿 {t.language.kazakh}
                  </a>
                </div>
              </div>

              {/* Animated Theme Toggle */}
              <div className="relative inline-block ml-4" title={t.theme.toggle}>
                <input 
                  type="checkbox" 
                  id="theme-toggle" 
                  className="sr-only" 
                  checked={darkMode}
                  onChange={toggleTheme}
                />
                <label htmlFor="theme-toggle" className="flex items-center cursor-pointer">
                  <div className="relative w-14 h-7 bg-gradient-to-r from-blue-200 to-yellow-200 dark:from-gray-700 dark:to-gray-600 rounded-full border-2 border-gray-300 dark:border-gray-500 transition-all duration-300 shadow-sm">
                    <div className="absolute top-0.5 left-1 w-5 h-5 bg-white dark:bg-gray-200 rounded-full shadow-md transform transition-all duration-300 flex items-center justify-center theme-toggle-slider">
                      <div className="relative w-full h-full flex items-center justify-center">
                        {/* Sun Icon */}
                        <Sun className="absolute w-3 h-3 text-yellow-500 theme-sun-icon transition-all duration-300 transform" />
                        {/* Moon Icon */}
                        <Moon className="absolute w-3 h-3 text-blue-500 theme-moon-icon transition-all duration-300 transform" />
                      </div>
                    </div>
                  </div>
                </label>
              </div>
            </div>
            
            {/* Mobile menu button */}
            <div className="md:hidden flex items-center space-x-2">
              <button 
                onClick={toggleMobileMenu}
                className="p-2 text-gray-700 dark:text-gray-300 hover:text-blue-600 transition-colors"
              >
                {mobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
              </button>
            </div>
          </div>
        </div>

        {/* Mobile Navigation Menu */}
        {mobileMenuOpen && (
          <div className="md:hidden bg-white dark:bg-gray-900 border-t dark:border-gray-700">
            <div className="px-2 pt-2 pb-3 space-y-1">
              <a href="#hero" className="bg-blue-50 dark:bg-blue-900 text-blue-600 block px-3 py-2 rounded-md text-base font-medium">
                {t.navigation.home}
              </a>
              <a href="#services" className="text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">
                {t.navigation.services}
              </a>
              <a href="#portfolio" className="text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">
                {t.navigation.portfolio}
              </a>
              <a href="#calculator" className="text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">
                {t.navigation.calculator}
              </a>
              <a href="#contact" className="text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">
                {t.navigation.contact}
              </a>
            </div>
          </div>
        )}
      </nav>
        <div className="absolute inset-0 bg-black opacity-50 dark:opacity-70"></div>
        <div className="absolute inset-0 bg-gradient-to-r from-blue-600/20 to-purple-600/20"></div>

        {/* Animated blobs */}
        <div className="absolute inset-0 overflow-hidden">
          <div className="absolute -top-40 -right-32 w-80 h-80 bg-purple-500 dark:bg-purple-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
          <div className="absolute -bottom-40 -left-32 w-80 h-80 bg-blue-500 dark:bg-blue-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
          <div className="absolute top-40 left-40 w-80 h-80 bg-indigo-500 dark:bg-indigo-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000"></div>
        </div>

        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 w-full">
          <div className="text-center">
            <h1 className="text-3xl md:text-5xl font-bold text-white mb-6 leading-tight" data-aos="fade-up">
              {t.hero.title.smart} <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-400">{t.hero.title.solutions}</span>
            </h1>
            <p className="text-xl md:text-2xl text-gray-300 dark:text-gray-200 mb-8 max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="200">
              {t.hero.subtitle}
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center" data-aos="fade-up" data-aos-delay="400">
              <a href="#contact" className="bg-gradient-to-r from-blue-500 to-purple-600 text-white px-8 py-4 rounded-full text-lg font-semibold hover:from-blue-600 hover:to-purple-700 transition-all duration-300 transform hover:scale-105 shadow-lg">
                {t.hero.cta.start}
              </a>
              <a href="#portfolio" className="border-2 border-white text-white px-8 py-4 rounded-full text-lg font-semibold hover:bg-white hover:text-gray-900 transition-all duration-300 transform hover:scale-105">
                {t.hero.cta.portfolio}
              </a>
            </div>
          </div>

          {/* Scroll indicator */}
          <div className="absolute bottom-20 left-1/2 -translate-x-1/2 animate-bounce">
            <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
            </svg>
          </div>
        </div>
      </section>

      )}
      </nav>

      {/* Hero */}
      <section id="hero" className="relative bg-gradient-to-br from-blue-900 via-purple-900 to-indigo-900 dark:from-gray-900 dark:via-blue-900 dark:to-purple-900 min-h-screen flex items-center overflow-hidden hero-section">
        <div className="absolute inset-0 bg-black opacity-50 dark:opacity-70"></div>
        <div className="absolute inset-0 bg-gradient-to-r from-blue-600/20 to-purple-600/20"></div>

        {/* Animated blobs */}
        <div className="absolute inset-0 overflow-hidden">
          <div className="absolute -top-40 -right-32 w-80 h-80 bg-purple-500 dark:bg-purple-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
          <div className="absolute -bottom-40 -left-32 w-80 h-80 bg-blue-500 dark:bg-blue-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
          <div className="absolute top-40 left-40 w-80 h-80 bg-indigo-500 dark:bg-indigo-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000"></div>
        </div>

        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 w-full">
          <div className="text-center">
            <h1 className="text-3xl md:text-5xl font-bold text-white mb-6 leading-tight" data-aos="fade-up">
              {t.hero.title.smart} <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-400">{t.hero.title.solutions}</span>
            </h1>
            <p className="text-xl md:text-2xl text-gray-300 dark:text-gray-200 mb-8 max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="200">
              {t.hero.subtitle}
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center" data-aos="fade-up" data-aos-delay="400">
              <a href="#contact" className="bg-gradient-to-r from-blue-500 to-purple-600 text-white px-8 py-4 rounded-full text-lg font-semibold hover:from-blue-600 hover:to-purple-700 transition-all duration-300 transform hover:scale-105 shadow-lg">
                {t.hero.cta.start}
              </a>
              <a href="#portfolio" className="border-2 border-white text-white px-8 py-4 rounded-full text-lg font-semibold hover:bg-white hover:text-gray-900 transition-all duration-300 transform hover:scale-105">
                {t.hero.cta.portfolio}
              </a>
            </div>
          </div>

          {/* Scroll indicator */}
          <div className="absolute bottom-20 left-1/2 -translate-x-1/2 animate-bounce">
            <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
            </svg>
          </div>
        </div>
      </section>

      {/* Services Section */}
      <section id="services" className="py-20 bg-white dark:bg-gray-900">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          {/* Hero Section */}
          <div className="text-center mb-16" data-aos="fade-up">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
              {t.services.hero.title} <span className="text-yellow-300">{t.services.hero.title_highlight}</span>
            </h2>
            <p className="text-xl md:text-2xl mb-8 text-gray-700 dark:text-gray-300">
              {t.services.hero.subtitle}
            </p>
          </div>

          {/* Services Grid */}
          <div className="space-y-12">
            {services.map((service, index) => (
              <div 
                key={index}
                className="relative overflow-hidden rounded-3xl shadow-2xl hover:shadow-3xl transition-all duration-500 transform hover:-translate-y-1" 
                data-aos="fade-up" 
                data-aos-delay={index * 150}
              >
                {/* Background with Gradient */}
                <div className={`relative h-64 overflow-hidden ${
                  index % 4 === 0 ? 'bg-gradient-to-r from-blue-600 to-purple-600' :
                  index % 4 === 1 ? 'bg-gradient-to-r from-green-500 to-teal-600' :
                  index % 4 === 2 ? 'bg-gradient-to-r from-purple-600 to-pink-600' :
                  'bg-gradient-to-r from-orange-500 to-red-600'
                }`}>
                  
                  {/* Service Image/Icon Area */}
                  <div className="absolute left-0 top-0 w-2/5 h-full flex items-center justify-center px-6 py-4">
                    <div className="relative z-10 text-white">
                      {service.icon}
                      {/* Decorative elements */}
                      <div className="absolute -top-8 -left-8 w-24 h-24 bg-white bg-opacity-10 rounded-full animate-pulse"></div>
                      <div className="absolute -bottom-4 -right-4 w-16 h-16 bg-white bg-opacity-10 rounded-full animate-pulse" style={{animationDelay: '1s'}}></div>
                    </div>
                    
                    {/* Gradient fade to center */}
                    <div className="absolute right-0 top-0 w-1/2 h-full bg-gradient-to-r from-transparent to-current opacity-30"></div>
                  </div>

                  {/* Service Content Area */}
                  <div className="absolute right-0 top-0 w-3/5 h-full flex items-center pr-16 pl-6 py-4">
                    <div className="text-right w-full text-white">
                      
                      {/* Service Category Badge */}
                      <div className="inline-block mb-4">
                        <span className="bg-white bg-opacity-90 text-gray-800 px-4 py-2 rounded-full text-sm font-medium backdrop-blur-sm shadow-sm">
                          {service.category}
                        </span>
                      </div>

                      {/* Service Title */}
                      <h3 className="text-3xl font-bold mb-4 leading-tight">
                        {service.title}
                      </h3>
                      
                      {/* Service Description */}
                      <p className="text-white text-opacity-90 mb-6 leading-relaxed text-lg">
                        {service.description}
                      </p>

                      {/* Pricing */}
                      <div className="mb-6">
                        <div className="text-white text-opacity-75 text-sm mb-1">{t.services.cards.starting_price}</div>
                        <div className="text-3xl font-bold text-white">
                          {service.price}
                        </div>
                      </div>

                      {/* Action Buttons */}
                      <div className="flex flex-col gap-3 items-end">
                        <a href="#calculator" 
                           className="border-2 border-white text-white px-6 py-3 rounded-xl font-semibold hover:bg-white hover:text-gray-900 transition-all duration-300 transform hover:scale-105">
                            {t.services.cards.calculate_cost}
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>

          {/* Process Section */}
          <div className="mt-32">
            <div className="text-center mb-16" data-aos="fade-up">
              <h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
                {t.services.process.title}
              </h2>
              <p className="text-lg text-gray-700 dark:text-gray-300 text-center mb-12 max-w-3xl mx-auto">
                {t.services.process.subtitle}
              </p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
              {/* Step 1 */}
              <div className="text-center" data-aos="fade-up" data-aos-delay="100">
                <div className="w-20 h-20 bg-blue-600 rounded-full flex items-center justify-center mx-auto mb-6">
                  <span className="text-white text-2xl font-bold">1</span>
                </div>
                <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-4">{t.services.process.step1.title}</h3>
                <p className="text-gray-700 dark:text-gray-300 text-center">
                  {t.services.process.step1.description}
                </p>
              </div>

              {/* Step 2 */}
              <div className="text-center" data-aos="fade-up" data-aos-delay="200">
                <div className="w-20 h-20 bg-purple-600 rounded-full flex items-center justify-center mx-auto mb-6">
                  <span className="text-white text-2xl font-bold">2</span>
                </div>
                <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-4">{t.services.process.step2.title}</h3>
                <p className="text-gray-700 dark:text-gray-300 text-center">
                  {t.services.process.step2.description}
                </p>
              </div>

              {/* Step 3 */}
              <div className="text-center" data-aos="fade-up" data-aos-delay="300">
                <div className="w-20 h-20 bg-green-600 rounded-full flex items-center justify-center mx-auto mb-6">
                  <span className="text-white text-2xl font-bold">3</span>
                </div>
                <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-4">{t.services.process.step3.title}</h3>
                <p className="text-gray-700 dark:text-gray-300 text-center">
                  {t.services.process.step3.description}
                </p>
              </div>

              {/* Step 4 */}
              <div className="text-center" data-aos="fade-up" data-aos-delay="400">
                <div className="w-20 h-20 bg-orange-600 rounded-full flex items-center justify-center mx-auto mb-6">
                  <span className="text-white text-2xl font-bold">4</span>
                </div>
                <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-4">{t.services.process.step4.title}</h3>
                <p className="text-gray-700 dark:text-gray-300 text-center">
                  {t.services.process.step4.description}
                </p>
              </div>
            </div>
          </div>

          {/* Why Choose Us Section */}
          <div className="mt-32">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
              {/* Content */}
              <div data-aos="fade-right">
                <h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-6">
                  {t.services.why_choose.title}
                </h2>
                
                <div className="space-y-6">
                  {/* Feature 1 */}
                  <div className="flex items-start">
                    <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                      <Rocket className="w-6 h-6 text-blue-600 dark:text-blue-400" />
                    </div>
                    <div>
                      <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">{t.services.why_choose.modern_tech.title}</h3>
                      <p className="text-gray-600 dark:text-gray-300">
                        {t.services.why_choose.modern_tech.description}
                      </p>
                    </div>
                  </div>

                  {/* Feature 2 */}
                  <div className="flex items-start">
                    <div className="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                      <Users className="w-6 h-6 text-green-600 dark:text-green-400" />
                    </div>
                    <div>
                      <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">{t.services.why_choose.expert_team.title}</h3>
                      <p className="text-gray-600 dark:text-gray-300">
                        {t.services.why_choose.expert_team.description}
                      </p>
                    </div>
                  </div>

                  {/* Feature 3 */}
                  <div className="flex items-start">
                    <div className="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                      <Clock className="w-6 h-6 text-purple-600 dark:text-purple-400" />
                    </div>
                    <div>
                      <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">{t.services.why_choose.fast_response.title}</h3>
                      <p className="text-gray-600 dark:text-gray-300">
                        {t.services.why_choose.fast_response.description}
                      </p>
                    </div>
                  </div>

                  {/* Feature 4 */}
                  <div className="flex items-start">
                    <div className="w-12 h-12 bg-orange-100 dark:bg-orange-900 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                      <Headphones className="w-6 h-6 text-orange-600 dark:text-orange-400" />
                    </div>
                    <div>
                      <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">{t.services.why_choose.continuous_support.title}</h3>
                      <p className="text-gray-600 dark:text-gray-300">
                        {t.services.why_choose.continuous_support.description}
                      </p>
                    </div>
                  </div>
                </div>
              </div>

              {/* Image/Visual */}
              <div className="relative" data-aos="fade-left">
                <div className="bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900 dark:to-purple-900 rounded-2xl p-8 h-96 flex items-center justify-center">
                  <div className="text-center">
                    <Award className="w-24 h-24 text-blue-600 dark:text-blue-400 mx-auto mb-4" />
                    <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">{t.services.why_choose.quality_guarantee.title}</h3>
                    <p className="text-gray-600 dark:text-gray-300">
                      {t.services.why_choose.quality_guarantee.subtitle}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Portfolio */}
      <section className="py-20 bg-gray-50 dark:bg-gray-800" id="portfolio">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16" data-aos="fade-up">
            <h2 className="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-4">
              {t.portfolio.title.recent} <span className="text-purple-600 dark:text-purple-400">{t.portfolio.title.projects}</span>
            </h2>
            <p className="text-lg text-gray-600 dark:text-gray-300 text-center max-w-3xl mx-auto">
              {t.portfolio.subtitle}
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {demoPortfolio.map((project, index) => (
              <div key={project._id} className="group bg-white dark:bg-gray-700 rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2" data-aos="fade-up" data-aos-delay={index * 100}>
                <div className="relative overflow-hidden">
                  <img src={project.images?.[0]?.url} alt={project.title} className="w-full h-48 object-cover" />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                  <div className="absolute bottom-4 left-4 right-4 translate-y-4 group-hover:translate-y-0 transition-transform duration-300 opacity-0 group-hover:opacity-100">
                    <div className="flex flex-wrap gap-2">
                      {project.technologies?.slice(0, 3).map((tech) => (
                        <span key={tech} className="px-2 py-1 bg-white/20 glass-effect text-white text-xs rounded-full">{tech}</span>
                      ))}
                    </div>
                  </div>
                </div>
                <div className="p-6">
                  <div className="flex items-center justify-between mb-2">
                    <span className="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300 text-sm rounded-full font-medium">{project.category}</span>
                    <span className="text-gray-500 dark:text-gray-400 text-sm flex items-center"><Eye className="w-4 h-4 mr-1" />{project.viewCount ?? 0}</span>
                  </div>
                  <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">{project.title}</h3>
                  <p className="text-gray-600 dark:text-gray-300 mb-4">{project.shortDescription ?? project.description}</p>
                  <a href="#" className="inline-flex items-center text-blue-600 dark:text-blue-400 font-semibold hover:text-blue-700 dark:hover:text-blue-300 transition-colors">
                    {t.common.view_details}
                    <ArrowRight className="ml-1 w-4 h-4" />
                  </a>
                </div>
              </div>
            ))}
          </div>

          <div className="text-center mt-12" data-aos="fade-up">
            <a href="#portfolio" className="inline-flex items-center px-6 py-3 bg-purple-600 dark:bg-purple-500 text-white font-semibold rounded-lg hover:bg-purple-700 dark:hover:bg-purple-400 transition-colors">
              {t.portfolio.view_all}
              <ArrowRight className="ml-2 w-5 h-5" />
            </a>
          </div>
        </div>
      </section>

      {/* Calculator CTA */}
      <section className="py-20 cta-section">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
          <div data-aos="fade-up">
            <h2 className="text-2xl md:text-3xl font-bold text-white mb-6">{t.calculator.cta.title}</h2>
            <p className="text-lg text-blue-100 mb-8 max-w-3xl mx-auto">{t.calculator.cta.subtitle}</p>
            <a href="#calculator" className="inline-flex items-center px-8 py-4 bg-white text-blue-600 font-bold rounded-full text-lg hover:bg-gray-100 transition-colors transform hover:scale-105">
              <Calculator className="mr-3" />
              {t.calculator.cta.button}
            </a>
          </div>
        </div>
      </section>

      {/* Contact */}
      <section className="py-20 bg-white dark:bg-gray-900" id="contact">
        <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 data-aos="fade-right">
              <h2 className="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-6">
                {t.contact.cta.ready} <span className="text-blue-600 dark:text-blue-400">{t.contact.cta.start}</span>
                {t.contact.cta.question}
              </h2>
              <p className="text-lg text-gray-600 dark:text-gray-300 mb-8">{t.contact.cta.subtitle}</p>
              <div className="space-y-4">
                <div className="flex items-center">
                  <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mr-4">
                    <svg viewBox="0 0 24 24" className="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 5a2 2 0 012-2h3.28a2 2 0 011.94 1.515l.72 2.885a2 2 0 01-.52 1.94L9.12 11.88a16.001 16.001 0 006.999 6.999l1.54-1.28a2 2 0 011.94-.52l2.885.72A2 2 0 0121 20.72V24a2 2 0 01-2 2h-1C9.163 26 2 18.837 2 10V9a2 2 0 011-1.732V5z"/></svg>
                  </div>
                  <div>
                    <div className="font-semibold text-gray-900 dark:text-white">{t.contact.phone.title}</div>
                    <div className="text-gray-600 dark:text-gray-300">{t.contact.phone.number}</div>
                  </div>
                </div>
                <div className="flex items-center">
                  <div className="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center mr-4">
                    <svg viewBox="0 0 24 24" className="w-6 h-6 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M16 12H8m8 4H8m8-8H8M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                  </div>
                  <div>
                    <div className="font-semibold text-gray-900 dark:text-white">{t.contact.email.title}</div>
                    <div className="text-gray-600 dark:text-gray-300">{t.contact.email.address}</div>
                  </div>
                </div>
                <div className="flex items-center">
                  <div className="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mr-4">
                    <svg viewBox="0 0 24 24" className="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 11c1.657 0 3-1.343 3-3S13.657 5 12 5 9 6.343 9 8s1.343 3 3 3zm-7 9a7 7 0 1114 0H5z"/></svg>
                  </div>
                  <div>
                    <div className="font-semibold text-gray-900 dark:text-white">{t.contact.telegram.title}</div>
                    <div className="text-gray-600 dark:text-gray-300">{t.contact.telegram.subtitle}</div>
                  </div>
                </div>
              </div>
            </div>

            <div data-aos="fade-left">
              <div className="p-8 rounded-2xl shadow-lg bg-white dark:bg-gray-800">
                <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">{t.contact.form.title}</h3>
                <form className="space-y-4" onSubmit={(e) => e.preventDefault()}>
                  <input type="text" placeholder={t.contact.form.name} required className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white" />
                  <input type="email" placeholder={t.contact.form.email} required className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white" />
                  <input type="tel" placeholder={t.contact.form.phone} className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white" />
                  <select className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white">
                    <option value="">{t.contact.form.service.select}</option>
                    <option value="web">{t.contact.form.service.web}</option>
                    <option value="mobile">{t.contact.form.service.mobile}</option>
                    <option value="design">{t.contact.form.service.design}</option>
                    <option value="branding">{t.contact.form.service.branding}</option>
                    <option value="consulting">{t.contact.form.service.consulting}</option>
                    <option value="other">{t.contact.form.service.other}</option>
                  </select>
                  <textarea rows={4} placeholder={t.contact.form.message} required className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none dark:bg-gray-700 dark:text-white"></textarea>
                  <button type="submit" className="w-full bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold py-3 rounded-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-300 transform hover:scale-105">
                    {t.contact.form.submit}
                  </button>
                </form>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}