import { Link } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import Header from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";
import { Signal, Building2, Home, Zap, Settings, Phone, ArrowRight, CheckCircle2 } from "lucide-react";

const features = [
  "Installation professionnelle et personnalisée",
  "Compatible avec tous les opérateurs mobiles",
  "Couverture complète de vos espaces",
  "Technologie d'amplification intelligente",
  "Design discret et élégant",
  "Support technique 24/7",
  "Garantie complète sur l'équipement",
  "Service d'entretien inclus",
];

const advantages = [
  {
    icon: Building2,
    title: "Secteur commercial",
    description: "Amplificateurs conçus pour les environnements exigeants : bureaux, entrepôts, hôtels. Garantissez une connectivité mobile constante pour vos opérations commerciales.",
  },
  {
    icon: Home,
    title: "Secteur résidentiel",
    description: "Dites adieu aux zones mortes et aux appels interrompus. Profitez d'appels clairs et d'une navigation rapide dans toutes les pièces de votre maison.",
  },
  {
    icon: Zap,
    title: "Technologie avancée",
    description: "Compatibilité étendue avec tous les réseaux mobiles. La technologie d'amplification intelligente ajuste automatiquement le signal pour maximiser la qualité.",
  },
  {
    icon: Settings,
    title: "Installation facile",
    description: "Nos kits d'amplification viennent avec tout le nécessaire pour une installation rapide. Notre équipe de support est toujours prête à vous aider.",
  },
];

const howItWorks = [
  {
    step: "1",
    title: "Antenne extérieure",
    description: "L'antenne extérieure capte le signal cellulaire de l'extérieur de votre bâtiment et l'envoie au booster.",
  },
  {
    step: "2",
    title: "Amplificateur",
    description: "L'amplificateur cellulaire amplifie votre signal et l'envoie à votre antenne intérieure.",
  },
  {
    step: "3",
    title: "Antenne intérieure",
    description: "L'antenne intérieure distribue votre nouveau signal fort dans toute la zone problématique.",
  },
];

const BusinessAmplificationCellulaire = () => {
  return (
    <div className="min-h-screen bg-background">
      <Header />
      
      {/* Hero Section */}
      <section className="pt-32 pb-20 bg-gradient-to-br from-primary/10 via-background to-secondary/10">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto text-center">
            <div className="inline-flex items-center gap-2 bg-primary/10 text-primary px-4 py-2 rounded-full text-sm font-medium mb-6">
              <Signal className="h-4 w-4" />
              Amplification cellulaire
            </div>
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-foreground mb-6">
              Tout le monde mérite un <span className="text-primary">bon signal</span>
            </h1>
            <p className="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto">
              Solutions d'amplification cellulaire professionnelles pour le commercial et le résidentiel. 
              Fini les zones mortes et les appels interrompus.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button size="lg" className="text-lg px-8" asChild>
                <a href="/#contact">
                  Demander une soumission
                  <ArrowRight className="ml-2 h-5 w-5" />
                </a>
              </Button>
              <Button size="lg" variant="outline" className="text-lg px-8 border-border text-foreground hover:bg-accent">
                <Phone className="mr-2 h-5 w-5" />
                1-855-888-2746
              </Button>
            </div>
          </div>
        </div>
      </section>

      {/* How It Works */}
      <section className="py-20 bg-muted/30">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
             <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
              Comment ça fonctionne
            </h2>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
              Chaque amplificateur nécessite une antenne de signal, un câble coaxial et une antenne de distribution.
            </p>
          </div>
          
          <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
            {howItWorks.map((item, index) => (
              <Card key={index} className="text-center border-2 hover:border-primary/50 transition-colors">
                <CardContent className="pt-8 pb-6">
                  <div className="w-16 h-16 bg-primary text-primary-foreground rounded-full flex items-center justify-center text-2xl font-bold mx-auto mb-6">
                    {item.step}
                  </div>
                  <h3 className="text-xl font-semibold mb-3">{item.title}</h3>
                  <p className="text-muted-foreground">{item.description}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Advantages */}
      <section className="py-20">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
              Boostez votre connectivité
            </h2>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
              L'expert en amplification cellulaire pour le commercial et le résidentiel
            </p>
          </div>
          
          <div className="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
            {advantages.map((advantage, index) => (
              <Card key={index} className="hover:shadow-lg transition-shadow">
                <CardContent className="p-8">
                  <div className="w-14 h-14 bg-primary/10 rounded-xl flex items-center justify-center mb-6">
                    <advantage.icon className="h-7 w-7 text-primary" />
                  </div>
                  <h3 className="text-xl font-semibold mb-3">{advantage.title}</h3>
                  <p className="text-muted-foreground">{advantage.description}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Features */}
      <section className="py-20 bg-muted/30">
        <div className="container mx-auto px-4">
          <div className="max-w-5xl mx-auto">
            <div className="grid lg:grid-cols-2 gap-12 items-center">
              <div>
                <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-6">
                  Ce qui est inclus
                </h2>
                <p className="text-lg text-muted-foreground mb-8">
                  Notre solution complète d'amplification cellulaire comprend tout ce dont vous avez besoin pour une connectivité optimale.
                </p>
                <div className="grid sm:grid-cols-2 gap-4">
                  {features.map((feature, index) => (
                    <div key={index} className="flex items-center gap-3">
                      <CheckCircle2 className="h-5 w-5 text-primary flex-shrink-0" />
                      <span className="text-foreground">{feature}</span>
                    </div>
                  ))}
                </div>
              </div>
              <div className="bg-gradient-to-br from-primary/20 to-secondary/20 rounded-2xl p-8 text-center">
                <Signal className="h-24 w-24 text-primary mx-auto mb-6" />
                <h3 className="text-2xl font-bold mb-2">Signal amplifié</h3>
                <p className="text-muted-foreground">Toutes les barres de signal dans toute votre propriété</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-20 bg-primary text-primary-foreground">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl md:text-4xl font-bold mb-6">
            Prêt à améliorer votre signal?
          </h2>
          <p className="text-xl opacity-90 mb-8 max-w-2xl mx-auto">
            Contactez nos experts pour une évaluation gratuite de vos besoins en amplification cellulaire.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button size="lg" variant="secondary" className="text-lg px-8" asChild>
              <a href="/#contact">Demander une soumission gratuite</a>
            </Button>
            <Button size="lg" variant="outline" className="text-lg px-8 border-primary-foreground text-primary-foreground hover:bg-primary-foreground hover:text-primary">
              <Phone className="mr-2 h-5 w-5" />
              1-855-888-2746
            </Button>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
};

export default BusinessAmplificationCellulaire;
