import { Info, Heart, Music, AlertCircle } from "lucide-react"
import { Card, CardContent } from "@/components/ui/card"

export default function AboutPage() {
    return (
        <div className="flex flex-col gap-12 max-w-4xl mx-auto py-8">
            {/* Header */}
            <section className="text-center space-y-4">
                <h1 className="text-4xl font-extrabold tracking-tight sm:text-5xl">About Elmeg</h1>
                <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
                    The ultimate community-driven archive dedicated to preserving the history and evolution of the band <span className="text-foreground font-semibold">Goose</span>.
                </p>
            </section>

            {/* Main Content Grid */}
            <div className="grid gap-8">
                {/* Mission Card */}
                <Card className="overflow-hidden border-none bg-gradient-to-br from-blue-500/10 to-purple-500/10 dark:from-blue-500/5 dark:to-purple-500/5">
                    <CardContent className="p-8 space-y-4">
                        <div className="flex items-center gap-3">
                            <Heart className="h-6 w-6 text-red-500" />
                            <h2 className="text-2xl font-bold">Our Mission</h2>
                        </div>
                        <p className="text-lg leading-relaxed text-muted-foreground">
                            Elmeg was founded by fans, for fans. We believe that every performance is a unique piece of history.
                            Our goal is to document every show, every setlist, and every note, providing a comprehensive
                            platform for the community to explore the band's legacy.
                        </p>
                    </CardContent>
                </Card>

                {/* Inspiration, Heritage & Data */}
                <div className="grid md:grid-cols-3 gap-8">
                    <section className="space-y-4">
                        <div className="flex items-center gap-3">
                            <Music className="h-6 w-6 text-purple-500" />
                            <h2 className="text-xl font-bold">Heady Inspiration</h2>
                        </div>
                        <p className="text-sm text-muted-foreground leading-relaxed">
                            The soul of Elmeg's performance rating system is directly inspired by <strong>Heady Version</strong>.
                            We've adopted the concept of "Heady Versions" to help fans identify and celebrate the definitive
                            takes on their favorite Goose songs.
                        </p>
                    </section>

                    <section className="space-y-4">
                        <div className="flex items-center gap-3">
                            <Music className="h-6 w-6 text-blue-500" />
                            <h2 className="text-xl font-bold">The Dead Heritage</h2>
                        </div>
                        <p className="text-sm text-muted-foreground leading-relaxed">
                            We stand on the shoulders of giants. The culture of meticulous documentation pioneered by the
                            legendary fans of the <strong>Grateful Dead</strong>. Elmeg continues this tradition,
                            bringing the spirit of the Tapestry into the modern era.
                        </p>
                    </section>

                    <section className="space-y-4">
                        <div className="flex items-center gap-3">
                            <Music className="h-6 w-6 text-green-500" />
                            <h2 className="text-xl font-bold">Data & API</h2>
                        </div>
                        <p className="text-sm text-muted-foreground leading-relaxed">
                            We are incredibly grateful to <strong>elgoose.net</strong> for providing their comprehensive
                            API. Their dedication to documenting the band&apos;s history makes the archival work of Elmeg possible
                            for all fans to enjoy.
                        </p>
                    </section>
                </div>

                {/* Disclaimer Section */}
                <Card className="border-yellow-500/20 bg-yellow-500/5 dark:bg-yellow-500/10">
                    <CardContent className="p-6 flex gap-4 items-start">
                        <AlertCircle className="h-6 w-6 text-yellow-500 shrink-0 mt-1" />
                        <div className="space-y-2">
                            <h3 className="font-bold text-yellow-600 dark:text-yellow-400 uppercase tracking-wider text-sm">Official Disclaimer</h3>
                            <p className="text-sm text-yellow-800 dark:text-yellow-100/80 leading-relaxed">
                                Elmeg is an independent, non-commercial community archive.
                                This site is <strong>NOT</strong> endorsed by, affiliated with, or sponsored by <strong>Goose</strong> or
                                their management. All trade names, trademarks, and band imagery are the property of their respective owners.
                                We are simply fans celebrating the music.
                            </p>
                        </div>
                    </CardContent>
                </Card>
            </div>

            {/* Footer Note */}
            <section className="text-center pt-8 border-t">
                <p className="text-sm text-muted-foreground italic">
                    "Built by the flock, for the flock."
                </p>
            </section>
        </div>
    )
}