/* global React */
/* Jungle / tropical botanical decorations — silhouette SVGs.
   Scattered behind content for a "tiki pub" feel.
   All shapes use currentColor + opacity so they tint with the theme. */

function Monstera({ size = 240, rot = 0, color = "#1f4a36" }) {
  return (
    <svg viewBox="-100 -100 200 200" width={size} height={size}
         style={{ transform: `rotate(${rot}deg)`, color, display: "block" }}>
      <g fill="currentColor" fillRule="evenodd">
        {/* leaf outer silhouette with even-odd to cut notches */}
        <path d="
          M 0 -95
          C -45 -88, -85 -55, -88 -10
          C -92 40, -65 78, -25 90
          C -8 95, 8 95, 25 90
          C 65 78, 92 40, 88 -10
          C 85 -55, 45 -88, 0 -95 Z
          M -10 -75 L -10 80 L 10 80 L 10 -75 Z
          M -78 -10 L -28 -10 L -28 -22 L -78 -22 Z
          M -68 30 L -22 30 L -22 18 L -68 18 Z
          M -50 65 L -14 65 L -14 53 L -50 53 Z
          M 78 -10 L 28 -10 L 28 -22 L 78 -22 Z
          M 68 30 L 22 30 L 22 18 L 68 18 Z
          M 50 65 L 14 65 L 14 53 L 50 53 Z
          M -55 -50 L -18 -50 L -18 -62 L -55 -62 Z
          M 55 -50 L 18 -50 L 18 -62 L 55 -62 Z
        " />
      </g>
    </svg>
  );
}

function PalmFrond({ size = 280, rot = 0, color = "#1d4030" }) {
  // long banana/palm leaf with central vein and side notches
  const pinnae = [];
  for (let i = -7; i <= 7; i++) {
    const x = i * 10;
    const len = 40 - Math.abs(i) * 3.5;
    if (len < 5) continue;
    pinnae.push(<ellipse key={i} cx={x} cy={0} rx={6} ry={len}
      transform={`rotate(${i * 6} ${x} 0) translate(0 ${len * 0.6})`} />);
  }
  return (
    <svg viewBox="-90 -160 180 320" width={size} height={size * 1.7}
         style={{ transform: `rotate(${rot}deg)`, color, display: "block" }}>
      <g fill="currentColor">
        {/* stem */}
        <rect x="-2" y="-150" width="4" height="300" rx="2" />
        {/* pinnae top */}
        <g transform="translate(0 -80)">{pinnae}</g>
        <g transform="translate(0 0)">{pinnae}</g>
        <g transform="translate(0 80)">{pinnae}</g>
      </g>
    </svg>
  );
}

function BananaLeaf({ size = 260, rot = 0, color = "#23533a" }) {
  // elongated leaf with diagonal veins
  return (
    <svg viewBox="-80 -160 160 320" width={size * 0.6} height={size}
         style={{ transform: `rotate(${rot}deg)`, color, display: "block" }}>
      <g fill="currentColor">
        <path d="M 0 -155
                 C -50 -140, -72 -80, -68 0
                 C -65 80, -42 140, 0 155
                 C 42 140, 65 80, 68 0
                 C 72 -80, 50 -140, 0 -155 Z" />
      </g>
      {/* veins */}
      <g stroke="rgba(0,0,0,0.25)" strokeWidth="2" fill="none">
        <path d="M 0 -150 L 0 150" />
        <path d="M -10 -120 Q -40 -100, -60 -70" />
        <path d="M -10 -60 Q -45 -40, -65 0" />
        <path d="M -10 0 Q -45 20, -65 60" />
        <path d="M -10 60 Q -40 80, -55 110" />
        <path d="M 10 -120 Q 40 -100, 60 -70" />
        <path d="M 10 -60 Q 45 -40, 65 0" />
        <path d="M 10 0 Q 45 20, 65 60" />
        <path d="M 10 60 Q 40 80, 55 110" />
      </g>
    </svg>
  );
}

function Strelitzia({ size = 220, rot = 0 }) {
  // Bird-of-paradise — green "boat" bract + orange flame petals + a blue vertical petal
  return (
    <svg viewBox="-110 -160 220 320" width={size} height={size * 1.45}
         style={{ transform: `rotate(${rot}deg)`, display: "block" }}>
      {/* Long stem */}
      <rect x="-3" y="-20" width="6" height="180" rx="3" fill="#1f4a36" />

      {/* Boat-shaped green bract (the horizontal "beak") */}
      <path d="M -100 0
               C -100 -22, -10 -38, 30 -25
               C 70 -15, 95 5, 95 15
               C 95 22, 60 18, 0 14
               C -60 10, -100 18, -100 0 Z"
            fill="#1a3d2a" />
      <path d="M -98 -2 C -50 -28, 30 -32, 90 -12"
            stroke="#0f2418" strokeWidth="2" fill="none" />

      {/* Orange flame petals (the "feathers") fanning upward */}
      <g transform="translate(-20 -10)">
        {[-55, -35, -15, 5].map((a, i) => (
          <g key={i} transform={`rotate(${a})`}>
            <path d="M 0 0 L -8 -85 L 0 -100 L 8 -85 Z"
                  fill={i % 2 ? "#ff8a3a" : "#ff6f24"} />
            <line x1="0" y1="-10" x2="0" y2="-92"
                  stroke="rgba(0,0,0,0.25)" strokeWidth="1.5" />
          </g>
        ))}
      </g>
      {/* One blue vertical petal jutting forward */}
      <g transform="translate(8 -10)">
        <path d="M 0 0 L -5 -70 L 0 -82 L 5 -70 Z"
              fill="#2a5a9a" />
      </g>

      {/* Yellow accent at base of petals */}
      <ellipse cx="-15" cy="-8" rx="14" ry="6" fill="#ffc744" opacity="0.85" />
    </svg>
  );
}

function Hibiscus({ size = 160, rot = 0, color = "#d94a2e" }) {
  // 5-petal hibiscus silhouette + stamen
  const petals = [];
  for (let i = 0; i < 5; i++) {
    const a = (i / 5) * 360 - 90;
    petals.push(
      <ellipse key={i} cx="0" cy="-44" rx="28" ry="40"
        transform={`rotate(${a})`} fill="currentColor" />
    );
  }
  return (
    <svg viewBox="-90 -90 180 180" width={size} height={size}
         style={{ transform: `rotate(${rot}deg)`, color, display: "block" }}>
      {petals}
      {/* dark center */}
      <circle r="14" fill="#5a1a0d" />
      {/* stamen */}
      <g stroke="#ffc744" strokeWidth="2" strokeLinecap="round">
        <line x1="0" y1="0" x2="3" y2="-26" />
        <line x1="0" y1="0" x2="-3" y2="-30" />
        <line x1="0" y1="0" x2="6" y2="-32" />
        <line x1="0" y1="0" x2="-6" y2="-28" />
      </g>
      <g fill="#ffc744">
        <circle cx="3" cy="-28" r="2.5" />
        <circle cx="-4" cy="-32" r="2.5" />
        <circle cx="7" cy="-34" r="2.5" />
        <circle cx="-6" cy="-30" r="2.5" />
      </g>
    </svg>
  );
}

/* ─────────────────────────────────────────────────────────────────
   JungleBackdrop — scatters botanicals across the full page height.
   Positioned absolute behind all content via z-index: 0.
   Page content needs position:relative & z-index >= 1.
   ───────────────────────────────────────────────────────────────── */
function JungleBackdrop() {
  // pre-positioned arrangement so layout is deliberate, not random
  const items = [
    // hero corners
    { c: <Monstera size={420} rot={-25} />,    style: { top: -40, left: -160, opacity: 0.35 } },
    { c: <PalmFrond size={360} rot={20} color="#1d4030" />, style: { top: 80, right: -180, opacity: 0.30 } },
    { c: <BananaLeaf size={380} rot={-30} />,  style: { top: 540, left: -120, opacity: 0.28 } },
    { c: <Strelitzia size={300} rot={-12} />,  style: { top: 360, right: 60, opacity: 0.55 } },

    // about / menu transition
    { c: <Monstera size={300} rot={45} color="#1a3d2c" />, style: { top: 1500, right: -100, opacity: 0.25 } },
    { c: <BananaLeaf size={300} rot={50} color="#23533a" />, style: { top: 1900, left: -120, opacity: 0.28 } },

    // menu beer area
    { c: <PalmFrond size={320} rot={-35} color="#1f4030" />, style: { top: 2700, right: -180, opacity: 0.22 } },
    { c: <Strelitzia size={260} rot={18} />,   style: { top: 3000, left: -40, opacity: 0.50 } },

    // events
    { c: <Monstera size={340} rot={-20} color="#1f4a36" />, style: { top: 4400, left: -160, opacity: 0.25 } },
    { c: <Hibiscus size={140} rot={15} color="#d94a2e" />, style: { top: 4500, right: 120, opacity: 0.85 } },

    // gallery / info
    { c: <BananaLeaf size={360} rot={25} color="#23533a" />, style: { top: 5600, right: -180, opacity: 0.25 } },
    { c: <Strelitzia size={280} rot={-8} />,   style: { top: 6800, right: -30, opacity: 0.5 } },
    { c: <PalmFrond size={360} rot={45} color="#1d4030" />, style: { top: 7400, left: -200, opacity: 0.22 } },

    // footer
    { c: <Monstera size={280} rot={-40} color="#162e22" />, style: { top: 8700, left: -100, opacity: 0.28 } },
    { c: <Hibiscus size={120} rot={-25} color="#a8341e" />, style: { top: 8800, right: 80, opacity: 0.7 } },
  ];

  return (
    <div className="jungle-backdrop" aria-hidden="true" style={{
      position: "absolute",
      inset: 0,
      pointerEvents: "none",
      overflow: "hidden",
      zIndex: 0
    }}>
      {items.map((it, i) => (
        <div key={i} style={{ position: "absolute", ...it.style }}>
          {it.c}
        </div>
      ))}
    </div>
  );
}

window.JungleBackdrop = JungleBackdrop;
window.Strelitzia = Strelitzia;
window.Hibiscus = Hibiscus;
window.Monstera = Monstera;
window.PalmFrond = PalmFrond;
window.BananaLeaf = BananaLeaf;