import Header from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";
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-react";

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.",
  },
];

const Support = () => {
  return (
    <div className="min-h-screen">
      <Header />
      <main className="pt-32">
        {/* Hero Section */}
        <section className="py-20 bg-gradient-to-br from-secondary via-background to-secondary">
          <div className="container">
            <div className="max-w-3xl mx-auto text-center">
              <span className="inline-block px-4 py-1 bg-primary/10 rounded-full text-primary font-medium text-sm mb-4">
                Support technique
              </span>
              <h1 className="font-display text-4xl md:text-6xl font-bold mb-6">
                Une équipe locale <span className="text-gradient-targo">à votre service</span>
              </h1>
              <p className="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 className="flex flex-col sm:flex-row gap-4 justify-center">
                <Button size="lg" className="gradient-targo glow-targo" asChild>
                  <a href="tel:514.448.0773">
                    <Phone className="w-5 h-5 mr-2" />
                    514.448.0773
                  </a>
                </Button>
                <Button size="lg" variant="outline" className="border-primary text-primary" asChild>
                  <a href="mailto:support@targo.ca">
                    Envoyer un courriel
                  </a>
                </Button>
              </div>
            </div>
          </div>
        </section>

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

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

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

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

            <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
              {maintenancePlans.map((plan) => (
                <Card
                  key={plan.name}
                  className={`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" : ""
                  }`}
                >
                  {plan.popular && (
                    <div className="absolute top-4 right-4 px-3 py-1 gradient-targo text-primary-foreground text-xs font-medium rounded-full">
                      Recommandé
                    </div>
                  )}
                  <CardContent className="p-8">
                    <h3 className="font-display text-2xl font-bold mb-2">{plan.name}</h3>
                    <div className="flex items-baseline gap-1 mb-6">
                      {plan.price === 0 ? (
                        <span className="font-display text-3xl font-bold text-primary">{plan.note}</span>
                      ) : (
                        <>
                          <span className="font-display text-5xl font-bold text-primary">${plan.price}</span>
                          <span className="text-muted-foreground">{plan.note}</span>
                        </>
                      )}
                    </div>
                    <ul className="space-y-3 mb-8">
                      {plan.features.map((feature) => (
                        <li key={feature} className="flex items-center gap-3">
                          <div className="w-5 h-5 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
                            <Check className="w-3 h-3 text-primary" />
                          </div>
                          <span className="text-sm text-muted-foreground">{feature}</span>
                        </li>
                      ))}
                    </ul>
                    <Button
                      className={`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 className="py-20">
          <div className="container">
            <div className="text-center max-w-2xl mx-auto mb-16">
              <h2 className="font-display text-4xl font-bold mb-4">
                Questions fréquentes
              </h2>
              <p className="text-muted-foreground text-lg">
                Trouvez rapidement les réponses à vos questions.
              </p>
            </div>

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

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

export default Support;
