import { Phone, PhoneCall, Voicemail, Users, Smartphone, Clock, CheckCircle, ArrowRight, MessageSquare, PhoneForwarded, Headphones } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import Header from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";

const features = [
  {
    icon: PhoneCall,
    title: "Appels illimités",
    description: "Canada et États-Unis inclus sans frais d'interurbain"
  },
  {
    icon: PhoneForwarded,
    title: "Transfert intelligent",
    description: "Redirigez vos appels vers n'importe quel appareil"
  },
  {
    icon: Voicemail,
    title: "Messagerie vocale",
    description: "Recevez vos messages par courriel avec transcription"
  },
  {
    icon: Smartphone,
    title: "Application mobile",
    description: "Votre ligne professionnelle sur votre cellulaire"
  },
  {
    icon: MessageSquare,
    title: "Système IVR",
    description: "Menu vocal automatisé pour orienter vos clients"
  },
  {
    icon: Users,
    title: "Conférences",
    description: "Appels de groupe jusqu'à 25 participants"
  }
];

const plans = [
  {
    name: "Essentiel",
    price: "19.99",
    description: "Pour les petites entreprises",
    features: [
      "1 ligne téléphonique",
      "Appels illimités Canada",
      "Messagerie vocale",
      "Afficheur inclus",
      "Support 8h-20h"
    ]
  },
  {
    name: "Professionnel",
    price: "34.99",
    description: "Solution complète",
    popular: true,
    features: [
      "3 lignes téléphoniques",
      "Appels illimités Canada/USA",
      "Système IVR inclus",
      "Application mobile",
      "Conférence téléphonique",
      "Support 24/7"
    ]
  },
  {
    name: "Entreprise",
    price: "Sur mesure",
    description: "Pour les grandes organisations",
    features: [
      "Lignes illimitées",
      "Système 3CX complet",
      "Intégration CRM",
      "Centre d'appels",
      "Analytiques avancées",
      "Gestionnaire de compte dédié"
    ]
  }
];

const BusinessTelephony = () => {
  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">
            <span className="inline-block px-4 py-2 bg-primary/10 text-primary rounded-full text-sm font-medium mb-6">
              Téléphonie Affaires
            </span>
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-foreground mb-6">
              Téléphonie IP{" "}
              <span className="text-primary">infonuagique</span>
            </h1>
            <p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-2xl mx-auto">
              Un réseau de téléphonie simple, abordable et multifonctionnel. 
              Évoluez et multipliez vos communications avec la VoIP professionnelle.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button size="lg" className="text-lg px-8">
                Demander une démo
                <ArrowRight className="ml-2 h-5 w-5" />
              </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>

      {/* Benefits Section */}
      <section className="py-16 bg-muted/30">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            <div className="grid md:grid-cols-2 gap-8 items-center">
              <div>
                <h2 className="text-3xl font-bold text-foreground mb-6">
                  Pourquoi passer à la téléphonie IP?
                </h2>
                <ul className="space-y-4">
                  <li className="flex items-start gap-3">
                    <CheckCircle className="h-6 w-6 text-primary flex-shrink-0 mt-0.5" />
                    <div>
                      <strong className="text-foreground">Économies significatives</strong>
                      <p className="text-muted-foreground">Réduisez vos coûts de téléphonie jusqu'à 50%</p>
                    </div>
                  </li>
                  <li className="flex items-start gap-3">
                    <CheckCircle className="h-6 w-6 text-primary flex-shrink-0 mt-0.5" />
                    <div>
                      <strong className="text-foreground">Flexibilité totale</strong>
                      <p className="text-muted-foreground">Travaillez de n'importe où avec votre numéro professionnel</p>
                    </div>
                  </li>
                  <li className="flex items-start gap-3">
                    <CheckCircle className="h-6 w-6 text-primary flex-shrink-0 mt-0.5" />
                    <div>
                      <strong className="text-foreground">Fonctionnalités avancées</strong>
                      <p className="text-muted-foreground">IVR, conférences, enregistrement d'appels inclus</p>
                    </div>
                  </li>
                  <li className="flex items-start gap-3">
                    <CheckCircle className="h-6 w-6 text-primary flex-shrink-0 mt-0.5" />
                    <div>
                      <strong className="text-foreground">Évolutivité</strong>
                      <p className="text-muted-foreground">Ajoutez des lignes en quelques clics</p>
                    </div>
                  </li>
                </ul>
              </div>
              <div className="bg-primary/5 rounded-2xl p-8 border border-primary/20">
                <div className="text-center">
                  <Phone className="h-16 w-16 text-primary mx-auto mb-4" />
                  <h3 className="text-2xl font-bold text-foreground mb-2">Système 3CX</h3>
                  <p className="text-muted-foreground mb-4">
                    Plateforme de communication unifiée leader du marché
                  </p>
                  <ul className="text-left space-y-2 text-sm text-muted-foreground">
                    <li className="flex items-center gap-2">
                      <CheckCircle className="h-4 w-4 text-primary" />
                      Vidéoconférence intégrée
                    </li>
                    <li className="flex items-center gap-2">
                      <CheckCircle className="h-4 w-4 text-primary" />
                      Chat d'équipe
                    </li>
                    <li className="flex items-center gap-2">
                      <CheckCircle className="h-4 w-4 text-primary" />
                      Intégration CRM
                    </li>
                    <li className="flex items-center gap-2">
                      <CheckCircle className="h-4 w-4 text-primary" />
                      Tableau de bord analytique
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Features Grid */}
      <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">
              Fonctionnalités incluses
            </h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              Tout ce dont vous avez besoin pour une communication professionnelle efficace
            </p>
          </div>
          
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {features.map((feature, index) => (
              <Card key={index} className="text-center hover:shadow-lg transition-shadow">
                <CardHeader>
                  <div className="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center mx-auto mb-4">
                    <feature.icon className="h-6 w-6 text-primary" />
                  </div>
                  <CardTitle className="text-lg">{feature.title}</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-muted-foreground">{feature.description}</p>
                </CardContent>
              </Card>
            ))}
          </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">
              Forfaits téléphonie affaires
            </h2>
            <p className="text-muted-foreground">
              Prix par poste de travail, par mois
            </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">
                    Populaire
                  </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-foreground">{plan.price}</span>
                    {plan.price !== "Sur mesure" && <span className="text-muted-foreground">$/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 ${plan.popular ? '' : 'variant-outline'}`} variant={plan.popular ? 'default' : 'outline'} asChild>
                    <a href="/#contact">
                      {plan.price === "Sur mesure" ? "Nous contacter" : "Souscrire"}
                    </a>
                  </Button>
                </CardContent>
              </Card>
            ))}
          </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">
          <Headphones className="h-16 w-16 mx-auto mb-6 opacity-80" />
          <h2 className="text-3xl md:text-4xl font-bold mb-4">
            Prêt à moderniser votre téléphonie?
          </h2>
          <p className="text-lg opacity-90 mb-8 max-w-2xl mx-auto">
            À partir de 3 postes de travail, il est très avantageux de passer à la téléphonie IP. 
            Contactez-nous pour une analyse personnalisée de vos besoins.
          </p>
          <Button size="lg" variant="secondary" className="text-lg px-8" asChild>
            <a href="/#contact">Demander une démo gratuite</a>
          </Button>
        </div>
      </section>

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

export default BusinessTelephony;
