import Link from "next/link"
import {
  ArrowRight,
  CheckCircle,
  FileText,
  LightbulbIcon,
  MessageSquare,
  VoteIcon,
  Database,
  Lock,
  Server,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export default function AboutPage() {
  return (
    <div className="container mx-auto px-4 py-8">
      <div className="mx-auto max-w-4xl">
        <div className="mb-12 text-center">
          <h1 className="text-4xl font-bold">About VoxPop</h1>
          <p className="mt-4 text-lg text-muted-foreground">
            Empowering citizens to shape legislation through collective wisdom
          </p>
        </div>

        <Tabs defaultValue="platform" className="mb-12">
          <TabsList className="grid w-full grid-cols-3">
            <TabsTrigger value="platform">Our Platform</TabsTrigger>
            <TabsTrigger value="process">Our Process</TabsTrigger>
            <TabsTrigger value="technology">Our Technology</TabsTrigger>
          </TabsList>
          <TabsContent value="platform" className="mt-6">
            <div className="space-y-4">
              <h2 className="text-2xl font-semibold">Decentralized Public Opinion Platform</h2>
              <p className="text-muted-foreground">
                VoxPop is a decentralized platform that bridges the gap between citizens and policymakers. We believe
                that the collective wisdom of communities should directly inform the laws that govern them.
              </p>
              <p className="text-muted-foreground">
                Our mission is to create a transparent, accessible, and effective system for public participation in the
                legislative process. By leveraging blockchain technology and artificial intelligence, we ensure that
                every voice is heard and every contribution is valued.
              </p>
              <div className="mt-8">
                <h3 className="text-xl font-medium">Key Benefits</h3>
                <ul className="mt-4 space-y-2">
                  <li className="flex items-start">
                    <CheckCircle className="mr-2 mt-1 h-5 w-5 text-primary" />
                    <div>
                      <p className="font-medium">Transparent Governance</p>
                      <p className="text-sm text-muted-foreground">
                        All submissions and votes are recorded on the blockchain, ensuring complete transparency and
                        accountability.
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <CheckCircle className="mr-2 mt-1 h-5 w-5 text-primary" />
                    <div>
                      <p className="font-medium">Inclusive Participation</p>
                      <p className="text-sm text-muted-foreground">
                        Our platform is designed to be accessible to all citizens, regardless of technical expertise or
                        political connections.
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <CheckCircle className="mr-2 mt-1 h-5 w-5 text-primary" />
                    <div>
                      <p className="font-medium">Efficient Consensus Building</p>
                      <p className="text-sm text-muted-foreground">
                        AI-powered synthesis of perspectives helps identify common ground and build consensus around
                        complex issues.
                      </p>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </TabsContent>
          <TabsContent value="process" className="mt-6">
            <h2 className="text-2xl font-semibold">The VoxPop Process</h2>
            <p className="mt-2 text-muted-foreground">
              Our platform follows a structured process to transform individual perspectives into actionable policy
              recommendations.
            </p>

            <div className="mt-8 grid gap-6 md:grid-cols-2 lg: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">1. Perspective</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-center text-muted-foreground">
                    Citizens submit their raw opinions, ideas, and concerns on specific issues or proposed legislation.
                  </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">
                    <Server className="h-6 w-6 text-primary" />
                  </div>
                  <CardTitle className="mt-4">2. Synthesis</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-center text-muted-foreground">
                    AI algorithms process and synthesize similar perspectives to identify common themes and potential
                    solutions.
                  </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">3. Insight</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-center text-muted-foreground">
                    Synthesized ideas become Insights that are presented to the community for review and voting.
                  </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">
                    <VoteIcon className="h-6 w-6 text-primary" />
                  </div>
                  <CardTitle className="mt-4">4. Consensus</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-center text-muted-foreground">
                    Community members vote on Insights to build consensus and identify the most widely supported ideas.
                  </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">
                    <CheckCircle className="h-6 w-6 text-primary" />
                  </div>
                  <CardTitle className="mt-4">5. Contribution</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-center text-muted-foreground">
                    Insights that reach community consensus become validated Contributions ready for policy
                    consideration.
                  </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">6. Resolution</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-center text-muted-foreground">
                    Validated Contributions are compiled into formal Resolutions that can be presented to policymakers.
                  </p>
                </CardContent>
              </Card>
            </div>
          </TabsContent>
          <TabsContent value="technology" className="mt-6">
            <h2 className="text-2xl font-semibold">Our Technology Stack</h2>
            <p className="mt-2 text-muted-foreground">
              VoxPop leverages cutting-edge technologies to ensure security, transparency, and efficiency.
            </p>

            <div className="mt-8 space-y-6">
              <div className="rounded-lg border p-6">
                <div className="flex items-start">
                  <div className="mr-4 flex h-10 w-10 items-center justify-center rounded-full bg-primary/10">
                    <Database className="h-5 w-5 text-primary" />
                  </div>
                  <div>
                    <h3 className="text-xl font-medium">Polygon PoS Blockchain</h3>
                    <p className="mt-2 text-muted-foreground">
                      We use the Polygon Proof-of-Stake blockchain for its energy efficiency, low transaction costs, and
                      high throughput. All votes, contributions, and resolutions are recorded on-chain for complete
                      transparency and immutability.
                    </p>
                  </div>
                </div>
              </div>

              <div className="rounded-lg border p-6">
                <div className="flex items-start">
                  <div className="mr-4 flex h-10 w-10 items-center justify-center rounded-full bg-primary/10">
                    <Server className="h-5 w-5 text-primary" />
                  </div>
                  <div>
                    <h3 className="text-xl font-medium">IPFS Storage</h3>
                    <p className="mt-2 text-muted-foreground">
                      The InterPlanetary File System (IPFS) provides decentralized storage for perspective submissions
                      and other content. This ensures that data cannot be censored or altered, and remains accessible
                      even if VoxPop's servers are unavailable.
                    </p>
                  </div>
                </div>
              </div>

              <div className="rounded-lg border p-6">
                <div className="flex items-start">
                  <div className="mr-4 flex h-10 w-10 items-center justify-center rounded-full bg-primary/10">
                    <Lock className="h-5 w-5 text-primary" />
                  </div>
                  <div>
                    <h3 className="text-xl font-medium">Privado ID</h3>
                    <p className="mt-2 text-muted-foreground">
                      Privado ID provides privacy-preserving identity verification using zero-knowledge proofs. This
                      allows users to prove their eligibility to participate without revealing personal information,
                      preventing both identity fraud and protecting user privacy.
                    </p>
                  </div>
                </div>
              </div>

              <div className="rounded-lg border p-6">
                <div className="flex items-start">
                  <div className="mr-4 flex h-10 w-10 items-center justify-center rounded-full bg-primary/10">
                    <LightbulbIcon className="h-5 w-5 text-primary" />
                  </div>
                  <div>
                    <h3 className="text-xl font-medium">AI Synthesis</h3>
                    <p className="mt-2 text-muted-foreground">
                      Our proprietary AI algorithms analyze and synthesize perspectives to identify common themes,
                      concerns, and potential solutions. This helps transform thousands of individual opinions into
                      actionable insights that can be effectively evaluated by the community.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </TabsContent>
        </Tabs>

        <div className="mt-12 text-center">
          <h2 className="text-2xl font-semibold">Ready to make your voice heard?</h2>
          <p className="mt-4 text-muted-foreground">
            Join thousands of citizens who are already shaping the future of their communities through VoxPop.
          </p>
          <div className="mt-8 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>
            <Button asChild variant="outline" size="lg">
              <Link href="/insights">Explore Insights</Link>
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}