"use client";

import {
  motion,
  AnimatePresence,
  useScroll,
  useTransform,
  useMotionValue,
  useSpring,
} from "framer-motion";
import { useRef, useState, useEffect, useCallback } from "react";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import type { Locale } from "@/i18n-config";
import Link from "next/link";
import { blogPosts } from "@/data/blog";

// ── EASING ──
const expo: [number, number, number, number] = [0.16, 1, 0.3, 1];

// ── SVG ICONS ──
const IconAI = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" 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="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" 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="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" 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="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" 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>
);
const IconArrow = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <line x1="5" y1="12" x2="19" y2="12" />
    <polyline points="12 5 19 12 12 19" />
  </svg>
);
const IconArrowUpRight = () => (
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <line x1="7" y1="17" x2="17" y2="7" />
    <polyline points="7 7 17 7 17 17" />
  </svg>
);
const IconPlus = () => (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
    <line x1="12" y1="5" x2="12" y2="19" />
    <line x1="5" y1="12" x2="19" y2="12" />
  </svg>
);
const IconCheck = () => (
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#0A0A0A" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
    <polyline points="20 6 9 17 4 12" />
  </svg>
);

// ── ANIMATED COUNTER ──
function Counter({ target, suffix = "" }: { target: number; suffix?: string }) {
  const [count, setCount] = useState(0);
  const ref = useRef<HTMLSpanElement>(null);
  const [started, setStarted] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting) setStarted(true); },
      { threshold: 0.5 }
    );
    if (ref.current) observer.observe(ref.current);
    return () => observer.disconnect();
  }, []);

  useEffect(() => {
    if (!started) return;
    let cur = 0;
    const steps = 50;
    const inc = target / steps;
    const iv = setInterval(() => {
      cur += inc;
      if (cur >= target) { setCount(target); clearInterval(iv); }
      else setCount(Math.floor(cur));
    }, 1600 / steps);
    return () => clearInterval(iv);
  }, [started, target]);

  return <span ref={ref}>{count.toLocaleString()}{suffix}</span>;
}

// ── MAGNETIC BUTTON ──
function MagneticBtn({ children, className, href }: { children: React.ReactNode; className?: string; href?: string }) {
  const ref = useRef<HTMLDivElement>(null);
  const x = useMotionValue(0);
  const y = useMotionValue(0);
  const sx = useSpring(x, { stiffness: 200, damping: 20 });
  const sy = useSpring(y, { stiffness: 200, damping: 20 });

  const handleMouse = useCallback((e: React.MouseEvent) => {
    if (!ref.current) return;
    const { left, top, width, height } = ref.current.getBoundingClientRect();
    x.set((e.clientX - left - width / 2) * 0.3);
    y.set((e.clientY - top - height / 2) * 0.3);
  }, [x, y]);

  const handleLeave = useCallback(() => { x.set(0); y.set(0); }, [x, y]);

  const Tag = href ? "a" : "div";
  return (
    <motion.div ref={ref} style={{ x: sx, y: sy }} onMouseMove={handleMouse} onMouseLeave={handleLeave} className="inline-block">
      <Tag href={href} className={className}>{children}</Tag>
    </motion.div>
  );
}

// ── MARQUEE TEXT ──
function Marquee({ text, reverse = false }: { text: string; reverse?: boolean }) {
  const repeated = Array(8).fill(text).join("  ·  ");
  return (
    <div className="marquee-wrapper border-y border-[#C8C2B8] bg-[#EDE8E0] py-3 overflow-hidden">
      <div className={reverse ? "marquee-track-reverse" : "marquee-track"}>
        {[0, 1].map(i => (
          <span key={i} className="font-mono text-[11px] tracking-[0.35em] uppercase text-[#A0998E] px-8 whitespace-nowrap flex-shrink-0">
            {repeated}
          </span>
        ))}
      </div>
    </div>
  );
}

// ── SPLIT TEXT ANIMATION ──
function SplitReveal({ text, className, delay = 0 }: { text: string; className?: string; delay?: number }) {
  const words = text.split(" ");
  return (
    <span className={`inline-flex flex-wrap gap-x-[0.25em] ${className}`}>
      {words.map((word, i) => (
        <span key={i} className="overflow-hidden inline-block">
          <motion.span
            className="inline-block"
            initial={{ y: "110%", rotate: 2 }}
            whileInView={{ y: 0, rotate: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.75, ease: expo, delay: delay + i * 0.06 }}
          >
            {word}
          </motion.span>
        </span>
      ))}
    </span>
  );
}

// ── SECTION LABEL ──
function Label({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex items-center gap-3 mb-6">
      <div className="w-4 h-4 bg-[#FFE600] flex-shrink-0" />
      <span className="font-mono text-[10px] tracking-[0.3em] uppercase text-[#A0998E]">{children}</span>
      <div className="flex-1 h-px bg-[#C8C2B8]" />
    </div>
  );
}

// ── MAIN COMPONENT ──
export default function HomeClient({ lang, dict }: { lang: Locale; dict: any }) {
  const heroRef = useRef<HTMLDivElement>(null);
  const { scrollYProgress } = useScroll({ target: heroRef, offset: ["start start", "end start"] });
  const heroY = useTransform(scrollYProgress, [0, 1], ["0%", "25%"]);
  const heroOpacity = useTransform(scrollYProgress, [0, 0.7], [1, 0]);

  const [activeFaq, setActiveFaq] = useState<number | null>(null);
  const [formSent, setFormSent] = useState(false);
  const [hoverCase, setHoverCase] = useState<number | null>(null);

  const serviceIcons = [<IconAI />, <IconChain />, <IconMobile />, <IconWeb />];
  const serviceCodes = ["AI / ML", "BC / WEB3", "MOB / DART", "WEB / NEXT"];

  const services = dict.services.items
    ? Object.entries(dict.services.items as Record<string, { title: string; desc: string }>).map(([, val], idx) => ({
      icon: serviceIcons[idx],
      code: serviceCodes[idx],
      title: val.title,
      desc: val.desc,
      items: [
        ["Predictive Models", "NLP Pipelines", "Computer Vision", "Agentic Workflows"],
        ["Smart Contract Audit", "DeFi Architecture", "Tokenomics Design", "Cross-chain Bridges"],
        ["Universal Codebase", "Offline Syncing", "Biometric Protocols", "Core Bundle Optimization"],
        ["Next.js App Router", "Server Components", "Headless Commerce", "Modular API Mesh"],
      ][idx],
    }))
    : [];

  const caseStudies = (dict.work.items as any[]).map((item: any, idx: number) => ({
    ...item,
    tech: [
      ["Python", "TensorFlow", "Next.js", "PostgreSQL"],
      ["Solidity", "React", "IPFS", "Node.js"],
      ["Flutter", "Firebase", "Django", "AWS"],
      ["Next.js", "Stripe", "Redis", "Vercel"],
    ][idx] || ["React", "TypeScript", "Node.js"],
    accent: ["#FFE600", "#FF4500", "#0A0A0A", "#00CC77"][idx] || "#FFE600",
  }));

  const processes = dict.process.items as any[];
  const featuredPosts = blogPosts;
  const faqs = dict.faq.items as any[];

  return (
    <div className="bg-[#F4F0E8] text-[#0A0A0A] font-body selection:bg-[#FFE600] selection:text-[#0A0A0A]">
      {/* Noise overlay */}
      <div className="noise-overlay" />

      <Header lang={lang} dict={dict.nav} />

      {/* ──────────────── HERO ──────────────── */}
      <section ref={heroRef} className="relative min-h-screen flex flex-col justify-end overflow-hidden border-b border-[#C8C2B8]">

        {/* Dot grid bg */}
        <motion.div
          className="absolute inset-0 dot-grid opacity-60"
          style={{ y: heroY, opacity: heroOpacity }}
        />

        {/* Big watermark letters */}
        <motion.div
          className="absolute right-0 bottom-0 font-display font-black text-[22vw] leading-none text-[#E8E3DC] select-none pointer-events-none overflow-hidden"
          style={{ y: useTransform(scrollYProgress, [0, 1], ["0%", "20%"]) }}
          initial={{ opacity: 0, x: 40 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 1.2, delay: 0.5 }}
        >
          AT
        </motion.div>

        {/* Yellow right accent */}
        <div className="absolute top-0 right-0 w-1 h-full bg-[#FFE600]" />

        <div className="relative z-10 max-w-7xl mx-auto px-6 w-full pb-20 pt-40">

          {/* Meta bar */}
          <motion.div
            className="flex items-center justify-between border-b border-[#C8C2B8] pb-6 mb-16"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 0.1, duration: 0.8 }}
          >
            <div className="flex items-center gap-3">
              <span className="w-2 h-2 bg-[#00CC77] rounded-full animate-pulse" />
              <span className="font-mono text-[10px] tracking-[0.25em] uppercase text-[#A0998E]">
                {dict.hero.badge}
              </span>
            </div>
            <span className="font-mono text-[10px] tracking-[0.2em] text-[#A0998E]">
              EST. 2025 — MUĞLA
            </span>
          </motion.div>

          {/* Headline */}
          <div className="mb-12">
            <h1 className="font-display font-black uppercase leading-[0.85] tracking-tight">
              <motion.div className="overflow-hidden" initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.15 }}>
                <motion.span
                  className="block text-[15vw] sm:text-[12vw] lg:text-[10vw] text-[#0A0A0A]"
                  initial={{ y: "105%" }}
                  animate={{ y: 0 }}
                  transition={{ delay: 0.2, duration: 0.9, ease: expo }}
                >
                  {dict.hero.titleLine1}
                </motion.span>
              </motion.div>
              <motion.div className="overflow-hidden" initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.3 }}>
                <motion.span
                  className="block text-[15vw] sm:text-[12vw] lg:text-[10vw] text-stroke"
                  initial={{ y: "105%" }}
                  animate={{ y: 0 }}
                  transition={{ delay: 0.35, duration: 0.9, ease: expo }}
                >
                  {dict.hero.titleLine2}
                </motion.span>
              </motion.div>
            </h1>
          </div>

          {/* Bottom bar */}
          <motion.div
            className="grid grid-cols-1 lg:grid-cols-12 gap-8 border-t border-[#C8C2B8] pt-10"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.6, duration: 0.8 }}
          >
            <div className="lg:col-span-5">
              <p className="text-[#6A6460] text-base leading-relaxed max-w-md">
                {dict.hero.desc}
              </p>
            </div>
            <div className="lg:col-span-7 flex items-end justify-end gap-4 flex-wrap">
              <MagneticBtn href={`/${lang}/contact`} className="btn-brutal btn-brutal-yellow inline-flex items-center gap-3 px-8 py-4 font-display font-black text-[13px] tracking-widest uppercase cursor-pointer">
                {dict.hero.ctaQuote} <IconArrow />
              </MagneticBtn>
              <MagneticBtn href={`/${lang}/work`} className="btn-brutal inline-flex items-center gap-3 px-8 py-4 font-display font-black text-[13px] tracking-widest uppercase cursor-pointer">
                {dict.hero.ctaWork}
              </MagneticBtn>
            </div>
          </motion.div>
        </div>
      </section>

      {/* ──────────────── MARQUEE 1 ──────────────── */}
      <Marquee text="AI SOLUTIONS · BLOCKCHAIN DEV · MOBILE APPS · WEB PLATFORMS · DIGITAL TRANSFORMATION" />

      {/* ──────────────── STATS ──────────────── */}
      <section className="border-b border-[#C8C2B8] bg-[#F4F0E8]">
        <div className="max-w-7xl mx-auto px-6 grid grid-cols-2 md:grid-cols-4">
          {[
            { val: 48, suffix: "+", label: dict.stats.deliveries },
            { val: 98, suffix: "%", label: dict.stats.retention },
            { val: 12, suffix: "+", label: dict.stats.regions },
            { val: 1, suffix: "wk", label: lang === "tr" ? "MVP Süresi" : "Avg Cycle To MVP" },
          ].map((s, idx) => (
            <motion.div
              key={idx}
              className={`py-12 px-6 flex flex-col justify-center ${idx < 3 ? "border-r border-[#C8C2B8]" : ""} ${idx < 2 ? "border-b md:border-b-0 border-[#C8C2B8]" : ""}`}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: idx * 0.1, duration: 0.6 }}
            >
              <div className="font-display font-black text-5xl sm:text-6xl text-[#0A0A0A] leading-none mb-2">
                <Counter target={s.val} suffix={s.suffix} />
              </div>
              <div className="font-mono text-[10px] tracking-[0.25em] uppercase text-[#A0998E]">
                {s.label}
              </div>
            </motion.div>
          ))}
        </div>
      </section>

      {/* ──────────────── SERVICES ──────────────── */}
      <section id="services" className="py-24 border-b border-[#C8C2B8]">
        <div className="max-w-7xl mx-auto px-6">

          <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 mb-16">
            <div className="lg:col-span-7">
              <Label>{dict.services.badge}</Label>
              <h2 className="font-display font-black uppercase text-5xl sm:text-6xl lg:text-7xl leading-[0.9] tracking-tight">
                <SplitReveal text={dict.services.title} />
              </h2>
            </div>
            <div className="lg:col-span-5 flex items-end">
              <p className="text-[#6A6460] leading-relaxed border-l-2 border-[#FFE600] pl-6">
                {dict.services.desc}
              </p>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-px bg-[#C8C2B8]">
            {services.map((s, idx) => (
              <motion.div
                key={idx}
                className="group bg-[#F4F0E8] p-10 cursor-pointer relative overflow-hidden"
                initial={{ opacity: 0 }}
                whileInView={{ opacity: 1 }}
                viewport={{ once: true }}
                transition={{ delay: idx * 0.1 }}
                whileHover={{ backgroundColor: "#EDE8E0" }}
              >
                {/* Hover accent left bar */}
                <motion.div
                  className="absolute left-0 top-0 bottom-0 w-1 bg-[#FFE600]"
                  initial={{ scaleY: 0 }}
                  whileHover={{ scaleY: 1 }}
                  transition={{ duration: 0.2 }}
                  style={{ transformOrigin: "top" }}
                />

                <div className="flex items-start justify-between mb-8">
                  <div className="w-12 h-12 border border-[#C8C2B8] group-hover:border-[#0A0A0A] group-hover:bg-[#0A0A0A] group-hover:text-[#FFE600] flex items-center justify-center text-[#6A6460] transition-colors duration-200">
                    {s.icon}
                  </div>
                  <span className="font-mono text-[10px] tracking-[0.2em] uppercase text-[#C8C2B8] group-hover:text-[#A0998E] transition-colors duration-200">
                    {s.code}
                  </span>
                </div>

                <h3 className="font-display font-black text-2xl uppercase text-[#0A0A0A] mb-3 group-hover:text-[#0A0A0A] transition-colors duration-200">
                  {s.title}
                </h3>
                <p className="text-[#8A8480] text-sm leading-relaxed mb-8">
                  {s.desc}
                </p>

                <div className="flex flex-wrap gap-2 pt-6 border-t border-[#D8D3CA]">
                  {s.items?.map((item: string) => (
                    <span key={item} className="font-mono text-[10px] tracking-wider uppercase px-3 py-1.5 border border-[#C8C2B8] text-[#8A8480] group-hover:border-[#0A0A0A] group-hover:text-[#0A0A0A] transition-colors">
                      {item}
                    </span>
                  ))}
                </div>

                {/* Number watermark */}
                <div className="absolute bottom-4 right-6 font-display font-black text-[6rem] leading-none text-[#E8E3DC] select-none pointer-events-none">
                  {String(idx + 1).padStart(2, "0")}
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* ──────────────── MARQUEE 2 ──────────────── */}
      <Marquee text="CASE STUDIES · FINTECH · WEB3 · HEALTHCARE · E-COMMERCE · ENTERPRISE SCALE" reverse />

      {/* ──────────────── CASE STUDIES ──────────────── */}
      <section id="work" className="py-24 border-b border-[#C8C2B8]">
        <div className="max-w-7xl mx-auto px-6">

          <div className="mb-16">
            <Label>{dict.work.badge}</Label>
            <h2 className="font-display font-black uppercase text-5xl sm:text-6xl lg:text-7xl leading-[0.9] tracking-tight">
              <SplitReveal text={dict.work.title} />
            </h2>
          </div>

          <div className="border-t border-[#C8C2B8]">
            {caseStudies.map((study: any, idx: number) => (
              <motion.div
                key={idx}
                className="group border-b border-[#C8C2B8] cursor-pointer"
                onHoverStart={() => setHoverCase(idx)}
                onHoverEnd={() => setHoverCase(null)}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: idx * 0.08 }}
              >
                <div className="grid grid-cols-12 items-center py-8 gap-6">
                  {/* Index */}
                  <div className="col-span-1 hidden md:block">
                    <span className="font-mono text-[10px] text-[#C8C2B8]">{study.num}</span>
                  </div>

                  {/* Title */}
                  <div className="col-span-12 md:col-span-4">
                    <div className="flex items-center gap-4">
                      <motion.div
                        className="w-10 h-10 flex-shrink-0 flex items-center justify-center font-display font-black text-[11px] border-2 border-[#0A0A0A]"
                        style={{ backgroundColor: hoverCase === idx ? study.accent : "transparent", color: "#0A0A0A" }}
                        animate={{ rotate: hoverCase === idx ? 45 : 0 }}
                        transition={{ duration: 0.2 }}
                      >
                        ↗
                      </motion.div>
                      <h3 className="font-display font-black text-xl uppercase text-[#0A0A0A] group-hover:text-[#0A0A0A]">
                        {study.title}
                      </h3>
                    </div>
                  </div>

                  {/* Tag */}
                  <div className="col-span-6 md:col-span-2">
                    <span className="font-mono text-[10px] tracking-[0.15em] uppercase text-[#8A8480] border border-[#C8C2B8] px-3 py-1.5 group-hover:border-[#0A0A0A] group-hover:text-[#0A0A0A] transition-colors duration-200">
                      {study.tag}
                    </span>
                  </div>

                  {/* Description */}
                  <div className="col-span-12 md:col-span-4">
                    <p className="text-[#8A8480] text-[13px] leading-relaxed group-hover:text-[#6A6460] transition-colors">
                      {study.desc}
                    </p>
                  </div>

                  {/* Arrow */}
                  <div className="col-span-6 md:col-span-1 flex justify-end">
                    <motion.div
                      className="text-[#C8C2B8] group-hover:text-[#0A0A0A] transition-colors"
                      animate={{ x: hoverCase === idx ? 4 : 0 }}
                    >
                      <IconArrowUpRight />
                    </motion.div>
                  </div>
                </div>

                {/* Expanded tech stack */}
                <AnimatePresence>
                  {hoverCase === idx && (
                    <motion.div
                      className="pb-6 flex flex-wrap gap-2 pl-0 md:pl-[calc(8.33%+1.5rem)]"
                      initial={{ height: 0, opacity: 0 }}
                      animate={{ height: "auto", opacity: 1 }}
                      exit={{ height: 0, opacity: 0 }}
                      transition={{ duration: 0.25, ease: expo }}
                    >
                      <span className="font-mono text-[9px] tracking-[0.2em] uppercase text-[#C8C2B8] pr-3">STACK:</span>
                      {study.tech.map((t: string) => (
                        <span key={t} className="font-mono text-[9px] tracking-wider uppercase px-2.5 py-1 bg-[#EDE8E0] text-[#6A6460] border border-[#C8C2B8]">
                          {t}
                        </span>
                      ))}
                    </motion.div>
                  )}
                </AnimatePresence>
              </motion.div>
            ))}
          </div>

          <motion.div
            className="mt-12 flex justify-end"
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            viewport={{ once: true }}
          >
            <a href={`/${lang}/work`} className="btn-brutal inline-flex items-center gap-3 px-8 py-4 font-display font-black text-[12px] tracking-widest uppercase cursor-pointer">
              {dict.work.analyzeBtn} <IconArrow />
            </a>
          </motion.div>
        </div>
      </section>

      {/* ──────────────── PROCESS ──────────────── */}
      <section id="process" className="py-24 border-b border-[#C8C2B8] bg-[#EDE8E0]">
        <div className="max-w-7xl mx-auto px-6">

          <div className="mb-20">
            <Label>{dict.process.badge}</Label>
            <h2 className="font-display font-black uppercase text-5xl sm:text-6xl lg:text-7xl leading-[0.9] tracking-tight">
              <SplitReveal text={dict.process.title} />
            </h2>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-px bg-[#C8C2B8]">
            {processes.map((p: any, idx: number) => (
              <motion.div
                key={idx}
                className="bg-[#EDE8E0] p-8 relative overflow-hidden group"
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: idx * 0.12, duration: 0.6 }}
                whileHover={{ backgroundColor: "#E8E3DA" }}
              >
                <div className="absolute top-0 right-0 font-display font-black text-[7rem] leading-none text-[#D8D3CA] select-none pointer-events-none">
                  {p.num}
                </div>

                <div className="relative z-10">
                  <motion.div
                    className="w-8 h-1 bg-[#FFE600] mb-8"
                    initial={{ scaleX: 0 }}
                    whileInView={{ scaleX: 1 }}
                    viewport={{ once: true }}
                    style={{ transformOrigin: "left" }}
                    transition={{ delay: idx * 0.12 + 0.3, duration: 0.5 }}
                  />
                  <div className="font-mono text-[9px] tracking-[0.3em] uppercase text-[#A0998E] mb-4">
                    {p.timeframe}
                  </div>
                  <h3 className="font-display font-black text-lg uppercase text-[#0A0A0A] mb-4 group-hover:text-[#0A0A0A] transition-colors">
                    {p.title}
                  </h3>
                  <p className="text-[#7A7470] text-[13px] leading-relaxed">
                    {p.desc}
                  </p>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* ──────────────── BLOG FEATURED ──────────────── */}
      <section id="blog" className="py-24 border-b border-[#C8C2B8]">
        <div className="max-w-7xl mx-auto px-6">

          <div className="flex flex-col md:flex-row md:items-end justify-between gap-8 mb-16">
            <div>
              <Label>{dict.blog.badge}</Label>
              <h2 className="font-display font-black uppercase text-5xl sm:text-6xl leading-[0.9] tracking-tight">
                <SplitReveal text={dict.blog.title} />
              </h2>
            </div>
            <Link
              href={`/${lang}/blog`}
              className="font-mono text-[10px] tracking-[0.2em] uppercase text-[#0A0A0A] border-b-2 border-[#0A0A0A] pb-1 hover:text-[#FF4500] hover:border-[#FF4500] transition-colors self-start md:self-auto"
            >
              {dict.blog.viewAll} →
            </Link>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {featuredPosts.map((post, idx) => {
              const content = post[lang] || post.en;
              const accent = ["#FFE600", "#FF4500", "#00CC77"][idx] || "#FFE600";
              return (
                <motion.div
                  key={post.slug}
                  className="group flex flex-col bg-[#F4F0E8] border border-[#C8C2B8] hover:border-[#0A0A0A] p-8 relative overflow-hidden transition-all duration-300 h-full"
                  initial={{ opacity: 0, y: 30 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ delay: idx * 0.1, duration: 0.6 }}
                  whileHover={{ y: -6, backgroundColor: "#EDE8E0", boxShadow: "4px 4px 0px 0px #0A0A0A" }}
                >
                  <div className="flex items-center gap-3 mb-6">
                    <span
                      className="font-mono text-[9px] tracking-[0.2em] uppercase px-2.5 py-1 border border-[#C8C2B8] text-[#6A6460]"
                      style={{ borderLeftColor: accent, borderLeftWidth: 3 }}
                    >
                      {content.category}
                    </span>
                    <span className="font-mono text-[9px] text-[#A0998E]">
                      {post.date}
                    </span>
                  </div>

                  <h3 className="font-display font-black text-xl uppercase text-[#0A0A0A] mb-4 leading-tight group-hover:text-[#0A0A0A]">
                    {content.title}
                  </h3>

                  <p className="text-[#6A6460] text-[13px] leading-relaxed mb-8 flex-grow">
                    {content.excerpt}
                  </p>

                  <div className="pt-6 border-t border-[#C8C2B8] flex items-center justify-between mt-auto">
                    <div className="flex flex-col">
                      <span className="font-display font-black text-[11px] uppercase text-[#0A0A0A]">{post.author}</span>
                      <span className="font-mono text-[9px] text-[#A0998E] uppercase tracking-wider">{post.authorRole}</span>
                    </div>
                    <Link
                      href={`/${lang}/blog/${post.slug}`}
                      className="w-10 h-10 border border-[#C8C2B8] group-hover:border-[#0A0A0A] group-hover:bg-[#0A0A0A] group-hover:text-[#FFE600] text-[#0A0A0A] flex items-center justify-center transition-all"
                    >
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                        <line x1="5" y1="12" x2="19" y2="12" />
                        <polyline points="12 5 19 12 12 19" />
                      </svg>
                    </Link>
                  </div>

                  {/* Top line category accent */}
                  <div className="absolute top-0 left-0 right-0 h-1 transition-colors" style={{ backgroundColor: accent }} />
                </motion.div>
              );
            })}
          </div>
        </div>
      </section>

      {/* ──────────────── FAQ ──────────────── */}
      <section id="faq" className="py-24 border-b border-[#C8C2B8] bg-[#EDE8E0]">
        <div className="max-w-4xl mx-auto px-6">

          <div className="mb-16">
            <Label>{dict.faq.badge}</Label>
            <h2 className="font-display font-black uppercase text-5xl sm:text-6xl leading-[0.9] tracking-tight">
              <SplitReveal text={dict.faq.title} />
            </h2>
          </div>

          <div>
            {faqs.map((faq: any, idx: number) => (
              <motion.div
                key={idx}
                className="border-b border-[#C8C2B8]"
                initial={{ opacity: 0 }}
                whileInView={{ opacity: 1 }}
                viewport={{ once: true }}
                transition={{ delay: idx * 0.06 }}
              >
                <button
                  className="w-full flex items-center justify-between py-6 text-left cursor-pointer group"
                  onClick={() => setActiveFaq(activeFaq === idx ? null : idx)}
                >
                  <span className="font-display font-black text-base sm:text-lg uppercase text-[#0A0A0A] pr-8 leading-snug">
                    {faq.q}
                  </span>
                  <motion.div
                    className="flex-shrink-0 w-8 h-8 border border-[#C8C2B8] group-hover:border-[#0A0A0A] group-hover:bg-[#FFE600] text-[#8A8480] group-hover:text-[#0A0A0A] flex items-center justify-center transition-colors"
                    animate={{ rotate: activeFaq === idx ? 45 : 0 }}
                  >
                    <IconPlus />
                  </motion.div>
                </button>

                <AnimatePresence initial={false}>
                  {activeFaq === idx && (
                    <motion.div
                      initial={{ height: 0, opacity: 0 }}
                      animate={{ height: "auto", opacity: 1 }}
                      exit={{ height: 0, opacity: 0 }}
                      transition={{ duration: 0.3, ease: expo }}
                    >
                      <p className="text-[#6A6460] text-[14px] leading-relaxed pb-6 border-l-2 border-[#FFE600] pl-6">
                        {faq.a}
                      </p>
                    </motion.div>
                  )}
                </AnimatePresence>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* ──────────────── CONTACT ──────────────── */}
      <section id="contact" className="py-24 border-b border-[#C8C2B8]">
        <div className="max-w-7xl mx-auto px-6">

          <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 mb-16">
            <div className="lg:col-span-7">
              <Label>{dict.contact.badge}</Label>
              <h2 className="font-display font-black uppercase text-5xl sm:text-6xl lg:text-7xl leading-[0.9] tracking-tight">
                <SplitReveal text={dict.contact.title} />
              </h2>
            </div>
            <div className="lg:col-span-5 flex items-end">
              <p className="text-[#6A6460] leading-relaxed border-l-2 border-[#FFE600] pl-6">
                {dict.contact.desc}
              </p>
            </div>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-12 gap-px bg-[#C8C2B8]">

            {/* Form */}
            <div className="lg:col-span-8 bg-[#F4F0E8] p-10">
              <AnimatePresence mode="wait">
                {!formSent ? (
                  <motion.form
                    key="form"
                    onSubmit={(e) => { e.preventDefault(); setFormSent(true); }}
                    exit={{ opacity: 0, y: -10 }}
                    transition={{ duration: 0.3 }}
                  >
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
                      {[
                        { label: dict.contact.formName, placeholder: dict.contact.formNamePlaceholder, type: "text" },
                        { label: dict.contact.formEmail, placeholder: dict.contact.formEmailPlaceholder, type: "email" },
                        { label: dict.contact.formCompany, placeholder: dict.contact.formCompanyPlaceholder, type: "text" },
                        { label: dict.contact.formTrack, type: "select", options: ["$5k – $20k", "$20k – $50k", "$50k – $100k", "$100k+"] },
                      ].map((field, fi) => (
                        <div key={fi} className="flex flex-col">
                          <label className="font-mono text-[9px] tracking-[0.3em] uppercase text-[#A0998E] mb-3">{field.label}</label>
                          {field.type === "select" ? (
                            <select className="bg-transparent border-b border-[#C8C2B8] focus:border-[#0A0A0A] text-[#0A0A0A] text-sm py-3 focus:outline-none transition-colors cursor-pointer appearance-none">
                              {field.options?.map(opt => <option key={opt} value={opt} className="bg-[#F4F0E8]">{opt}</option>)}
                            </select>
                          ) : (
                            <input
                              required
                              type={field.type}
                              placeholder={field.placeholder}
                              className="bg-transparent border-b border-[#C8C2B8] focus:border-[#0A0A0A] text-[#0A0A0A] placeholder-[#C8C2B8] text-sm py-3 focus:outline-none transition-colors rounded-none"
                            />
                          )}
                        </div>
                      ))}
                    </div>

                    <div className="flex flex-col mb-8">
                      <label className="font-mono text-[9px] tracking-[0.3em] uppercase text-[#A0998E] mb-3">{dict.contact.formScope}</label>
                      <textarea
                        required
                        rows={4}
                        placeholder={dict.contact.formScopePlaceholder}
                        className="bg-transparent border-b border-[#C8C2B8] focus:border-[#0A0A0A] text-[#0A0A0A] placeholder-[#C8C2B8] text-sm py-3 focus:outline-none transition-colors resize-none rounded-none"
                      />
                    </div>

                    <motion.button
                      type="submit"
                      className="btn-brutal btn-brutal-yellow w-full py-5 font-display font-black text-[13px] tracking-widest uppercase cursor-pointer"
                      whileTap={{ scale: 0.98 }}
                    >
                      {dict.contact.formSubmit}
                    </motion.button>
                  </motion.form>
                ) : (
                  <motion.div
                    key="success"
                    className="py-16 flex flex-col items-center text-center"
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.4 }}
                  >
                    <div className="w-16 h-16 bg-[#FFE600] border-2 border-[#0A0A0A] flex items-center justify-center mb-8">
                      <IconCheck />
                    </div>
                    <h3 className="font-display font-black text-3xl uppercase text-[#0A0A0A] mb-3">
                      {dict.contact.submittedTitle}
                    </h3>
                    <p className="text-[#6A6460] text-sm max-w-sm mb-8">
                      {dict.contact.submittedText}
                    </p>
                    <button
                      onClick={() => setFormSent(false)}
                      className="btn-brutal px-6 py-3 font-display font-black text-[11px] tracking-widest uppercase cursor-pointer"
                    >
                      {lang === "tr" ? "Yeni Talep" : "New Request"}
                    </button>
                  </motion.div>
                )}
              </AnimatePresence>
            </div>

            {/* Sidebar info */}
            <div className="lg:col-span-4 bg-[#F4F0E8]">
              <div className="border-b border-[#C8C2B8] p-8">
                <div className="font-mono text-[9px] tracking-[0.3em] uppercase text-[#A0998E] mb-3">
                  {dict.contact.infoDirect}
                </div>
                <div className="font-display font-black text-base text-[#0A0A0A]">
                  hello@ayristech.com
                </div>
              </div>
              <div className="border-b border-[#C8C2B8] p-8">
                <div className="font-mono text-[9px] tracking-[0.3em] uppercase text-[#A0998E] mb-3">
                  {dict.contact.infoBlueprint}
                </div>
                <div className="font-display font-black text-base text-[#0A0A0A]">
                  +90 532 000 00 00
                </div>
              </div>
              <div className="p-8">
                <div className="font-mono text-[9px] tracking-[0.3em] uppercase text-[#A0998E] mb-3">
                  {lang === "tr" ? "Genel Merkez" : "HQ Coordinates"}
                </div>
                <div className="font-display font-black text-base text-[#0A0A0A]">
                  {dict.contact.infoBaseText}
                </div>
              </div>

              {/* Yellow CTA block */}
              <div className="bg-[#FFE600] p-8 border-t-2 border-[#0A0A0A]">
                <p className="font-display font-black text-sm uppercase text-[#0A0A0A] leading-snug">
                  {lang === "tr"
                    ? "Teknik ekibimiz 12 saat içinde geri döner."
                    : "Our team responds within 12 operational hours."}
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

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