<script setup lang="ts">
import { RouterLink } from "vue-router";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import Header from "@/components/layout/Header.vue";
import Footer from "@/components/layout/Footer.vue";
import { Cable, Layers, Server, Wrench, Clock, Shield, Phone, ArrowRight, CheckCircle2 } from "lucide-vue-next";

const features = [
  "Installation de fibre optique",
  "Épissage par fusion",
  "Câblage cuivre Cat6/Cat6A",
  "Installation d'armoire data",
  "Câblage salle serveur",
  "Tests et certification",
  "Service avec nacelle",
  "Maintenance des infrastructures",
];

const advantages = [
  {
    icon: Cable,
    title: "Fibre optique",
    description: "Installation professionnelle de fibre optique avec nacelle et fusions. Expérience depuis 2007 pour tous types de réseaux.",
  },
  {
    icon: Layers,
    title: "Câblage Structuré",
    description: "Déploiement de réseaux informatiques et télécommunication sur mesure pour toutes vos infrastructures.",
  },
  {
    icon: Wrench,
    title: "Épissage & Tests",
    description: "Services d'épissage, terminaison et test de fibres optiques. Expertise sur tous les types de réseaux jusqu'aux dorsales nationales.",
  },
  {
    icon: Clock,
    title: "Service 24/7",
    description: "Équipes de garde disponibles 24h/24, 365 jours par an pour intervenir en cas de pannes et urgences.",
  },
];

const services = [
  "Installation d'armoire data",
  "Câblage salle serveur",
  "Câble cuivre et fibre optique",
  "Étude de faisabilité des travaux",
  "Gestion et maintenance des infrastructures réseaux",
  "Réparation de fibre optique sur réseau existant",
];
</script>

<template>
  <div class="min-h-screen bg-background">
    <Header />

    <!-- Hero Section -->
    <section class="pt-32 pb-20 bg-gradient-to-br from-primary/10 via-background to-secondary/10">
      <div class="container mx-auto px-4">
        <div class="max-w-4xl mx-auto text-center">
          <div class="inline-flex items-center gap-2 bg-primary/10 text-primary px-4 py-2 rounded-full text-sm font-medium mb-6">
            <Cable class="h-4 w-4" />
            Réseaux Filaires
          </div>
          <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-foreground mb-6">
            Fibre Optique & <span class="text-primary">Câblage Structuré</span>
          </h1>
          <p class="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto">
            Prestations sur mesure pour l'installation de fibre optique et de câblage structuré.
            Accélérez la modernisation et la croissance de votre entreprise.
          </p>
          <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <Button size="lg" class="text-lg px-8" as-child>
              <a href="/#contact">
                Demander une soumission
                <ArrowRight class="ml-2 h-5 w-5" />
              </a>
            </Button>
            <Button size="lg" variant="outline" class="text-lg px-8 border-border text-foreground hover:bg-accent">
              <Phone class="mr-2 h-5 w-5" />
              1-855-888-2746
            </Button>
          </div>
        </div>
      </div>
    </section>

    <!-- Advantages -->
    <section class="py-20 bg-muted/30">
      <div class="container mx-auto px-4">
        <div class="text-center mb-16">
          <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-4">
            Nos Expertises
          </h2>
          <p class="text-lg text-muted-foreground max-w-2xl mx-auto">
            Des années d'expérience dans la fourniture de services de câblage réseau
          </p>
        </div>

        <div class="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
          <Card v-for="(advantage, index) in advantages" :key="index" class="hover:shadow-lg transition-shadow">
            <CardContent class="p-8">
              <div class="w-14 h-14 bg-primary/10 rounded-xl flex items-center justify-center mb-6">
                <component :is="advantage.icon" class="h-7 w-7 text-primary" />
              </div>
              <h3 class="text-xl font-semibold mb-3">{{ advantage.title }}</h3>
              <p class="text-muted-foreground">{{ advantage.description }}</p>
            </CardContent>
          </Card>
        </div>
      </div>
    </section>

    <!-- Services -->
    <section class="py-20">
      <div class="container mx-auto px-4">
        <div class="max-w-5xl mx-auto">
          <div class="grid lg:grid-cols-2 gap-12 items-center">
            <div>
              <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-6">
                Nos Prestations
              </h2>
              <p class="text-lg text-muted-foreground mb-8">
                Pour le déploiement de votre réseau informatique et de télécommunication, nous proposons des prestations
                sur mesure pour l'installation de fibre optique et de câblage structuré.
              </p>
              <div class="space-y-4">
                <div v-for="(service, index) in services" :key="index" class="flex items-center gap-3">
                  <CheckCircle2 class="h-5 w-5 text-primary flex-shrink-0" />
                  <span class="text-foreground">{{ service }}</span>
                </div>
              </div>
            </div>
            <div class="bg-gradient-to-br from-primary/20 to-secondary/20 rounded-2xl p-8 text-center">
              <Cable class="h-24 w-24 text-primary mx-auto mb-6" />
              <h3 class="text-2xl font-bold mb-2">Depuis 2007</h3>
              <p class="text-muted-foreground">Expertise éprouvée au service de votre infrastructure</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Features -->
    <section class="py-20 bg-muted/30">
      <div class="container mx-auto px-4">
        <div class="max-w-5xl mx-auto">
          <div class="text-center mb-12">
            <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-4">
              Services Complets
            </h2>
            <p class="text-lg text-muted-foreground">
              De la conception à la maintenance de vos infrastructures réseau
            </p>
          </div>
          <div class="grid sm:grid-cols-2 md:grid-cols-4 gap-4">
            <div v-for="(feature, index) in features" :key="index" class="flex items-center gap-3 bg-background p-4 rounded-lg shadow-sm">
              <CheckCircle2 class="h-5 w-5 text-primary flex-shrink-0" />
              <span class="text-foreground">{{ feature }}</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- CTA -->
    <section class="py-20 bg-primary text-primary-foreground">
      <div class="container mx-auto px-4 text-center">
        <h2 class="text-3xl md:text-4xl font-bold mb-6">
          Besoin d'une Infrastructure Réseau?
        </h2>
        <p class="text-xl opacity-90 mb-8 max-w-2xl mx-auto">
          Faites-nous part de vos besoins. Un représentant technique se fera un plaisir de vous contacter pour une consultation gratuite.
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
          <Button size="lg" variant="secondary" class="text-lg px-8" as-child>
            <a href="/#contact">Demander une soumission gratuite</a>
          </Button>
          <Button size="lg" variant="outline" class="text-lg px-8 border-primary-foreground text-primary-foreground hover:bg-primary-foreground hover:text-primary">
            <Phone class="mr-2 h-5 w-5" />
            1-855-888-2746
          </Button>
        </div>
      </div>
    </section>

    <Footer />
  </div>
</template>
