import { useState } from "react";
import {
  Wifi, Tv, Phone, Server, Cloud, Shield, Network, Radio, Signal,
  Laptop, Cable, Link2, GlobeLock, Building2, Headphones, Wrench,
  Container, Home, CheckCircle2, XCircle, ArrowRight, AlertTriangle,
  Copy, Check, Globe, Mail, MapPin, Waypoints, Printer, Zap, Clock
} from "lucide-react";
import targoLogo from "@/assets/targo-logo.png";
import targoLogoGreen from "@/assets/targo-logo-green.svg";
import targoLogoWhite from "@/assets/targo-logo-white.svg";
import targoTechnician from "@/assets/targo-technician-avatar.png";
import targoBureaux from "@/assets/targo-bureaux.jpg";
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";

// Color swatch component
const ColorSwatch = ({ name, hex, hsl, token, className = "" }: { name: string; hex: string; hsl: string; token?: string; className?: string }) => {
  const [copied, setCopied] = useState(false);
  const copyHex = () => {
    navigator.clipboard.writeText(hex);
    setCopied(true);
    setTimeout(() => setCopied(false), 1500);
  };
  return (
    <div className="group cursor-pointer print:cursor-default" onClick={copyHex}>
      <div className={`w-full h-20 rounded-xl mb-2 ring-1 ring-black/5 transition-transform group-hover:scale-105 print:group-hover:scale-100 ${className}`} style={{ backgroundColor: hex }} />
      <p className="text-sm font-bold text-gray-900">{name}</p>
      <p className="text-xs text-gray-500 font-mono flex items-center gap-1">
        {hex} {copied ? <Check className="w-3 h-3 text-[#00C853]" /> : <Copy className="w-3 h-3 opacity-0 group-hover:opacity-50 print:hidden" />}
      </p>
      <p className="text-[10px] text-gray-400 font-mono">{hsl}</p>
      {token && <p className="text-[10px] text-[#00C853] font-mono mt-0.5">--{token}</p>}
    </div>
  );
};

// Section wrapper with page break support
const Section = ({ id, title, subtitle, children, pageBreak = false }: { id: string; title: string; subtitle: string; children: React.ReactNode; pageBreak?: boolean }) => (
  <section id={id} className={`py-16 border-b border-gray-100 last:border-b-0 ${pageBreak ? 'print-page-break' : ''}`}>
    <div className="mb-10">
      <p className="text-xs font-bold uppercase tracking-[0.2em] text-[#00C853] mb-2">{subtitle}</p>
      <h2 className="text-3xl font-bold text-gray-900 font-display">{title}</h2>
    </div>
    {children}
  </section>
);

const NAV_ITEMS = [
  { id: "logo", label: "Logo" },
  { id: "colors", label: "Couleurs" },
  { id: "typography", label: "Typographie" },
  { id: "iconography", label: "Icônes" },
  { id: "imagery", label: "Imagerie" },
  { id: "layout", label: "Layout" },
  { id: "components", label: "Composants" },
  { id: "animations", label: "Animations" },
  { id: "tone", label: "Ton & Voix" },
  { id: "print", label: "Print" },
  { id: "contact", label: "Contact" },
];

const RESIDENTIAL_ICONS = [
  { icon: Wifi, name: "Internet", usage: "Services internet résidentiels" },
  { icon: Tv, name: "Télévision", usage: "Services TV et IPTV" },
  { icon: Phone, name: "Téléphonie", usage: "Services téléphoniques" },
  { icon: Signal, name: "WiFi / Signal", usage: "Couverture et qualité du signal" },
  { icon: Headphones, name: "Support", usage: "Service à la clientèle" },
  { icon: Home, name: "Résidentiel", usage: "Section résidentielle" },
];

const BUSINESS_ICONS = [
  { icon: Building2, name: "Affaires", usage: "Section entreprise" },
  { icon: Shield, name: "Sécurité", usage: "Cybersécurité, pare-feu" },
  { icon: Cloud, name: "Cloud", usage: "Services infonuagiques" },
  { icon: Network, name: "SD-WAN", usage: "Réseau défini par logiciel" },
  { icon: Link2, name: "Inter-sites", usage: "Réseaux inter-sites" },
  { icon: GlobeLock, name: "VPN", usage: "Passerelle VPN" },
  { icon: Server, name: "Serveurs", usage: "Virtualisation" },
  { icon: Container, name: "Conteneurs", usage: "Docker / Kubernetes" },
  { icon: Radio, name: "WiFi géré", usage: "WiFi entreprise" },
  { icon: Signal, name: "Cellulaire", usage: "Amplification cellulaire" },
  { icon: Cable, name: "Câblage", usage: "Câblage structuré" },
  { icon: Laptop, name: "Microsoft 365", usage: "Collaboration cloud" },
  { icon: Wrench, name: "Services gérés", usage: "MSP / gestion TI" },
  { icon: Waypoints, name: "Réseaux publics", usage: "Infrastructure publique" },
];

const PAIN_SOLUTION_ICONS = [
  { icon: XCircle, name: "XCircle", usage: "Point de douleur / problème", color: "text-red-500" },
  { icon: CheckCircle2, name: "CheckCircle2", usage: "Solution TARGO", color: "text-[#00C853]" },
  { icon: AlertTriangle, name: "AlertTriangle", usage: "Avertissement / hausse de prix", color: "text-amber-500" },
  { icon: ArrowRight, name: "ArrowRight", usage: "CTA / navigation", color: "text-[#00C853]" },
];

const BrandGuidelines = () => {
  const [activeSection, setActiveSection] = useState("logo");

  const scrollTo = (id: string) => {
    setActiveSection(id);
    document.getElementById(id)?.scrollIntoView({ behavior: "smooth" });
  };

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

  return (
    <div className="min-h-screen bg-white">
      {/* Sticky Nav */}
      <nav className="sticky top-0 z-50 bg-white/90 backdrop-blur-md border-b border-gray-100 print:hidden">
        <div className="max-w-6xl mx-auto px-6 flex items-center gap-8 h-16">
          <img src={targoLogoGreen} alt="TARGO" className="h-7" />
          <div className="h-6 w-px bg-gray-200" />
          <div className="flex gap-1 overflow-x-auto">
            {NAV_ITEMS.map((item) => (
              <button
                key={item.id}
                onClick={() => scrollTo(item.id)}
                className={`px-3 py-1.5 rounded-full text-xs font-medium whitespace-nowrap transition-colors ${
                  activeSection === item.id
                    ? "bg-[#00C853] text-white"
                    : "text-gray-500 hover:text-gray-900 hover:bg-gray-50"
                }`}
              >
                {item.label}
              </button>
            ))}
          </div>
        </div>
      </nav>

      {/* Print Button */}
      <div className="print:hidden fixed bottom-6 right-6 z-50">
        <button
          onClick={handlePrint}
          className="bg-[#00C853] hover:bg-[#00a844] text-white font-medium px-6 py-3 rounded-xl shadow-lg flex items-center gap-2 transition-colors"
        >
          <Printer className="w-5 h-5" />
          Imprimer / PDF
        </button>
      </div>

      {/* ===== COVER PAGE ===== */}
      <header className="bg-gray-950 text-white min-h-[70vh] flex flex-col justify-center print:min-h-0 print:py-32">
        <div className="max-w-6xl mx-auto px-6 w-full">
          <div className="mb-8">
            <div className="w-16 h-1 bg-[#00C853] mb-8" />
            <p className="text-xs font-bold uppercase tracking-[0.3em] text-[#00C853] mb-6">Guide de marque</p>
          </div>
          <h1 className="flex items-end gap-2 mb-6">
            <img src={targoLogoWhite} alt="TARGO" className="h-16 md:h-24" />
            <span className="text-6xl md:text-8xl font-black text-[#00C853] leading-none mb-1">.</span>
          </h1>
          <p className="text-xl md:text-2xl text-gray-400 max-w-xl leading-relaxed font-light">
            Services de confiance, tout-en-un,<br />près de chez vous.
          </p>
          <div className="mt-16 pt-8 border-t border-white/10 flex flex-wrap gap-x-12 gap-y-4 text-sm text-gray-500">
            <div>
              <p className="text-[10px] uppercase tracking-widest text-gray-600 mb-1">Version</p>
              <p className="font-semibold text-white">1.0</p>
            </div>
            <div>
              <p className="text-[10px] uppercase tracking-widest text-gray-600 mb-1">Date</p>
              <p className="font-semibold text-white">Février 2026</p>
            </div>
            <div>
              <p className="text-[10px] uppercase tracking-widest text-gray-600 mb-1">Statut</p>
              <p className="font-semibold text-white">Confidentiel</p>
            </div>
          </div>
        </div>
      </header>

      {/* ===== TABLE DES MATIÈRES (print only) ===== */}
      <div className="hidden print:block py-16 border-b border-gray-200">
        <div className="max-w-6xl mx-auto px-6">
          <h2 className="text-2xl font-bold text-gray-900 font-display mb-8">Table des matières</h2>
          <div className="grid grid-cols-2 gap-4">
            {[
              { num: "01", title: "Logo & Identité" },
              { num: "02", title: "Palette de couleurs" },
              { num: "03", title: "Typographie" },
              { num: "04", title: "Iconographie" },
              { num: "05", title: "Imagerie & Visuels" },
              { num: "06", title: "Layout & Structure" },
              { num: "07", title: "Composants UI" },
              { num: "08", title: "Animations & Motion" },
              { num: "09", title: "Ton & Voix" },
              { num: "10", title: "Documents imprimés" },
              { num: "11", title: "Coordonnées officielles" },
            ].map((item) => (
              <div key={item.num} className="flex items-center gap-4 py-3 border-b border-gray-100">
                <span className="text-sm font-bold text-[#00C853] font-mono w-8">{item.num}</span>
                <span className="text-sm text-gray-700">{item.title}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <main className="max-w-6xl mx-auto px-6">
        {/* ===== 01 LOGO ===== */}
        <Section id="logo" title="Logo & Identité" subtitle="01 — Identité" pageBreak>
          <p className="text-sm text-gray-500 mb-8 max-w-2xl">Le logo TARGO est l'élément central de notre identité. Il doit toujours être utilisé dans sa forme originale SVG, sans modification de proportions, couleurs ou effets.</p>
          
          <div className="grid md:grid-cols-2 gap-8 mb-10">
            {/* Green on white */}
            <div className="border border-gray-100 rounded-2xl p-10 flex flex-col items-center justify-center bg-white gap-3">
              <img src={targoLogoGreen} alt="TARGO Logo vert sur fond clair" className="h-16" />
              <p className="text-[10px] text-gray-400 font-mono">targo-logo-green.svg</p>
              <span className="text-[10px] bg-green-50 text-green-700 px-2 py-0.5 rounded-full">✅ Fonds clairs / blancs</span>
            </div>
            {/* White on dark */}
            <div className="border border-gray-800 rounded-2xl p-10 flex flex-col items-center justify-center bg-gray-950 gap-3">
              <img src={targoLogoWhite} alt="TARGO Logo blanc sur fond sombre" className="h-16" />
              <p className="text-[10px] text-gray-500 font-mono">targo-logo-white.svg</p>
              <span className="text-[10px] bg-white/10 text-white/70 px-2 py-0.5 rounded-full">✅ Fonds sombres</span>
            </div>
          </div>
          {/* Additional variants */}
          <div className="grid md:grid-cols-3 gap-8 mb-10">
            <div className="bg-[#00C853] rounded-2xl p-10 flex flex-col items-center justify-center gap-3">
              <img src={targoLogoWhite} alt="TARGO Logo blanc sur vert" className="h-14" />
              <span className="text-[10px] bg-white/20 text-white px-2 py-0.5 rounded-full">✅ Sur Targo Green</span>
            </div>
            <div className="border border-gray-100 rounded-2xl p-10 flex flex-col items-center justify-center bg-gray-50 gap-3">
              <img src={targoLogo} alt="TARGO Logo PNG" className="h-14" />
              <span className="text-[10px] bg-gray-100 text-gray-600 px-2 py-0.5 rounded-full">PNG (fallback)</span>
            </div>
            <div className="border border-gray-100 rounded-2xl p-10 flex flex-col items-center justify-center gap-3">
              <div className="flex items-end gap-1">
                <img src={targoLogoWhite} alt="TARGO" className="h-10 brightness-0" />
                <span className="text-3xl font-black text-[#00C853] leading-none mb-0.5">.</span>
              </div>
              <span className="text-[10px] bg-gray-100 text-gray-600 px-2 py-0.5 rounded-full">Logo + Point vert (titres)</span>
            </div>
          </div>

          {/* Rules */}
          <h3 className="text-sm font-bold text-gray-700 mb-4">Règles d'utilisation</h3>
          <div className="grid md:grid-cols-3 gap-6">
            <div className="bg-gray-50 rounded-xl p-6">
              <CheckCircle2 className="w-5 h-5 text-[#00C853] mb-3" />
              <p className="text-sm font-semibold text-gray-900 mb-1">Respecter les proportions</p>
              <p className="text-xs text-gray-500">Ne jamais étirer ou déformer le logo. Toujours maintenir le ratio hauteur/largeur original.</p>
            </div>
            <div className="bg-gray-50 rounded-xl p-6">
              <CheckCircle2 className="w-5 h-5 text-[#00C853] mb-3" />
              <p className="text-sm font-semibold text-gray-900 mb-1">Zone d'exclusion</p>
              <p className="text-xs text-gray-500">Prévoir un espace minimum égal à la hauteur du « T » autour du logo.</p>
            </div>
            <div className="bg-gray-50 rounded-xl p-6">
              <XCircle className="w-5 h-5 text-red-400 mb-3" />
              <p className="text-sm font-semibold text-gray-900 mb-1">Ne pas faire</p>
              <p className="text-xs text-gray-500">Pas de rotation, pas d'ombre portée, pas de dégradé sur le logo, pas de fond complexe.</p>
            </div>
          </div>
        </Section>

        {/* ===== 02 COULEURS ===== */}
        <Section id="colors" title="Palette de couleurs" subtitle="02 — Couleurs" pageBreak>
          <h3 className="text-sm font-bold text-gray-700 mb-4">Couleurs primaires</h3>
          <div className="grid grid-cols-2 md:grid-cols-5 gap-6 mb-10">
            <ColorSwatch name="Targo Green" hex="#00C853" hsl="142° 100% 39%" token="primary" />
            <ColorSwatch name="Green Light" hex="#69F0AE" hsl="142° 60% 55%" token="targo-green-light" />
            <ColorSwatch name="Green Dark" hex="#005026" hsl="142° 75% 35%" token="targo-green-dark" />
            <ColorSwatch name="Targo Dark" hex="#1C1E26" hsl="228° 15% 13%" token="targo-dark" className="ring-gray-800" />
            <ColorSwatch name="Targo Gray" hex="#64748B" hsl="215° 16% 47%" token="targo-gray" />
          </div>

          <h3 className="text-sm font-bold text-gray-700 mb-4">Couleurs sémantiques</h3>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-10">
            <ColorSwatch name="Background" hex="#FFFFFF" hsl="0° 0% 100%" token="background" />
            <ColorSwatch name="Foreground" hex="#1B2E24" hsl="160° 10% 15%" token="foreground" />
            <ColorSwatch name="Muted" hex="#F5FAF7" hsl="145° 20% 96%" token="muted" />
            <ColorSwatch name="Destructive" hex="#EF4444" hsl="0° 84% 60%" token="destructive" />
          </div>

          <h3 className="text-sm font-bold text-gray-700 mb-4">Couleurs narratives (catalogues)</h3>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-10">
            <div>
              <div className="w-full h-20 rounded-xl mb-2 bg-red-500 ring-1 ring-black/5" />
              <p className="text-sm font-bold text-gray-900">Douleur / Problème</p>
              <p className="text-xs text-gray-500 font-mono">#EF4444</p>
              <p className="text-[10px] text-gray-400">XCircle, bordures rouges</p>
            </div>
            <div>
              <div className="w-full h-20 rounded-xl mb-2 bg-[#00C853] ring-1 ring-black/5" />
              <p className="text-sm font-bold text-gray-900">Solution TARGO</p>
              <p className="text-xs text-gray-500 font-mono">#00C853</p>
              <p className="text-[10px] text-gray-400">CheckCircle2, bordures vertes</p>
            </div>
            <div>
              <div className="w-full h-20 rounded-xl mb-2 bg-amber-500 ring-1 ring-black/5" />
              <p className="text-sm font-bold text-gray-900">Avertissement</p>
              <p className="text-xs text-gray-500 font-mono">#F59E0B</p>
              <p className="text-[10px] text-gray-400">AlertTriangle, hausses de prix</p>
            </div>
            <div>
              <div className="w-full h-20 rounded-xl mb-2 bg-gray-900 ring-1 ring-black/5" />
              <p className="text-sm font-bold text-gray-900">Stats / Confiance</p>
              <p className="text-xs text-gray-500 font-mono">#111827</p>
              <p className="text-[10px] text-gray-400">Bannières de statistiques</p>
            </div>
          </div>

          <h3 className="text-sm font-bold text-gray-700 mb-4">Dégradés</h3>
          <div className="grid md:grid-cols-3 gap-6">
            <div>
              <div className="w-full h-20 rounded-xl mb-2" style={{ background: "linear-gradient(135deg, #00C853, #005026)" }} />
              <p className="text-sm font-bold text-gray-900">Gradient Targo</p>
              <p className="text-xs text-gray-500 font-mono">135deg, #00C853 → #005026</p>
              <p className="text-[10px] text-gray-400">Boutons CTA, header actif</p>
            </div>
            <div>
              <div className="w-full h-20 rounded-xl mb-2 bg-gray-800 border border-white/10" style={{ background: "linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05)), #1f2937" }} />
              <p className="text-sm font-bold text-gray-900">Glass Gradient</p>
              <p className="text-xs text-gray-500 font-mono">white/10 → white/05</p>
              <p className="text-[10px] text-gray-400">Cartes glassmorphism</p>
            </div>
            <div>
              <div className="w-full h-20 rounded-xl mb-2 bg-gradient-to-r from-[#00C853]/10 to-[#00C853]/5 border border-[#00C853]/20" />
              <p className="text-sm font-bold text-gray-900">CTA Highlight</p>
              <p className="text-xs text-gray-500 font-mono">green/10 → green/05</p>
              <p className="text-[10px] text-gray-400">Cartes d'appel à l'action</p>
            </div>
          </div>
        </Section>

        {/* ===== 03 TYPOGRAPHIE ===== */}
        <Section id="typography" title="Typographie" subtitle="03 — Polices" pageBreak>
          <div className="grid md:grid-cols-2 gap-10 mb-10">
            <div>
              <p className="text-xs font-bold uppercase tracking-widest text-[#00C853] mb-4">Titres & Display</p>
              <p className="text-5xl font-bold mb-2" style={{ fontFamily: "'Space Grotesk', sans-serif" }}>Space Grotesk</p>
              <p className="text-sm text-gray-500 mb-4">Utilisée pour tous les titres (h1–h6) et textes d'impact. Google Fonts.</p>
              <div className="space-y-2 border-t border-gray-100 pt-4">
                <p className="text-3xl font-bold" style={{ fontFamily: "'Space Grotesk'" }}>Bold 700 — Titres principaux</p>
                <p className="text-xl font-semibold" style={{ fontFamily: "'Space Grotesk'" }}>Semibold 600 — Sous-titres</p>
                <p className="text-base font-medium" style={{ fontFamily: "'Space Grotesk'" }}>Medium 500 — Labels</p>
              </div>
            </div>
            <div>
              <p className="text-xs font-bold uppercase tracking-widest text-[#00C853] mb-4">Corps de texte</p>
              <p className="text-5xl font-bold mb-2" style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>Plus Jakarta Sans</p>
              <p className="text-sm text-gray-500 mb-4">Police principale pour le corps, les paragraphes et l'interface. Google Fonts.</p>
              <div className="space-y-2 border-t border-gray-100 pt-4">
                <p className="text-base font-normal">Regular 400 — Corps de texte standard</p>
                <p className="text-base font-medium">Medium 500 — Texte d'emphase</p>
                <p className="text-base font-semibold">Semibold 600 — Labels et boutons</p>
                <p className="text-base font-bold">Bold 700 — Accroches et CTA</p>
              </div>
            </div>
          </div>

          <div className="bg-gray-50 rounded-xl p-6 mb-10">
            <p className="text-xs font-bold text-gray-700 mb-3">Hiérarchie des tailles</p>
            <div className="space-y-3">
              {[
                { size: "text-4xl", label: "H1 — 36px", example: "Pourquoi des milliers de foyers ont changé?" },
                { size: "text-2xl", label: "H2 — 24px", example: "Reconnaissez-vous ces situations?" },
                { size: "text-lg", label: "H3 — 18px", example: "Tous nos services affaires" },
                { size: "text-base", label: "Body — 16px", example: "Fibre optique jusqu'à 3.5 Gbit/s, sans interruption" },
                { size: "text-sm", label: "Small — 14px", example: "Installation gratuite • Aucun contrat • Support 7j/7" },
                { size: "text-xs", label: "Caption — 12px", example: "Services de confiance, tout-en-un, près de chez vous" },
              ].map((t, i) => (
                <div key={i} className="flex items-baseline gap-4">
                  <span className="text-[10px] font-mono text-gray-400 w-28 shrink-0">{t.label}</span>
                  <span className={`${t.size} text-gray-900`}>{t.example}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="bg-amber-50 border border-amber-200 rounded-xl p-6">
            <div className="flex items-start gap-3">
              <AlertTriangle className="w-5 h-5 text-amber-500 shrink-0 mt-0.5" />
              <div>
                <p className="text-sm font-bold text-gray-900 mb-1">Documents imprimés</p>
                <p className="text-xs text-gray-600">Pour les documents print (PDF, catalogues physiques), utiliser <span className="font-mono font-bold">Arial / Helvetica</span> pour garantir la compatibilité universelle.</p>
              </div>
            </div>
          </div>
        </Section>

        {/* ===== 04 ICONOGRAPHIE ===== */}
        <Section id="iconography" title="Iconographie" subtitle="04 — Icônes" pageBreak>
          <p className="text-sm text-gray-500 mb-6">Bibliothèque : <span className="font-mono text-gray-700">lucide-react</span> — Taille par défaut : 24px, stroke: 2px. Couleur accent : <span className="font-mono text-[#00C853]">#00C853</span>.</p>

          <h3 className="text-sm font-bold text-gray-700 mb-4">Services résidentiels</h3>
          <div className="grid grid-cols-3 md:grid-cols-6 gap-4 mb-10">
            {RESIDENTIAL_ICONS.map((item, i) => (
              <div key={i} className="flex flex-col items-center gap-2 p-4 bg-gray-50 rounded-xl">
                <item.icon className="w-6 h-6 text-[#00C853]" />
                <p className="text-xs font-semibold text-gray-900">{item.name}</p>
                <p className="text-[10px] text-gray-400 text-center">{item.usage}</p>
              </div>
            ))}
          </div>

          <h3 className="text-sm font-bold text-gray-700 mb-4">Services affaires</h3>
          <div className="grid grid-cols-3 md:grid-cols-7 gap-4 mb-10">
            {BUSINESS_ICONS.map((item, i) => (
              <div key={i} className="flex flex-col items-center gap-2 p-4 bg-gray-50 rounded-xl">
                <item.icon className="w-6 h-6 text-[#00C853]" />
                <p className="text-xs font-semibold text-gray-900">{item.name}</p>
                <p className="text-[10px] text-gray-400 text-center">{item.usage}</p>
              </div>
            ))}
          </div>

          <h3 className="text-sm font-bold text-gray-700 mb-4">Icônes narratives (Pain vs Solution)</h3>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            {PAIN_SOLUTION_ICONS.map((item, i) => (
              <div key={i} className="flex flex-col items-center gap-2 p-4 bg-gray-50 rounded-xl">
                <item.icon className={`w-8 h-8 ${item.color}`} />
                <p className="text-xs font-semibold text-gray-900">{item.name}</p>
                <p className="text-[10px] text-gray-400 text-center">{item.usage}</p>
              </div>
            ))}
          </div>
        </Section>

        {/* ===== 05 IMAGERIE ===== */}
        <Section id="imagery" title="Imagerie & Visuels" subtitle="05 — Photos & Illustrations" pageBreak>
          <div className="grid md:grid-cols-2 gap-8 mb-10">
            <div>
              <p className="text-xs font-bold uppercase tracking-widest text-[#00C853] mb-4">Mascotte & Avatar</p>
              <div className="bg-gray-50 rounded-2xl p-8 flex items-center justify-center mb-3">
                <img src={targoTechnician} alt="Technicien TARGO" className="h-40 object-contain" />
              </div>
              <p className="text-xs text-gray-500">Technicien 3D cartoon — utilisé dans les héros et communications. Style amical, professionnel et accessible.</p>
            </div>
            <div>
              <p className="text-xs font-bold uppercase tracking-widest text-[#00C853] mb-4">Bureaux TARGO</p>
              <div className="rounded-2xl overflow-hidden mb-3">
                <img src={targoBureaux} alt="Bureaux TARGO" className="w-full h-52 object-cover" />
              </div>
              <p className="text-xs text-gray-500">Photo des bureaux — utilisée dans la section « À propos » avec overlay sombre pour lisibilité du texte.</p>
            </div>
          </div>

          <p className="text-xs font-bold uppercase tracking-widest text-[#00C853] mb-4">Visuels narratifs (Catalogues dynamiques)</p>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-10">
            <div>
              <img src={painBuffering} alt="Douleur: buffering" className="w-full h-32 object-cover rounded-xl ring-2 ring-red-200 mb-2" />
              <p className="text-xs font-semibold text-red-600">Douleur résidentielle</p>
              <p className="text-[10px] text-gray-400">Famille frustrée par le buffering</p>
            </div>
            <div>
              <img src={solutionConnected} alt="Solution: connectée" className="w-full h-32 object-cover rounded-xl ring-2 ring-green-200 mb-2" />
              <p className="text-xs font-semibold text-[#00C853]">Solution résidentielle</p>
              <p className="text-[10px] text-gray-400">Famille heureuse et connectée</p>
            </div>
            <div>
              <img src={painBusiness} alt="Douleur: business" className="w-full h-32 object-cover rounded-xl ring-2 ring-red-200 mb-2" />
              <p className="text-xs font-semibold text-red-600">Douleur affaires</p>
              <p className="text-[10px] text-gray-400">Entreprise en panne réseau</p>
            </div>
            <div>
              <img src={solutionBusiness} alt="Solution: business" className="w-full h-32 object-cover rounded-xl ring-2 ring-green-200 mb-2" />
              <p className="text-xs font-semibold text-[#00C853]">Solution affaires</p>
              <p className="text-[10px] text-gray-400">Entreprise performante avec TARGO</p>
            </div>
          </div>

          <div className="bg-gray-50 rounded-xl p-6">
            <p className="text-xs font-bold text-gray-700 mb-3">Directives visuelles</p>
            <div className="grid md:grid-cols-3 gap-6">
              <div className="flex items-start gap-2">
                <CheckCircle2 className="w-4 h-4 text-[#00C853] shrink-0 mt-0.5" />
                <p className="text-xs text-gray-600">Fonds propres et épurés, éviter les superpositions de dégradés sur les photos héros</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-xs text-gray-600">Style 3D cartoon minimaliste pour les illustrations de services résidentiels</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-xs text-gray-600">Photos réelles pour la section Affaires. Overlay sombre si texte superposé.</p>
              </div>
            </div>
          </div>
        </Section>

        {/* ===== 06 LAYOUT & STRUCTURE ===== */}
        <Section id="layout" title="Layout & Structure" subtitle="06 — Mise en page" pageBreak>
          <div className="grid md:grid-cols-2 gap-10 mb-10">
            <div>
              <h3 className="text-sm font-bold text-gray-700 mb-4">Structure du site</h3>
              <div className="space-y-3">
                {[
                  { label: "Header", desc: "Barre verte + nav principale + CTA. Sticky, se réduit au scroll." },
                  { label: "Hero", desc: "Plein écran. Titre display à gauche, visuel 3D à droite. Stats en bas." },
                  { label: "Sections", desc: "Alternance blanc / gris-50. Spacing: py-16 à py-24." },
                  { label: "Footer", desc: "Fond targo-dark (#1C1E26). Logo inversé, liens, contact." },
                ].map((item, i) => (
                  <div key={i} className="bg-gray-50 rounded-lg p-4">
                    <p className="text-sm font-bold text-gray-900">{item.label}</p>
                    <p className="text-xs text-gray-500 mt-1">{item.desc}</p>
                  </div>
                ))}
              </div>
            </div>
            <div>
              <h3 className="text-sm font-bold text-gray-700 mb-4">Grilles & Conteneur</h3>
              <div className="space-y-3">
                {[
                  { label: "Conteneur max", value: "1400px", desc: "container, padding: 2rem" },
                  { label: "Grille services", value: "3 colonnes", desc: "md:grid-cols-3, gap-6 à gap-8" },
                  { label: "Grille héro", value: "2 colonnes", desc: "lg:grid-cols-2, texte | visuel" },
                  { label: "Rayon de bordure", value: "0.75rem", desc: "--radius, arrondi généreux" },
                ].map((item, i) => (
                  <div key={i} className="bg-gray-50 rounded-lg p-4 flex items-start justify-between">
                    <div>
                      <p className="text-sm font-bold text-gray-900">{item.label}</p>
                      <p className="text-xs text-gray-500 mt-1">{item.desc}</p>
                    </div>
                    <span className="text-xs font-mono text-[#00C853] bg-[#00C853]/10 px-2 py-1 rounded shrink-0">{item.value}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <h3 className="text-sm font-bold text-gray-700 mb-4">Navigation principale</h3>
          <div className="bg-gray-50 rounded-xl p-6 mb-10">
            <div className="flex items-center gap-6 mb-4">
              <img src={targoLogoGreen} alt="TARGO" className="h-8" />
              <div className="flex gap-4 text-sm font-medium text-gray-600">
                <span className="text-gray-900">Internet</span>
                <span>Télévision</span>
                <span>Téléphone</span>
                <span className="flex items-center gap-1">Affaires <ArrowRight className="w-3 h-3 rotate-90" /></span>
                <span>À propos</span>
              </div>
              <div className="ml-auto flex gap-2">
                <span className="text-xs bg-white border border-gray-200 rounded-lg px-3 py-1.5 text-gray-600">Mon compte</span>
                <span className="text-xs bg-[#00C853] text-white rounded-lg px-3 py-1.5 font-semibold">Nous joindre</span>
              </div>
            </div>
            <p className="text-xs text-gray-400">La barre verte supérieure (514.448.0773 • support@targo.ca) disparaît au scroll. Le header adopte un backdrop-blur avec ombre.</p>
          </div>

          <h3 className="text-sm font-bold text-gray-700 mb-4">Pattern héro</h3>
          <div className="border border-gray-200 rounded-xl p-6 bg-white">
            <div className="grid grid-cols-2 gap-8">
              <div className="space-y-3">
                <div className="bg-[#00C853]/10 rounded-full w-fit px-3 py-1 text-[10px] font-bold text-[#00C853] uppercase tracking-wider">Pill Label</div>
                <div className="h-6 bg-gray-900 rounded w-3/4" />
                <div className="h-6 bg-[#00C853] rounded w-1/2" />
                <div className="h-3 bg-gray-200 rounded w-full mt-2" />
                <div className="h-3 bg-gray-200 rounded w-2/3" />
                <div className="flex gap-2 mt-4">
                  <div className="h-8 bg-[#00C853] rounded-lg w-24" />
                  <div className="h-8 border-2 border-gray-200 rounded-lg w-28" />
                </div>
                <div className="flex gap-6 mt-4 pt-4 border-t border-gray-100">
                  <div className="text-center"><div className="text-lg font-black">20+</div><div className="text-[8px] text-gray-400 uppercase">Années</div></div>
                  <div className="text-center"><div className="text-lg font-black">10k+</div><div className="text-[8px] text-gray-400 uppercase">Clients</div></div>
                  <div className="text-center"><div className="text-lg font-black">7j/7</div><div className="text-[8px] text-gray-400 uppercase">Support</div></div>
                </div>
              </div>
              <div className="bg-gray-50 rounded-xl flex items-center justify-center">
                <p className="text-xs text-gray-400">Visuel 3D / Photo</p>
              </div>
            </div>
          </div>
        </Section>

        {/* ===== 07 COMPOSANTS ===== */}
        <Section id="components" title="Composants UI" subtitle="07 — Système de design" pageBreak>
          {/* Buttons */}
          <h3 className="text-sm font-bold text-gray-700 mb-4">Boutons</h3>
          <div className="flex flex-wrap gap-4 mb-4">
            <button className="bg-[#00C853] hover:bg-[#00a844] text-white font-semibold px-6 py-3 rounded-xl transition-colors">
              Bouton Primaire
            </button>
            <button className="bg-gray-900 hover:bg-gray-800 text-white font-semibold px-6 py-3 rounded-xl transition-colors">
              Bouton Sombre
            </button>
            <button className="border-2 border-gray-200 text-gray-700 hover:bg-gray-50 font-semibold px-6 py-3 rounded-xl transition-colors">
              Bouton Outline
            </button>
            <button className="bg-[#00C853]/10 text-[#00C853] hover:bg-[#00C853]/20 font-semibold px-6 py-3 rounded-xl transition-colors">
              Bouton Ghost Green
            </button>
          </div>
          <div className="bg-gray-50 rounded-lg p-4 mb-10">
            <p className="text-xs text-gray-500"><span className="font-bold text-gray-700">Specs :</span> rounded-xl (12px), px-6 py-3, font-semibold. Le bouton primaire utilise le <span className="font-mono">gradient-targo</span> avec effet <span className="font-mono">glow-targo</span> sur les héros.</p>
          </div>

          {/* Cards */}
          <h3 className="text-sm font-bold text-gray-700 mb-4">Cartes</h3>
          <div className="grid md:grid-cols-3 gap-4 mb-10">
            <div className="border border-gray-200 rounded-xl p-5 bg-gray-50/50 hover:shadow-md transition-shadow">
              <div className="flex items-start gap-3 mb-2">
                <XCircle className="w-5 h-5 text-red-500 shrink-0 mt-0.5" />
                <p className="text-sm font-semibold text-red-700">Votre film coupe en plein suspense?</p>
              </div>
              <div className="flex items-start gap-3">
                <CheckCircle2 className="w-5 h-5 text-[#00C853] shrink-0 mt-0.5" />
                <p className="text-sm text-gray-700">Fibre optique jusqu'à 3.5 Gbit/s</p>
              </div>
              <p className="text-[10px] text-gray-400 mt-3 font-mono">Pain → Solution Card</p>
            </div>
            <div className="bg-gradient-to-r from-[#00C853]/10 to-[#00C853]/5 rounded-xl p-5 border border-[#00C853]/20">
              <p className="text-sm font-bold text-gray-900 mb-1">CTA Card</p>
              <p className="text-xs text-gray-600">Installation gratuite • Aucun contrat</p>
              <div className="flex items-center gap-1 text-[#00C853] font-bold text-sm mt-2">
                1-855-888-2746 <ArrowRight className="w-4 h-4" />
              </div>
              <p className="text-[10px] text-gray-400 mt-3 font-mono">CTA Highlight Card</p>
            </div>
            <div className="bg-gray-900 rounded-xl p-5 text-white">
              <p className="text-sm font-bold mb-1">Stats Card</p>
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <p className="text-xl font-black text-[#00C853]">200+</p>
                  <p className="text-[10px] text-gray-400">entreprises migrées</p>
                </div>
                <div>
                  <p className="text-xl font-black text-[#00C853]">99.999%</p>
                  <p className="text-[10px] text-gray-400">disponibilité</p>
                </div>
              </div>
              <p className="text-[10px] text-gray-500 mt-3 font-mono">Dark Stats Card</p>
            </div>
          </div>

          {/* Glass card */}
          <h3 className="text-sm font-bold text-gray-700 mb-4">Glassmorphism</h3>
          <div className="bg-gray-900 rounded-xl p-8 mb-10">
            <div className="grid md:grid-cols-2 gap-4">
              <div className="bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl p-6 shadow-xl">
                <div className="flex items-center gap-3 mb-2">
                  <div className="w-10 h-10 rounded-xl bg-[#00C853]/20 flex items-center justify-center">
                    <Zap className="w-5 h-5 text-[#00C853]" />
                  </div>
                  <div>
                    <p className="text-[10px] uppercase font-bold text-gray-400 tracking-wider">Vitesse</p>
                    <p className="font-display font-black text-white">Gigabit+</p>
                  </div>
                </div>
                <p className="text-[10px] text-gray-500 font-mono mt-3">glass-card: bg-white/5 backdrop-blur-md border-white/10</p>
              </div>
              <div className="bg-white/70 backdrop-blur-md border border-white/20 rounded-2xl p-6 shadow-xl">
                <div className="flex items-center gap-3 mb-2">
                  <div className="w-10 h-10 rounded-xl bg-[#00C853]/20 flex items-center justify-center">
                    <Shield className="w-5 h-5 text-[#00C853]" />
                  </div>
                  <div>
                    <p className="text-[10px] uppercase font-bold text-gray-500 tracking-wider">Réseau</p>
                    <p className="font-display font-black text-gray-900">Sécurisé</p>
                  </div>
                </div>
                <p className="text-[10px] text-gray-400 font-mono mt-3">glass-card light: bg-white/70 backdrop-blur-md</p>
              </div>
            </div>
          </div>

          {/* Section headers */}
          <h3 className="text-sm font-bold text-gray-700 mb-4">En-têtes de section</h3>
          <div className="space-y-4 mb-10">
            <div className="bg-gray-50 rounded-lg p-4">
              <p className="text-[10px] font-bold uppercase tracking-[0.2em] text-[#00C853] mb-1">Sous-titre numéroté</p>
              <p className="text-2xl font-bold text-gray-900 font-display">Titre de section</p>
              <p className="text-[10px] text-gray-400 font-mono mt-2">Pattern: pill uppercase tracking-wider + h2 display bold</p>
            </div>
          </div>

          {/* Service grid mini */}
          <h3 className="text-sm font-bold text-gray-700 mb-4">Grille de services (compact)</h3>
          <div className="grid grid-cols-4 gap-2 max-w-lg">
            {[
              { icon: Wifi, name: "Internet" },
              { icon: Phone, name: "Téléphonie" },
              { icon: Shield, name: "Sécurité" },
              { icon: Cloud, name: "Cloud" },
            ].map((svc, i) => (
              <div key={i} className="flex items-center gap-1.5 text-xs text-gray-600 bg-gray-50 rounded px-2 py-1.5">
                <svc.icon className="w-3.5 h-3.5 text-[#00C853]" />
                <span>{svc.name}</span>
              </div>
            ))}
          </div>
        </Section>

        {/* ===== 08 ANIMATIONS ===== */}
        <Section id="animations" title="Animations & Motion" subtitle="08 — Mouvement" pageBreak>
          <p className="text-sm text-gray-500 mb-8">Bibliothèque : <span className="font-mono text-gray-700">framer-motion</span>. Les animations renforcent la perception de qualité sans gêner la navigation.</p>
          
          <div className="grid md:grid-cols-2 gap-8 mb-10">
            <div>
              <h3 className="text-sm font-bold text-gray-700 mb-4">Animations d'entrée</h3>
              <div className="space-y-3">
                {[
                  { name: "Slide Up", code: "translateY(20px) → 0, opacity 0→1", timing: "0.8s cubic-bezier(0.16, 1, 0.3, 1)", usage: "Sections au scroll" },
                  { name: "Fade In", code: "opacity 0→1", timing: "0.5s ease-out", usage: "Éléments secondaires" },
                  { name: "Scale In", code: "scale(0.9) → 1, opacity 0→1", timing: "1s ease", usage: "Visuels héro" },
                  { name: "Stagger", code: "delay: index × 0.05s", timing: "Séquentiel", usage: "Listes, grilles, menus" },
                ].map((anim, i) => (
                  <div key={i} className="bg-gray-50 rounded-lg p-4">
                    <div className="flex items-center justify-between mb-1">
                      <p className="text-sm font-bold text-gray-900">{anim.name}</p>
                      <span className="text-[10px] font-mono text-[#00C853] bg-[#00C853]/10 px-2 py-0.5 rounded">{anim.timing}</span>
                    </div>
                    <p className="text-xs text-gray-500 font-mono">{anim.code}</p>
                    <p className="text-[10px] text-gray-400 mt-1">{anim.usage}</p>
                  </div>
                ))}
              </div>
            </div>
            <div>
              <h3 className="text-sm font-bold text-gray-700 mb-4">Animations continues</h3>
              <div className="space-y-3">
                {[
                  { name: "Pulse Glow", code: "opacity 0.5↔1, scale 1↔1.05", timing: "3s ease-in-out infinite", usage: "Indicateurs live (point vert)" },
                  { name: "Float Y", code: "y: 0 → -10 → 0", timing: "4-6s ease-in-out infinite", usage: "Cartes glass flottantes héro" },
                  { name: "Gradient Shift", code: "background-position 0% ↔ 100%", timing: "8s ease infinite", usage: "Boutons gradient-targo" },
                ].map((anim, i) => (
                  <div key={i} className="bg-gray-50 rounded-lg p-4">
                    <div className="flex items-center justify-between mb-1">
                      <p className="text-sm font-bold text-gray-900">{anim.name}</p>
                      <span className="text-[10px] font-mono text-[#00C853] bg-[#00C853]/10 px-2 py-0.5 rounded">{anim.timing}</span>
                    </div>
                    <p className="text-xs text-gray-500 font-mono">{anim.code}</p>
                    <p className="text-[10px] text-gray-400 mt-1">{anim.usage}</p>
                  </div>
                ))}
              </div>

              <h3 className="text-sm font-bold text-gray-700 mb-4 mt-8">Effets au survol</h3>
              <div className="space-y-3">
                {[
                  { name: "Glow", code: "box-shadow 30px → 50px green/0.4", usage: "Boutons CTA principaux" },
                  { name: "Scale Up", code: "scale(1.02)", usage: "Cartes de service" },
                  { name: "Color Shift", code: "text-gray → text-targo-green", usage: "Liens navigation" },
                ].map((anim, i) => (
                  <div key={i} className="bg-gray-50 rounded-lg p-4">
                    <p className="text-sm font-bold text-gray-900 mb-1">{anim.name}</p>
                    <p className="text-xs text-gray-500 font-mono">{anim.code}</p>
                    <p className="text-[10px] text-gray-400 mt-1">{anim.usage}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <div className="bg-amber-50 border border-amber-200 rounded-xl p-6">
            <div className="flex items-start gap-3">
              <AlertTriangle className="w-5 h-5 text-amber-500 shrink-0 mt-0.5" />
              <div>
                <p className="text-sm font-bold text-gray-900 mb-1">Principe</p>
                <p className="text-xs text-gray-600">Utiliser <span className="font-mono font-bold">viewport: {'{ once: true }'}</span> pour les animations au scroll (ne se joue qu'une fois). Les animations continues sont réservées au héro et aux indicateurs d'état.</p>
              </div>
            </div>
          </div>
        </Section>

        {/* ===== 09 TON & VOIX ===== */}
        <Section id="tone" title="Ton & Voix" subtitle="09 — Communication" pageBreak>
          <div className="grid md:grid-cols-2 gap-10 mb-10">
            <div>
              <h3 className="text-sm font-bold text-[#00C853] mb-3">✅ On dit</h3>
              <ul className="space-y-3">
                {[
                  "« Reconnaissez-vous ces situations? »",
                  "« Pourquoi des milliers de foyers ont changé de fournisseur? »",
                  "« 200+ entreprises ont quitté leur fournisseur pour TARGO »",
                  "« Services de confiance, tout-en-un, près de chez vous »",
                  "« Support 7j/7 »",
                  "« Prêt à changer? »",
                  "« Immeubles, RPA & Hôtels » (pas « Multilogement »)",
                  "« Réseaux publics » (pas « Services gérés »)",
                ].map((text, i) => (
                  <li key={i} className="flex items-start gap-2 text-sm text-gray-700">
                    <CheckCircle2 className="w-4 h-4 text-[#00C853] shrink-0 mt-0.5" />
                    {text}
                  </li>
                ))}
              </ul>
            </div>
            <div>
              <h3 className="text-sm font-bold text-red-500 mb-3">❌ On ne dit pas</h3>
              <ul className="space-y-3">
                {[
                  "Jargon technique sans explication",
                  "Promesses vagues sans chiffres",
                  "Ton corporate froid et distant",
                  "Dénigrement direct des concurrents",
                  "« 24/7 » — on utilise « 7j/7 »",
                  "« Multilogement » → « Immeubles, RPA & Hôtels »",
                  "« Services gérés » → « Réseaux publics »",
                  "Le mot « local » (utiliser « régional »)",
                ].map((text, i) => (
                  <li key={i} className="flex items-start gap-2 text-sm text-gray-500">
                    <XCircle className="w-4 h-4 text-red-400 shrink-0 mt-0.5" />
                    {text}
                  </li>
                ))}
              </ul>
            </div>
          </div>
          <div className="bg-gray-50 rounded-xl p-6 mb-10">
            <p className="text-xs font-bold text-gray-700 mb-3">Principes de communication</p>
            <div className="grid md:grid-cols-3 gap-6">
              <div>
                <p className="text-sm font-bold text-gray-900 mb-1">Empathique</p>
                <p className="text-xs text-gray-500">On comprend les frustrations du client. On pose la question avant de proposer la solution.</p>
              </div>
              <div>
                <p className="text-sm font-bold text-gray-900 mb-1">Comparatif</p>
                <p className="text-xs text-gray-500">On utilise la preuve sociale (200+ entreprises) et les chiffres concrets (99.999% SLA).</p>
              </div>
              <div>
                <p className="text-sm font-bold text-gray-900 mb-1">Régional</p>
                <p className="text-xs text-gray-500">On met en avant notre ancrage régional, nos 20 ans d'expertise et notre équipe locale.</p>
              </div>
            </div>
          </div>

          <h3 className="text-sm font-bold text-gray-700 mb-4">Slogan officiel</h3>
          <div className="bg-gray-950 rounded-xl p-8 text-center">
            <p className="text-2xl font-display font-bold text-white mb-2">Services de confiance, tout-en-un, près de chez vous<span className="text-[#00C853]">.</span></p>
            <p className="text-xs text-gray-500 font-mono">Slogan principal — toujours avec le point vert</p>
          </div>
        </Section>

        {/* ===== 10 PRINT ===== */}
        <Section id="print" title="Documents imprimés" subtitle="10 — Print & Physique" pageBreak>
          <p className="text-sm text-gray-500 mb-8 max-w-2xl">Les documents imprimés (catalogues, lettres, contrats) suivent les mêmes principes de marque mais avec des adaptations pour le support physique.</p>
          
          <div className="grid md:grid-cols-2 gap-8 mb-10">
            <div>
              <h3 className="text-sm font-bold text-gray-700 mb-4">Adaptations print</h3>
              <div className="space-y-3">
                {[
                  { label: "Polices", value: "Arial / Helvetica", desc: "Compatibilité universelle" },
                  { label: "Format", value: "US Letter (8.5×11)", desc: "Standard nord-américain" },
                  { label: "Marges", value: "0.5 pouce", desc: "Minimum pour impression" },
                  { label: "Couleurs", value: "CMJN", desc: "Convertir #00C853 en C85 M0 J60 K0" },
                ].map((item, i) => (
                  <div key={i} className="bg-gray-50 rounded-lg p-4 flex items-start justify-between">
                    <div>
                      <p className="text-sm font-bold text-gray-900">{item.label}</p>
                      <p className="text-xs text-gray-500 mt-1">{item.desc}</p>
                    </div>
                    <span className="text-xs font-mono text-[#00C853] bg-[#00C853]/10 px-2 py-1 rounded shrink-0">{item.value}</span>
                  </div>
                ))}
              </div>
            </div>
            <div>
              <h3 className="text-sm font-bold text-gray-700 mb-4">Types de documents</h3>
              <div className="space-y-3">
                {[
                  { name: "Catalogue dynamique", desc: "Format narratif Pain → Solution. 2+ pages, structure séquentielle." },
                  { name: "Lettre publicitaire", desc: "1 page, structure en-tête + corps + CTA. Logo en haut, barre verte." },
                  { name: "Contrat BLB", desc: "Document formel. En-tête sobre, tableaux structurés, signature." },
                  { name: "Publicité print", desc: "Format condensé. Visuel fort + texte minimal + numéro." },
                ].map((item, i) => (
                  <div key={i} className="bg-gray-50 rounded-lg p-4">
                    <p className="text-sm font-bold text-gray-900">{item.name}</p>
                    <p className="text-xs text-gray-500 mt-1">{item.desc}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <div className="bg-gray-50 rounded-xl p-6">
            <p className="text-xs font-bold text-gray-700 mb-3">Éléments communs à tous les documents</p>
            <div className="grid md:grid-cols-4 gap-4">
              {[
                { label: "Logo", desc: "En haut à gauche, hauteur ~1cm" },
                { label: "Coordonnées", desc: "Pied de page : tél, courriel, site" },
                { label: "Barre verte", desc: "Séparateur horizontal #00C853" },
                { label: "Slogan", desc: "En pied : « Services de confiance... »" },
              ].map((item, i) => (
                <div key={i} className="flex items-start gap-2">
                  <CheckCircle2 className="w-4 h-4 text-[#00C853] shrink-0 mt-0.5" />
                  <div>
                    <p className="text-xs font-bold text-gray-900">{item.label}</p>
                    <p className="text-[10px] text-gray-500">{item.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </Section>

        {/* ===== 11 CONTACT ===== */}
        <Section id="contact" title="Coordonnées officielles" subtitle="11 — Contact">
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-10">
            <div className="bg-gray-50 rounded-xl p-6 flex items-start gap-4">
              <Phone className="w-5 h-5 text-[#00C853] shrink-0" />
              <div>
                <p className="text-sm font-bold text-gray-900">Téléphone</p>
                <p className="text-sm text-gray-600">514-448-0773</p>
                <p className="text-xs text-gray-600 mt-1">1-855-888-2746</p>
              </div>
            </div>
            <div className="bg-gray-50 rounded-xl p-6 flex items-start gap-4">
              <Mail className="w-5 h-5 text-[#00C853] shrink-0" />
              <div>
                <p className="text-sm font-bold text-gray-900">Courriel</p>
                <p className="text-sm text-gray-600">support@targo.ca</p>
              </div>
            </div>
            <div className="bg-gray-50 rounded-xl p-6 flex items-start gap-4">
              <Globe className="w-5 h-5 text-[#00C853] shrink-0" />
              <div>
                <p className="text-sm font-bold text-gray-900">Site web</p>
                <p className="text-sm text-gray-600">www.targo.ca</p>
              </div>
            </div>
            <div className="bg-gray-50 rounded-xl p-6 flex items-start gap-4">
              <MapPin className="w-5 h-5 text-[#00C853] shrink-0" />
              <div>
                <p className="text-sm font-bold text-gray-900">Adresse</p>
                <p className="text-sm text-gray-600">1867 ch. de la rivière</p>
                <p className="text-xs text-gray-500">Ste-Clotilde, Québec</p>
              </div>
            </div>
          </div>

          <div className="bg-gray-950 rounded-xl p-8 text-center">
            <img src={targoLogoWhite} alt="TARGO" className="h-8 mx-auto mb-3" />
            <p className="text-sm text-gray-400">TARGO Communications — La puissance de la fibre locale.</p>
          </div>
        </Section>
      </main>

      {/* Footer */}
      <footer className="bg-gray-950 text-white py-12 mt-16 print:bg-white print:text-black print:py-8 print:mt-4 print:border-t-2 print:border-[#00C853]">
        <div className="max-w-6xl mx-auto px-6 text-center">
          <img src={targoLogoGreen} alt="TARGO" className="h-8 mx-auto mb-4 hidden print:block" />
          <img src={targoLogoWhite} alt="TARGO" className="h-8 mx-auto mb-4 print:hidden" />
          <p className="text-sm text-gray-400 print:text-gray-600">Guide de marque TARGO — Document confidentiel</p>
          <p className="text-xs text-gray-600 mt-2">© 2026 TARGO Communications. Tous droits réservés.</p>
        </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;
            font-size: 11px;
          }
          nav { display: none !important; }
          .print-page-break {
            page-break-before: always;
          }
          section {
            page-break-inside: avoid;
            break-inside: avoid;
          }
          .grid {
            page-break-inside: avoid;
            break-inside: avoid;
          }
          img {
            max-width: 100% !important;
            height: auto !important;
            page-break-inside: avoid;
            break-inside: avoid;
          }
          header {
            page-break-after: always;
          }
          h2, h3 {
            page-break-after: avoid;
          }
          .rounded-2xl, .rounded-xl {
            border-radius: 8px !important;
          }
        }
      `}</style>
    </div>
  );
};

export default BrandGuidelines;
