import { Building2, Wifi, TrendingUp, Users, Shield, Clock, CheckCircle, ArrowRight, DollarSign, Camera, Settings, Home } 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 benefits = [{
  icon: TrendingUp,
  title: "Augmentation de valeur",
  description: "Valorisez votre immeuble à 110% en offrant Internet à vos locataires"
}, {
  icon: DollarSign,
  title: "Revenus récurrents",
  description: "Générez une source de revenus importante et stable chaque mois"
}, {
  icon: Clock,
  title: "ROI rapide",
  description: "Retour sur investissement instantané"
}, {
  icon: Users,
  title: "Locataires satisfaits",
  description: "Logements plus attrayants avec services inclus"
}, {
  icon: Settings,
  title: "Gestion simplifiée",
  description: "Outil de gestion multilogements pour contrôler tous vos services"
}, {
  icon: Shield,
  title: "Support inclus",
  description: "Support technique spécialisé pour vos locataires 7/7"
}];
const propertyTypes = [{
  icon: Building2,
  title: "Immeubles à logements & RPA",
  description: "Solution idéale pour les propriétaires d'immeubles résidentiels et résidences pour aînés"
}, {
  icon: Home,
  title: "Hôtels, Motels & Campings",
  description: "Infrastructure fibre et Wi-Fi public pour une expérience client optimale"
}, {
  icon: Building2,
  title: "Centres commerciaux",
  description: "Infrastructure réseau pour bâtiments et centres commerciaux"
}];
const features = ["Options flexibles de services Internet par unité ou forfait global", "Installation rapide et professionnelle", "Tarification mensuelle gelée", "Aucune restriction sur l'utilisation du service", "Connexion de périphériques sans frais (caméra, alarme, IoT)", "Surveillance en temps réel de vos services", "Plusieurs options de branchements disponibles", "Disponible avec ou sans fibre optique", "Équipements adaptés à vos besoins"];
const BusinessMultilogement = () => {
  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">Solutions Internet géré</span>
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-foreground mb-6">
              Internet géré pour
              <br />
              <span className="text-primary">immeubles commerciaux, multilogements, et plus</span>
            </h1>
            <p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-2xl mx-auto">
              Offrez l'accès Internet à vos locataires : une stratégie avantageuse pour eux 
              et rentable pour vous. Générez des revenus tout en valorisant votre immeuble.
            </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">
                  Obtenir une soumission
                  <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">
                1-855-888-2746
              </Button>
            </div>
          </div>
        </div>
      </section>

      {/* Property Types */}
      <section className="py-16 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">
              Pour tous types de propriétés
            </h2>
          </div>
          <div className="grid md:grid-cols-3 gap-6 max-w-4xl mx-auto">
            {propertyTypes.map((type, index) => <Card key={index} className="text-center hover:shadow-lg transition-shadow">
                <CardHeader>
                  <div className="w-14 h-14 bg-primary/10 rounded-xl flex items-center justify-center mx-auto mb-4">
                    <type.icon className="h-7 w-7 text-primary" />
                  </div>
                  <CardTitle className="text-lg">{type.title}</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-muted-foreground text-sm">{type.description}</p>
                </CardContent>
              </Card>)}
          </div>
        </div>
      </section>

      {/* Benefits 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">
              Vos avantages propriétaires
            </h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              Transformez votre immeuble en source de revenus avec notre solution clé en main
            </p>
          </div>
          
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {benefits.map((benefit, index) => <Card key={index} className="hover:shadow-lg transition-shadow border-2 hover:border-primary/30">
                <CardHeader>
                  <div className="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center mb-4">
                    <benefit.icon className="h-6 w-6 text-primary" />
                  </div>
                  <CardTitle className="text-xl">{benefit.title}</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-muted-foreground">{benefit.description}</p>
                </CardContent>
              </Card>)}
          </div>
        </div>
      </section>

      {/* Features 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-12 items-center">
              <div>
                <h2 className="text-3xl font-bold text-foreground mb-6">
                  Des options évolutives
                </h2>
                <ul className="space-y-4">
                  {features.map((feature, index) => <li key={index} className="flex items-start gap-3">
                      <CheckCircle className="h-5 w-5 text-primary flex-shrink-0 mt-0.5" />
                      <span className="text-muted-foreground">{feature}</span>
                    </li>)}
                </ul>
              </div>
              <div className="bg-gradient-to-br from-primary/10 to-secondary/10 rounded-2xl p-8 border">
                <h3 className="text-2xl font-bold text-foreground mb-4 text-center">
                  Outil de gestion Multilogements
                </h3>
                <p className="text-muted-foreground text-center mb-6">
                  Tirez pleinement profit de nombreux avantages, sans tracas, 
                  en offrant des services supplémentaires à vos locataires.
                </p>
                <ul className="space-y-3">
                  <li className="flex items-center gap-3">
                    <CheckCircle className="h-5 w-5 text-primary" />
                    <span className="text-sm text-muted-foreground">Tableau de bord centralisé</span>
                  </li>
                  <li className="flex items-center gap-3">
                    <CheckCircle className="h-5 w-5 text-primary" />
                    <span className="text-sm text-muted-foreground">Gestion des locataires</span>
                  </li>
                  <li className="flex items-center gap-3">
                    <CheckCircle className="h-5 w-5 text-primary" />
                    <span className="text-sm text-muted-foreground">Facturation automatisée</span>
                  </li>
                  <li className="flex items-center gap-3">
                    <CheckCircle className="h-5 w-5 text-primary" />
                    <span className="text-sm text-muted-foreground">Rapports de performance</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Surveillance Section */}
      <section className="py-16 md:py-24">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            <div className="grid md:grid-cols-2 gap-12 items-center">
              <div className="order-2 md:order-1 bg-muted/50 rounded-2xl p-8 flex items-center justify-center">
                <Camera className="h-32 w-32 text-primary/30" />
              </div>
              <div className="order-1 md:order-2">
                <h2 className="text-3xl font-bold text-foreground mb-4">
                  Centralisation de la surveillance
                </h2>
                <p className="text-lg text-muted-foreground mb-6">
                  Optimisez la sécurité et l'efficacité de vos immeubles locatifs grâce à notre expertise.
                </p>
                <p className="text-muted-foreground mb-6">
                  Interconnectez plusieurs bâtiments avec notre technologie sans fil pour centraliser 
                  la surveillance des équipements. Surveillez vos caméras dans l'ensemble de vos propriétés 
                  depuis un seul endroit.
                </p>
                <ul className="space-y-3 mb-6">
                  <li className="flex items-center gap-3">
                    <CheckCircle className="h-5 w-5 text-primary" />
                    <span className="text-muted-foreground">Accès aux images en tout temps</span>
                  </li>
                  <li className="flex items-center gap-3">
                    <CheckCircle className="h-5 w-5 text-primary" />
                    <span className="text-muted-foreground">Gestion centralisée et économique</span>
                  </li>
                  <li className="flex items-center gap-3">
                    <CheckCircle className="h-5 w-5 text-primary" />
                    <span className="text-muted-foreground">Environnement plus sûr pour vos locataires</span>
                  </li>
                </ul>
                <Button>
                  En savoir plus
                  <ArrowRight className="ml-2 h-4 w-4" />
                </Button>
              </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">
          <Building2 className="h-16 w-16 mx-auto mb-6 opacity-80" />
          <h2 className="text-3xl md:text-4xl font-bold mb-4">
            Prêt à rentabiliser votre immeuble?
          </h2>
          <p className="text-lg opacity-90 mb-8 max-w-2xl mx-auto">
            Nous sommes en mesure de brancher votre immeuble et de permettre la redistribution 
            à vos locataires, sans aucune contrainte ou restriction.
          </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">
              Programme de financement
            </Button>
          </div>
        </div>
      </section>

      <Footer />
    </div>;
};
export default BusinessMultilogement;