"use client";

import React, { useState, useEffect, useRef } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { 
  ArrowUpRight, 
  CheckCircle, 
  TrendingUp, 
  Leaf, 
  Zap, 
  BarChart3, 
  Globe, 
  Cpu, 
  Coins, 
  Shield, 
  Mail, 
  Phone, 
  MapPin, 
  Calendar, 
  Menu,
  X
} from "lucide-react";
import LenisProvider from "@/components/LenisProvider";
import NoiseOverlay from "@/components/NoiseOverlay";
import GridBackground from "@/components/GridBackground";
import Preloader from "@/components/Preloader";

// CUSTOM METRICS ANIMATION COMPONENT
function AnimatedMetric({ value, label, prefix = "", suffix = "" }: { value: number; label: string; prefix?: string; suffix?: string }) {
  const [count, setCount] = useState(0);
  const elementRef = useRef<HTMLDivElement>(null);
  const [hasIntersections, setHasIntersections] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setHasIntersections(true);
        }
      },
      { threshold: 0.1 }
    );

    if (elementRef.current) {
      observer.observe(elementRef.current);
    }

    return () => observer.disconnect();
  }, []);

  useEffect(() => {
    if (!hasIntersections) return;

    let start = 0;
    const end = value;
    const duration = 2000; // 2 seconds
    const increment = end / (duration / 16); // ~60fps

    const timer = setInterval(() => {
      start += increment;
      if (start >= end) {
        clearInterval(timer);
        setCount(end);
      } else {
        setCount(Math.floor(start));
      }
    }, 16);

    return () => clearInterval(timer);
  }, [hasIntersections, value]);

  return (
    <div ref={elementRef} className="glass-panel border-glow-emerald rounded-2xl p-8 flex flex-col items-center text-center relative group overflow-hidden">
      <div className="absolute inset-0 bg-gradient-to-br from-accent-emerald/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
      <span className="font-space text-4xl lg:text-5xl font-extrabold text-accent-emerald tracking-tight mb-2 group-hover:scale-105 transition-transform duration-300">
        {prefix}{count.toLocaleString("tr-TR")}{suffix}
      </span>
      <span className="font-outfit text-xs text-text-secondary tracking-widest uppercase font-medium">
        {label}
      </span>
    </div>
  );
}

export default function Home() {
  const [preloaderComplete, setPreloaderComplete] = useState(false);
  const [activeTab, setActiveTab] = useState<"eng" | "grants">("eng");
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [contactSuccess, setContactSuccess] = useState(false);
  
  // Ref for mouse movement parallax on energy core
  const coreRef = useRef<HTMLDivElement>(null);
  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      if (!coreRef.current) return;
      const { left, top, width, height } = coreRef.current.getBoundingClientRect();
      const x = (e.clientX - left - width / 2) / (width / 2);
      const y = (e.clientY - top - height / 2) / (height / 2);
      setMousePos({ x, y });
    };

    window.addEventListener("mousemove", handleMouseMove);
    return () => window.removeEventListener("mousemove", handleMouseMove);
  }, []);

  return (
    <LenisProvider>
      <NoiseOverlay />
      
      {/* 1. CINEMATIC PRELOADER */}
      <Preloader onComplete={() => setPreloaderComplete(true)} />

      {/* DYNAMIC CONSOLE/DEMO BANNER */}
      <div className="fixed top-0 left-0 right-0 h-1 bg-gradient-to-r from-accent-cyan via-accent-emerald to-accent-cyan z-[9999]" />
      
      <AnimatePresence>
        {preloaderComplete && (
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 1.2, ease: [0.16, 1, 0.3, 1] }}
            className="relative flex flex-col w-full min-h-screen"
          >
            {/* BACKGROUND ATMOSPHERE */}
            <GridBackground />

            {/* FLOATING NAVIGATION & CONCEPT BADGE */}
            <header className="sticky top-0 w-full z-50 transition-all duration-300">
              <div className="max-w-7xl mx-auto px-6 py-4">
                <div className="glass-panel border-glow-emerald rounded-2xl px-6 py-3 flex items-center justify-between">
                  <a href="#hero" className="flex items-center gap-3">
                    <div className="w-5 h-5 border border-accent-emerald flex items-center justify-center rounded-sm bg-accent-emerald/10">
                      <div className="w-2 h-2 bg-accent-emerald rounded-full animate-ping" />
                    </div>
                    <span className="font-space text-lg font-bold tracking-[0.25em] text-text-primary">
                      SCENE<span className="text-accent-emerald">RJİ</span>
                    </span>
                  </a>

                  {/* Desktop Nav Links */}
                  <nav className="hidden md:flex items-center gap-8 text-xs font-space tracking-wider uppercase">
                    <a href="#tanitin" className="text-text-secondary hover:text-accent-emerald transition-colors">Bizi Tanıyın</a>
                    <a href="#cozumler" className="text-text-secondary hover:text-accent-emerald transition-colors">Çözümlerimiz</a>
                    <a href="#projeler" className="text-text-secondary hover:text-accent-emerald transition-colors">Projeler</a>
                    <a href="#anlayis" className="text-text-secondary hover:text-accent-emerald transition-colors">Hizmet Anlayışı</a>
                    <a href="#iletisim" className="text-text-secondary hover:text-accent-emerald transition-colors">İletişim</a>
                  </nav>

                  {/* Navigation CTA */}
                  <div className="hidden md:flex items-center gap-4">
                    <span className="text-[10px] font-mono text-text-dim px-2.5 py-1 border border-text-dim/20 rounded-md">
                      TEŞVİK OPTİMİZASYON PORTALI
                    </span>
                    <a 
                      href="#iletisim" 
                      className="px-4 py-2 bg-accent-emerald text-bg-primary text-xs font-space font-semibold tracking-wider uppercase rounded-xl hover:bg-white hover:scale-[1.03] active:scale-[0.98] transition-all duration-200 cursor-pointer shadow-lg shadow-accent-emerald/10"
                    >
                      TEŞVİK ANALİZİ
                    </a>
                  </div>

                  {/* Mobile menu trigger */}
                  <button 
                    onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
                    className="md:hidden text-text-primary p-1 hover:text-accent-emerald transition-colors"
                  >
                    {mobileMenuOpen ? <X size={20} /> : <Menu size={20} />}
                  </button>
                </div>
              </div>

              {/* Mobile Drawer menu */}
              <AnimatePresence>
                {mobileMenuOpen && (
                  <motion.div
                    initial={{ opacity: 0, height: 0 }}
                    animate={{ opacity: 1, height: "auto" }}
                    exit={{ opacity: 0, height: 0 }}
                    className="md:hidden w-full px-6 absolute top-full left-0 z-50"
                  >
                    <div className="glass-panel border-glow-emerald rounded-2xl p-6 flex flex-col gap-4 text-sm font-space tracking-wider uppercase mt-2">
                      <a href="#tanitin" onClick={() => setMobileMenuOpen(false)} className="text-text-secondary hover:text-accent-emerald py-2 border-b border-white/5">Bizi Tanıyın</a>
                      <a href="#cozumler" onClick={() => setMobileMenuOpen(false)} className="text-text-secondary hover:text-accent-emerald py-2 border-b border-white/5">Çözümlerimiz</a>
                      <a href="#projeler" onClick={() => setMobileMenuOpen(false)} className="text-text-secondary hover:text-accent-emerald py-2 border-b border-white/5">Projeler</a>
                      <a href="#anlayis" onClick={() => setMobileMenuOpen(false)} className="text-text-secondary hover:text-accent-emerald py-2 border-b border-white/5">Hizmet Anlayışı</a>
                      <a href="#iletisim" onClick={() => setMobileMenuOpen(false)} className="text-text-secondary hover:text-accent-emerald py-2">İletişim</a>
                      <a 
                        href="#iletisim"
                        onClick={() => setMobileMenuOpen(false)}
                        className="w-full text-center py-3 bg-accent-emerald text-bg-primary font-bold rounded-xl mt-2 block"
                      >
                        TEŞVİK ANALİZİ
                      </a>
                    </div>
                  </motion.div>
                )}
              </AnimatePresence>
            </header>

            {/* CONCEPT BANNER */}
            <div className="w-full flex justify-center px-6 relative z-10">
              <div className="glass-panel border-glow-cyan text-[11px] font-mono text-accent-cyan tracking-wider px-6 py-2 rounded-full uppercase flex items-center gap-3">
                <span className="w-1.5 h-1.5 bg-accent-cyan rounded-full animate-pulse" />
                BU SİTE SCENERJİ İÇİN HAZIRLANMIŞ ÖZEL BİR KONSEPT DEMODUR — AYRIS TECH
              </div>
            </div>

            {/* 2. HERO SECTION */}
            <section id="hero" className="w-full min-h-[90vh] flex items-center py-20 px-6 relative z-10">
              <div className="max-w-7xl mx-auto w-full grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
                
                {/* Sol Kolon - Başlık & Açıklama */}
                <div className="lg:col-span-7 flex flex-col items-start text-left">
                  <div className="glass-panel border-glow-emerald rounded-full px-4 py-1.5 text-[10px] font-mono text-accent-emerald uppercase tracking-widest mb-6 flex items-center gap-2">
                    <Leaf size={12} className="animate-pulse" />
                    KARBON NÖTR MÜHENDİSLİK TEKNOLOJİLERİ
                  </div>
                  
                  <h1 className="font-space text-5xl sm:text-6xl xl:text-7xl font-extrabold tracking-tight leading-[0.95] text-text-primary mb-8 glow-text-emerald">
                    YEŞİL DÖNÜŞÜMÜN <br />
                    <span className="text-transparent bg-clip-text bg-gradient-to-r from-accent-cyan via-accent-emerald to-accent-emerald">
                      MÜHENDİSLİK AKLI.
                    </span>
                  </h1>
                  
                  <p className="font-outfit text-base md:text-lg text-text-secondary leading-relaxed max-w-xl mb-10">
                    Scenerji, endüstriyel tesislerin dekarbonizasyon süreçlerini, ileri seviye enerji mühendisliği ve stratejik yeşil dönüşüm teşvikleriyle birleştirerek sürdürülebilirliği yüksek karlılığa dönüştürür.
                  </p>

                  <div className="flex flex-col sm:flex-row gap-4 w-full sm:w-auto">
                    <a 
                      href="#cozumler"
                      className="px-8 py-4 bg-accent-emerald text-bg-primary font-space font-semibold text-xs tracking-widest uppercase rounded-xl hover:bg-white transition-all duration-300 flex items-center justify-center gap-2 cursor-pointer shadow-lg shadow-accent-emerald/10 group"
                    >
                      Çözümlerimizi İnceleyin
                      <ArrowUpRight size={14} className="group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform" />
                    </a>
                    <a 
                      href="#iletisim"
                      className="px-8 py-4 bg-bg-secondary hover:bg-bg-tertiary text-text-primary border border-white/5 hover:border-accent-emerald/30 font-space font-semibold text-xs tracking-widest uppercase rounded-xl transition-all duration-300 flex items-center justify-center gap-2 cursor-pointer"
                    >
                      Bize Ulaşın
                    </a>
                  </div>

                  {/* Core Features Mini Badges */}
                  <div className="grid grid-cols-3 gap-6 mt-16 border-t border-white/5 pt-8 w-full max-w-lg">
                    <div className="flex flex-col">
                      <span className="font-space text-lg font-bold text-accent-cyan mb-1">%100</span>
                      <span className="font-outfit text-[10px] text-text-dim tracking-wider uppercase">VERİ ODAKLI</span>
                    </div>
                    <div className="flex flex-col">
                      <span className="font-space text-lg font-bold text-accent-emerald mb-1">MİLYONLARCA €</span>
                      <span className="font-outfit text-[10px] text-text-dim tracking-wider uppercase">KAZANILAN TEŞVİK</span>
                    </div>
                    <div className="flex flex-col">
                      <span className="font-space text-lg font-bold text-text-primary mb-1">Sıfır</span>
                      <span className="font-outfit text-[10px] text-text-dim tracking-wider uppercase">RİSK ANALİZİ</span>
                    </div>
                  </div>
                </div>

                {/* Sağ Kolon - Dynamic Core Animation */}
                <div className="lg:col-span-5 flex justify-center relative">
                  {/* Decorative glowing backdrops */}
                  <div className="absolute w-72 h-72 bg-accent-emerald/10 rounded-full blur-[80px] pointer-events-none" />
                  
                  {/* Outer Orbit Container */}
                  <div 
                    ref={coreRef}
                    className="relative w-80 h-80 sm:w-96 sm:h-96 glass-panel border-glow-emerald rounded-full flex items-center justify-center transition-all duration-300 cursor-grab active:cursor-grabbing"
                    style={{
                      transform: `perspective(1000px) rotateY(${mousePos.x * 12}deg) rotateX(${-mousePos.y * 12}deg)`,
                    }}
                  >
                    {/* Glowing Energy Core SVG */}
                    <svg className="w-48 h-48 md:w-56 md:h-56 animate-spin-slow text-accent-emerald" viewBox="0 0 100 100">
                      {/* Orbital Tracks */}
                      <circle cx="50" cy="50" r="40" stroke="currentColor" strokeWidth="0.25" strokeDasharray="3 3" fill="none" opacity="0.4" />
                      <circle cx="50" cy="50" r="30" stroke="currentColor" strokeWidth="0.25" fill="none" opacity="0.2" />
                      <circle cx="50" cy="50" r="20" stroke="currentColor" strokeWidth="0.5" strokeDasharray="10 5" fill="none" opacity="0.6" />
                      
                      {/* Interactive Particle Nodes */}
                      <circle cx="50" cy="10" r="1.5" fill="currentColor" />
                      <circle cx="50" cy="90" r="1.5" fill="currentColor" />
                      <circle cx="10" cy="50" r="1.5" fill="currentColor" />
                      <circle cx="90" cy="50" r="1.5" fill="currentColor" />
                      
                      {/* Connecting Grid Lines */}
                      <line x1="50" y1="10" x2="50" y2="90" stroke="currentColor" strokeWidth="0.2" opacity="0.3" />
                      <line x1="10" y1="50" x2="90" y2="50" stroke="currentColor" strokeWidth="0.2" opacity="0.3" />
                      <line x1="20" y1="20" x2="80" y2="80" stroke="currentColor" strokeWidth="0.15" opacity="0.2" />
                      <line x1="80" y1="20" x2="20" y2="80" stroke="currentColor" strokeWidth="0.15" opacity="0.2" />

                      {/* Central core energy cell */}
                      <circle cx="50" cy="50" r="6" fill="url(#coreGradient)" />
                      <defs>
                        <radialGradient id="coreGradient">
                          <stop offset="0%" stopColor="#00f2fe" />
                          <stop offset="60%" stopColor="#0df293" />
                          <stop offset="100%" stopColor="#0df293" stopOpacity="0" />
                        </radialGradient>
                      </defs>
                    </svg>

                    {/* Surrounding UI metrics cards inside orbital frame */}
                    <div className="absolute -top-4 right-2 glass-panel border-glow-cyan rounded-xl p-3 flex flex-col gap-1 shadow-xl animate-float">
                      <span className="font-mono text-[9px] text-accent-cyan font-bold tracking-wider">CO₂ EMİSYONU</span>
                      <span className="font-space text-sm font-extrabold text-text-primary">-45.2%</span>
                    </div>

                    <div className="absolute bottom-6 -left-4 glass-panel border-glow-emerald rounded-xl p-3 flex flex-col gap-1 shadow-xl animate-float" style={{ animationDelay: "3s" }}>
                      <span className="font-mono text-[9px] text-accent-emerald font-bold tracking-wider">MÜHENDİSLİK VERİMİ</span>
                      <span className="font-space text-sm font-extrabold text-text-primary">COP 4.8</span>
                    </div>
                  </div>
                </div>

              </div>
            </section>

            {/* 3. DOUBLE MARQUEE FLOW */}
            <section className="w-full overflow-hidden border-y border-white/5 py-6 bg-bg-secondary/40 relative z-10">
              {/* Marquee 1 (Left to Right) */}
              <div className="flex whitespace-nowrap overflow-hidden py-2 select-none">
                <div className="inline-flex animate-[marquee_40s_linear_infinite] gap-12 font-space text-lg font-bold tracking-[0.2em] text-text-secondary/20 uppercase">
                  <span>YEŞİL DÖNÜŞÜM DANIŞMANLIĞI •</span>
                  <span className="text-accent-emerald">DEKARBONİZASYON •</span>
                  <span>SANAYİ TEŞVİKLERİ •</span>
                  <span className="text-accent-cyan">SOLAR ENERJİ SİSTEMLERİ •</span>
                  <span>ENERJİ VERİMLİLİĞİ •</span>
                  <span className="text-accent-emerald">MÜHENDİSLİK •</span>
                  <span>KOJENERASYON SİSTEMLERİ •</span>
                </div>
                <div className="inline-flex animate-[marquee_40s_linear_infinite] gap-12 font-space text-lg font-bold tracking-[0.2em] text-text-secondary/20 uppercase" aria-hidden="true">
                  <span>YEŞİL DÖNÜŞÜM DANIŞMANLIĞI •</span>
                  <span className="text-accent-emerald">DEKARBONİZASYON •</span>
                  <span>SANAYİ TEŞVİKLERİ •</span>
                  <span className="text-accent-cyan">SOLAR ENERJİ SİSTEMLERİ •</span>
                  <span>ENERJİ VERİMLİLİĞİ •</span>
                  <span className="text-accent-emerald">MÜHENDİSLİK •</span>
                  <span>KOJENERASYON SİSTEMLERİ •</span>
                </div>
              </div>

              {/* Marquee 2 (Right to Left) */}
              <div className="flex whitespace-nowrap overflow-hidden py-2 border-t border-white/5 select-none">
                <div className="inline-flex animate-[marquee-reverse_35s_linear_infinite] gap-12 font-space text-sm font-medium tracking-[0.25em] text-text-dim/15 uppercase">
                  <span>KOSGEB YEŞİL DÖNÜŞÜM •</span>
                  <span>TÜBİTAK 1831 YEŞİL DESTEK •</span>
                  <span className="text-accent-cyan">IPARD DANIŞMANLIĞI •</span>
                  <span>ISO 50001 BELGELENDİRME •</span>
                  <span className="text-accent-emerald">ISO 14064 KARBON RAPORU •</span>
                  <span>SINIRDA KARBON VERGİSİ DANIŞMANLIĞI •</span>
                </div>
                <div className="inline-flex animate-[marquee-reverse_35s_linear_infinite] gap-12 font-space text-sm font-medium tracking-[0.25em] text-text-dim/15 uppercase" aria-hidden="true">
                  <span>KOSGEB YEŞİL DÖNÜŞÜM •</span>
                  <span>TÜBİTAK 1831 YEŞİL DESTEK •</span>
                  <span className="text-accent-cyan">IPARD DANIŞMANLIĞI •</span>
                  <span>ISO 50001 BELGELENDİRME •</span>
                  <span className="text-accent-emerald">ISO 14064 KARBON RAPORU •</span>
                  <span>SINIRDA KARBON VERGİSİ DANIŞMANLIĞI •</span>
                </div>
              </div>
            </section>

            {/* Custom styles for marquee loop animations */}
            <style jsx>{`
              @keyframes marquee {
                0% { transform: translateX(0%); }
                100% { transform: translateX(-100%); }
              }
              @keyframes marquee-reverse {
                0% { transform: translateX(-100%); }
                100% { transform: translateX(0%); }
              }
            `}</style>

            {/* 4. ABOUT & VISION/MISSION SECTION */}
            <section id="tanitin" className="w-full py-32 px-6 relative z-10 border-b border-white/5">
              <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-16 xl:gap-24 items-center">
                
                {/* Sol - Detaylı Bizi Tanıyın ve Vizyon */}
                <div className="lg:col-span-7 flex flex-col items-start">
                  <div className="glass-panel border-glow-cyan rounded-full px-4 py-1.5 text-[10px] font-mono text-accent-cyan uppercase tracking-widest mb-6">
                    BİZİ TANIYIN
                  </div>
                  
                  <h2 className="font-space text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight mb-8">
                    Geleceğin Enerji Yapısını <br />
                    <span className="text-accent-cyan">Bugünden Tasarlıyoruz.</span>
                  </h2>

                  <p className="font-outfit text-base text-text-secondary leading-relaxed mb-6">
                    Scenerji, vizyoner mühendisler ve sürdürülebilirlik uzmanları tarafından kurulmuş, yüksek donanımlı butik bir mühendislik ve yeşil dönüşüm danışmanlık firmasıdır. Amacımız, endüstriyel tesislerin yüksek maliyetli enerji yükümlülüklerini en yeni teknolojiler ve devlet hibeleri yardımıyla karlı bir yatırıma dönüştürmektir.
                  </p>

                  <p className="font-outfit text-base text-text-secondary leading-relaxed mb-10">
                    Klasik bir danışmanlıktan farklı olarak; fizik, matematik, ileri mühendislik hesaplamaları ve derin hibe/teşvik mekanizmaları bilgisini harmanlıyoruz. Tesislerin enerji tüketim profilini çıkartarak karbon ayak izlerini minimize ederken, hibe fonlarını maksimum düzeyde kullanmalarını sağlıyoruz.
                  </p>

                  {/* Asymmetrical Vision & Mission layout */}
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full border-t border-white/5 pt-8">
                    <div className="flex flex-col gap-3">
                      <span className="font-space text-sm font-bold text-accent-emerald uppercase tracking-wider">
                        VİZYONUMUZ
                      </span>
                      <p className="font-outfit text-xs text-text-secondary leading-relaxed">
                        Türkiye ve küresel pazarda sanayi tesislerinin sıfır emisyon hedeflerine ulaşmasında, en güvenilir ve veri odaklı dekarbonizasyon mühendislik lideri olmak.
                      </p>
                    </div>
                    <div className="flex flex-col gap-3">
                      <span className="font-space text-sm font-bold text-accent-cyan uppercase tracking-wider">
                        MİSYONUMUZ
                      </span>
                      <p className="font-outfit text-xs text-text-secondary leading-relaxed">
                        Derin mühendislik bilgimizi ve hibe ekosistemlerini kullanarak yeşil dönüşümü sanayiciler için bir zorunluluktan çıkarıp, rekabet avantajı sağlayan karlı yatırımlara çevirmek.
                      </p>
                    </div>
                  </div>
                </div>

                {/* Sağ - High-craft visual Dashboard Widget representation */}
                <div className="lg:col-span-5 w-full flex justify-center">
                  <div className="glass-panel border-glow-cyan rounded-3xl p-6 sm:p-8 w-full max-w-md relative overflow-hidden shadow-2xl">
                    {/* Header of widget */}
                    <div className="flex items-center justify-between pb-6 border-b border-white/5 mb-6">
                      <div className="flex flex-col">
                        <span className="font-space text-sm font-bold text-text-primary">SCENERJİ ANALYTICS</span>
                        <span className="font-mono text-[9px] text-text-dim uppercase tracking-wider">Tesis Analiz Ağı: #TR-8049</span>
                      </div>
                      <span className="w-2 h-2 bg-accent-cyan rounded-full animate-ping" />
                    </div>

                    {/* Content metrics bars */}
                    <div className="flex flex-col gap-5">
                      {/* Metric 1 */}
                      <div className="flex flex-col gap-2">
                        <div className="flex justify-between font-space text-xs">
                          <span className="text-text-secondary">Karbon Ayak İzi Azaltımı</span>
                          <span className="text-accent-cyan font-bold">%42 / Hedef %50</span>
                        </div>
                        <div className="w-full h-2 bg-bg-tertiary rounded-full overflow-hidden">
                          <div className="h-full bg-accent-cyan rounded-full" style={{ width: "84%" }} />
                        </div>
                      </div>

                      {/* Metric 2 */}
                      <div className="flex flex-col gap-2">
                        <div className="flex justify-between font-space text-xs">
                          <span className="text-text-secondary">Enerji Verimliliği Artışı</span>
                          <span className="text-accent-emerald font-bold">%35 / Hedef %30</span>
                        </div>
                        <div className="w-full h-2 bg-bg-tertiary rounded-full overflow-hidden">
                          <div className="h-full bg-accent-emerald rounded-full" style={{ width: "100%" }} />
                        </div>
                      </div>

                      {/* Metric 3 */}
                      <div className="flex flex-col gap-2">
                        <div className="flex justify-between font-space text-xs">
                          <span className="text-text-secondary">Teşvik / Hibe Yararlanma Oranı</span>
                          <span className="text-text-primary font-bold">%92</span>
                        </div>
                        <div className="w-full h-2 bg-bg-tertiary rounded-full overflow-hidden">
                          <div className="h-full bg-gradient-to-r from-accent-cyan to-accent-emerald rounded-full" style={{ width: "92%" }} />
                        </div>
                      </div>
                    </div>

                    {/* Interactive diagram preview inside widget */}
                    <div className="mt-8 pt-6 border-t border-white/5 flex flex-col gap-4">
                      <span className="font-mono text-[9px] text-text-dim uppercase tracking-wider">Aylık Emisyon Tasarruf Eğrisi</span>
                      
                      <div className="h-32 flex items-end justify-between gap-1 pt-4">
                        {[40, 55, 45, 60, 75, 68, 85, 95, 110, 125, 140].map((height, i) => (
                          <div key={i} className="flex-1 flex flex-col items-center gap-1 group cursor-pointer">
                            <motion.div 
                              initial={{ height: 0 }}
                              whileInView={{ height: `${height * 0.7}%` }}
                              viewport={{ once: true }}
                              transition={{ duration: 1, delay: i * 0.05 }}
                              className={`w-full rounded-t-sm transition-all duration-300 ${i === 10 ? 'bg-accent-emerald' : 'bg-bg-tertiary group-hover:bg-accent-cyan'}`} 
                            />
                            <span className="font-mono text-[7px] text-text-dim group-hover:text-text-primary transition-colors">{i + 1}A</span>
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>
                </div>

              </div>
            </section>

            {/* 5. INTERACTIVE SOLUTIONS TAB GRID */}
            <section id="cozumler" className="w-full py-32 px-6 relative z-10 bg-bg-secondary/20">
              <div className="max-w-7xl mx-auto">
                
                {/* Header text */}
                <div className="flex flex-col items-center text-center max-w-2xl mx-auto mb-16">
                  <div className="glass-panel border-glow-emerald rounded-full px-4 py-1.5 text-[10px] font-mono text-accent-emerald uppercase tracking-widest mb-6">
                    HİZMET VE ÇÖZÜMLERİMİZ
                  </div>
                  <h2 className="font-space text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight mb-6">
                    Geniş Çözüm Spektrumumuzla <br />
                    <span className="text-accent-emerald">Sanayiyi Dönüştürüyoruz.</span>
                  </h2>
                  <p className="font-outfit text-sm text-text-secondary leading-relaxed">
                    Endüstrinin teknik ihtiyaçlarına özel mühendislik çözümleri ve bu çözümleri finanse edecek global ve ulusal hibe destekleri tek bir çatı altında.
                  </p>
                </div>

                {/* Tab Controls */}
                <div className="flex justify-center mb-16">
                  <div className="glass-panel border-glow-emerald p-1 rounded-2xl flex gap-2">
                    <button 
                      onClick={() => setActiveTab("eng")}
                      className={`px-6 py-3 rounded-xl font-space text-xs tracking-wider uppercase font-semibold transition-all duration-300 flex items-center gap-2 cursor-pointer ${
                        activeTab === "eng" 
                          ? "bg-accent-emerald text-bg-primary shadow-lg" 
                          : "text-text-secondary hover:text-text-primary"
                      }`}
                    >
                      <Cpu size={14} />
                      MÜHENDİSLİK ÇÖZÜMLERİMİZ
                    </button>
                    <button 
                      onClick={() => setActiveTab("grants")}
                      className={`px-6 py-3 rounded-xl font-space text-xs tracking-wider uppercase font-semibold transition-all duration-300 flex items-center gap-2 cursor-pointer ${
                        activeTab === "grants" 
                          ? "bg-accent-emerald text-bg-primary shadow-lg" 
                          : "text-text-secondary hover:text-text-primary"
                      }`}
                    >
                      <Coins size={14} />
                      YEŞİL DÖNÜŞÜM DESTEKLERİ
                    </button>
                  </div>
                </div>

                {/* Tabs contents with dynamic animations */}
                <AnimatePresence mode="wait">
                  {activeTab === "eng" ? (
                    <motion.div 
                      key="eng"
                      initial={{ opacity: 0, y: 15 }}
                      animate={{ opacity: 1, y: 0 }}
                      exit={{ opacity: 0, y: -15 }}
                      transition={{ duration: 0.5 }}
                      className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
                    >
                      {/* Card 1 */}
                      <div className="glass-panel border-glow-emerald rounded-2xl p-8 hover:y-[-6px] transition-all duration-300 relative group overflow-hidden cursor-pointer">
                        <div className="absolute inset-0 bg-gradient-to-br from-accent-emerald/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
                        <div className="w-12 h-12 bg-accent-emerald/10 border border-accent-emerald/20 flex items-center justify-center rounded-xl text-accent-emerald mb-6 group-hover:bg-accent-emerald group-hover:text-bg-primary transition-colors">
                          <Zap size={20} />
                        </div>
                        <h3 className="font-space text-lg font-bold mb-4 text-text-primary">
                          Yenilenebilir Enerji Mühendisliği
                        </h3>
                        <p className="font-outfit text-sm text-text-secondary leading-relaxed">
                          Tesisleriniz için çatı ve arazi Solar Enerji (GES), Rüzgar Enerjisi (RES) ve Kojenerasyon sistemlerinin teknik ve finansal fizibilitelerini hazırlıyor, anahtar teslim proje mühendisliği yapıyoruz.
                        </p>
                      </div>

                      {/* Card 2 */}
                      <div className="glass-panel border-glow-emerald rounded-2xl p-8 hover:y-[-6px] transition-all duration-300 relative group overflow-hidden cursor-pointer">
                        <div className="absolute inset-0 bg-gradient-to-br from-accent-emerald/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
                        <div className="w-12 h-12 bg-accent-emerald/10 border border-accent-emerald/20 flex items-center justify-center rounded-xl text-accent-emerald mb-6 group-hover:bg-accent-emerald group-hover:text-bg-primary transition-colors">
                          <BarChart3 size={20} />
                        </div>
                        <h3 className="font-space text-lg font-bold mb-4 text-text-primary">
                          Enerji Verimliliği ve VAP
                        </h3>
                        <p className="font-outfit text-sm text-text-secondary leading-relaxed">
                          Tesislerde detaylı enerji etütleri gerçekleştiriyor, atık ısı geri kazanımı ve proses optimizasyonu ile enerji maliyetlerini düşürecek Verimlilik Artırıcı Projeler (VAP) geliştiriyoruz.
                        </p>
                      </div>

                      {/* Card 3 */}
                      <div className="glass-panel border-glow-emerald rounded-2xl p-8 hover:y-[-6px] transition-all duration-300 relative group overflow-hidden cursor-pointer">
                        <div className="absolute inset-0 bg-gradient-to-br from-accent-emerald/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
                        <div className="w-12 h-12 bg-accent-emerald/10 border border-accent-emerald/20 flex items-center justify-center rounded-xl text-accent-emerald mb-6 group-hover:bg-accent-emerald group-hover:text-bg-primary transition-colors">
                          <Globe size={20} />
                        </div>
                        <h3 className="font-space text-lg font-bold mb-4 text-text-primary">
                          Karbon Ayak İzi Hesaplama
                        </h3>
                        <p className="font-outfit text-sm text-text-secondary leading-relaxed">
                          ISO 14064 standardına uygun olarak şirketinize ait Kapsam 1, 2 ve 3 karbon ayak izi hesaplamalarını yapıyor, uluslararası standartlarda raporlayarak doğrulatma sürecini yönetiyoruz.
                        </p>
                      </div>
                    </motion.div>
                  ) : (
                    <motion.div 
                      key="grants"
                      initial={{ opacity: 0, y: 15 }}
                      animate={{ opacity: 1, y: 0 }}
                      exit={{ opacity: 0, y: -15 }}
                      transition={{ duration: 0.5 }}
                      className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
                    >
                      {/* Grant Card 1 */}
                      <div className="glass-panel border-glow-cyan rounded-2xl p-8 hover:y-[-6px] transition-all duration-300 relative group overflow-hidden cursor-pointer">
                        <div className="absolute inset-0 bg-gradient-to-br from-accent-cyan/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
                        <div className="w-12 h-12 bg-accent-cyan/10 border border-accent-cyan/20 flex items-center justify-center rounded-xl text-accent-cyan mb-6 group-hover:bg-accent-cyan group-hover:text-bg-primary transition-colors">
                          <Coins size={20} />
                        </div>
                        <h3 className="font-space text-lg font-bold mb-4 text-text-primary">
                          TÜBİTAK 1831 Yeşil İnovasyon
                        </h3>
                        <p className="font-outfit text-sm text-text-secondary leading-relaxed">
                          {"KOBİ'lerin"} yeşil dönüşüme yönelik teknolojik çözümlerini finanse eden TÜBİTAK Yeşil İnovasyon destek mekanizmalarında tam kapsamlı proje hazırlama, başvuru ve raporlama danışmanlığı veriyoruz.
                        </p>
                      </div>

                      {/* Grant Card 2 */}
                      <div className="glass-panel border-glow-cyan rounded-2xl p-8 hover:y-[-6px] transition-all duration-300 relative group overflow-hidden cursor-pointer">
                        <div className="absolute inset-0 bg-gradient-to-br from-accent-cyan/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
                        <div className="w-12 h-12 bg-accent-cyan/10 border border-accent-cyan/20 flex items-center justify-center rounded-xl text-accent-cyan mb-6 group-hover:bg-accent-cyan group-hover:text-bg-primary transition-colors">
                          <Shield size={20} />
                        </div>
                        <h3 className="font-space text-lg font-bold mb-4 text-text-primary">
                          KOSGEB Yeşil Dönüşüm Destekleri
                        </h3>
                        <p className="font-outfit text-sm text-text-secondary leading-relaxed">
                          Tesislerinizin enerji motorlarının verimlileştirilmesi, güneş enerjisi yatırımları ve karbon ayak izi hesaplama masraflarına kadar birçok alanda KOSGEB hibelerinden maksimum payı almanızı sağlıyoruz.
                        </p>
                      </div>

                      {/* Grant Card 3 */}
                      <div className="glass-panel border-glow-cyan rounded-2xl p-8 hover:y-[-6px] transition-all duration-300 relative group overflow-hidden cursor-pointer">
                        <div className="absolute inset-0 bg-gradient-to-br from-accent-cyan/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
                        <div className="w-12 h-12 bg-accent-cyan/10 border border-accent-cyan/20 flex items-center justify-center rounded-xl text-accent-cyan mb-6 group-hover:bg-accent-cyan group-hover:text-bg-primary transition-colors">
                          <TrendingUp size={20} />
                        </div>
                        <h3 className="font-space text-lg font-bold mb-4 text-text-primary">
                          Sınırda Karbon Vergisi (CBAM)
                        </h3>
                        <p className="font-outfit text-sm text-text-secondary leading-relaxed">
                          Avrupa Birliği Yeşil Mutabakatı kapsamında, ihracat yapan firmalarımızı Sınırda Karbon Düzenleme Mekanizmasına (SKDM) hazırlıyor, gümrükte karbon vergisi ödemelerini engelleyecek sistemleri kuruyoruz.
                        </p>
                      </div>
                    </motion.div>
                  )}
                </AnimatePresence>
              </div>
            </section>

            {/* 6. HORIZONTAL PROJECTS CAROUSEL */}
            <section id="projeler" className="w-full py-32 px-6 relative z-10 border-t border-b border-white/5 overflow-hidden">
              <div className="max-w-7xl mx-auto">
                <div className="flex flex-col md:flex-row md:items-end justify-between mb-16">
                  <div className="flex flex-col items-start max-w-xl">
                    <div className="glass-panel border-glow-cyan rounded-full px-4 py-1.5 text-[10px] font-mono text-accent-cyan uppercase tracking-widest mb-6">
                      PORTFOLYO
                    </div>
                    <h2 className="font-space text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight">
                      Mühendislikle Şekillenen <br />
                      <span className="text-accent-cyan">Başarı Hikayelerimiz.</span>
                    </h2>
                  </div>
                  <span className="font-mono text-xs text-text-dim mt-4 md:mt-0 max-w-xs block text-left">
                    Sanayinin karbon emisyonlarını sıfırlarken, sürdürülebilir karlı yapıları inşa ettiğimiz bazı seçkin referanslarımız.
                  </span>
                </div>

                {/* Projects Draggable Flex Area */}
                <div className="flex gap-8 overflow-x-auto pb-8 pt-4 scrollbar-none snap-x snap-mandatory">
                  
                  {/* Project 1 */}
                  <div className="glass-panel border-glow-emerald rounded-3xl p-6 sm:p-8 min-w-[290px] sm:min-w-[400px] max-w-[400px] flex flex-col justify-between shrink-0 snap-start relative group overflow-hidden">
                    <div className="absolute inset-0 bg-gradient-to-br from-accent-emerald/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
                    <div>
                      <div className="flex items-center justify-between mb-8 border-b border-white/5 pb-4">
                        <span className="font-space text-sm font-bold text-accent-emerald tracking-wide">01 // SOLAR ENERJİ</span>
                        <span className="font-mono text-[9px] text-text-dim uppercase tracking-wider">Manisa OSB</span>
                      </div>
                      <h3 className="font-space text-xl font-bold mb-4 text-text-primary">
                        Mega Endüstriyel Çatı GES Kurulumu
                      </h3>
                      <p className="font-outfit text-sm text-text-secondary leading-relaxed mb-8">
                        Bölgenin en büyük metal işleme fabrikasının 75.000 metrekarelik çatı alanına 12.4 MWp gücünde Solar Enerji Santrali kurduk. Tesisin yıllık elektrik ihtiyacının tamamı yeşil enerjiden karşılanıyor.
                      </p>
                    </div>
                    
                    <div className="flex justify-between items-center pt-4 border-t border-white/5">
                      <div className="flex flex-col">
                        <span className="font-mono text-[9px] text-text-dim uppercase">VERİLEN TEŞVİK</span>
                        <span className="font-space text-base font-extrabold text-accent-emerald">€1.4 Milyon Hibe</span>
                      </div>
                      <div className="flex flex-col text-right">
                        <span className="font-mono text-[9px] text-text-dim uppercase">GERİ ÖDEME SÜRESİ</span>
                        <span className="font-space text-base font-extrabold text-text-primary">3.2 Yıl</span>
                      </div>
                    </div>
                  </div>

                  {/* Project 2 */}
                  <div className="glass-panel border-glow-cyan rounded-3xl p-6 sm:p-8 min-w-[290px] sm:min-w-[400px] max-w-[400px] flex flex-col justify-between shrink-0 snap-start relative group overflow-hidden">
                    <div className="absolute inset-0 bg-gradient-to-br from-accent-cyan/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
                    <div>
                      <div className="flex items-center justify-between mb-8 border-b border-white/5 pb-4">
                        <span className="font-space text-sm font-bold text-accent-cyan tracking-wide">02 // VERİ & YÖNETİM</span>
                        <span className="font-mono text-[9px] text-text-dim uppercase tracking-wider">Bursa & Kocaeli</span>
                      </div>
                      <h3 className="font-space text-xl font-bold mb-4 text-text-primary">
                        ISO 50001 Enerji Yönetim Ağı
                      </h3>
                      <p className="font-outfit text-sm text-text-secondary leading-relaxed mb-8">
                        Otomotiv yan sanayi üreticisinin 14 farklı üretim tesisinde, IoT sensör entegrasyonuyla ISO 50001 Enerji Yönetim sistemini kurduk. Tüketimleri anlık analiz ederek gereksiz kayıpları sıfırladık.
                      </p>
                    </div>
                    
                    <div className="flex justify-between items-center pt-4 border-t border-white/5">
                      <div className="flex flex-col">
                        <span className="font-mono text-[9px] text-text-dim uppercase">ENERJİ TASARRUFU</span>
                        <span className="font-space text-base font-extrabold text-accent-cyan">Yıllık 18.2 Milyon kWh</span>
                      </div>
                      <div className="flex flex-col text-right">
                        <span className="font-mono text-[9px] text-text-dim uppercase">VERİMLİLİK ARTIŞI</span>
                        <span className="font-space text-base font-extrabold text-text-primary">%28</span>
                      </div>
                    </div>
                  </div>

                  {/* Project 3 */}
                  <div className="glass-panel border-glow-emerald rounded-3xl p-6 sm:p-8 min-w-[290px] sm:min-w-[400px] max-w-[400px] flex flex-col justify-between shrink-0 snap-start relative group overflow-hidden">
                    <div className="absolute inset-0 bg-gradient-to-br from-accent-emerald/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
                    <div>
                      <div className="flex items-center justify-between mb-8 border-b border-white/5 pb-4">
                        <span className="font-space text-sm font-bold text-accent-emerald tracking-wide">03 // YEŞİL TEŞVİK</span>
                        <span className="font-mono text-[9px] text-text-dim uppercase tracking-wider">İzmir Aliağa</span>
                      </div>
                      <h3 className="font-space text-xl font-bold mb-4 text-text-primary">
                        Yeşil Dönüşüm Teşvik Optimizasyonu
                      </h3>
                      <p className="font-outfit text-sm text-text-secondary leading-relaxed mb-8">
                        Büyük ölçekli çelik üreticimizin karbonsuzlaşma yol haritasını hazırladık. Kapsam 1-2 emisyon raporlarını tamamlayarak, AB Yeşil Mutabakatı kapsamında 1.8 Milyon € tutarında direkt hibe onaylattık.
                      </p>
                    </div>
                    
                    <div className="flex justify-between items-center pt-4 border-t border-white/5">
                      <div className="flex flex-col">
                        <span className="font-mono text-[9px] text-text-dim uppercase">KAZANILAN HİBE</span>
                        <span className="font-space text-base font-extrabold text-accent-emerald">€1.8 Milyon Hibe</span>
                      </div>
                      <div className="flex flex-col text-right">
                        <span className="font-mono text-[9px] text-text-dim uppercase">KARBON VERGİ TASARRUFU</span>
                        <span className="font-space text-base font-extrabold text-text-primary">%100</span>
                      </div>
                    </div>
                  </div>

                  {/* Project 4 */}
                  <div className="glass-panel border-glow-cyan rounded-3xl p-6 sm:p-8 min-w-[290px] sm:min-w-[400px] max-w-[400px] flex flex-col justify-between shrink-0 snap-start relative group overflow-hidden">
                    <div className="absolute inset-0 bg-gradient-to-br from-accent-cyan/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
                    <div>
                      <div className="flex items-center justify-between mb-8 border-b border-white/5 pb-4">
                        <span className="font-space text-sm font-bold text-accent-cyan tracking-wide">04 // MÜHENDİSLİK</span>
                        <span className="font-mono text-[9px] text-text-dim uppercase tracking-wider">Tekirdağ Çorlu</span>
                      </div>
                      <h3 className="font-space text-xl font-bold mb-4 text-text-primary">
                        Kojenerasyon ve Isı Geri Kazanımı
                      </h3>
                      <p className="font-outfit text-sm text-text-secondary leading-relaxed mb-8">
                        Tekstil boyahanesinin baca gazlarındaki ve atık sularındaki ısıyı geri kazanacak kojenerasyon entegrasyonu projesini tamamladık. Atık ısı, {"fabrikanın"} sıcak su ihtiyacının {"%85'ini"} karşılıyor.
                      </p>
                    </div>
                    
                    <div className="flex justify-between items-center pt-4 border-t border-white/5">
                      <div className="flex flex-col">
                        <span className="font-mono text-[9px] text-text-dim uppercase">AZALTILAN DOĞALGAZ</span>
                        <span className="font-space text-base font-extrabold text-accent-cyan">Yıllık %32</span>
                      </div>
                      <div className="flex flex-col text-right">
                        <span className="font-mono text-[9px] text-text-dim uppercase">YILLIK CO₂ AZALTIMI</span>
                        <span className="font-space text-base font-extrabold text-text-primary">4.200 Ton</span>
                      </div>
                    </div>
                  </div>

                </div>
              </div>
            </section>

            {/* 7. QUANTITATIVE SERVICE EXCELLENCE */}
            <section id="anlayis" className="w-full py-32 px-6 relative z-10 bg-bg-secondary/10">
              <div className="max-w-7xl mx-auto">
                
                {/* Header info */}
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start mb-20">
                  <div className="flex flex-col items-start">
                    <div className="glass-panel border-glow-emerald rounded-full px-4 py-1.5 text-[10px] font-mono text-accent-emerald uppercase tracking-widest mb-6">
                      HİZMET ANLAYIŞI
                    </div>
                    <h2 className="font-space text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight mb-6">
                      Verilerle Kanıtlanmış <br />
                      <span className="text-accent-emerald">Sürdürülebilir Başarı.</span>
                    </h2>
                  </div>
                  <p className="font-outfit text-base text-text-secondary leading-relaxed pt-2">
                    Scenerji olarak, mühendislik hesaplarımızı teoride bırakmıyoruz. Geliştirdiğimiz projelerin tamamında, tesislerinizin gerçek enerji tüketim verileri üzerinden çalışıyor ve gerçekleştirdiğimiz net tasarrufları faturalandırılabilir kanıtlarla sunuyoruz.
                  </p>
                </div>

                {/* High-end metrics grid with counters */}
                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
                  <AnimatedMetric value={120} label="MİLYON kWh TASARRUF" suffix="M+" />
                  <AnimatedMetric value={45000} label="TON AZALTILAN CO₂" suffix="+" />
                  <AnimatedMetric value={34} label="MWp PROJELENDİRİLEN GES" suffix="+" />
                  <AnimatedMetric value={12} label="MİLYON € HİBE & TEŞVİK" suffix="M+ €" />
                </div>
              </div>
            </section>

            {/* 8. EDITORIAL FOOTER (CONTACT & ARTICLES) */}
            <footer id="iletisim" className="w-full bg-[#04090f] pt-32 pb-16 px-6 relative z-10 border-t border-white/5">
              <div className="max-w-7xl mx-auto">
                <div className="grid grid-cols-1 lg:grid-cols-12 gap-16 xl:gap-24 items-start pb-20 border-b border-white/5 mb-16">
                  
                  {/* Sol Kolon - İletişim Formu */}
                  <div className="lg:col-span-6 flex flex-col items-start w-full">
                    <div className="glass-panel border-glow-cyan rounded-full px-4 py-1.5 text-[10px] font-mono text-accent-cyan uppercase tracking-widest mb-6">
                      İLETİŞİM FORMU
                    </div>
                    <h2 className="font-space text-3xl sm:text-4xl font-extrabold tracking-tight mb-8">
                      Yeşil Dönüşümü <br />
                      <span className="text-accent-cyan">Birlikte Başlatalım.</span>
                    </h2>

                    <form 
                      onSubmit={(e) => {
                        e.preventDefault();
                        setContactSuccess(true);
                      }}
                      className="w-full flex flex-col gap-6"
                    >
                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                        <div className="flex flex-col gap-2">
                          <label className="font-space text-[10px] text-text-secondary tracking-widest uppercase font-medium">Adınız Soyadınız</label>
                          <input 
                            required 
                            type="text" 
                            placeholder="Örn: Mustafa Yıldız" 
                            className="glass-panel border border-white/5 focus:border-accent-cyan/40 px-4 py-3.5 rounded-xl font-outfit text-sm text-text-primary bg-bg-primary/50 outline-none transition-all duration-300"
                          />
                        </div>
                        <div className="flex flex-col gap-2">
                          <label className="font-space text-[10px] text-text-secondary tracking-widest uppercase font-medium">Firma Adı</label>
                          <input 
                            required 
                            type="text" 
                            placeholder="Örn: Scenerji Sanayi A.Ş." 
                            className="glass-panel border border-white/5 focus:border-accent-cyan/40 px-4 py-3.5 rounded-xl font-outfit text-sm text-text-primary bg-bg-primary/50 outline-none transition-all duration-300"
                          />
                        </div>
                      </div>

                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                        <div className="flex flex-col gap-2">
                          <label className="font-space text-[10px] text-text-secondary tracking-widest uppercase font-medium">E-Posta Adresi</label>
                          <input 
                            required 
                            type="email" 
                            placeholder="Örn: mustafa@scenerji.com" 
                            className="glass-panel border border-white/5 focus:border-accent-cyan/40 px-4 py-3.5 rounded-xl font-outfit text-sm text-text-primary bg-bg-primary/50 outline-none transition-all duration-300"
                          />
                        </div>
                        <div className="flex flex-col gap-2">
                          <label className="font-space text-[10px] text-text-secondary tracking-widest uppercase font-medium">Telefon Numarası</label>
                          <input 
                            required 
                            type="tel" 
                            placeholder="Örn: +90 532 000 00 00" 
                            className="glass-panel border border-white/5 focus:border-accent-cyan/40 px-4 py-3.5 rounded-xl font-outfit text-sm text-text-primary bg-bg-primary/50 outline-none transition-all duration-300"
                          />
                        </div>
                      </div>

                      <div className="flex flex-col gap-2">
                        <label className="font-space text-[10px] text-text-secondary tracking-widest uppercase font-medium">Mesajınız / Teşvik Talebiniz</label>
                        <textarea 
                          required 
                          rows={4}
                          placeholder="Fesadınızı dekarbonize etmek istediğiniz alanları belirtin..." 
                          className="glass-panel border border-white/5 focus:border-accent-cyan/40 px-4 py-3.5 rounded-xl font-outfit text-sm text-text-primary bg-bg-primary/50 outline-none transition-all duration-300 resize-none"
                        />
                      </div>

                      <button 
                        type="submit" 
                        className="w-full sm:w-auto self-start px-8 py-4 bg-accent-cyan text-bg-primary font-space font-semibold text-xs tracking-widest uppercase rounded-xl hover:bg-white transition-all duration-300 cursor-pointer shadow-lg shadow-accent-cyan/10"
                      >
                        ANALİZ TALEBİ GÖNDER
                      </button>

                      <AnimatePresence>
                        {contactSuccess && (
                          <motion.div 
                            initial={{ opacity: 0, y: 10 }}
                            animate={{ opacity: 1, y: 0 }}
                            className="glass-panel border-glow-emerald bg-accent-emerald/5 rounded-xl p-4 flex items-center gap-3 text-accent-emerald font-outfit text-sm"
                          >
                            <CheckCircle size={18} />
                            Talebiniz başarıyla alındı. Mühendislerimiz 24 saat içinde analiz raporuyla dönüş yapacaktır.
                          </motion.div>
                        )}
                      </AnimatePresence>
                    </form>
                  </div>

                  {/* Sağ Kolon - Makaleler & İletişim Bilgileri */}
                  <div className="lg:col-span-6 flex flex-col gap-12 w-full lg:pl-10">
                    
                    {/* Featured Articles Section */}
                    <div>
                      <div className="glass-panel border-glow-emerald rounded-full px-4 py-1.5 text-[10px] font-mono text-accent-emerald uppercase tracking-widest mb-6 inline-block">
                        GÜNCEL YAZILARIMIZ / MAKALELER
                      </div>
                      
                      <div className="flex flex-col gap-6 mt-4">
                        {/* Article 1 */}
                        <a href="#" className="glass-panel border border-white/5 hover:border-accent-emerald/30 p-5 rounded-2xl flex gap-4 group transition-all duration-300">
                          <div className="w-10 h-10 shrink-0 bg-accent-emerald/10 text-accent-emerald flex items-center justify-center rounded-xl font-mono text-xs">
                            01
                          </div>
                          <div className="flex flex-col gap-1">
                            <h4 className="font-space text-sm font-bold text-text-primary group-hover:text-accent-emerald transition-colors">
                              Sınırda Karbon Vergisi (CBAM) ve Türk Sanayisine Etkileri
                            </h4>
                            <span className="font-mono text-[9px] text-text-dim flex items-center gap-1.5 uppercase mt-1">
                              <Calendar size={10} /> 12 MAYIS 2026 • AKADEMİK
                            </span>
                          </div>
                        </a>

                        {/* Article 2 */}
                        <a href="#" className="glass-panel border border-white/5 hover:border-accent-emerald/30 p-5 rounded-2xl flex gap-4 group transition-all duration-300">
                          <div className="w-10 h-10 shrink-0 bg-accent-cyan/10 text-accent-cyan flex items-center justify-center rounded-xl font-mono text-xs">
                            02
                          </div>
                          <div className="flex flex-col gap-1">
                            <h4 className="font-space text-sm font-bold text-text-primary group-hover:text-accent-cyan transition-colors">
                              ISO 14064 Standardı ile Karbon Ayak İzi Hesaplama Kılavuzu
                            </h4>
                            <span className="font-mono text-[9px] text-text-dim flex items-center gap-1.5 uppercase mt-1">
                              <Calendar size={10} /> 24 NİSAN 2026 • REHBER
                            </span>
                          </div>
                        </a>
                      </div>
                    </div>

                    {/* Coordinates & Contact Info */}
                    <div className="border-t border-white/5 pt-10 flex flex-col gap-6">
                      <div className="flex items-center gap-4 text-text-secondary font-outfit text-sm">
                        <div className="w-10 h-10 glass-panel border border-white/5 flex items-center justify-center rounded-xl text-accent-cyan">
                          <MapPin size={16} />
                        </div>
                        <div className="flex flex-col">
                          <span className="font-mono text-[9px] text-text-dim uppercase tracking-wider">MERKEZ OFİS</span>
                          <span className="text-text-primary text-xs font-semibold">Ataköy Towers, A Blok, Bakırköy / İstanbul</span>
                        </div>
                      </div>

                      <div className="flex flex-col sm:flex-row gap-6">
                        <a href="mailto:info@scenerji.com" className="flex items-center gap-4 text-text-secondary font-outfit text-sm hover:text-accent-emerald transition-colors flex-1">
                          <div className="w-10 h-10 glass-panel border border-white/5 flex items-center justify-center rounded-xl text-accent-emerald">
                            <Mail size={16} />
                          </div>
                          <div className="flex flex-col">
                            <span className="font-mono text-[9px] text-text-dim uppercase tracking-wider">E-POSTA ADRESİ</span>
                            <span className="text-text-primary text-xs font-semibold">info@scenerji.com</span>
                          </div>
                        </a>

                        <a href="tel:+902128093450" className="flex items-center gap-4 text-text-secondary font-outfit text-sm hover:text-accent-cyan transition-colors flex-1">
                          <div className="w-10 h-10 glass-panel border border-white/5 flex items-center justify-center rounded-xl text-accent-cyan">
                            <Phone size={16} />
                          </div>
                          <div className="flex flex-col">
                            <span className="font-mono text-[9px] text-text-dim uppercase tracking-wider">TELEFON NUMARASI</span>
                            <span className="text-text-primary text-xs font-semibold">+90 (212) 809 34 50</span>
                          </div>
                        </a>
                      </div>
                    </div>

                  </div>
                </div>

                {/* Subfooter bottom details */}
                <div className="flex flex-col md:flex-row justify-between items-center gap-6 font-mono text-[10px] text-text-dim uppercase tracking-wider">
                  <div className="flex items-center gap-3">
                    <span className="w-1.5 h-1.5 bg-accent-emerald rounded-full" />
                    <span>© 2026 SCENERJİ DANIŞMANLIK & MÜHENDİSLİK. TÜM HAKLARI SAKLIDIR.</span>
                  </div>
                  <span>KONSEPT KOD & TASARIM: AYRIS TECH DEMO PORTALI</span>
                </div>
              </div>
            </footer>
          </motion.div>
        )}
      </AnimatePresence>
    </LenisProvider>
  );
}