/* global React, Ornaments */
const { useState: useStateB, useEffect: useEffectB, useRef: useRefB } = React;
const { Leaf: LeafB, Sprig: SprigB, Flower: FlowerB, Butterfly: ButterflyB, Squiggle: SquiggleB, Heart: HeartB, Branch: BranchB, Illus: IllusB, openLightbox: openLightboxB } = Ornaments;

/* ───────────────────────────  NOTRE ÉQUIPE  ─────────────────────────── */
const NotreEquipe = () => {
  const team = [
    { name: "Aymerick", role: "Président", color: "var(--vp-sage)" },
    { name: "Céline", role: "Trésorière", color: "var(--vp-pink)" },
    { name: "Léna", role: "Chargée de vie associative", color: "var(--vp-olive)" },
    { name: "Médérik", role: "Salarié", color: "var(--vp-coral)" },
    { name: "Océane", role: "Salariée", color: "var(--vp-sage)" },
  ];

  return (
    <section id="equipe" data-screen-label="07 Equipe" className="bg-sand paper pt-10 pb-20 relative overflow-hidden">
      {/* Illustrations charte (blanc, opacité 80%) : myosotis, fleur-coccinelles, fleur-bourdon */}
      {/* Masqué en mobile : chevauche le titre et le texte sur écran étroit */}
      <div className="absolute pointer-events-none mobile-illus-hide" style={{ top: 10, right: "1%" }}>
        <IllusB src="images/illus/myosotis-blanc.png" size={360} opacity={0.8} />
      </div>
      <div className="absolute pointer-events-none" style={{ bottom: 20, left: "-1%" }}>
        <IllusB src="images/illus/fleur-coccinelles-blanc.png" size={280} opacity={0.8} />
      </div>

      <div className="max-w-6xl mx-auto px-6">
        <div className="text-center mb-12">
          <span className="font-script text-pink-vp text-3xl">les visages du Hangar</span>
          <h2 className="font-brush text-olive mt-1" style={{ fontSize: "clamp(38px, 5vw, 60px)", lineHeight: 1, letterSpacing: "0.01em" }}>
            Notre équipe
          </h2>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 items-start">
          {/* Lead text */}
          <div className="lg:col-span-7 space-y-4 text-[16px] leading-relaxed">
            <p>
              Le Jardin du Hangar vit grâce à une équipe engagée et complémentaire.
            </p>
            <p>
              Autour d'<strong className="text-pink-vp">Aymerick</strong>, président, et de <strong className="text-pink-vp">Céline</strong>, trésorière, <strong className="text-pink-vp">Léna</strong> anime la vie associative, tandis que <strong className="text-pink-vp">Médérik</strong> et <strong className="text-pink-vp">Océane</strong>, salariés, portent les projets au quotidien.
            </p>
            <p>
              À leurs côtés, de nombreux bénévoles font vivre le lieu tout au long de l'année.
            </p>
            <p>
              Cette diversité d'énergies fait du jardin du Hangar un espace vivant, ancré, accueillant et tourné vers le collectif.
            </p>

            {/* Name chips */}
            <div className="pt-4 flex flex-wrap gap-2">
              {team.map((t, i) => (
                <span
                  key={i}
                  className="font-script text-lg px-3 py-1 rounded-full text-white"
                  style={{ background: t.color, transform: `rotate(${(i % 3 - 1) * 1.5}deg)` }}
                >
                  {t.name}
                </span>
              ))}
            </div>
          </div>

          {/* Photo collage */}
          <div className="lg:col-span-5 relative" style={{ minHeight: 460 }}>
            <div
              className="photo-ph is-clickable tilt-l absolute"
              style={{ width: 250, height: 280, top: 0, left: 0, backgroundImage: "url('images/photos/equipe-complete.jpg')", backgroundSize: "cover", backgroundPosition: "center" }}
              onClick={() => openLightboxB("images/photos/equipe-complete.jpg", "L'équipe au complet · repas de Noël 2025")}
            >
              <div className="tape pink" style={{ top: -10, left: 90 }} />
            </div>
            <div
              className="photo-ph beige is-clickable tilt-r absolute"
              style={{ width: 220, height: 200, top: 60, right: 0, backgroundImage: "url('images/photos/mederik-oceane.jpg')", backgroundSize: "cover", backgroundPosition: "center" }}
              onClick={() => openLightboxB("images/photos/mederik-oceane.jpg", "Assemblée Générale 2025")}
            >
              <div className="tape" style={{ top: -10, left: 70 }} />
            </div>
            <div
              className="photo-ph coral is-clickable tilt-r2 absolute"
              style={{ width: 240, height: 180, bottom: 0, left: 30, backgroundImage: "url('images/photos/benevoles.jpg')", backgroundSize: "cover", backgroundPosition: "center" }}
              onClick={() => openLightboxB("images/photos/benevoles.jpg", "Rentrée festive 2026")}
            >
              <div className="tape green" style={{ top: -10, left: 80 }} />
            </div>
            <div className="absolute pointer-events-none" style={{ bottom: -20, right: -10, zIndex: -1 }}>
              <IllusB src="images/illus/fleur-bourdon-blanc.png" size={220} opacity={0.8} />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ─────────────────────────  CONTACTEZ-NOUS  ───────────────────────── */
const ContactezNous = () => {
  const [form, setForm] = useStateB({ nom: "", email: "", sujet: "", message: "" });
  const [botcheck, setBotcheck] = useStateB(""); // honeypot anti-bot
  const [status, setStatus] = useStateB("idle"); // idle | sending | sent | error

  const submit = async (e) => {
    e.preventDefault();
    if (status === "sending") return;
    setStatus("sending");
    try {
      const res = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ ...form, botcheck }),
      });
      const data = await res.json().catch(() => ({}));
      if (res.ok && data.success) {
        setStatus("sent");
        setForm({ nom: "", email: "", sujet: "", message: "" });
        setTimeout(() => setStatus("idle"), 5000);
      } else {
        setStatus("error");
      }
    } catch {
      setStatus("error");
    }
  };

  return (
    <section id="contact" data-screen-label="08 Contact" className="bg-white">
      <div className="banner bg-pink-vp relative overflow-hidden" style={{ backgroundImage: "url('images/bandeau-contact.jpg')", backgroundSize: "cover", backgroundPosition: "center" }}>
        <h2>CONTACTEZ-NOUS</h2>
      </div>

      <div className="bg-sage relative paper overflow-hidden">
        {/* Illustrations charte (blanc, opacité 60%) : passiflores agrandies et débordant
            généreusement hors du cadre (consigne client 2026-07) */}
        <div className="absolute pointer-events-none mobile-illus-hide" style={{ top: -40, right: "-9%", zIndex: 0 }}>
          <IllusB src="images/illus/passiflore-blanc.png" size={620} opacity={0.6} />
        </div>
        <div className="absolute pointer-events-none hidden lg:block" style={{ bottom: -60, left: "-10%", zIndex: 0 }}>
          <IllusB src="images/illus/passiflore-blanc.png" size={520} opacity={0.6} style={{ transform: "scaleX(-1)" }} />
        </div>
        <div className="max-w-6xl mx-auto px-6 py-16 text-white relative" style={{ zIndex: 1 }}>
          <div className="max-w-3xl mb-12 space-y-3 text-[15px] leading-relaxed">
            <p>
              Vilaine Pousse se tient <strong>à disposition des entreprises, collectivités, particuliers et associations</strong> pour des missions d'animation, d'ateliers autour de la transition écologique.
            </p>
            <p>
              Vous pouvez nous contacter via ce formulaire pour nous faire part d'une demande de devis ou nous transmettre tout autre renseignement.
            </p>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-5 gap-8">
            {/* Contact infos */}
            <div className="lg:col-span-2">
              <div className="vp-card p-7 text-charcoal relative" style={{ color: "var(--vp-charcoal)" }}>
                <span className="font-script text-olive text-2xl">Nous écrire</span>
                <h3 className="font-brush text-pink-vp mt-1 mb-5" style={{ fontSize: 44, lineHeight: 0.95 }}>
                  Coordonnées
                </h3>

                <div className="space-y-5">
                  <div>
                    <div className="text-xs text-gray-500 font-bold tracking-widest mb-1">EMAIL</div>
                    <a href="mailto:vilainepousse@gmail.com" className="text-sage font-bold hover:text-pink-vp transition-colors">
                      vilainepousse@gmail.com
                    </a>
                  </div>
                  <div>
                    <div className="text-xs text-gray-500 font-bold tracking-widest mb-1">TÉLÉPHONE</div>
                    <div className="space-y-1">
                      <div className="flex items-center gap-2">
                        <span className="font-bold">06 26 63 81 09</span>
                        <span className="font-script text-olive">· Océane</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <span className="font-bold">07 77 38 66 99</span>
                        <span className="font-script text-olive">· Médérik</span>
                      </div>
                    </div>
                  </div>
                  <div>
                    <div className="text-xs text-gray-500 font-bold tracking-widest mb-1">SUR PLACE</div>
                    <div className="text-sm">
                      Au Jardin du Hangar<br />
                      7 rue Bahon Rault, 35000 Rennes<br />
                      <span className="text-gray-600">mardi & jeudi · 14h–17h</span>
                    </div>
                  </div>
                </div>

                {/* Socials */}
                <div className="mt-6 pt-6 border-t border-sand">
                  <div className="text-xs text-gray-500 font-bold tracking-widest mb-3">RÉSEAUX</div>
                  <div className="flex flex-wrap gap-2">
                    <SocialChip Icon={InstagramIcon} label="@vilainepousserennes" sub="Instagram" color="#E1306C" href="https://www.instagram.com/vilainepousserennes/" />
                    <SocialChip Icon={FacebookIcon} label="Vilaine Pousse" sub="Facebook" color="#1877F2" href="https://www.facebook.com/p/Vilaine-Pousse-61560798231697/" />
                  </div>
                </div>
              </div>
            </div>

            {/* Form */}
            <div className="lg:col-span-3">
              <form
                onSubmit={submit}
                className="vp-card p-7 relative"
                style={{ color: "var(--vp-charcoal)" }}
              >
                <span className="font-script text-olive text-2xl">Une demande ?</span>
                <h3 className="font-brush text-sage mt-1 mb-6" style={{ fontSize: 40, lineHeight: 0.95 }}>
                  Écrivez-nous !
                </h3>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <Field label="Nom" required>
                    <input
                      required
                      className="vp-input"
                      value={form.nom}
                      onChange={(e) => setForm({ ...form, nom: e.target.value })}
                      placeholder="Jeanne Dupont"
                    />
                  </Field>
                  <Field label="Email" required>
                    <input
                      required type="email"
                      className="vp-input"
                      value={form.email}
                      onChange={(e) => setForm({ ...form, email: e.target.value })}
                      placeholder="jeanne@exemple.fr"
                    />
                  </Field>
                  <div className="md:col-span-2">
                    <Field label="Sujet">
                      <input
                        className="vp-input"
                        value={form.sujet}
                        onChange={(e) => setForm({ ...form, sujet: e.target.value })}
                        placeholder="Demande de devis · atelier · question…"
                      />
                    </Field>
                  </div>
                  <div className="md:col-span-2">
                    <Field label="Message" required>
                      <textarea
                        required
                        rows={5}
                        className="vp-input"
                        value={form.message}
                        onChange={(e) => setForm({ ...form, message: e.target.value })}
                        placeholder="Dites-nous tout…"
                      />
                    </Field>
                  </div>
                </div>

                {/* Honeypot anti-bot : masqué aux humains, doit rester vide */}
                <input
                  type="text"
                  name="botcheck"
                  tabIndex={-1}
                  autoComplete="off"
                  aria-hidden="true"
                  value={botcheck}
                  onChange={(e) => setBotcheck(e.target.value)}
                  style={{ position: "absolute", left: "-9999px", width: 1, height: 1, opacity: 0 }}
                />

                <div className="mt-6 flex items-center justify-between gap-4 flex-wrap">
                  <p className="text-xs text-gray-500 max-w-sm">
                    En envoyant ce formulaire, vous nous autorisez à vous recontacter à propos de votre demande.
                  </p>
                  <button type="submit" className="btn-sage" disabled={status === "sending" || status === "sent"}>
                    {status === "sending" ? "Envoi…" : status === "sent" ? "✓ Message envoyé !" : "Envoyer →"}
                  </button>
                </div>
                {status === "error" && (
                  <p className="mt-3 text-sm" style={{ color: "var(--vp-pink-aa)" }}>
                    Envoi impossible pour le moment. Réessayez ou écrivez-nous à{" "}
                    <a href="mailto:vilainepousse@gmail.com" className="underline">vilainepousse@gmail.com</a>.
                  </p>
                )}
              </form>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const Field = ({ label, required, children }) => (
  <label className="block">
    <span className="text-xs font-bold tracking-wider text-olive mb-1.5 inline-block">
      {label.toUpperCase()} {required && <span className="text-pink-vp">*</span>}
    </span>
    {children}
  </label>
);

const InstagramIcon = ({ size = 20 }) => (
  <svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor" aria-hidden="true">
    <path d="M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.7 3.7 0 01-1.38-.9 3.7 3.7 0 01-.9-1.38c-.16-.42-.36-1.06-.41-2.23-.06-1.27-.07-1.65-.07-4.85s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16M12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.33 4.14.63c-.79.31-1.46.72-2.12 1.38C1.35 2.67.94 3.34.63 4.13.33 4.9.13 5.77.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.28.26 2.15.56 2.91.31.79.72 1.46 1.38 2.12.66.66 1.33 1.07 2.12 1.38.76.3 1.64.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.28-.06 2.15-.26 2.91-.56a5.86 5.86 0 002.12-1.38 5.86 5.86 0 001.38-2.12c.3-.76.5-1.63.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.28-.26-2.15-.56-2.91a5.86 5.86 0 00-1.38-2.12A5.86 5.86 0 0019.86.63c-.76-.3-1.63-.5-2.91-.56C15.67.01 15.26 0 12 0m0 5.84A6.16 6.16 0 1018.16 12 6.16 6.16 0 0012 5.84M12 16a4 4 0 114-4 4 4 0 01-4 4m6.41-10.85a1.44 1.44 0 11-1.44-1.44 1.44 1.44 0 011.44 1.44" />
  </svg>
);

const FacebookIcon = ({ size = 20 }) => (
  <svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor" aria-hidden="true">
    <path d="M24 12.07C24 5.41 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.69.24 2.69.24v2.97h-1.52c-1.49 0-1.96.93-1.96 1.89v2.25h3.33l-.53 3.49h-2.8V24C19.61 23.1 24 18.1 24 12.07" />
  </svg>
);

const SocialChip = ({ Icon, label, sub, href, color }) => (
  <a
    href={href}
    target="_blank"
    rel="noopener noreferrer"
    className="flex items-center gap-2 bg-sand-soft hover:bg-sand transition-colors px-3 py-2 rounded-full text-sm"
  >
    <span style={{ color }}><Icon /></span>
    <span>
      <span className="font-bold block leading-none">{label}</span>
      <span className="text-[10px] text-gray-500 leading-none">{sub}</span>
    </span>
  </a>
);

/* Carousel partenaires — auto-défilement + manipulation manuelle (drag / tactile) */
const PartnersCarousel = ({ partners }) => {
  const ref = useRefB(null);
  const paused = useRefB(false);
  const drag = useRefB({ down: false, startX: 0, startScroll: 0 });
  const items = [...partners, ...partners]; // 2 copies pour une boucle sans couture

  useEffectB(() => {
    const el = ref.current;
    if (!el) return;
    const reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    let raf;
    const speed = 0.5; // px / frame
    const step = () => {
      const half = el.scrollWidth / 2;
      if (half > 0) {
        if (!reduce && !paused.current && !drag.current.down) el.scrollLeft += speed;
        if (el.scrollLeft >= half) el.scrollLeft -= half;
        else if (el.scrollLeft < 0) el.scrollLeft += half;
      }
      raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [partners]);

  const onPointerDown = (e) => {
    const el = ref.current;
    drag.current = { down: true, startX: e.clientX, startScroll: el.scrollLeft };
    el.classList.add("is-dragging");
    if (el.setPointerCapture) el.setPointerCapture(e.pointerId);
  };
  const onPointerMove = (e) => {
    if (!drag.current.down) return;
    ref.current.scrollLeft = drag.current.startScroll - (e.clientX - drag.current.startX);
  };
  const endDrag = () => {
    drag.current.down = false;
    if (ref.current) ref.current.classList.remove("is-dragging");
  };

  return (
    <div
      ref={ref}
      className="logo-carousel relative"
      style={{ zIndex: 1 }}
      onMouseEnter={() => { paused.current = true; }}
      onMouseLeave={() => { paused.current = false; endDrag(); }}
      onPointerDown={onPointerDown}
      onPointerMove={onPointerMove}
      onPointerUp={endDrag}
      onPointerCancel={endDrag}
    >
      {items.map((p, i) => (
        <div key={i} className="logo-item" aria-hidden={i >= partners.length ? "true" : undefined}>
          <img src={p.src} alt={i < partners.length ? p.alt : ""} title={p.alt} loading="lazy" draggable="false" />
          <span className="logo-name">{p.alt}</span>
        </div>
      ))}
    </div>
  );
};

/* ─────────────────────────  NOS PARTENAIRES  ───────────────────────── */
const NosPartenaires = () => {
  const partners = [
    { src: "images/logos/afaup.png", alt: "AFAUP" },
    { src: "images/logos/mjc-brequigny.png", alt: "MJC Bréquigny" },
    { src: "images/logos/benenova.png", alt: "Bénénova" },
    { src: "images/logos/coallia.jpg", alt: "Coallia" },
    { src: "images/logos/maffrais-saesat.png", alt: "Maffrais Services" },
    { src: "images/logos/espacil-habitat.png", alt: "Espacil Habitat" },
    { src: "images/logos/comme-un-etabli.png", alt: "Comme un Établi" },
    { src: "images/logos/unis-cite.png", alt: "Unis-Cité" },
    { src: "images/logos/cols-verts.png", alt: "Les Cols Verts" },
    { src: "images/logos/nature-et-decouvertes.png", alt: "Nature et Découvertes" },
    { src: "images/logos/fours-a-mies.png", alt: "Les Fours à Mies" },
    { src: "images/logos/arcs.png", alt: "ARCS" },
    { src: "images/logos/rcc.png", alt: "RCC" },
    { src: "images/logos/skeudenn-bro-roazhon.png", alt: "Skeudenn Bro Roazhon" },
    { src: "images/logos/rennes-metropole.png", alt: "Rennes Ville et Métropole" },
    { src: "images/logos/ille-et-vilaine.png", alt: "Département d'Ille-et-Vilaine" },
  ];
  return (
    <section id="partenaires" data-screen-label="09 Partenaires" className="bg-white">
      <div className="banner bg-lime-vp relative overflow-hidden" style={{ color: "white", backgroundImage: "url('images/bandeau-partenaires.jpg')", backgroundSize: "cover", backgroundPosition: "center" }}>
        <h2 style={{ color: "white" }}>PARTENAIRES</h2>
      </div>

      <div className="max-w-7xl mx-auto px-6 py-16 relative overflow-hidden">
        {/* Illustrations charte (blanc, opacité 60%) : passiflore */}
        <div className="absolute pointer-events-none hidden lg:block" style={{ top: 0, left: "-2%", zIndex: 0 }}>
          <IllusB src="images/illus/passiflore-blanc.png" size={300} opacity={0.6} />
        </div>
        <div className="absolute pointer-events-none hidden lg:block" style={{ bottom: 0, right: "-2%", zIndex: 0 }}>
          <IllusB src="images/illus/passiflore-blanc.png" size={260} opacity={0.6} style={{ transform: "scaleX(-1)" }} />
        </div>
        <p className="text-center text-gray-600 max-w-2xl mx-auto mb-10 text-[15px] relative" style={{ zIndex: 1 }}>
          Vilaine Pousse grandit grâce à un réseau d'associations, de structures publiques et d'acteurs engagés du territoire rennais.
        </p>

        <PartnersCarousel partners={partners} />
      </div>
    </section>
  );
};

/* ────────────────────────────  FOOTER  ───────────────────────────── */
const Footer = () => (
  <footer className="bg-sage text-white relative overflow-hidden paper">
    {/* Illustration charte (blanc, opacité 60%) : abeille en haut à droite */}
    <div className="absolute pointer-events-none" style={{ top: 30, right: "3%", opacity: 0.6 }}>
      <IllusB src="images/illus/abeille-blanc.png" size={150} opacity={0.6} rotate={8} />
    </div>

    <div className="max-w-7xl mx-auto px-6 py-14 relative">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
        <div>
          <img src="images/logo-vp.png" alt="Vilaine Pousse" style={{ height: 190, width: "auto", filter: "brightness(0) invert(1)" }} />
          <p className="font-script text-2xl mt-3 text-white/95">Faisons pousser le collectif.</p>
          <div className="mt-4 inline-flex items-center gap-2 bg-white/15 px-3 py-1 rounded-full text-[11px] font-bold tracking-widest border border-white/25">
            ASSOCIATION LOI 1901
          </div>
        </div>

        <div>
          <div className="text-xs font-bold tracking-widest text-white/70 mb-4">NAVIGATION</div>
          <ul className="space-y-2 text-[14px]">
            <FooterLink href="#services">Nos services</FooterLink>
            <FooterLink href="#accompagnement">Accompagnement</FooterLink>
            <FooterLink href="#carte">Carte des lieux</FooterLink>
            <FooterLink href="#equipe">Notre équipe</FooterLink>
            <FooterLink href="#contact">Contact</FooterLink>
            <FooterLink href="mentions-legales.html">Mentions légales</FooterLink>
            <FooterLink href="politique-confidentialite.html">Politique de confidentialité</FooterLink>
          </ul>
        </div>

        <div>
          <div className="text-xs font-bold tracking-widest text-white/70 mb-4">CONTACT</div>
          <ul className="space-y-2 text-[14px]">
            <li>📍 7 rue Bahon Rault, 35000 Rennes</li>
            <li>✉️ <a className="hover:underline" href="mailto:vilainepousse@gmail.com">vilainepousse@gmail.com</a></li>
            <li>📱 06 26 63 81 09 · 07 77 38 66 99</li>
          </ul>
          <div className="mt-5 flex gap-2">
            <a href="https://www.instagram.com/vilainepousserennes/" target="_blank" rel="noopener noreferrer" className="bg-white/15 hover:bg-white/25 transition-colors rounded-full w-10 h-10 flex items-center justify-center text-white" aria-label="Instagram"><InstagramIcon /></a>
            <a href="https://www.facebook.com/p/Vilaine-Pousse-61560798231697/" target="_blank" rel="noopener noreferrer" className="bg-white/15 hover:bg-white/25 transition-colors rounded-full w-10 h-10 flex items-center justify-center text-white" aria-label="Facebook"><FacebookIcon /></a>
          </div>
        </div>
      </div>

      <div className="border-t border-white/20 mt-12 pt-6 flex flex-col md:flex-row justify-between gap-3 text-xs text-white/85">
        <div>
          © 2026 Vilaine Pousse · Association loi 1901 · SIRET 928 536 408 00018
        </div>
      </div>
    </div>
  </footer>
);

const FooterLink = ({ href, children }) => (
  <li>
    <a href={href} className="hover:text-pink-vp transition-colors">{children}</a>
  </li>
);

/* ────────────────────────────  STICKY NAV  ───────────────────────── */
const StickyNav = () => {
  const [open, setOpen] = useStateB(false);
  const [scrolled, setScrolled] = useStateB(false);

  useEffectB(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Sur le hero (haut de page) la navbar est transparente et le logo en blanc ;
  // au scroll elle devient crème avec le logo d'origine.
  const solid = scrolled || open;

  const links = [
    { href: "#carte", label: "Carte" },
    { href: "#accompagnement", label: "Accompagnement" },
    { href: "#services", label: "Services" },
    { href: "#equipe", label: "Équipe" },
  ];

  return (
    <nav
      className="fixed top-0 left-0 right-0 z-[1000] transition-all duration-300"
      style={{
        background: solid ? "rgba(255, 250, 240, 0.92)" : "transparent",
        backdropFilter: solid ? "blur(10px)" : "none",
        WebkitBackdropFilter: solid ? "blur(10px)" : "none",
        borderBottom: solid ? "1px solid rgba(125,184,154,0.2)" : "1px solid transparent",
      }}
    >
      <div className="max-w-7xl mx-auto px-6 py-3 flex items-center justify-between">
        <a href="#accueil" className="flex items-center group" aria-label="Vilaine Pousse · Rennes">
          <img
            src="images/logo-vp.png"
            alt="Vilaine Pousse · Rennes"
            style={{ height: 76, width: "auto", filter: solid ? "none" : "brightness(0) invert(1)", transition: "filter .3s ease" }}
          />
        </a>

        {/* Desktop nav */}
        <div className="hidden lg:flex items-center gap-1">
          {links.map(l => (
            <a key={l.href} href={l.href} className="nav-pill" style={solid ? undefined : { color: "white" }}>{l.label}</a>
          ))}
          <a href="#contact" className="ml-2 bg-pink-vp text-white px-5 py-2 rounded-full text-sm font-bold hover:bg-[#c92a51] transition-colors">
            Contact
          </a>
        </div>

        {/* Mobile */}
        <button
          className="lg:hidden bg-sage text-white px-4 py-2 rounded-full text-sm font-bold"
          onClick={() => setOpen(!open)}
        >
          {open ? "✕ Fermer" : "☰ Menu"}
        </button>
      </div>
      {open && (
        <div className="lg:hidden bg-white border-t border-sand px-6 py-4 space-y-2">
          {links.map(l => (
            <a
              key={l.href}
              href={l.href}
              className="block py-2 font-bold text-charcoal hover:text-sage"
              onClick={() => setOpen(false)}
            >{l.label}</a>
          ))}
          <a
            href="#contact"
            className="block py-2 font-bold text-pink-vp"
            onClick={() => setOpen(false)}
          >Contact</a>
        </div>
      )}
    </nav>
  );
};

window.SectionsBottom = { NotreEquipe, ContactezNous, NosPartenaires, Footer, StickyNav };