[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Geist, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Capital Consul — Международные переводы Турция-Россия", description: "Безопасные международные переводы и сопровождение сделок с недвижимостью между Турцией и Россией. Легальные схемы, персональное сопровождение.", generator: "v0.app", icons: { icon: [ { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)", }, { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)", }, { url: "/icon.svg", type: "image/svg+xml", }, ], apple: "/apple-icon.png", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]jpg:file="public/istanbul-bosphorus-skyline-night.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/istanbul-bosphorus-skyline-night-9dvAo2CO5KjCris5DqtyUU4rUuE9XF.jpg" isMerged="true" [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(0.08 0.015 260); --foreground: oklch(0.98 0 0); --card: oklch(0.12 0.015 260); --card-foreground: oklch(0.98 0 0); --popover: oklch(0.1 0.012 260); --popover-foreground: oklch(0.98 0 0); --primary: oklch(0.72 0.2 160); --primary-foreground: oklch(0.1 0.02 160); --secondary: oklch(0.18 0.02 260); --secondary-foreground: oklch(0.98 0 0); --muted: oklch(0.2 0.015 260); --muted-foreground: oklch(0.55 0.01 260); --accent: oklch(0.72 0.2 160); --accent-foreground: oklch(0.1 0.02 160); --destructive: oklch(0.55 0.22 25); --destructive-foreground: oklch(0.98 0 0); --border: oklch(0.22 0.02 260); --input: oklch(0.16 0.015 260); --ring: oklch(0.72 0.2 160); --chart-1: oklch(0.65 0.19 160); --chart-2: oklch(0.65 0.15 50); --chart-3: oklch(0.45 0.12 200); --chart-4: oklch(0.7 0.14 120); --chart-5: oklch(0.6 0.16 80); --radius: 0.75rem; --sidebar: oklch(0.12 0.01 240); --sidebar-foreground: oklch(0.98 0 0); --sidebar-primary: oklch(0.65 0.19 160); --sidebar-primary-foreground: oklch(0.1 0.01 160); --sidebar-accent: oklch(0.22 0.015 240); --sidebar-accent-foreground: oklch(0.98 0 0); --sidebar-border: oklch(0.25 0.015 240); --sidebar-ring: oklch(0.65 0.19 160); } .dark { --background: oklch(0.08 0.015 260); --foreground: oklch(0.98 0 0); --card: oklch(0.12 0.015 260); --card-foreground: oklch(0.98 0 0); --popover: oklch(0.1 0.012 260); --popover-foreground: oklch(0.98 0 0); --primary: oklch(0.72 0.2 160); --primary-foreground: oklch(0.1 0.02 160); --secondary: oklch(0.18 0.02 260); --secondary-foreground: oklch(0.98 0 0); --muted: oklch(0.2 0.015 260); --muted-foreground: oklch(0.55 0.01 260); --accent: oklch(0.72 0.2 160); --accent-foreground: oklch(0.1 0.02 160); --destructive: oklch(0.55 0.22 25); --destructive-foreground: oklch(0.98 0 0); --border: oklch(0.22 0.02 260); --input: oklch(0.16 0.015 260); --ring: oklch(0.72 0.2 160); --chart-1: oklch(0.65 0.19 160); --chart-2: oklch(0.65 0.15 50); --chart-3: oklch(0.45 0.12 200); --chart-4: oklch(0.7 0.14 120); --chart-5: oklch(0.6 0.16 80); --sidebar: oklch(0.12 0.01 240); --sidebar-foreground: oklch(0.98 0 0); --sidebar-primary: oklch(0.65 0.19 160); --sidebar-primary-foreground: oklch(0.1 0.01 160); --sidebar-accent: oklch(0.22 0.015 240); --sidebar-accent-foreground: oklch(0.98 0 0); --sidebar-border: oklch(0.25 0.015 240); --sidebar-ring: oklch(0.65 0.19 160); } @theme inline { --font-sans: "Geist", "Geist Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } /* Added floating animation for currency badges */ @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } /* Added smooth scrolling */ html { scroll-behavior: smooth; } /* Added custom selection color */ ::selection { background: oklch(0.72 0.2 160 / 0.3); color: oklch(0.98 0 0); } /* Added custom xs breakpoint for very small devices */ @media (min-width: 475px) { .xs\:inline { display: inline; } .xs\:hidden { display: none; } .xs\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useEffect, useRef, useState } from "react" import { ArrowRight, Shield, Globe, FileCheck, Building2, TrendingUp, Users, Send, CheckCircle2, Sparkles, Zap, Lock, Clock, ChevronDown, } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Badge } from "@/components/ui/badge" import { CurrencyCalculator } from "@/components/currency-calculator" function useParallax() { const [scrollY, setScrollY] = useState(0) const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }) useEffect(() => { const handleScroll = () => setScrollY(window.scrollY) const handleMouseMove = (e: MouseEvent) => { setMousePosition({ x: (e.clientX / window.innerWidth - 0.5) * 2, y: (e.clientY / window.innerHeight - 0.5) * 2, }) } window.addEventListener("scroll", handleScroll, { passive: true }) window.addEventListener("mousemove", handleMouseMove, { passive: true }) return () => { window.removeEventListener("scroll", handleScroll) window.removeEventListener("mousemove", handleMouseMove) } }, []) return { scrollY, mousePosition } } function useInView(threshold = 0.1) { const ref = useRef(null) const [isInView, setIsInView] = useState(false) useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setIsInView(true) } }, { threshold }, ) if (ref.current) { observer.observe(ref.current) } return () => observer.disconnect() }, [threshold]) return { ref, isInView } } function AnimatedSection({ children, className = "", delay = 0, }: { children: React.ReactNode className?: string delay?: number }) { const { ref, isInView } = useInView(0.15) return (

{children}

) } function TiltCard({ children, className = "", }: { children: React.ReactNode className?: string }) { const cardRef = useRef(null) const [transform, setTransform] = useState("") const [glare, setGlare] = useState({ x: 50, y: 50 }) const handleMouseMove = (e: React.MouseEvent) => { if (!cardRef.current) return const rect = cardRef.current.getBoundingClientRect() const x = e.clientX - rect.left const y = e.clientY - rect.top const centerX = rect.width / 2 const centerY = rect.height / 2 const rotateX = (y - centerY) / 15 const rotateY = (centerX - x) / 15 setTransform(`perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.02, 1.02, 1.02)`) setGlare({ x: (x / rect.width) * 100, y: (y / rect.height) * 100 }) } const handleMouseLeave = () => { setTransform("perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)") setGlare({ x: 50, y: 50 }) } return (

{/* Glare effect */}

{children}

) } export default function LandingPage() { const { scrollY, mousePosition } = useParallax() return (

Capital Consul

International Transfers

{/* Animated 3D background orbs */}

{/* Animated grid with parallax */}

{/* Floating particles */}

{[...Array(20)].map((_, i) => (

))}

{/* Badge with glow */} Сделки от $20,000 — персональный менеджер 24/7 От $20,000 — менеджер 24/7 {/* Main heading with 3D text effect */}

Международные переводы
Турция ⇄ Россия Турция ⇄ Россия

Безопасно проводим расчёты за недвижимость, бизнес и крупные активы.{" "} Легальные схемы, фиксированный курс и персональное сопровождение.

{/* 3D Stats row */}

{[ { value: "500+", label: "Закрытых сделок", icon: CheckCircle2 }, { value: "$50M+", label: "Проведено переводов", icon: TrendingUp }, { value: "24ч", label: "Средняя скорость", icon: Clock }, { value: "0%", label: "Отказов банков", icon: Shield }, ].map((stat, i) => (

{stat.value}

{stat.label}

))}

{/* CTAs with hover effects */}

{/* Currency badges with floating animation */}

{["TRY", "RUB", "USD", "EUR", "USDT", "USDC"].map((currency, i) => ( {currency} ))}

{/* Currency Calculator below currency badges */}

{/* Scroll indicator with animation */}

Прокрутите вниз

Для кого

Решаем задачи для тех, кто работает
с крупными суммами

{[ { icon: Building2, title: "Покупатели недвижимости", description: "Безопасные расчёты за квартиры и апартаменты. Сопровождение от первого платежа до регистрации права собственности", features: ["Квартиры и апартаменты", "Коммерческая недвижимость", "Земельные участки"], gradient: "from-primary to-emerald-500", }, { icon: TrendingUp, title: "Инвесторы и бизнес", description: "Ввод и вывод капитала между Турцией и Россией. Легальные схемы для бизнес-операций и инвестиций", features: ["Инвестиционные переводы", "Дивиденды и прибыль", "Капитальные вложения"], gradient: "from-emerald-500 to-teal-500", }, { icon: Users, title: "Корпоративные клиенты", description: "Оплата инвойсов, услуг и товаров. Работа с контрактами и полным документальным сопровождением", features: ["Оплата инвойсов", "Торговые операции", "Сервисные контракты"], gradient: "from-teal-500 to-cyan-500", }, ].map((item, index) => (

{item.title}

{item.description}

{item.features.map((feature, i) => (

{feature}

))}

Процесс

Как проходит сделка

Прозрачный процесс от заявки до закрытия

{/* Animated connection line */}

{[ { step: "01", title: "Заявка", description: "Оставляете контакт или пишете в Telegram с описанием задачи", icon: Send, }, { step: "02", title: "Расчёт", description: "Предлагаем схему перевода, фиксируем курс и комиссию", icon: FileCheck, }, { step: "03", title: "Перевод", description: "Проводим перевод с подтверждающими документами", icon: Zap, }, { step: "04", title: "Закрытие", description: "Сопровождаем до регистрации и передачи прав", icon: CheckCircle2, }, ].map((item, index) => (

{item.step}

{item.title}

{item.description}

))}

Преимущества

Почему клиенты
доверяют нам

За годы работы мы выстроили процессы, которые гарантируют безопасность и прозрачность каждой сделки.

{[ { icon: Shield, title: "Легальные схемы", description: "Работа только через банки и регулируемые площадки", }, { icon: Globe, title: "Экспертиза региона", description: "Знаем требования турецких и российских регуляторов", }, { icon: Lock, title: "Прозрачные условия", description: "Курс, комиссия и финальная сумма известны заранее", }, { icon: FileCheck, title: "Полная отчётность", description: "Договор, подтверждения и документы по сделке", }, ].map((item, index) => (

{item.title}

{item.description}

))}

Кейсы

Реальные кейсы клиентов

{[ { tag: "Недвижимость", title: "Квартира в Стамбуле", amount: "€250,000", task: "Клиент из России покупает квартиру, деньги в RUB и USDT", solution: "Схема RUB → USDT → EUR, документы для банка и нотариуса", result: "Перевод за 1 день, сделка закрыта, подтверждения для налоговой", icon: Building2, gradient: "from-primary to-emerald-500", }, { tag: "Бизнес", title: "Вывод капитала", amount: "$500,000", task: "Предприниматель выводит средства для инвестиций в Турции", solution: "Легальная схема с минимизацией комиссий через банки и крипто", result: "Перевод за 3 дня, документы для обеих юрисдикций", icon: TrendingUp, gradient: "from-emerald-500 to-teal-500", }, { tag: "Корпоративный", title: "Регулярные платежи", amount: "$50-80K/мес", task: "Компания ежемесячно оплачивает инвойсы поставщикам", solution: "Постоянный канал с фиксированными условиями", result: "Автоматические переводы, экономия до 15% на комиссиях", icon: Users, gradient: "from-teal-500 to-cyan-500", }, ].map((item, index) => (

{item.tag}

{item.title}

{item.amount}

{[ { label: "Задача", value: item.task }, { label: "Решение", value: item.solution }, { label: "Результат", value: item.result }, ].map((section, i) => (

{section.label}

{section.value}

))}

{/* Geography Section */}

География

Работаем с клиентами из

{[ { country: "Россия", cities: ["Москва", "Санкт-Петербург", "Казань", "Екатеринбург", "Новосибирск"], flag: "🇷🇺", }, { country: "Турция", cities: ["Стамбул", "Анталья", "Аланья", "Анкара", "Измир"], flag: "🇹🇷", }, ].map((item, index) => (

{item.flag}

{item.country}

{item.cities.map((city) => ( {city} ))}

))}

{/* FAQ Section */}

FAQ

Частые вопросы

{[ { q: "Какая минимальная сумма перевода?", a: "Мы работаем с суммами от $20,000. Для меньших сумм рекомендуем банковские переводы напрямую или криптовалютные обменники.", }, { q: "Как быстро проходит перевод?", a: "Стандартный перевод занимает от 24 до 72 часов в зависимости от выбранной схемы и банков-участников. Срочные переводы — от 4 часов.", }, { q: "Какие документы нужны?", a: "Паспорт, подтверждение источника средств (выписка, договор продажи и т.д.), реквизиты получателя. Для юрлиц — учредительные документы.", }, { q: "Это легально?", a: "Да, мы работаем только через легальные каналы: лицензированные банки, регулируемые крипто-площадки, валютные контракты. Все операции документируются.", }, { q: "Какая комиссия?", a: "Комиссия зависит от суммы, валюты и срочности. Обычно от 1% до 3%. Точную комиссию и курс фиксируем до начала перевода.", }, ].map((item, index) => ( {item.q} {item.a} ))}

{/* Contact Section */}

Контакты

Готовы обсудить
вашу задачу?

Оставьте контакт или напишите напрямую в Telegram

</div>
                    <Button
                      type="submit"
                      size="lg"
                      className="w-full h-14 sm:h-16 bg-gradient-to-r from-primary to-emerald-500 hover:opacity-90 text-base sm:text-lg text-primary-foreground shadow-2xl shadow-primary/30 transition-all hover:shadow-primary/50 hover:scale-[1.02]"
                    >
                      Отправить заявку
                    </Button>
                  </form>

<div className="mt-8 sm:mt-10 flex flex-col items-center gap-3 sm:gap-4 pt-8 sm:pt-10 border-t border-border/50">
                    <p className="text-sm sm:text-base text-muted-foreground">Или напишите напрямую:</p>
                    <Button
                      size="lg"
                      variant="outline"
                      className="h-12 sm:h-14 w-full sm:w-auto border-border/50 bg-card/50 px-6 sm:px-8 text-base sm:text-lg gap-2 sm:gap-3 backdrop-blur-sm hover:border-primary/50 hover:bg-primary/10 transition-all hover:scale-105"
                    >
                      <Send className="h-4 w-4 sm:h-5 sm:w-5" />
                      @capitalconsul
                    </Button>
                  </div>
                </CardContent>
              </Card>
            </TiltCard>
          </AnimatedSection>
        </div>
      </section>

{/* Footer */}
      <footer className="border-t border-border/50 bg-card/20 py-12 sm:py-16 backdrop-blur-xl">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="grid gap-8 sm:gap-12 md:grid-cols-2 lg:grid-cols-4">
            <div className="space-y-4">
              <div className="flex items-center gap-2 sm:gap-3">
                <div className="flex h-10 w-10 sm:h-12 sm:w-12 items-center justify-center rounded-lg sm:rounded-xl bg-gradient-to-br from-primary to-emerald-500 shadow-lg">
                  <Sparkles className="h-5 w-5 sm:h-6 sm:w-6 text-primary-foreground" />
                </div>
                <span className="text-lg sm:text-xl font-bold text-foreground">Capital Consul</span>
              </div>
              <p className="text-sm sm:text-base text-muted-foreground">
                Международные переводы между Турцией и Россией
              </p>
            </div>

<div>
              <h3 className="mb-4 text-base sm:text-lg font-semibold text-foreground">Услуги</h3>
              <ul className="space-y-2 sm:space-y-3 text-sm sm:text-base text-muted-foreground">
                <li className="hover:text-primary transition-colors cursor-pointer">Покупка недвижимости</li>
                <li className="hover:text-primary transition-colors cursor-pointer">Инвестиции</li>
                <li className="hover:text-primary transition-colors cursor-pointer">Бизнес-переводы</li>
              </ul>
            </div>

<div>
              <h3 className="mb-4 text-base sm:text-lg font-semibold text-foreground">Валюты</h3>
              <ul className="space-y-2 sm:space-y-3 text-sm sm:text-base text-muted-foreground">
                <li>TRY • RUB</li>
                <li>USD • EUR</li>
                <li>USDT • USDC</li>
              </ul>
            </div>

<div>
              <h3 className="mb-4 text-base sm:text-lg font-semibold text-foreground">Контакты</h3>
              <Button
                variant="outline"
                className="h-10 sm:h-12 w-full sm:w-auto border-border/50 bg-card/50 gap-2 backdrop-blur-sm hover:border-primary/50 hover:bg-primary/10 text-sm sm:text-base"
              >
                <Send className="h-4 w-4" />
                Telegram
              </Button>
            </div>
          </div>

<div className="mt-8 sm:mt-12 border-t border-border/50 pt-6 sm:pt-8 text-center text-xs sm:text-sm text-muted-foreground">
            <p>© 2025 Capital Consul. Все права защищены.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/currency-calculator.tsx" isEdit="true"
"use client"

import { useState, useEffect, useCallback } from "react"
import { ArrowRightLeft, RefreshCw, TrendingUp, MapPin } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Input } from "@/components/ui/input"

type Currency = "USD" | "EUR" | "RUB" | "TRY" | "USDT"

interface Rates {
  [key: string]: number
}

const currencySymbols: Record<Currency, string> = {
  USD: "$",
  EUR: "€",
  RUB: "₽",
  TRY: "₺",
  USDT: "₮",
}

const turkeyLocations = [
  { value: "istanbul", label: "Стамбул" },
  { value: "antalya", label: "Анталья" },
  { value: "ankara", label: "Анкара" },
  { value: "alanya", label: "Алания" },
  { value: "bodrum", label: "Бодрум" },
  { value: "izmir", label: "Измир" },
]

const russiaLocations = [
  { value: "moscow", label: "Москва" },
  { value: "spb", label: "Санкт-Петербург" },
  { value: "sochi", label: "Сочи" },
  { value: "kazan", label: "Казань" },
  { value: "ekb", label: "Екатеринбург" },
  { value: "novosibirsk", label: "Новосибирск" },
]

const MARGIN_PERCENT = 2.5

export function CurrencyCalculator() {
  const [sendAmount, setSendAmount] = useState<string>("10000")
  const [sendCurrency, setSendCurrency] = useState<Currency>("USD")
  const [receiveCurrency, setReceiveCurrency] = useState<Currency>("TRY")
  const [receiveAmount, setReceiveAmount] = useState<string>("")
  const [rates, setRates] = useState<Rates | null>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [lastUpdated, setLastUpdated] = useState<Date | null>(null)
  const [error, setError] = useState<string | null>(null)
  const [sendLocation, setSendLocation] = useState<string>("moscow")
  const [receiveLocation, setReceiveLocation] = useState<string>("istanbul")

const fetchRates = useCallback(async () => {
    setIsLoading(true)
    setError(null)
    try {
      const response = await fetch("https://api.exchangerate-api.com/v4/latest/USD")
      if (!response.ok) {
        throw new Error("Failed to fetch rates")
      }
      const data = await response.json()

const fetchedRates: Rates = {
        USD: 1,
        EUR: data.rates.EUR,
        RUB: data.rates.RUB,
        TRY: data.rates.TRY,
        USDT: 1,
      }

setRates(fetchedRates)
      setLastUpdated(new Date())
    } catch (err) {
      console.error("Error fetching rates:", err)
      setError("Не удалось загрузить курсы")
      setRates({
        USD: 1,
        EUR: 0.92,
        RUB: 89.5,
        TRY: 34.2,
        USDT: 1,
      })
    } finally {
      setIsLoading(false)
    }
  }, [])

useEffect(() => {
    fetchRates()
    const interval = setInterval(fetchRates, 5 * 60 * 1000)
    return () => clearInterval(interval)
  }, [fetchRates])

const getClientRate = useCallback(() => {
    if (!rates) return null
    const baseRate = rates[receiveCurrency] / rates[sendCurrency]
    // Apply negative margin (client gets less favorable rate)
    const clientRate = baseRate * (1 - MARGIN_PERCENT / 100)
    return clientRate
  }, [rates, sendCurrency, receiveCurrency])

useEffect(() => {
    if (!rates || !sendAmount) {
      setReceiveAmount("")
      return
    }

const amount = Number.parseFloat(sendAmount)
    if (isNaN(amount) || amount <= 0) {
      setReceiveAmount("")
      return
    }

const clientRate = getClientRate()
    if (!clientRate) return

const result = amount * clientRate

setReceiveAmount(result.toFixed(2))
  }, [sendAmount, sendCurrency, receiveCurrency, rates, getClientRate])

const swapCurrencies = () => {
    setSendCurrency(receiveCurrency)
    setReceiveCurrency(sendCurrency)
    setSendAmount(receiveAmount)
    const tempLoc = sendLocation
    setSendLocation(receiveLocation)
    setReceiveLocation(tempLoc)
  }

const formatNumber = (num: string) => {
    const n = Number.parseFloat(num)
    if (isNaN(n)) return "0"
    return n.toLocaleString("ru-RU", { maximumFractionDigits: 2 })
  }

const getDisplayRate = () => {
    const rate = getClientRate()
    if (!rate) return null
    return rate.toFixed(4)
  }

const getSendLocations = () => {
    if (sendCurrency === "RUB") return russiaLocations
    if (sendCurrency === "TRY") return turkeyLocations
    return [...russiaLocations, ...turkeyLocations]
  }

const getReceiveLocations = () => {
    if (receiveCurrency === "RUB") return russiaLocations
    if (receiveCurrency === "TRY") return turkeyLocations
    return [...turkeyLocations, ...russiaLocations]
  }

return (
    <div className="relative w-full max-w-2xl mx-auto">
      <div className="absolute inset-0 bg-gradient-to-r from-primary/20 via-emerald-500/10 to-primary/20 blur-3xl opacity-30 rounded-2xl" />

<div className="relative bg-card/60 backdrop-blur-xl border border-border/50 rounded-2xl p-4 sm:p-6 shadow-2xl">
        {/* Header */}
        <div className="flex items-center justify-between mb-4">
          <div className="flex items-center gap-2">
            <TrendingUp className="w-5 h-5 text-primary" />
            <h3 className="text-lg font-bold text-foreground">Калькулятор</h3>
          </div>
          <button
            onClick={fetchRates}
            disabled={isLoading}
            className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-primary transition-colors"
          >
            <RefreshCw className={`w-3.5 h-3.5 ${isLoading ? "animate-spin" : ""}`} />
            {lastUpdated && (
              <span>{lastUpdated.toLocaleTimeString("ru-RU", { hour: "2-digit", minute: "2-digit" })}</span>
            )}
          </button>
        </div>

{error && (
          <div className="mb-3 p-2 rounded-lg bg-destructive/10 border border-destructive/20 text-destructive text-xs">
            {error}
          </div>
        )}

<div className="space-y-3">
          {/* Send Row */}
          <div className="flex flex-col sm:flex-row gap-2">
            <div className="flex-1">
              <label className="text-xs text-muted-foreground mb-1 block">Отдаю</label>
              <Input
                type="number"
                value={sendAmount}
                onChange={(e) => setSendAmount(e.target.value)}
                placeholder="10000"
                className="h-11 text-base font-medium bg-background/50 border-border/50 focus:border-primary"
              />
            </div>
            <div className="w-full sm:w-24">
              <label className="text-xs text-muted-foreground mb-1 block">Валюта</label>
              <Select value={sendCurrency} onValueChange={(v) => setSendCurrency(v as Currency)}>
                <SelectTrigger className="h-11 bg-background/50 border-border/50 font-medium">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="USD">USD $</SelectItem>
                  <SelectItem value="EUR">EUR €</SelectItem>
                  <SelectItem value="RUB">RUB ₽</SelectItem>
                  <SelectItem value="TRY">TRY ₺</SelectItem>
                  <SelectItem value="USDT">USDT</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="w-full sm:w-36">
              <label className="text-xs text-muted-foreground mb-1 flex items-center gap-1">
                <MapPin className="w-3 h-3" /> Откуда
              </label>
              <Select value={sendLocation} onValueChange={setSendLocation}>
                <SelectTrigger className="h-11 bg-background/50 border-border/50 font-medium">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {getSendLocations().map((loc) => (
                    <SelectItem key={loc.value} value={loc.value}>
                      {loc.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </div>

{/* Swap Button & Rate */}
          <div className="flex items-center justify-between py-1">
            <button
              onClick={swapCurrencies}
              className="p-2 rounded-lg bg-primary/10 border border-primary/20 hover:bg-primary/20 transition-colors group"
            >
              <ArrowRightLeft className="w-4 h-4 text-primary group-hover:rotate-180 transition-transform duration-300" />
            </button>
            {rates && (
              <div className="text-xs text-muted-foreground text-right">
                <span>1 {sendCurrency} = </span>
                <span className="text-primary font-semibold">{getDisplayRate()}</span>
                <span> {receiveCurrency}</span>
                <span className="block text-[10px] text-muted-foreground/70">с учётом комиссии {MARGIN_PERCENT}%</span>
              </div>
            )}
          </div>

{/* Receive Row */}
          <div className="flex flex-col sm:flex-row gap-2">
            <div className="flex-1">
              <label className="text-xs text-muted-foreground mb-1 block">Получаю</label>
              <div className="h-11 px-3 flex items-center rounded-md bg-primary/5 border border-primary/20">
                <span className="text-base font-bold text-primary">
                  {receiveAmount ? formatNumber(receiveAmount) : "—"}
                </span>
                <span className="ml-1 text-primary/70">{currencySymbols[receiveCurrency]}</span>
              </div>
            </div>
            <div className="w-full sm:w-24">
              <label className="text-xs text-muted-foreground mb-1 block">Валюта</label>
              <Select value={receiveCurrency} onValueChange={(v) => setReceiveCurrency(v as Currency)}>
                <SelectTrigger className="h-11 bg-background/50 border-border/50 font-medium">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="TRY">TRY ₺</SelectItem>
                  <SelectItem value="RUB">RUB ₽</SelectItem>
                  <SelectItem value="USD">USD $</SelectItem>
                  <SelectItem value="EUR">EUR €</SelectItem>
                  <SelectItem value="USDT">USDT</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="w-full sm:w-36">
              <label className="text-xs text-muted-foreground mb-1 flex items-center gap-1">
                <MapPin className="w-3 h-3" /> Куда
              </label>
              <Select value={receiveLocation} onValueChange={setReceiveLocation}>
                <SelectTrigger className="h-11 bg-background/50 border-border/50 font-medium">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {getReceiveLocations().map((loc) => (
                    <SelectItem key={loc.value} value={loc.value}>
                      {loc.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </div>
        </div>

{/* CTA Button */}
        <Button asChild className="w-full mt-4 h-11 font-semibold bg-primary hover:bg-primary/90 transition-all">
          <a href="https://t.me/capitalconsul" target="_blank" rel="noopener noreferrer">
            Оформить перевод в Telegram
          </a>
        </Button>

{/* Footer Note */}
        <p className="text-[10px] text-muted-foreground text-center mt-3 leading-relaxed">
          Курсы обновляются автоматически. Минимальная сумма перевода — $3,000
        </p>
      </div>
    </div>
  )
}</article></body></html>

Международные переводы Турция ⇄ Россия Турция ⇄ Россия

Решаем задачи для тех, кто работает с крупными суммами

{item.title}

Как проходит сделка

{item.title}

Почему клиенты доверяют нам

{item.title}

Реальные кейсы клиентов

{item.title}

Работаем с клиентами из

{item.country}

Частые вопросы

Готовы обсудить вашу задачу?

Международные переводы
Турция ⇄ Россия Турция ⇄ Россия

Решаем задачи для тех, кто работает
с крупными суммами

Почему клиенты
доверяют нам

Готовы обсудить
вашу задачу?

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This