import { useEffect } from "react";
import { 
  Wifi, Tv, Phone, Server, Cloud, Shield, Network, Radio, Signal, 
  Laptop, Settings, Link2, GlobeLock, Building2, Headphones, Wrench,
  Container, Box
} from "lucide-react";
import targoLogo from "@/assets/targo-logo.png";

const residentialServices = [
  {
    icon: Wifi,
    title: "Internet",
    features: ["Fibre à la maison jusqu'à 3.5 Gbit/s", "Modem avec WiFi 7 disponible", "Téléchargement illimité", "Installation gratuite"]
  },
  {
    icon: Tv,
    title: "Télévision",
    features: ["100+ chaînes HD/4K", "Enregistrement jusqu'à 600h", "Application mobile", "Chaînes à la carte"]
  },
  {
    icon: Phone,
    title: "Téléphonie",
    features: ["Appels illimités Canada/USA", "Afficheur et messagerie", "Renvoi d'appels", "Numéro local inclus"]
  }
];

const businessServices = [
  {
    icon: Wifi,
    title: "Internet Affaires",
    description: "Fibre dédiée jusqu'à 100 Gbit/s avec SLA 99.999% et diversité"
  },
  {
    icon: Phone,
    title: "Téléphonie IP",
    description: "Système téléphonique cloud avec fonctions avancées"
  },
  {
    icon: Building2,
    title: "Multilogement & RPA",
    description: "Solutions clé en main pour immeubles et résidences"
  },
  {
    icon: Network,
    title: "SD-WAN",
    description: "Optimisation et gestion intelligente du réseau"
  },
  {
    icon: Link2,
    title: "Réseaux Inter-sites",
    description: "Connexion point-à-point entre vos succursales"
  },
  {
    icon: GlobeLock,
    title: "Passerelle VPN",
    description: "Accès distant sécurisé pour télétravailleurs"
  },
  {
    icon: Cloud,
    title: "Services Cloud",
    description: "Infrastructure cloud privée et hébergement"
  },
  {
    icon: Shield,
    title: "Sécurité Réseau",
    description: "Pare-feu, protection et surveillance 24/7"
  },
  {
    icon: Radio,
    title: "WiFi Commercial",
    description: "Couverture sans fil gérée pour entreprises"
  },
  {
    icon: Signal,
    title: "Amplification Cellulaire",
    description: "Amélioration du signal mobile en bâtiment"
  },
  {
    icon: Settings,
    title: "Câblage Structuré",
    description: "Installation réseau Cat6/Fibre certifiée"
  },
  {
    icon: Laptop,
    title: "Microsoft 365",
    description: "Licences et gestion des outils Microsoft"
  }
];

const itSupportServices = [
  {
    icon: Headphones,
    title: "Support Technique",
    description: "Assistance à distance et sur site"
  },
  {
    icon: Wrench,
    title: "Services Gérés",
    description: "Surveillance proactive et maintenance"
  },
  {
    icon: Server,
    title: "Virtualisation",
    description: "Proxmox VE, VMware, Hyper-V"
  },
  {
    icon: Container,
    title: "Docker",
    description: "Conteneurisation d'applications"
  },
  {
    icon: Box,
    title: "Kubernetes",
    description: "Orchestration de conteneurs"
  },
  {
    icon: Cloud,
    title: "Sauvegarde",
    description: "Proxmox Backup Server, Veeam"
  }
];

const Catalogue = () => {
  useEffect(() => {
    // Auto-print on load (optional)
    // window.print();
  }, []);

  return (
    <div className="catalogue-page bg-white text-black min-h-screen">
      {/* Header */}
      <header className="flex items-center justify-between pb-4 mb-6">
        <img src={targoLogo} alt="Targo" className="h-12 w-auto" />
      </header>

      {/* Residential Services */}
      <section className="mb-6">
        <h2 className="text-lg font-bold bg-[#00A651] text-white px-3 py-1.5 mb-3">
          Services Résidentiels
        </h2>
        <div className="grid grid-cols-3 gap-4">
          {residentialServices.map((service, index) => (
            <div key={index} className="border border-gray-300 rounded p-3">
              <div className="flex items-center gap-2 mb-2">
                <service.icon className="h-5 w-5 text-[#00A651]" />
                <h3 className="font-bold text-sm">{service.title}</h3>
              </div>
              <ul className="text-xs space-y-1">
                {service.features.map((feature, i) => (
                  <li key={i} className="flex items-start gap-1">
                    <span className="text-[#00A651]">•</span>
                    {feature}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </section>

      {/* Business Services */}
      <section className="mb-6">
        <h2 className="text-lg font-bold bg-[#00A651] text-white px-3 py-1.5 mb-3">
          Solutions Affaires
        </h2>
        <div className="grid grid-cols-4 gap-3">
          {businessServices.map((service, index) => (
            <div key={index} className="border border-gray-300 rounded p-2">
              <div className="flex items-center gap-1.5 mb-1">
                <service.icon className="h-4 w-4 text-[#00A651] flex-shrink-0" />
                <h3 className="font-bold text-xs leading-tight">{service.title}</h3>
              </div>
              <p className="text-[10px] text-gray-600 leading-tight">{service.description}</p>
            </div>
          ))}
        </div>
      </section>

      {/* IT Support & Virtualization */}
      <section className="mb-6">
        <h2 className="text-lg font-bold bg-[#00A651] text-white px-3 py-1.5 mb-3">
          Soutien Informatique & Virtualisation
        </h2>
        <div className="grid grid-cols-6 gap-3">
          {itSupportServices.map((service, index) => (
            <div key={index} className="border border-gray-300 rounded p-2 text-center">
              <service.icon className="h-6 w-6 text-[#00A651] mx-auto mb-1" />
              <h3 className="font-bold text-xs mb-0.5">{service.title}</h3>
              <p className="text-[9px] text-gray-600 leading-tight">{service.description}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t-2 border-[#00A651] pt-4 mt-auto">
        <div className="flex justify-between items-center text-xs">
          <div>
            <p className="text-gray-600">Services de confiance, tout-en-un, près de chez vous</p>
          </div>
          <div className="text-right">
            <p><strong>Téléphone:</strong> 1-855-888-2746</p>
            <p><strong>Courriel:</strong> support@targo.ca</p>
            <p><strong>Web:</strong> www.targo.ca</p>
          </div>
        </div>
      </footer>

      {/* Print Styles */}
      <style>{`
        @media print {
          @page {
            size: letter;
            margin: 0.5in;
          }
          body {
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
          }
          .catalogue-page {
            width: 7.5in;
            min-height: 10in;
            padding: 0;
            margin: 0 auto;
          }
        }
        
        @media screen {
          .catalogue-page {
            width: 8.5in;
            min-height: 11in;
            padding: 0.5in;
            margin: 0 auto;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
          }
        }
      `}</style>
    </div>
  );
};

export default Catalogue;
