'use client'

import React, { useState } from 'react'
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { ServerIcon, ShieldCheckIcon, BoltIcon, HeadphonesIcon, RocketIcon, CogIcon } from 'lucide-react'

const languages = {
  ru: {
    nav: ['Главная', 'Новости', 'Поддержка', 'Статус серверов'],
    hero: {
      new: 'Запустили продажу VDS в Германии!',
      title: 'Идеальный хостинг для',
      titleHighlight: 'вашего проекта',
      subtitle: 'Воплощайте свои фантазии в реальность, и покоряйте вершины вместе с нами',
      cta: 'Перейти к услугам'
    },
    features: {
      title: 'Почему мы?',
      list: [
        {
          title: 'Быстрые серверы',
          description: 'Мы используем самые современные процессоры высокой частоты, которые гарантируют максимальную производительность вашего сервера.'
        },
        {
          title: 'Защита от DDoS',
          description: 'Все серверы имеют сеть с низкой задержкой и каналом в 1 Гбит/с. На платных тарифах стоит мощная защита от DDoS-атак.'
        },
        {
          title: 'Надёжные дата-центры',
          description: 'Серверы размещены в центрах обработки данных "InterXion", "ММТС-9" которые соответствуют самым высоким стандартам с полной физической и аппаратной защитой.'
        },
        {
          title: 'Оперативная поддержка',
          description: 'Наша поддержка готова помочь вам в любое время суток и проконсультировать вас по любому вопросу. Работаем 24/7.'
        },
        {
          title: 'Минимальный пинг',
          description: 'Наши узлы расположены в Германии и Москве, что способствует низкому пингу и задержке во время игры.'
        },
        {
          title: 'Поддержка модов',
          description: 'Мы поддерживаем как плагины, так и моды. Их число не ограничено. Вы сможете реализовать ваши самые интересные мысли!'
        }
      ]
    },
    pricing: {
      title: 'Наши услуги',
      services: ['Игровые услуги', 'VDS-серверы', 'DDoS-защита'],
      regions: ['Германия', 'Россия'],
      perMonth: 'в месяц',
      buy: 'Приобрести'
    },
    social: {
      title: 'Возникли вопросы? Нужна помощь?',
      subtitle: 'Обратитесь в поддержку через любой удобный сервис',
      buttons: ['вконтакте', 'telegram', 'discord']
    },
    footer: {
      main: 'Главное',
      mainLinks: ['Главная страница', 'Услуги', 'Новости', 'Поддержка', 'Панель управления'],
      legal: 'Юр. Информация',
      legalLinks: ['Условия использования', 'Политика конфиденциальности'],
      social: 'Социальные сети',
      socialLinks: ['ВКонтакте', 'Telegram', 'Discord']
    }
  },
  en: {
    nav: ['Home', 'News', 'Support', 'Server Status'],
    hero: {
      new: 'VDS sales launched in Germany!',
      title: 'Perfect hosting for',
      titleHighlight: 'your project',
      subtitle: 'Bring your fantasies to life and conquer new heights with us',
      cta: 'View Services'
    },
    features: {
      title: 'Why Choose Us?',
      list: [
        {
          title: 'Fast Servers',
          description: 'We use the most modern high-frequency processors that guarantee maximum performance for your server.'
        },
        {
          title: 'DDoS Protection',
          description: 'All servers have a low-latency network with a 1 Gbps channel. Paid plans include powerful DDoS attack protection.'
        },
        {
          title: 'Reliable Data Centers',
          description: 'Servers are located in "InterXion" and "MMTS-9" data centers that meet the highest standards with full physical and hardware protection.'
        },
        {
          title: 'Prompt Support',
          description: 'Our support is ready to help you at any time and consult you on any issue. We work 24/7.'
        },
        {
          title: 'Minimal Ping',
          description: 'Our nodes are located in Germany and Moscow, which contributes to low ping and latency during gameplay.'
        },
        {
          title: 'Mod Support',
          description: 'We support both plugins and mods. Their number is unlimited. You can implement your most interesting ideas!'
        }
      ]
    },
    pricing: {
      title: 'Our Services',
      services: ['Game Services', 'VDS Servers', 'DDoS Protection'],
      regions: ['Germany', 'Russia'],
      perMonth: 'per month',
      buy: 'Purchase'
    },
    social: {
      title: 'Questions? Need help?',
      subtitle: 'Contact support through any convenient service',
      buttons: ['vkontakte', 'telegram', 'discord']
    },
    footer: {
      main: 'Main',
      mainLinks: ['Home Page', 'Services', 'News', 'Support', 'Control Panel'],
      legal: 'Legal Information',
      legalLinks: ['Terms of Use', 'Privacy Policy'],
      social: 'Social Media',
      socialLinks: ['VKontakte', 'Telegram', 'Discord']
    }
  }
}

export function LandingPageComponent() {
  const [lang, setLang] = useState('ru')
  const [selectedService, setSelectedService] = useState(languages[lang].pricing.services[0])
  const [selectedRegion, setSelectedRegion] = useState(languages[lang].pricing.regions[0])
  const t = languages[lang]

  const plans = [
    {
      name: lang === 'ru' ? 'Бесплатный сервер' : 'Free Server',
      cpu: '125%',
      ram: '2GB DDR4',
      storage: '10GB NVMe',
      price: '0'
    },
    {
      name: 'Eternal (промо)',
      cpu: '150%',
      ram: '3GB DDR4',
      storage: '32GB NVMe',
      price: '49'
    }
  ]

  const toggleLanguage = () => {
    setLang(lang === 'ru' ? 'en' : 'ru')
  }

  return (
    <div className="min-h-screen bg-black text-white">
      {/* Navbar */}
      <nav className="border-b border-white/10">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-16 items-center">
            <div className="flex items-center">
              <a href="#" className="text-2xl font-bold flex items-center">
                <img src="/placeholder.svg?height=32&width=32" alt="Aurorix Logo" className="h-8 w-8 mr-2" />
                Aurorix
              </a>
            </div>
            <div className="hidden md:flex items-center space-x-8">
              {t.nav.map((item, index) => (
                <a key={index} href="#" className="text-gray-300 hover:text-white transition-colors">{item}</a>
              ))}
            </div>
            <div className="flex items-center space-x-4">
              <Button variant="ghost" size="icon" onClick={toggleLanguage}>
                {lang === 'ru' ? '🇷🇺' : '🇬🇧'}
              </Button>
              <Button variant="default">
                {lang === 'ru' ? 'Личный кабинет' : 'Personal Account'}
              </Button>
            </div>
          </div>
        </div>
      </nav>

      {/* Hero Section */}
      <div className="relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-br from-purple-900/20 to-black"></div>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 relative">
          <div className="bg-purple-500/10 absolute top-0 right-0 w-96 h-96 blur-3xl rounded-full"></div>
          <div className="relative">
            <div className="inline-flex items-center space-x-2 bg-white/5 rounded-full px-4 py-2 mb-6">
              <span className="w-2 h-2 bg-purple-500 rounded-full animate-pulse"></span>
              <span className="text-sm">{t.hero.new}</span>
            </div>
            <h1 className="text-5xl md:text-7xl font-bold mb-6">
              {t.hero.title}{' '}
              <span className="bg-gradient-to-r from-purple-400 to-purple-600 text-transparent bg-clip-text">
                {t.hero.titleHighlight}
              </span>
            </h1>
            <p className="text-xl text-gray-400 mb-8 max-w-2xl">
              {t.hero.subtitle}
            </p>
            <Button size="lg" className="animate-pulse">
              {t.hero.cta}
            </Button>
          </div>
        </div>
      </div>

      {/* Features Grid */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
        <h2 className="text-3xl font-bold mb-12 flex items-center justify-center">
          {t.features.title}
          <span className="ml-2">✨</span>
        </h2>
        <div className="grid md:grid-cols-3 gap-8">
          {t.features.list.map((feature, index) => (
            <Card key={index} className="bg-gradient-to-br from-gray-900 to-black border-purple-500/10 hover:border-purple-500/30 transition-all duration-300">
              <CardContent className="p-6">
                <div className="w-12 h-12 bg-purple-500/20 rounded-lg flex items-center justify-center mb-4">
                  {[BoltIcon, ShieldCheckIcon, ServerIcon, HeadphonesIcon, RocketIcon, CogIcon][index]({ className: "w-6 h-6 text-purple-400" })}
                </div>
                <h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
                <p className="text-gray-400">{feature.description}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>

      {/* Pricing Section */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
        <div className="text-center mb-12">
          <h2 className="text-3xl font-bold flex items-center justify-center mb-4">
            {t.pricing.title}
            <span className="ml-2">✨</span>
          </h2>
          <div className="flex justify-center gap-4 mb-8">
            {t.pricing.services.map((service) => (
              <Button
                key={service}
                variant={selectedService === service ? 'default' : 'outline'}
                onClick={() => setSelectedService(service)}
              >
                {service}
              </Button>
            ))}
          </div>
          <div className="flex justify-center gap-4 mb-8">
            {t.pricing.regions.map((region) => (
              <Button
                key={region}
                variant={selectedRegion === region ? 'default' : 'outline'}
                onClick={() => setSelectedRegion(region)}
              >
                {region}
              </Button>
            ))}
          </div>
        </div>
        <div className="space-y-4">
          {plans.map((plan) => (
            <Card key={plan.name} className="bg-gradient-to-r from-gray-900 to-black hover:from-gray-800 hover:to-gray-900 transition-all duration-300">
              <CardContent className="p-6 flex items-center justify-between">
                <div className="flex items-center space-x-6">
                  <div className="w-12 h-12 bg-purple-500/20 rounded-lg flex items-center justify-center">
                    <ServerIcon className="w-6 h-6 text-purple-400" />
                  </div>
                  <div>
                    <h3 className="text-xl font-semibold mb-2">{plan.name}</h3>
                    <div className="flex space-x-4">
                      <span className="text-sm text-gray-400">{plan.cpu} CPU</span>
                      <span className="text-sm text-gray-400">{plan.ram} RAM</span>
                      <span className="text-sm text-gray-400">{plan.storage} NVMe</span>
                    </div>
                  </div>
                </div>
                <div className="flex items-center space-x-4">
                  <div className="text-right">
                    <div className="text-2xl font-bold">{plan.price}₽</div>
                    <div className="text-sm text-gray-400">{t.pricing.perMonth}</div>
                  </div>
                  <Button>{t.pricing.buy}</Button>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>

      {/* Social Links Banner */}
      <div className="relative overflow-hidden py-24">
        <div className="absolute inset-0">
          <img 
            src="https://img.freepik.com/premium-photo/mount-fuji-japan-generative-ai_779468-12363.jpg" 
            alt="Mount Fuji" 
            className="w-full h-full object-cover"
          />
          <div className="absolute inset-0 bg-black/50"></div>
        </div>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
          <h2 className="text-4xl font-bold text-center mb-4">
            {t.social.title}
          </h2>
          <p className="text-gray-300 text-center mb-12">
            {t.social.subtitle}
          </p>
          <div className="flex flex-wrap justify-center gap-4">
            {t.social.buttons.map((social) => (
              <Button key={social} variant="outline" className="bg-black/30 backdrop-blur-sm hover:bg-black/40">
                <div className="w-2 h-2 rounded-full bg-purple-500 mr-2"></div>
                {social}
              </Button>
            ))}
          </div>
        </div>
      </div>

      {/* Footer */}
      <footer className="bg-black border-t border-white/10">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
          <div className="grid grid-cols-2 md:grid-cols-3 gap-8">
            <div>
              <h3 className="text-lg font-semibold mb-4">{t.footer.main}</h3>
              <ul className="space-y-2">
                {t.footer.mainLinks.map((link, index) => (
                  <li key={index}><a href="#" className="text-gray-400 hover:text-white transition-colors">{link}</a></li>
                ))}
              </ul>
            </div>
            <div>
              <h3 className="text-lg font-semibold mb-4">{t.footer.legal}</h3>
              <ul className="space-y-2">
                {t.footer.legalLinks.map((link, index) => (
                  <li key={index}><a href="#" className="text-gray-400 hover:text-white transition-colors">{link}</a></li>
                ))}
              </ul>
            </div>
            <div>
              <h3 className="text-lg font-semibold mb-4">{t.footer.social}</h3>
              <ul className="space-y-2">
                {t.footer.socialLinks.map((link, index) => (
                  <li key={index}><a href="#" className="text-gray-400 hover:text-white transition-colors">{link}</a></li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </footer>
    </div>
  )
}

вот мой tsx файл
вот ошибки: исправь их пожалуйста

[{
	"resource": "/D:/netpclanding/landing/components/landing-page.tsx",
	"owner": "typescript",
	"code": "7053",
	"severity": 8,
	"message": "Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ ru: { nav: string[]; hero: { new: string; title: string; titleHighlight: string; subtitle: string; cta: string; }; features: { title: string; list: { title: string; description: string; }[]; }; pricing: { title: string; services: string[]; regions: string[]; perMonth: string; buy: string; }; social: { ...; }; foot...'.\n  No index signature with a parameter of type 'string' was found on type '{ ru: { nav: string[]; hero: { new: string; title: string; titleHighlight: string; subtitle: string; cta: string; }; features: { title: string; list: { title: string; description: string; }[]; }; pricing: { title: string; services: string[]; regions: string[]; perMonth: string; buy: string; }; social: { ...; }; foot...'.",
	"source": "ts",
	"startLineNumber": 131,
	"startColumn": 58,
	"endLineNumber": 131,
	"endColumn": 73
},{
	"resource": "/D:/netpclanding/landing/components/landing-page.tsx",
	"owner": "typescript",
	"code": "7053",
	"severity": 8,
	"message": "Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ ru: { nav: string[]; hero: { new: string; title: string; titleHighlight: string; subtitle: string; cta: string; }; features: { title: string; list: { title: string; description: string; }[]; }; pricing: { title: string; services: string[]; regions: string[]; perMonth: string; buy: string; }; social: { ...; }; foot...'.\n  No index signature with a parameter of type 'string' was found on type '{ ru: { nav: string[]; hero: { new: string; title: string; titleHighlight: string; subtitle: string; cta: string; }; features: { title: string; list: { title: string; description: string; }[]; }; pricing: { title: string; services: string[]; regions: string[]; perMonth: string; buy: string; }; social: { ...; }; foot...'.",
	"source": "ts",
	"startLineNumber": 132,
	"startColumn": 56,
	"endLineNumber": 132,
	"endColumn": 71
},{
	"resource": "/D:/netpclanding/landing/components/landing-page.tsx",
	"owner": "typescript",
	"code": "7053",
	"severity": 8,
	"message": "Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ ru: { nav: string[]; hero: { new: string; title: string; titleHighlight: string; subtitle: string; cta: string; }; features: { title: string; list: { title: string; description: string; }[]; }; pricing: { title: string; services: string[]; regions: string[]; perMonth: string; buy: string; }; social: { ...; }; foot...'.\n  No index signature with a parameter of type 'string' was found on type '{ ru: { nav: string[]; hero: { new: string; title: string; titleHighlight: string; subtitle: string; cta: string; }; features: { title: string; list: { title: string; description: string; }[]; }; pricing: { title: string; services: string[]; regions: string[]; perMonth: string; buy: string; }; social: { ...; }; foot...'.",
	"source": "ts",
	"startLineNumber": 133,
	"startColumn": 13,
	"endLineNumber": 133,
	"endColumn": 28
},{
	"resource": "/D:/netpclanding/landing/components/landing-page.tsx",
	"owner": "typescript",
	"code": "7006",
	"severity": 8,
	"message": "Parameter 'item' implicitly has an 'any' type.",
	"source": "ts",
	"startLineNumber": 169,
	"startColumn": 27,
	"endLineNumber": 169,
	"endColumn": 31
},{
	"resource": "/D:/netpclanding/landing/components/landing-page.tsx",
	"owner": "typescript",
	"code": "7006",
	"severity": 8,
	"message": "Parameter 'index' implicitly has an 'any' type.",
	"source": "ts",
	"startLineNumber": 169,
	"startColumn": 33,
	"endLineNumber": 169,
	"endColumn": 38
},{
	"resource": "/D:/netpclanding/landing/components/landing-page.tsx",
	"owner": "typescript",
	"code": "7006",
	"severity": 8,
	"message": "Parameter 'feature' implicitly has an 'any' type.",
	"source": "ts",
	"startLineNumber": 218,
	"startColumn": 33,
	"endLineNumber": 218,
	"endColumn": 40
},{
	"resource": "/D:/netpclanding/landing/components/landing-page.tsx",
	"owner": "typescript",
	"code": "7006",
	"severity": 8,
	"message": "Parameter 'index' implicitly has an 'any' type.",
	"source": "ts",
	"startLineNumber": 218,
	"startColumn": 42,
	"endLineNumber": 218,
	"endColumn": 47
},{
	"resource": "/D:/netpclanding/landing/components/landing-page.tsx",
	"owner": "typescript",
	"code": "7006",
	"severity": 8,
	"message": "Parameter 'service' implicitly has an 'any' type.",
	"source": "ts",
	"startLineNumber": 240,
	"startColumn": 38,
	"endLineNumber": 240,
	"endColumn": 45
},{
	"resource": "/D:/netpclanding/landing/components/landing-page.tsx",
	"owner": "typescript",
	"code": "7006",
	"severity": 8,
	"message": "Parameter 'region' implicitly has an 'any' type.",
	"source": "ts",
	"startLineNumber": 251,
	"startColumn": 37,
	"endLineNumber": 251,
	"endColumn": 43
},{
	"resource": "/D:/netpclanding/landing/components/landing-page.tsx",
	"owner": "typescript",
	"code": "7006",
	"severity": 8,
	"message": "Parameter 'social' implicitly has an 'any' type.",
	"source": "ts",
	"startLineNumber": 310,
	"startColumn": 36,
	"endLineNumber": 310,
	"endColumn": 42
},{
	"resource": "/D:/netpclanding/landing/components/landing-page.tsx",
	"owner": "typescript",
	"code": "7006",
	"severity": 8,
	"message": "Parameter 'link' implicitly has an 'any' type.",
	"source": "ts",
	"startLineNumber": 327,
	"startColumn": 42,
	"endLineNumber": 327,
	"endColumn": 46
},{
	"resource": "/D:/netpclanding/landing/components/landing-page.tsx",
	"owner": "typescript",
	"code": "7006",
	"severity": 8,
	"message": "Parameter 'index' implicitly has an 'any' type.",
	"source": "ts",
	"startLineNumber": 327,
	"startColumn": 48,
	"endLineNumber": 327,
	"endColumn": 53
},{
	"resource": "/D:/netpclanding/landing/components/landing-page.tsx",
	"owner": "typescript",
	"code": "7006",
	"severity": 8,
	"message": "Parameter 'link' implicitly has an 'any' type.",
	"source": "ts",
	"startLineNumber": 335,
	"startColumn": 43,
	"endLineNumber": 335,
	"endColumn": 47
},{
	"resource": "/D:/netpclanding/landing/components/landing-page.tsx",
	"owner": "typescript",
	"code": "7006",
	"severity": 8,
	"message": "Parameter 'index' implicitly has an 'any' type.",
	"source": "ts",
	"startLineNumber": 335,
	"startColumn": 49,
	"endLineNumber": 335,
	"endColumn": 54
},{
	"resource": "/D:/netpclanding/landing/components/landing-page.tsx",
	"owner": "typescript",
	"code": "7006",
	"severity": 8,
	"message": "Parameter 'link' implicitly has an 'any' type.",
	"source": "ts",
	"startLineNumber": 343,
	"startColumn": 44,
	"endLineNumber": 343,
	"endColumn": 48
},{
	"resource": "/D:/netpclanding/landing/components/landing-page.tsx",
	"owner": "typescript",
	"code": "7006",
	"severity": 8,
	"message": "Parameter 'index' implicitly has an 'any' type.",
	"source": "ts",
	"startLineNumber": 343,
	"startColumn": 50,
	"endLineNumber": 343,
	"endColumn": 55
}]