"use client";

import React, { useState, useEffect } from 'react';
import { Logo } from '@/components/Logo';
import { FeatureCard } from '@/components/FeatureCard';
import ChatInterface from '@/components/ChatInterface';
import { ScrollToTop } from '@/components/ScrollToTop';
import { LoadingScreen } from '@/components/LoadingScreen';
import { CustomCursor } from '@/components/CustomCursor';
import { ParticleBackground } from '@/components/ParticleBackground';
import { AnimatedCounter } from '@/components/AnimatedCounter';
import { TestimonialSlider } from '@/components/TestimonialSlider';
import { FAQAccordion } from '@/components/FAQAccordion';
import { PartnerLogos } from '@/components/PartnerLogos';
import { ScrollAnimation } from '@/components/ScrollAnimation';
import { CookieBanner } from '@/components/CookieBanner';
import { ProjectModal } from '@/components/ProjectModal';
import { LanguageSwitcher } from '@/components/LanguageSwitcher';
import { NavPage } from '@/types';

// Social Links
const socialLinks = {
  github: "https://github.com/zerosixlab",
  discord: "https://discord.gg/zerosixlab",
  twitter: "https://twitter.com/zerosixlab",
  linkedin: "https://linkedin.com/company/zerosixlab",
  instagram: "https://instagram.com/zerosixlab"
};

// Data
const testimonials = [
  {
    id: 1,
    name: "Ahmet Yılmaz",
    role: "CEO",
    company: "TechStart A.Ş.",
    content: "ZeroSixLab ekibi ile çalışmak muhteşem bir deneyimdi. Projemizi zamanında ve beklentilerimizin üzerinde teslim ettiler. Özellikle yapay zeka entegrasyonları konusundaki uzmanlıkları bizi çok etkiledi.",
    rating: 5
  },
  {
    id: 2,
    name: "Elif Demir",
    role: "CTO",
    company: "FinnoVate",
    content: "Blockchain tabanlı ödeme sistemimizi geliştirirken ZeroSixLab'ın teknik derinliği ve problem çözme yetenekleri sayesinde tüm zorlukları aştık. Kesinlikle tavsiye ediyorum.",
    rating: 5
  },
  {
    id: 3,
    name: "Mehmet Kaya",
    role: "Kurucu",
    company: "GreenEnergy",
    content: "Mobil uygulamamızı ve web panelimizi sıfırdan tasarladılar. Kullanıcı deneyimi odaklı yaklaşımları ve modern teknoloji seçimleri ile projemiz büyük başarı yakaladı.",
    rating: 5
  }
];

const faqItems = [
  {
    question: "Proje geliştirme süreci nasıl işliyor?",
    answer: "Projelerimiz 5 aşamalı bir süreçten geçer: Keşif ve Analiz, Tasarım ve Prototipleme, Geliştirme, Test ve QA, son olarak da Lansman ve Destek. Her aşamada sizinle düzenli iletişim halinde kalarak projenin doğru yönde ilerlediğinden emin oluyoruz."
  },
  {
    question: "Hangi teknolojilerle çalışıyorsunuz?",
    answer: "Modern web teknolojileri (React, Next.js, Vue.js), mobil geliştirme (Flutter, React Native, Swift, Kotlin), backend sistemleri (Node.js, Python, Go, Rust), bulut platformları (AWS, GCP, Azure) ve yapay zeka/makine öğrenmesi (TensorFlow, PyTorch, OpenAI API) dahil geniş bir teknoloji yelpazesiyle çalışıyoruz."
  },
  {
    question: "Proje maliyeti nasıl belirleniyor?",
    answer: "Proje maliyeti; kapsam, karmaşıklık, zaman çizelgesi ve kullanılacak teknolojilere göre belirlenir. Ücretsiz keşif görüşmemizde ihtiyaçlarınızı detaylı analiz ederek size özel bir teklif sunuyoruz. Sabit fiyat veya zaman/materyal bazlı çalışma modellerinden birini tercih edebilirsiniz."
  },
  {
    question: "Proje teslim süreleri ne kadar?",
    answer: "Basit bir web sitesi 2-4 hafta, orta ölçekli bir uygulama 2-3 ay, büyük ölçekli kurumsal projeler ise 4-8 ay sürebilir. MVP (Minimum Uygulanabilir Ürün) yaklaşımıyla hızlı bir şekilde pazara çıkmanızı sağlayabilir, ardından iteratif geliştirmelerle ürününüzü büyütebiliriz."
  },
  {
    question: "Proje sonrası destek sağlıyor musunuz?",
    answer: "Evet! Tüm projelerimize lansman sonrası 3 ay ücretsiz destek sağlıyoruz. Ayrıca uzun vadeli bakım ve geliştirme anlaşmaları, 7/24 teknik destek ve SLA garantili hizmet paketleri sunuyoruz."
  },
  {
    question: "Uzaktan çalışıyor musunuz?",
    answer: "Evet, tamamen uzaktan çalışabiliyoruz. Slack, Notion, Jira gibi modern proje yönetim araçları ve düzenli video görüşmelerle lokasyon fark etmeksizin etkili bir şekilde çalışıyoruz. Ankara'da iseniz yüz yüze toplantılar da düzenleyebiliriz."
  }
];

const partners = [
  { name: "TechCorp" },
  { name: "InnovateTR" },
  { name: "CloudFirst" },
  { name: "DataDriven" },
  { name: "AILabs" },
  { name: "SecureNet" },
  { name: "FinTech+" },
  { name: "SmartCity" }
];

export default function Home() {
  const [currentPage, setCurrentPage] = useState<NavPage>(NavPage.HOME);
  const [scrolled, setScrolled] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [isLoading, setIsLoading] = useState(true);
  const [selectedProject, setSelectedProject] = useState<any>(null);
  const [isProjectModalOpen, setIsProjectModalOpen] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 20);
    };
    window.addEventListener('scroll', handleScroll);
    
    // Loading screen timer
    const loadingTimer = setTimeout(() => setIsLoading(false), 2500);
    
    return () => {
      window.removeEventListener('scroll', handleScroll);
      clearTimeout(loadingTimer);
    };
  }, []);

  const handleNavClick = (page: NavPage) => {
    setCurrentPage(page);
    setIsMobileMenuOpen(false);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const handleProjectClick = (project: any) => {
    setSelectedProject(project);
    setIsProjectModalOpen(true);
  };

  const TechStackMarquee = () => {
    const techs = [
      "REACT", "PYTHON", "AWS", "FLUTTER", "TENSORFLOW", "DOCKER", "KUBERNETES", 
      "NODE.JS", "TYPESCRIPT", "GO", "RUST", "OPENAI", "GEMINI", "POSTGRESQL", 
      "MONGODB", "REDIS", "GRAPHQL", "NEXT.JS", "TAILWINDCSS", "FIGMA", "LINUX", 
      "GIT", "JENKINS", "TERRAFORM", "ANSIBLE", "C++", "C#", "AZURE", 
      "GOOGLE CLOUD", "ANDROID", "IOS", "SOLIDITY", "WEB3", "KAFKA", "ELASTICSEARCH"
    ];
    // Duplicate for seamless loop
    const allTechs = [...techs, ...techs, ...techs];

    return (
      <div className="max-w-[100vw] mt-10 mb-20 border-y border-white/5 py-6 overflow-hidden relative group bg-black/20 backdrop-blur-sm">
        <div className="absolute inset-y-0 left-0 w-20 bg-linear-to-r from-zsl-bg to-transparent z-10"></div>
        <div className="absolute inset-y-0 right-0 w-20 bg-linear-to-l from-zsl-bg to-transparent z-10"></div>
        <div className="flex animate-scroll hover:[animation-play-state:paused] w-max">
           {allTechs.map((tech, index) => (
             <span key={index} className="mx-6 font-mono text-lg font-bold text-slate-600 hover:text-zsl-primary transition-colors cursor-default select-none flex items-center gap-2">
                <span className="w-1.5 h-1.5 bg-zsl-accent/50 rounded-full"></span>
                {tech}
             </span>
           ))}
        </div>
      </div>
    );
  };

  const renderContent = () => {
    switch (currentPage) {
      case NavPage.LAB:
        return (
          <div className="min-h-screen pt-32 px-4 pb-20 max-w-7xl mx-auto animate-in fade-in duration-700">
             <div className="text-center mb-10">
               <h2 className="font-mono text-4xl font-bold text-white mb-4">ZeroSixLab <span className="text-zsl-primary">AI</span></h2>
               <p className="text-zsl-muted">Yapay zeka destekli asistanımız ile projelerinizi tartışın.</p>
             </div>
             <ChatInterface />
          </div>
        );
      
      case NavPage.ABOUT:
        const teamMembers = [
          {
            name: "Şahan Hasret",
            handle: "ROOT_ACCESS",
            role: "Full Stack & Cyber Security",
            color: "primary",
            desc: "Sistemin mimarı. Hem kodu hem güvenliği yöneten ana merkez.",
            stats: { code: 99, security: 100, sleep: 10 }
          },
          {
            name: "Baran Hasret",
            handle: "MECH_MIND",
            role: "Dev & Mechatronics",
            color: "accent",
            desc: "Yazılımı fiziksel dünya ile birleştiren mekatronik uzmanı.",
            stats: { hardware: 95, logic: 98, robotics: 100 }
          },
          {
            name: "Yiğit Demiralp",
            handle: "SYS_ARCHITECT",
            role: "System Engineer",
            color: "primary",
            desc: "Altyapının ve sistemlerin kesintisiz çalışmasını sağlayan mühendis.",
            stats: { uptime: 99, cloud: 95, scale: 90 }
          },
          {
            name: "Sinan Aydın",
            handle: "GATEKEEPER",
            role: "System Engineer",
            color: "accent",
            desc: "Karmaşık sistem ağlarını ve sunucu yapılarını yöneten mimar.",
            stats: { network: 98, devops: 94, latency: 1 }
          },
          {
            name: "Fatma Şahiner",
            handle: "ALGORITHM",
            role: "Software Developer",
            color: "primary",
            desc: "Temiz kod prensipleriyle çalışan güçlü algoritma geliştiricisi.",
            stats: { java: 90, backend: 95, bugs: 0 }
          },
          {
            name: "Mert Karadeniz",
            handle: "PIXEL_MASTER",
            role: "UI/UX Designer",
            color: "accent",
            desc: "Kullanıcı deneyimini piksel piksel mükemmelleştiren tasarımcı.",
            stats: { design: 98, ux: 96, creativity: 100 }
          },
          {
            name: "Ege Yılmaz",
            handle: "DATA_WIZARD",
            role: "Data Engineer",
            color: "primary",
            desc: "Büyük veriyi anlamlı içgörülere dönüştüren veri büyücüsü.",
            stats: { sql: 97, python: 95, ml: 92 }
          },
          {
            name: "Emre Çelik",
            handle: "CLOUD_RUNNER",
            role: "DevOps Engineer",
            color: "accent",
            desc: "CI/CD pipeline'larını ve bulut altyapısını yöneten uzman.",
            stats: { docker: 98, kubernetes: 96, aws: 94 }
          },
          {
            name: "Bedirhan Demirhan",
            handle: "FRONT_LINE",
            role: "Web Developer",
            color: "primary",
            desc: "Modern web teknolojileriyle dinamik arayüzleri inşa eden uzman.",
            stats: { react: 95, css: 100, speed: 90 }
          },
          {
            name: "Murat Dursun",
            handle: "PIXEL_FLOW",
            role: "Web Developer",
            color: "accent",
            desc: "Kullanıcı deneyimini kusursuz koda döken web geliştirici.",
            stats: { ux: 95, code: 92, coffee: 80 }
          },
          {
            name: "Mustafa Çoban",
            handle: "NET_DEFENDER",
            role: "Cyber Security Expert",
            color: "primary",
            desc: "Ağ güvenliği ve sızma testlerinde uzmanlaşmış siber güvenlik kalkanı.",
            stats: { defense: 99, pentest: 98, firewall: 100 }
          }
        ];

        return (
          <div className="min-h-screen pt-32 px-4 pb-20 max-w-7xl mx-auto animate-in slide-in-from-bottom-5 duration-700">
             
             {/* Story Section */}
             <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center mb-32">
                <div className="order-2 md:order-1 space-y-6">
                  <div className="inline-block px-3 py-1 bg-white/5 rounded border border-white/10 text-xs font-mono tracking-widest text-zsl-accent mb-2">BİZ KİMİZ?</div>
                  <h2 className="font-mono text-4xl md:text-5xl font-bold text-white leading-tight">
                    Profesyonel <span className="text-zsl-primary">Mühendislik</span>,<br/>
                    Yaratıcı <span className="text-zsl-accent">Çözümler.</span>
                  </h2>
                  <div className="w-20 h-1 bg-linear-to-r from-zsl-primary to-zsl-accent"></div>
                  <div className="text-zsl-text space-y-4 leading-relaxed text-lg font-light">
                    <p>
                      ZeroSixLab, Ankara merkezli kurulan ancak vizyonu global standartlarda teknoloji üretmek olan yeni nesil bir yazılım ve Ar-Ge merkezidir. Amacımız, karmaşık iş problemlerini en güncel teknolojileri kullanarak yalın, güçlü ve ölçeklenebilir dijital çözümlere dönüştürmektir.
                    </p>
                    <p>
                      Bizim için yazılım geliştirme, sadece kod yazmak değil; yaşayan, gelişen ve değer üreten sistemler kurgulamaktır. Mühendislik disiplinini yaratıcı düşünceyle harmanlayan uzman ekibimiz, her projeye bir laboratuvar titizliğiyle yaklaşır ve operasyonel mükemmelliği hedefler.
                    </p>
                    <p>
                       İsmimizdeki "06", kodlarımızın doğum yeri olan Başkent Ankara'yı ve köklerimizi; "Lab" ise teknolojiyi bir bilim olarak ele alan Ar-Ge yaklaşımımızı simgeler. Müşterilerimizi sadece hizmet verdiğimiz kurumlar olarak değil, dijital geleceği birlikte tasarladığımız stratejik ortaklarımız olarak görüyoruz.
                    </p>
                  </div>
                  
                  {/* Manifesto Grid */}
                  <div className="grid grid-cols-2 gap-4 mt-6">
                    <div className="flex items-center gap-3">
                      <div className="w-2 h-2 bg-zsl-primary rounded-full"></div>
                      <span className="font-mono text-sm text-white">Analitik Yaklaşım</span>
                    </div>
                    <div className="flex items-center gap-3">
                      <div className="w-2 h-2 bg-zsl-accent rounded-full"></div>
                      <span className="font-mono text-sm text-white">Sürekli İnovasyon</span>
                    </div>
                    <div className="flex items-center gap-3">
                      <div className="w-2 h-2 bg-zsl-accent rounded-full"></div>
                      <span className="font-mono text-sm text-white">Yüksek Performans</span>
                    </div>
                    <div className="flex items-center gap-3">
                      <div className="w-2 h-2 bg-zsl-primary rounded-full"></div>
                      <span className="font-mono text-sm text-white">Global Standartlar</span>
                    </div>
                  </div>

                </div>
                <div className="order-1 md:order-2 flex justify-center relative">
                    {/* Holographic Decoration */}
                    <div className="absolute inset-0 bg-zsl-primary/5 rounded-full blur-[100px] animate-pulse-slow"></div>
                    <div className="relative w-96 h-96 rounded-full border-2 border-dashed border-zsl-primary/30 flex items-center justify-center bg-black/40 backdrop-blur-sm">
                        <div className="absolute inset-0 border border-zsl-primary/10 rounded-full animate-[spin_20s_linear_infinite]"></div>
                        <div className="absolute inset-4 border border-zsl-accent/10 rounded-full animate-[spin_15s_linear_infinite_reverse]"></div>
                        <div className="w-72 h-72 rounded-full overflow-hidden border-2 border-zsl-primary/30 shadow-[0_0_30px_rgba(0,212,255,0.3)]">
                          <img 
                            src="/assets/logo.png" 
                            alt="ZeroSixLab" 
                            className="w-full h-full object-cover"
                          />
                        </div>
                    </div>
                </div>
             </div>

             {/* Team Section */}
             <div className="mb-20">
                <div className="text-center mb-16">
                   <h3 className="font-mono text-3xl font-bold text-white mb-2">Uzman Kadromuz</h3>
                   <p className="text-zsl-muted">Projelerinize değer katan mühendis ve geliştiriciler.</p>
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
                   {teamMembers.map((member, idx) => (
                      <div key={idx} className="group relative bg-zsl-card/40 border border-white/5 rounded-xl overflow-hidden hover:border-white/20 transition-all duration-300">
                         {/* Card Header / Avatar Placeholder */}
                         <div className={`h-28 bg-linear-to-b ${member.color === 'primary' ? 'from-zsl-primary/20' : 'from-zsl-accent/20'} to-transparent flex items-center justify-center relative`}>
                            <div className="absolute inset-0 cyber-grid opacity-20"></div>
                            <div className={`w-16 h-16 rounded-lg border-2 ${member.color === 'primary' ? 'border-zsl-primary bg-zsl-primary/20' : 'border-zsl-accent bg-zsl-accent/20'} flex items-center justify-center shadow-[0_0_20px_rgba(0,0,0,0.5)] backdrop-blur-md z-10 group-hover:scale-110 transition-transform duration-300`}>
                               <span className="font-mono text-xl font-bold text-white">{member.name.charAt(0)}</span>
                            </div>
                         </div>
                         
                         {/* Card Body */}
                         <div className="p-4 text-center relative">
                            <div className={`absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 text-[8px] font-mono font-bold px-2 py-0.5 rounded bg-black border ${member.color === 'primary' ? 'border-zsl-primary text-zsl-primary' : 'border-zsl-accent text-zsl-accent'} uppercase tracking-wider whitespace-nowrap`}>
                               {member.handle}
                            </div>
                            
                            <h4 className="text-base font-bold text-white mt-3">{member.name}</h4>
                            <p className="text-zsl-muted text-[8px] font-mono uppercase tracking-widest mb-3">{member.role}</p>
                            <p className="text-slate-400 text-xs mb-4 min-h-10 line-clamp-3">{member.desc}</p>

                            {/* Stats */}
                            <div className="space-y-1.5">
                               {Object.entries(member.stats).map(([key, val]) => (
                                  <div key={key} className="flex items-center gap-1.5 text-[8px] font-mono uppercase text-slate-500">
                                     <span className="w-14 text-right truncate">{key}</span>
                                     <div className="flex-1 h-1 bg-slate-800 rounded-full overflow-hidden">
                                        <div className={`h-full ${member.color === 'primary' ? 'bg-zsl-primary' : 'bg-zsl-accent'}`} style={{ width: `${val}%` }}></div>
                                     </div>
                                     <span className="w-5 text-right text-white">{val}%</span>
                                  </div>
                               ))}
                            </div>
                         </div>
                      </div>
                   ))}
                </div>
             </div>

             {/* Join Community CTA */}
             <div className="rounded-2xl border border-zsl-primary/30 bg-linear-to-r from-zsl-card to-zsl-bg p-12 text-center relative overflow-hidden group">
                <div className="absolute inset-0 cyber-grid opacity-20 animate-grid-move"></div>
                <div className="relative z-10">
                   <h3 className="text-3xl font-mono font-bold text-white mb-4">Geleceği Birlikte Tasarlayalım</h3>
                   <p className="text-zsl-muted max-w-2xl mx-auto mb-8">
                      Projelerimizde yer almak, açık kaynak kütüphanelerimize katkıda bulunmak veya teknoloji üzerine fikir alışverişi yapmak için topluluğumuza katılın.
                   </p>
                   <div className="flex justify-center gap-4">
                      <button className="px-6 py-3 bg-[#5865F2] hover:bg-[#4752C4] text-white font-bold rounded flex items-center gap-2 transition-all hover:scale-105">
                         <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.086 2.157 2.419 0 1.334-.956 2.42-2.157 2.42zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.086 2.157 2.419 0 1.334-.946 2.42-2.157 2.42z"/></svg>
                         Discord
                      </button>
                      <button className="px-6 py-3 bg-[#333] hover:bg-[#222] text-white font-bold rounded flex items-center gap-2 transition-all hover:scale-105 border border-white/20">
                         <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
                         GitHub
                      </button>
                   </div>
                </div>
             </div>
          </div>
        );

      case NavPage.BLOG:
        const blogs = [
          {
             id: 1,
             title: "Sıfır Güven Mimarisi (Zero Trust) Nedir?",
             category: "Security",
             date: "2024.05.15",
             readTime: "5 min read",
             excerpt: "Geleneksel 'kale ve hendek' güvenlik modelleri artık yeterli değil. Modern altyapıda 'asla güvenme, her zaman doğrula' prensibini nasıl uygularsınız?",
             image: "https://images.unsplash.com/photo-1550751827-4bd374c3f58b?q=80&w=2070&auto=format&fit=crop"
          },
          {
             id: 2,
             title: "React 19: Compiler ve Server Actions",
             category: "Frontend",
             date: "2024.05.10",
             readTime: "8 min read",
             excerpt: "React ekosistemindeki en büyük paradigma değişikliği kapıda. useOptimistic, useFormStatus ve otomatik memoization geliştirici deneyimini nasıl değiştirecek?",
             image: "https://images.unsplash.com/photo-1633356122544-f134324a6cee?q=80&w=2070&auto=format&fit=crop"
          },
           {
             id: 3,
             title: "Yapay Zeka ile Kodlama: Dost mu Düşman mı?",
             category: "AI",
             date: "2024.04.28",
             readTime: "6 min read",
             excerpt: "Copilot ve Gemini gibi araçlar junior geliştiricileri işsiz mi bırakacak yoksa onları süper üretken mühendislere mi dönüştürecek?",
             image: "https://images.unsplash.com/photo-1620712943543-bcc4688e7485?q=80&w=1965&auto=format&fit=crop"
          }
        ];

        return (
          <div className="min-h-screen pt-32 px-4 pb-20 max-w-7xl mx-auto animate-in fade-in duration-700">
             {/* Header Terminal Style */}
             <div className="border-b border-white/10 pb-8 mb-12">
               <div className="font-mono text-xs text-zsl-muted mb-2">root@zerosixlab:~/logs$ fetch --latest</div>
               <h2 className="text-4xl md:text-5xl font-mono font-bold text-white mb-4">Lab <span className="text-zsl-primary">Notları</span></h2>
               <p className="text-zsl-muted max-w-2xl text-lg">
                 Teknoloji, yazılım mimarisi ve siber güvenlik üzerine teknik incelemelerimiz ve Ar-Ge çıktılarımız.
               </p>
             </div>

             {/* Featured Post */}
             <div className="mb-16 group cursor-pointer relative rounded-2xl overflow-hidden border border-zsl-primary/20 bg-zsl-card hover:border-zsl-primary/50 transition-all duration-500">
                <div className="absolute inset-0 bg-linear-to-r from-black via-black/80 to-transparent z-10"></div>
                <div className="grid grid-cols-1 md:grid-cols-2">
                   <div className="p-8 md:p-12 relative z-20 flex flex-col justify-center h-full">
                      <div className="flex items-center gap-3 mb-4">
                         <span className="px-2 py-1 bg-zsl-primary/10 border border-zsl-primary/30 text-zsl-primary text-xs font-mono rounded">AI & RESEARCH</span>
                         <span className="text-zsl-muted text-xs font-mono">2024.05.20</span>
                      </div>
                      <h3 className="text-3xl font-bold text-white mb-4 group-hover:text-zsl-primary transition-colors">LLM Modellerini Fine-Tune Etmek: Ankara Veri Seti Deneyimi</h3>
                      <p className="text-slate-400 mb-6 leading-relaxed">
                         Standart dil modelleri genel kültürde iyidir, peki ya yerel mevzuata veya sektörel jargona hakim olmaları gerekirse? Kendi veri setimizi oluştururken öğrendiğimiz 5 kritik ders.
                      </p>
                      <div className="flex items-center gap-2 text-white font-mono text-sm group-hover:translate-x-2 transition-transform">
                         <span>Okumaya Başla</span>
                         <span className="text-zsl-primary">&rarr;</span>
                      </div>
                   </div>
                   <div className="h-64 md:h-auto relative overflow-hidden">
                       <img 
                          src="https://images.unsplash.com/photo-1655720828018-edd2daec9349?q=80&w=2064&auto=format&fit=crop" 
                          alt="AI Neural Network" 
                          className="w-full h-full object-cover opacity-60 group-hover:opacity-100 group-hover:scale-105 transition-all duration-700" 
                       />
                   </div>
                </div>
             </div>

             {/* Blog Grid */}
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                {blogs.map((blog) => (
                  <div key={blog.id} className="group flex flex-col h-full bg-black/20 border border-white/10 rounded-xl overflow-hidden hover:border-zsl-accent/50 hover:bg-zsl-card/40 transition-all duration-300 shadow-lg">
                     <div className="h-52 relative overflow-hidden border-b border-white/5">
                        <img 
                          src={blog.image} 
                          alt={blog.title} 
                          className="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700"
                        />
                        <div className="absolute inset-0 bg-black/40 group-hover:bg-transparent transition-colors duration-300"></div>
                        <div className="absolute top-4 left-4">
                           <span className={`px-2 py-1 text-[10px] font-mono font-bold border rounded uppercase tracking-wider backdrop-blur-md ${
                              blog.category === 'Security' ? 'border-red-500/50 text-red-100 bg-red-900/40' :
                              blog.category === 'Frontend' ? 'border-blue-500/50 text-blue-100 bg-blue-900/40' :
                              'border-purple-500/50 text-purple-100 bg-purple-900/40'
                           }`}>
                              {blog.category}
                           </span>
                        </div>
                     </div>
                     <div className="p-6 flex-1 flex flex-col">
                        <div className="flex justify-between items-center mb-3">
                           <span className="text-xs font-mono text-zsl-muted">{blog.date}</span>
                           <span className="text-xs font-mono text-zsl-muted">{blog.readTime}</span>
                        </div>
                        <h4 className="text-xl font-bold text-white mb-3 group-hover:text-zsl-accent transition-colors">{blog.title}</h4>
                        <p className="text-sm text-slate-400 leading-relaxed mb-6 flex-1">{blog.excerpt}</p>
                        <a href="#" className="inline-flex items-center gap-2 text-xs font-mono font-bold text-white uppercase tracking-widest hover:text-zsl-accent transition-colors">
                           Kaydı İncele <span className="text-lg leading-none">&rsaquo;</span>
                        </a>
                     </div>
                  </div>
                ))}
             </div>
          </div>
        );

      case NavPage.SERVICES:
        return (
          <div className="min-h-screen pt-32 px-4 pb-20 max-w-7xl mx-auto animate-in fade-in duration-700">
             <div className="text-center mb-16 relative">
               <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-white/5 rounded-full blur-3xl -z-10"></div>
               <h2 className="font-mono text-4xl font-bold text-white mb-4">Uzmanlık Alanları</h2>
               <p className="text-zsl-muted text-lg max-w-2xl mx-auto">Biz her işi yapmayız. Sadece en iyi olduğumuz, geleceği şekillendiren teknolojilere odaklanırız.</p>
             </div>

             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <FeatureCard 
                  title="Web & Mobil Geliştirme" 
                  description="React, Node.js ve Flutter ile yüksek performanslı, ölçeklenebilir uygulamalar. Sadece kod yazmıyor, platform inşa ediyoruz." 
                  icon={<svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" /></svg>}
                  accentColor="primary"
                />
                <FeatureCard 
                  title="Özel Yazılım Çözümleri" 
                  description="Şirketinize özel CRM, ERP ve Otomasyon sistemleri. Karmaşık iş süreçlerinizi dijitalleştirip basitleştiriyoruz." 
                  icon={<svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /></svg>}
                  accentColor="accent"
                />
                <FeatureCard 
                  title="AI & Veri Analitiği" 
                  description="Yapay zeka entegrasyonları ile verilerinizi anlamlandırıyor, geleceği tahmin eden algoritmalar geliştiriyoruz." 
                  icon={<svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>}
                  accentColor="primary"
                />
                <FeatureCard 
                  title="UI/UX Tasarım" 
                  description="Kullanıcı odaklı, estetik ve işlevsel arayüzler. Teknolojinin soğuk yüzünü insan dostu tasarımlarla ısıtıyoruz." 
                  icon={<svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>}
                  accentColor="accent"
                />
                <FeatureCard 
                  title="Danışmanlık" 
                  description="Dijital dönüşüm yolculuğunuzda teknik rehberlik. Hangi teknolojiyi nerede kullanmanız gerektiğini analiz ediyoruz." 
                  icon={<svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" /></svg>}
                  accentColor="primary"
                />
                 <FeatureCard 
                  title="Siber Güvenlik" 
                  description="Uygulamalarınızın ve verilerinizin güvenliğini en başından (Shift-Left) tasarlıyoruz." 
                  icon={<svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg>}
                  accentColor="accent"
                />
             </div>
          </div>
        );

      case NavPage.PROJECTS:
        const projects = [
          {
            id: 1,
            title: "NovaCore: Bankacılık Otomasyonu",
            type: "Fintech",
            date: "Q3 2023",
            problem: "Eski sistemlerin yavaşlığı nedeniyle kredi onay süreçlerinin 48 saati bulması.",
            solution: "Mikroservis mimarisi ve AI destekli belge okuma (OCR) modülü geliştirildi.",
            tags: ['Python', 'React', 'AWS', 'TensorFlow', 'PostgreSQL'],
            accent: 'primary',
            image: "https://images.unsplash.com/photo-1611974765270-ca1258634369?q=80&w=2064&auto=format&fit=crop"
          },
          {
            id: 2,
            title: "LogiTrack: Akıllı Lojistik Platformu",
            type: "Logistics",
            date: "Q1 2024",
            problem: "Dağıtım ağındaki araçların rotalama verimsizliği ve yakıt israfı.",
            solution: "Genetik algoritmalarla çalışan dinamik rota optimizasyon motoru.",
            tags: ['Flutter', 'Google Maps API', 'Node.js', 'Redis', 'Docker'],
            accent: 'accent',
            image: "https://images.unsplash.com/photo-1580674285054-bed31e145f59?q=80&w=2070&auto=format&fit=crop"
          },
          {
            id: 3,
            title: "VitalSync: Uzaktan Hasta Takibi",
            type: "HealthTech",
            date: "Q4 2023",
            problem: "Kronik hastaların verilerinin hastaneye anlık ulaşmaması.",
            solution: "IoT entegrasyonlu, uçtan uca şifreli mobil veri toplama sistemi.",
            tags: ['React Native', 'Go', 'Kubernetes', 'Azure', 'WebRTC'],
            accent: 'primary',
            image: "https://images.unsplash.com/photo-1576091160550-217358c7e618?q=80&w=2070&auto=format&fit=crop"
          }
        ];

        return (
          <div className="min-h-screen pt-32 px-4 pb-20 max-w-7xl mx-auto">
             <div className="text-center mb-16">
               <h2 className="font-mono text-4xl font-bold text-white mb-4">Laboratuvar Sonuçları</h2>
               <p className="text-zsl-muted text-lg">Teoriyi pratiğe döktüğümüz gerçek vaka analizleri.</p>
             </div>

             <div className="space-y-16">
                {projects.map((project, index) => (
                   <div key={project.id} className={`bg-zsl-card border border-zsl-primary/20 rounded-2xl overflow-hidden hover:shadow-[0_0_30px_rgba(0,0,0,0.5)] transition-all group ${index % 2 !== 0 ? 'md:flex-row-reverse' : ''} flex flex-col md:flex-row`}>
                      <div className="p-8 md:p-12 space-y-8 flex flex-col justify-center md:w-1/2">
                         <div className="flex items-center gap-2">
                            <span className={`font-mono text-xs tracking-widest uppercase px-2 py-1 rounded border ${project.accent === 'primary' ? 'text-zsl-primary border-zsl-primary/20 bg-zsl-primary/10' : 'text-zsl-accent border-zsl-accent/20 bg-zsl-accent/10'}`}>
                                {project.type}
                            </span>
                            <span className="w-1 h-1 bg-slate-500 rounded-full"></span>
                            <span className="text-slate-400 text-sm font-mono">{project.date}</span>
                         </div>
                         <h3 className={`text-3xl font-mono font-bold text-white group-hover:${project.accent === 'primary' ? 'text-zsl-primary' : 'text-zsl-accent'} transition-colors`}>{project.title}</h3>
                         
                         <div className="space-y-6">
                            <div className="border-l-2 border-slate-700 pl-4">
                               <h4 className="text-slate-400 font-bold text-xs uppercase mb-1 tracking-wider">Sorun</h4>
                               <p className="text-zsl-text text-sm leading-relaxed">{project.problem}</p>
                            </div>
                            <div className={`border-l-2 ${project.accent === 'primary' ? 'border-zsl-primary' : 'border-zsl-accent'} pl-4`}>
                               <h4 className={`${project.accent === 'primary' ? 'text-zsl-primary' : 'text-zsl-accent'} font-bold text-xs uppercase mb-1 tracking-wider`}>Çözüm</h4>
                               <p className="text-white text-sm leading-relaxed">{project.solution}</p>
                            </div>
                         </div>

                         <div className="pt-4 flex gap-3 flex-wrap">
                            {project.tags.map((tag) => (
                              <span key={tag} className="px-3 py-1 bg-slate-800 rounded text-xs text-slate-300 border border-slate-700 hover:border-white hover:text-white transition-colors cursor-default select-none">{tag}</span>
                            ))}
                         </div>
                      </div>
                      
                      {/* Visual Area */}
                      <div className="bg-black/50 relative flex items-center justify-center p-8 md:w-1/2 min-h-75 overflow-hidden">
                          {/* Abstract BG */}
                          <div className={`absolute inset-0 bg-linear-to-br ${project.accent === 'primary' ? 'from-zsl-primary/10' : 'from-zsl-accent/10'} to-transparent opacity-50`}></div>
                          <div className="absolute inset-0 cyber-grid opacity-30"></div>
                          
                          {/* Card Visualization */}
                          <div className="w-full max-w-sm aspect-video bg-zsl-card/90 rounded-lg border border-slate-700 relative overflow-hidden shadow-2xl transform group-hover:scale-105 transition-transform duration-700 flex flex-col">
                             {/* Browser Header */}
                             <div className="h-8 bg-slate-800 flex items-center px-3 gap-2 border-b border-slate-700 z-10 relative">
                                <div className="w-2.5 h-2.5 rounded-full bg-red-500"></div>
                                <div className="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
                                <div className="w-2.5 h-2.5 rounded-full bg-green-500"></div>
                                <div className="ml-2 w-full h-4 bg-slate-700 rounded-full opacity-30"></div>
                             </div>
                             {/* Browser Body with Image */}
                             <div className="flex-1 relative bg-slate-900 group-hover:filter-none filter grayscale transition-all duration-700">
                                <img src={project.image} alt={project.title} className="absolute inset-0 w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity" />
                                <div className="absolute inset-0 bg-linear-to-t from-black/80 to-transparent"></div>
                                
                                {/* Floating Code Snippet Effect Overlay */}
                                <div className="absolute bottom-4 right-4 font-mono text-[8px] text-slate-300 bg-black/60 p-2 rounded border border-slate-600 backdrop-blur-sm shadow-lg">
                                   {`status: "DEPLOYED"\nuptime: "99.9%"`}
                                </div>
                             </div>
                          </div>
                      </div>
                   </div>
                ))}
             </div>
          </div>
        );

      case NavPage.CONTACT:
        return (
          <div className="min-h-screen pt-32 px-4 pb-20 max-w-4xl mx-auto">
             <div className="bg-zsl-card/80 border border-zsl-primary/20 rounded-2xl p-8 md:p-12 shadow-2xl relative overflow-hidden backdrop-blur-xl">
                <div className="absolute top-0 right-0 -mt-10 -mr-10 w-40 h-40 bg-zsl-accent/10 rounded-full blur-3xl"></div>
                <div className="absolute bottom-0 left-0 -mb-10 -ml-10 w-40 h-40 bg-zsl-primary/10 rounded-full blur-3xl"></div>

                <div className="flex items-center gap-4 mb-2">
                   <div className="w-10 h-1 bg-zsl-primary"></div>
                   <h2 className="font-mono text-3xl font-bold text-white">Proje Başlat</h2>
                </div>
                <p className="text-zsl-muted mb-8 pl-14">Fikrinizi gerçeğe dönüştürmek için laboratuvara veri girişi yapın.</p>

                <form className="space-y-6 relative z-10" onSubmit={(e) => e.preventDefault()}>
                   <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                      <div className="space-y-2">
                         <label className="text-xs font-mono text-zsl-primary uppercase tracking-wider">Ad Soyad / Şirket</label>
                         <input type="text" className="w-full bg-black/30 border border-slate-700 rounded-lg px-4 py-3 text-white focus:border-zsl-primary focus:outline-none focus:ring-1 focus:ring-zsl-primary transition-all placeholder-slate-600" placeholder="John Doe" />
                      </div>
                      <div className="space-y-2">
                         <label className="text-xs font-mono text-zsl-primary uppercase tracking-wider">İletişim Kanalı (Email)</label>
                         <input type="email" className="w-full bg-black/30 border border-slate-700 rounded-lg px-4 py-3 text-white focus:border-zsl-primary focus:outline-none focus:ring-1 focus:ring-zsl-primary transition-all placeholder-slate-600" placeholder="ornek@sirket.com" />
                      </div>
                   </div>

                   <div className="space-y-2">
                       <label className="text-xs font-mono text-zsl-primary uppercase tracking-wider">Proje Türü</label>
                       <div className="relative">
                        <select className="w-full bg-black/30 border border-slate-700 rounded-lg px-4 py-3 text-white focus:border-zsl-primary focus:outline-none transition-all appearance-none cursor-pointer">
                            <option>Web Uygulaması</option>
                            <option>Mobil Uygulama</option>
                            <option>Özel Yazılım / Otomasyon</option>
                            <option>Yapay Zeka Entegrasyonu</option>
                            <option>Diğer</option>
                        </select>
                        <div className="absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none text-zsl-primary">▼</div>
                       </div>
                   </div>
                   
                   <div className="space-y-2">
                       <label className="text-xs font-mono text-zsl-primary uppercase tracking-wider">Yatırım Ölçeği (Bütçe)</label>
                       <div className="grid grid-cols-3 gap-4">
                          <button className="border border-slate-700 bg-black/20 rounded-lg py-3 text-sm text-slate-400 hover:border-zsl-primary hover:text-white transition-all">Startup</button>
                          <button className="border border-zsl-accent bg-zsl-accent/10 rounded-lg py-3 text-sm text-zsl-accent font-bold shadow-[0_0_10px_rgba(255,170,0,0.1)]">Growth</button>
                          <button className="border border-slate-700 bg-black/20 rounded-lg py-3 text-sm text-slate-400 hover:border-zsl-primary hover:text-white transition-all">Enterprise</button>
                       </div>
                   </div>

                   <div className="space-y-2">
                      <label className="text-xs font-mono text-zsl-primary uppercase tracking-wider">Proje Detayları</label>
                      <textarea className="w-full bg-black/30 border border-slate-700 rounded-lg px-4 py-3 text-white focus:border-zsl-primary focus:outline-none focus:ring-1 focus:ring-zsl-primary transition-all h-32" placeholder="Hedeflerinizden ve vizyonunuzdan bahsedin..."></textarea>
                   </div>

                   <button className="w-full bg-linear-to-r from-zsl-primary to-blue-600 hover:to-blue-500 text-black font-bold font-mono py-4 rounded-lg transform hover:scale-[1.01] transition-all shadow-[0_0_20px_rgba(0,212,255,0.3)] tracking-widest text-lg">
                      SİNYAL GÖNDER
                   </button>
                </form>
             </div>
          </div>
        );

      case NavPage.HOME:
      default:
        return (
          <div className="pt-24 pb-12 px-4 relative overflow-hidden">
            {/* Cyber Grid Background Effect */}
            <div className="absolute inset-0 cyber-grid animate-grid-move -z-10 opacity-30"></div>
            
            {/* Hero Section */}
            <div className="max-w-7xl mx-auto text-center py-24 relative z-10">
              {/* Background decorative elements */}
              <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-150 h-150 bg-zsl-primary/5 rounded-full blur-[120px] -z-10 animate-pulse-slow"></div>
              
              <div className="inline-flex items-center gap-2 mb-8 px-4 py-1.5 rounded-full bg-zsl-primary/5 border border-zsl-primary/20 backdrop-blur-sm animate-in fade-in slide-in-from-top-4 duration-700">
                <span className="w-2 h-2 rounded-full bg-zsl-primary animate-pulse"></span>
                <span className="text-zsl-primary font-mono text-xs tracking-[0.2em] uppercase">Kodun 0'dan 6'ya Evrimi</span>
              </div>
              
              <h1 className="text-5xl md:text-8xl font-mono font-black text-white mb-6 tracking-tight leading-none animate-in fade-in zoom-in-95 duration-1000">
                GELECEĞİ <br />
                <span className="relative inline-block">
                    <span className="absolute -inset-1 bg-zsl-primary/20 blur-lg filter"></span>
                    <span className="relative text-transparent bg-clip-text bg-linear-to-r from-zsl-primary via-white to-zsl-accent">KODLAYAN</span>
                </span> <br />
                LABORATUVAR
              </h1>
              
              <p className="text-xl text-zsl-muted max-w-2xl mx-auto mb-12 font-light animate-in fade-in slide-in-from-bottom-4 duration-1000 delay-200">
                 ZeroSixLab: Dijital dünyaya Ankara gözüyle bakıyoruz. Karmaşık sorunlara, mantık ve yaratıcılığı birleştiren akıllı çözümler.
              </p>

              <div className="flex flex-col sm:flex-row gap-6 justify-center items-center animate-in fade-in slide-in-from-bottom-8 duration-1000 delay-300">
                <button 
                  onClick={() => handleNavClick(NavPage.PROJECTS)}
                  className="px-8 py-4 bg-zsl-primary text-black font-mono font-bold text-lg rounded hover:bg-white hover:shadow-[0_0_30px_rgba(255,255,255,0.4)] transition-all duration-300 transform hover:-translate-y-1 w-full sm:w-auto"
                >
                  PROJELERİ GÖR
                </button>
                <button 
                   onClick={() => handleNavClick(NavPage.CONTACT)}
                   className="px-8 py-4 bg-transparent border border-zsl-accent text-zsl-accent font-mono font-bold text-lg rounded hover:bg-zsl-accent/10 hover:shadow-[0_0_20px_rgba(255,170,0,0.3)] transition-all duration-300 transform hover:-translate-y-1 w-full sm:w-auto"
                >
                  TEKLİF AL
                </button>
              </div>
            </div>

            <TechStackMarquee />

            {/* Stats Section */}
            <ScrollAnimation animation="fade-up">
              <div className="max-w-7xl mx-auto px-4 mb-20">
                <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
                  <AnimatedCounter 
                    end={50} 
                    suffix="+" 
                    title="Tamamlanan Proje" 
                    icon={<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" /></svg>}
                  />
                  <AnimatedCounter 
                    end={30} 
                    suffix="+" 
                    title="İş Ortağı" 
                    icon={<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg>}
                  />
                  <AnimatedCounter 
                    end={3} 
                    suffix="+" 
                    title="Yıllık Deneyim" 
                    icon={<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>}
                  />
                  <AnimatedCounter 
                    end={99} 
                    suffix="%" 
                    title="Proje Başarı Oranı" 
                    icon={<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /></svg>}
                  />
                </div>
              </div>
            </ScrollAnimation>

            {/* Services Grid Summary */}
            <ScrollAnimation animation="fade-up" delay={100}>
              <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6 mt-10">
                <FeatureCard 
                  title="Bilişsel Sistemler"
                  description="Yüksek hız ve düşük gecikme süresiyle karmaşık akıl yürütme görevlerini işlemek için en yeni LLM'ler."
                  accentColor="primary"
                  icon={(
                    <svg className="w-10 h-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M13 10V3L4 14h7v7l9-11h-7z" />
                    </svg>
                  )}
                />
                <FeatureCard 
                  title="Sınırları Kaldıran Çözümler"
                  description="Fikirden dijitale kusursuz dönüşüm. Web, Mobil ve Bulut tabanlı ölçeklenebilir mimariler."
                  accentColor="accent"
                  icon={(
                    <svg className="w-10 h-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
                    </svg>
                  )}
                />
                <FeatureCard 
                  title="Güvenli Altyapı"
                  description="Kurumsal düzeyde şifreleme ve güvenlik protokolleri ile verileriniz nöral ağımızda güvende."
                  accentColor="primary"
                  icon={(
                    <svg className="w-10 h-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                    </svg>
                  )}
                />
              </div>
            </ScrollAnimation>
            
            <div className="text-center mt-12">
               <button onClick={() => handleNavClick(NavPage.SERVICES)} className="text-zsl-primary hover:text-white font-mono text-sm border-b border-zsl-primary hover:border-white transition-all pb-1 uppercase tracking-wider">Tüm Yetenekleri İncele &rarr;</button>
            </div>

            {/* Testimonials Section */}
            <ScrollAnimation animation="fade-up" delay={200}>
              <div className="max-w-7xl mx-auto px-4 mt-32">
                <div className="text-center mb-12">
                  <span className="inline-block px-3 py-1 bg-white/5 rounded border border-white/10 text-xs font-mono tracking-widest text-zsl-accent mb-4">REFERANSLAR</span>
                  <h2 className="text-3xl md:text-4xl font-mono font-bold text-white">İş Ortaklarımız Ne Diyor?</h2>
                </div>
                <TestimonialSlider testimonials={testimonials} />
              </div>
            </ScrollAnimation>

            {/* Partners Section */}
            <ScrollAnimation animation="fade-up" delay={300}>
              <div className="max-w-7xl mx-auto px-4 mt-32">
                <div className="text-center mb-8">
                  <span className="text-xs font-mono text-zsl-muted uppercase tracking-widest">Güvendikleri markalar</span>
                </div>
                <PartnerLogos partners={partners} />
              </div>
            </ScrollAnimation>

            {/* FAQ Section */}
            <ScrollAnimation animation="fade-up" delay={400}>
              <div className="max-w-7xl mx-auto px-4 mt-32">
                <div className="text-center mb-12">
                  <span className="inline-block px-3 py-1 bg-white/5 rounded border border-white/10 text-xs font-mono tracking-widest text-zsl-accent mb-4">SSS</span>
                  <h2 className="text-3xl md:text-4xl font-mono font-bold text-white mb-4">Sıkça Sorulan Sorular</h2>
                  <p className="text-zsl-muted max-w-2xl mx-auto">Merak ettiklerinizi yanıtladık. Daha fazla sorunuz varsa bizimle iletişime geçmekten çekinmeyin.</p>
                </div>
                <FAQAccordion items={faqItems} />
              </div>
            </ScrollAnimation>
          </div>
        );
    }
  };

  return (
    <div className="min-h-screen bg-zsl-bg text-zsl-text font-sans selection:bg-zsl-primary selection:text-black">
      {/* Loading Screen */}
      {isLoading && <LoadingScreen />}
      
      {/* Custom Cursor */}
      <CustomCursor />
      
      {/* Particle Background */}
      <ParticleBackground />

      {/* Navigation Bar */}
      <nav className={`fixed top-0 left-0 w-full z-50 transition-all duration-300 ${scrolled ? 'bg-zsl-bg/90 backdrop-blur-md shadow-lg border-b border-white/5' : 'bg-transparent'}`}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between h-24">
            <div 
              className="cursor-pointer transition-transform hover:scale-105 z-50"
              onClick={() => handleNavClick(NavPage.HOME)}
            >
              <Logo size="md" />
            </div>
            
            {/* Desktop Menu */}
            <div className="hidden md:flex items-center space-x-1 ml-10">
                {[
                  { page: NavPage.HOME, label: 'ANA SAYFA' },
                  { page: NavPage.SERVICES, label: 'ÇÖZÜMLER' },
                  { page: NavPage.PROJECTS, label: 'LAB SONUÇLARI' },
                  { page: NavPage.BLOG, label: 'LAB NOTLARI' },
                  { page: NavPage.ABOUT, label: 'HİKAYE' },
                  { page: NavPage.LAB, label: 'AI LAB' },
                  { page: NavPage.CONTACT, label: 'BAĞLANTI' }
                ].map((item) => (
                  <button 
                    key={item.page}
                    onClick={() => handleNavClick(item.page)}
                    className={`px-4 py-2 rounded-full text-xs font-mono font-bold tracking-widest transition-all ${
                      currentPage === item.page 
                        ? 'text-white bg-white/10 shadow-[0_0_10px_rgba(255,255,255,0.1)]' 
                        : 'text-slate-400 hover:text-white hover:bg-white/5'
                    }`}
                  >
                    {item.label}
                  </button>
                ))}
            </div>

            {/* Language Switcher */}
            <div className="hidden md:block">
              <LanguageSwitcher />
            </div>

            {/* Mobile Menu Button */}
            <div className="md:hidden z-50">
               <button onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)} className="text-white p-2">
                  {isMobileMenuOpen ? (
                     <svg className="w-8 h-8 text-zsl-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
                  ) : (
                     <svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" /></svg>
                  )}
               </button>
            </div>
          </div>
        </div>

        {/* Mobile Menu Overlay */}
        {isMobileMenuOpen && (
           <div className="md:hidden fixed inset-0 bg-zsl-bg/95 backdrop-blur-xl z-40 flex flex-col items-center justify-center space-y-8 animate-in slide-in-from-top-10">
              {[
                  { page: NavPage.HOME, label: 'ANA SAYFA' },
                  { page: NavPage.SERVICES, label: 'ÇÖZÜMLER' },
                  { page: NavPage.PROJECTS, label: 'LAB SONUÇLARI' },
                  { page: NavPage.BLOG, label: 'LAB NOTLARI' },
                  { page: NavPage.ABOUT, label: 'HİKAYE' },
                  { page: NavPage.LAB, label: 'AI LAB' },
                  { page: NavPage.CONTACT, label: 'BAĞLANTI' }
              ].map((item) => (
                 <button 
                    key={item.page}
                    onClick={() => handleNavClick(item.page)}
                    className={`text-xl font-mono font-bold tracking-widest ${
                       currentPage === item.page 
                       ? 'text-zsl-primary border border-zsl-primary px-6 py-2 rounded shadow-[0_0_15px_rgba(0,212,255,0.3)]' 
                       : 'text-white hover:text-zsl-primary'
                    }`}
                 >
                    {item.label}
                 </button>
              ))}
           </div>
        )}
      </nav>

      {/* Main Content */}
      <main className="relative pt-0 z-10">
         {renderContent()}
      </main>

      {/* Footer */}
      <footer className="border-t border-white/5 bg-[#050B14] py-16 mt-20 relative overflow-hidden z-10">
        <div className="absolute inset-0 cyber-grid opacity-10"></div>
        <div className="max-w-7xl mx-auto px-4 relative z-10">
          {/* Main Footer Content */}
          <div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-12">
            {/* Brand */}
            <div className="md:col-span-1">
              <Logo size="sm" />
              <p className="font-mono text-slate-500 text-sm mt-4 leading-relaxed">
                Ankara merkezli, global vizyonlu yeni nesil yazılım ve Ar-Ge laboratuvarı.
              </p>
            </div>

            {/* Quick Links */}
            <div>
              <h4 className="font-mono text-white font-bold mb-4 text-sm uppercase tracking-wider">Keşfet</h4>
              <ul className="space-y-2">
                {[
                  { label: 'Ana Sayfa', page: NavPage.HOME },
                  { label: 'Çözümler', page: NavPage.SERVICES },
                  { label: 'Projeler', page: NavPage.PROJECTS },
                  { label: 'Hakkımızda', page: NavPage.ABOUT },
                ].map((item) => (
                  <li key={item.label}>
                    <button onClick={() => handleNavClick(item.page)} className="text-slate-500 hover:text-zsl-primary transition-colors text-sm">{item.label}</button>
                  </li>
                ))}
              </ul>
            </div>

            {/* Services */}
            <div>
              <h4 className="font-mono text-white font-bold mb-4 text-sm uppercase tracking-wider">Hizmetler</h4>
              <ul className="space-y-2 text-sm text-slate-500">
                <li>Web Geliştirme</li>
                <li>Mobil Uygulama</li>
                <li>Yapay Zeka Çözümleri</li>
                <li>Blockchain & Web3</li>
              </ul>
            </div>

            {/* Contact & Social */}
            <div>
              <h4 className="font-mono text-white font-bold mb-4 text-sm uppercase tracking-wider">Bize Ulaşın</h4>
              <p className="text-slate-500 text-sm mb-4">info@zerosixlab.com</p>
              <div className="flex gap-3">
                <a href={socialLinks.github} target="_blank" rel="noopener noreferrer" className="w-10 h-10 rounded-lg bg-white/5 border border-white/10 flex items-center justify-center text-slate-500 hover:text-zsl-primary hover:border-zsl-primary/50 transition-all">
                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" /></svg>
                </a>
                <a href={socialLinks.discord} target="_blank" rel="noopener noreferrer" className="w-10 h-10 rounded-lg bg-white/5 border border-white/10 flex items-center justify-center text-slate-500 hover:text-zsl-primary hover:border-zsl-primary/50 transition-all">
                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>
                </a>
                <a href={socialLinks.twitter} target="_blank" rel="noopener noreferrer" className="w-10 h-10 rounded-lg bg-white/5 border border-white/10 flex items-center justify-center text-slate-500 hover:text-zsl-primary hover:border-zsl-primary/50 transition-all">
                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
                </a>
                <a href={socialLinks.linkedin} target="_blank" rel="noopener noreferrer" className="w-10 h-10 rounded-lg bg-white/5 border border-white/10 flex items-center justify-center text-slate-500 hover:text-zsl-primary hover:border-zsl-primary/50 transition-all">
                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
                </a>
                <a href={socialLinks.instagram} target="_blank" rel="noopener noreferrer" className="w-10 h-10 rounded-lg bg-white/5 border border-white/10 flex items-center justify-center text-slate-500 hover:text-zsl-primary hover:border-zsl-primary/50 transition-all">
                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><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>
              </div>
            </div>
          </div>

          {/* Bottom Bar */}
          <div className="pt-8 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-4">
            <p className="font-mono text-slate-500 text-xs text-center md:text-left">
              © 2024 ZeroSixLab. Tüm Hakları Saklıdır.
            </p>
            
            <div className="flex items-center gap-4 border border-white/10 px-4 py-2 rounded bg-black/40">
               <div className="text-right hidden md:block">
                  <div className="text-[10px] text-slate-500 font-mono uppercase tracking-widest">SYSTEM STATUS</div>
                  <div className="text-xs text-green-400 font-mono tracking-wider font-bold">ALL SYSTEMS OPERATIONAL</div>
               </div>
               <div className="w-2 h-2 rounded-full bg-green-500 shadow-[0_0_10px_#00ff00] animate-pulse"></div>
            </div>
          </div>
        </div>
      </footer>

      {/* Scroll To Top Button */}
      <ScrollToTop />

      {/* Cookie Banner */}
      <CookieBanner />

      {/* Project Modal */}
      <ProjectModal 
        project={selectedProject} 
        isOpen={isProjectModalOpen} 
        onClose={() => setIsProjectModalOpen(false)} 
      />
    </div>
  );
};
