import Link from "next/link"
import { ChevronLeft, ExternalLink } from "lucide-react"
import { BottomNav } from "@/components/bottom-nav"

export default function AboutPage() {
  const links = [
    { title: "Conditions d'utilisation", href: "#" },
    { title: "Politique de confidentialité", href: "#" },
    { title: "Licences tierces", href: "#" },
    { title: "Mentions légales", href: "#" },
  ]

  return (
    <div className="min-h-screen bg-background pb-24">
      <div className="mx-auto max-w-md px-4 py-6">
        {/* Header */}
        <div className="mb-8 flex items-center gap-4">
          <Link href="/settings" className="text-foreground hover:text-primary">
            <ChevronLeft className="h-6 w-6" />
          </Link>
          <h1 className="text-xl font-bold text-foreground">À propos</h1>
        </div>

        {/* Logo & Info */}
        <div className="mb-8 text-center">
          <div className="mx-auto mb-4 flex h-20 w-20 items-center justify-center rounded-2xl bg-gradient-to-br from-primary to-violet-600">
            <span className="text-3xl font-bold text-white">M</span>
          </div>
          <h2 className="text-2xl font-bold text-foreground">Musique</h2>
          <p className="text-muted-foreground">Version 2.1.0</p>
        </div>

        {/* Description */}
        <div className="mb-8 rounded-xl bg-secondary/50 p-4">
          <p className="text-center text-muted-foreground">
            Musique est votre compagnon musical quotidien. Découvrez des millions de titres, créez vos playlists et
            profitez d{"'"}une expérience d{"'"}écoute personnalisée.
          </p>
        </div>

        {/* Links */}
        <div className="mb-8 space-y-1 rounded-xl bg-secondary/50">
          {links.map((link) => (
            <Link
              key={link.title}
              href={link.href}
              className="flex items-center justify-between p-4 transition-colors hover:bg-secondary"
            >
              <span className="text-foreground">{link.title}</span>
              <ExternalLink className="h-5 w-5 text-muted-foreground" />
            </Link>
          ))}
        </div>

        {/* Credits */}
        <div className="text-center text-sm text-muted-foreground">
          <p>Made with love in Paris</p>
          <p className="mt-1">© 2025 Musique. Tous droits réservés.</p>
        </div>
      </div>

      <BottomNav />
    </div>
  )
}
