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

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

const residentialServices = [
  {
    icon: Wifi,
    title: "Internet Résidentiel",
    features: [
      "Fibre optique à la maison jusqu'à 3.5 Gbit/s",
      "Modem avec WiFi 7 de dernière génération disponible",
      "Téléchargement et téléversement illimités",
      "Installation professionnelle gratuite",
      "Support technique 7j/7 inclus",
      "Aucun contrat à long terme requis"
    ]
  },
  {
    icon: Tv,
    title: "Télévision",
    features: [
      "Plus de 100 chaînes HD et 4K",
      "Enregistreur numérique jusqu'à 600 heures",
      "Application mobile pour regarder partout",
      "Chaînes spécialisées à la carte",
      "Guide interactif et reprise du début",
      "Contrôle parental intégré"
    ]
  },
  {
    icon: Phone,
    title: "Téléphonie Résidentielle",
    features: [
      "Appels illimités Canada et États-Unis",
      "Afficheur, messagerie vocale et appel en attente",
      "Renvoi d'appels et boîte vocale par courriel",
      "Numéro local ou conservation du numéro existant",
      "Qualité d'appel HD cristalline",
      "Fonctions avancées sans frais supplémentaires"
    ]
  }
];

const businessServicesPage1 = [
  {
    icon: Wifi,
    title: "Internet Affaires",
    features: [
      "Fibre dédiée symétrique jusqu'à 100 Gbit/s",
      "SLA 99.999% avec diversité de parcours",
      "Adresses IP fixes et BGP disponibles",
      "Bande passante garantie et non partagée",
      "Support prioritaire 24/7"
    ]
  },
  {
    icon: Phone,
    title: "Téléphonie IP (SIP/PBX)",
    features: [
      "Système téléphonique cloud complet",
      "Postes illimités et numéros DID",
      "File d'attente, IVR et centre d'appels",
      "Intégration CRM et Microsoft Teams",
      "Portabilité de vos numéros existants"
    ]
  },
  {
    icon: Building2,
    title: "Multilogement & RPA",
    features: [
      "Solution clé en main pour immeubles",
      "Résidences pour personnes âgées (RPA)",
      "WiFi géré dans les aires communes",
      "Télévision et téléphonie pour résidents",
      "Facturation centralisée ou individuelle"
    ]
  },
  {
    icon: Network,
    title: "SD-WAN",
    features: [
      "Optimisation intelligente du trafic réseau",
      "Agrégation de liens multiples",
      "Basculement automatique en cas de panne",
      "Gestion centralisée multi-sites",
      "Qualité de service (QoS) dynamique"
    ]
  },
  {
    icon: Link2,
    title: "Réseaux Inter-sites",
    features: [
      "Connexion point-à-point sécurisée",
      "Liens dédiés entre vos succursales",
      "Fibre optique ou sans-fil selon le site",
      "Latence minimale garantie",
      "Extension transparente de votre LAN"
    ]
  },
  {
    icon: GlobeLock,
    title: "Passerelle VPN",
    features: [
      "Accès distant sécurisé pour télétravailleurs",
      "Compatible tous appareils et OS",
      "Authentification multi-facteurs (MFA)",
      "Tunnel chiffré de bout en bout",
      "Gestion centralisée des utilisateurs"
    ]
  }
];

const businessServicesPage2 = [
  {
    icon: Cloud,
    title: "Services Cloud",
    features: [
      "Infrastructure cloud privée dédiée",
      "Hébergement de serveurs virtuels",
      "Stockage redondant et sécurisé",
      "Migration et déploiement assistés",
      "Facturation à l'usage flexible"
    ]
  },
  {
    icon: Shield,
    title: "Sécurité Réseau",
    features: [
      "Pare-feu nouvelle génération (NGFW)",
      "Protection contre les menaces avancées",
      "Surveillance et alertes 24/7",
      "Analyse du trafic et détection d'intrusion",
      "Rapports de conformité et audits"
    ]
  },
  {
    icon: Radio,
    title: "WiFi Commercial",
    features: [
      "Couverture sans fil gérée complète",
      "Points d'accès professionnels",
      "Portail captif personnalisable",
      "Analyses et statistiques d'utilisation",
      "Segmentation réseau invités/employés"
    ]
  },
  {
    icon: Signal,
    title: "Amplification Cellulaire",
    features: [
      "Amélioration du signal mobile en bâtiment",
      "Compatible tous opérateurs",
      "Installation certifiée ISDE",
      "Couverture personnalisée selon superficie",
      "Idéal pour sous-sols et stationnements"
    ]
  }
];

const itSupportServices = [
  {
    icon: Headphones,
    title: "Support Technique",
    features: [
      "Assistance à distance et sur site",
      "Équipe locale et réactive",
      "Dépannage et résolution rapide",
      "Support utilisateurs, postes de travail, passerelles et commutateurs"
    ]
  },
  {
    icon: Wrench,
    title: "Services Gérés (MSP)",
    features: [
      "Surveillance proactive 24/7",
      "Maintenance préventive planifiée",
      "Gestion des correctifs et mises à jour",
      "Rapports mensuels de santé TI"
    ]
  },
  {
    icon: Cable,
    title: "Câblage Structuré",
    features: [
      "Installation réseau Cat6/Cat6a certifiée",
      "Fibre optique intérieure et extérieure",
      "Certification et documentation complète",
      "Armoires de télécommunications"
    ]
  },
  {
    icon: Laptop,
    title: "Microsoft 365",
    features: [
      "Licences et déploiement complet",
      "Migration Exchange et SharePoint",
      "Configuration sécurité et conformité",
      "Formation et support utilisateurs"
    ]
  }
];

const virtualizationServices = [
  {
    icon: Server,
    title: "Virtualisation",
    features: [
      "Proxmox VE, VMware vSphere, Hyper-V",
      "Consolidation de serveurs physiques",
      "Haute disponibilité et clustering",
      "Migration P2V et V2V"
    ]
  },
  {
    icon: Container,
    title: "Docker",
    features: [
      "Conteneurisation d'applications",
      "Docker Compose et Swarm",
      "Registres privés et CI/CD",
      "Optimisation des images"
    ]
  },
  {
    icon: Box,
    title: "Kubernetes",
    features: [
      "Orchestration de conteneurs",
      "Déploiement K8s on-premise ou cloud",
      "Helm charts et GitOps",
      "Monitoring et autoscaling"
    ]
  },
  {
    icon: Cloud,
    title: "Sauvegarde & Reprise",
    features: [
      "Proxmox Backup Server",
      "Veeam Backup & Replication",
      "Rétention personnalisable",
      "Plan de reprise après sinistre (DRP)"
    ]
  }
];

const Catalogue2Pages = () => {
  const handlePrint = () => {
    window.print();
  };

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

  return (
    <div className="catalogue-2pages bg-white text-black">
      {/* Print Button - hidden when printing */}
      <div className="print:hidden fixed top-4 right-4 z-50">
        <button
          onClick={handlePrint}
          className="bg-[#00C853] hover:bg-[#00a844] text-white font-medium px-6 py-2 rounded-lg shadow-lg flex items-center gap-2 transition-colors"
        >
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="6 9 6 2 18 2 18 9"></polyline>
            <path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path>
            <rect x="6" y="14" width="12" height="8"></rect>
          </svg>
          Imprimer
        </button>
      </div>
      {/* ========== PAGE 1 ========== */}
      <div className="page">
        {/* Header */}
        <header className="flex items-center justify-between pb-4 mb-6">
          <img src={targoLogo} alt="TARGO" className="h-10" />
          <div className="text-right text-sm">
            <p className="font-bold text-[#00C853]">1-855-888-2746</p>
            <p className="text-gray-600">www.targo.ca</p>
          </div>
        </header>

        {/* Residential Services */}
        <section className="mb-6">
          <h2 className="text-lg font-bold text-gray-900 pb-2 mb-4 border-b-2 border-[#00C853] flex items-center gap-2">
            <Home className="w-5 h-5 text-[#00C853]" />
            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-lg p-4">
                <div className="flex items-center gap-2 mb-3">
                  <service.icon className="h-6 w-6 text-[#00C853]" />
                  <h3 className="font-bold text-sm">{service.title}</h3>
                </div>
                <ul className="text-xs space-y-1.5">
                  {service.features.map((feature, i) => (
                    <li key={i} className="flex items-start gap-2">
                      <span className="text-[#00C853] mt-0.5">✓</span>
                      <span>{feature}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </section>

        {/* Business Services - Part 1 */}
        <section className="mb-6">
          <h2 className="text-lg font-bold text-gray-900 pb-2 mb-4 border-b-2 border-[#00C853] flex items-center gap-2">
            <Building2 className="w-5 h-5 text-[#00C853]" />
            Solutions Affaires
          </h2>
          <div className="grid grid-cols-3 gap-3">
            {businessServicesPage1.map((service, index) => (
              <div key={index} className="border border-gray-300 rounded-lg p-3">
                <div className="flex items-center gap-2 mb-2">
                  <service.icon className="h-5 w-5 text-[#00C853]" />
                  <h3 className="font-bold text-xs">{service.title}</h3>
                </div>
                <ul className="text-[11px] space-y-1">
                  {service.features.map((feature, i) => (
                    <li key={i} className="flex items-start gap-1.5">
                      <span className="text-[#00C853]">•</span>
                      <span>{feature}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </section>

        {/* Page 1 Footer */}
        <footer className="border-t border-gray-200 pt-3 mt-auto">
          <p className="text-center text-xs text-gray-400">Page 1 de 2</p>
        </footer>
      </div>

      {/* ========== PAGE 2 ========== */}
      <div className="page">
        {/* Header */}
        <header className="flex items-center justify-between pb-4 mb-6">
          <img src={targoLogo} alt="TARGO" className="h-8 opacity-70" />
          <p className="text-sm text-gray-500">Solutions Affaires & TI</p>
        </header>

        {/* All Business Services including IT Support & Virtualization */}
        <section className="mb-5">
          <div className="grid grid-cols-3 gap-3">
            {[...businessServicesPage2, ...itSupportServices, ...virtualizationServices].map((service, index) => (
              <div key={index} className="border border-gray-300 rounded-lg p-3">
                <div className="flex items-center gap-2 mb-2">
                  <service.icon className="h-5 w-5 text-[#00C853]" />
                  <h3 className="font-bold text-xs">{service.title}</h3>
                </div>
                <ul className="text-[11px] space-y-1">
                  {service.features.map((feature, i) => (
                    <li key={i} className="flex items-start gap-1.5">
                      <span className="text-[#00C853]">•</span>
                      <span>{feature}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </section>

        {/* Footer */}
        <footer className="border-t-2 border-[#00C853] 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>
      </div>

      {/* Print Styles */}
      <style>{`
        @media print {
          @page {
            size: letter;
            margin: 0.5in;
          }
          body {
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
          }
          .catalogue-2pages .page {
            width: 7.5in;
            height: 10in;
            padding: 0;
            margin: 0;
            page-break-after: always;
            display: flex;
            flex-direction: column;
          }
          .catalogue-2pages .page:last-child {
            page-break-after: avoid;
          }
        }
        
        @media screen {
          .catalogue-2pages {
            max-width: 8.5in;
            margin: 0 auto;
          }
          .catalogue-2pages .page {
            width: 8.5in;
            min-height: 11in;
            padding: 0.5in;
            margin: 0 auto 1rem;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            background: white;
            display: flex;
            flex-direction: column;
          }
        }
      `}</style>
    </div>
  );
};

export default Catalogue2Pages;