import { Head, Link } from '@inertiajs/react';
import { motion } from 'framer-motion';
import { BarChart3, ChevronRight, Construction } from 'lucide-react';
import PublicLayout from '@/layouts/public-layout';
import { Badge } from '@/components/ui/badge';

export default function EncuestasIndex() {
    return (
        <PublicLayout>
            <Head title="Encuestas - Ser Ajayu" />

            <section className="relative py-16 lg:py-24 overflow-hidden">
                <div className="absolute inset-0 -z-10">
                    <div className="absolute top-0 left-1/4 h-64 w-64 rounded-full bg-ochre/10 blur-[100px]" />
                </div>

                <div className="container mx-auto px-4">
                    <motion.div
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.6 }}
                        className="max-w-3xl"
                    >
                        <nav className="flex items-center gap-2 text-sm text-muted-foreground mb-6">
                            <Link href="/" className="hover:text-foreground transition-colors">Inicio</Link>
                            <ChevronRight className="h-4 w-4" />
                            <span className="text-foreground">Encuestas</span>
                        </nav>

                        <div className="flex items-center gap-4 mb-4">
                            <div className="p-3 rounded-2xl bg-ochre/10">
                                <BarChart3 className="h-8 w-8 text-ochre" />
                            </div>
                            <div>
                                <h1 className="text-3xl lg:text-4xl font-bold text-foreground">
                                    Encuestas Digitales
                                </h1>
                            </div>
                        </div>
                        <p className="text-lg text-muted-foreground mt-4 leading-relaxed">
                            Herramientas para generar información y orientar procesos de investigación 
                            e incidencia política.
                        </p>
                    </motion.div>

                    <motion.div
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ delay: 0.3, duration: 0.6 }}
                        className="mt-16 text-center py-16 border border-dashed border-border rounded-2xl bg-muted/30"
                    >
                        <Construction className="h-16 w-16 text-ochre mx-auto mb-4" />
                        <Badge className="bg-ochre/20 text-ochre border-ochre/30 mb-4">
                            En desarrollo
                        </Badge>
                        <h3 className="text-xl font-semibold text-foreground mb-2">
                            Próximamente
                        </h3>
                        <p className="text-muted-foreground max-w-md mx-auto">
                            Las encuestas digitales están en desarrollo. Pronto podrás participar en 
                            encuestas sobre experiencias terapéuticas y opiniones regulatorias.
                        </p>
                    </motion.div>
                </div>
            </section>
        </PublicLayout>
    );
}
