import AnimatedBackground from '@/components/AnimatedBackground';
import Header from '@/components/Header';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import { motion } from 'framer-motion';
import { Link } from '@inertiajs/react';

const Features: React.FC = () => {
    return (
        <div className="relative min-h-screen overflow-hidden bg-gradient-to-br from-[#1a0a0a] via-[#2d1515] to-[#1a0a0a] font-sans">
            <Header />
            <Navbar />

            {/* Banner */}
            <section className="relative h-64 md:h-80 overflow-hidden">
                <div className="absolute inset-0 bg-black/50 z-10" />
                <div className="absolute top-0 right-0 w-72 h-72 bg-[#D97707] rounded-full blur-3xl opacity-20 translate-x-1/3 -translate-y-1/3" />
                <div className="absolute bottom-0 left-0 w-72 h-72 bg-[#B45309] rounded-full blur-3xl opacity-20 -translate-x-1/3 translate-y-1/3" />
                <div className="relative z-20 flex flex-col items-center justify-center h-full text-center text-white">
                    <motion.h1
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.7 }}
                        className="text-4xl md:text-5xl font-bold mb-4"
                    >
                        Özellikler
                    </motion.h1>
                    <motion.nav
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        transition={{ delay: 0.4 }}
                        className="flex items-center justify-center space-x-2 text-sm"
                    >
                        <Link
                            href="/"
                            className="text-gray-300 hover:text-white transition-colors duration-200"
                        >
                            Ana Sayfa
                        </Link>
                        <span className="text-gray-400">/</span>
                        <span className="text-white font-medium">Özellikler</span>
                    </motion.nav>
                </div>
            </section>

            {/* İçerik */}
            <section className="relative bg-white text-gray-800 py-20 px-6 md:px-12 lg:px-20">
                <div className="max-w-6xl mx-auto space-y-20">
                    {/* Giriş */}
                    {/* Özellikler */}
                    <motion.div
                        initial={{ opacity: 0, y: 40 }}
                        whileInView={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.8 }}
                        viewport={{ once: true }}
                        className="text-center"
                    >
                        <h3 className="text-3xl font-bold text-[#D97707] mb-10">MarsMS’in Güçlü Özellikleri</h3>
                        <div className="grid md:grid-cols-3 gap-10">
                            {[
                                {
                                    title: "Akıllı Takvim Yönetimi",
                                    desc: "Tüm randevularınızı tek ekrandan yönetin. Günlük, haftalık veya aylık görünümlerle kolay planlama yapın.",
                                    icon: "📅",
                                },
                                {
                                    title: "Çoklu Hizmet & Doktor Desteği",
                                    desc: "Birden fazla departman, hizmet veya uzman için esnek yapı — her biri için ayrı takvim, fiyat ve personel tanımı.",
                                    icon: "👩‍⚕️",
                                },
                                {
                                    title: "SMS & WhatsApp Hatırlatmaları",
                                    desc: "Müşterilerinizi bilgilendirmek artık zahmetsiz. Otomatik bildirimler ile no-show oranlarını minimuma indirin.",
                                    icon: "💬",
                                },
                                {
                                    title: "Esnek Ödeme Sistemleri",
                                    desc: "Nakit, kart veya borç olarak çoklu ödeme yöntemlerini destekler. Her işlem detaylı şekilde raporlanır.",
                                    icon: "💳",
                                },
                                {
                                    title: "Kapsamlı Raporlama",
                                    desc: "Gelir, randevu yoğunluğu, personel performansı gibi metrikleri tek ekrandan analiz edin.",
                                    icon: "📊",
                                },
                                {
                                    title: "Çoklu Şube & Kullanıcı Yönetimi",
                                    desc: "Birden fazla şubeyi kolayca yönetin. Yetkilendirme sistemi sayesinde her kullanıcı kendi sınırında çalışır.",
                                    icon: "🏢",
                                },
                            ].map((feature, i) => (
                                <motion.div
                                    key={i}
                                    whileHover={{
                                        y: -5,
                                        boxShadow: "0 10px 25px rgba(0,0,0,0.08)",
                                    }}
                                    transition={{ duration: 0.3 }}
                                    className="bg-white border border-gray-200 rounded-2xl p-8 text-left hover:border-[#D97707] transition-all duration-300"
                                >
                                    <div className="text-4xl mb-4">{feature.icon}</div>
                                    <h4 className="text-xl font-semibold text-[#D97707] mb-3">
                                        {feature.title}
                                    </h4>
                                    <p className="text-gray-700 leading-relaxed">{feature.desc}</p>
                                </motion.div>
                            ))}
                        </div>
                    </motion.div>

                </div>
            </section>

            <Footer />
        </div>
    );
};

export default Features;