import { motion } from 'framer-motion';
import { 
  ArrowRight, 
  Bookmark, 
  Calendar, 
  Camera, 
  ChevronRight,
  MapPin, 
  Share2, 
  Star 
} from 'lucide-react';
import React from 'react';
import { Link } from 'react-router-dom';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';

const Home = () => {
  return (
    <div className="flex flex-col">
      {/* Hero Section */}
      <section className="relative py-20 lg:py-32 overflow-hidden bg-gradient-to-b from-teal-50 to-white dark:from-slate-900 dark:to-background">
        <div className="container mx-auto px-4 relative z-10">
          <div className="max-w-3xl mx-auto text-center">
            <motion.h1 
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              className="text-4xl md:text-6xl font-extrabold tracking-tight text-foreground mb-6"
            >
              Kapadokya seyahatinizi <span className="text-primary">mükemmel şekilde planlayın</span>
            </motion.h1>
            <motion.p 
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.1 }}
              className="text-lg md:text-xl text-muted-foreground mb-10"
            >
              Kapadokya'nın eşsiz güzelliklerini keşfedin. Kaya kiliselerinden peribacalarına, sıcak hava balonu turlarından yeraltı şehirlerine kadar tüm deneyimlerinizi planlayın.
            </motion.p>
            <motion.div 
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.2 }}
              className="flex flex-col sm:flex-row items-center justify-center gap-4"
            >
              <Button size="lg" className="w-full sm:w-auto rounded-full px-8 bg-primary text-white hover:bg-primary/90" asChild>
                <Link to="/create-trip">Planlamaya Başla</Link>
              </Button>
              <Button size="lg" variant="outline" className="w-full sm:w-auto rounded-full px-8">
                Uygulamayı İndir
              </Button>
            </motion.div>
          </div>
        </div>
        
        {/* Background blobs */}
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full -z-0 pointer-events-none opacity-20">
          <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-primary rounded-full blur-[120px]"></div>
          <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-accent rounded-full blur-[120px]"></div>
        </div>
      </section>
      {/* App Preview Section */}
      <section className="py-20 bg-white dark:bg-background">
        <div className="container mx-auto px-4 text-center">
          <motion.div 
            initial={{ opacity: 0, scale: 0.95 }}
            whileInView={{ opacity: 1, scale: 1 }}
            viewport={{ once: true }}
            className="relative max-w-5xl mx-auto rounded-2xl overflow-hidden shadow-2xl border bg-white dark:bg-slate-900"
          >
            <div className="grid grid-cols-1 md:grid-cols-12 h-[500px] md:h-[600px]">
              {/* Timeline Preview */}
              <div className="md:col-span-5 bg-muted/30 p-6 text-left border-r overflow-y-auto hidden md:block">
                <div className="flex items-center gap-2 mb-8">
                  <Badge variant="secondary" className="bg-primary/10 text-primary border-none">1. Gün</Badge>
                  <span className="text-sm font-medium">Pazartesi, 1 Ocak</span>
                </div>
                <div className="space-y-6">
                  {[1, 2, 3].map((i) => (
                    <div key={i} className="flex gap-4 p-4 rounded-xl bg-white dark:bg-slate-800 shadow-sm border border-border/50">
                      <img src={i === 1 ? "https://miaoda-site-img.s3cdn.medo.dev/images/KLing_1c20d283-72b6-491b-b98a-002918de9b25.jpg" : i === 2 ? "https://miaoda-site-img.s3cdn.medo.dev/images/KLing_ccd0c13d-1ae0-4ef2-b83a-fd181a22c612.jpg" : "https://miaoda-site-img.s3cdn.medo.dev/images/KLing_a009be5c-8fe5-47be-985a-6aa967e9a437.jpg"} alt="Mekan" className="w-16 h-16 rounded-lg object-cover bg-muted" />
                      <div>
                        <h4 className="font-semibold text-sm">Görülecek Yer #{i}</h4>
                        <p className="text-xs text-muted-foreground mt-1">Gezilecek Yer • 2 saat</p>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
              {/* Map Preview */}
              <div className="md:col-span-7 relative bg-slate-100 overflow-hidden">
                <img
                  src="https://miaoda-edit-image.s3cdn.medo.dev/9jd6q07lo4xs/IMG-9jl8tqowju9s.jpg"
                  alt="Harita Görünümü"
                  className="w-full h-full object-cover"
                  data-editor-config="%7B%22defaultSrc%22%3A%22https%3A%2F%2Fmiaoda-edit-image.s3cdn.medo.dev%2F9jd6q07lo4xs%2FIMG-9jl8tqowju9s.jpg%22%7D" />
                <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
                   <div className="flex flex-wrap gap-4 justify-center">
                      {[1, 2, 3, 4, 5].map(n => (
                        <div key={n} className="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center font-bold border-2 border-white shadow-lg animate-bounce" style={{ animationDelay: `${n * 0.2}s` }}>
                          {n}
                        </div>
                      ))}
                   </div>
                </div>
              </div>
            </div>
          </motion.div>
          <div className="mt-10">
            <h3 className="text-2xl font-bold mb-2">Seyahat planınız ve haritanız tek bir görünümde</h3>
            <p className="text-muted-foreground">İstediğiniz yerleri ekleyin, biz onları sizin için optimize edelim.</p>
          </div>
        </div>
      </section>
      {/* Testimonials Section */}
      <section className="py-20 bg-muted/30">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold mb-4">Gezginler ne diyor?</h2>
            <p className="text-muted-foreground max-w-2xl mx-auto text-lg">
              Binlerce gezgin LetsGoCappadocia kullanarak Kapadokya seyahatlerini unutulmaz bir deneyime dönüştürdü.
            </p>
          </div>
          
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {[1, 2, 3, 4].map((i) => (
              <Card key={i} className="border-none shadow-sm hover:shadow-md transition-shadow">
                <CardContent className="pt-6">
                  <div className="flex items-center gap-3 mb-4">
                    <img src="https://miaoda-site-img.s3cdn.medo.dev/images/KLing_7f64f5cd-922b-4448-948a-9fd8a4ad2045.jpg" alt="Kullanıcı" className="w-10 h-10 rounded-full bg-muted object-cover" />
                    <div>
                      <div className="font-semibold text-sm">Kullanıcı İsmi {i}</div>
                      <div className="flex text-primary">
                        {[...Array(5)].map((_, j) => <Star key={j} className="h-3 w-3 fill-current" />)}
                      </div>
                    </div>
                  </div>
                  <p className="text-sm text-muted-foreground italic leading-relaxed">
                    "Bu uygulama seyahatlerimi planlama şeklimi tamamen değiştirdi. Harita görünümü harika!"
                  </p>
                </CardContent>
              </Card>
            ))}
          </div>
          
          <div className="mt-12 text-center">
            <Button variant="link" className="text-primary font-semibold">
              Tüm yorumları gör <ChevronRight className="h-4 w-4 ml-1" />
            </Button>
          </div>
        </div>
      </section>
      {/* Features Section */}
      <section className="py-20 bg-white dark:bg-background">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold mb-4">Tüm diğer araçlarınızın yerini alacak özellikler</h2>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-12">
            {[
              { icon: MapPin, title: "Seyahat Planlama", desc: "Günlük rotalarınızı kolayca oluşturun ve yönetin." },
              { icon: Calendar, title: "Seyahat Günlüğü", desc: "Anılarınızı ve notlarınızı her gün için kaydedin." },
              { icon: Camera, title: "Fotoğraf Galerisi", desc: "Yüklediğiniz fotoğraflar otomatik olarak tarihe göre dizilir." },
              { icon: Share2, title: "Paylaşım", desc: "Arkadaşlarınızla ortak plan yapın veya rehberinizi yayınlayın." },
              { icon: Bookmark, title: "Yer İmleri", desc: "Keşfettiğiniz yerleri koleksiyonlara kaydedin." },
              { icon: ArrowRight, title: "İnteraktif Haritalar", desc: "Çevrimdışı haritalar ve özel markerlar ile yolunuzu bulun." }
            ].map((feature, i) => {
              const Icon = feature.icon;
              return (
                <div key={i} className="flex flex-col items-center text-center">
                  <div className="w-14 h-14 rounded-2xl bg-accent/10 text-accent flex items-center justify-center mb-6">
                    <Icon className="h-7 w-7" />
                  </div>
                  <h3 className="text-xl font-bold mb-2">{feature.title}</h3>
                  <p className="text-muted-foreground">{feature.desc}</p>
                </div>
              );
            })}
          </div>
        </div>
      </section>
      {/* CTA Section */}
      <section className="py-20 bg-primary text-white">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl md:text-5xl font-bold mb-8">Sıradaki maceranızı bugün planlayın</h2>
          <Button size="lg" variant="secondary" className="bg-white text-primary hover:bg-white/90 rounded-full px-10 h-14 text-lg font-bold" asChild>
            <Link to="/create-trip">Ücretsiz Başlayın</Link>
          </Button>
        </div>
      </section>
    </div>
  );
};

export default Home;
