import { useState } from "react";
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 { Wifi, Zap, Shield, Clock, ArrowRight, Download, Upload } from "lucide-react";
import { AvailabilityDialog } from "@/components/AvailabilityDialog";

const features = [{
  icon: Zap,
  title: "100% fibre",
  description: "Connexion directe en fibre optique jusqu'à votre domicile, sans aucun compromis sur la qualité du signal."
}, {
  icon: Shield,
  title: "Connexion sécurisée",
  description: "Protection contre les attaques directes avec pare-feu intégré."
}, {
  icon: Clock,
  title: "Support 365",
  description: "Notre équipe technique locale est disponible pour vous assister par téléphone et par courriel."
}, {
  icon: Download,
  title: "Données illimitées",
  description: "Aucune limite de téléchargement. Visionnez, jouez et travaillez sans restriction."
}];

const Internet = () => {
  const [availabilityOpen, setAvailabilityOpen] = useState(false);

  return (
    <div className="min-h-screen">
      <Header />
      <main>
        {/* Hero Section */}
        <section className="pt-40 pb-20 bg-gradient-to-br from-secondary via-background to-secondary">
          <div className="container">
            <div className="max-w-3xl mx-auto text-center mb-16">
              <span className="inline-block px-4 py-1 bg-primary/10 rounded-full text-primary font-medium text-sm mb-4 animate-fade-in">
                Internet fibre à la maison
              </span>
              <h1 className="font-display text-4xl md:text-6xl font-bold mb-6 animate-fade-in" style={{ animationDelay: '0.1s' }}>
                La meilleure connexion <span className="text-gradient-targo">à la vitesse de la lumière</span>
              </h1>
              <p className="text-xl text-muted-foreground mb-8 animate-fade-in" style={{ animationDelay: '0.2s' }}>
                Connectez votre foyer à la vraie fibre. Performance et fiabilité garanties pour propulser vos communications, du télétravail au divertissement.
              </p>

              {/* Key stats */}
              <div className="grid grid-cols-2 gap-6 max-w-md mx-auto mb-10 animate-fade-in" style={{ animationDelay: '0.3s' }}>
                <div className="bg-card border border-border rounded-2xl p-6 text-center">
                  <p className="text-sm text-muted-foreground mb-1">Vitesse jusqu'à</p>
                  <p className="font-display text-4xl font-bold text-primary">
                    3.5 <span className="text-2xl">Gbps</span>
                  </p>
                </div>
                <div className="bg-card border border-border rounded-2xl p-6 text-center">
                  <p className="text-sm text-muted-foreground mb-1">Forfaits à partir de</p>
                  <p className="font-display text-4xl font-bold text-primary leading-none">
                    <span className="relative">39<span className="text-lg align-top leading-none">,95$</span></span>
                    <span className="text-base font-normal text-muted-foreground ml-1">/mois</span>
                  </p>
                </div>
              </div>

              <div className="flex justify-center animate-fade-in" style={{ animationDelay: '0.4s', animationFillMode: 'both' }}>
                <Button size="lg" className="gradient-targo glow-targo text-lg px-10" onClick={() => setAvailabilityOpen(true)}>
                  Vérifier ma disponibilité
                  <ArrowRight className="w-5 h-5 ml-2" />
                </Button>
              </div>
            </div>
          </div>
        </section>

        {/* Speed Showcase */}
        <section className="py-16 bg-primary text-primary-foreground">
          <div className="container">
            <div className="grid md:grid-cols-3 gap-8 text-center">
              <div>
                <div className="flex items-center justify-center gap-2 mb-2">
                  <Download className="w-8 h-8" />
                  <span className="font-display text-5xl font-bold">Fibre</span>
                </div>
                <p className="text-primary-foreground/80">100%</p>
              </div>
              <div>
                <div className="flex items-center justify-center gap-2 mb-2">
                  <Upload className="w-8 h-8" />
                  <span className="font-display text-5xl font-bold">Illimité</span>
                </div>
                <p className="text-primary-foreground/80">Transfert</p>
              </div>
              <div>
                <div className="flex items-center justify-center gap-2 mb-2">
                  <Wifi className="w-8 h-8" />
                  <span className="font-display text-5xl font-bold">WiFi</span>
                </div>
                <p className="text-primary-foreground/80">Inclus</p>
              </div>
            </div>
          </div>
        </section>

        {/* Features */}
        <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">Pourquoi choisir TARGO?</h2>
              <p className="text-muted-foreground text-lg">
                Un réseau local, un service personnalisé, une qualité incomparable.
              </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>

        {/* 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">Prêt à migrer à la fibre?</h2>
              <p className="text-xl mb-8 text-primary-foreground/90">
                Vérifiez la disponibilité à votre adresse en quelques secondes.
              </p>
              <Button size="lg" variant="secondary" className="text-primary font-semibold" onClick={() => setAvailabilityOpen(true)}>
                Vérifier mon adresse
                <ArrowRight className="w-5 h-5 ml-2" />
              </Button>
            </Card>
          </div>
        </section>
      </main>
      <Footer />

      <AvailabilityDialog open={availabilityOpen} onOpenChange={setAvailabilityOpen} />
    </div>
  );
};

export default Internet;