/* Lovingo — animated background scene + minimalist line icons */

function AppBackground({ density }) {
  // density: 0..1 controls particle count + opacity
  const count = Math.round(8 + density * 30);
  const glyphs = React.useMemo(() => {
    const kinds = ["heart", "star", "puzzle", "dot"];
    const arr = [];
    for (let i = 0; i < count; i++) {
      arr.push({
        kind: kinds[i % kinds.length],
        left: Math.random() * 100,
        size: 10 + Math.random() * 22,
        dur: 18 + Math.random() * 26,
        delay: -Math.random() * 40,
        op: 0.08 + Math.random() * 0.16,
        rot: (Math.random() * 80 - 40) + "deg",
      });
    }
    return arr;
  }, [count]);

  return (
    <div className="app-bg">
      <div className="aurora a" />
      <div className="aurora b" />
      <div className="aurora c" />
      <div className="particles">
        {glyphs.map((g, i) => (
          <span
            key={i}
            className="glyph"
            style={{
              left: g.left + "vw",
              bottom: "-40px",
              animationDuration: g.dur + "s",
              animationDelay: g.delay + "s",
              "--gl-op": g.op * (0.4 + density),
              "--gl-rot": g.rot,
            }}
          >
            <GlyphIcon kind={g.kind} size={g.size} />
          </span>
        ))}
      </div>
    </div>
  );
}

function GlyphIcon({ kind, size }) {
  const s = { width: size, height: size, display: "block" };
  if (kind === "heart") {
    return (
      <svg viewBox="0 0 24 24" style={s} fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round">
        <path d="M12 20.5l-1.4-1.27C5.5 14.6 2.25 11.66 2.25 8.05 2.25 5.1 4.56 2.8 7.5 2.8c1.66 0 3.25.77 4.5 2.06C13.25 3.57 14.84 2.8 16.5 2.8c2.94 0 5.25 2.3 5.25 5.25 0 3.61-3.25 6.55-8.35 11.18L12 20.5z" />
      </svg>
    );
  }
  if (kind === "star") {
    return (
      <svg viewBox="0 0 24 24" style={s} fill="none" stroke="currentColor" strokeWidth="1.4">
        <path d="M12 3l2.2 5.4 5.8.4-4.4 3.8 1.4 5.7L12 15.8 6.9 18.7l1.4-5.7L3.9 9.2l5.8-.4L12 3z" />
      </svg>
    );
  }
  if (kind === "puzzle") {
    return (
      <svg viewBox="0 0 24 24" style={s} fill="none" stroke="currentColor" strokeWidth="1.4">
        <path d="M5 9h2.2a1.6 1.6 0 100-3.2A1.6 1.6 0 019 4.2V4h6v2.2a1.6 1.6 0 103.2 0H19v6h-.8a1.6 1.6 0 100 3.2H19v.6h-6v-2.2a1.6 1.6 0 10-3.2 0V19H5V9z" />
      </svg>
    );
  }
  return (
    <svg viewBox="0 0 24 24" style={s}>
      <circle cx="12" cy="12" r="3" fill="currentColor" />
    </svg>
  );
}

/* ---- UI icons (stroke, minimalist) ---- */
function Icon({ name, size = 20, stroke = 1.7, style }) {
  const p = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round", style };
  switch (name) {
    case "heart":
      return <svg {...p}><path d="M12 20.5l-1.4-1.27C5.5 14.6 2.25 11.66 2.25 8.05 2.25 5.1 4.56 2.8 7.5 2.8c1.66 0 3.25.77 4.5 2.06C13.25 3.57 14.84 2.8 16.5 2.8c2.94 0 5.25 2.3 5.25 5.25 0 3.61-3.25 6.55-8.35 11.18L12 20.5z"/></svg>;
    case "arrow-right":
      return <svg {...p}><path d="M5 12h14M13 6l6 6-6 6"/></svg>;
    case "arrow-left":
      return <svg {...p}><path d="M19 12H5M11 6l-6 6 6 6"/></svg>;
    case "sparkle":
      return <svg {...p}><path d="M12 3v4M12 17v4M3 12h4M17 12h4M6.5 6.5l2.5 2.5M15 15l2.5 2.5M17.5 6.5L15 9M9 15l-2.5 2.5"/></svg>;
    case "grid":
      return <svg {...p}><rect x="4" y="4" width="6.5" height="6.5" rx="1.4"/><rect x="13.5" y="4" width="6.5" height="6.5" rx="1.4"/><rect x="4" y="13.5" width="6.5" height="6.5" rx="1.4"/><rect x="13.5" y="13.5" width="6.5" height="6.5" rx="1.4"/></svg>;
    case "download":
      return <svg {...p}><path d="M12 3v12M7 10l5 5 5-5M5 21h14"/></svg>;
    case "check":
      return <svg {...p}><path d="M4 12l5 5L20 6"/></svg>;
    case "eye":
      return <svg {...p}><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="2.6"/></svg>;
    case "eye-off":
      return <svg {...p}><path d="M3 3l18 18M10.6 5.2A10.6 10.6 0 0112 5c6.5 0 10 7 10 7a17 17 0 01-3.2 4M6.2 6.3A17 17 0 002 12s3.5 7 10 7a10.4 10.4 0 004.2-.9M9.5 9.6A2.6 2.6 0 0014.4 14"/></svg>;
    case "edit":
      return <svg {...p}><path d="M4 20h4L19 9l-4-4L4 16v4zM14 6l4 4"/></svg>;
    case "doc":
      return <svg {...p}><path d="M6 3h8l4 4v14H6zM14 3v4h4"/></svg>;
    case "shuffle":
      return <svg {...p}><path d="M16 4h4v4M4 20l16-16M4 4l5 5M20 16v4h-4M15 15l5 5"/></svg>;
    case "music":
      return <svg {...p}><path d="M9 18V5l11-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="17" cy="16" r="3"/></svg>;
    case "alert":
      return <svg {...p}><path d="M12 3l9.5 16.5H2.5L12 3z"/><path d="M12 10v4M12 17.5v.01"/></svg>;
    case "close":
      return <svg {...p}><path d="M6 6l12 12M18 6L6 18"/></svg>;
    case "lock":
      return <svg {...p}><rect x="4.5" y="10.5" width="15" height="10" rx="2.2"/><path d="M8 10.5V7a4 4 0 018 0v3.5"/></svg>;
    default:
      return <svg {...p}><circle cx="12" cy="12" r="8"/></svg>;
  }
}

Object.assign(window, { AppBackground, GlyphIcon, Icon });