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

import {
  Search,
  ServerCog,
  Network,
  Workflow
} from 'lucide-vue-next'
</script>

<template>

  <section class="bg-card">

    <div class="container py-24">

      <div class="text-center mb-16">

        <div
          class="inline-flex items-center px-3 py-1 text-sm
                 rounded-full border border-border mb-6"
        >
          Infrastructure Layers
        </div>

        <h2 class="text-3xl md:text-4xl font-bold mb-6">
          Core Infrastructure
        </h2>

        <p class="text-muted-foreground max-w-3xl mx-auto text-lg">
          NoSys provides foundational infrastructure components for
          decentralized communication, peer coordination,
          network management, and extensible distributed systems.
        </p>

      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">

        <!-- Peer Discovery -->

        <Card class="border-2">

          <CardContent class="p-8">

            <div class="flex items-center mb-4">
              <Search class="h-10 w-10 text-primary" />
            </div>

            <h3 class="font-bold text-xl mb-3">
              Peer Discovery
            </h3>

            <p class="text-muted-foreground leading-relaxed">
              Locate peers across decentralized environments and establish
              communication paths between distributed nodes.
            </p>

          </CardContent>

        </Card>

        <!-- Rendezvous -->

        <Card class="border-2">

          <CardContent class="p-8">

            <div class="flex items-center mb-4">
              <ServerCog class="h-10 w-10 text-primary" />
            </div>

            <h3 class="font-bold text-xl mb-3">
              Rendezvous Coordination
            </h3>

            <p class="text-muted-foreground leading-relaxed">
              Assist peers behind NATs and isolated networks in discovering
              and connecting to each other across different environments.
            </p>

          </CardContent>

        </Card>

        <!-- Network Management -->

        <Card class="border-2">

          <CardContent class="p-8">

            <div class="flex items-center mb-4">
              <Network class="h-10 w-10 text-primary" />
            </div>

            <h3 class="font-bold text-xl mb-3">
              Network Management
            </h3>

            <p class="text-muted-foreground leading-relaxed">
              Create isolated decentralized sub-networks with independent peers,
              communication rules, and coordination models.
            </p>

          </CardContent>

        </Card>

        <!-- Event System -->

        <Card class="border-2">

          <CardContent class="p-8">

            <div class="flex items-center mb-4">
              <Workflow class="h-10 w-10 text-primary" />
            </div>

            <h3 class="font-bold text-xl mb-3">
              Modular Event System
            </h3>

            <p class="text-muted-foreground leading-relaxed">
              Infrastructure components and modules communicate through observable
              events, enabling extensibility and interoperability across the platform.
            </p>

          </CardContent>

        </Card>

      </div>

    </div>

  </section>

</template>