import Link from "next/link"
import { ArrowRight, FileText, LightbulbIcon, MessageSquare, VoteIcon } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { CountUpAnimation } from "@/components/count-up-animation"

export default function Home() {
  return (
    <div className="container mx-auto px-4 py-8">
      {/* Hero Section */}
      <section className="py-12 md:py-24">
        <div className="mx-auto max-w-4xl text-center">
          <h1 className="text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl">Your Voice, Your Laws</h1>
          <p className="mt-6 text-lg text-muted-foreground md:text-xl">
            VoxPop empowers citizens to shape legislation through collective wisdom. Submit your perspectives, vote on
            insights, and influence policy decisions.
          </p>
          <div className="mt-10 flex flex-col gap-4 sm:flex-row sm:justify-center">
            <Button asChild size="lg" className="gap-2">
              <Link href="/submit">
                Join Now
                <ArrowRight className="h-4 w-4" />
              </Link>
            </Button>
            <Button asChild variant="outline" size="lg">
              <Link href="/insights">Explore Insights</Link>
            </Button>
          </div>
        </div>
      </section>

      {/* Process Timeline */}
      <section className="py-12">
        <div className="mx-auto max-w-5xl">
          <h2 className="mb-8 text-center text-3xl font-bold">How VoxPop Works</h2>
          <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
            <Card>
              <CardHeader className="text-center">
                <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
                  <MessageSquare className="h-6 w-6 text-primary" />
                </div>
                <CardTitle className="mt-4">Submit Perspective</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-center text-muted-foreground">
                  Share your opinion on issues that matter to you. Your voice is the foundation of better policy.
                </p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="text-center">
                <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
                  <LightbulbIcon className="h-6 w-6 text-primary" />
                </div>
                <CardTitle className="mt-4">Vote on Insights</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-center text-muted-foreground">
                  Review AI-synthesized insights and vote on the best ideas from the community to build consensus.
                </p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader className="text-center">
                <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
                  <FileText className="h-6 w-6 text-primary" />
                </div>
                <CardTitle className="mt-4">Create Resolutions</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-center text-muted-foreground">
                  Validated contributions become formal resolutions that can be presented to policymakers.
                </p>
              </CardContent>
            </Card>
          </div>
          <div className="mt-12 flex justify-center">
            <Button asChild variant="outline">
              <Link href="/about">Learn More About Our Process</Link>
            </Button>
          </div>
        </div>
      </section>

      {/* Stats Dashboard */}
      <section className="py-12 bg-muted/50 rounded-lg my-12">
        <div className="mx-auto max-w-5xl px-4">
          <h2 className="mb-8 text-center text-3xl font-bold">Community Impact</h2>
          <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
            <div className="flex flex-col items-center">
              <CountUpAnimation end={1234} className="text-4xl font-bold text-primary" prefix="" suffix="" />
              <p className="mt-2 text-sm text-muted-foreground">Perspectives Submitted</p>
              <p className="mt-1 text-xs text-[#666666] text-center max-w-[180px]">Ideas shared by the community</p>
              <div className="mt-3 h-2 w-3/4 overflow-hidden rounded-full bg-primary/20">
                <div className="h-full w-[85%] animate-pulse rounded-full bg-primary"></div>
              </div>
            </div>
            <div className="flex flex-col items-center">
              <CountUpAnimation end={567} className="text-4xl font-bold text-primary" prefix="" suffix="" />
              <p className="mt-2 text-sm text-muted-foreground">Insights Generated</p>
              <p className="mt-1 text-xs text-[#666666] text-center max-w-[180px]">AI-synthesized solutions from perspectives</p>
              <div className="mt-3 h-2 w-3/4 overflow-hidden rounded-full bg-primary/20">
                <div className="h-full w-[65%] animate-pulse rounded-full bg-primary"></div>
              </div>
            </div>
            <div className="flex flex-col items-center">
              <CountUpAnimation end={89} className="text-4xl font-bold text-primary" prefix="" suffix="" />
              <p className="mt-2 text-sm text-muted-foreground">Contributions Validated</p>
              <p className="mt-1 text-xs text-[#666666] text-center max-w-[180px]">Community-approved ideas</p>
              <div className="mt-3 h-2 w-3/4 overflow-hidden rounded-full bg-primary/20">
                <div className="h-full w-[45%] animate-pulse rounded-full bg-primary"></div>
              </div>
            </div>
            <div className="flex flex-col items-center">
              <CountUpAnimation end={12} className="text-4xl font-bold text-primary" prefix="" suffix="" />
              <p className="mt-2 text-sm text-muted-foreground">Resolutions Delivered</p>
              <p className="mt-1 text-xs text-[#666666] text-center max-w-[180px]">Policies sent to decision-makers</p>
              <div className="mt-3 h-2 w-3/4 overflow-hidden rounded-full bg-primary/20">
                <div className="h-full w-[25%] animate-pulse rounded-full bg-primary"></div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Featured Insights */}
      <section className="py-12">
        <div className="mx-auto max-w-5xl">
          <h2 className="mb-8 text-center text-3xl font-bold">Featured Insights</h2>
          <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
            <Card>
              <CardHeader>
                <CardTitle>Increase Park Funding</CardTitle>
                <CardDescription>Environmental Policy</CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-muted-foreground">
                  Community members support increasing funding for local parks by 15% to improve maintenance and add new
                  recreational facilities.
                </p>
              </CardContent>
              <CardFooter className="flex justify-between">
                <div className="flex items-center text-sm text-muted-foreground">
                  <VoteIcon className="mr-1 h-4 w-4" />
                  <span>245 votes</span>
                </div>
                <Button variant="outline" size="sm" asChild>
                  <Link href="/insights/park-funding">View Details</Link>
                </Button>
              </CardFooter>
            </Card>
            <Card>
              <CardHeader>
                <CardTitle>Public Transportation Expansion</CardTitle>
                <CardDescription>Infrastructure</CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-muted-foreground">
                  Residents propose extending bus routes to underserved neighborhoods and increasing service frequency
                  during peak hours.
                </p>
              </CardContent>
              <CardFooter className="flex justify-between">
                <div className="flex items-center text-sm text-muted-foreground">
                  <VoteIcon className="mr-1 h-4 w-4" />
                  <span>189 votes</span>
                </div>
                <Button variant="outline" size="sm" asChild>
                  <Link href="/insights/transportation">View Details</Link>
                </Button>
              </CardFooter>
            </Card>
          </div>
          <div className="mt-8 flex justify-center">
            <Button asChild>
              <Link href="/insights">
                View All Insights
                <ArrowRight className="ml-2 h-4 w-4" />
              </Link>
            </Button>
          </div>
        </div>
      </section>

      {/* Call to Action */}
      <section className="py-12 md:py-24">
        <div className="mx-auto max-w-3xl text-center">
          <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">Ready to make your voice heard?</h2>
          <p className="mt-6 text-lg text-muted-foreground">
            Join thousands of citizens who are already shaping the future of their communities through VoxPop.
          </p>
          <div className="mt-10 flex flex-col gap-4 sm:flex-row sm:justify-center">
            <Button asChild size="lg" className="gap-2">
              <Link href="/submit">
                Submit Your Perspective
                <ArrowRight className="h-4 w-4" />
              </Link>
            </Button>
          </div>
        </div>
      </section>
    </div>
  )
}