import React from 'react';
import { 
  BackgroundBeamsWithCollision, 
  BackgroundLines, 
  ColourfulText,
  CardSpotlight,
  MacbookScroll 
} from './components/aceternity-ui';
import { 
  BentoGrid, 
  BentoCard, 
  ShinyButton,
  AnimatedCircularProgressBar,
  ScriptCopyBtn 
} from './components/magic-ui';
import { ChartBarDefault } from './components/shadcn';

const SampleScreen: React.FC = () => {
  return (
    <div className="min-h-screen bg-black text-white overflow-hidden">
      {/* Hero Section with Background Beams */}
      <section className="relative h-screen flex items-center justify-center">
        <BackgroundBeamsWithCollision className="absolute inset-0" />
        <div className="relative z-10 text-center space-y-8">
          <ColourfulText 
            text="Welcome to Xlibs"
            className="text-6xl md:text-8xl font-bold"
          />
          <p className="text-xl md:text-2xl text-gray-300 max-w-2xl mx-auto">
            The ultimate UI component library with Aceternity and MagicUI components
          </p>
          <div className="flex gap-4 justify-center">
            <ShinyButton className="px-8 py-4 text-lg">
              Get Started
            </ShinyButton>
            <ShinyButton variant="outline" className="px-8 py-4 text-lg">
              View Components
            </ShinyButton>
          </div>
        </div>
      </section>

      {/* Features Section with Bento Grid */}
      <section className="py-20 px-4">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-5xl font-bold mb-4">
              Powerful Components
            </h2>
            <p className="text-xl text-gray-400 max-w-2xl mx-auto">
              Built with modern design principles and smooth animations
            </p>
          </div>
          
          <BentoGrid className="max-w-4xl mx-auto">
            <BentoCard 
              Icon="GlobeIcon"
              name="Interactive 3D"
              description="Experience our stunning 3D components with realistic animations"
              href="#"
              cta="Learn More"
              className="md:col-span-2 md:row-span-2"
            />
            
            <BentoCard 
              Icon="BellIcon"
              name="Progress Tracking"
              description="Track your progress with animated indicators"
              href="#"
              cta="View Progress"
            />
            
            <BentoCard 
              Icon="FileTextIcon"
              name="Quick Copy"
              description="Copy code snippets with one click"
              href="#"
              cta="Copy Now"
            />
            
            <BentoCard 
              Icon="CalendarIcon"
              name="Analytics Dashboard"
              description="Beautiful charts and data visualization"
              href="#"
              cta="View Analytics"
              className="md:col-span-2"
            />
          </BentoGrid>
        </div>
      </section>

      {/* MacBook Showcase Section */}
      <section className="py-20 px-4 bg-gradient-to-b from-black to-gray-900">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-5xl font-bold mb-4">
              Interactive Showcase
            </h2>
            <p className="text-xl text-gray-400">
              See our components in action with the MacBook scroll effect
            </p>
          </div>
          
          <MacbookScroll
            title="Xlibs Component Library"
            description="A comprehensive collection of modern UI components"
            src="/placeholder-image.jpg"
            badge="New"
          />
        </div>
      </section>

      {/* Background Lines Section */}
      <section className="py-20 px-4 relative">
        <BackgroundLines className="absolute inset-0" />
        <div className="relative z-10 max-w-4xl mx-auto text-center">
          <h2 className="text-4xl md:text-5xl font-bold mb-6">
            Ready to Build?
          </h2>
          <p className="text-xl text-gray-400 mb-8 max-w-2xl mx-auto">
            Start creating amazing user experiences with our component library
          </p>
          <div className="flex gap-4 justify-center">
            <ShinyButton className="px-8 py-4 text-lg">
              Start Building
            </ShinyButton>
            <ShinyButton variant="outline" className="px-8 py-4 text-lg">
              Documentation
            </ShinyButton>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-12 px-4 border-t border-gray-800">
        <div className="max-w-6xl mx-auto text-center">
          <p className="text-gray-400">
            © 2024 Xlibs. Built with ❤️ using React, Vite, and Tailwind CSS.
          </p>
        </div>
      </footer>
    </div>
  );
};

export default SampleScreen;