// ============================================================================
// Geneltec — full-page sections
// ============================================================================
const { motion, Icon, ChevronRight, ArrowUpRight, Zap, Phone, Play, X } = window;
const { useState, useEffect, useRef, useMemo } = React;

// ----------------------------------------------------------------------------
// Extra icons
// ----------------------------------------------------------------------------
const Check = (p) => (
  <Icon {...p}><polyline points="20 6 9 17 4 12" /></Icon>
);
const Sun = (p) => (
  <Icon {...p}>
    <circle cx="12" cy="12" r="4" />
    <path d="M12 2v2" /><path d="M12 20v2" />
    <path d="m4.93 4.93 1.41 1.41" /><path d="m17.66 17.66 1.41 1.41" />
    <path d="M2 12h2" /><path d="M20 12h2" />
    <path d="m4.93 19.07 1.41-1.41" /><path d="m17.66 6.34 1.41-1.41" />
  </Icon>
);
const Wifi = (p) => (
  <Icon {...p}>
    <path d="M5 13a10 10 0 0 1 14 0" />
    <path d="M8.5 16.5a5 5 0 0 1 7 0" />
    <path d="M2 8.82a15 15 0 0 1 20 0" />
    <line x1="12" x2="12.01" y1="20" y2="20" />
  </Icon>
);
const Camera = (p) => (
  <Icon {...p}>
    <path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z" />
    <circle cx="12" cy="13" r="3" />
  </Icon>
);
const Cpu = (p) => (
  <Icon {...p}>
    <rect width="16" height="16" x="4" y="4" rx="2" />
    <rect width="6" height="6" x="9" y="9" />
    <path d="M15 2v2" /><path d="M15 20v2" />
    <path d="M2 15h2" /><path d="M2 9h2" />
    <path d="M20 15h2" /><path d="M20 9h2" />
    <path d="M9 2v2" /><path d="M9 20v2" />
  </Icon>
);
const Factory = (p) => (
  <Icon {...p}>
    <path d="M2 20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8l-7 5V8l-7 5V4a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z" />
    <path d="M17 18h1" /><path d="M12 18h1" /><path d="M7 18h1" />
  </Icon>
);
const Home = (p) => (
  <Icon {...p}>
    <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
    <polyline points="9 22 9 12 15 12 15 22" />
  </Icon>
);
const Building = (p) => (
  <Icon {...p}>
    <rect width="16" height="20" x="4" y="2" rx="2" />
    <path d="M9 22v-4h6v4" />
    <path d="M8 6h.01" /><path d="M16 6h.01" />
    <path d="M12 6h.01" /><path d="M12 10h.01" />
    <path d="M12 14h.01" /><path d="M16 10h.01" />
    <path d="M16 14h.01" /><path d="M8 10h.01" />
    <path d="M8 14h.01" />
  </Icon>
);
const Mail = (p) => (
  <Icon {...p}>
    <rect width="20" height="16" x="2" y="4" rx="2" />
    <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
  </Icon>
);
const MapPin = (p) => (
  <Icon {...p}>
    <path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" />
    <circle cx="12" cy="10" r="3" />
  </Icon>
);
const Globe = (p) => (
  <Icon {...p}>
    <circle cx="12" cy="12" r="10" />
    <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
    <path d="M2 12h20" />
  </Icon>
);
const Shield = (p) => (
  <Icon {...p}>
    <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" />
  </Icon>
);
const Sparkles = (p) => (
  <Icon {...p}>
    <path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" />
    <path d="M20 3v4" /><path d="M22 5h-4" />
    <path d="M4 17v2" /><path d="M5 18H3" />
  </Icon>
);
const Wrench = (p) => (
  <Icon {...p}>
    <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
  </Icon>
);

// ----------------------------------------------------------------------------
// Reusable layout
// ----------------------------------------------------------------------------

function Card({ children, dark, brand, className = "", ...rest }) {
  const bg = dark
    ? { background: "var(--ink-900)", color: "#fff" }
    : brand
    ? { background: "linear-gradient(135deg, #E2F6FC 0%, #F4FBFD 60%, #FFFFFF 100%)" }
    : { background: "#fff" };
  return (
    <section className="px-3 md:px-5 mb-3 md:mb-5" {...rest}>
      <div
        className={
          "relative rounded-[1.5rem] md:rounded-[2.4rem] overflow-hidden " +
          className
        }
        style={bg}
      >
        {children}
      </div>
    </section>
  );
}

function SectionHeader({ eyebrow, title, lead, center, alignEnd, dark }) {
  const eyClass =
    "text-[11px] md:text-[12px] font-semibold uppercase tracking-[0.18em] " +
    (dark ? "text-[var(--brand-400)]" : "text-[var(--brand-600)]");
  const titleClass =
    "font-semibold leading-[1.05] mt-3 mb-4 " +
    (dark ? "text-white" : "text-[var(--ink-900)]");
  const leadClass = dark
    ? "text-white/70 leading-relaxed"
    : "text-[var(--neutral-600)] leading-relaxed";
  return (
    <div
      className={
        (center ? "text-center mx-auto " : "") +
        (alignEnd ? "flex flex-col items-end " : "") +
        "max-w-[640px]"
      }
    >
      <div className="inline-flex items-center gap-2">
        <span className="w-6 h-px bg-current opacity-50 inline-block" style={{ color: dark ? "var(--brand-400)" : "var(--brand-600)" }} />
        <span className={eyClass}>{eyebrow}</span>
      </div>
      <h2
        className={titleClass}
        style={{
          letterSpacing: "-0.02em",
          fontSize: "clamp(1.75rem, 3.4vw, 3rem)",
        }}
      >
        {title}
      </h2>
      {lead && <p className={leadClass} style={{ fontSize: "clamp(15px, 1.1vw, 17px)" }}>{lead}</p>}
    </div>
  );
}

function SectionTag({ num, label, dark }) {
  return (
    <div
      className={
        "inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-[10px] uppercase tracking-[0.18em] font-mono font-medium " +
        (dark ? "border-white/15 text-white/65 bg-white/5" : "border-[var(--border)] text-[var(--neutral-500)] bg-[var(--neutral-50)]")
      }
      style={{ borderWidth: 1, borderStyle: "solid" }}
    >
      <span style={{ color: dark ? "var(--brand-400)" : "var(--brand-600)" }}>{num}</span>
      <span className="w-1 h-1 rounded-full bg-current opacity-40" />
      {label}
    </div>
  );
}

// ============================================================================
// 01 — Qui sommes-nous
// ============================================================================
function About() {
  return (
    <Card id="about" className="p-6 sm:p-8 md:p-12 lg:p-16 xl:p-20">
      <div className="grid grid-cols-1 lg:grid-cols-[1.05fr_0.95fr] gap-10 md:gap-16 items-center">
        <div className="gl-fade-up max-w-[560px]">
          <SectionTag num="01" label="Qui sommes-nous" />
          <h2
            className="font-semibold text-[var(--ink-900)] mt-5 mb-5"
            style={{ letterSpacing: "-0.02em", lineHeight: 1.05, fontSize: "clamp(1.85rem, 3.6vw, 3.1rem)" }}
          >
            Solutions électriques et technologiques <span className="text-[var(--brand-600)] italic font-medium">intégrées</span>, depuis 2022.
          </h2>
          <p className="text-[var(--neutral-600)] leading-relaxed text-[16px] md:text-[17px]">
            Geneltec est spécialisée dans la conception et la réalisation de solutions électriques et technologiques intégrées pour les projets <strong className="text-[var(--ink-900)] font-semibold">industriels, commerciaux et résidentiels</strong>. Appuyée par une équipe qualifiée, nous accompagnons nos clients de l'étude à la mise en service.
          </p>
          <p className="text-[var(--neutral-600)] leading-relaxed text-[15px] md:text-[16px] mt-4">
            Grâce à une expertise multidisciplinaire et une veille technologique permanente, nous développons des solutions innovantes qui répondent aux exigences de sécurité, d'efficacité énergétique et de confort moderne — dans le respect des normes professionnelles les plus élevées.
          </p>

          <ul className="grid grid-cols-1 gap-3 mt-8">
            {[
              "Études électriques, fourniture, pose et mise en service",
              "Conformité NF C 15-100 · IEC sur chaque chantier",
              "Partenaires premium : Schneider, ABB, Legrand, Siemens",
              "Maintenance préventive et corrective 24/7",
            ].map((t) => (
              <li key={t} className="flex items-start gap-3">
                <span className="inline-flex items-center justify-center w-5 h-5 rounded-full mt-0.5 shrink-0" style={{ background: "var(--brand-100)" }}>
                  <Check className="w-3 h-3" style={{ color: "var(--brand-700)" }} strokeWidth={2.4} />
                </span>
                <span className="text-[15px] text-[var(--ink-900)]">{t}</span>
              </li>
            ))}
          </ul>

          <div className="grid grid-cols-3 gap-4 mt-10 pt-8" style={{ borderTop: "1px solid var(--border)" }}>
            {[
              ["2022", "Fondée"],
              ["+150", "Chantiers"],
              ["24/7", "Maintenance"],
            ].map(([n, l]) => (
              <div key={l}>
                <div className="text-[24px] md:text-[28px] font-semibold text-[var(--ink-900)] leading-none" style={{ letterSpacing: "-0.02em" }}>{n}</div>
                <div className="text-[11px] uppercase tracking-[0.16em] font-medium text-[var(--neutral-500)] mt-1.5 font-mono">{l}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Right: image */}
        <div className="relative aspect-[4/5] rounded-[1.2rem] md:rounded-[1.8rem] overflow-hidden self-stretch min-h-[420px]">
          <img src="project/assets/about.png" alt="Geneltec — équipe et chantier" className="absolute inset-0 w-full h-full object-cover" />
          <div className="absolute inset-0" style={{ background: "linear-gradient(180deg, rgba(11,27,38,0) 50%, rgba(11,27,38,0.55) 100%)" }} />

          <div
            className="absolute bottom-4 md:bottom-6 left-4 md:left-6 right-4 md:right-6 p-4 md:p-5 rounded-[1rem] md:rounded-[1.3rem]"
            style={{
              background: "rgba(255,255,255,0.18)",
              backdropFilter: "blur(18px) saturate(160%)",
              WebkitBackdropFilter: "blur(18px) saturate(160%)",
              border: "1px solid rgba(255,255,255,0.30)",
              boxShadow: "inset 0 1px 0 rgba(255,255,255,0.45), 0 10px 30px rgba(11,27,38,0.20)",
            }}
          >
            <div className="flex items-center gap-3">
              <span
                className="inline-flex items-center justify-center w-10 h-10 rounded-full shrink-0"
                style={{ background: "rgba(255,255,255,0.25)" }}
              >
                <MapPin className="w-4 h-4 text-white" strokeWidth={2} />
              </span>
              <div className="flex flex-col leading-tight">
                <span className="text-[13px] font-semibold text-white">Mohammedia, Maroc</span>
                <span className="text-[11px] font-mono uppercase tracking-[0.14em] text-white/75 mt-0.5">Siège · Interventions partout au Maroc</span>
              </div>
            </div>
          </div>

          <div className="absolute top-4 left-4 md:top-5 md:left-5 inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/15 backdrop-blur-md border border-white/25">
            <span className="w-1.5 h-1.5 rounded-full gl-live-dot" style={{ background: "var(--brand-400)" }} />
            <span className="text-[10px] uppercase tracking-[0.18em] font-semibold text-white">En activité</span>
          </div>
        </div>
      </div>
    </Card>
  );
}

// ============================================================================
// 02 — Services
// ============================================================================
const SERVICES = [
  { Ic: Zap,     t: "Électricité résidentielle", d: "Tableaux, éclairage, courants forts/faibles, mise aux normes NF C 15-100 pour villas et appartements." },
  { Ic: Factory, t: "Électricité industrielle",  d: "BT/HT, armoires de distribution, alimentation process, équipement d'ateliers et de sites de production." },
  { Ic: Sun,     t: "Énergie solaire",           d: "Étude, dimensionnement et installation photovoltaïque, stockage par batterie, bornes de recharge VE." },
  { Ic: Wifi,    t: "Domotique & Smart Home",    d: "Écosystèmes KNX, éclairage scénarisé, audio multi-room, contrôle d'accès, intégration vocale." },
  { Ic: Camera,  t: "Surveillance & Sécurité",   d: "Vidéoprotection IP, contrôle d'accès, alarmes intrusion et incendie, supervision distante." },
  { Ic: Cpu,     t: "Automatisation industrielle", d: "Automates programmables PLC/API, HMI, SCADA, intégration de capteurs et supervision process." },
];

function ServiceCard({ Ic, t, d, idx }) {
  const [hover, setHover] = useState(false);
  const ref = useRef(null);
  const onMouseMove = (e) => {
    const el = ref.current;
    if (!el) return;
    const rect = el.getBoundingClientRect();
    el.style.setProperty("--mx", `${e.clientX - rect.left}px`);
    el.style.setProperty("--my", `${e.clientY - rect.top}px`);
  };
  return (
    <div
      ref={ref}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      onMouseMove={onMouseMove}
      className="gl-fade-up gl-spotlight-card group relative p-6 md:p-7 rounded-[1.1rem] flex flex-col gap-3 cursor-pointer transition-all duration-300 overflow-hidden"
      style={{
        "--fade-delay": `${idx * 60}ms`,
        background: hover ? "linear-gradient(180deg, #fff 0%, var(--brand-50) 100%)" : "var(--neutral-50)",
        border: "1px solid",
        borderColor: hover ? "rgba(26,182,224,0.18)" : "var(--border)",
        boxShadow: hover ? "var(--shadow-lg)" : "var(--shadow-xs)",
        transform: hover ? "translateY(-2px)" : "none",
      }}
    >
      <div
        className="w-12 h-12 rounded-[10px] flex items-center justify-center transition-colors"
        style={{
          background: hover ? "var(--brand-500)" : "var(--brand-100)",
          color: hover ? "#fff" : "var(--brand-700)",
        }}
      >
        <Ic className="w-5 h-5" strokeWidth={1.8} />
      </div>
      <h3 className="text-[19px] md:text-[20px] font-semibold text-[var(--ink-900)] leading-snug">{t}</h3>
      <p className="text-[14px] leading-relaxed text-[var(--neutral-600)] flex-1">{d}</p>
      <div className="flex items-center justify-between mt-3 pt-3" style={{ borderTop: "1px solid var(--border)" }}>
        <span className="text-[10px] uppercase tracking-[0.18em] font-mono font-medium text-[var(--neutral-400)]">
          Service · {String(idx + 1).padStart(2, "0")}
        </span>
        <ChevronRight
          className="w-4 h-4 transition-transform"
          style={{
            color: "var(--brand-600)",
            transform: hover ? "translateX(3px)" : "none",
          }}
          strokeWidth={2}
        />
      </div>
    </div>
  );
}

function Services() {
  return (
    <Card id="services" className="p-6 sm:p-8 md:p-12 lg:p-16 xl:p-20" style={{ background: "var(--neutral-50)" }}>
      <div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-6 mb-10 md:mb-14">
        <div className="gl-fade-up max-w-[640px]">
          <SectionTag num="02" label="Notre approche · Nos services" />
          <h2
            className="font-semibold text-[var(--ink-900)] mt-5"
            style={{ letterSpacing: "-0.02em", lineHeight: 1.05, fontSize: "clamp(1.85rem, 3.6vw, 3.1rem)" }}
          >
            Six spécialités <span className="italic font-medium text-[var(--brand-600)]">intégrées</span>, un seul interlocuteur.
          </h2>
        </div>
        <p className="text-[var(--neutral-600)] leading-relaxed max-w-[420px] text-[15px] md:text-[16px]">
          De l'électricité générale aux solutions intelligentes, nos équipes prennent en charge l'ensemble du projet — étude, fourniture, pose, mise en service et maintenance.
        </p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 md:gap-4">
        {SERVICES.map((s, i) => <ServiceCard key={s.t} {...s} idx={i} />)}
      </div>
    </Card>
  );
}

// ============================================================================
// 03 — Nos Valeurs (dark)
// ============================================================================
const VALUES = [
  { Ic: Shield,   t: "Qualité",     d: "Composants premium uniquement. Schneider, ABB, Legrand, Siemens — jamais de produits no-name sur nos installations." },
  { Ic: Wrench,   t: "Fiabilité",   d: "Performance à long terme. Schémas unifilaires, PV de réception et dossiers techniques livrés systématiquement." },
  { Ic: Sparkles, t: "Innovation",  d: "Veille technologique permanente — domotique KNX, solaire, supervision distante, automatisation moderne." },
  { Ic: Zap,      t: "Expertise",   d: "Équipe multidisciplinaire encadrée par ingénieurs. Conformité NF C 15-100 · IEC sur chaque chantier." },
];

function Values() {
  return (
    <Card dark id="values" className="p-6 sm:p-8 md:p-12 lg:p-16 xl:p-20">
      <div
        className="absolute inset-0 opacity-[0.07] pointer-events-none"
        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",
          maskImage: "radial-gradient(80% 80% at 50% 50%, #000 30%, transparent 90%)",
          WebkitMaskImage: "radial-gradient(80% 80% at 50% 50%, #000 30%, transparent 90%)",
        }}
      />
      <div className="relative">
        <div className="gl-fade-up max-w-[640px]">
          <SectionTag num="03" label="Nos valeurs" dark />
          <h2
            className="font-semibold text-white mt-5 mb-4"
            style={{ letterSpacing: "-0.02em", lineHeight: 1.05, fontSize: "clamp(1.85rem, 3.6vw, 3.1rem)" }}
          >
            Une approche technique, <span className="text-[var(--brand-400)] italic font-medium">jamais commerciale</span>.
          </h2>
          <p className="text-white/65 leading-relaxed text-[15px] md:text-[16px] max-w-[560px]">
            Notre crédibilité repose sur la qualité des installations livrées — pas sur le discours marketing. Voici ce qui nous distingue concrètement.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-4 mt-10 md:mt-14">
          {VALUES.map(({ Ic, t, d }, i) => (
            <div
              key={t}
              className="gl-fade-up relative p-6 md:p-7 rounded-[1.1rem] overflow-hidden group cursor-pointer transition-all"
              style={{
                "--fade-delay": `${i * 70}ms`,
                background: "rgba(255,255,255,0.03)",
                backdropFilter: "blur(8px)",
                WebkitBackdropFilter: "blur(8px)",
              }}
            >
              <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"
                   style={{ background: "linear-gradient(180deg, rgba(26,182,224,0.10) 0%, rgba(26,182,224,0) 70%)" }} />
              <div className="relative flex items-start gap-5">
                <div
                  className="w-12 h-12 rounded-[10px] flex items-center justify-center shrink-0"
                  style={{ background: "rgba(26,182,224,0.14)", color: "var(--brand-400)" }}
                >
                  <Ic className="w-5 h-5" strokeWidth={1.8} />
                </div>
                <div className="flex-1">
                  <div className="flex items-baseline gap-2 mb-2">
                    <span className="text-[10px] font-mono uppercase tracking-[0.16em] text-white/45">{String(i + 1).padStart(2, "0")}</span>
                    <h3 className="text-[20px] md:text-[22px] font-semibold text-white leading-tight">{t}</h3>
                  </div>
                  <p className="text-[14px] md:text-[15px] leading-relaxed text-white/65">{d}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </Card>
  );
}

// ============================================================================
// 04 — Nos Activités
// ============================================================================
const ACTIVITIES = [
  {
    Ic: Home,
    t: "Résidentiel",
    d: "Villas, appartements de standing, lotissements. Esthétique soignée, intégration domotique et discrétion technique.",
    tags: ["Villas", "Appartements", "Domotique", "Sécurité"],
    image: "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=1600&auto=format&fit=crop&q=80",
  },
  {
    Ic: Building,
    t: "Tertiaire",
    d: "Bureaux, commerces, hôtels, cliniques. Performance énergétique, conformité ERP et continuité de service.",
    tags: ["Bureaux", "Hôtellerie", "ERP", "Conformité"],
    image: "https://images.unsplash.com/photo-1497366858526-0766cadbe8fa?w=1600&auto=format&fit=crop&q=80",
  },
  {
    Ic: Factory,
    t: "Industriel",
    d: "Usines, ateliers, sites de production. Distribution BT/HT, supervision et automatisation des process.",
    tags: ["BT/HT", "PLC · SCADA", "Process", "24/7"],
    image: "https://images.unsplash.com/photo-1565608438257-fac3c27beb36?w=1600&auto=format&fit=crop&q=80",
  },
];

function ActivityModal({ activity, onClose }) {
  useEffect(() => {
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    const onKey = (e) => {
      if (e.key === "Escape") onClose();
    };
    window.addEventListener("keydown", onKey);
    return () => {
      document.body.style.overflow = prev;
      window.removeEventListener("keydown", onKey);
    };
  }, []);
  const { Ic } = activity;
  return (
    <div
      onClick={onClose}
      className="fixed inset-0 z-[100] flex items-center justify-center p-4"
      style={{
        background: "rgba(11,27,38,0.55)",
        backdropFilter: "blur(14px)",
        WebkitBackdropFilter: "blur(14px)",
        animation: "glFadeIn 0.25s var(--ease-out) both",
      }}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        className="relative w-full max-w-[560px] rounded-[28px] overflow-hidden"
        style={{
          aspectRatio: "1 / 1",
          background: "#000",
          boxShadow: "0 40px 100px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06), inset 0 1px 0 rgba(255,255,255,0.10)",
          animation: "glPopIn 0.32s var(--ease-out) both",
        }}
      >
        <img src={activity.image} alt={activity.t} className="absolute inset-0 w-full h-full object-cover" />
        <button
          onClick={onClose}
          className="absolute top-3 right-3 w-10 h-10 rounded-full backdrop-blur-md flex items-center justify-center transition-colors hover:bg-white/25"
          style={{ background: "rgba(11,27,38,0.55)", border: "1px solid rgba(255,255,255,0.18)" }}
          aria-label="Fermer"
        >
          <X className="w-4 h-4 text-white" strokeWidth={2} />
        </button>
        <div
          className="absolute top-3 left-3 inline-flex items-center gap-2 px-3 py-1.5 rounded-full backdrop-blur-md"
          style={{ background: "rgba(11,27,38,0.55)", border: "1px solid rgba(255,255,255,0.18)" }}
        >
          <span className="inline-flex items-center justify-center w-5 h-5 rounded-full" style={{ background: "rgba(26,182,224,0.20)" }}>
            <Ic className="w-3 h-3" style={{ color: "var(--brand-400)" }} strokeWidth={2} />
          </span>
          <span className="text-[10px] uppercase tracking-[0.18em] font-semibold font-mono text-white/85">
            Geneltec · Activité
          </span>
        </div>
        <article
          className="absolute bottom-0 left-0 right-0 p-5 md:p-6"
          style={{
            background: "rgba(11,27,38,0.55)",
            backdropFilter: "blur(14px)",
            WebkitBackdropFilter: "blur(14px)",
            borderTop: "1px solid rgba(255,255,255,0.10)",
          }}
        >
          <h2
            className="text-white font-semibold leading-none"
            style={{ fontSize: "clamp(1.5rem, 3vw, 2rem)", letterSpacing: "-0.02em", animation: "glScaleY 0.3s var(--ease-out) 0.05s both", transformOrigin: "left bottom" }}
          >
            {activity.t}
          </h2>
          <p
            className="text-white/80 text-[13px] md:text-[14px] mt-2.5 leading-relaxed"
            style={{ animation: "glSlideY 0.3s var(--ease-out) 0.15s both" }}
          >
            {activity.d}
          </p>
          <div
            className="flex flex-wrap gap-1.5 mt-3"
            style={{ animation: "glSlideY 0.3s var(--ease-out) 0.22s both" }}
          >
            {activity.tags.map((tag) => (
              <span
                key={tag}
                className="text-[10px] font-mono px-2.5 py-1 rounded-full text-white/80"
                style={{ border: "1px solid rgba(255,255,255,0.20)" }}
              >
                {tag}
              </span>
            ))}
          </div>
        </article>
      </div>
    </div>
  );
}

function ActivitiesGallery() {
  const [index, setIndex] = useState(0);
  const [open, setOpen] = useState(false);
  return (
    <>
      <div className="flex gap-2 md:gap-3 w-full max-w-[1180px] mx-auto" style={{ height: "clamp(360px, 56vh, 540px)" }}>
        {ACTIVITIES.map((act, i) => {
          const active = index === i;
          const { Ic } = act;
          return (
            <div
              key={act.t}
              onMouseEnter={() => setIndex(i)}
              onClick={() => { setIndex(i); setOpen(true); }}
              className="relative rounded-[1.4rem] md:rounded-[1.8rem] overflow-hidden cursor-pointer shrink-0 group"
              style={{
                flexGrow: active ? 8 : 1,
                flexBasis: 0,
                minWidth: 0,
                transition: "flex-grow 0.6s cubic-bezier(0.16, 1, 0.3, 1)",
                background: "var(--ink-900)",
              }}
            >
              <img
                src={act.image}
                alt={act.t}
                className="absolute inset-0 w-full h-full object-cover transition-transform duration-700"
                style={{ transform: active ? "scale(1)" : "scale(1.15)" }}
              />
              <div
                className="absolute inset-0 transition-all duration-500"
                style={{
                  background: active
                    ? "linear-gradient(180deg, rgba(11,27,38,0) 35%, rgba(11,27,38,0.78) 100%)"
                    : "linear-gradient(180deg, rgba(11,27,38,0.55) 0%, rgba(11,27,38,0.85) 100%)",
                }}
              />
              <div
                className="absolute inset-0 transition-opacity duration-500 pointer-events-none"
                style={{
                  opacity: active ? 1 : 0,
                  background: "radial-gradient(70% 100% at 0% 100%, rgba(26,182,224,0.22), rgba(26,182,224,0) 70%)",
                }}
              />

              {!active && (
                <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
                  <span
                    className="text-white font-semibold whitespace-nowrap"
                    style={{
                      writingMode: "vertical-rl",
                      transform: "rotate(180deg)",
                      letterSpacing: "0.22em",
                      textTransform: "uppercase",
                      fontSize: "clamp(0.85rem, 1.15vw, 1.05rem)",
                    }}
                  >
                    {act.t}
                  </span>
                </div>
              )}

              <div
                className="absolute top-4 md:top-5 left-4 md:left-5 flex items-center gap-2 transition-opacity duration-400"
                style={{ opacity: active ? 1 : 0.85 }}
              >
                <span
                  className="inline-flex items-center justify-center w-9 h-9 rounded-full backdrop-blur-md"
                  style={{ background: "rgba(11,27,38,0.45)", border: "1px solid rgba(255,255,255,0.18)" }}
                >
                  <Ic className="w-4 h-4 text-white" strokeWidth={1.8} />
                </span>
                {active && (
                  <span className="text-[10px] uppercase tracking-[0.18em] font-mono font-semibold text-white px-2.5 py-1 rounded-full backdrop-blur-md"
                        style={{ background: "rgba(11,27,38,0.45)", border: "1px solid rgba(255,255,255,0.18)" }}>
                    {String(i + 1).padStart(2, "0")} / 03
                  </span>
                )}
              </div>

              {active && (
                <div className="absolute bottom-0 left-0 right-0 p-5 md:p-7 lg:p-8">
                  <h3
                    className="text-white font-semibold leading-none mb-2"
                    style={{
                      fontSize: "clamp(1.6rem, 3vw, 2.4rem)",
                      letterSpacing: "-0.025em",
                      animation: "glFadeIn 0.4s var(--ease-out) both",
                    }}
                  >
                    {act.t}
                  </h3>
                  <p
                    className="text-white/80 text-[13px] md:text-[14px] leading-relaxed max-w-md"
                    style={{ animation: "glFadeIn 0.45s var(--ease-out) 0.08s both" }}
                  >
                    {act.d}
                  </p>
                  <div
                    className="flex flex-wrap gap-1.5 mt-4"
                    style={{ animation: "glFadeIn 0.5s var(--ease-out) 0.14s both" }}
                  >
                    {act.tags.map((tag) => (
                      <span
                        key={tag}
                        className="text-[10px] font-mono px-2.5 py-1 rounded-full text-white/80"
                        style={{ border: "1px solid rgba(255,255,255,0.20)", background: "rgba(11,27,38,0.35)", backdropFilter: "blur(6px)" }}
                      >
                        {tag}
                      </span>
                    ))}
                  </div>
                  <div className="flex items-center gap-2 mt-5 text-white/75">
                    <span className="text-[10px] uppercase tracking-[0.22em] font-mono">Voir le détail</span>
                    <span className="w-6 h-px bg-white/40" />
                    <ChevronRight className="w-3.5 h-3.5" strokeWidth={2} />
                  </div>
                </div>
              )}
            </div>
          );
        })}
      </div>
      {open && (
        <ActivityModal activity={ACTIVITIES[index]} onClose={() => setOpen(false)} />
      )}
    </>
  );
}

function Activities() {
  return (
    <Card id="activities" className="p-6 sm:p-8 md:p-12 lg:p-16 xl:p-20">
      <div className="gl-fade-up text-center mx-auto max-w-[640px] mb-10 md:mb-14">
        <div className="flex justify-center"><SectionTag num="04" label="Nos activités" /></div>
        <h2
          className="font-semibold text-[var(--ink-900)] mt-5 mb-4 mx-auto"
          style={{ letterSpacing: "-0.02em", lineHeight: 1.05, fontSize: "clamp(1.85rem, 3.6vw, 3.1rem)" }}
        >
          Trois terrains, <span className="text-[var(--brand-600)] italic font-medium">une même exigence</span> technique.
        </h2>
        <p className="text-[var(--neutral-600)] leading-relaxed text-[15px] md:text-[16px] max-w-[520px] mx-auto">
          Survolez chaque terrain pour le révéler — cliquez pour ouvrir le détail.
        </p>
      </div>
      <ActivitiesGallery />
    </Card>
  );
}

// ============================================================================
// 05 — Nos Réalisations
// ============================================================================
const PARTNERS = [
  { name: "Schneider Electric", logo: "project/assets/partners/schneider.svg" },
  { name: "ABB",                logo: "project/assets/partners/abb.svg" },
  { name: "Siemens",            logo: "project/assets/partners/siemens.svg" },
  { name: "Legrand",            logo: "project/assets/partners/legrand.svg" },
  { name: "Hager",              logo: "project/assets/partners/hager.svg" },
  { name: "Daikin",             logo: "project/assets/partners/daikin.svg" },
];

function useScrollProgress(ref, offsetStart = 1.0, offsetEnd = 0.0) {
  const [progress, setProgress] = useState(0);
  useEffect(() => {
    const update = () => {
      const el = ref.current;
      if (!el) return;
      const rect = el.getBoundingClientRect();
      const vh = window.innerHeight;
      const startY = vh * offsetStart;
      const endY = vh * offsetEnd;
      const denom = startY - endY + rect.height;
      if (denom <= 0) {
        setProgress(rect.top < startY ? 1 : 0);
        return;
      }
      const p = Math.max(0, Math.min(1, (startY - rect.top) / denom));
      setProgress(p);
    };
    update();
    const onScroll = () => update();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", update);
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", update);
    };
  }, []);
  return progress;
}

function AnimatedText({ text, className, style }) {
  const ref = useRef(null);
  const progress = useScrollProgress(ref, 0.85, 0.2);
  const words = useMemo(() => text.split(/(\s+)/), [text]);
  let charIdx = 0;
  const totalChars = text.length;
  const window_ = 0.08;
  return (
    <p ref={ref} className={className} style={style}>
      {words.map((word, wi) => {
        if (/^\s+$/.test(word)) {
          charIdx += word.length;
          return word;
        }
        const wordChars = [...word];
        const wordStart = charIdx;
        charIdx += word.length;
        return (
          <span key={wi} style={{ display: "inline-block", whiteSpace: "nowrap" }}>
            {wordChars.map((c, ci) => {
              const overallIdx = wordStart + ci;
              const center = (overallIdx + 0.5) / totalChars;
              const start = Math.max(0, center - window_);
              const end = Math.min(1, center + window_);
              const t = Math.max(
                0,
                Math.min(1, (progress - start) / Math.max(0.0001, end - start))
              );
              const opacity = 0.18 + 0.82 * t;
              return (
                <span
                  key={ci}
                  style={{ opacity, color: "inherit", transition: "opacity 0.05s linear" }}
                >
                  {c}
                </span>
              );
            })}
          </span>
        );
      })}
    </p>
  );
}

const PROJECTS = [
  {
    num: "01",
    cat: "Industriel",
    name: "LLI",
    title: "Site de production",
    desc: "Distribution BT/HT, armoires de puissance et supervision SCADA pour un site de production marocain — étude, fourniture, pose et mise en service par nos équipes.",
    year: "2024",
    location: "Casablanca",
    metrics: [["1.2", "MW installés"], ["04", "armoires HT"], ["06", "mois de chantier"]],
    images: {
      top: "https://images.unsplash.com/photo-1581093588401-fbb62a02f120?w=1200&auto=format&fit=crop&q=80",
      bottom: "https://images.unsplash.com/photo-1581094288338-2244c4aab940?w=1200&auto=format&fit=crop&q=80",
      main: "https://images.unsplash.com/photo-1565608438257-fac3c27beb36?w=1600&auto=format&fit=crop&q=80",
    },
  },
  {
    num: "02",
    cat: "Tertiaire",
    name: "ESR",
    title: "Siège social",
    desc: "Installation électrique complète : courants forts & faibles, éclairage scénarisé, domotique KNX et vidéoprotection IP pour un siège social neuf.",
    year: "2024",
    location: "Rabat",
    metrics: [["2 200", "m² aménagés"], ["180", "points lumière"], ["KNX", "domotique"]],
    images: {
      top: "https://images.unsplash.com/photo-1497366216548-37526070297c?w=1200&auto=format&fit=crop&q=80",
      bottom: "https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=1200&auto=format&fit=crop&q=80",
      main: "https://images.unsplash.com/photo-1497215728101-856f4ea42174?w=1600&auto=format&fit=crop&q=80",
    },
  },
  {
    num: "03",
    cat: "Énergie",
    name: "Spatenergy",
    title: "Centrale solaire",
    desc: "Centrale photovoltaïque 250 kWc avec stockage batterie et monitoring distant temps réel — autoconsommation et injection partielle au réseau.",
    year: "2025",
    location: "Marrakech",
    metrics: [["250", "kWc"], ["480", "panneaux"], ["100", "kWh de stockage"]],
    images: {
      top: "https://images.unsplash.com/photo-1509391366360-2e959784a276?w=1200&auto=format&fit=crop&q=80",
      bottom: "https://images.unsplash.com/photo-1466611653911-95081537e5b7?w=1200&auto=format&fit=crop&q=80",
      main: "https://images.unsplash.com/photo-1545209463-e2825498edbf?w=1600&auto=format&fit=crop&q=80",
    },
  },
];

function ProjectCardContent({ p, idx, registerImage }) {
  return (
    <div
      className="rounded-[1.8rem] md:rounded-[2.4rem] p-5 sm:p-6 md:p-8 lg:p-10 overflow-hidden relative"
      style={{
        background: "var(--ink-900)",
        border: "1px solid rgba(255,255,255,0.12)",
        boxShadow: "0 40px 80px -20px rgba(11,27,38,0.55), inset 0 1px 0 rgba(255,255,255,0.06)",
        color: "#fff",
      }}
    >
      <div
        className="absolute inset-0 opacity-[0.06] pointer-events-none"
        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: "48px 48px",
        }}
      />
      <div
        className="absolute pointer-events-none"
        style={{
          top: "-30%", right: "-15%", width: "55%", height: "120%",
          background: "radial-gradient(closest-side, rgba(26,182,224,0.18), rgba(26,182,224,0) 70%)",
          filter: "blur(20px)",
        }}
      />

      <div className="relative flex flex-col md:flex-row md:items-center justify-between gap-4 mb-5 md:mb-6">
        <div className="flex items-start md:items-center gap-4 md:gap-6">
          <span
            className="font-semibold leading-none text-white shrink-0"
            style={{ fontSize: "clamp(2.4rem, 5.5vw, 4.5rem)", letterSpacing: "-0.04em" }}
          >
            {p.num}
          </span>
          <div>
            <span className="text-[10px] uppercase tracking-[0.18em] font-mono font-semibold text-[var(--brand-400)] flex items-center gap-2 flex-wrap">
              {p.cat}
              <span className="w-1 h-1 rounded-full bg-white/30" />
              <span className="text-white/55">{p.location}</span>
              <span className="w-1 h-1 rounded-full bg-white/30" />
              <span className="text-white/55">{p.year}</span>
            </span>
            <div className="flex items-baseline gap-3 mt-2">
              <h3
                className="text-white font-semibold leading-none"
                style={{ fontSize: "clamp(1.4rem, 3vw, 2.6rem)", letterSpacing: "-0.025em" }}
              >
                {p.name}
              </h3>
              <span className="text-white/45 italic font-light hidden sm:inline" style={{ fontSize: "clamp(0.85rem, 1.3vw, 1.25rem)" }}>
                {p.title}
              </span>
            </div>
          </div>
        </div>
        <button
          className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full border-2 transition-all hover:bg-white/10 self-start md:self-auto whitespace-nowrap shrink-0"
          style={{ borderColor: "rgba(215,226,234,0.30)", color: "#fff" }}
        >
          <span className="text-[11px] uppercase tracking-[0.18em] font-semibold">Voir le projet</span>
          <ArrowUpRight className="w-3.5 h-3.5" strokeWidth={2} />
        </button>
      </div>

      <div className="relative grid grid-cols-1 lg:grid-cols-[1fr_2fr] gap-5 lg:gap-7">
        <div className="flex flex-col">
          <p className="text-white/70 text-[14px] md:text-[15px] leading-relaxed max-w-[420px]">
            {p.desc}
          </p>
          <div className="mt-auto pt-5">
            <div className="grid grid-cols-3 gap-4 pt-4" style={{ borderTop: "1px solid rgba(255,255,255,0.10)" }}>
              {p.metrics.map(([n, l]) => (
                <div key={l}>
                  <div
                    className="text-white font-semibold leading-none tabular-nums"
                    style={{ fontSize: "clamp(1.15rem, 1.9vw, 1.7rem)", letterSpacing: "-0.02em" }}
                  >
                    {n}
                  </div>
                  <div className="text-white/55 text-[10px] uppercase tracking-[0.16em] font-mono font-medium mt-2 leading-tight">
                    {l}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="grid grid-cols-2 gap-3 md:gap-4" style={{ minHeight: 220 }}>
          <div className="flex flex-col gap-3 md:gap-4">
            <image-slot
              id={`proj-${idx}-1`}
              src={p.images?.top}
              style={{ width: "100%", height: "clamp(95px, 12vw, 170px)", display: "block" }}
              shape="rounded"
              radius="20"
              placeholder="Photo · 01"
            />
            <image-slot
              id={`proj-${idx}-2`}
              src={p.images?.bottom}
              style={{ width: "100%", height: "clamp(130px, 19vw, 240px)", display: "block" }}
              shape="rounded"
              radius="20"
              placeholder="Photo · 02"
            />
          </div>
          <image-slot
            ref={registerImage}
            id={`proj-${idx}-3`}
            src={p.images?.main}
            style={{ width: "100%", height: "100%", display: "block", minHeight: 240, transformOrigin: "center center", willChange: "transform" }}
            shape="rounded"
            radius="20"
            placeholder="Photo principale"
          />
        </div>
      </div>
    </div>
  );
}

function ProjectCardLayer({ p, idx, registerCard, registerImage }) {
  return (
    <div className="h-screen flex items-center justify-center sticky top-0">
      <div
        ref={registerCard}
        className="relative w-[92%] md:w-[88%] max-w-[1180px]"
        style={{
          transformOrigin: "top center",
          willChange: "transform",
          top: `calc(-5vh + ${idx * 25}px)`,
        }}
      >
        <ProjectCardContent p={p} idx={idx} registerImage={registerImage} />
      </div>
    </div>
  );
}

function ProjectStack() {
  const containerRef = useRef(null);
  const cardRefs = useRef([]);
  const imageRefs = useRef([]);
  const total = PROJECTS.length;

  useEffect(() => {
    const update = () => {
      const c = containerRef.current;
      if (!c) return;
      const vh = window.innerHeight;
      const rect = c.getBoundingClientRect();
      const denom = rect.height - vh;
      const outerProgress = denom > 0 ? Math.max(0, Math.min(1, -rect.top / denom)) : 0;

      for (let i = 0; i < cardRefs.current.length; i++) {
        const el = cardRefs.current[i];
        if (!el) continue;
        const targetScale = 1 - (total - i) * 0.05;
        const inA = i * 0.25;
        const inB = 1;
        const t = Math.max(0, Math.min(1, (outerProgress - inA) / Math.max(0.0001, inB - inA)));
        const scale = 1 + t * (targetScale - 1);
        el.style.transform = `scale(${scale})`;
      }

      for (let i = 0; i < imageRefs.current.length; i++) {
        const img = imageRefs.current[i];
        if (!img) continue;
        const container = img.closest(".h-screen.sticky");
        if (!container) continue;
        const cr = container.getBoundingClientRect();
        const localT = Math.max(0, Math.min(1, (vh - cr.top) / vh));
        const imgScale = 1.6 + (1 - 1.6) * localT;
        img.style.transform = `scale(${imgScale})`;
      }
    };

    update();
    const onScroll = () => update();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", update);
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", update);
    };
  }, [total]);

  return (
    <div ref={containerRef} className="relative">
      {PROJECTS.map((p, i) => (
        <ProjectCardLayer
          key={p.num}
          p={p}
          idx={i}
          registerCard={(el) => { cardRefs.current[i] = el; }}
          registerImage={(el) => { imageRefs.current[i] = el; }}
        />
      ))}
    </div>
  );
}

function References() {
  return (
    <section id="references" className="px-3 md:px-5 mb-3 md:mb-5">
      <div
        className="rounded-[1.5rem] md:rounded-[2.4rem] p-6 sm:p-8 md:p-12 lg:p-16 xl:p-20 relative"
        style={{ background: "#fff" }}
      >
        <div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-6 mb-12 md:mb-16">
          <div className="gl-fade-up max-w-[640px]">
            <SectionTag num="05" label="Nos réalisations · Références" />
            <h2
              className="font-semibold text-[var(--ink-900)] mt-5"
              style={{ letterSpacing: "-0.02em", lineHeight: 1.05, fontSize: "clamp(1.85rem, 3.6vw, 3.1rem)" }}
            >
              Ils nous ont fait <span className="text-[var(--brand-600)] italic font-medium">confiance</span>.
            </h2>
          </div>
          <p className="text-[var(--neutral-600)] leading-relaxed max-w-[420px] text-[15px] md:text-[16px]">
            Trois chantiers, trois terrains — industriel, tertiaire et énergie. Faites défiler pour parcourir nos projets phares.
          </p>
        </div>

        <ProjectStack />

        <div className="py-16 md:py-24 lg:py-32 px-2 md:px-6 text-center">
          <span className="text-[10px] uppercase tracking-[0.22em] font-mono font-semibold text-[var(--brand-600)] block mb-6">
            — Notre engagement —
          </span>
          <AnimatedText
            text="Chaque chantier est étudié, dimensionné et livré par notre équipe. Une approche technique, jamais commerciale — sans sous-traitance opaque."
            className="font-semibold text-[var(--ink-900)] mx-auto"
            style={{
              fontSize: "clamp(1.25rem, 2.6vw, 2.4rem)",
              letterSpacing: "-0.02em",
              lineHeight: 1.25,
              maxWidth: "880px",
            }}
          />
        </div>

        <div className="pt-8 md:pt-10" style={{ borderTop: "1px solid var(--border)" }}>
          <div className="flex items-baseline gap-3 mb-6">
            <span className="text-[10px] uppercase tracking-[0.18em] font-mono font-semibold text-[var(--neutral-500)]">
              Technologies utilisées
            </span>
            <span className="h-px flex-1 bg-[var(--border)]" />
            <span className="text-[10px] font-mono text-[var(--neutral-400)]">{PARTNERS.length} marques</span>
          </div>

          <div
            className="overflow-hidden"
            style={{
              maskImage: "linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%)",
              WebkitMaskImage: "linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%)",
            }}
          >
            <div className="gl-ticker-track py-4">
              {[...PARTNERS, ...PARTNERS].map((p, i) => (
                <div
                  key={i}
                  className="flex items-center justify-center px-8 md:px-12 shrink-0"
                  style={{ height: 56, minWidth: 180 }}
                  title={p.name}
                >
                  <img
                    src={p.logo}
                    alt={p.name}
                    className="max-h-10 md:max-h-11 w-auto"
                    style={{ filter: "grayscale(1) opacity(0.55)", transition: "filter .25s" }}
                    onMouseEnter={(e) => (e.currentTarget.style.filter = "grayscale(0) opacity(1)")}
                    onMouseLeave={(e) => (e.currentTarget.style.filter = "grayscale(1) opacity(0.55)")}
                  />
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================================
// 06 — Contact
// ============================================================================
function FormField({ label, value, onChange, type = "text", placeholder, required }) {
  const [focus, setFocus] = useState(false);
  return (
    <div>
      <label className="text-[10px] uppercase tracking-[0.18em] font-mono font-medium text-white/55 mb-2 block">
        {label}{required && <span className="text-[var(--brand-400)] ml-1">*</span>}
      </label>
      <input
        type={type}
        placeholder={placeholder}
        value={value}
        required={required}
        onChange={(e) => onChange(e.target.value)}
        onFocus={() => setFocus(true)}
        onBlur={() => setFocus(false)}
        className="w-full px-4 py-3 rounded-[12px] text-[14px] text-white placeholder:text-white/30 focus:outline-none transition-colors"
        style={{
          background: "rgba(255,255,255,0.04)",
          border: `1px solid ${focus ? "rgba(26,182,224,0.45)" : "rgba(255,255,255,0.10)"}`,
        }}
      />
    </div>
  );
}

function Contact() {
  const [submitted, setSubmitted] = useState(false);
  const [form, setForm] = useState({ name: "", email: "", phone: "", project: "Résidentiel", message: "" });
  const onSubmit = (e) => {
    e.preventDefault();
    setSubmitted(true);
  };

  return (
    <Card dark id="contact" className="p-6 sm:p-8 md:p-12 lg:p-16 xl:p-20">
      <div
        className="absolute pointer-events-none"
        style={{
          right: "-15%", top: "-30%", width: "70%", height: "120%",
          background: "radial-gradient(closest-side, rgba(26,182,224,0.30), rgba(26,182,224,0) 70%)",
          filter: "blur(20px)",
        }}
      />

      <div className="relative grid grid-cols-1 lg:grid-cols-[1fr_1.05fr] gap-10 md:gap-16 items-start">
        <div className="gl-fade-up">
          <SectionTag num="06" label="Contactez-nous" dark />
          <h2
            className="font-semibold text-white mt-5 mb-5"
            style={{ letterSpacing: "-0.02em", lineHeight: 1.0, fontSize: "clamp(2rem, 4.4vw, 3.8rem)" }}
          >
            Discutons de <span className="text-[var(--brand-400)] italic font-medium">votre projet</span>.
          </h2>
          <p className="text-white/65 leading-relaxed text-[15px] md:text-[17px] max-w-[460px]">
            Étude technique offerte, réponse sous 24 heures, intervention partout au Maroc. Décrivez votre projet — résidentiel, tertiaire ou industriel.
          </p>

          <div className="mt-10 grid grid-cols-1 gap-3 max-w-[440px]">
            {[
              { Ic: Phone,  l: "Téléphone", v: "+212 662 12 90 67", href: "tel:+212662129067" },
              { Ic: Mail,   l: "Email",     v: "geneltec.ouhallab@gmail.com", href: "mailto:geneltec.ouhallab@gmail.com" },
              { Ic: Globe,  l: "Web",       v: "www.geneltec.ma", href: "https://www.geneltec.ma" },
              { Ic: MapPin, l: "Siège",     v: "Mohammedia · Maroc", href: null },
            ].map(({ Ic, l, v, href }) => (
              <a
                key={l}
                href={href || "#"}
                className="flex items-center gap-4 p-3.5 rounded-[14px] transition-all group"
                style={{ background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.10)" }}
              >
                <span
                  className="w-10 h-10 rounded-full flex items-center justify-center shrink-0 transition-colors"
                  style={{ background: "rgba(26,182,224,0.14)", color: "var(--brand-400)" }}
                >
                  <Ic className="w-4 h-4" strokeWidth={1.8} />
                </span>
                <div className="flex flex-col leading-tight">
                  <span className="text-[10px] uppercase tracking-[0.18em] font-mono font-medium text-white/45">{l}</span>
                  <span className="text-[14px] md:text-[15px] text-white mt-1 font-medium">{v}</span>
                </div>
                <ChevronRight className="w-4 h-4 text-white/30 ml-auto group-hover:translate-x-0.5 group-hover:text-white transition-all" strokeWidth={2} />
              </a>
            ))}
          </div>
        </div>

        <form
          onSubmit={onSubmit}
          className="relative p-5 sm:p-6 md:p-7 lg:p-8 rounded-[1.4rem] md:rounded-[1.8rem]"
          style={{
            background: "rgba(255,255,255,0.04)",
            border: "1px solid rgba(255,255,255,0.10)",
            backdropFilter: "blur(8px)",
            WebkitBackdropFilter: "blur(8px)",
          }}
        >
          <div className="flex items-center justify-between mb-5">
            <span className="text-[10px] uppercase tracking-[0.18em] font-mono font-semibold text-[var(--brand-400)]">
              Formulaire de contact
            </span>
            <span className="text-[10px] font-mono text-white/40">Réponse · 24h</span>
          </div>

          {submitted ? (
            <div className="py-12 text-center">
              <div className="w-12 h-12 mx-auto rounded-full flex items-center justify-center mb-4" style={{ background: "rgba(26,182,224,0.18)" }}>
                <Check className="w-5 h-5 text-[var(--brand-400)]" strokeWidth={2.2} />
              </div>
              <h3 className="text-white text-[18px] font-semibold mb-2">Merci, {form.name || "à bientôt"} !</h3>
              <p className="text-white/65 text-[14px] max-w-[320px] mx-auto leading-relaxed">
                Votre demande a bien été enregistrée. Notre équipe vous contactera sous 24 heures.
              </p>
              <button
                type="button"
                onClick={() => { setSubmitted(false); setForm({ name: "", email: "", phone: "", project: "Résidentiel", message: "" }); }}
                className="mt-6 text-[12px] uppercase tracking-[0.18em] font-mono text-[var(--brand-400)] hover:text-white"
              >
                Nouvelle demande
              </button>
            </div>
          ) : (
            <>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-3">
                <FormField label="Nom complet" placeholder="Mohammed Alaoui" value={form.name}
                           onChange={(v) => setForm({ ...form, name: v })} required />
                <FormField label="Téléphone" placeholder="+212 6 ..." value={form.phone}
                           onChange={(v) => setForm({ ...form, phone: v })} />
              </div>
              <FormField label="Email" type="email" placeholder="vous@exemple.com" value={form.email}
                         onChange={(v) => setForm({ ...form, email: v })} required />

              <div className="mt-3">
                <label className="text-[10px] uppercase tracking-[0.18em] font-mono font-medium text-white/55 mb-2 block">
                  Type de projet
                </label>
                <div className="grid grid-cols-3 gap-2">
                  {["Résidentiel", "Tertiaire", "Industriel"].map((p) => (
                    <button
                      type="button"
                      key={p}
                      onClick={() => setForm({ ...form, project: p })}
                      className="text-[13px] font-medium py-2.5 rounded-full transition-all"
                      style={
                        form.project === p
                          ? {
                              background: "linear-gradient(180deg, #3BC4E6 0%, #1AB6E0 60%, #119FC8 100%)",
                              color: "#fff",
                              boxShadow: "inset 0 1px 0 rgba(255,255,255,0.45), 0 4px 12px rgba(26,182,224,0.30)",
                              border: "1px solid rgba(255,255,255,0.10)",
                            }
                          : {
                              background: "rgba(255,255,255,0.04)",
                              color: "rgba(255,255,255,0.75)",
                              border: "1px solid rgba(255,255,255,0.10)",
                            }
                      }
                    >
                      {p}
                    </button>
                  ))}
                </div>
              </div>

              <div className="mt-3">
                <label className="text-[10px] uppercase tracking-[0.18em] font-mono font-medium text-white/55 mb-2 block">
                  Décrivez votre besoin
                </label>
                <textarea
                  rows={4}
                  placeholder="Surface, contexte, type d'installation souhaitée…"
                  value={form.message}
                  onChange={(e) => setForm({ ...form, message: e.target.value })}
                  className="w-full px-4 py-3 rounded-[12px] text-[14px] text-white placeholder:text-white/30 resize-none focus:outline-none transition-colors"
                  style={{ background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.10)" }}
                  onFocus={(e) => (e.currentTarget.style.borderColor = "rgba(26,182,224,0.45)")}
                  onBlur={(e) => (e.currentTarget.style.borderColor = "rgba(255,255,255,0.10)")}
                />
              </div>

              <motion.button
                type="submit"
                whileHover={{ scale: 1.01 }}
                whileTap={{ scale: 0.99 }}
                className="gl-cta flex items-center justify-center gap-3 w-full mt-5 rounded-full py-3.5"
              >
                <span className="text-[14px] font-semibold tracking-tight">Envoyer la demande</span>
                <ArrowUpRight className="w-4 h-4 text-white" strokeWidth={2} />
              </motion.button>
              <p className="text-[11px] text-white/45 text-center mt-3">
                Réponse sous 24h · Étude offerte · Sans engagement
              </p>
            </>
          )}
        </form>
      </div>
    </Card>
  );
}

// ============================================================================
// Footer
// ============================================================================
function FooterCol({ title, items, mono }) {
  return (
    <div>
      <h4 className="text-[10px] uppercase tracking-[0.18em] font-mono font-semibold text-[var(--neutral-500)] mb-4">{title}</h4>
      <ul className="flex flex-col gap-2.5">
        {items.map((it) => {
          const content = (
            <span className={"text-[14px] text-[var(--ink-900)] hover:text-[var(--brand-600)] transition-colors " + (mono ? "font-mono text-[13px]" : "")}>
              {it.label || it}
            </span>
          );
          return (
            <li key={it.label || it}>
              {it.href ? <a href={it.href}>{content}</a> : content}
            </li>
          );
        })}
      </ul>
    </div>
  );
}

function Footer() {
  return (
    <footer className="px-3 md:px-5 pb-3 md:pb-5">
      <div className="rounded-[1.5rem] md:rounded-[2.4rem] p-6 md:p-10 lg:p-12 relative overflow-hidden" style={{ background: "var(--neutral-100)" }}>
        <div className="grid grid-cols-1 md:grid-cols-[2fr_1fr_1fr_1fr] gap-8 md:gap-12">
          <div className="max-w-[340px]">
            <img src="project/assets/logo-new.png" alt="Geneltec" className="h-7 w-auto mb-4" />
            <p className="text-[14px] leading-relaxed text-[var(--neutral-600)]">
              Solutions électriques et technologiques intégrées. Industriel, tertiaire et résidentiel — partout au Maroc.
            </p>
            <div className="flex items-center gap-2 mt-5">
              <span className="inline-flex items-center gap-1.5 text-[10px] uppercase tracking-[0.18em] font-mono font-semibold text-[var(--neutral-500)] px-2.5 py-1 rounded-full border border-[var(--border)] bg-white">
                <span className="gl-live-dot inline-block w-1.5 h-1.5 rounded-full" style={{ background: "var(--status-ok)" }} />
                Disponible 24/7
              </span>
            </div>
          </div>

          <FooterCol title="Pages" items={[
            { label: "Services",      href: "services.html" },
            { label: "Portfolio",     href: "portfolio.html" },
            { label: "Processus",     href: "processus.html" },
            { label: "À propos",      href: "about.html" },
            { label: "FAQ",           href: "faq.html" },
            { label: "Brochure",      href: "brochure.html" },
            { label: "Contact",       href: "contact.html" },
          ]} />
          <FooterCol title="Services" items={[
            { label: "Résidentielle", href: "services.html" },
            { label: "Industrielle",  href: "services.html" },
            { label: "Solaire",       href: "services.html" },
            { label: "Domotique",     href: "services.html" },
            { label: "Sécurité",      href: "services.html" },
            { label: "Automatisation",href: "services.html" },
          ]} />
          <FooterCol title="Contact" mono items={[
            { label: "+212 662 12 90 67",          href: "tel:+212662129067" },
            { label: "geneltec.ouhallab@gmail.com", href: "mailto:geneltec.ouhallab@gmail.com" },
            { label: "www.geneltec.ma",             href: "https://www.geneltec.ma" },
            { label: "Mohammedia, Maroc" },
          ]} />
        </div>

        <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-3 mt-10 pt-6" style={{ borderTop: "1px solid var(--border)" }}>
          <span className="text-[11px] font-mono text-[var(--neutral-500)]">
            © 2026 Geneltec · Smart Technology · Tous droits réservés
          </span>
          <span className="text-[11px] font-mono text-[var(--neutral-500)]">
            Mohammedia · Casablanca · Rabat · Marrakech
          </span>
        </div>
      </div>
    </footer>
  );
}

// ============================================================================
// App
// ============================================================================
function App() {
  useEffect(() => {
    if (typeof IntersectionObserver === "undefined") {
      document.querySelectorAll(".gl-fade-up").forEach((el) => el.classList.add("is-in"));
      return;
    }
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("is-in");
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12, rootMargin: "0px 0px -80px 0px" }
    );
    const raf = requestAnimationFrame(() => {
      document.querySelectorAll(".gl-fade-up").forEach((el) => io.observe(el));
    });
    return () => {
      cancelAnimationFrame(raf);
      io.disconnect();
    };
  }, []);

  return (
    <main className="min-h-screen" style={{ background: "#f0f0f0" }}>
      <Hero />
      <About />
      <Services />
      <Values />
      <Activities />
      <References />
      <Contact />
      <Footer />
    </main>
  );
}

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