<script setup>
import Card from '@/components/ui/Card.vue'
import CardContent from '@/components/ui/CardContent.vue'

import { AlertCircle } from 'lucide-vue-next'
</script>

<template>

  <section class="bg-card">

    <div class="container py-24">

      <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">

        <div>

          <div
            class="inline-flex items-center gap-2 px-3 py-1 text-sm
                   bg-destructive/10 text-destructive rounded-full
                   border border-destructive/20 mb-6"
          >
            <AlertCircle class="h-4 w-4" />
            The Centralization Problem
          </div>

          <h2 class="text-3xl md:text-4xl font-bold mb-6">
            Critical Infrastructure Is Becoming Centralized
          </h2>

          <div class="space-y-4 text-muted-foreground leading-relaxed">

            <p>
              Communication, identity, discovery, distribution, and coordination are increasingly controlled by a small number of corporations and platforms.
            </p>

            <p>
              As technology becomes more integrated into everyday life, centralized control over infrastructure creates structural dependency on entities users cannot govern or audit.
            </p>

            <p>
              NoSys was created to explore a different direction:
              decentralized systems where coordination happens directly between participants instead of through centralized intermediaries.
            </p>

          </div>

        </div>

        <Card class="border-2">

          <CardContent class="p-8">

            <div class="space-y-6">

              <div class="flex items-start gap-4">
                <div class="h-2 w-2 rounded-full bg-destructive mt-2" />

                <div>
                  <h3 class="font-semibold mb-1">
                    Infrastructure Dependency
                  </h3>

                  <p class="text-sm text-muted-foreground">
                    Critical systems increasingly rely on centralized providers
                  </p>
                </div>
              </div>

              <div class="flex items-start gap-4">
                <div class="h-2 w-2 rounded-full bg-destructive mt-2" />

                <div>
                  <h3 class="font-semibold mb-1">
                    Platform Control
                  </h3>

                  <p class="text-sm text-muted-foreground">
                    Access, visibility, and communication controlled by private entities
                  </p>
                </div>
              </div>

              <div class="flex items-start gap-4">
                <div class="h-2 w-2 rounded-full bg-destructive mt-2" />

                <div>
                  <h3 class="font-semibold mb-1">
                    Data Concentration
                  </h3>

                  <p class="text-sm text-muted-foreground">
                    Massive amounts of user data aggregated into centralized systems
                  </p>
                </div>
              </div>

              <div class="flex items-start gap-4">
                <div class="h-2 w-2 rounded-full bg-destructive mt-2" />

                <div>
                  <h3 class="font-semibold mb-1">
                    Single Points of Failure
                  </h3>

                  <p class="text-sm text-muted-foreground">
                    Centralized architecture creates systemic fragility
                  </p>
                </div>
              </div>

            </div>

          </CardContent>

        </Card>

      </div>

    </div>

  </section>

</template>