"use client";

import { motion, AnimatePresence } from "framer-motion";
import { demos } from "@/data/demos";
import Link from "next/link";
import { useState } from "react";

const fadeUp = {
  hidden: { opacity: 0, y: 30 },
  show: { opacity: 1, y: 0, transition: { duration: 0.65, ease: [0.25, 0.46, 0.45, 0.94] as [number, number, number, number] } },
};
const stagger = { hidden: {}, show: { transition: { staggerChildren: 0.08 } } };

const templateLabels: Record<string, { label: string; renk: string }> = {
  klinik:   { label: "Klinik & Sağlık",  renk: "#0ea5e9" },
  restoran: { label: "Restoran & Kafe",   renk: "#f97316" },
  kurumsal: { label: "Kurumsal Çözüm",    renk: "#6366f1" },
  dental:   { label: "Dental Estetik",    renk: "#10B981" },
  restoran2:  { label: "Sicilya Trattoria", renk: "#3B82F6" },
  taxi:      { label: "Cab Service (Dark)", renk: "#F5C518" },
  taxi2:     { label: "Cab Service (Light)", renk: "#E5A900" },
  chatbot:   { label: "AI Chatbot / SaaS",  renk: "#00E5FF" },
  bar:       { label: "Noir Velvet (Gold)", renk: "#D4AF37" },
  bar2:      { label: "Chalk & Char (Red)", renk: "#E63946" },
  hotel1:    { label: "Luxury Resort (Teal)", renk: "#14B8A6" },
  hotel2:    { label: "Bunkhouse Lodge (Sand)", renk: "#D97706" },
  hotel3:         { label: "Modernist Villa (Slate)", renk: "#94A3B8" },
  bodrumcerrahi:  { label: "Cerrahi Tıp Merkezi",   renk: "#1B6FA8" },
  chatbot2:       { label: "Zenith AI (SaaS)",    renk: "#8B5CF6" },
};

function getTemplateIcon(template: string, color: string) {
  const iconProps = { className: "w-5 h-5", style: { color } };
  
  switch(template) {
    case "klinik":
    case "dental":
      return (
        <svg {...iconProps} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
          <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.746 3.746 0 0 1 3.296-1.043A3.746 3.746 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12Z" />
        </svg>
      );
    case "restoran":
    case "restoran2":
      return (
        <svg {...iconProps} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
          <path strokeLinecap="round" strokeLinejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" />
        </svg>
      );
    case "kurumsal":
      return (
        <svg {...iconProps} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
          <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h18v3H3V3Z" />
        </svg>
      );
    case "taxi":
    case "taxi2":
      return (
        <svg {...iconProps} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
          <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 18.75a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m3 0h7.5m3 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m3 0h1.5m-1.5-3h-15M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
        </svg>
      );
    case "chatbot":
    case "chatbot2":
      return (
        <svg {...iconProps} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
          <path strokeLinecap="round" strokeLinejoin="round" d="M8.625 12a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 0 1-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8Z" />
        </svg>
      );
    case "bar":
    case "bar2":
      return (
        <svg {...iconProps} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
          <path strokeLinecap="round" strokeLinejoin="round" d="M12 22V12m9-9H3l9 9 9-9Z" />
        </svg>
      );
    case "hotel1":
    case "hotel2":
    case "hotel3":
      return (
        <svg {...iconProps} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
          <path strokeLinecap="round" strokeLinejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
        </svg>
      );
    default:
      return (
        <svg {...iconProps} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
          <path strokeLinecap="round" strokeLinejoin="round" d="M9.813 15.904 9 21l5-2.788L19 21l-.813-5.096L22 12.333l-5.116-.743L15 7l-1.884 4.59L8 12.333l3.813 3.571ZM15 3.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" />
        </svg>
      );
  }
}

export default function Home() {
  const demoList = Object.values(demos);
  const [showModal, setShowModal] = useState(false);
  const [brandName, setBrandName] = useState("");
  const [email, setEmail] = useState("");

  return (
    <main className="min-h-screen bg-[#070913] text-slate-100 overflow-hidden relative selection:bg-indigo-500 selection:text-white pb-16">
      
      {/* Premium Ambient Background Mesh */}
      <div className="absolute top-[-10%] left-[-20%] w-[140%] h-[60%] bg-[radial-gradient(ellipse_60%_50%_at_50%_0%,rgba(99,102,241,0.12),rgba(255,255,255,0))] pointer-events-none z-0" />
      <div className="absolute bottom-[10%] right-[-10%] w-[500px] h-[500px] bg-[radial-gradient(circle_at_center,rgba(6,182,212,0.02),transparent_70%)] pointer-events-none z-0" />

      {/* ── HEADER & SHOWCASE INTRO ── */}
      <section className="relative z-10 px-6 pt-24 pb-16">
        <motion.div
          className="max-w-4xl mx-auto text-center"
          initial="hidden" animate="show" variants={stagger}>

          <motion.div variants={fadeUp}
            className="inline-flex items-center gap-2.5 text-[10px] font-black uppercase tracking-[2px] px-5 py-2.5 rounded-full mb-8 border border-white/5 bg-white/[0.03] text-indigo-300">
            <span className="w-1.5 h-1.5 rounded-full bg-indigo-400 animate-pulse" />
            AYRIS TECH · DİJİTAL DENEYİM PORTFÖYÜ
          </motion.div>

          <motion.h1 variants={fadeUp}
            className="text-4xl sm:text-6xl font-black text-white leading-[1.1] tracking-tight mb-8">
            Yüksek Etkileşimli
            <br />
            <span className="bg-gradient-to-r from-indigo-300 via-cyan-300 to-emerald-300 bg-clip-text text-transparent">
              Boutique Şablonlar
            </span>
          </motion.h1>

          <motion.p variants={fadeUp} className="text-slate-400/80 text-sm sm:text-base leading-relaxed max-w-2xl mx-auto font-medium">
            Sektör lideri markalar için tasarladığımız son derece akıcı, zengin mikro animasyonlu ve yüksek sadakatli dijital arayüz prototiplerimizi aşağıdan canlı olarak deneyimleyin.
          </motion.p>
        </motion.div>
      </section>

      {/* ── DYNAMIC EXPERIENCES SHOWCASE GRID ── */}
      <section className="relative z-10 px-6 max-w-7xl mx-auto">
        <motion.div
          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
          initial="hidden" animate="show" variants={stagger}>
          
          {demoList.map((demo) => {
            const tpl = templateLabels[demo.template] || { label: "Özel Tasarım", renk: "#6366f1" };
            
            return (
              <motion.div key={demo.slug} variants={fadeUp}>
                <Link href={`/${demo.slug}`}>
                  <motion.div
                    className="group relative bg-[#0d111d]/40 border border-white/[0.04] rounded-3xl overflow-hidden cursor-pointer shadow-[0_20px_40px_rgba(0,0,0,0.3)] transition-all duration-300 hover:border-white/[0.12] hover:bg-[#121828]/50"
                    whileHover={{ y: -6 }}
                  >
                    {/* Glowing highlight border on hover */}
                    <div 
                      className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-2xl pointer-events-none"
                      style={{
                        background: `radial-gradient(130px circle at 50% 10%, ${demo.firma.renkAna}15, transparent)`
                      }}
                    />

                    {/* Gradient top strip */}
                    <div className="h-1.5 w-full transition-all group-hover:h-2"
                         style={{ background: `linear-gradient(90deg, ${demo.firma.renkAna}, ${demo.firma.renkKoyu})` }} />

                    <div className="p-7">
                      {/* Logo Frame & Label Type */}
                      <div className="flex items-center justify-between mb-6">
                        <div className="w-12 h-12 rounded-2xl flex items-center justify-center transition-all group-hover:scale-102"
                             style={{ background: `${demo.firma.renkAna}12`, border: `1px solid ${demo.firma.renkAna}20` }}>
                          {getTemplateIcon(demo.template, demo.firma.renkAna)}
                        </div>
                        <span className="text-[9px] font-black px-3.5 py-1.5 rounded-full tracking-widest uppercase border border-white/[0.04]"
                              style={{ background: `${tpl.renk}10`, color: tpl.renk }}>
                          {tpl.label}
                        </span>
                      </div>

                      <h2 className="font-bold text-white text-lg mb-1.5 group-hover:text-indigo-300 transition-colors uppercase font-sans tracking-wide">{demo.firma.adi}</h2>
                      <p className="text-slate-400/50 text-[11px] font-bold tracking-widest uppercase mb-6 flex items-center gap-1.5">
                        <svg className="w-3.5 h-3.5 text-indigo-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
                          <path strokeLinecap="round" strokeLinejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
                          <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" />
                        </svg>
                        {demo.firma.sehir}
                      </p>

                      {/* Stat Dials inside Cards */}
                      <div className="grid grid-cols-2 gap-3 mb-8">
                        {demo.istatistikler.slice(0, 2).map((s, i) => (
                          <div key={i} className="bg-white/[0.01] border border-white/[0.03] rounded-2xl p-4 flex flex-col justify-between h-20 hover:border-white/5 transition-colors">
                            <span className="text-slate-400/40 text-[9px] uppercase tracking-widest font-black leading-none block mb-2">{s.etiket.substring(0, 20)}...</span>
                            <span className="font-black text-white text-base leading-none block">{s.deger}</span>
                          </div>
                        ))}
                      </div>

                      {/* Premium CTA Row */}
                      <div className="flex items-center justify-between border-t border-white/[0.03] pt-5">
                        <span className="text-slate-400/30 text-xs font-mono select-none">/{demo.slug}</span>
                        <motion.span
                          className="text-[10px] font-black tracking-[2px] uppercase px-5 py-3 rounded-xl flex items-center gap-1.5 transition-all text-white"
                          style={{ background: demo.firma.renkAna }}
                          whileHover={{ scale: 1.02 }}
                          whileTap={{ scale: 0.98 }}>
                          ÖNİZLE
                          <svg className="w-3.5 h-3.5 text-white shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="3">
                            <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
                          </svg>
                        </motion.span>
                      </div>
                    </div>
                  </motion.div>
                </Link>
              </motion.div>
            );
          })}

          {/* ── CUSTOM INQUIRY REQUEST CARD (CLIENT FACING) ── */}
          <motion.div variants={fadeUp}>
            <div 
              onClick={() => setShowModal(true)}
              className="group bg-[#0d111d]/20 border border-dashed border-white/10 rounded-3xl p-8 h-full flex flex-col justify-between min-h-[360px] hover:border-indigo-400/50 hover:bg-[#121828]/30 transition-all cursor-pointer shadow-[0_20px_40px_rgba(0,0,0,0.2)]"
            >
              <div>
                <div className="w-14 h-14 rounded-2xl bg-indigo-500/10 border border-indigo-400/20 flex items-center justify-center mb-6 group-hover:scale-102 transition-transform">
                  <svg className="w-6 h-6 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                  </svg>
                </div>
                <h3 className="font-bold text-white text-lg mb-2 uppercase tracking-wide">Sıradaki Tasarım Sizin Olsun</h3>
                <p className="text-slate-400/60 text-xs leading-relaxed font-semibold">
                  Kendi markanız veya projeniz için özel kurgulanmış, zengin mikro animasyonlara ve üst segment görsel kimliğe sahip bir dijital şablon önizlemesi talep edin.
                </p>
              </div>

              <motion.button
                className="w-full py-4.5 rounded-xl border border-indigo-400/30 bg-indigo-500/5 hover:bg-indigo-500 text-indigo-300 hover:text-white font-black text-[9px] tracking-[2px] uppercase transition-all shadow-md mt-8"
                whileHover={{ scale: 1.01 }}
              >
                ÖZEL KONSEPT TALEP ET
              </motion.button>
            </div>
          </motion.div>

        </motion.div>
      </section>

      {/* ── MINIMALIST FOOTER ── */}
      <footer className="max-w-7xl mx-auto mt-24 pt-12 border-t border-white/[0.04] px-6 flex flex-col sm:flex-row items-center justify-between gap-6 relative z-10">
        <div className="flex items-center gap-3">
          <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-indigo-500 to-cyan-500 flex items-center justify-center text-xs font-black text-white shadow-md shadow-indigo-500/25">
            A
          </div>
          <span className="text-slate-400/50 text-xs font-bold tracking-wider">AYRIS TECH EXPERIENCES</span>
        </div>
        <a href="https://ayristech.com" target="_blank"
           className="text-slate-400/30 text-xs hover:text-indigo-400 transition-colors font-bold tracking-wider uppercase">
          ayristech.com →
        </a>
      </footer>

      {/* ── CUSTOM INQUIRY MODAL (CLIENT LEAD GENERATION) ── */}
      <AnimatePresence>
        {showModal && (
          <motion.div 
            className="fixed inset-0 z-50 flex items-center justify-center p-6 bg-black/80 backdrop-blur-sm"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
          >
            <motion.div 
              className="bg-[#0f1322] rounded-3xl p-8 max-w-md w-full relative shadow-2xl border border-indigo-400/20 text-white"
              initial={{ scale: 0.95, y: 20 }}
              animate={{ scale: 1, y: 0 }}
              exit={{ scale: 0.95, y: 20 }}
            >
              {/* Close Button */}
              <button 
                className="absolute top-6 right-6 w-8 h-8 rounded-full bg-[#070913] border border-white/5 flex items-center justify-center text-white/40 hover:text-indigo-400 hover:border-indigo-400/20 transition-all cursor-pointer font-bold"
                onClick={() => setShowModal(false)}
              >
                ✕
              </button>
              
              {/* Success Icon */}
              <div className="w-16 h-16 rounded-2xl bg-indigo-500/10 border border-indigo-400/20 flex items-center justify-center mb-6">
                <svg className="w-8 h-8 stroke-indigo-400 fill-none" viewBox="0 0 24 24" strokeWidth="1.5">
                  <path strokeLinecap="round" strokeLinejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-.778.099-1.533.284-2.253" />
                </svg>
              </div>

              <h3 className="font-sans font-black text-white text-2xl mb-1 uppercase tracking-wider">
                Konsept Başvurusu
              </h3>
              <p className="text-indigo-400 font-mono text-[9px] mb-6 uppercase tracking-widest font-black">
                Ayris Tech Design Lab
              </p>
              
              {/* Form Fields */}
              <div className="space-y-4 mb-8">
                <div>
                  <label className="block text-[9px] font-black text-slate-400/50 mb-1.5 uppercase tracking-widest">Firma Adı</label>
                  <input 
                    type="text" 
                    value={brandName}
                    onChange={(e) => setBrandName(e.target.value)}
                    placeholder="Örn. Vestam Wellness"
                    className="w-full px-4 py-3 rounded-xl border border-white/5 bg-[#070913] text-xs text-white placeholder-white/20 focus:outline-none focus:border-indigo-400 focus:ring-1 focus:ring-indigo-400 transition-all font-semibold"
                  />
                </div>
                <div>
                  <label className="block text-[9px] font-black text-slate-400/50 mb-1.5 uppercase tracking-widest">E-Posta Adresi</label>
                  <input 
                    type="email" 
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    placeholder="you@company.com"
                    className="w-full px-4 py-3 rounded-xl border border-white/5 bg-[#070913] text-xs text-white placeholder-white/20 focus:outline-none focus:border-indigo-400 focus:ring-1 focus:ring-indigo-400 transition-all font-semibold"
                  />
                </div>
              </div>

              <motion.button 
                className="w-full py-4.5 rounded-xl bg-indigo-500 hover:bg-indigo-600 text-white font-bold text-[9px] tracking-[2px] uppercase cursor-pointer shadow-md shadow-indigo-500/15"
                whileHover={{ scale: 1.02 }}
                whileTap={{ scale: 0.98 }}
                onClick={() => {
                  setShowModal(false);
                  alert("Başvurunuz başarıyla kaydedildi! En kısa sürede iletişime geçeceğiz.");
                }}
              >
                KONSEPT TALEBİNİ GÖNDER
              </motion.button>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>

    </main>
  );
}