"use client";

import { motion } from "framer-motion";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import type { Locale } from "@/i18n-config";

const expo = [0.16, 1, 0.3, 1] as [number, number, number, number];

const IconAI = () => (
  <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round">
    <rect x="3" y="3" width="18" height="18" rx="1" />
    <path d="M9 3v18M15 3v18M3 9h18M3 15h18" />
    <circle cx="9" cy="9" r="1.5" fill="currentColor" />
    <circle cx="15" cy="15" r="1.5" fill="currentColor" />
  </svg>
);
const IconChain = () => (
  <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round">
    <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
    <path d="M3.27 6.96L12 12.01l8.73-5.05M12 22.08V12" />
  </svg>
);
const IconMobile = () => (
  <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round">
    <rect x="5" y="2" width="14" height="20" rx="2" />
    <path d="M12 18h.01" />
  </svg>
);
const IconWeb = () => (
  <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round">
    <rect x="3" y="4" width="18" height="16" rx="1" />
    <path d="M3 9h18M8 6h.01M11 6h.01M14 6h.01" />
  </svg>
);

export default function ServicesClient({ lang, dict }: { lang: Locale; dict: any }) {
  const services = [
    {
      icon: <IconAI />, title: dict.services.items.ai.title, code: "AI / ML", desc: dict.services.items.ai.desc, accent: "#FFE600",
      items: lang === "tr"
        ? ["Tahmin Modelleri", "Doğal Dil İşleme", "Bilgisayarlı Görü", "Etmen İş Akışları", "Özel Gömme Uzayları", "RAG Sistemleri"]
        : ["Predictive Models", "Natural Language Processing", "Computer Vision", "Agentic Workflows", "Custom Embeddings", "RAG Deployments"],
    },
    {
      icon: <IconChain />, title: dict.services.items.blockchain.title, code: "BC / WEB3", desc: dict.services.items.blockchain.desc, accent: "#FF4500",
      items: lang === "tr"
        ? ["Akıllı Sözleşme Denetimi", "DeFi Mimarileri", "Tokenomik Tasarımı", "Çapraz Zincir Köprüleri", "EVM Optimizasyonu", "IPFS Entegrasyonu"]
        : ["Smart Contract Audit", "DeFi Architectures", "Tokenomics Design", "Cross-chain Bridges", "EVM Optimizations", "IPFS Integration"],
    },
    {
      icon: <IconMobile />, title: dict.services.items.mobile.title, code: "MOB / DART", desc: dict.services.items.mobile.desc, accent: "#0A0A0A",
      items: lang === "tr"
        ? ["Evrensel Kod Tabanı", "Çevrimdışı Senkronizasyon", "Biyometrik Protokoller", "Optimize Çekirdek Paket", "Push Bildirim Mimarisi", "Mağaza Operasyonları"]
        : ["Universal Codebase", "Offline Syncing", "Biometric Protocols", "Optimized Core Bundle", "Push Notification Architecture", "App Store Operations"],
    },
    {
      icon: <IconWeb />, title: dict.services.items.web.title, code: "WEB / NEXT", desc: dict.services.items.web.desc, accent: "#00CC77",
      items: lang === "tr"
        ? ["Next.js App Router", "Sunucu Bileşenleri", "Headless E-Ticaret", "Modüler API Ağı", "Tailwind CSS Entegrasyonu", "Vercel Kenar Telemetrisi"]
        : ["Next.js App Router", "Server Components", "Headless Commerce", "Modular API Mesh", "Tailwind CSS Integration", "Vercel Edge Telemetry"],
    },
  ];

  return (
    <div className="bg-[#F4F0E8] text-[#0A0A0A] font-body min-h-screen">
      <Header lang={lang} dict={dict.nav} />

      <main className="pt-32 pb-24 px-6 max-w-7xl mx-auto">

        <div className="border-b border-[#C8C2B8] pb-12 mb-16">
          <div className="flex items-center gap-3 mb-6">
            <div className="w-3 h-3 bg-[#FFE600]" />
            <span className="font-mono text-[10px] tracking-[0.3em] uppercase text-[#A0998E]">{dict.services.badge}</span>
          </div>
          <motion.h1
            className="font-display font-black text-5xl sm:text-6xl lg:text-8xl uppercase leading-[0.85] tracking-tight"
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, ease: expo }}
          >
            {dict.services.title}
          </motion.h1>
        </div>

        <div className="grid grid-cols-1 gap-px bg-[#C8C2B8]">
          {services.map((s, idx) => (
            <motion.div
              key={idx}
              className="group bg-[#F4F0E8] grid grid-cols-1 lg:grid-cols-12 relative overflow-hidden"
              initial={{ opacity: 0 }}
              whileInView={{ opacity: 1 }}
              viewport={{ once: true }}
              transition={{ delay: idx * 0.1 }}
              whileHover={{ backgroundColor: "#EDE8E0" }}
            >
              {/* Left */}
              <div className="lg:col-span-5 p-10 border-b lg:border-b-0 lg:border-r border-[#C8C2B8] flex flex-col justify-between">
                <div>
                  <div className="flex items-start justify-between mb-8">
                    <div className="w-14 h-14 border border-[#C8C2B8] group-hover:border-[#0A0A0A] group-hover:bg-[#0A0A0A] group-hover:text-[#FFE600] flex items-center justify-center text-[#8A8480] transition-colors duration-200">
                      {s.icon}
                    </div>
                    <span className="font-mono text-[9px] tracking-[0.25em] uppercase text-[#C8C2B8] group-hover:text-[#A0998E] transition-colors">
                      {s.code}
                    </span>
                  </div>
                  <h2 className="font-display font-black text-3xl uppercase mb-4 group-hover:text-[#0A0A0A]">
                    {s.title}
                  </h2>
                  <p className="text-[#7A7470] text-[14px] leading-relaxed">
                    {s.desc}
                  </p>
                </div>
                <div className="font-display font-black text-[6rem] leading-none text-[#E8E3DC] select-none mt-4">
                  {String(idx + 1).padStart(2, "0")}
                </div>
              </div>

              {/* Right */}
              <div className="lg:col-span-7 p-10 flex flex-col justify-center">
                <div className="font-mono text-[9px] tracking-[0.3em] uppercase text-[#A0998E] mb-8">
                  {dict.services.deliverablesLabel}
                </div>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  {s.items.map((item: string) => (
                    <div key={item} className="flex items-center gap-4 group/item cursor-default">
                      <div className="w-1 h-4 flex-shrink-0 group-hover/item:h-6 transition-all duration-200" style={{ backgroundColor: s.accent }} />
                      <span className="font-display font-bold text-[14px] uppercase text-[#8A8480] group-hover/item:text-[#0A0A0A] transition-colors">
                        {item}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            </motion.div>
          ))}
        </div>
      </main>

      <Footer lang={lang} dict={dict} />
    </div>
  );
}