<script setup>
import { RouterLink } from 'vue-router'
import { Shield, Users, Unlock } from 'lucide-vue-next'

import Button from '@/components/ui/Button.vue'
import Card from '@/components/ui/Card.vue'
import CardContent from '@/components/ui/CardContent.vue'

import DotsMouse from '@/components/ui/canvas/DotsMouse.vue'

</script>

<template>
  <div class="flex flex-col">

    <!-- Hero Section -->
    <section class="container py-24 md:py-32 lg:py-40">
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">

        <div class="space-y-6">
          <div class="inline-block px-3 py-1 text-sm bg-primary/10 text-primary rounded-full border border-primary/20">
            100% Peer-to-Peer
          </div>

          <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-balance">
            A Social Network No One Can Control
          </h1>

          <p class="text-xl text-muted-foreground text-pretty">
            Experience true digital freedom with our fully decentralized P2P social network.
            No central servers. No censorship. No surveillance. Just pure peer-to-peer connections.
          </p>

          <div class="flex flex-col sm:flex-row gap-4">
            <Button size="lg" class="text-lg px-8">
              <RouterLink to="/downloads">Download Now</RouterLink>
            </Button>

            <Button variant="outline" size="lg" class="text-lg px-8 bg-transparent">
              <RouterLink to="/how-it-works">Learn More</RouterLink>
            </Button>
          </div>
        </div>
        <DotsMouse></DotsMouse>
      </div>
    </section>

    <!-- Three Pillars -->
    <section class="container py-24 border-t border-border">
      <div class="text-center mb-16">
        <h2 class="text-3xl md:text-4xl font-bold mb-4">Built on Three Core Principles</h2>
        <p class="text-xl text-muted-foreground max-w-2xl mx-auto">
          Our mission is to give you back control of your digital life
        </p>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">

        <Card class="border-2">
          <CardContent class="pt-6">
            <div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
              <Shield class="h-6 w-6 text-primary" />
            </div>
            <h3 class="text-2xl font-bold mb-3">Privacy</h3>
            <p class="text-muted-foreground leading-relaxed">
              End-to-end encryption ensures your data belongs only to you.
              No corporate surveillance, no data mining, no third-party access.
            </p>
          </CardContent>
        </Card>

        <Card class="border-2">
          <CardContent class="pt-6">
            <div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
              <Unlock class="h-6 w-6 text-primary" />
            </div>
            <h3 class="text-2xl font-bold mb-3">Autonomy</h3>
            <p class="text-muted-foreground leading-relaxed">
              You own your content, connections, and identity.
              No platform can ban you, shadow ban you, or restrict your reach.
            </p>
          </CardContent>
        </Card>

        <Card class="border-2">
          <CardContent class="pt-6">
            <div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
              <Users class="h-6 w-6 text-primary" />
            </div>
            <h3 class="text-2xl font-bold mb-3">Decentralization</h3>
            <p class="text-muted-foreground leading-relaxed">
              No single point of failure or control.
              The network runs on peer-to-peer connections,
              making it resilient and censorship-resistant.
            </p>
          </CardContent>
        </Card>

      </div>
    </section>

    <!-- CTA -->
    <section class="container py-24 border-t border-border">
      <div class="max-w-3xl mx-auto text-center space-y-6">
        <h2 class="text-3xl md:text-4xl font-bold">Ready to Join the Revolution?</h2>
        <p class="text-xl text-muted-foreground">
          Download our app and experience a social network built for freedom, not profit.
        </p>
        <Button size="lg" class="text-lg px-8">
          <RouterLink to="/downloads">Get Started</RouterLink>
        </Button>
      </div>
    </section>

  </div>
</template>