"use client";

import { motion, useScroll, useTransform } from "framer-motion";
import { useRef } from "react";
import type { DemoData } from "@/data/demos";
import AnimatedCounter from "@/components/ui/AnimatedCounter";

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

const fadeUp = {
  hidden: { opacity: 0, y: 40 },
  show: { opacity: 1, y: 0, transition: { duration: 0.7, ease: easeOutExpo } },
};
const stagger = { hidden: {}, show: { transition: { staggerChildren: 0.1 } } };

export default function KurumsalTemplate({ data }: { data: DemoData }) {
  const { firma, istatistikler, hizmetler, yorumlar, projeler = [], ekip = [] } = data;
  const heroRef = useRef<HTMLDivElement>(null);
  const { scrollYProgress } = useScroll({ target: heroRef, offset: ["start start", "end start"] });
  const heroY = useTransform(scrollYProgress, [0, 1], ["0%", "20%"]);

  return (
    <div className="bg-[#FAF9F6] text-[#1C1917] font-body">
      
      {/* ── HEADER ── */}
      <motion.header
        className="fixed top-0 left-0 right-0 z-50 px-6 pt-5"
        initial={{ y: -80 }}
        animate={{ y: 0 }}
        transition={{ duration: 0.6, ease: easeOutExpo }}>
        <div className="mx-auto max-w-6xl px-6 h-16 flex items-center justify-between bg-[#FAF9F6]/80 backdrop-blur-md border border-[#E7E5E4] rounded-full">
          <div className="flex items-center gap-3">
            <div className="w-8 h-8 rounded-lg bg-[#1C1917] flex items-center justify-center text-sm font-bold text-[#FAF9F6]">
              {firma.logoEmoji}
            </div>
            <span className="font-display font-bold text-[15px] tracking-tight">{firma.adi}</span>
          </div>
          <nav className="hidden md:flex items-center gap-8">
            {["Hizmetler", "Projeler", "Ekip", "İletişim"].map(item => (
              <a key={item} href={`#${item.toLowerCase()}`}
                 className="text-[12px] font-medium tracking-tight text-[#78716C] hover:text-[#1C1917] transition-colors">
                {item}
              </a>
            ))}
          </nav>
          <motion.a href="#iletisim"
            className="hidden md:flex items-center gap-2 text-[12px] font-bold text-[#FAF9F6] bg-[#1C1917] px-5 py-2.5 rounded-full hover:bg-[#33302E] transition-colors"
            whileTap={{ scale: 0.97 }}>
            Teklif Al
          </motion.a>
        </div>
      </motion.header>

      {/* ── HERO ── */}
      <section ref={heroRef} className="relative min-h-screen flex items-center overflow-hidden bg-[#FAF9F6] pt-24">
        {/* Subtle grid pattern */}
        <div className="absolute inset-0 pointer-events-none opacity-[0.03]"
          style={{ backgroundImage: "radial-gradient(#1C1917 1px, transparent 1px)", backgroundSize: "32px 32px" }} />

        <div className="relative z-10 max-w-6xl mx-auto px-6 w-full grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
          
          <motion.div className="lg:col-span-8" variants={stagger} initial="hidden" animate="show">
            <motion.div variants={fadeUp}
              className="inline-flex items-center gap-2 text-[11px] font-bold uppercase tracking-wider text-[#78716C] mb-8"
            >
              <span className="w-1.5 h-1.5 rounded-full bg-[#10B981]" />
              {firma.sehir} · {istatistikler[0]?.deger} Lojistik Hizmeti
            </motion.div>

            <motion.h1 variants={fadeUp}
              className="font-display font-black text-[12vw] sm:text-[8vw] lg:text-[5vw] leading-[0.9] tracking-tight uppercase text-[#1C1917] mb-8">
              Lojistikte<br />
              <span className="text-transparent stroke-text" style={{ WebkitTextStroke: "1px #1C1917" }}>Yeni Nesil</span> Ağı.
            </motion.h1>

            <motion.p variants={fadeUp} className="text-[#57534E] text-base sm:text-lg leading-relaxed max-w-xl mb-10 font-light">
              {firma.slogan}. Tedarik zincirinizin uçtan uca akışını optimize etmek için geliştirilmiş son derece güvenli ve anlık takip edilebilen operasyon sistemleri.
            </motion.p>

            <motion.div variants={fadeUp} className="flex flex-wrap gap-4 mb-12">
              <motion.a href="#iletisim"
                className="flex items-center justify-center px-8 py-4 rounded-full font-bold text-[13px] tracking-wide uppercase bg-[#1C1917] text-[#FAF9F6] cursor-pointer hover:bg-[#33302E] transition-all duration-200"
                whileTap={{ scale: 0.97 }}>
                Teklif Al →
              </motion.a>
              <motion.a href="#projeler"
                className="flex items-center justify-center px-8 py-4 rounded-full font-bold text-[13px] tracking-wide uppercase border border-[#E7E5E4] text-[#1C1917] hover:bg-[#E7E5E4]/20 transition-all cursor-pointer duration-200"
                whileTap={{ scale: 0.97 }}>
                Referanslar
              </motion.a>
            </motion.div>

            {/* Stats row */}
            <motion.div variants={fadeUp}
              className="grid grid-cols-2 sm:grid-cols-4 gap-6 pt-10 border-t border-[#E7E5E4]">
              {istatistikler.map((s, i) => (
                <div key={i}>
                  <div className="text-3xl font-display font-black text-[#1C1917]">
                    <AnimatedCounter target={parseInt(s.deger.replace(/\D/g, "")) || 0}
                                     suffix={s.deger.replace(/[0-9]/g, "")} />
                  </div>
                  <div className="text-[#78716C] text-[10px] uppercase tracking-wider font-semibold mt-1">{s.etiket}</div>
                </div>
              ))}
            </motion.div>
          </motion.div>

          {/* Bento grid right side */}
          <motion.div
            className="lg:col-span-4 hidden lg:grid grid-cols-2 gap-4"
            initial={{ opacity: 0, x: 60 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.9, delay: 0.3 }}
            style={{ y: heroY }}
          >
            {hizmetler.slice(0, 4).map((h, i) => (
              <div key={i} className="bg-[#FAF9F6] border border-[#E7E5E4] rounded-3xl p-6 shadow-sm">
                <div className="w-10 h-10 rounded-xl bg-[#1C1917]/5 flex items-center justify-center mb-4 text-xl">
                  {h.ikon}
                </div>
                <h3 className="font-display font-black text-[12px] uppercase text-[#1C1917] mb-1">{h.baslik}</h3>
                <p className="text-[#78716C] text-[10px] leading-relaxed font-light">{h.aciklama}</p>
              </div>
            ))}
          </motion.div>
        </div>
      </section>

      {/* ── HİZMETLER TAM ── */}
      <section id="hizmetler" className="py-24 px-6 border-t border-[#E7E5E4] bg-[#FAF9F6]">
        <div className="max-w-6xl mx-auto">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 border-b border-[#E7E5E4] pb-12 mb-16">
            <div className="lg:col-span-5">
              <span className="inline-block text-[11px] font-bold uppercase tracking-widest px-3 py-1 bg-[#FAF9F6] border border-[#E7E5E4] rounded-full text-[#78716C] mb-4">
                Uçtan Uca Çözümler
              </span>
              <h2 className="font-display font-black text-4xl sm:text-5xl uppercase leading-tight tracking-tight text-[#1C1917]">
                Kapsamlı Lojistik Paketi
              </h2>
            </div>
            <div className="lg:col-span-7 flex items-end">
              <p className="text-[#57534E] text-base leading-relaxed font-light lg:pl-8 border-l border-transparent lg:border-[#E7E5E4]">
                Operasyonel mükemmeliyetçiliği temel alan depolama, yurt içi dağıtım ve anlık takip sistemlerimizle tedarik zincirinize tam entegrasyon sunuyoruz.
              </p>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {hizmetler.map((h, i) => (
              <motion.div key={i}
                className="bg-[#FAF9F6] border border-[#E7E5E4] rounded-3xl p-8 hover:border-[#1C1917] transition-all duration-300 flex flex-col justify-between min-h-[220px]"
                whileHover={{ y: -4 }}
                initial="hidden"
                whileInView="show"
                viewport={{ once: true }}
                variants={fadeUp}>
                <div>
                  <div className="w-10 h-10 rounded-xl bg-[#1C1917]/5 flex items-center justify-center mb-6 text-xl">
                    {h.ikon}
                  </div>
                  <h3 className="font-display font-black text-xl uppercase text-[#1C1917] mb-2">{h.baslik}</h3>
                  <p className="text-[#57534E] text-[13px] leading-relaxed font-light">{h.aciklama}</p>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* ── REFERANSLAR ── */}
      <section id="projeler" className="py-24 px-6 border-t border-[#E7E5E4] bg-[#FAF9F6]">
        <div className="max-w-6xl mx-auto">
          <div className="mb-16">
            <span className="inline-block text-[11px] font-bold uppercase tracking-widest px-3 py-1 bg-[#FAF9F6] border border-[#E7E5E4] rounded-full text-[#78716C] mb-4">
              Güçlü Referanslar
            </span>
            <h2 className="font-display font-black text-4xl sm:text-5xl uppercase tracking-tight text-[#1C1917]">
              Birlikte Yol Aldıklarımız
            </h2>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {projeler.map((p, i) => (
              <motion.div key={i}
                className="bg-[#FAF9F6] border border-[#E7E5E4] rounded-3xl p-7 flex flex-col justify-between hover:border-[#1C1917] transition-all duration-300 relative overflow-hidden"
                whileHover={{ y: -4 }}
                initial="hidden"
                whileInView="show"
                viewport={{ once: true }}
                variants={fadeUp}>
                <div className="flex items-start gap-5">
                  <div className="w-14 h-14 rounded-2xl flex items-center justify-center text-2xl shrink-0"
                       style={{ background: `${p.renk}10` }}>
                    {p.ikon}
                  </div>
                  <div>
                    <div className="flex items-center gap-3 mb-2">
                      <h3 className="font-display font-black text-[16px] uppercase text-[#1C1917]">{p.baslik}</h3>
                      <span className="text-[10px] font-bold px-2 py-0.5 rounded-full"
                            style={{ background: `${p.renk}10`, color: p.renk }}>
                        {p.sektor}
                      </span>
                    </div>
                    <p className="text-[#57534E] text-[13px] leading-relaxed font-light">{p.aciklama}</p>
                  </div>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* ── EKİP ── */}
      {ekip.length > 0 && (
        <section id="ekip" className="py-24 px-6 border-t border-[#E7E5E4] bg-[#FAF9F6]">
          <div className="max-w-6xl mx-auto">
            <div className="mb-16">
              <span className="inline-block text-[11px] font-bold uppercase tracking-widest px-3 py-1 bg-[#FAF9F6] border border-[#E7E5E4] rounded-full text-[#78716C] mb-4">
                Operasyon Liderleri
              </span>
              <h2 className="font-display font-black text-4xl sm:text-5xl uppercase tracking-tight text-[#1C1917]">
                Yönetim Ekibimiz
              </h2>
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
              {ekip.map((k, i) => (
                <motion.div key={i}
                  className="bg-[#FAF9F6] border border-[#E7E5E4] rounded-3xl overflow-hidden hover:border-[#1C1917] transition-all duration-300 flex flex-col justify-between"
                  whileHover={{ y: -6 }}
                  initial="hidden"
                  whileInView="show"
                  viewport={{ once: true }}
                  variants={fadeUp}>
                  <div className="h-40 bg-[#FAF9F6] border-b border-[#E7E5E4] flex items-center justify-center text-5xl">
                    <span>{k.emoji}</span>
                  </div>
                  <div className="p-6">
                    <h3 className="font-display font-black text-[15px] uppercase text-[#1C1917]">{k.ad}</h3>
                    <p className="text-[12px] font-bold uppercase tracking-wider text-[#78716C] mt-0.5">{k.rol}</p>
                  </div>
                </motion.div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* ── YORUMLAR ── */}
      <section id="yorumlar" className="py-24 px-6 border-t border-[#E7E5E4] bg-[#FAF9F6]">
        <div className="max-w-6xl mx-auto">
          <div className="mb-16">
            <span className="inline-block text-[11px] font-bold uppercase tracking-widest px-3 py-1 bg-[#FAF9F6] border border-[#E7E5E4] rounded-full text-[#78716C] mb-4">
              Müşteri Deneyimleri
            </span>
            <h2 className="font-display font-black text-4xl sm:text-5xl uppercase tracking-tight text-[#1C1917]">
              Ortaklarımız Ne Söylüyor?
            </h2>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {yorumlar.map((y, i) => (
              <motion.div key={i}
                className="bg-[#FAF9F6] border border-[#E7E5E4] rounded-3xl p-7 hover:border-[#1C1917] transition-all duration-300 flex flex-col justify-between"
                whileHover={{ y: -4 }}
                initial="hidden"
                whileInView="show"
                viewport={{ once: true }}
                variants={fadeUp}>
                <div>
                  <div className="flex gap-1 mb-4">
                    {[...Array(y.puan)].map((_, j) => (
                      <span key={j} className="text-[#10B981]">★</span>
                    ))}
                  </div>
                  <p className="text-[#57534E] text-[13px] leading-relaxed italic mb-6 font-light">&ldquo;{y.yorum}&rdquo;</p>
                </div>
                <div className="flex items-center gap-3 pt-4 border-t border-[#E7E5E4]/60">
                  <span className="text-xl">{y.emoji}</span>
                  <div>
                    <p className="text-[#1C1917] font-bold text-xs uppercase tracking-tight">{y.yazar}</p>
                    <p className="text-gray-400 text-[10px] mt-0.5">{y.tarih}</p>
                  </div>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* ── İLETİŞİM ── */}
      <section id="iletisim" className="py-24 px-6 border-t border-[#E7E5E4] bg-[#FAF9F6]">
        <div className="max-w-4xl mx-auto text-center">
          <span className="inline-block text-[11px] font-bold uppercase tracking-widest px-3 py-1 bg-[#FAF9F6] border border-[#E7E5E4] rounded-full text-[#78716C] mb-4">
            Operational Blueprint
          </span>
          <h2 className="font-display font-black text-4xl sm:text-5xl uppercase tracking-tight text-[#1C1917] mb-6">
            Birlikte Değer Katalım
          </h2>
          <p className="text-[#57534E] text-lg font-light mb-10 max-w-xl mx-auto">
            Hacminiz ve operasyon sıklığınız ne olursa olsun, lojistik süreçlerinizi en güvenli hatlarla optimize etmek üzere teklif isteyin.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <motion.a href={`tel:${firma.telefon}`}
              className="flex items-center justify-center gap-2 px-8 py-4 rounded-full bg-[#1C1917] text-[#FAF9F6] font-bold text-[13px] tracking-wide uppercase hover:bg-[#33302E] transition-colors"
              whileHover={{ scale: 1.04 }} whileTap={{ scale: 0.97 }}>
              📞 {firma.telefon}
            </motion.a>
            <motion.a href={`mailto:${firma.email}`}
              className="flex items-center justify-center gap-2 px-8 py-4 rounded-full border border-[#E7E5E4] text-[#1C1917] font-bold text-[13px] tracking-wide uppercase hover:bg-[#E7E5E4]/20 transition-all"
              whileHover={{ scale: 1.04 }} whileTap={{ scale: 0.97 }}>
              ✉️ {firma.email}
            </motion.a>
          </div>
        </div>
      </section>

      {/* ── FOOTER ── */}
      <footer className="border-t border-[#E7E5E4] bg-[#FAF9F6] px-6 pt-16 pb-8">
        <div className="max-w-6xl mx-auto flex flex-col sm:flex-row justify-between items-center gap-4 text-[12px] text-[#78716C]">
          <p>© 2026 {firma.adi}. Tüm hakları saklıdır.</p>
          <p className="hover:text-[#1C1917] transition-colors font-light">Gizlilik Politikası</p>
        </div>
      </footer>

      <style jsx global>{`
        .stroke-text {
          font-weight: 900;
          color: transparent;
        }
      `}</style>

    </div>
  );
}
