"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import FaqBase from '@/components/sections/faq/FaqBase';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { BarChart3, TrendingUp, Shield, BookOpen, Brain, GraduationCap, Eye, Gamepad2, MessageCircle, Zap, BookMarked, AlertCircle, DollarSign, Lightbulb, Activity, Scale, Target, PieChart, Layers, HelpCircle, Sparkles } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="largeSizeMediumTitles"
      background="fluid"
      cardStyle="glass-elevated"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Trade Koçu"
          navItems={[
            { name: "Özellikler", id: "features" },
            { name: "Piyasa", id: "market" },
            { name: "Eğitim", id: "education" },
            { name: "Demo Arena", id: "demo" },
            { name: "Fiyatlandırma", id: "pricing" }
          ]}
          button={{ text: "Premium'a Geç", href: "#pricing" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboard
          logoText="Trade Koçu"
          description="Piyasayı daha bilinçli takip edin. Riskini daha iyi yönet. İşlem psikolojini geliştir. Disiplinli trader alışkanlığı oluştur."
          buttons={[
            { text: "Hemen Keşfet", href: "#features" },
            { text: "Eğitime Başla", href: "#education" }
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "animated-grid" }}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BB0kJ1gAhmqi1pGXt8YmGLnrJV/a-modern-premium-fintech-trading-dashboa-1773947440954-2475aa31.png"
          imageAlt="Trade Koçu Premium Fintech Dashboard"
          mediaAnimation="opacity"
          frameStyle="browser"
          ariaLabel="Trade Koçu Hero Section"
        />
      </div>

      <div id="disclaimer" data-section="disclaimer">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "Yasal Uyarı" }
          ]}
          buttons={[]}
          buttonAnimation="none"
          useInvertedBackground={false}
          ariaLabel="Legal Disclaimer Section"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureBorderGlow
          title="Kapsamlı Fintech Eğitim Platformu"
          description="Trade Koçu, yatırım dünyasını öğrenmeniz, piyasa verilerini sadeleştirerek görmek, risk yönetimi bilinci kazanmanız ve disiplinli trader alışkanlığı geliştirmeniz için tasarlanmıştır."
          tag="10 Ana Özellik"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          features={[
            { icon: BarChart3, title: "Piyasa Genel Bakış", description: "Canlı veri akışı ve piyasa trendleri" },
            { icon: TrendingUp, title: "Varlık Analizi", description: "Derinlemesine teknik ve temel analiz" },
            { icon: Shield, title: "Risk Hesaplayıcı", description: "Riskinizi ölçün ve yönetin" },
            { icon: BookOpen, title: "Trade Günlüğü", description: "İşlemlerinizi kaydedin ve analiz edin" },
            { icon: Brain, title: "Psikoloji Koçu", description: "Duygusal disiplin ve trader mindset" },
            { icon: GraduationCap, title: "Eğitim Merkezi", description: "Kapsamlı finans eğitim kaynakları" },
            { icon: Eye, title: "Watchlist", description: "Varlıklarınızı izleyin ve takip edin" },
            { icon: Gamepad2, title: "Demo Trade Arena", description: "Gerçek para riskı olmadan pratik yapın" },
            { icon: MessageCircle, title: "AI Soru-Cevap", description: "Yapay zeka destekli öğrenme asistanı" },
            { icon: Zap, title: "Premium Analizler", description: "Gelişmiş veri ve detaylı raporlar" }
          ]}
          animationType="slide-up"
          buttons={[
            { text: "Tüm Özellikler", href: "#features" }
          ]}
          buttonAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          carouselMode="auto"
          ariaLabel="Features Section"
        />
      </div>

      <div id="market" data-section="market">
        <ProductCardFour
          title="Piyasa Genel Bakış"
          description="Başlıca varlıkların gerçek zamanlı fiyat ve performans verilerini izleyin. Piyasayı bilinçli bir şekilde takip edin."
          tag="Canlı Veri"
          tagIcon={Activity}
          tagAnimation="slide-up"
          products={[
            { id: "btc", name: "Bitcoin", price: "$47,250", variant: "+2.5%", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BB0kJ1gAhmqi1pGXt8YmGLnrJV/bitcoin-symbol-and-price-ticker-in-a-pre-1773947440794-18718abf.png", imageAlt: "Bitcoin Price" },
            { id: "eth", name: "Ethereum", price: "$2,890", variant: "+1.8%", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BB0kJ1gAhmqi1pGXt8YmGLnrJV/ethereum-symbol-and-price-representation-1773947439904-65673902.png", imageAlt: "Ethereum Price" },
            { id: "gold", name: "Altın", price: "$2,045/oz", variant: "+0.3%", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BB0kJ1gAhmqi1pGXt8YmGLnrJV/gold-commodity-price-chart-representatio-1773947442187-f439e88b.png", imageAlt: "Gold Price" },
            { id: "usd", name: "US Dolar", price: "1.00", variant: "-0.1%", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BB0kJ1gAhmqi1pGXt8YmGLnrJV/us-dollar-currency-symbol-and-value-repr-1773947440338-05176e82.png", imageAlt: "USD Exchange" },
            { id: "eur", name: "Euro", price: "1.09", variant: "+0.2%", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BB0kJ1gAhmqi1pGXt8YmGLnrJV/euro-currency-symbol-and-exchange-rate-i-1773947440918-be70a453.png", imageAlt: "EUR Exchange" }
          ]}
          gridVariant="asymmetric-60-wide-40-narrow"
          animationType="slide-up"
          buttons={[]}
          buttonAnimation="none"
          textboxLayout="default"
          useInvertedBackground={false}
          ariaLabel="Market Overview Section"
        />
      </div>

      <div id="education" data-section="education">
        <FeatureBorderGlow
          title="Eğitim ve Farkındalık Merkezi"
          description="Yatırım dünyasını adım adım öğrenin. Teknik analiz, risk yönetimi, trading psikolojisi ve daha fazlasını kapsayan kapsamlı kurslar."
          tag="8 Ana Konu"
          tagIcon={BookMarked}
          tagAnimation="slide-up"
          features={[
            { icon: TrendingUp, title: "Teknik Analiz", description: "Grafikleri oku, desenleri tanı, trend belirle" },
            { icon: Shield, title: "Risk Yönetimi", description: "Sermayeni koru, oran hesapla, plan yap" },
            { icon: Brain, title: "Trading Psikolojisi", description: "Duygularını kontrol et, disiplin geliştir" },
            { icon: BarChart3, title: "Piyasa Davranışı", description: "Piyasa dinamiklerini ve eğilimlerini anla" },
            { icon: Lightbulb, title: "Stratejiler", description: "Kanıtlanmış trading stratejileri öğren" },
            { icon: AlertCircle, title: "Yaygın Hatalar", description: "Başlangıç hatalarından kaçın, deneyimden öğren" },
            { icon: DollarSign, title: "Finansal Okuryazarlık", description: "Para ve yatırımın temellerini anla" },
            { icon: BookOpen, title: "Yatırım Temelleri", description: "Hisse senedi, tahvil, kripto ve daha fazlası" }
          ]}
          animationType="slide-up"
          buttons={[
            { text: "Eğitime Başla", href: "#education" }
          ]}
          buttonAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          carouselMode="auto"
          ariaLabel="Education Hub Section"
        />
      </div>

      <div id="risk-management" data-section="risk-management">
        <MetricCardThree
          title="Risk Yönetimi Kültürü"
          description="Disiplinli risk yönetimi, başarılı trading'in temelidir. Sermayeni koru, uzun vadeli başarıyı hedefle."
          tag="Temel Prensipler"
          tagIcon={Shield}
          tagAnimation="slide-up"
          metrics={[
            { id: "capital-preservation", icon: TrendingUp, title: "Sermaye Koruma", value: "Birinci Kural" },
            { id: "risk-reward", icon: Scale, title: "Risk/Ödül Oranı", value: "1:2 En Az" },
            { id: "stop-discipline", icon: Target, title: "Stop Disiplini", value: "Her İşlemde" },
            { id: "position-sizing", icon: PieChart, title: "Pozisyon Boyutlandırması", value: "Risk Yönetimi" },
            { id: "portfolio-diversification", icon: Layers, title: "Portföy Çeşitliliği", value: "Gerekli" },
            { id: "emotional-control", icon: Brain, title: "Duygusal Kontrol", value: "Çok Önemli" }
          ]}
          animationType="slide-up"
          buttons={[]}
          buttonAnimation="none"
          textboxLayout="default"
          useInvertedBackground={false}
          carouselMode="auto"
          ariaLabel="Risk Management Section"
        />
      </div>

      <div id="psychology" data-section="psychology">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "Trading Psikolojisi: Başarının Gizli Anahtarı" }
          ]}
          buttons={[]}
          buttonAnimation="none"
          useInvertedBackground={false}
          ariaLabel="Trading Psychology Section"
        />
      </div>

      <div id="demo-arena" data-section="demo-arena">
        <ProductCardFour
          title="Demo Trade Arena - Gerçek Para Riski Olmadan Pratik Yapın"
          description="100.000 sanal bakiye ile işlem yapın. Seviyeleri tamamla, görevleri başar, rozetler kazan. Yalnızca eğitim ve simülasyon amaçlıdır. Yatırım tavsiyesi içermez."
          tag="Eğitim Alanı"
          tagIcon={Gamepad2}
          tagAnimation="slide-up"
          products={[
            { id: "demo-btc", name: "Bitcoin Trade", price: "BTC", variant: "Başla", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BB0kJ1gAhmqi1pGXt8YmGLnrJV/virtual-trading-arena-and-demo-platform--1773947441352-29d68c4a.png?_wi=1", imageAlt: "Bitcoin Trading Demo" },
            { id: "demo-eth", name: "Ethereum Trade", price: "ETH", variant: "Başla", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BB0kJ1gAhmqi1pGXt8YmGLnrJV/virtual-trading-arena-and-demo-platform--1773947441352-29d68c4a.png?_wi=2", imageAlt: "Ethereum Trading Demo" },
            { id: "demo-sol", name: "Solana Trade", price: "SOL", variant: "Başla", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BB0kJ1gAhmqi1pGXt8YmGLnrJV/virtual-trading-arena-and-demo-platform--1773947441352-29d68c4a.png?_wi=3", imageAlt: "Solana Trading Demo" },
            { id: "demo-bnb", name: "Binance Coin Trade", price: "BNB", variant: "Başla", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BB0kJ1gAhmqi1pGXt8YmGLnrJV/virtual-trading-arena-and-demo-platform--1773947441352-29d68c4a.png?_wi=4", imageAlt: "BNB Trading Demo" }
          ]}
          gridVariant="two-columns-alternating-heights"
          animationType="scale-rotate"
          buttons={[]}
          buttonAnimation="none"
          textboxLayout="default"
          useInvertedBackground={false}
          ariaLabel="Demo Trading Arena Section"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardNine
          title="Premium Planlar"
          description="Gelişmiş özellikler ve sınırsız erişim. Eğitim ve gelişiminiz için gereken tüm araçları alın."
          tag="Fiyatlandırma"
          tagIcon={Zap}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          plans={[
            {
              id: "monthly",              title: "Aylık Plan",              price: "₺99",              period: "/ay",              features: [
                "Tüm temel özellikler",                "Gelişmiş analiz araçları",                "Detaylı psikoloji raporu",                "Sınırsız AI soru-cevap",                "Özel eğitim içeriği",                "Premium rozet sistemi"
              ],
              button: { text: "Aylık Başla", href: "#" }
            },
            {
              id: "yearly",              title: "Yıllık Plan",              price: "₺890",              period: "/yıl",              features: [
                "Tüm aylık plan özellikleri",                "%25 tasarruf etme",                "Öncelikli destek",                "Eksklusif webinar erişimi",                "Aylık stratejist raporu",                "VIP rozet sistemi"
              ],
              button: { text: "Yıllık Başla", href: "#" }
            }
          ]}
          animationType="slide-up"
          buttons={[]}
          buttonAnimation="none"
          ariaLabel="Premium Pricing Section"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Sıkça Sorulan Sorular"
          description="Trade Koçu hakkında merak ettiğiniz her şeyi öğrenin."
          tag="Sorular"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          faqs={[
            {
              id: "faq-1",              title: "Trade Koçu yatırım tavsiyesi veriyor mu?",              content: "Hayır, Trade Koçu yalnızca eğitim ve bilgilendirme amaçlıdır. Yatırım tavsiyesi vermez. Tüm kararlar tamamen size aittir ve risk sizin."
            },
            {
              id: "faq-2",              title: "Trade Koçu kimler için uygun?",              content: "Yatırım dünyasına ilgi duyan, risk yönetimini öğrenmek isteyenler, trading psikolojisini geliştirmek isteyenler ve disiplinli trader alışkanlığı geliştirmek isteyen herkese uygundur."
            },
            {
              id: "faq-3",              title: "Premium üyelikte neler açılıyor?",              content: "Premium üyelikte gelişmiş analiz, detaylı psikoloji raporları, sınırsız AI soru-cevap, özel eğitim içerikleri, daha detaylı dashboard ve premium rozetler açılıyor."
            },
            {
              id: "faq-4",              title: "Demo Trade Arena gerçek para ile mi çalışıyor?",              content: "Hayır. Demo Trade Arena tamamen simülasyon amaçlıdır. 100.000 sanal bakiye ile pratik yaparsınız. Gerçek para yatırımı içermez ve hiçbir gerçek işlem yapılmaz."
            },
            {
              id: "faq-5",              title: "Piyasa verileri nasıl sunuluyor?",              content: "Piyasa verileri profesyonel finans kaynaklarından alınır. Bazı veriler canlı olabilir, bazıları gecikmeli olabilir. Her veri kendi durum etiketi ile gösterilir."
            },
            {
              id: "faq-6",              title: "Yeni başlayanlar için uygun mu?",              content: "Evet, Trade Koçu özellikle yeni başlayanlar için tasarlanmıştır. Temel kavramlardan başlayarak ileri konulara doğru ilerleyen kapsamlı bir eğitim programı sunarız."
            }
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="slide-up"
          animationType="smooth"
          showCard={true}
          ariaLabel="FAQ Section"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Trade Koçu"
          columns={[
            {
              items: [
                { label: "Özellikler", href: "#features" },
                { label: "Piyasa", href: "#market" },
                { label: "Eğitim", href: "#education" },
                { label: "Demo Arena", href: "#demo-arena" }
              ]
            },
            {
              items: [
                { label: "Fiyatlandırma", href: "#pricing" },
                { label: "Hakkımızda", href: "#about" },
                { label: "İletişim", href: "#contact" },
                { label: "Blog", href: "#" }
              ]
            },
            {
              items: [
                { label: "Kullanım Şartları", href: "#" },
                { label: "Gizlilik Politikası", href: "#" },
                { label: "Yasal Uyarı", href: "#" },
                { label: "Riskler", href: "#" }
              ]
            },
            {
              items: [
                { label: "Twitter", href: "https://twitter.com" },
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "YouTube", href: "https://youtube.com" },
                { label: "Discord", href: "https://discord.com" }
              ]
            }
          ]}
          ariaLabel="Site Footer"
        />
      </div>
    </ThemeProvider>
  );
}