// ============================================================================
// geneltec-brochure-page.jsx — Brochure / Documentation page
// ============================================================================
const { useState, useEffect } = React;
const { InnerNav, PageHero, Footer, ContactCTA, SectionTag, FileText, ArrowUpRight, Zap } = window;

const Download = (p) => (
  <window.Icon {...p}>
    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
    <polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/>
  </window.Icon>
);
const BookOpen = (p) => (
  <window.Icon {...p}>
    <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/>
    <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
  </window.Icon>
);
const BarChart = (p) => (
  <window.Icon {...p}>
    <line x1="12" x2="12" y1="20" y2="10"/><line x1="18" x2="18" y1="20" y2="4"/>
    <line x1="6" x2="6" y1="20" y2="16"/>
  </window.Icon>
);
const Package = (p) => (
  <window.Icon {...p}>
    <path d="m7.5 4.27 9 5.15"/><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/>
    <path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/>
  </window.Icon>
);

const DOCS = [
  {
    type: "Brochure",
    title: "Plaquette commerciale Geneltec",
    desc: "Présentation complète de l'entreprise, de nos domaines d'intervention, de nos références et de notre démarche qualité.",
    pages: "12 pages",
    format: "PDF · 4.2 Mo",
    Icon: BookOpen,
    color: "#1AB6E0",
    available: false,
  },
  {
    type: "Fiche technique",
    title: "Électricité résidentielle — Guide des bonnes pratiques",
    desc: "Tableau des sections de câbles, protections différentielles, conformité NF C 15-100. Idéal pour la préparation d'un projet.",
    pages: "6 pages",
    format: "PDF · 1.8 Mo",
    Icon: FileText,
    color: "#8B5CF6",
    available: false,
  },
  {
    type: "Fiche technique",
    title: "Domotique : filaire vs sans fil — Comparatif",
    desc: "Tableau comparatif KNX / Zigbee / Z-Wave / Matter. Cas d'usage, coûts, compatibilité et recommandations selon le type de projet.",
    pages: "4 pages",
    format: "PDF · 1.2 Mo",
    Icon: Zap,
    color: "#8B5CF6",
    available: false,
  },
  {
    type: "Catalogue",
    title: "Solutions solaires photovoltaïques 2025",
    desc: "Gamme de panneaux, onduleurs et batteries disponibles. Tableaux de rendement par région, exemples d'installations et ROI estimé.",
    pages: "20 pages",
    format: "PDF · 8.5 Mo",
    Icon: BarChart,
    color: "#F59E0B",
    available: false,
  },
  {
    type: "Catalogue",
    title: "Catalogue matériel & équipements",
    desc: "Sélection des marques référencées : Legrand, Schneider, Hager, Hikvision, SolarEdge. Tarifs indicatifs hors pose.",
    pages: "32 pages",
    format: "PDF · 12 Mo",
    Icon: Package,
    color: "#10B981",
    available: false,
  },
  {
    type: "Guide",
    title: "Maintenance électrique — Ce qu'il faut vérifier",
    desc: "Checklist annuelle pour entretien préventif : tableau électrique, disjoncteurs, prises, câbles et appareils de protection différentielle.",
    pages: "3 pages",
    format: "PDF · 0.9 Mo",
    Icon: FileText,
    color: "#EF4444",
    available: false,
  },
];

const TYPE_COLORS = {
  "Brochure": "#1AB6E0",
  "Fiche technique": "#8B5CF6",
  "Catalogue": "#10B981",
  "Guide": "#EF4444",
};

function DocCard({ doc, index }) {
  return (
    <div className="gl-fade-up rounded-[1.25rem] p-6 flex flex-col gap-4 transition-all hover:-translate-y-0.5" style={{ animationDelay: index * 70 + "ms", background: "var(--neutral-50)", border: "1px solid var(--border)" }}>
      <div className="flex items-start justify-between gap-3">
        <div className="w-12 h-12 rounded-xl flex items-center justify-center shrink-0" style={{ background: doc.color + "15" }}>
          <doc.Icon className="w-6 h-6" style={{ color: doc.color }} strokeWidth={1.75} />
        </div>
        <span className="px-2.5 py-1 rounded-full text-[10px] font-mono font-semibold uppercase tracking-wider shrink-0" style={{ background: (TYPE_COLORS[doc.type] || "#1AB6E0") + "15", color: TYPE_COLORS[doc.type] || "#1AB6E0" }}>
          {doc.type}
        </span>
      </div>

      <div className="flex-1">
        <h3 className="text-[1rem] font-semibold leading-snug mb-2" style={{ color: "var(--ink-900)" }}>{doc.title}</h3>
        <p className="text-[13px] leading-relaxed" style={{ color: "var(--neutral-500)" }}>{doc.desc}</p>
      </div>

      <div className="flex items-center justify-between pt-3" style={{ borderTop: "1px solid var(--border)" }}>
        <span className="text-[11px] font-mono" style={{ color: "var(--neutral-400)" }}>{doc.pages} · {doc.format}</span>
        {doc.available ? (
          <a
            href={doc.href}
            download
            className="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[12px] font-semibold transition-all"
            style={{ background: doc.color, color: "#fff" }}
          >
            <Download className="w-3.5 h-3.5" strokeWidth={2.5} />
            Télécharger
          </a>
        ) : (
          <button
            onClick={() => {
              const subject = encodeURIComponent("Demande de documentation — " + doc.title);
              window.location.href = "contact.html?doc=" + encodeURIComponent(doc.title);
            }}
            className="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[12px] font-medium transition-all"
            style={{ background: "rgba(255,255,255,0.07)", color: "rgba(255,255,255,0.65)", border: "1px solid rgba(255,255,255,0.1)" }}
          >
            Demander
          </button>
        )}
      </div>
    </div>
  );
}

function App() {
  useEffect(() => {
    const obs = new IntersectionObserver(
      (entries) => entries.forEach((e) => { if (e.isIntersecting) e.target.classList.add("is-in"); }),
      { threshold: 0.1, rootMargin: "0px 0px -60px 0px" }
    );
    document.querySelectorAll(".gl-fade-up").forEach((el) => obs.observe(el));
    return () => obs.disconnect();
  }, []);

  return (
    <div className="min-h-screen flex flex-col" style={{ background: "#f0f0f0" }}>
      <InnerNav />

      {/* Hero: split — text left, stacked doc cards right */}
      <div className="relative overflow-hidden" style={{ background: "var(--ink-900)" }}>
        <div className="absolute inset-0 pointer-events-none opacity-[0.05]" style={{ backgroundImage: "linear-gradient(rgba(255,255,255,0.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.5) 1px,transparent 1px)", backgroundSize: "64px 64px" }} />
        <div className="relative max-w-[1440px] mx-auto px-5 md:px-8 lg:px-12 py-16">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-10 items-center">
            <div>
              <div className="inline-flex items-center gap-2 mb-5">
                <span className="w-6 h-px" style={{ background: "var(--brand-400)" }} />
                <span style={{ color: "var(--brand-400)", fontSize: 11, fontFamily: "monospace", textTransform: "uppercase", letterSpacing: "0.20em", fontWeight: 600 }}>Documentation</span>
              </div>
              <h1 className="font-semibold text-white" style={{ fontSize: "clamp(2.2rem,4.5vw,4rem)", letterSpacing: "-0.03em", lineHeight: 1 }}>
                Ressources<br /><span style={{ color: "var(--brand-400)", fontStyle: "italic", fontWeight: 500 }}>à télécharger</span>
              </h1>
              <p style={{ color: "rgba(255,255,255,0.55)", fontSize: 15, lineHeight: 1.65, marginTop: 16, maxWidth: 400 }}>
                Brochures, fiches techniques, catalogues et guides pratiques pour préparer votre projet électrique ou domotique.
              </p>
              <div className="flex flex-wrap items-center gap-3 mt-8">
                {["6 documents","PDF · Sur demande","Réponse 24h"].map((t, i) => (
                  <React.Fragment key={t}>
                    {i > 0 && <span className="w-1 h-1 rounded-full" style={{ background: "rgba(255,255,255,0.2)" }} />}
                    <span style={{ color: "rgba(255,255,255,0.35)", fontSize: 12, fontFamily: "monospace" }}>{t}</span>
                  </React.Fragment>
                ))}
              </div>
            </div>
            {/* Stacked document cards */}
            <div className="hidden md:flex items-center justify-center relative" style={{ height: 200 }}>
              {[
                { label: "Brochure commerciale", color: "#1AB6E0", rotation: -10 },
                { label: "Catalogue solaire",    color: "#F59E0B", rotation: -3 },
                { label: "Guide domotique",      color: "#8B5CF6", rotation: 4 },
                { label: "Fiche technique",      color: "#10B981", rotation: 11 },
              ].map((d, i) => (
                <div key={d.label} className="absolute flex items-center gap-3 px-5 py-4 rounded-[1rem]" style={{ background: "rgba(255,255,255,0.04)", border: "1px solid " + d.color + "35", transform: `rotate(${d.rotation}deg) translateX(${(i - 1.5) * 18}px)`, zIndex: i, backdropFilter: "blur(8px)" }}>
                  <div className="w-8 h-8 rounded-lg flex items-center justify-center shrink-0" style={{ background: d.color + "22" }}>
                    <FileText className="w-4 h-4" style={{ color: d.color }} strokeWidth={1.75} />
                  </div>
                  <span style={{ fontSize: 12, fontWeight: 500, color: "#fff", whiteSpace: "nowrap" }}>{d.label}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Light card: doc grid */}
      <section className="px-3 md:px-5 mt-3 mb-3">
        <div className="rounded-[1.5rem] md:rounded-[2.4rem] p-6 md:p-10" style={{ background: "#fff" }}>
          <div className="mb-6 gl-fade-up rounded-[1rem] px-4 py-3 flex items-center gap-3" style={{ background: "var(--brand-50)", border: "1px solid var(--brand-100)" }}>
            <div className="w-2 h-2 rounded-full shrink-0" style={{ background: "var(--brand-500)" }} />
            <p style={{ fontSize: 13, color: "var(--brand-700)" }}>
              Les documents sont disponibles sur demande. Cliquez sur "Demander" pour recevoir le fichier par email sous 24h.
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {DOCS.map((doc, i) => <DocCard key={doc.title} doc={doc} index={i} />)}
          </div>
        </div>
      </section>

      {/* Dark card: custom doc request */}
      <section className="px-3 md:px-5 mb-3 gl-fade-up">
        <div className="rounded-[1.5rem] md:rounded-[2.4rem] p-8 md:p-12 flex flex-col md:flex-row items-center justify-between gap-6 relative overflow-hidden" style={{ background: "var(--ink-900)" }}>
          <div className="absolute pointer-events-none" style={{ right: "-10%", top: "-50%", width: "50%", height: "200%", background: "radial-gradient(closest-side,rgba(26,182,224,0.2),transparent 70%)", filter: "blur(20px)" }} />
          <div className="relative">
            <h3 style={{ fontSize: "clamp(1.1rem,2vw,1.4rem)", fontWeight: 600, color: "#fff", marginBottom: 4 }}>Vous cherchez un document spécifique ?</h3>
            <p style={{ fontSize: 13, color: "rgba(255,255,255,0.5)" }}>Fiche produit, normes NF, certificats de conformité — contactez-nous.</p>
          </div>
          <a href="contact.html" className="gl-cta relative shrink-0 inline-flex items-center gap-2 rounded-full px-5 py-3">
            <span style={{ fontSize: 13, fontWeight: 600 }}>Nous contacter</span>
            <ArrowUpRight className="w-4 h-4 text-white" strokeWidth={2} />
          </a>
        </div>
      </section>

      <Footer />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);