/**
 * Linhas-raiz animadas — metáfora orgânica de crescimento.
 * Decoração de fundo, posicionada absolute pelo container pai.
 */
export function RootLines({ className = "" }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 1200 700"
      className={`pointer-events-none absolute inset-0 h-full w-full ${className}`}
      aria-hidden
      preserveAspectRatio="none"
    >
      <defs>
        <linearGradient id="rootGrad" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="var(--life)" stopOpacity="0.0" />
          <stop offset="35%" stopColor="var(--life)" stopOpacity="0.55" />
          <stop offset="100%" stopColor="var(--mind-b)" stopOpacity="0.3" />
        </linearGradient>
        <radialGradient id="seedGlow" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="var(--life-glow)" stopOpacity="0.6" />
          <stop offset="100%" stopColor="var(--life)" stopOpacity="0" />
        </radialGradient>
      </defs>

      <circle cx="1050" cy="120" r="180" fill="url(#seedGlow)" className="animate-pulse-glow" />

      <g stroke="url(#rootGrad)" strokeWidth="1.1" fill="none" strokeLinecap="round">
        <path
          d="M-20 620 C 200 540, 360 560, 520 460 S 820 320, 1220 280"
          className="animate-grow-line"
          style={{ animationDelay: "0.1s" }}
        />
        <path
          d="M-20 660 C 220 600, 420 600, 600 520 S 900 380, 1220 360"
          className="animate-grow-line"
          style={{ animationDelay: "0.5s" }}
        />
        <path
          d="M-20 580 C 180 500, 380 520, 540 400 S 880 220, 1220 200"
          className="animate-grow-line"
          style={{ animationDelay: "0.9s" }}
        />
        <path
          d="M-20 700 C 260 660, 460 640, 660 560 S 940 440, 1220 420"
          className="animate-grow-line"
          style={{ animationDelay: "1.3s" }}
        />
      </g>

      <g fill="var(--life)" opacity="0.6">
        <circle cx="520" cy="460" r="2.2" className="animate-pulse-glow" />
        <circle cx="820" cy="320" r="1.8" className="animate-pulse-glow" style={{ animationDelay: "0.6s" }} />
        <circle cx="600" cy="520" r="2" className="animate-pulse-glow" style={{ animationDelay: "1.2s" }} />
        <circle cx="940" cy="440" r="1.6" className="animate-pulse-glow" style={{ animationDelay: "1.8s" }} />
      </g>
    </svg>
  );
}