"use client";
import { motion } from "motion/react";
import BeamsBackground from "@/components/ui/beams-background";
 
export function BeamsBackgrounDemo() {
  return (
    <BeamsBackground intensity="strong">
      <div className="flex h-screen w-full items-center justify-center px-6">
        <div className="grid max-w-7xl grid-cols-1  gap-12 items-center">
          {/* Left: Text */}
          <div className="flex flex-col items-center  text-center  space-y-6">
            <motion.h1
              className="text-4xl md:text-6xl font-bold text-white tracking-tight"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8 }}
            >
              Build Stunning UIs
            </motion.h1>
            <motion.p
              className="text-lg md:text-xl text-white/70 max-w-xl"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.9 }}
            >
              Beautiful gradients, beams, and animations for your modern apps.
            </motion.p>
            <div className="flex flex-wrap gap-4 pt-4">
              <button className="px-6 py-3 rounded-xl bg-white text-black font-semibold hover:bg-white/80 transition">
                Get Started
              </button>
 
              <button className="px-6 py-3 rounded-xl border border-white/30 text-white hover:bg-white/10 transition">
                Learn More
              </button>
            </div>
          </div>
        </div>
      </div>
    </BeamsBackground>
  );
}

// Subtle intensity for backgrounds
<BeamsBackground intensity="subtle">
  <div className="h-screen flex items-center justify-center">
    <div className="bg-black/50 backdrop-blur-sm rounded-2xl p-8 border border-white/10">
      <h2 className="text-2xl font-bold text-white mb-4">Subtle Background</h2>
      <p className="text-white/80">Perfect for content-heavy sections</p>
    </div>
  </div>
</BeamsBackground>
 
// Medium intensity for balance
<BeamsBackground intensity="medium">
  <div className="h-screen flex items-center justify-center">
    <div className="text-center">
      <h2 className="text-3xl font-bold text-white mb-4">Medium Intensity</h2>
      <p className="text-white/70">Great for feature sections</p>
    </div>
  </div>
</BeamsBackground>
 
// Strong intensity for hero sections
<BeamsBackground intensity="strong">
  <div className="h-screen flex items-center justify-center">
    <h1 className="text-6xl font-bold text-white">Strong Impact</h1>
  </div>
</BeamsBackground>