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

import targoLogo from "@/assets/targo-logo.png";
import { Phone, Mail, ArrowRight, Printer, Wifi, Network, GlobeLock, Cloud, Shield, Radio, Signal, Laptop, Cable, Link2, Waypoints, Building2, Globe } from "lucide-react";

const clients = [
  "Vegpro International",
  "Lécuyer Béton",
  "Cultures Gen V",
  "Parc Safari",
  "Uniag",
  "GRC",
  "Agence des services frontaliers du Canada",
  "Groupe ABS",
  "Sobeys / IGA",
  "Ciment Québec",
  "Pavages Maska",
  "Groupe MPotvin",
];

const services = [
  { icon: Wifi, label: "Internet Fibre dédié" },
  { icon: Phone, label: "Téléphonie IP / SIP" },
  { icon: Network, label: "SD-WAN & VPN" },
  { icon: Cloud, label: "Cloud & Virtualisation" },
  { icon: Shield, label: "Cybersécurité" },
  { icon: Radio, label: "Wi-Fi géré" },
  { icon: Laptop, label: "Microsoft 365" },
  { icon: Cable, label: "Câblage structuré" },
  { icon: Link2, label: "Réseaux inter-sites" },
  { icon: Signal, label: "Amplification cellulaire" },
  { icon: Waypoints, label: "Réseaux publics" },
  { icon: Building2, label: "Immeubles, RPA & Hôtels" },
];

const PublicitePrint = () => {
  return (
    <div className="min-h-screen bg-white flex items-start justify-center">
      <div className="w-[8.5in] mx-auto">
        <div className="px-10 pt-6 pb-4 flex items-center justify-between border-b border-gray-200">
          <img src={targoLogo} alt="TARGO" className="h-10" />
          <div className="text-right text-xs text-gray-600">
            <p>1-855-888-2746</p>
            <p>targo.ca</p>
          </div>
        </div>

        <div className="px-10 py-4 flex flex-col">
          {/* Hook headline — single line */}
          <div className="text-center mb-5 mt-4">
            <h1 className="font-display text-[22px] font-bold text-gray-900 leading-tight">
              Qu'ont en commun ces <span className="text-[#00C853]">entreprises à succès?</span>
            </h1>
          </div>

          {/* Client grid — compact */}
          <div className="grid grid-cols-3 gap-x-3 gap-y-1.5 mb-5">
            {clients.map((client) => (
              <div
                key={client}
                className="bg-gray-50 border border-gray-200 rounded px-2.5 py-1.5 text-center text-[11px] font-semibold text-gray-700 leading-tight flex items-center justify-center"
              >
                {client}
              </div>
            ))}
          </div>

          {/* Transition phrase */}
          <p className="text-center text-[13px] text-gray-600 mb-3">
            Pour différentes raisons, après plusieurs années avec <strong>Vidéotron</strong>, <strong>Cogeco</strong> ou <strong>Bell</strong>, elles préfèrent <strong>TARGO</strong>, que ce soit à cause de la fiabilité, la vitesse d'envoi, la prise en charge complète ou le service VIP.
          </p>

          {/* Value proposition */}
          <div className="bg-green-50 border-l-4 border-[#00C853] rounded-r-lg px-5 py-3 mb-5">
            <ul className="space-y-1 text-[13px] text-gray-700">
              <li className="flex items-start gap-2">
                <span className="text-[#00C853] font-bold mt-0.5">✓</span>
                <span>La <strong>paix d'esprit</strong> grâce à un réseau fibre 100 % local, surveillé 24/7</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-[#00C853] font-bold mt-0.5">✓</span>
                <span>Une <strong>longueur d'avance</strong> par l'innovation que TARGO apporte à chaque solution</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-[#00C853] font-bold mt-0.5">✓</span>
                <span>Un <strong>partenaire unique</strong> pour Internet, téléphonie, cloud, sécurité et plus</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-[#00C853] font-bold mt-0.5">✓</span>
                <span>Un <strong>support humain local</strong>, disponible 7j/7, qui connaît votre réalité</span>
              </li>
            </ul>
          </div>

          {/* Services */}
          <div className="mb-5 pt-4 border-t border-gray-200">
            <h2 className="font-display text-base font-bold text-gray-900 mb-2.5 text-center">
              Des solutions complètes pour votre entreprise
            </h2>
            <div className="grid grid-cols-3 gap-x-3 gap-y-1.5 text-[11px]">
              {services.map((service) => (
                <div key={service.label} className="flex items-center gap-1.5 text-gray-700 border border-gray-200 rounded px-2 py-1">
                  <service.icon className="w-3.5 h-3.5 text-[#00C853] flex-shrink-0" />
                  {service.label}
                </div>
              ))}
            </div>
          </div>

          {/* Reduced spacer */}
          <div className="flex-1 max-h-4" />

          {/* CTA */}
          <div className="bg-gray-100 border border-gray-300 rounded-lg px-6 py-4 text-center">
            <p className="text-base font-bold mb-1 font-display text-gray-900">
              Prêt à propulser vos affaires à la vitesse supérieure?
            </p>
            <p className="text-sm text-gray-600 mb-3">
              Demandez une consultation gratuite et découvrez comment TARGO peut transformer vos communications.
            </p>
            <div className="flex gap-4 justify-center items-center text-sm">
              <span className="flex items-center gap-1.5 font-semibold text-gray-900">
                <Phone className="w-3.5 h-3.5 text-[#00C853]" />
                1-855-888-2746
              </span>
              <span className="text-gray-400">|</span>
              <span className="flex items-center gap-1.5 font-semibold text-gray-900">
                <Mail className="w-3.5 h-3.5 text-[#00C853]" />
                support@targo.ca
              </span>
              <span className="text-gray-400">|</span>
              <span className="flex items-center gap-1.5 font-semibold text-gray-900">
                <Globe className="w-3.5 h-3.5 text-[#00C853]" />
                targo.ca
              </span>
            </div>
          </div>
        </div>
      </div>

      {/* Print button */}
      <button
        onClick={() => window.print()}
        className="fixed bottom-6 right-6 bg-[#00C853] text-white rounded-full p-3 shadow-lg hover:bg-[#00B848] transition-colors print:hidden"
        title="Imprimer"
      >
        <Printer className="w-5 h-5" />
      </button>

      <style>{`
        @media print {
          @page { size: letter; margin: 0.4in 0.5in; }
          * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
          html, body { margin: 0 !important; padding: 0 !important; background: white !important; }
        }
      `}</style>
    </div>
  );
};

export default PublicitePrint;