<script setup lang="ts">
import Header from "@/components/layout/Header.vue";
import Footer from "@/components/layout/Footer.vue";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Check, Headphones, Clock, Wrench, Shield, ArrowRight, Phone, Mail, MessageCircle, FileQuestion } from "lucide-vue-next";

const supportOptions = [
  {
    icon: Phone,
    title: "Par téléphone",
    description: "Parlez directement à un technicien",
    action: "514.448.0773",
    actionType: "tel",
  },
  {
    icon: Mail,
    title: "Par courriel",
    description: "Réponse sous 24 heures",
    action: "support@targo.ca",
    actionType: "email",
  },
  {
    icon: MessageCircle,
    title: "Chat en direct",
    description: "Assistance immédiate en ligne",
    action: "Démarrer le chat",
    actionType: "chat",
  },
  {
    icon: FileQuestion,
    title: "FAQ & Guides",
    description: "Trouvez vos réponses rapidement",
    action: "Consulter la FAQ",
    actionType: "link",
  },
];

const maintenancePlans = [
  {
    name: "Support standard",
    price: 0,
    note: "Inclus",
    features: ["Support téléphonique 8h-20h", "Support par courriel", "FAQ et guides en ligne", "Diagnostic à distance"],
    popular: false,
  },
  {
    name: "Support prioritaire",
    price: 5,
    note: "/mois",
    features: ["Support 24/7", "Temps de réponse garanti", "Technicien dédié", "Interventions prioritaires", "Prêt d'équipement"],
    popular: true,
  },
  {
    name: "Support entreprise",
    price: 15,
    note: "/mois",
    features: ["Support 24/7 dédié", "SLA garanti 4h", "Gestionnaire de compte", "Maintenance préventive", "Rapports mensuels", "Formation incluse"],
    popular: false,
  },
];

const features = [
  {
    icon: Clock,
    title: "Disponibilité 24/7",
    description: "Notre équipe de surveillance technique est disponible jour et nuit pour assurer la continuité de vos services.",
  },
  {
    icon: Wrench,
    title: "Techniciens locaux",
    description: "Une équipe de techniciens qualifiés basée à Ste-Clotilde, prête à intervenir rapidement chez vous.",
  },
  {
    icon: Shield,
    title: "Maintenance préventive",
    description: "Nous surveillons proactivement notre réseau pour prévenir les problèmes avant qu'ils ne surviennent.",
  },
  {
    icon: Headphones,
    title: "Support courtois",
    description: "Un service client chaleureux et professionnel, à l'image de notre communauté locale.",
  },
];

const faqItems = [
  {
    question: "Comment réinitialiser mon routeur?",
    answer: "Débranchez le routeur pendant 30 secondes, puis rebranchez-le. Attendez 2-3 minutes que les voyants se stabilisent.",
  },
  {
    question: "Ma connexion est lente, que faire?",
    answer: "Vérifiez d'abord que tous les câbles sont bien branchés. Redémarrez votre routeur. Si le problème persiste, contactez notre support.",
  },
  {
    question: "Comment accéder à mon espace client?",
    answer: "Rendez-vous sur store.targo.ca/clients et connectez-vous avec vos identifiants. Vous y trouverez vos factures et options de forfait.",
  },
  {
    question: "Puis-je modifier mon forfait en ligne?",
    answer: "Oui, connectez-vous à votre espace client pour voir les options disponibles ou contactez-nous pour une assistance personnalisée.",
  },
];
</script>

<template>
  <div class="min-h-screen">
    <Header />
    <main class="pt-32">
      <!-- Hero Section -->
      <section class="py-20 bg-gradient-to-br from-secondary via-background to-secondary">
        <div class="container">
          <div class="max-w-3xl mx-auto text-center">
            <span class="inline-block px-4 py-1 bg-primary/10 rounded-full text-primary font-medium text-sm mb-4">
              Support technique
            </span>
            <h1 class="font-display text-4xl md:text-6xl font-bold mb-6">
              Une équipe locale <span class="text-gradient-targo">à votre service</span>
            </h1>
            <p class="text-xl text-muted-foreground mb-8">
              Support technique courtois, professionnel et disponible. Notre équipe basée à Ste-Clotilde
              est là pour vous aider avec tous vos besoins en télécommunications.
            </p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
              <Button size="lg" class="gradient-targo glow-targo" as-child>
                <a href="tel:514.448.0773">
                  <Phone class="w-5 h-5 mr-2" />
                  514.448.0773
                </a>
              </Button>
              <Button size="lg" variant="outline" class="border-primary text-primary" as-child>
                <a href="mailto:support@targo.ca">
                  Envoyer un courriel
                </a>
              </Button>
            </div>
          </div>
        </div>
      </section>

      <!-- Contact Options -->
      <section class="py-16 bg-primary text-primary-foreground">
        <div class="container">
          <div class="grid md:grid-cols-4 gap-6">
            <Card v-for="option in supportOptions" :key="option.title" class="bg-primary-foreground/10 border-primary-foreground/20 text-primary-foreground">
              <CardContent class="p-6 text-center">
                <component :is="option.icon" class="w-10 h-10 mx-auto mb-4" />
                <h3 class="font-display text-xl font-bold mb-2">{{ option.title }}</h3>
                <p class="text-primary-foreground/80 text-sm mb-4">{{ option.description }}</p>
                <span class="font-medium text-sm">{{ option.action }}</span>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      <!-- Features -->
      <section class="py-20">
        <div class="container">
          <div class="text-center max-w-2xl mx-auto mb-16">
            <h2 class="font-display text-4xl font-bold mb-4">
              Pourquoi notre support se démarque
            </h2>
            <p class="text-muted-foreground text-lg">
              Un service régional avec l'expertise d'un grand fournisseur.
            </p>
          </div>

          <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            <Card v-for="feature in features" :key="feature.title" class="text-center p-6">
              <CardContent class="p-0">
                <div class="w-16 h-16 mx-auto mb-4 rounded-2xl gradient-targo flex items-center justify-center">
                  <component :is="feature.icon" class="w-8 h-8 text-primary-foreground" />
                </div>
                <h3 class="font-display text-xl font-bold mb-2">{{ feature.title }}</h3>
                <p class="text-muted-foreground text-sm">{{ feature.description }}</p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      <!-- Maintenance Plans -->
      <section class="py-20 bg-secondary/50">
        <div class="container">
          <div class="text-center max-w-2xl mx-auto mb-16">
            <h2 class="font-display text-4xl font-bold mb-4">
            Options de support
            </h2>
            <p class="text-muted-foreground text-lg">
              Choisissez le niveau de support qui correspond à vos besoins.
            </p>
          </div>

          <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
            <Card
              v-for="plan in maintenancePlans"
              :key="plan.name"
              :class="`relative overflow-hidden transition-all duration-300 hover:shadow-xl hover:-translate-y-1 ${
                plan.popular ? 'border-primary shadow-lg ring-2 ring-primary/20' : ''
              }`"
            >
              <div v-if="plan.popular" class="absolute top-4 right-4 px-3 py-1 gradient-targo text-primary-foreground text-xs font-medium rounded-full">
                Recommandé
              </div>
              <CardContent class="p-8">
                <h3 class="font-display text-2xl font-bold mb-2">{{ plan.name }}</h3>
                <div class="flex items-baseline gap-1 mb-6">
                  <span v-if="plan.price === 0" class="font-display text-3xl font-bold text-primary">{{ plan.note }}</span>
                  <template v-else>
                    <span class="font-display text-5xl font-bold text-primary">${{ plan.price }}</span>
                    <span class="text-muted-foreground">{{ plan.note }}</span>
                  </template>
                </div>
                <ul class="space-y-3 mb-8">
                  <li v-for="feature in plan.features" :key="feature" class="flex items-center gap-3">
                    <div class="w-5 h-5 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
                      <Check class="w-3 h-3 text-primary" />
                    </div>
                    <span class="text-sm text-muted-foreground">{{ feature }}</span>
                  </li>
                </ul>
                <Button
                  :class="`w-full ${plan.popular ? 'gradient-targo' : ''}`"
                  :variant="plan.popular ? 'default' : 'outline'"
                >
                  {{ plan.price === 0 ? "Inclus avec votre forfait" : "Ajouter à mon forfait" }}
                </Button>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      <!-- FAQ -->
      <section class="py-20">
        <div class="container">
          <div class="text-center max-w-2xl mx-auto mb-16">
            <h2 class="font-display text-4xl font-bold mb-4">
              Questions fréquentes
            </h2>
            <p class="text-muted-foreground text-lg">
              Trouvez rapidement les réponses à vos questions.
            </p>
          </div>

          <div class="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
            <Card v-for="item in faqItems" :key="item.question" class="p-6">
              <CardContent class="p-0">
                <h3 class="font-display text-lg font-bold mb-2">{{ item.question }}</h3>
                <p class="text-muted-foreground">{{ item.answer }}</p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      <!-- CTA -->
      <section class="py-20">
        <div class="container">
          <Card class="gradient-targo p-12 text-center text-primary-foreground">
            <h2 class="font-display text-3xl md:text-4xl font-bold mb-4">
              Besoin d'aide maintenant?
            </h2>
            <p class="text-xl mb-8 text-primary-foreground/90">
              Notre équipe est prête à vous aider. Appelez-nous ou envoyez-nous un message.
            </p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
              <Button size="lg" variant="secondary" class="text-primary font-semibold" as-child>
                <a href="tel:514.448.0773">
                  <Phone class="w-5 h-5 mr-2" />
                  Appeler maintenant
                </a>
              </Button>
              <Button size="lg" variant="outline" class="border-primary-foreground text-primary-foreground hover:bg-primary-foreground/10" as-child>
                <a href="mailto:support@targo.ca">
                  <Mail class="w-5 h-5 mr-2" />
                  Envoyer un courriel
                </a>
              </Button>
            </div>
          </Card>
        </div>
      </section>
    </main>
    <Footer />
  </div>
</template>
