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

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

            {/* ---------------------------
                Ana içerik (beyaz arka planlı bölümler)
            ----------------------------*/}
            <main className="relative z-10">

                {/* Hero (dışarıdan gelen) */}
                <Hero />


                {/* Hızlı Özellikler (3 sütun) */}
                <section className="bg-white border-t border-b border-gray-100">
                    <div className="max-w-7xl mx-auto px-6 md:px-12 py-16">
                        <motion.div
                            initial={{ opacity: 0, y: 20 }}
                            whileInView={{ opacity: 1, y: 0 }}
                            transition={{ duration: 0.6 }}
                            viewport={{ once: true }}
                            className="text-center max-w-3xl mx-auto mb-12"
                        >
                            <h2 className="text-3xl md:text-4xl font-bold text-[#D97707]">
                                MarsMS ile işinizi kolaylaştırın
                            </h2>
                            <p className="text-gray-600 mt-4">
                                Randevu yönetimi, müşteri takibi, çoklu şube yönetimi ve ödeme süreçleri — hepsi tek çatı altında.
                                Kullanımı kolay arayüzümüz sayesinde dakikalar içinde adapte olabilirsiniz.
                            </p>
                        </motion.div>

                        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                            {[
                                {
                                    title: "Akıllı Takvim",
                                    desc: "Personel ve hizmet bazlı takvimler, sürükle-bırak randevu, hızlı arama.",
                                    icon: "📅",
                                },
                                {
                                    title: "Hatırlatmalar",
                                    desc: "SMS & WhatsApp entegrasyonu ile otomatik randevu hatırlatmaları.",
                                    icon: "🔔",
                                },
                                {
                                    title: "Raporlama",
                                    desc: "Gelir, müşteri kazanımı ve doluluk oranları için interaktif raporlar.",
                                    icon: "📊",
                                },
                            ].map((c, i) => (
                                <motion.article
                                    key={i}
                                    whileHover={{ y: -6 }}
                                    transition={{ duration: 0.25 }}
                                    className="bg-white border border-gray-200 rounded-2xl p-8 shadow-sm"
                                >
                                    <div className="text-4xl mb-4">{c.icon}</div>
                                    <h3 className="text-xl font-semibold text-[#D97707] mb-2">{c.title}</h3>
                                    <p className="text-gray-600 text-sm">{c.desc}</p>
                                </motion.article>
                            ))}
                        </div>
                    </div>
                </section>

                {/* Nasıl Çalışır (3 adım) */}
                <section className="bg-white">
                    <div className="max-w-7xl mx-auto px-6 md:px-12 py-16">
                        <motion.div
                            initial={{ opacity: 0 }}
                            whileInView={{ opacity: 1 }}
                            transition={{ duration: 0.6 }}
                            viewport={{ once: true }}
                            className="max-w-4xl mx-auto text-center mb-12"
                        >
                            <h3 className="text-2xl font-bold text-[#D97707]">Nasıl Çalışır?</h3>
                            <p className="text-gray-600 mt-3">
                                Basit, hızlı ve etkili: Hesap oluşturun — Şubenizi ve hizmetlerinizi tanımlayın —
                                Randevu almaya başlayın.
                            </p>
                        </motion.div>

                        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                            {[
                                {
                                    step: "1",
                                    title: "Kurulum",
                                    desc: "Hızlı kurulum sihirbazı ile dakikalar içinde hazır olun. Şube, hizmet ve personel ekleyin.",
                                    icon: "⚙️",
                                },
                                {
                                    step: "2",
                                    title: "İşleyiş",
                                    desc: "Randevular, bildirimler ve müşteri geçmişi tek panelde. Personel takvimleriyle çakışma kontrolü.",
                                    icon: "🗓️",
                                },
                                {
                                    step: "3",
                                    title: "Analiz & Büyüme",
                                    desc: "Detaylı raporlar ve satış verileriyle kararlarınızı veriyle destekleyin.",
                                    icon: "📈",
                                },
                            ].map((item, idx) => (
                                <div key={idx} className="p-6 rounded-2xl border border-gray-200">
                                    <div className="flex items-center justify-between mb-4">
                                        <div className="flex items-center gap-4">
                                            <div className="w-12 h-12 rounded-lg bg-[#fff7ed] flex items-center justify-center text-xl">
                                                {item.icon}
                                            </div>
                                            <div>
                                                <h4 className="text-lg font-semibold text-gray-800">{item.title}</h4>
                                                <div className="text-xs text-gray-500">Adım {item.step}</div>
                                            </div>
                                        </div>
                                    </div>
                                    <p className="text-gray-600 text-sm">{item.desc}</p>
                                </div>
                            ))}
                        </div>
                    </div>
                </section>

                {/* Metrikler / Sosyal Proof */}
                <section className="bg-white">
                    <div className="max-w-4xl mx-auto px-6 md:px-12 py-16 text-center">
                        <h3 className="text-2xl font-bold text-[#D97707] mb-4">Güvenilen Performans</h3>
                        <p className="text-gray-600 mb-10 max-w-2xl mx-auto">
                            Yüzlerce işletme MarsMS ile randevu süreçlerini kolaylaştırdı. İşte bazı başarı göstergelerimiz:
                        </p>

                        <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
                            <div className="p-6 bg-gray-50 rounded-2xl">
                                <div className="text-3xl font-bold text-gray-900">+120%</div>
                                <div className="text-sm text-gray-500 mt-1">Ortalama rezervasyon artışı</div>
                            </div>
                            <div className="p-6 bg-gray-50 rounded-2xl">
                                <div className="text-3xl font-bold text-gray-900">98%</div>
                                <div className="text-sm text-gray-500 mt-1">Zamanında hizmet oranı</div>
                            </div>
                            <div className="p-6 bg-gray-50 rounded-2xl">
                                <div className="text-3xl font-bold text-gray-900">500+</div>
                                <div className="text-sm text-gray-500 mt-1">Aktif işletme</div>
                            </div>
                            <div className="p-6 bg-gray-50 rounded-2xl">
                                <div className="text-3xl font-bold text-gray-900">24/7</div>
                                <div className="text-sm text-gray-500 mt-1">Destek & erişilebilirlik</div>
                            </div>
                        </div>
                    </div>
                </section>


                {/* Müşteri Yorumları */}
                <section className="bg-white border-t border-gray-100">
                    <div className="max-w-7xl mx-auto px-6 md:px-12 py-16">
                        <motion.div
                            initial={{ opacity: 0 }}
                            whileInView={{ opacity: 1 }}
                            transition={{ duration: 0.6 }}
                            viewport={{ once: true }}
                            className="text-center mb-12"
                        >
                            <h3 className="text-2xl font-bold text-[#D97707]">Müşteri Yorumları</h3>
                            <p className="text-gray-600 mt-3">Gerçek kullanıcılarımızın deneyimlerinden bazıları.</p>
                        </motion.div>

                        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                            {[
                                {
                                    name: "Dr. Ayşe K.",
                                    role: "Klinik Sahibi",
                                    text: "MarsMS ile online randevu ve hatırlatmalar sayesinde no-show oranımız ciddi şekilde azaldı. Kullanımı çok kolay.",
                                },
                                {
                                    name: "Merve T.",
                                    role: "Güzellik Merkezi Yöneticisi",
                                    text: "Randevu, personel yönetimi ve ödeme takibini tek platformdan yapıyoruz. Destek ekibi çok yardımcı.",
                                },
                                {
                                    name: "Ahmet D.",
                                    role: "Şube Müdürü",
                                    text: "Çoklu şube yönetimi ve raporlama özellikleri işimizi kolaylaştırdı. Kesinlikle tavsiye ederim.",
                                },
                            ].map((t, i) => (
                                <blockquote key={i} className="p-6 border border-gray-200 rounded-2xl bg-gray-50">
                                    <p className="text-gray-700 mb-4">“{t.text}”</p>
                                    <div className="text-sm font-semibold text-gray-800">{t.name}</div>
                                    <div className="text-xs text-gray-500">{t.role}</div>
                                </blockquote>
                            ))}
                        </div>
                    </div>
                </section>

                {/* CTA Son (demo / fiyat teklifi) */}
                <section className="bg-white">
                    <div className="max-w-7xl mx-auto px-6 md:px-12 py-16">
                        <div className="rounded-3xl bg-[#D97707] p-10 text-white flex flex-col md:flex-row items-center justify-between gap-6">
                            <div>
                                <h4 className="text-2xl font-bold">Ücretsiz Demo Talep Edin</h4>
                                <p className="text-white/90 mt-2">MarsMS’i ekibinizle birlikte deneyin — kurulum ve ilk destek bizden.</p>
                            </div>
                            <div className="flex gap-4">
                                <Link
                                    href="/contact"
                                    className="inline-block bg-white text-[#D97707] px-6 py-3 rounded-full font-semibold"
                                >
                                    Demo Talep Et
                                </Link>
                                <Link
                                    href="/features"
                                    className="inline-block bg-white/20 hover:bg-white/30 text-white px-6 py-3 rounded-full font-semibold"
                                >
                                    Özellikleri İncele
                                </Link>
                            </div>
                        </div>
                    </div>
                </section>

            </main>

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

export default Home;