gigafibre-fsm/apps/website/src/pages/Telephone.tsx

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, Phone, PhoneCall, PhoneForwarded, Voicemail, ArrowRight, Globe, Shield } from "lucide-react";
const phonePlans = [{
  name: "Ligne résidentielle",
  price: 10,
  originalPrice: 25,
  comboNote: "En combo",
  features: ["Appels illimités Canada/É.-U.", "Afficheur inclus", "Messagerie vocale par courriel", "Appel en attente", "Renvoi d'appel"],
  popular: true
}];
const features = [{
  icon: Globe,
  title: "Appels illimités",
  description: "Appelez partout au Canada et aux États-Unis sans frais supplémentaires."
}, {
  icon: PhoneCall,
  title: "Qualité voix HD",
  description: "Son cristallin grâce à notre technologie VoIP de dernière génération."
}, {
  icon: Voicemail,
  title: "Messagerie vocale",
  description: "Recevez vos messages vocaux par courriel ou consultez-les en ligne."
}, {
  icon: Shield,
  title: "Filtrage d'appels",
  description: "Bloquez les appels indésirables et les télévendeurs automatiquement."
}];
const includedFeatures = ["Afficheur", "Appel en attente", "Renvoi d'appel", "Conférence à 3", "Messagerie vocale", "Blocage d'appels", "Messages audio par courriel", "Sonnerie distinctive"];
const Telephone = () => {
  return <div className="min-h-screen">
    <Header />
    <main className="">
      {/* 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">Téléphonie IP</span>
            <h1 className="font-display text-4xl md:text-6xl font-bold mb-6">
              Téléphonie résidentielle <span className="text-gradient-targo">tout inclus</span>
            </h1>
            <p className="text-xl text-muted-foreground mb-8">
              Restez connecté avec vos proches grâce à une ligne résidentielle fiable et cristalline. La puissance de la technologie fibre au service de toutes vos conversations.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center animate-fade-in" style={{ animationDelay: '0.2s', animationFillMode: 'both' }}>
              <Button size="lg" className="gradient-targo glow-targo">
                S'abonner maintenant
                <ArrowRight className="w-5 h-5 ml-2" />
              </Button>
              <Button size="lg" variant="outline" className="border-primary text-primary">
                Transférer mon numéro
              </Button>
            </div>
          </div>

          {/* Phone Plans Cards in Hero */}
          <div className="flex justify-center max-w-5xl mx-auto">
            {phonePlans.map((plan, index) => (
              <Card
                key={plan.name}
                className={`relative overflow-hidden transition-all duration-300 hover:shadow-xl hover:-translate-y-1 animate-fade-in ${plan.popular ? "border-primary shadow-lg ring-2 ring-primary/20" : ""
                  } w-full max-w-md`}
                style={{ animationDelay: `${0.3 + index * 0.15}s`, animationFillMode: 'both' }}
              >
                {plan.popular && (
                  <div className="absolute top-4 right-4 px-3 py-1 gradient-targo text-primary-foreground text-xs font-medium rounded-full">
                    Populaire
                  </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-2">
                    <span className="font-display text-5xl font-bold text-primary">
                      ${Math.floor(plan.price)}
                      <sup className="text-2xl">.00</sup>
                    </span>
                    <span className="text-muted-foreground">/mois +tx</span>
                    {plan.originalPrice && (
                      <span className="text-muted-foreground line-through text-lg ml-2">
                        ${plan.originalPrice.toFixed(2)}
                      </span>
                    )}
                  </div>
                  {plan.comboNote && <p className="text-sm text-primary font-medium mb-4">{plan.comboNote}</p>}
                  <div className="flex items-center gap-2 mb-6 p-3 bg-primary/10 rounded-lg mt-4">
                    <Phone className="w-5 h-5 text-primary" />
                    <span className="font-bold text-primary">{plan.name}</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"}
                    asChild
                  >
                    <a href="/#contact">Choisir ce forfait</a>
                  </Button>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Stats */}
      <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">
                <Phone className="w-8 h-8" />
                <span className="font-display text-5xl font-bold">$10</span>
              </div>
              <p className="text-primary-foreground/80">avec combo Internet</p>
            </div>
            <div>
              <div className="flex items-center justify-center gap-2 mb-2">
                <PhoneForwarded className="w-8 h-8" />
                <span className="font-display text-5xl font-bold">Gratuit</span>
              </div>
              <p className="text-primary-foreground/80">transfert de numéro</p>
            </div>
            <div>
              <div className="flex items-center justify-center gap-2 mb-2">
                <Globe className="w-8 h-8" />
                <span className="font-display text-5xl font-bold">Illimité</span>
              </div>
              <p className="text-primary-foreground/80">Canada et États-Unis</p>
            </div>
          </div>
        </div>
      </section>



      {/* Included 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">
              Fonctionnalités incluses
            </h2>
            <p className="text-muted-foreground text-lg">
              Toutes ces fonctionnalités sont incluses gratuitement avec chaque forfait.
            </p>
          </div>

          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-4xl mx-auto">
            {includedFeatures.map(feature => <Card key={feature} className="p-4">
              <CardContent className="p-0 flex items-center gap-3">
                <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
                  <Check className="w-4 h-4 text-primary" />
                </div>
                <span className="font-medium">{feature}</span>
              </CardContent>
            </Card>)}
          </div>
        </div>
      </section>

      {/* Features */}
      <section className="py-20">
        <div className="container">
          <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">
              Conservez votre numéro actuel
            </h2>
            <p className="text-xl mb-8 text-primary-foreground/90">
              Le transfert de votre numéro de téléphone est gratuit et s'effectue en quelques jours.
            </p>
            <Button size="lg" variant="secondary" className="text-primary font-semibold">
              Transférer mon numéro
              <ArrowRight className="w-5 h-5 ml-2" />
            </Button>
          </Card>
        </div>
      </section>
    </main>
    <Footer />
  </div>;
};
export default Telephone;