/* global React, Ornaments */
const { Leaf, Sprig, Branch, Flower, Butterfly, Bee, Squiggle, PlanetGarden, Illus, openLightbox } = Ornaments;

/* ───────────────────────────  HERO  ─────────────────────────── */
const Hero = () => (
  <section id="accueil" data-screen-label="01 Hero" className="relative overflow-hidden bg-sage paper flex items-center" style={{ minHeight: "92vh" }}>
    {/* Illustrations botaniques charte (blanc, opacité 60%) : lierre à gauche, liseron à droite.
        Consigne client 2026-07 : plus grandes et débordant visiblement du cadre (effet hors cadre). */}
    {/* Retour client 09/07 : deux lierres à gauche (assets pré-orientés par le client),
        haut-gauche décalé plus à gauche et plus haut, bas-gauche même dimension */}
    <div className="absolute pointer-events-none mobile-illus-hide" style={{ top: -420, left: "-13%" }}>
      <Illus src="images/illus/lierre-blanc_coin_haut_gauche.png" size={900} opacity={0.6} />
    </div>
    {/* Moitié de l'image hors cadre à gauche (retour client) : -450px = size/2 */}
    <div className="absolute pointer-events-none mobile-illus-hide" style={{ bottom: -80, left: -350 }}>
      <Illus src="images/illus/lierre-blanc_coin_bas_gauche.png" size={900} opacity={0.6} />
    </div>
    <div className="absolute pointer-events-none mobile-illus-hide" style={{ bottom: 350, right: "-15%" }}>
      <Illus src="images/illus/liseron-blanc.png" size={840} opacity={0.6} />
    </div>
    {/* Lierre coin bas droit (asset pré-orienté client), position de départ à affiner à la main */}
    <div className="absolute pointer-events-none mobile-illus-hide" style={{ bottom: -500, right: -500}}>
      <Illus src="images/illus/lierre-blanc_coin_bas_droit.png" size={900} opacity={0.6} />
    </div>
    {/* Variantes mobiles compactes des décors (les versions desktop ci-dessus sont
        masquées <768px par .mobile-illus-hide) */}
    <div className="absolute pointer-events-none md:hidden" style={{ top: -40, left: -70 }}>
      <Illus src="images/illus/lierre-blanc_coin_haut_gauche.png" size={280} opacity={0.5} />
    </div>
    <div className="absolute pointer-events-none md:hidden" style={{ bottom: -50, right: -90 }}>
      <Illus src="images/illus/liseron-blanc.png" size={300} opacity={0.5} />
    </div>

    {/* Contenu centré */}
    <div className="max-w-3xl mx-auto px-6 relative z-10 text-center text-white py-16">
      <h1 className="font-brush" style={{ fontSize: "clamp(50px, 9vw, 112px)", lineHeight: 0.95, letterSpacing: "0.01em" }}>
        Vilaine<br />Pousse
      </h1>

      <div className="mt-4 mb-8 flex items-center justify-center">
        <span className="font-script text-[26px] text-white/95">faisons pousser le collectif</span>
      </div>

      {/* Mots-clés sans icônes, sur deux lignes centrées (consigne client 2026-07) */}
      <div className="mb-8">
        <div className="flex flex-wrap justify-center gap-3 mb-3">
          {["Jardins partagés", "Biodiversité", "Low tech & récup"].map((t) => (
            <span key={t} className="bg-white/20 border-2 border-white/35 px-5 py-2 rounded-full text-[16px] md:text-[18px] font-extrabold">
              {t}
            </span>
          ))}
        </div>
        <div className="flex justify-center">
          <span className="bg-white/20 border-2 border-white/35 px-5 py-2 rounded-full text-[16px] md:text-[18px] font-extrabold">
            Événementiel
          </span>
        </div>
      </div>

      {/* Description concrète de l'asso, en gras, au-dessus de la citation (consigne client 2026-07) */}
      <p className="text-[16px] md:text-[17px] leading-relaxed text-white/95 font-bold max-w-2xl mx-auto mb-7">
        Vilaine Pousse accompagne les jardins partagés rennais et crée des espaces de rencontre autour de la transition écologique depuis 2024.
      </p>

      {/* Citation en police manuscrite (consigne client 2026-07) */}
      <p className="font-script text-[22px] md:text-[24px] leading-relaxed text-white/95 max-w-xl mx-auto mb-3">
        « Des jardins où la plante devient peinture, le bois devient objet, et les savoir-faire se transmettent. »
      </p>
      <p className="text-[15px] md:text-[16px] font-semibold text-white/85 mb-9">
        Animations, événements, ateliers, au plus près des habitant·e·s.
      </p>

      <div className="flex flex-wrap justify-center gap-3">
        <a href="#carte" className="bg-white text-sage px-6 py-3 rounded-full font-bold hover:bg-white/90 transition-colors">Explorer la carte</a>
        <a href="#contact" className="border-2 border-white/70 text-white px-6 py-3 rounded-full font-bold hover:bg-white/15 transition-colors">Nous rencontrer</a>
      </div>

      <div className="text-white/80 mt-12 text-sm font-semibold tracking-widest">↓ DÉCOUVRIR L'ASSO</div>
    </div>
  </section>
);

/* ───────────────────────  OÙ NOUS TROUVER  ─────────────────────── */
const OuNousTrouver = ({ MapRef }) => (
  <section id="trouver" data-screen-label="02 Trouver" className="relative bg-sand-soft paper py-20 overflow-hidden">
    {/* Illustrations d'ambiance supprimées : consigne client 2026-07 (fond parfaitement propre) */}
    <div className="max-w-7xl mx-auto px-6">
      <div className="text-center mb-12">
        <span className="font-script text-pink-vp" style={{ fontSize: "clamp(38px, 10vw, 56px)", lineHeight: 1 }}>Où nous trouver&nbsp;?</span>
        <div className="flex justify-center mt-3"><Squiggle color="#F2527D" w={120} /></div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-5 gap-8 items-stretch">
        {/* Map preview */}
        <div className="lg:col-span-3 relative">
          <div className="vp-card overflow-hidden" style={{ height: 380 }}>
            <iframe
              title="Carte Jardin du Hangar"
              src="https://www.openstreetmap.org/export/embed.html?bbox=-1.6900%2C48.1280%2C-1.6500%2C48.1450&amp;layer=mapnik&amp;marker=48.1365%2C-1.6700"
              style={{ width: "100%", height: "100%", border: 0 }}
              loading="lazy"
            />
          </div>
          <div className="absolute top-4 left-4 bg-pink-vp text-white px-3 py-1.5 rounded-full text-xs font-bold tracking-wide flex items-center gap-1.5">
            <span>📍</span> JARDIN DU HANGAR
          </div>
        </div>

        {/* Info card */}
        <div className="lg:col-span-2 vp-card p-8 relative">
          <span className="font-script text-olive text-3xl">Notre adresse</span>
          <h3 className="font-brush text-3xl text-sage mt-1 mb-5" style={{ letterSpacing: "0.01em" }}>
            Au Jardin du Hangar
          </h3>
          <div className="space-y-4 text-[15px]">
            <div className="flex gap-3">
              <span className="text-coral text-xl">📍</span>
              <div>
                <div className="font-bold">7 rue Bahon Rault</div>
                <div className="text-gray-700">35000 Rennes</div>
              </div>
            </div>
            <div className="flex gap-3">
              <span className="text-coral text-xl">🕒</span>
              <div>
                <div className="font-bold mb-1">Horaires d'ouverture</div>
                <div className="text-gray-700 leading-relaxed">Le mardi et le jeudi<br />entre 14h et 17h</div>
              </div>
            </div>
            <div className="pt-4 border-t border-sand">
              <a href="#carte" className="inline-flex items-center gap-2 text-sage font-bold hover:text-pink-vp transition-colors">
                Voir tous les jardins et composteurs partagés →
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* ──────────────────────  NOS AUTRES SERVICES  ───────────────────── */
const NosAutresServices = () => {
  const services = [
    {
      key: "permanences",
      title: "Les permanences",
      photoLabel: "La permanence\ndu mardi & jeudi",
      photo: "images/photos/permanence.jpg",
      bg: "beige",
      highlight: "Ateliers jardinage gratuits & ouverts à tous",
      lines: [
        { strong: "Mardi & jeudi", text: " · 14h à 17h" },
        { strong: "7 rue Bahon Rault", text: " · Rennes" },
      ],
      bullets: [
        "Broyat en libre service",
        "Bottes de paille et de foin · 3,50 € la botte",
        "Grain pour les poules · 0,50 € le kilo",
        "Réponse à vos questions jardinage & jardins partagés",
      ],
    },
    {
      key: "accueil-groupe",
      title: "L'accueil de groupe",
      photoLabel: "Atelier en groupe",
      photo: "images/photos/atelier-groupe.jpg",
      bg: "",
      lines: [
        { strong: "Séminaires d'entreprise", text: " au vert, en équipe" },
        { strong: "Scolaires", text: " · maternelle, primaire, collège, lycée" },
        { strong: "Structures sociales", text: " · maisons de quartier, centres sociaux, maisons de retraite, EHPAD" },
        { strong: "Temps festifs", text: " · événements, fêtes de quartier" },
      ],
      bullets: [
        "Ateliers jardinage, semis, compostage",
        "Ateliers bricolage, dessin, cuisine collective et couture",
        "Découverte de la biodiversité urbaine",
        "Devis personnalisé selon votre format",
      ],
    },
    {
      key: "commandes-groupees",
      title: "Les commandes groupées",
      photoLabel: "Plants en commande\ngroupée",
      photo: "images/photos/commandes-groupees.jpg",
      bg: "coral",
      lines: [
        { strong: "Plants potagers, aromatiques & fleurs", text: " · à prix tout doux" },
        { strong: "Espèces et chèques", text: " acceptés" },
      ],
      bullets: [
        "Bons de commande diffusés à chaque saison",
        "Retrait sur place, les jours de permanence",
        "Mutualisation = prix avantageux auprès des producteurs",
        "Variétés locales et bio",
      ],
    },
  ];

  return (
    <section id="services" data-screen-label="06 Services" className="bg-white">
      {/* BANNER : fond uni #84BF9E (consigne client 2026-07), texte centré via .banner */}
      <div className="banner relative overflow-hidden" style={{ background: "var(--vp-sage)" }}>
        <h2>NOS AUTRES SERVICES</h2>
      </div>

      <div className="max-w-7xl mx-auto px-6 py-16">
        {/* Sous-titre centré, illustration rose dessous à l'horizontale (consigne client 2026-07) */}
        <div className="max-w-4xl mx-auto mb-14 flex flex-col items-center gap-2">
          <p className="text-gray-700 text-lg text-center">
            Au-delà de l'accompagnement des jardins partagés, Vilaine Pousse vous propose :
          </p>
          {/* PNG source en diagonale (pointe en haut-gauche) : +135° pour poser la plante à
              l'horizontale, base vers le bord gauche, pointe vers le bord droit.
              Wrapper à hauteur réduite + overflow hidden : crop haut/bas pour coller au texte. */}
          <div style={{ height: 84, display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden" }}>
            <Illus src="images/illus/romarin-rose.png" size={170} opacity={0.9} tint="#F2527D" rotate={135} />
          </div>
        </div>

        {/* Service cards */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {services.map((s) => (
            <div key={s.key} className="vp-card hover-lift overflow-hidden relative flex flex-col">
              <div
                className={`photo-ph ${s.bg} ${s.photo ? "is-clickable" : ""}`}
                style={{ height: 200, borderRadius: 0, border: 0, ...(s.photo ? { backgroundImage: `url('${s.photo}')`, backgroundSize: "cover", backgroundPosition: "center" } : {}) }}
                onClick={s.photo ? () => openLightbox(s.photo, s.photoLabel.replace(/\n/g, " ")) : undefined}
              >
                {!s.photo && <span className="ph-label" style={{ whiteSpace: "pre-line" }}>{s.photoLabel}</span>}
                {s.kicker && (
                  <div
                    className="absolute top-3 right-3 font-script text-white px-3 py-1 rounded-full text-base font-bold"
                    style={{ background: s.kickerColor, transform: "rotate(-4deg)", fontSize: 20, lineHeight: 1, paddingBottom: 6 }}
                  >
                    {s.kicker}
                  </div>
                )}
              </div>
              <div className="p-6 flex flex-col gap-4 flex-1">
                <h3 className="font-script text-olive text-3xl leading-none">{s.title}</h3>
                {s.highlight && (
                  <div className="svc-highlight">
                    <span style={{ fontSize: 22 }}>🌿</span>
                    <span>{s.highlight}</span>
                  </div>
                )}
                <div className="space-y-1 text-[14px]">
                  {s.lines.map((l, i) => (
                    <p key={i} className="leading-snug">
                      <span className="font-bold">{l.strong}</span>{l.text}
                    </p>
                  ))}
                </div>
                <ul className="space-y-2 text-[14px] text-gray-700 mt-auto">
                  {s.bullets.map((b, i) => (
                    <li key={i} className="flex gap-2">
                      <Leaf color="#7a8246" size={16} strokeWidth={2} style={{ flexShrink: 0, marginTop: 3 }} />
                      <span className="leading-snug">{b}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          ))}
        </div>

        {/* Photo du jardin — ancre de lieu */}
        <div
          className="photo-ph is-clickable mt-12 relative"
          style={{ height: 240, backgroundImage: "url('images/photos/jardin-hangar.jpg')", backgroundSize: "cover", backgroundPosition: "center" }}
          onClick={() => openLightbox("images/photos/jardin-hangar.jpg", "Jardin du Hangar · 7 rue Bahon Rault, Rennes")}
        >
          <div className="absolute bottom-4 left-4 bg-white/95 rounded-full px-4 py-2 text-sm font-bold text-olive shadow-lg flex items-center gap-2">
            <span>📍</span> Jardin du Hangar · 7 rue Bahon Rault, Rennes
          </div>
        </div>

        {/* CTA strip */}
        <div className="mt-12 vp-card-soft p-8 flex flex-col md:flex-row items-center gap-6 bg-sand-soft">
          <div className="flex items-center gap-4">
            <div className="bg-coral text-white rounded-full w-16 h-16 flex items-center justify-center text-3xl flex-shrink-0">🌱</div>
            <div>
              <h3 className="font-script text-olive text-2xl md:text-3xl leading-snug">
                Un projet en tête&nbsp;? Une question&nbsp;?
              </h3>
              <p className="italic text-gray-600 text-sm mt-1">
                On vous répond vite, et on s'adapte à votre format.
              </p>
            </div>
          </div>
          <div className="md:ml-auto">
            <a href="#contact" className="btn-sage">
              Nous écrire →
            </a>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ─────────────────────  ACCOMPAGNEMENT (schéma main)  ───────────────────── */
const Accompagnement = () => {
  // Six pillars arranged around the central globe
  // Coordinates are in % of the notebook canvas (1100×900 design grid)
  const pillars = [
    { n: "01", title: "Identifier les besoins", body: "Mettre en lumière les attentes des habitants pour le jardin.", color: "var(--vp-sage)", x: 2, y: 4, tilt: "tilt-a", icon: "👂" },
    { n: "02", title: "Définir les objectifs", body: "Co-construire le jardin selon les envies : convivialité, biodiversité, production vivrière…", color: "var(--vp-pink)", x: 66, y: 1, tilt: "tilt-b", icon: "🎯" },
    { n: "03", title: "Aller à la rencontre des habitants", body: "Nous venons directement dans les quartiers, au plus près des habitants et de leurs besoins.", color: "var(--vp-coral)", x: 0, y: 42, tilt: "tilt-c", icon: "🚲" },
    { n: "04", title: "Animer & faire pousser les rencontres", body: "Événements, ateliers pédagogiques, fêtes du jardin pour souder le collectif.", color: "var(--vp-olive)", x: 66, y: 42, tilt: "tilt-d", icon: "🎉" },
    { n: "05", title: "Médiation bienveillante", body: "Intervention en cas de tensions au sein du collectif, écoute active, posture neutre.", color: "var(--vp-pink)", x: 8, y: 80, tilt: "tilt-e", icon: "🕊️" },
    { n: "06", title: "Accompagnement administratif", body: "Structuration de l'asso, rédaction des statuts, lien avec la Ville de Rennes.", color: "var(--vp-sage)", x: 60, y: 82, tilt: "tilt-f", icon: "📋" },
  ];

  return (
    <section id="accompagnement" data-screen-label="04 Accompagnement" className="relative bg-sage paper pt-10 pb-20 overflow-hidden" style={{ backgroundImage: "url('images/accompagnement.jpg')", backgroundSize: "cover", backgroundPosition: "center" }}>

      {/* Illustrations filaires (ciboulette, abeille, coccinelle) supprimées : consigne client 2026-07 (épuration) */}

      <div className="max-w-7xl mx-auto px-6 relative" style={{ zIndex: 1 }}>
        {/* Section heading sur deux lignes (consigne client 2026-07) :
            L1 « Notre méthode d'Accompagnement » en Petit Cochon, L2 « Des jardins partagés »
            en Dreaming Outloud plus petite. Retour Médérick 09/07 (2) : centrer « Des jardins
            partagés » pour qu'il tombe au centre, sous le bas du titre L1. */}
        <div className="text-white mb-10 flex justify-center">
          <div className="inline-block text-center accomp-title-shift">
            <h2 className="font-brush" style={{ fontSize: "clamp(38px, 5vw, 64px)", lineHeight: 1.05, letterSpacing: "0.01em" }}>
              Notre méthode d'Accompagnement
            </h2>
            <div className="font-script accomp-subtitle" style={{ fontSize: "clamp(24px, 3vw, 40px)", lineHeight: 1.1 }}>
              Des jardins partagés
            </div>
          </div>
        </div>

        {/* Schema wrapper (fond cahier retiré) */}
        <div className="relative mx-auto" style={{ maxWidth: 1100 }}>

          {/* The actual schema canvas (desktop) */}
          <div className="hidden lg:block relative" style={{ height: 700, paddingLeft: 70, paddingRight: 30, paddingBottom: 20 }}>
            {/* Planète (illustration 2 couches) en fond, cartes par-dessus, planète au centre */}
            <div className="absolute pointer-events-none" style={{ left: "50%", top: "50%", transform: "translate(-50%, -50%)", width: "115%" }}>
              {/* Spirale agrandie + légère rotation, planète rose agrandie (consigne client 2026-07) */}
              <img src="images/planete-fond.png" alt="" aria-hidden="true" style={{ display: "block", width: "100%", transform: "scale(1.12) rotate(6deg)" }} />
              <img src="images/planete-avant.png" alt="Notre planète" style={{ position: "absolute", inset: 0, width: "100%", transform: "scale(1.08)" }} />
            </div>

            {/* Flèches/branches en pointillés retirées : doublon avec les branches déjà dessinées dans l'illustration de la planète */}

            {/* Sticky notes for each pillar */}
            {pillars.map((p, i) => (
              <div
                key={i}
                className={`sticky-note ${p.tilt} absolute`}
                style={{ left: `${p.x}%`, top: `${p.y}%`, width: 290 }}
              >
                <div className="num-badge" style={{ background: p.color, width: 52, height: 52, fontSize: 26, top: -22, left: -22 }}>{p.n}</div>
                <div className="font-script leading-tight pr-8" style={{ color: p.color, fontSize: 30, fontWeight: 700 }}>
                  {p.title}
                </div>
                <p className="text-[14px] leading-snug text-gray-700 mt-2">{p.body}</p>
              </div>
            ))}
          </div>

          {/* Mobile / tablet stacked version */}
          <div className="lg:hidden px-6 pb-10 pt-4">
            <div className="flex justify-center mb-2 relative">
              <div className="relative" style={{ width: 300 }}>
                <img src="images/planete-fond.png" alt="" aria-hidden="true" style={{ display: "block", width: "100%" }} />
                <img src="images/planete-avant.png" alt="Notre planète" style={{ position: "absolute", inset: 0, width: "100%" }} />
              </div>
            </div>
            <div className="text-center mb-8">
              <span className="font-brush text-pink-vp text-3xl">le jardin</span>
              <div className="font-script text-olive text-xl">↓ et autour, six gestes</div>
            </div>
            <div className="space-y-7 max-w-md mx-auto">
              {pillars.map((p, i) => (
                <div key={i} className={`sticky-note ${p.tilt} relative`}>
                  <div className="num-badge" style={{ background: p.color }}>{p.n}</div>
                    <div className="font-script leading-tight pr-6" style={{ color: p.color, fontSize: 24, fontWeight: 700 }}>
                    {p.title}
                  </div>
                  <p className="text-sm leading-snug text-gray-700 mt-1.5">{p.body}</p>
                </div>
              ))}
            </div>
          </div>

        </div>
      </div>
    </section>
  );
};

window.SectionsTop = { Hero, OuNousTrouver, NosAutresServices, Accompagnement };