gigafibre-fsm/apps/website/src/pages/CatalogueDynamique.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, XCircle, CheckCircle2, ArrowRight, AlertTriangle
} from "lucide-react";
import targoLogo from "@/assets/targo-logo.png";
import painBuffering from "@/assets/pain-buffering.png";
import solutionConnected from "@/assets/solution-connected.png";
import painBusiness from "@/assets/pain-business.png";
import solutionBusiness from "@/assets/solution-business.png";

// Pain points data
const residentialPains = [
  { pain: "Votre film coupe en plein suspense?", solution: "Fibre optique jusqu'à 3.5 Gbit/s, sans interruption", icon: Wifi },
  { pain: "Appels qui coupent ou voix robotique?", solution: "Téléphonie HD cristalline, appels illimités Canada/US", icon: Phone },
  { pain: "100$ de plus chaque année sans raison?", solution: "Prix transparents, aucun contrat à long terme", icon: AlertTriangle },
  { pain: "3 jours d'attente pour un technicien?", solution: "Support technique local 7j/7, équipe réactive", icon: Headphones },
  { pain: "WiFi mort dans la chambre des enfants?", solution: "Modem WiFi 7, couverture complète de la maison", icon: Signal },
  { pain: "Seulement 30 chaînes en HD?", solution: "100+ chaînes HD et 4K, enregistreur 600h inclus", icon: Tv },
];

const businessPains = [
  { pain: "Panne internet = entreprise à l'arrêt?", solution: "SLA 99.999%, fibre dédiée avec diversité de parcours", icon: Wifi },
  { pain: "Système téléphonique désuet et coûteux?", solution: "Téléphonie cloud complète avec intégration Teams", icon: Phone },
  { pain: "Données sensibles sans protection?", solution: "Pare-feu NGFW, surveillance et alertes 24/7", icon: Shield },
  { pain: "Aucune visibilité sur votre réseau?", solution: "Services gérés MSP avec rapports mensuels", icon: Wrench },
  { pain: "Sites distants impossibles à connecter?", solution: "SD-WAN et réseaux inter-sites sécurisés", icon: Network },
  { pain: "Infrastructure TI vieillissante?", solution: "Cloud privé, virtualisation et conteneurisation", icon: Cloud },
];

const stats = [
  { number: "200+", label: "entreprises ont migré vers TARGO" },
  { number: "20", label: "ans d'expertise locale" },
  { number: "99.999%", label: "de disponibilité garantie" },
  { number: "7j/7", label: "support technique inclus" },
];

const migrationQuote = "Pour différentes raisons, après plusieurs années avec Vidéotron, Cogeco ou Bell, elles préfèrent TARGO.";

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

  return (
    <div className="catalogue-dynamique bg-white text-black">
      {/* Print Button */}
      <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" />
            <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" />
            <rect x="6" y="14" width="12" height="8" />
          </svg>
          Imprimer
        </button>
      </div>

      {/* ========== PAGE 1 — Résidentiel ========== */}
      <div className="page">
        {/* Header */}
        <header className="flex items-center justify-between pb-3 mb-4">
          <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>

        {/* Hero résidentiel — Avant/Après */}
        <section className="mb-4">
          <div className="grid grid-cols-2 gap-3 mb-3">
            <div className="relative rounded-lg overflow-hidden border-2 border-red-200">
              <img src={painBuffering} alt="Internet frustrant" className="w-full h-28 object-cover" />
              <div className="absolute bottom-0 left-0 right-0 bg-red-600/90 text-white text-center py-1.5 text-xs font-bold">
                😤 Votre fournisseur actuel
              </div>
            </div>
            <div className="relative rounded-lg overflow-hidden border-2 border-green-200">
              <img src={solutionConnected} alt="Famille connectée avec TARGO" className="w-full h-28 object-cover" />
              <div className="absolute bottom-0 left-0 right-0 bg-[#00C853]/90 text-white text-center py-1.5 text-xs font-bold">
                😊 Avec TARGO
              </div>
            </div>
          </div>
          <h1 className="text-lg font-black text-center text-gray-900 mb-1">
            Pourquoi des milliers de foyers ont changé de fournisseur?
          </h1>
          <p className="text-xs text-center text-gray-500">Services de confiance, tout-en-un, près de chez vous</p>
        </section>

        {/* Pain Points résidentiels */}
        <section className="mb-4">
          <h2 className="text-sm font-bold text-gray-900 pb-2 mb-3 border-b-2 border-[#00C853] flex items-center gap-2">
            <Home className="w-4 h-4 text-[#00C853]" />
            Reconnaissez-vous ces situations?
          </h2>
          <div className="grid grid-cols-2 gap-2.5">
            {residentialPains.map((item, i) => (
              <div key={i} className="border border-gray-200 rounded-lg p-2.5 bg-gray-50/50">
                <div className="flex items-start gap-2 mb-1.5">
                  <XCircle className="w-4 h-4 text-red-500 shrink-0 mt-0.5" />
                  <p className="text-[11px] font-semibold text-red-700 leading-tight">{item.pain}</p>
                </div>
                <div className="flex items-start gap-2">
                  <CheckCircle2 className="w-4 h-4 text-[#00C853] shrink-0 mt-0.5" />
                  <p className="text-[11px] text-gray-700 leading-tight">{item.solution}</p>
                </div>
              </div>
            ))}
          </div>
        </section>

        {/* Stats */}
        <section className="mb-4">
          <div className="bg-gray-900 rounded-lg p-3 grid grid-cols-4 gap-2">
            {stats.map((stat, i) => (
              <div key={i} className="text-center">
                <p className="text-lg font-black text-[#00C853]">{stat.number}</p>
                <p className="text-[9px] text-gray-300 leading-tight">{stat.label}</p>
              </div>
            ))}
          </div>
        </section>

        {/* CTA résidentiel */}
        <section className="bg-gradient-to-r from-[#00C853]/10 to-[#00C853]/5 rounded-lg p-3 border border-[#00C853]/20 mb-3">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-bold text-gray-900">Prêt à changer?</p>
              <p className="text-[10px] text-gray-600">Installation gratuite • Aucun contrat • Support 7j/7</p>
            </div>
            <div className="flex items-center gap-1 text-[#00C853] font-bold text-sm">
              1-855-888-2746
              <ArrowRight className="w-4 h-4" />
            </div>
          </div>
        </section>

        <footer className="border-t border-gray-200 pt-2 mt-auto">
          <p className="text-center text-[10px] text-gray-400">Page 1 de 2 — Solutions Résidentielles</p>
        </footer>
      </div>

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

        {/* Hero affaires — Avant/Après */}
        <section className="mb-4">
          <div className="grid grid-cols-2 gap-3 mb-3">
            <div className="relative rounded-lg overflow-hidden border-2 border-red-200">
              <img src={painBusiness} alt="Entreprise en panne" className="w-full h-28 object-cover" />
              <div className="absolute bottom-0 left-0 right-0 bg-red-600/90 text-white text-center py-1.5 text-xs font-bold">
                😰 Sans TARGO
              </div>
            </div>
            <div className="relative rounded-lg overflow-hidden border-2 border-green-200">
              <img src={solutionBusiness} alt="Entreprise performante avec TARGO" className="w-full h-28 object-cover" />
              <div className="absolute bottom-0 left-0 right-0 bg-[#00C853]/90 text-white text-center py-1.5 text-xs font-bold">
                🚀 Avec TARGO
              </div>
            </div>
          </div>
          <h2 className="text-base font-black text-center text-gray-900 mb-1">
            200+ entreprises ont quitté leur fournisseur pour TARGO
          </h2>
          <p className="text-[10px] text-center text-gray-500 italic px-6">
            « {migrationQuote} »
          </p>
        </section>

        {/* Pain Points affaires */}
        <section className="mb-4">
          <h2 className="text-sm font-bold text-gray-900 pb-2 mb-3 border-b-2 border-[#00C853] flex items-center gap-2">
            <Building2 className="w-4 h-4 text-[#00C853]" />
            Votre entreprise mérite mieux
          </h2>
          <div className="grid grid-cols-2 gap-2.5">
            {businessPains.map((item, i) => (
              <div key={i} className="border border-gray-200 rounded-lg p-2.5 bg-gray-50/50">
                <div className="flex items-start gap-2 mb-1.5">
                  <XCircle className="w-4 h-4 text-red-500 shrink-0 mt-0.5" />
                  <p className="text-[11px] font-semibold text-red-700 leading-tight">{item.pain}</p>
                </div>
                <div className="flex items-start gap-2">
                  <CheckCircle2 className="w-4 h-4 text-[#00C853] shrink-0 mt-0.5" />
                  <p className="text-[11px] text-gray-700 leading-tight">{item.solution}</p>
                </div>
              </div>
            ))}
          </div>
        </section>

        {/* Services complets liste */}
        <section className="mb-3">
          <h3 className="text-xs font-bold text-gray-700 mb-2">Tous nos services affaires:</h3>
          <div className="grid grid-cols-4 gap-1.5">
            {[
              { icon: Wifi, name: "Internet dédié" },
              { icon: Phone, name: "Téléphonie SIP" },
              { icon: Building2, name: "Multilogement" },
              { icon: Network, name: "SD-WAN" },
              { icon: Link2, name: "Inter-sites" },
              { icon: GlobeLock, name: "VPN" },
              { icon: Cloud, name: "Cloud" },
              { icon: Shield, name: "Sécurité" },
              { icon: Radio, name: "WiFi géré" },
              { icon: Signal, name: "Cellulaire" },
              { icon: Cable, name: "Câblage" },
              { icon: Laptop, name: "Microsoft 365" },
              { icon: Server, name: "Virtualisation" },
              { icon: Container, name: "Docker/K8s" },
              { icon: Wrench, name: "Services gérés" },
              { icon: Headphones, name: "Support TI" },
            ].map((svc, i) => (
              <div key={i} className="flex items-center gap-1.5 text-[9px] text-gray-600 bg-gray-50 rounded px-1.5 py-1">
                <svc.icon className="w-3 h-3 text-[#00C853]" />
                <span>{svc.name}</span>
              </div>
            ))}
          </div>
        </section>

        {/* CTA Affaires */}
        <section className="bg-gray-900 rounded-lg p-4 mb-3">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-bold text-white">Demandez une analyse gratuite de vos besoins</p>
              <p className="text-[10px] text-gray-400">Un conseiller dédié vous contactera dans les 24h</p>
            </div>
            <div className="text-right">
              <p className="text-[#00C853] font-bold text-sm">1-855-888-2746</p>
              <p className="text-[10px] text-gray-400">support@targo.ca</p>
            </div>
          </div>
        </section>

        {/* Footer */}
        <footer className="border-t-2 border-[#00C853] pt-3 mt-auto">
          <div className="flex justify-between items-center text-[10px]">
            <p className="text-gray-500">Services de confiance, tout-en-un, près de chez vous</p>
            <p className="text-gray-500">www.targo.ca</p>
          </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-dynamique .page {
            width: 7.5in;
            height: 10in;
            padding: 0;
            margin: 0;
            page-break-after: always;
            display: flex;
            flex-direction: column;
          }
          .catalogue-dynamique .page:last-child {
            page-break-after: avoid;
          }
        }
        
        @media screen {
          .catalogue-dynamique {
            max-width: 8.5in;
            margin: 0 auto;
          }
          .catalogue-dynamique .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 CatalogueDynamique;