// Floating cute stickers — stars, suns, rainbows, hearts, clouds, sparkles.

function StarSticker({ color = "#D6B89A", spin = 0 }) {
  return (
    <svg viewBox="0 0 40 40" style={{ width: "100%", height: "100%", transform: `rotate(${spin}deg)` }}>
      <path d="M20 3 L24 16 L37 16 L26.5 24 L30.5 37 L20 29 L9.5 37 L13.5 24 L3 16 L16 16 Z"
            fill={color} stroke="#fff" strokeWidth="1.5" strokeLinejoin="round"/>
      <circle cx="16" cy="18" r="1.5" fill="#fff" opacity=".7"/>
    </svg>
  );
}

function SunSticker({ color = "#E8C9A8", face = true }) {
  const rays = [];
  for (let i = 0; i < 8; i++) {
    const a = (i / 8) * Math.PI * 2;
    rays.push(
      <line key={i}
        x1={20 + Math.cos(a) * 13} y1={20 + Math.sin(a) * 13}
        x2={20 + Math.cos(a) * 18} y2={20 + Math.sin(a) * 18}
        stroke={color} strokeWidth="2.5" strokeLinecap="round"/>
    );
  }
  return (
    <svg viewBox="0 0 40 40" style={{ width: "100%", height: "100%" }}>
      {rays}
      <circle cx="20" cy="20" r="10" fill={color} stroke="#fff" strokeWidth="1.5"/>
      {face && (
        <g fill="#5a3a1a">
          <circle cx="16.5" cy="19" r="1.2"/>
          <circle cx="23.5" cy="19" r="1.2"/>
          <path d="M16 22.5 Q20 25.5 24 22.5" stroke="#5a3a1a" strokeWidth="1.3" fill="none" strokeLinecap="round"/>
          <circle cx="14" cy="22" r=".8" fill="#FF8FAB" opacity=".7"/>
          <circle cx="26" cy="22" r=".8" fill="#FF8FAB" opacity=".7"/>
        </g>
      )}
    </svg>
  );
}

function RainbowSticker() {
  const bands = [
    { r: 18, c: "#E6CCDB" },
    { r: 15, c: "#E8C9A8" },
    { r: 12, c: "#EBDFB8" },
    { r: 9,  c: "#CFE0D0" },
    { r: 6,  c: "#CDD4DE" }
  ];
  return (
    <svg viewBox="0 0 40 28" style={{ width: "100%", height: "100%" }}>
      {bands.map((b, i) => (
        <path key={i} d={`M${20 - b.r} 24 A${b.r} ${b.r} 0 0 1 ${20 + b.r} 24`}
              stroke={b.c} strokeWidth="3" fill="none" strokeLinecap="round"/>
      ))}
      <ellipse cx="6" cy="24" rx="5" ry="2.5" fill="#fff"/>
      <ellipse cx="34" cy="24" rx="5" ry="2.5" fill="#fff"/>
    </svg>
  );
}

function HeartSticker({ color = "#E6CCDB" }) {
  return (
    <svg viewBox="0 0 40 40" style={{ width: "100%", height: "100%" }}>
      <path d="M20 34 C20 34 6 26 6 16 C6 11 10 7 14 7 C17 7 19 9 20 11 C21 9 23 7 26 7 C30 7 34 11 34 16 C34 26 20 34 20 34 Z"
            fill={color} stroke="#fff" strokeWidth="1.5" strokeLinejoin="round"/>
      <ellipse cx="15" cy="14" rx="2" ry="3" fill="#fff" opacity=".55" transform="rotate(-25 15 14)"/>
    </svg>
  );
}

function SparkleSticker({ color = "#D6B89A" }) {
  return (
    <svg viewBox="0 0 40 40" style={{ width: "100%", height: "100%" }}>
      <path d="M20 4 Q22 18 36 20 Q22 22 20 36 Q18 22 4 20 Q18 18 20 4 Z"
            fill={color} stroke="#fff" strokeWidth="1" strokeLinejoin="round"/>
    </svg>
  );
}

function CloudSticker({ color = "#fff" }) {
  return (
    <svg viewBox="0 0 50 30" style={{ width: "100%", height: "100%" }}>
      <path d="M12 22 Q4 22 4 16 Q4 10 11 10 Q12 4 18 4 Q24 4 26 9 Q29 6 33 8 Q40 8 40 15 Q46 16 46 22 Z"
            fill={color} stroke="#E0DCD4" strokeWidth="1.5"/>
    </svg>
  );
}

function FlowerSticker({ color = "#E6CCDB", center = "#E8C9A8" }) {
  return (
    <svg viewBox="0 0 40 40" style={{ width: "100%", height: "100%" }}>
      {[0,1,2,3,4].map(i => {
        const a = (i / 5) * Math.PI * 2 - Math.PI / 2;
        return <circle key={i} cx={20 + Math.cos(a) * 9} cy={20 + Math.sin(a) * 9} r="7" fill={color} stroke="#fff" strokeWidth="1.2"/>;
      })}
      <circle cx="20" cy="20" r="5" fill={center} stroke="#fff" strokeWidth="1.2"/>
    </svg>
  );
}

function FloatingDecor({ density = "light" }) {
  if (density === "none") return null;
  const all = [
    { Comp: StarSticker,    props: { color: "#D6B89A" },                size: 34, top:  "6%",  left: "8%",  delay: 0,   dur: 7 },
    { Comp: RainbowSticker, props: {},                                   size: 50, top:  "11%", right: "6%", delay: 1,   dur: 9 },
    { Comp: SunSticker,     props: { color: "#E8C9A8" },                 size: 46, top:  "32%", left: "-2%", delay: 2,   dur: 8 },
    { Comp: HeartSticker,   props: { color: "#E6CCDB" },                 size: 28, top:  "38%", right: "3%", delay: 0.5, dur: 6 },
    { Comp: SparkleSticker, props: { color: "#CDD4DE" },                 size: 24, top:  "58%", left: "5%",  delay: 1.5, dur: 7 },
    { Comp: FlowerSticker,  props: { color: "#E6CCDB" },                 size: 34, top:  "62%", right: "-2%", delay: 2.5, dur: 8 },
    { Comp: StarSticker,    props: { color: "#CFE0D0", spin: 15 },       size: 22, top:  "78%", left: "10%", delay: 1,   dur: 6 },
    { Comp: CloudSticker,   props: {},                                   size: 54, top:  "84%", right: "8%", delay: 0,   dur: 10 },
    { Comp: HeartSticker,   props: { color: "#CFE0D0" },                 size: 20, top:  "92%", left: "6%",  delay: 3,   dur: 7 },
    { Comp: SparkleSticker, props: { color: "#E8C9A8" },                 size: 20, top:  "20%", left: "48%", delay: 2,   dur: 5 },
    { Comp: FlowerSticker,  props: { color: "#CDD4DE", center: "#E8C9A8" }, size: 26, top: "50%", left: "92%", delay: 1, dur: 7 },
    { Comp: StarSticker,    props: { color: "#CFE0D0" },                 size: 20, top:  "70%", left: "94%", delay: 0,   dur: 6 }
  ];
  const counts = { light: 5, medium: 9, lots: 12 };
  const items = all.slice(0, counts[density] || 9);
  return (
    <div className="decor-field" aria-hidden="true">
      {items.map((it, idx) => {
        const { Comp, props, size, top, left, right, delay, dur } = it;
        return (
          <div key={idx} style={{
            position: "absolute", top, left, right,
            width: size, height: size,
            animation: `floaty ${dur}s ease-in-out ${delay}s infinite`,
            opacity: 0.85,
            filter: "drop-shadow(0 3px 6px rgba(0, 0, 0, .06))"
          }}>
            <Comp {...props}/>
          </div>
        );
      })}
    </div>
  );
}

Object.assign(window, {
  StarSticker, SunSticker, RainbowSticker, HeartSticker,
  SparkleSticker, CloudSticker, FlowerSticker, FloatingDecor
});