import React from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Mail, TrendingUp, Users, MapPin, Award, Target, Rocket, Phone, Building2, Globe } from "lucide-react";
import { TelegramIcon, WhatsAppIcon, MaxIcon } from "@/components/MessengerIcons";
import { FinancialTable } from "@/components/FinancialTable";
import { KazakhstanTable } from "@/components/KazakhstanTable";
import { InvestmentTiers } from "@/components/InvestmentTiers";
import { FAQ } from "@/components/FAQ";
import { ROICalculator } from "@/components/ROICalculator";
import { RussiaCostsTable } from "@/components/RussiaCostsTable";
import { StickyHeader } from "@/components/StickyHeader";
import { ScrollProgress } from "@/components/ScrollProgress";
import { MobileAccessibilityEnhancer } from "@/components/MobileAccessibilityEnhancer";
import { LazySection } from "@/components/LazySection";
import { Advantages } from "@/components/Advantages";
import { BestSellers } from "@/components/BestSellers";
import { LazyImage } from "@/components/LazyImage";
import { ResponsiveImage } from "@/components/ResponsiveImage";
import { useIsMobile } from "@/hooks/use-mobile";
import ContactForm from "@/components/ContactForm";
import { FloatingContactButtons } from "@/components/FloatingContactButtons";

import weDrinkHeroMain from "@/assets/wedrink-hero-main.png";
import weDrinkKiosk from "@/assets/wedrink-kiosk.jpg";
import productsAssortment from "@/assets/products-assortment.jpg";
import globalStores from "@/assets/global-stores.png";
import globalBrand from "@/assets/global-brand.png";
import weDrinkStoreFront from "@/assets/wedrink-store-front.png";

const Index = () => {
  const isMobile = useIsMobile();

  // Defer mobile optimizations to avoid blocking main thread
  React.useEffect(() => {
    const optimizeMobile = () => {
      if (isMobile) {
        document.body.style.touchAction = 'manipulation';
        document.body.style.overscrollBehavior = 'contain';
      }
    };

    // Use requestIdleCallback for non-critical optimizations
    if ('requestIdleCallback' in window) {
      requestIdleCallback(optimizeMobile, { timeout: 1000 });
    } else {
      setTimeout(optimizeMobile, 100);
    }
  }, [isMobile]);

  return (
    <div className="min-h-screen bg-background">
      <MobileAccessibilityEnhancer />
      <StickyHeader />
      <FloatingContactButtons />
      
      {/* Hero Section - Optimized Typography */}
      <section id="hero" className="relative overflow-hidden bg-gradient-hero text-white py-10 md:py-14 lg:py-20 px-4">
        <div className="relative max-w-7xl mx-auto grid lg:grid-cols-2 gap-6 lg:gap-10 items-center">
          <div className="space-y-4 lg:space-y-6 text-center lg:text-left">
            <h1 className="font-heading text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold leading-tight tracking-tight">
              WeDrink Russia —<br />
              <span className="text-white/95 font-extrabold">
                новый вкус успеха
              </span>
            </h1>
            <div className="space-y-2">
              <p className="font-body text-base sm:text-lg md:text-xl text-white/95 font-medium max-w-2xl mx-auto lg:mx-0">
                Франшиза bubble tea с ROI 35%
              </p>
              <p className="font-body text-sm sm:text-base text-white/80 max-w-xl mx-auto lg:mx-0">
                50 новых точек в России в первый год
              </p>
            </div>
          </div>
          <div className="flex justify-center lg:justify-end">
            <img 
              src={weDrinkHeroMain} 
              alt="WeDrink - Присоединяйтесь к нам в качестве партнера" 
              className="w-full max-w-sm sm:max-w-md lg:max-w-lg image-rounded gpu-accelerated"
              loading="eager"
              decoding="sync"
            />
          </div>
        </div>
      </section>

      {/* О компании + Глобальный масштаб (объединённые) */}
      <section id="company" className="py-12 px-4 section-alt">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-8">
            <h2 className="font-heading text-3xl md:text-4xl font-bold gradient-text mb-4">О компании-производителе</h2>
            <p className="font-body text-lg text-muted-foreground max-w-4xl mx-auto leading-relaxed">
              Runxiang Catering Company — мировой лидер bubble tea с полным производственным циклом. 
              Проверенная модель с международным признанием в 10+ странах мира.
            </p>
          </div>
          
          <div className="grid lg:grid-cols-3 gap-6 mb-8">
            <Card className="card-vibrant">
              <CardContent className="p-5 text-center">
                <div className="text-3xl font-bold text-primary mb-2">3200+</div>
                <p className="font-body text-sm text-muted-foreground">точек продаж по миру</p>
              </CardContent>
            </Card>
            <Card className="card-vibrant">
              <CardContent className="p-5 text-center">
                <div className="text-3xl font-bold text-primary mb-2">10+</div>
                <p className="font-body text-sm text-muted-foreground">стран присутствия</p>
              </CardContent>
            </Card>
            <Card className="card-vibrant">
              <CardContent className="p-5 text-center">
                <div className="text-3xl font-bold text-primary mb-2">15+</div>
                <p className="font-body text-sm text-muted-foreground">лет в индустрии</p>
              </CardContent>
            </Card>
          </div>

          <div className="grid lg:grid-cols-5 gap-6 items-start">
            <div className="lg:col-span-2 space-y-4">
              <div className="grid grid-cols-2 gap-3">
                <div className="flex items-start space-x-3 p-3 bg-card/50 rounded-lg border border-primary/10">
                  <Award className="h-5 w-5 text-primary mt-0.5 flex-shrink-0" />
                  <div>
                    <h4 className="font-heading font-semibold text-sm mb-0.5">Два ведущих бренда</h4>
                    <p className="font-body text-xs text-muted-foreground">Tea Advocate и WEDRINK</p>
                  </div>
                </div>
                <div className="flex items-start space-x-3 p-3 bg-card/50 rounded-lg border border-primary/10">
                  <MapPin className="h-5 w-5 text-primary mt-0.5 flex-shrink-0" />
                  <div>
                    <h4 className="font-heading font-semibold text-sm mb-0.5">Штаб-квартира</h4>
                    <p className="font-body text-xs text-muted-foreground">Чжэнчжоу, Хэнань, Китай</p>
                  </div>
                </div>
                <div className="flex items-start space-x-3 p-3 bg-card/50 rounded-lg border border-primary/10">
                  <Rocket className="h-5 w-5 text-primary mt-0.5 flex-shrink-0" />
                  <div>
                    <h4 className="font-heading font-semibold text-sm mb-0.5">Глобальная сеть</h4>
                    <p className="font-body text-xs text-muted-foreground">50,000 м² складов</p>
                  </div>
                </div>
                <div className="flex items-start space-x-3 p-3 bg-card/50 rounded-lg border border-primary/10">
                  <Target className="h-5 w-5 text-primary mt-0.5 flex-shrink-0" />
                  <div>
                    <h4 className="font-heading font-semibold text-sm mb-0.5">Полный цикл</h4>
                    <p className="font-body text-xs text-muted-foreground">От сырья до продукта</p>
                  </div>
                </div>
              </div>
            </div>
            <div className="lg:col-span-3 grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div className="overflow-hidden rounded-xl shadow-lg border border-primary/20">
                <img
                  src={globalStores}
                  alt="3200+ магазинов WeDrink по всему миру"
                  className="w-full h-auto object-contain"
                />
              </div>
              <div className="overflow-hidden rounded-xl shadow-lg border border-primary/20">
                <img
                  src={globalBrand}
                  alt="Глобальный бренд WeDrink"
                  className="w-full h-auto object-contain"
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Конкурентные преимущества + Рыночная возможность (объединённые) */}
      <section id="market" className="py-12 px-4 section-gradient">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-8">
            <h2 className="font-heading text-3xl md:text-4xl font-bold gradient-text mb-4">Конкурентные преимущества</h2>
            <p className="font-body text-lg text-muted-foreground max-w-4xl mx-auto leading-relaxed">
              Уникальная цепочка от фермы до чашки. Первый моментум российского рынка bubble tea — идеальное время для входа.
            </p>
          </div>
          
          <div className="grid lg:grid-cols-3 gap-6 items-start">
            {/* Рыночные показатели - теперь в одну строку сверху */}
            <div className="lg:col-span-1 flex flex-col gap-4">
              <Card className="card-vibrant">
                <CardContent className="p-5 text-center">
                  <TrendingUp className="h-6 w-6 text-primary mx-auto mb-2" />
                  <div className="text-2xl md:text-3xl font-bold text-primary mb-1">+25%</div>
                  <p className="font-body text-sm text-muted-foreground">рост рынка ежегодно</p>
                </CardContent>
              </Card>
              <Card className="card-vibrant">
                <CardContent className="p-5 text-center">
                  <Users className="h-6 w-6 text-primary mx-auto mb-2" />
                  <div className="text-2xl md:text-3xl font-bold text-primary mb-1">12-25</div>
                  <p className="font-body text-sm text-muted-foreground">лет — целевая аудитория</p>
                </CardContent>
              </Card>
              <Card className="card-vibrant">
                <CardContent className="p-5 text-center">
                  <Target className="h-6 w-6 text-primary mx-auto mb-2" />
                  <div className="text-2xl md:text-3xl font-bold text-primary mb-1">15M</div>
                  <p className="font-body text-sm text-muted-foreground">потенциальных клиентов</p>
                </CardContent>
              </Card>
            </div>
            
            {/* Правая часть - картинка магазина */}
            <div className="lg:col-span-2">
              <div className="overflow-hidden rounded-xl shadow-lg border border-primary/20">
                <img
                  src={weDrinkStoreFront}
                  alt="Магазин WeDrink - Ice Cream, Tea & Coffee"
                  className="w-full h-auto object-contain"
                />
              </div>
            </div>
          </div>

          {/* Преимущества под основным контентом */}
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-3 mt-6">
            <div className="flex items-start space-x-3 p-3 bg-card/50 rounded-lg border border-primary/10">
              <Award className="h-5 w-5 text-primary flex-shrink-0" />
              <div>
                <h4 className="font-heading font-semibold text-sm">Собственное производство</h4>
                <p className="font-body text-xs text-muted-foreground">Полный контроль качества</p>
              </div>
            </div>
            <div className="flex items-start space-x-3 p-3 bg-card/50 rounded-lg border border-primary/10">
              <TrendingUp className="h-5 w-5 text-primary flex-shrink-0" />
              <div>
                <h4 className="font-heading font-semibold text-sm">Ценовое лидерство</h4>
                <p className="font-body text-xs text-muted-foreground">Цены в 2 раза ниже конкурентов</p>
              </div>
            </div>
            <div className="flex items-start space-x-3 p-3 bg-card/50 rounded-lg border border-primary/10">
              <Rocket className="h-5 w-5 text-primary flex-shrink-0" />
              <div>
                <h4 className="font-heading font-semibold text-sm">Аутентичность</h4>
                <p className="font-body text-xs text-muted-foreground">Оригинальные рецепты</p>
              </div>
            </div>
            <div className="flex items-start space-x-3 p-3 bg-card/50 rounded-lg border border-primary/10">
              <Target className="h-5 w-5 text-primary flex-shrink-0" />
              <div>
                <h4 className="font-heading font-semibold text-sm">Вирусный маркетинг</h4>
                <p className="font-body text-xs text-muted-foreground">Instagram-ready дизайн</p>
              </div>
            </div>
          </div>
        </div>
      </section>


      {/* Преимущества */}
      <LazySection priority="normal">
        <Advantages />
      </LazySection>

      {/* Финансовая модель */}
      <LazySection priority="normal">
        <section id="financial" className="py-16 px-4 section-alt">
          <div className="max-w-7xl mx-auto">
            <div className="text-center mb-12">
              <h2 className="text-4xl font-bold gradient-text mb-4">Экономика точки</h2>
              <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
                Средняя прибыль 1,8 млн рублей в месяц при окупаемости 3-4 месяца
              </p>
            </div>
            <FinancialTable />
          </div>
        </section>
      </LazySection>

      {/* Инвестиционные пакеты */}
      <LazySection priority="normal">
        <section id="investment" className="py-12 px-4 section-gradient">
          <div className="max-w-7xl mx-auto">
            <div className="text-center mb-8">
              <h2 className="text-3xl md:text-4xl font-bold gradient-text mb-4">Инвестиционные пакеты</h2>
            </div>
            <InvestmentTiers />
          </div>
        </section>
      </LazySection>

      {/* Детализация затрат Россия */}
      <LazySection priority="normal">
        <section id="costs-russia" className="py-16 px-4 section-alt">
          <div className="max-w-7xl mx-auto">
            <div className="text-center mb-12">
              <h2 className="text-4xl font-bold gradient-text mb-4">Детализация инвестиций</h2>
              <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
                Полная структура затрат для запуска франшизы в России
              </p>
            </div>
            <RussiaCostsTable />
          </div>
        </section>
      </LazySection>

      {/* ROI Калькулятор */}
      <section id="calculator" className="py-16 px-4 section-vibrant">
        <div className="max-w-4xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-4xl font-bold gradient-text mb-4">Планирование прибыли</h2>
            <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
              Интерактивный расчёт окупаемости с учётом локации и проходимости
            </p>
          </div>
          <ROICalculator />
        </div>
      </section>


      {/* Контакты */}
      <section id="contacts" className="py-16 px-4 section-gradient">
        <div className="max-w-4xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-4xl font-bold gradient-text mb-4">Контакты</h2>
            <p className="text-xl text-muted-foreground">
              Готовы обсудить франшизу? Свяжитесь с нами!
            </p>
          </div>
          
          <div className="grid lg:grid-cols-2 gap-8 max-w-4xl mx-auto">
            {/* Форма обратной связи */}
            <Card className="card-vibrant">
              <CardHeader>
                <CardTitle className="font-heading text-lg md:text-2xl text-center">Оставить заявку</CardTitle>
              </CardHeader>
              <CardContent>
                <ContactForm />
              </CardContent>
            </Card>

            {/* Контактная информация */}
            <Card className="card-accent">
              <CardHeader>
                <CardTitle className="font-heading text-lg md:text-2xl text-center">Свяжитесь с нами</CardTitle>
              </CardHeader>
              <CardContent className="space-y-6">
                {/* Основной телефон */}
                <div className="flex items-center space-x-4">
                  <div className="bg-primary/10 p-3 rounded-xl flex-shrink-0">
                    <Phone className="h-5 w-5 text-primary" />
                  </div>
                  <div>
                    <p className="font-heading font-semibold text-sm md:text-base">Телефон (основной)</p>
                    <a href="tel:+77781666102" className="font-body text-primary hover:underline text-sm md:text-base">+7 778 1666 102</a>
                  </div>
                </div>

                {/* Telegram контакты */}
                <div className="p-4 bg-muted/30 rounded-xl">
                  <div className="flex items-center space-x-2 mb-4">
                    <TelegramIcon className="text-[#0088cc]" size={20} />
                    <p className="font-heading font-bold text-base md:text-lg text-[#0088cc]">Telegram</p>
                  </div>
                  <div className="space-y-3">
                    <div className="flex items-center space-x-3">
                      <a href="https://t.me/wedrink_russia" target="_blank" rel="noopener noreferrer" className="font-body text-sm md:text-base hover:text-[#0088cc] transition-colors">@wedrink_russia (канал)</a>
                    </div>
                    <div className="flex items-center space-x-3">
                      <a href="https://t.me/nicknameastana" target="_blank" rel="noopener noreferrer" className="font-body text-sm md:text-base hover:text-[#0088cc] transition-colors">@nicknameastana</a>
                    </div>
                    <div className="flex items-center space-x-3">
                      <a href="https://t.me/S_Baur" target="_blank" rel="noopener noreferrer" className="font-body text-sm md:text-base hover:text-[#0088cc] transition-colors">@S_Baur</a>
                    </div>
                  </div>
                </div>

                {/* WhatsApp + MAX контакты */}
                <div className="p-4 bg-muted/30 rounded-xl">
                  <div className="flex items-center space-x-3 mb-4">
                    <WhatsAppIcon className="text-[#25D366]" size={20} />
                    <MaxIcon className="text-[#7B68EE]" size={20} />
                    <p className="font-heading font-bold text-base md:text-lg">WhatsApp / MAX</p>
                  </div>
                  <div className="space-y-3">
                    <div className="flex items-center space-x-3">
                      <a href="https://wa.me/77027662803" target="_blank" rel="noopener noreferrer" className="font-body text-sm md:text-base hover:text-[#25D366] transition-colors">+7 702 766 28 03</a>
                    </div>
                    <div className="flex items-center space-x-3">
                      <a href="https://wa.me/77781666102" target="_blank" rel="noopener noreferrer" className="font-body text-sm md:text-base hover:text-[#25D366] transition-colors">+7 778 1666 102</a>
                    </div>
                  </div>
                </div>

                {/* Email */}
                <div className="flex items-center space-x-4">
                  <div className="bg-accent/10 p-3 rounded-xl flex-shrink-0">
                    <Mail className="h-5 w-5 text-accent-foreground" />
                  </div>
                  <div>
                    <p className="font-heading font-semibold text-sm md:text-base">Email</p>
                    <a href="mailto:info@wedrink-russia.ru" className="font-body text-primary hover:underline text-sm md:text-base">info@wedrink-russia.ru</a>
                  </div>
                </div>

                {/* Адрес */}
                <div className="flex items-center space-x-4">
                  <div className="bg-accent/10 p-3 rounded-xl flex-shrink-0">
                    <MapPin className="h-5 w-5 text-accent-foreground" />
                  </div>
                  <div>
                    <p className="font-heading font-semibold text-sm md:text-base">Адрес</p>
                    <p className="font-body text-muted-foreground text-sm md:text-base">г. Новосибирск, ул. Космическая 8</p>
                  </div>
                </div>

                {/* Сайт */}
                <div className="flex items-center space-x-4">
                  <div className="bg-accent/10 p-3 rounded-xl flex-shrink-0">
                    <Globe className="h-5 w-5 text-accent-foreground" />
                  </div>
                  <div>
                    <p className="font-heading font-semibold text-sm md:text-base">Сайт</p>
                    <a href="https://wedrink-russia.ru" target="_blank" rel="noopener noreferrer" className="font-body text-primary hover:underline text-sm md:text-base">wedrink-russia.ru</a>
                  </div>
                </div>

                {/* Юрлицо */}
                <div className="p-4 bg-muted/30 rounded-xl">
                  <div className="flex items-center space-x-2 mb-3">
                    <Building2 className="h-5 w-5 text-muted-foreground" />
                    <p className="font-heading font-bold text-base md:text-lg">Юридическая информация</p>
                  </div>
                  <div className="space-y-2 text-sm">
                    <p><span className="text-muted-foreground">Название:</span> <span className="font-medium">ООО «АльянсСнабСервис»</span></p>
                    <p><span className="text-muted-foreground">ИНН:</span> <span className="font-medium">5404310085</span></p>
                    <p><span className="text-muted-foreground">ОГРН:</span> <span className="font-medium">1225400011319</span></p>
                  </div>
                </div>

                {/* Социальные сети */}
                <div className="p-4 bg-muted/30 rounded-xl">
                  <p className="font-heading font-bold text-base md:text-lg mb-4">Мы в соцсетях</p>
                  <div className="flex flex-wrap gap-3">
                    <a href="https://www.tiktok.com/@wedrink_russia" target="_blank" rel="noopener noreferrer" className="p-2 bg-background hover:bg-muted rounded-lg transition-colors" title="TikTok">
                      <svg className="h-5 w-5" viewBox="0 0 24 24" fill="currentColor"><path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-5.2 1.74 2.89 2.89 0 012.31-4.64 2.93 2.93 0 01.88.13V9.4a6.84 6.84 0 00-1-.05A6.33 6.33 0 005 20.1a6.34 6.34 0 0010.86-4.43v-7a8.16 8.16 0 004.77 1.52v-3.4a4.85 4.85 0 01-1-.1z"/></svg>
                    </a>
                    <a href="https://vk.com/wedrink_russia" target="_blank" rel="noopener noreferrer" className="p-2 bg-background hover:bg-muted rounded-lg transition-colors" title="VK">
                      <svg className="h-5 w-5 text-[#0077FF]" viewBox="0 0 24 24" fill="currentColor"><path d="M15.07 2H8.93C3.33 2 2 3.33 2 8.93v6.14C2 20.67 3.33 22 8.93 22h6.14C20.67 22 22 20.67 22 15.07V8.93C22 3.33 20.67 2 15.07 2zm3.08 14.27h-1.46c-.55 0-.72-.44-1.71-1.44-1-.97-1.44-1.1-1.68-1.1-.34 0-.43.1-.43.56v1.31c0 .4-.12.63-1.16.63-1.71 0-3.61-.99-4.95-2.83-2.01-2.88-2.56-5.04-2.56-5.49 0-.24.1-.46.56-.46h1.46c.42 0 .58.19.74.63.82 2.37 2.18 4.45 2.74 4.45.21 0 .31-.1.31-.63V9.3c-.07-1.06-.62-1.15-.62-1.53 0-.19.16-.38.42-.38h2.3c.36 0 .48.19.48.6v3.33c0 .36.16.48.26.48.21 0 .39-.12.77-.51 1.2-1.34 2.05-3.41 2.05-3.41.11-.24.3-.46.72-.46h1.46c.44 0 .54.23.44.55-.19.87-2.01 3.44-2.01 3.44-.16.26-.22.38 0 .67.16.21.68.67 1.03 1.07.64.75 1.14 1.38 1.27 1.82.14.44-.08.67-.52.67z"/></svg>
                    </a>
                    <a href="https://www.instagram.com/wedrink_nsk" target="_blank" rel="noopener noreferrer" className="p-2 bg-background hover:bg-muted rounded-lg transition-colors" title="Instagram">
                      <svg className="h-5 w-5 text-[#E4405F]" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
                    </a>
                    <a href="https://www.youtube.com/@WEDRINK_Russia" target="_blank" rel="noopener noreferrer" className="p-2 bg-background hover:bg-muted rounded-lg transition-colors" title="YouTube">
                      <svg className="h-5 w-5 text-[#FF0000]" viewBox="0 0 24 24" fill="currentColor"><path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
                    </a>
                    <a href="https://t.me/wedrink_russia" target="_blank" rel="noopener noreferrer" className="p-2 bg-background hover:bg-muted rounded-lg transition-colors" title="Telegram">
                      <TelegramIcon className="text-[#0088cc]" size={20} />
                    </a>
                    <a href="https://dzen.ru/wedrinkrussia" target="_blank" rel="noopener noreferrer" className="p-2 bg-background hover:bg-muted rounded-lg transition-colors" title="Яндекс Дзен">
                      <svg className="h-5 w-5 text-[#FF6600]" viewBox="0 0 24 24" fill="currentColor"><path d="M24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12zm-12-.003c-3.267 0-6.134 2.013-6.599 5.003h13.198c-.465-2.99-3.332-5.003-6.599-5.003zm0-.994c3.267 0 6.134-2.013 6.599-5.003H5.401c.465 2.99 3.332 5.003 6.599 5.003z"/></svg>
                    </a>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>
    </div>
  );
};

export default Index;