import Header from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";
import targoLogo from "@/assets/targo-logo.png";
import { Button } from "@/components/ui/button";
import { ArrowRight, Phone, Mail } 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 = [
  "Internet Fibre dédié",
  "Téléphonie IP / SIP",
  "SD-WAN & VPN",
  "Cloud & Virtualisation",
  "Cybersécurité",
  "Wi-Fi géré",
  "Microsoft 365",
  "Câblage structuré",
  "Réseaux inter-sites",
  "Amplification cellulaire",
  "Services gérés",
  "Multilogement",
];

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

  return (
    <div className="min-h-screen bg-background">
      <div className="print:hidden">
        <Header />
      </div>

      {/* Print / Download buttons */}
      <div className="print:hidden container pt-28 pb-4 flex gap-3 justify-end">
        <Button onClick={handlePrint} variant="outline" className="gap-2">
          <Mail className="w-4 h-4" />
          Imprimer / PDF
        </Button>
      </div>

      {/* Letter content */}
      <div className="pub-lettre container max-w-[8.5in] mx-auto pb-16 print:pb-0 print:pt-0 print:max-w-none">
        <div className="page bg-white rounded-xl shadow-lg print:shadow-none print:rounded-none overflow-hidden">
          
          {/* MOBILE: Full green header band */}
          <div className="print:hidden bg-[#00C853] px-6 md:px-10 py-6 flex items-center justify-between">
            <img src={targoLogo} alt="TARGO" className="h-10 brightness-0 invert" />
            <div className="text-white text-right text-sm font-medium">
              <p>1-855-888-2746</p>
              <p>targo.ca</p>
            </div>
          </div>

          {/* PRINT: Simple logo on white */}
          <div className="hidden print:flex px-10 pt-6 pb-2 items-center justify-between">
            <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-6 md:px-10 py-6 md:py-8 flex flex-col print:px-10 print:py-4" style={{ minHeight: '9in' }}>
            
            {/* Hook headline */}
            <div className="text-center mb-6 md:mb-8">
              <h1 className="font-display text-2xl md:text-3xl font-bold text-gray-900 leading-tight mb-3">
                Qu'ont en commun ces<br />
                <span className="text-[#00C853]">entreprises à succès?</span>
              </h1>
            </div>

            {/* Client grid */}
            <div className="grid grid-cols-2 md:grid-cols-3 gap-2 md:gap-3 mb-6 md:mb-8 print:grid-cols-3">
              {clients.map((client) => (
                <div
                  key={client}
                  className="bg-gray-50 border border-gray-200 rounded-lg px-3 py-2.5 text-center text-xs font-semibold text-gray-700 leading-tight flex items-center justify-center min-h-[44px]"
                >
                  {client}
                </div>
              ))}
            </div>

            {/* Answer / Value proposition */}
            <div className="bg-green-50 border-l-4 border-[#00C853] rounded-r-lg px-4 md:px-6 py-4 md:py-5 mb-6 md:mb-8">
              <p className="text-sm md:text-base font-semibold text-gray-900 mb-2">
                Elles bénéficient d'un service évolué et personnalisé qui leur permet :
              </p>
              <ul className="space-y-2 text-sm 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 summary */}
            <div className="mb-6 md:mb-8">
              <h2 className="font-display text-base md:text-lg font-bold text-gray-900 mb-3 md:mb-4 text-center">
                Des solutions complètes pour votre entreprise
              </h2>
              <div className="grid grid-cols-2 md:grid-cols-3 gap-2 text-xs print:grid-cols-3">
                {services.map((service) => (
                  <div key={service} className="flex items-center gap-1.5 text-gray-700">
                    <span className="w-1.5 h-1.5 rounded-full bg-[#00C853] flex-shrink-0" />
                    {service}
                  </div>
                ))}
              </div>
            </div>

            {/* Spacer to push CTA down */}
            <div className="flex-1" />

            {/* CTA — full color on mobile, muted for print */}
            <div className="bg-gray-900 text-white rounded-xl px-6 md:px-8 py-5 md:py-6 text-center print:bg-gray-100 print:text-gray-900 print:border print:border-gray-300 print:rounded-lg">
              <p className="text-base md:text-lg font-bold mb-1 font-display print:text-gray-900">
                Prêt à passer à la vitesse supérieure?
              </p>
              <p className="text-sm text-gray-300 mb-4 print:text-gray-600">
                Demandez une consultation gratuite et découvrez comment TARGO peut transformer vos communications.
              </p>
              <div className="flex flex-col sm:flex-row gap-3 justify-center items-center text-sm">
                <span className="flex items-center gap-2 font-semibold">
                  <Phone className="w-4 h-4 text-[#00C853]" />
                  1-855-888-2746
                </span>
                <span className="hidden sm:inline text-gray-500">|</span>
                <span className="flex items-center gap-2 font-semibold">
                  <Mail className="w-4 h-4 text-[#00C853]" />
                  support@targo.ca
                </span>
                <span className="hidden sm:inline text-gray-500">|</span>
                <span className="flex items-center gap-2 font-semibold">
                  <ArrowRight className="w-4 h-4 text-[#00C853]" />
                  targo.ca/business
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="print:hidden">
        <Footer />
      </div>

      <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;
          }
          
          .print\\:hidden {
            display: none !important;
          }
          
          .hidden.print\\:flex {
            display: flex !important;
          }
          
          .pub-lettre {
            padding: 0 !important;
            margin: 0 !important;
            max-width: none !important;
          }
          
          .pub-lettre .page {
            min-height: auto !important;
            border-radius: 0 !important;
            box-shadow: none !important;
          }
          
          /* CTA box for print */
          .pub-lettre .print\\:bg-gray-100 {
            background-color: #f3f4f6 !important;
            color: #111827 !important;
          }
          
          .pub-lettre .print\\:text-gray-900 {
            color: #111827 !important;
          }
          
          .pub-lettre .print\\:text-gray-600 {
            color: #4b5563 !important;
          }
        }
      `}</style>
    </div>
  );
};

export default PubliciteLettre;