/* global React */
// Vilaine Pousse — botanical ornaments (hand-drawn SVG line art)
// All ornaments are color-controlled by `stroke` prop or current color.

const Leaf = ({ color = "white", size = 60, rotate = 0, style = {}, strokeWidth = 1.6 }) => (
  <svg
    width={size} height={size} viewBox="0 0 60 60"
    style={{ transform: `rotate(${rotate}deg)`, ...style }}
    fill="none" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"
  >
    <path d="M30 6 C 14 14, 8 32, 12 52 C 26 50, 44 38, 52 14 C 42 18, 34 22, 30 28" />
    <path d="M30 28 C 24 36, 20 42, 16 50" />
    <path d="M36 22 L 30 28" />
    <path d="M40 18 L 30 28" />
  </svg>
);

const Sprig = ({ color = "white", size = 80, rotate = 0, style = {}, strokeWidth = 1.4 }) => (
  <svg width={size} height={size * 1.4} viewBox="0 0 60 84"
    style={{ transform: `rotate(${rotate}deg)`, ...style }}
    fill="none" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"
  >
    <path d="M30 82 C 30 60, 30 40, 30 6" />
    {[18, 30, 42, 54, 66].map((y, i) => (
      <g key={i}>
        <path d={`M30 ${y} C ${i % 2 ? 14 : 46} ${y - 4}, ${i % 2 ? 8 : 52} ${y + 2}, ${i % 2 ? 6 : 54} ${y + 8}`} />
        <path d={`M${i % 2 ? 10 : 50} ${y + 3} q ${i % 2 ? -4 : 4} -3, ${i % 2 ? -7 : 7} 0`} />
      </g>
    ))}
  </svg>
);

const Branch = ({ color = "white", w = 220, h = 90, style = {}, strokeWidth = 1.5 }) => (
  <svg width={w} height={h} viewBox="0 0 220 90" style={style}
    fill="none" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"
  >
    <path d="M4 60 C 60 50, 110 70, 216 36" />
    {[
      [40, 56, -1], [70, 50, 1], [100, 60, -1], [130, 56, 1],
      [160, 48, -1], [190, 42, 1], [55, 52, 1], [115, 58, 1], [175, 44, -1]
    ].map(([x, y, side], i) => (
      <g key={i}>
        <path d={`M${x} ${y} C ${x + 4 * side} ${y - 12}, ${x + 10 * side} ${y - 14}, ${x + 14 * side} ${y - 8}`} />
        <path d={`M${x + 4 * side} ${y - 6} q ${4 * side} -2, ${8 * side} 0`} />
      </g>
    ))}
  </svg>
);

const Flower = ({ color = "white", size = 50, rotate = 0, style = {}, strokeWidth = 1.5, fillCenter }) => (
  <svg width={size} height={size} viewBox="0 0 50 50"
    style={{ transform: `rotate(${rotate}deg)`, ...style }}
    fill="none" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"
  >
    {[0, 72, 144, 216, 288].map((a, i) => (
      <ellipse key={i} cx="25" cy="14" rx="6" ry="10" transform={`rotate(${a} 25 25)`} />
    ))}
    <circle cx="25" cy="25" r="4" fill={fillCenter || "none"} />
  </svg>
);

const Butterfly = ({ color = "white", size = 60, rotate = 0, style = {}, strokeWidth = 1.5 }) => (
  <svg width={size} height={size * 0.75} viewBox="0 0 80 60"
    style={{ transform: `rotate(${rotate}deg)`, ...style }}
    fill="none" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"
  >
    <path d="M40 18 L 40 50" />
    <path d="M40 18 C 22 4, 6 8, 10 24 C 14 38, 30 36, 40 30" />
    <path d="M40 18 C 58 4, 74 8, 70 24 C 66 38, 50 36, 40 30" />
    <path d="M40 30 C 28 36, 18 42, 16 50 C 26 48, 34 44, 40 40" />
    <path d="M40 30 C 52 36, 62 42, 64 50 C 54 48, 46 44, 40 40" />
    <path d="M40 16 L 36 8" />
    <path d="M40 16 L 44 8" />
    <circle cx="36" cy="6" r="1.5" fill={color} stroke="none" />
    <circle cx="44" cy="6" r="1.5" fill={color} stroke="none" />
  </svg>
);

const Bee = ({ color = "white", size = 44, rotate = 0, style = {}, strokeWidth = 1.4 }) => (
  <svg width={size} height={size * 0.7} viewBox="0 0 60 42"
    style={{ transform: `rotate(${rotate}deg)`, ...style }}
    fill="none" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"
  >
    <ellipse cx="28" cy="24" rx="16" ry="10" />
    <path d="M22 16 L 22 32" />
    <path d="M30 14 L 30 34" />
    <path d="M38 16 L 38 32" />
    <path d="M44 24 L 50 22" />
    <ellipse cx="20" cy="14" rx="10" ry="5" />
    <ellipse cx="36" cy="14" rx="10" ry="5" />
  </svg>
);

const Squiggle = ({ color = "white", w = 120, h = 24, style = {}, strokeWidth = 2 }) => (
  <svg width={w} height={h} viewBox="0 0 120 24" style={style}
    fill="none" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round"
  >
    <path d="M2 12 Q 18 2, 30 12 T 60 12 T 90 12 T 118 12" />
  </svg>
);

const Heart = ({ color = "#F2527D", size = 18, style = {} }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" style={style}
    fill={color} stroke="none">
    <path d="M12 21s-7-4.5-9.5-9.5C.7 7.5 3 3.5 7 3.5c2 0 3.5 1 5 3 1.5-2 3-3 5-3 4 0 6.3 4 4.5 8C19 16.5 12 21 12 21z" />
  </svg>
);

/* Earth globe — uses Google's Noto Color Emoji asset for a clean, real-looking Earth */
const PlanetGarden = ({ size = 340 }) => (
  <div
    style={{
      width: size,
      height: size,
      position: "relative",
      display: "inline-block",
    }}
    aria-hidden="true"
  >
    {/* outer dashed orbit ring (hand-drawn schema feel) */}
    <svg
      viewBox="0 0 340 340"
      style={{ position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none" }}
    >
      <circle cx="170" cy="170" r="158" stroke="white" strokeOpacity="0.45"
        strokeWidth="1.4" strokeDasharray="3 7" fill="none" />
      <circle cx="170" cy="170" r="146" stroke="white" strokeOpacity="0.22"
        strokeWidth="1" strokeDasharray="2 8" fill="none" />
    </svg>

    {/* The Earth — Google Noto Color Emoji "Globe Europe-Africa" (U+1F30D) */}
    <img
      src="https://fonts.gstatic.com/s/e/notoemoji/latest/1f30d/512.png"
      alt=""
      loading="lazy"
      style={{
        position: "absolute",
        top: "50%",
        left: "50%",
        width: "78%",
        height: "78%",
        transform: "translate(-50%, -50%)",
        filter: "drop-shadow(0 14px 28px rgba(0,30,60,0.35)) drop-shadow(0 4px 8px rgba(0,30,60,0.18))",
      }}
    />
  </div>
);

/* Illustrations botaniques (PNG line-art 1000×1000, charte Vilaine Pousse)
   - Sans `tint` : rendu direct de la PNG blanche avec opacité.
   - Avec `tint` : masque CSS pour recolorer le trait vers une couleur charte. */
const Illus = ({ src, size = 200, rotate = 0, opacity = 0.6, tint, style = {} }) => {
  const base = {
    width: size,
    height: size,
    transform: rotate ? `rotate(${rotate}deg)` : undefined,
    pointerEvents: "none",
    ...style,
  };
  if (tint) {
    return (
      <div
        aria-hidden="true"
        style={{
          ...base,
          opacity,
          backgroundColor: tint,
          WebkitMaskImage: `url(${src})`,
          maskImage: `url(${src})`,
          WebkitMaskSize: "contain",
          maskSize: "contain",
          WebkitMaskRepeat: "no-repeat",
          maskRepeat: "no-repeat",
          WebkitMaskPosition: "center",
          maskPosition: "center",
        }}
      />
    );
  }
  return <img src={src} alt="" aria-hidden="true" style={{ ...base, display: "block", objectFit: "contain", opacity }} />;
};

/* Lightbox — clic sur une vraie photo pour l'afficher en grand.
   Appeler openLightbox(src, legende) depuis n'importe quelle section ;
   <Lightbox /> est monté une fois dans App. */
const openLightbox = (src, caption) =>
  window.dispatchEvent(new CustomEvent("vp-lightbox", { detail: { src, caption } }));

const Lightbox = () => {
  const [item, setItem] = React.useState(null);
  React.useEffect(() => {
    const onOpen = (e) => setItem(e.detail);
    const onKey = (e) => { if (e.key === "Escape") setItem(null); };
    window.addEventListener("vp-lightbox", onOpen);
    window.addEventListener("keydown", onKey);
    return () => {
      window.removeEventListener("vp-lightbox", onOpen);
      window.removeEventListener("keydown", onKey);
    };
  }, []);
  React.useEffect(() => {
    document.body.style.overflow = item ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [item]);
  if (!item) return null;
  return (
    <div
      onClick={() => setItem(null)}
      style={{
        position: "fixed", inset: 0, zIndex: 3000,
        background: "rgba(20,20,15,0.88)",
        display: "flex", alignItems: "center", justifyContent: "center",
        padding: 24, cursor: "zoom-out",
      }}
    >
      <button
        onClick={() => setItem(null)}
        aria-label="Fermer"
        style={{
          position: "absolute", top: 18, right: 22,
          width: 44, height: 44, borderRadius: "999px",
          background: "rgba(255,255,255,0.15)", color: "white",
          border: "1px solid rgba(255,255,255,0.35)", fontSize: 20, cursor: "pointer",
        }}
      >✕</button>
      <figure style={{ margin: 0, maxWidth: "92vw", maxHeight: "92vh", textAlign: "center" }} onClick={(e) => e.stopPropagation()}>
        <img
          src={item.src}
          alt={item.caption || ""}
          style={{ maxWidth: "92vw", maxHeight: "84vh", objectFit: "contain", borderRadius: 12, boxShadow: "0 24px 70px rgba(0,0,0,0.5)" }}
        />
        {item.caption && (
          <figcaption style={{ marginTop: 14, color: "white", fontFamily: "'Dreaming Outloud', cursive", fontSize: 24, lineHeight: 1.2 }}>
            {item.caption}
          </figcaption>
        )}
      </figure>
    </div>
  );
};

window.Ornaments = { Leaf, Sprig, Branch, Flower, Butterfly, Bee, Squiggle, Heart, PlanetGarden, Illus, Lightbox, openLightbox };