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 About: 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"
                    >
                        Hakkımızda
                    </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">Hakkımızda</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ş */}
                    <motion.div
                        initial={{ opacity: 0, y: 40 }}
                        whileInView={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.7 }}
                        viewport={{ once: true }}
                        className="text-center max-w-3xl mx-auto"
                    >
                        <h2 className="text-3xl md:text-4xl font-bold text-[#D97707] mb-6">
                            İşletmeniz İçin Hepsi Bir Arada Randevu ve Müşteri Yönetim Sistemi
                        </h2>
                        <p className="text-gray-600 text-lg leading-relaxed">
                            MarsMS, işletmenizi bir üst seviyeye taşıyacak modern, hızlı ve sezgisel bir
                            randevu yönetim sistemi sunar. Güzellik merkezlerinden kliniklere kadar tüm
                            hizmet işletmeleri için özel olarak tasarlandı.
                        </p>
                    </motion.div>

                    {/* Özellikler */}
                    <motion.div
                        initial={{ opacity: 0 }}
                        whileInView={{ opacity: 1 }}
                        transition={{ duration: 0.7 }}
                        viewport={{ once: true }}
                        className="text-center max-w-3xl mx-auto space-y-6"
                    >
                        <h3 className="text-2xl font-semibold text-[#D97707]">
                            Öne Çıkan Özelliklerimiz
                        </h3>
                        <ul className="space-y-3 text-gray-700 text-left inline-block">
                            <li>• Esnek Takvim Yönetimi – Günlük, haftalık, aylık görünüm seçenekleriyle kolay planlama.</li>
                            <li>• Referans Takibi – Müşterilerinizin sizi nasıl bulduğunu öğrenin.</li>
                            <li>• Departman ve Hizmet Yönetimi – Her departmana özel hizmet atama.</li>
                            <li>• Otomatik Hatırlatmalar – SMS ve WhatsApp entegrasyonuyla randevu hatırlatma.</li>
                            <li>• Yeniden Pazarlama – Akıllı filtreleme ile hedef odaklı kampanyalar oluşturun.</li>
                        </ul>
                    </motion.div>

                    {/* Vizyon & Misyon */}
                    <motion.div
                        initial={{ opacity: 0, y: 40 }}
                        whileInView={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.7 }}
                        viewport={{ once: true }}
                        className="grid md:grid-cols-2 gap-12 items-start"
                    >
                        <div>
                            <h3 className="text-2xl font-semibold text-[#D97707] mb-3">
                                Vizyonumuz
                            </h3>
                            <p className="text-gray-700 leading-relaxed">
                                Hizmet sektöründeki işletmelerin dijital dönüşümünü hızlandırarak,
                                müşteri deneyimini ve operasyonel verimliliği en üst seviyeye taşımak.
                            </p>
                        </div>
                        <div>
                            <h3 className="text-2xl font-semibold text-[#D97707] mb-3">
                                Misyonumuz
                            </h3>
                            <p className="text-gray-700 leading-relaxed">
                                Tüm işletmeler için kolay kullanılabilir, güvenilir ve esnek bir randevu
                                yönetim platformu sunmak; işletme sahiplerinin zamanını geri kazandırmak.
                            </p>
                        </div>
                    </motion.div>

                    {/* Değerler */}
                    <motion.div
                        initial={{ opacity: 0 }}
                        whileInView={{ opacity: 1 }}
                        transition={{ duration: 0.8 }}
                        viewport={{ once: true }}
                        className="text-center"
                    >
                        <h3 className="text-3xl font-bold text-[#D97707] mb-10">Değerlerimiz</h3>
                        <div className="grid md:grid-cols-3 gap-8">
                            {[
                                {
                                    title: "Yenilikçilik",
                                    desc: "Teknoloji trendlerini yakından takip ederek işletmelere en modern çözümleri sunuyoruz.",
                                },
                                {
                                    title: "Güvenilirlik",
                                    desc: "Tüm süreçlerimizde şeffaflık ve güven esasına dayanıyoruz.",
                                },
                                {
                                    title: "Müşteri Odaklılık",
                                    desc: "Müşteri başarısını kendi başarımız olarak görüyoruz.",
                                },
                            ].map((item, i) => (
                                <motion.div
                                    key={i}
                                    whileHover={{ y: -5, boxShadow: "0 15px 25px rgba(0,0,0,0.1)" }}
                                    className="bg-white border border-gray-200 rounded-2xl p-8 transition-all duration-300"
                                >
                                    <h4 className="text-xl font-semibold text-[#D97707] mb-3">
                                        {item.title}
                                    </h4>
                                    <p className="text-gray-600">{item.desc}</p>
                                </motion.div>
                            ))}
                        </div>
                    </motion.div>

                    {/* Ekibimiz */}
                    <motion.div
                        initial={{ opacity: 0, y: 40 }}
                        whileInView={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.7 }}
                        viewport={{ once: true }}
                        className="text-center max-w-3xl mx-auto"
                    >
                        <h3 className="text-2xl font-semibold text-[#D97707] mb-4">
                            MarsMS Ekibi
                        </h3>
                        <p className="text-gray-700 leading-relaxed">
                            Tutkulu, deneyimli ve çözüm odaklı bir ekibiz. Her gün işletmelerin dijital
                            dönüşümüne katkı sağlamak için çalışıyoruz. Yazılım, tasarım ve kullanıcı
                            deneyimi alanındaki uzmanlığımızla markanızı geleceğe taşımaya hazırız.
                        </p>
                    </motion.div>
                </div>
            </section>

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

export default About;