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 Fediversion</h1>
                <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
                    The unified, community-driven platform for the entire <span className="text-foreground font-semibold">Jam Scene</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">
                            Fediversion is a collaborative effort to bring the entire scene together under one roof.
                            We believe that the magic of live music transcends any single band. Our goal is to create a seamless,
                            interconnected archive where fans can track their stats, rate performances, and discover new music
                            across the entire spectrum of the jam universe.
                        </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 our 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 songs, now expanded across every band in the scene.
                        </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 Taper 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>. Fediversion continues this tradition,
                            bringing the spirit of the Tapestry into the modern era for a new generation of fans.
                        </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">Community Data</h2>
                        </div>
                        <p className="text-sm text-muted-foreground leading-relaxed">
                            We are incredibly grateful to the open data communities that make this possible, including
                            <strong> Setlist.fm</strong>, <strong>Phish.net</strong>, <strong>Elgoose.net</strong>, and others.
                            Their dedication to documenting history allows us to build this unified home for all fans.
                        </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">
                                Fediversion is an independent, non-commercial community archive.
                                This site is <strong>NOT</strong> endorsed by, affiliated with, or sponsored by any of the bands featured herein.
                                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 fans, for the scene."
                </p>
            </section>
        </div >
    )
}