import { Head } from '@inertiajs/react';
import Layout from '@/Components/Layout';
import { Card, CardContent } from '@/components/ui/card';
import { Users, Target, Award, Globe } from 'lucide-react';

interface PageProps {
    page: {
        slug: string;
        title: string;
        body_html: string;
        meta_title?: string;
        meta_desc?: string;
    };
}

export default function AboutUs({ page }: PageProps) {
    return (
        <Layout>
            <Head title={page.meta_title || page.title} />
            {page.meta_desc && <Head><meta name="description" content={page.meta_desc} /></Head>}

            {/* Hero Section */}
            <section className="bg-gradient-to-r from-primary to-primary/80 text-primary-foreground py-20">
                <div className="container mx-auto px-4">
                    <div className="max-w-4xl mx-auto text-center">
                        <h1 className="text-4xl md:text-5xl font-bold mb-4">{page.title}</h1>
                        <p className="text-lg opacity-90">
                            Hope & Innovation For Your Software & Web Development
                        </p>
                    </div>
                </div>
            </section>

            {/* Features Section */}
            <section className="py-16 bg-muted/30">
                <div className="container mx-auto px-4">
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
                        <Card>
                            <CardContent className="pt-6 text-center">
                                <div className="mx-auto w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                                    <Users className="h-6 w-6 text-primary" />
                                </div>
                                <h3 className="font-semibold mb-2">Expert Team</h3>
                                <p className="text-sm text-muted-foreground">
                                    Skilled professionals dedicated to your success
                                </p>
                            </CardContent>
                        </Card>

                        <Card>
                            <CardContent className="pt-6 text-center">
                                <div className="mx-auto w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                                    <Target className="h-6 w-6 text-primary" />
                                </div>
                                <h3 className="font-semibold mb-2">Client Focused</h3>
                                <p className="text-sm text-muted-foreground">
                                    Your goals drive our innovative solutions
                                </p>
                            </CardContent>
                        </Card>

                        <Card>
                            <CardContent className="pt-6 text-center">
                                <div className="mx-auto w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                                    <Award className="h-6 w-6 text-primary" />
                                </div>
                                <h3 className="font-semibold mb-2">Quality First</h3>
                                <p className="text-sm text-muted-foreground">
                                    Excellence in every line of code we write
                                </p>
                            </CardContent>
                        </Card>

                        <Card>
                            <CardContent className="pt-6 text-center">
                                <div className="mx-auto w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                                    <Globe className="h-6 w-6 text-primary" />
                                </div>
                                <h3 className="font-semibold mb-2">Global Reach</h3>
                                <p className="text-sm text-muted-foreground">
                                    Serving clients across multiple countries
                                </p>
                            </CardContent>
                        </Card>
                    </div>
                </div>
            </section>

            {/* Content Section */}
            <section className="py-16">
                <div className="container mx-auto px-4">
                    <div className="max-w-4xl mx-auto">
                        <div 
                            className="prose prose-lg max-w-none prose-headings:text-gray-900 prose-p:text-gray-700 prose-a:text-primary hover:prose-a:text-primary/80 prose-strong:text-gray-900 prose-ul:text-gray-700 prose-ol:text-gray-700"
                            dangerouslySetInnerHTML={{ __html: page.body_html }}
                        />
                    </div>
                </div>
            </section>
        </Layout>
    );
}
