// leaf.jsx — 2.5D depth leaves: folded two-tone halves + veins + leaf-on-leaf
// cast shadows, layered back→front into a corner bouquet.
// Exports to window: LEAF_PALETTES, DepthLeaf, CornerCluster.

const LEAF_PALETTES = {
  sage:   { lightest: "#9cbb7e", light: "#86a86b", base: "#6f8f5a", dark: "#54704a", darker: "#3d5636", shadow: "rgba(45,62,38,0.30)" },
  forest: { lightest: "#74a06d", light: "#548053", base: "#3c6a3f", dark: "#2c5230", darker: "#1f3c24", shadow: "rgba(20,40,22,0.34)" },
  olive:  { lightest: "#b3bd72", light: "#9aa356", base: "#7f8943", dark: "#626b33", darker: "#474f24", shadow: "rgba(58,60,28,0.30)" },
};

function tiers(pal) {
  return {
    front: { light: pal.lightest, dark: pal.base,  vein: "rgba(255,255,255,0.22)", shadow: pal.shadow },
    mid:   { light: pal.light,    dark: pal.dark,   vein: "rgba(255,255,255,0.15)", shadow: pal.shadow },
    back:  { light: pal.dark,     dark: pal.darker, vein: "rgba(255,255,255,0.10)", shadow: pal.shadow },
  };
}

// One folded leaf: base at (0,0), tip up at (0,-len). Left half lit, right shaded.
function DepthLeaf({ len = 168, w = 48, shades, shadow = true }) {
  const lo = `M0 0 C ${-w} ${-len * 0.30}, ${-w * 0.78} ${-len * 0.80}, 0 ${-len}`;
  const ro = `M0 0 C ${w} ${-len * 0.30}, ${w * 0.78} ${-len * 0.80}, 0 ${-len}`;
  const veins = [];
  for (let i = 1; i <= 4; i++) {
    const y = -len * (i / 5);
    const reach = w * 0.64 * (1 - i / 6.5);
    veins.push(<path key={"lv" + i} d={`M0 ${y} Q ${-reach * 0.5} ${y - 3} ${-reach} ${y - reach * 0.75}`} fill="none" stroke={shades.vein} strokeWidth="1.4" strokeLinecap="round" />);
    veins.push(<path key={"rv" + i} d={`M0 ${y} Q ${reach * 0.5} ${y - 3} ${reach} ${y - reach * 0.75}`} fill="none" stroke={shades.vein} strokeWidth="1.4" strokeLinecap="round" />);
  }
  return (
    <g style={{ filter: shadow ? `drop-shadow(2px 6px 6px ${shades.shadow})` : "none" }}>
      <path d={`${lo} L0 0 Z`} fill={shades.light} />
      <path d={`${ro} L0 0 Z`} fill={shades.dark} />
      <path d={`M0 -2 L0 ${-len + 5}`} stroke={shades.vein} strokeWidth="1.8" strokeLinecap="round" fill="none" />
      {veins}
    </g>
  );
}

// A corner bouquet — leaves fan upward from (0,0); `aim` rotates the fan around
// that base so the page can point it inward from any corner.
// Drawn back→front so lighter, larger leaves sit on top of darker ones.
function CornerCluster({ paletteKey = "sage", sway = false, sprout = false, aim = 0 }) {
  const T = tiers(LEAF_PALETTES[paletteKey]);
  const leaves = [
    { rot: -50, s: 0.82, t: "back",  len: 178 },
    { rot: 50,  s: 0.82, t: "back",  len: 178 },
    { rot: -70, s: 0.6,  t: "back",  len: 150 },
    { rot: -26, s: 1.0,  t: "mid",   len: 176 },
    { rot: 28,  s: 1.0,  t: "mid",   len: 176 },
    { rot: 64,  s: 0.66, t: "mid",   len: 150 },
    { rot: -4,  s: 1.16, t: "front", len: 182 },
    { rot: 16,  s: 0.78, t: "front", len: 158 },
    { rot: -34, s: 0.62, t: "front", len: 140 },
  ];
  return (
    <svg viewBox="-230 -250 460 280" width="100%" style={{ overflow: "visible", display: "block" }} aria-hidden="true">
      <g className={sway ? "pk-sway-soft" : ""} style={{ transformOrigin: "0px 0px" }}>
        <g transform={`rotate(${aim})`}>
          {leaves.map((lf, i) => (
            <g
              key={i}
              className={sprout ? "pk-sprout" : ""}
              style={{ transformOrigin: "0px 0px", animationDelay: sprout ? `${0.15 + i * 0.07}s` : undefined }}
            >
              <g transform={`rotate(${lf.rot}) scale(${lf.s})`}>
                <DepthLeaf len={lf.len} w={lf.len * 0.29} shades={T[lf.t]} />
              </g>
            </g>
          ))}
        </g>
      </g>
    </svg>
  );
}

Object.assign(window, { LEAF_PALETTES, DepthLeaf, CornerCluster });