import { Server, CheckCircle, Zap, Shield, Clock, Wifi, ArrowRight, Phone } from "lucide-react";
import Header from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Link } from "react-router-dom";

const features = [
  "Fibre optique jusqu'à 10 Gbit/s",
  "IP statique incluse",
  "Garantie de disponibilité 99.9%",
  "Sauvegarde LTE automatique",
  "Installation gratuite",
  "Contrat flexible",
  "Support technique 24/7",
  "Monitoring proactif"
];

const advantages = [
  {
    icon: Zap,
    title: "Vitesse maximale",
    description: "Jusqu'à 10 Gbit/s en fibre optique dédiée pour vos opérations critiques."
  },
  {
    icon: Shield,
    title: "Fiabilité garantie",
    description: "SLA de 99.9% avec sauvegarde LTE automatique en cas de panne."
  },
  {
    icon: Clock,
    title: "Support prioritaire",
    description: "Équipe technique disponible 24/7 avec temps de réponse garanti."
  },
  {
    icon: Wifi,
    title: "Wi-Fi professionnel",
    description: "Solution Wi-Fi entreprise incluse pour une couverture optimale."
  }
];

const plans = [
  {
    name: "Essentiel",
    price: "89$",
    description: "Idéal pour les petits bureaux et le télétravail.",
    features: ["500 Mbit/s illimité", "Support prioritaire 8h-18h", "1 adresse IP statique", "Routeur Wi-Fi 6 inclus"]
  },
  {
    name: "Performance",
    price: "119$",
    description: "La vitesse standard pour les PME en croissance.",
    popular: true,
    features: ["1 Gbit/s illimité", "Support prioritaire 24/7", "5 adresses IP statiques", "Routeur Wi-Fi 6E inclus", "Sauvegarde LTE (Option)"]
  },
  {
    name: "Ultimate",
    price: "249$",
    description: "Puissance maximale pour les gros transferts.",
    features: ["10 Gbit/s illimité", "Support dédié 24/7", "Bloc IP /29 inclus", "Borne Wi-Fi Pro incluse", "SLA 99.9% garanti"]
  }
];

const BusinessInternet = () => {
  return (
    <div className="min-h-screen bg-background">
      <Header />

      {/* Hero Section */}
      <section className="relative pt-24 pb-16 md:pt-32 md:pb-24 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">
            <Link
              to="/business"
              className="inline-flex items-center text-primary hover:underline mb-6"
            >
              ← Retour aux solutions affaires
            </Link>

            <div className="w-20 h-20 bg-primary/10 rounded-2xl flex items-center justify-center mx-auto mb-8 border border-primary/20">
              <Server className="h-10 w-10 text-primary" />
            </div>

            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-foreground mb-6">
              Internet <span className="text-primary">Affaires</span>
            </h1>

            <p className="text-lg md:text-xl text-muted-foreground mb-10 max-w-3xl mx-auto leading-relaxed">
              Connexion fibre optique dédiée à la vitesse de vos besoins d'affaires. Performance et fiabilité garanties pour propulser votre entreprise.
            </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">
                <Phone className="mr-2 h-5 w-5" />
                1-855-888-2746
              </Button>
            </div>
          </div>
        </div>
      </section>

      {/* Pricing Section */}
      <section className="py-16 md:py-24 bg-muted/30">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">Nos Forfaits Internet</h2>
            <p className="text-muted-foreground">Des vitesses adaptées à la réalité de votre entreprise</p>
          </div>

          <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
            {plans.map((plan, index) => (
              <Card key={index} className={`relative ${plan.popular ? 'border-primary border-2 shadow-xl' : ''}`}>
                {plan.popular && (
                  <span className="absolute -top-3 left-1/2 -translate-x-1/2 bg-primary text-primary-foreground px-4 py-1 rounded-full text-sm font-medium">
                    Recommandé
                  </span>
                )}
                <CardHeader className="text-center pt-8">
                  <CardTitle className="text-2xl">{plan.name}</CardTitle>
                  <CardDescription>{plan.description}</CardDescription>
                  <div className="mt-4">
                    <span className="text-4xl font-bold text-primary">{plan.price}</span>
                    <span className="text-muted-foreground text-sm">/mois</span>
                  </div>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-3 mb-6">
                    {plan.features.map((feature, idx) => (
                      <li key={idx} className="flex items-center gap-3">
                        <CheckCircle className="h-5 w-5 text-primary flex-shrink-0" />
                        <span className="text-muted-foreground">{feature}</span>
                      </li>
                    ))}
                  </ul>
                  <Button className="w-full" variant={plan.popular ? 'default' : 'outline'} asChild>
                    <a href="/#contact">Choisir ce forfait <ArrowRight className="w-4 h-4 ml-2" /></a>
                  </Button>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Advantages */}
      <section className="py-16 md:py-24">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">Pourquoi choisir TARGO?</h2>
          </div>
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
            {advantages.map((advantage, index) => (
              <Card key={index} className="text-center p-6">
                <CardContent className="p-0">
                  <div className="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-6">
                    <advantage.icon className="h-7 w-7 text-primary" />
                  </div>
                  <h3 className="text-xl font-bold text-foreground mb-3">{advantage.title}</h3>
                  <p className="text-muted-foreground text-sm leading-relaxed">{advantage.description}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Features */}
      <section className="py-16 md:py-24 bg-muted/30">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            <div className="text-center mb-12">
              <h2 className="text-3xl font-bold text-foreground mb-4 font-display">
                Ce qui est <span className="text-primary">inclus</span>
              </h2>
              <p className="text-muted-foreground">Tout ce dont vous avez besoin pour une connectivité sans compromis</p>
            </div>

            <div className="grid md:grid-cols-2 gap-4">
              {features.map((feature, index) => (
                <div
                  key={index}
                  className="flex items-center gap-3 bg-card p-4 rounded-xl border border-border hover:border-primary/30 transition-colors"
                >
                  <CheckCircle className="h-5 w-5 text-primary flex-shrink-0" />
                  <span className="text-foreground font-medium">{feature}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-16 md:py-24 bg-primary text-primary-foreground">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl md:text-4xl font-bold mb-4">Prêt à optimiser votre connexion?</h2>
          <p className="text-lg opacity-90 mb-8 max-w-2xl mx-auto">
            Nos experts analysent vos besoins et vous proposent une solution personnalisée.
          </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">Soumission gratuite</a>
            </Button>
          </div>
        </div>
      </section>

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

export default BusinessInternet;
