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 { Radio, Zap, Globe, Building, Gauge, Clock, Phone, ArrowRight, CheckCircle2 } from "lucide-react";

const features = [
  "Débit jusqu'à 2 Gbps",
  "Portée jusqu'à 100+ km",
  "Latence inférieure à 1 ms",
  "Bande 5 GHz sans licence",
  "Design d'antenne innovant",
  "Mode full-duplex FDD",
  "Installation professionnelle",
  "Support technique 24/7",
];

const advantages = [
  {
    icon: Building,
    title: "Connectez Vos Bâtiments",
    description: "Reliez vos bâtisses entre elles sans câblage. Tous vos appareils sur le même réseau principal, peu importe leur emplacement.",
  },
  {
    icon: Zap,
    title: "Performance Révolutionnaire",
    description: "Dépassant les connexions filaires conventionnelles, nos solutions offrent un débit réel jusqu'à 1.2+ Gbps.",
  },
  {
    icon: Clock,
    title: "Latence Ultra-Faible",
    description: "Support FDD en mode full-duplex pour une latence inférieure à 1 ms, améliorant l'efficacité de vos liens réseau.",
  },
  {
    icon: Globe,
    title: "Longue Portée",
    description: "Conçu comme une dorsale haute performance, opère sur une portée allant jusqu'à 100+ km selon le modèle.",
  },
];

const models = [
  {
    name: "AF5",
    band: "Mid-Band 5 GHz",
    speed: "1.2+ Gbps",
    range: "100+ km",
  },
  {
    name: "AF5U",
    band: "High-Band 5 GHz",
    speed: "1.2+ Gbps",
    range: "100+ km",
  },
  {
    name: "AF24",
    band: "24 GHz",
    speed: "1.4+ Gbps",
    range: "13+ km",
  },
  {
    name: "AF24HD",
    band: "24 GHz",
    speed: "2 Gbps",
    range: "20+ km",
  },
];

const BusinessReseauInterSites = () => {
  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">
              <Radio className="h-4 w-4" />
              Réseaux Inter-Sites
            </div>
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-foreground mb-6">
              Connectez Vos Sites avec le <span className="text-primary">Point-à-Point</span>
            </h1>
            <p className="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto">
              Solutions de liaison sans fil haute performance pour relier vos bâtiments. Économisez sur les liens Internet 
              et le câblage avec nos technologies point-à-point.
            </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 étude
                  <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>

      {/* Advantages */}
      <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">
              Pourquoi le Point-à-Point?
            </h2>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
              Idéal pour les entreprises avec plusieurs bâtiments sur un même site
            </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>

      {/* Models Comparison */}
      <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">
              Comparaison des Modèles
            </h2>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
              Choisissez la solution adaptée à vos besoins de distance et de débit
            </p>
          </div>
          
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
            {models.map((model, index) => (
              <Card key={index} className="text-center hover:shadow-lg transition-shadow border-2 hover:border-primary/50">
                <CardContent className="pt-8 pb-6">
                  <div className="w-16 h-16 bg-primary rounded-xl flex items-center justify-center mx-auto mb-6">
                    <Radio className="h-8 w-8 text-primary-foreground" />
                  </div>
                  <h3 className="text-xl font-bold mb-2">{model.name}</h3>
                  <p className="text-sm text-muted-foreground mb-4">{model.band}</p>
                  <div className="space-y-2">
                    <div className="flex items-center justify-center gap-2">
                      <Gauge className="h-4 w-4 text-primary" />
                      <span className="font-semibold">{model.speed}</span>
                    </div>
                    <div className="flex items-center justify-center gap-2">
                      <Globe className="h-4 w-4 text-primary" />
                      <span className="font-semibold">{model.range}</span>
                    </div>
                  </div>
                </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">
                  Caractéristiques Techniques
                </h2>
                <p className="text-lg text-muted-foreground mb-8">
                  Nos solutions point-à-point utilisent une conception d'antenne à double isolation idéale pour des performances 
                  robustes dans les environnements RF les plus difficiles.
                </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">
                <Radio className="h-24 w-24 text-primary mx-auto mb-6" />
                <h3 className="text-2xl font-bold mb-2">Bande 5 GHz</h3>
                <p className="text-muted-foreground">Opération mondiale sans licence sur les fréquences 5 GHz</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 à Connecter Vos Sites?
          </h2>
          <p className="text-xl opacity-90 mb-8 max-w-2xl mx-auto">
            Contactez nos experts pour une étude de faisabilité gratuite et découvrez les économies potentielles.
          </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 étude 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 BusinessReseauInterSites;
