import { Head } from '@inertiajs/react';
import AppLayout from '@/layouts/app-layout';
import { type BreadcrumbItem } from '@/types';
import { useLaravelReactI18n } from 'laravel-react-i18n';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Link } from '@inertiajs/react';
import { login, register } from '@/routes';
import { MapPin, Users, Sparkles, Globe } from 'lucide-react';

const breadcrumbs: BreadcrumbItem[] = [
    {
        title: 'About',
        href: '/about',
    },
];

export default function About() {
    const { t } = useLaravelReactI18n();

    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title="About - Smartsense" />
            
            <div className="flex flex-col gap-12">
                {/* Hero Section */}
                <section className="px-4 py-20 mx-auto max-w-[1400px] sm:px-6 lg:px-8 text-center">
                    <div className="max-w-4xl mx-auto">
                        <h1 className="text-5xl font-bold text-foreground mb-6">
                            {t('Smart Tourism, Simplified')}
                        </h1>
                        <p className="text-xl text-muted-foreground leading-relaxed">
                            {t('Smartsense is your AI-powered travel companion that helps you discover amazing places, connect with local experiences, and plan unforgettable journeys.')}
                        </p>
                    </div>
                </section>

                {/* What We Do */}
                <section className="px-4 mx-auto max-w-[1400px] sm:px-6 lg:px-8">
                    <div className="text-center mb-16">
                        <h2 className="text-3xl font-bold text-foreground mb-4">
                            {t('What We Do')}
                        </h2>
                        <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
                            {t('We make travel planning intelligent, personalized, and hassle-free through smart technology.')}
                        </p>
                    </div>
                    
                    <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
                        <Card className="text-center p-6 border-0 shadow-lg bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-950/30 dark:to-blue-900/30">
                            <div className="h-12 w-12 bg-blue-600 rounded-xl mx-auto mb-4 flex items-center justify-center">
                                <MapPin className="h-6 w-6 text-white" />
                            </div>
                            <CardTitle className="text-lg mb-2">{t('Discover Places')}</CardTitle>
                            <CardDescription className="text-sm">
                                {t('Find museums, restaurants, landmarks, and hidden gems with detailed information and photos.')}
                            </CardDescription>
                        </Card>

                        <Card className="text-center p-6 border-0 shadow-lg bg-gradient-to-br from-green-50 to-green-100 dark:from-green-950/30 dark:to-green-900/30">
                            <div className="h-12 w-12 bg-green-600 rounded-xl mx-auto mb-4 flex items-center justify-center">
                                <Users className="h-6 w-6 text-white" />
                            </div>
                            <CardTitle className="text-lg mb-2">{t('Local Experiences')}</CardTitle>
                            <CardDescription className="text-sm">
                                {t('Book authentic experiences like cooking with locals, guided tours, and cultural activities.')}
                            </CardDescription>
                        </Card>

                        <Card className="text-center p-6 border-0 shadow-lg bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-950/30 dark:to-purple-900/30">
                            <div className="h-12 w-12 bg-purple-600 rounded-xl mx-auto mb-4 flex items-center justify-center">
                                <Sparkles className="h-6 w-6 text-white" />
                            </div>
                            <CardTitle className="text-lg mb-2">{t('AI Guidance')}</CardTitle>
                            <CardDescription className="text-sm">
                                {t('Get instant answers, personalized recommendations, and insider tips through our AI chat.')}
                            </CardDescription>
                        </Card>

                        <Card className="text-center p-6 border-0 shadow-lg bg-gradient-to-br from-orange-50 to-orange-100 dark:from-orange-950/30 dark:to-orange-900/30">
                            <div className="h-12 w-12 bg-orange-600 rounded-xl mx-auto mb-4 flex items-center justify-center">
                                <Globe className="h-6 w-6 text-white" />
                            </div>
                            <CardTitle className="text-lg mb-2">{t('Smart Planning')}</CardTitle>
                            <CardDescription className="text-sm">
                                {t('Create personalized itineraries with interactive maps and real-time information.')}
                            </CardDescription>
                        </Card>
                    </div>
                </section>

                {/* How It Works */}
                <section className="px-4 py-16 mx-auto max-w-[1400px] sm:px-6 lg:px-8">
                    <div className="text-center mb-12">
                        <h2 className="text-3xl font-bold text-foreground mb-4">
                            {t('How It Works')}
                        </h2>
                        <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
                            {t('Three simple steps to start your adventure')}
                        </p>
                    </div>
                    
                    <div className="grid gap-8 md:grid-cols-3">
                        <div className="text-center">
                            <div className="h-16 w-16 bg-primary rounded-full mx-auto mb-6 flex items-center justify-center text-2xl font-bold text-primary-foreground">
                                1
                            </div>
                            <h3 className="text-xl font-semibold mb-3">{t('Explore')}</h3>
                            <p className="text-muted-foreground">
                                {t('Browse destinations, points of interest, and local experiences that match your interests.')}
                            </p>
                        </div>
                        
                        <div className="text-center">
                            <div className="h-16 w-16 bg-primary rounded-full mx-auto mb-6 flex items-center justify-center text-2xl font-bold text-primary-foreground">
                                2
                            </div>
                            <h3 className="text-xl font-semibold mb-3">{t('Plan')}</h3>
                            <p className="text-muted-foreground">
                                {t('Use our AI guide to get recommendations and create your perfect travel itinerary.')}
                            </p>
                        </div>
                        
                        <div className="text-center">
                            <div className="h-16 w-16 bg-primary rounded-full mx-auto mb-6 flex items-center justify-center text-2xl font-bold text-primary-foreground">
                                3
                            </div>
                            <h3 className="text-xl font-semibold mb-3">{t('Experience')}</h3>
                            <p className="text-muted-foreground">
                                {t('Book experiences, get real-time updates, and enjoy authentic local adventures.')}
                            </p>
                        </div>
                    </div>
                </section>


            </div>
        </AppLayout>
    );
}