components/Hero.js

import { ArrowRight, Code2, Sparkles } from 'lucide-react'

export default function Hero() {
  return (
    <div className="relative overflow-hidden pt-20 pb-16 lg:pt-32 lg:pb-24">
      {/* Background Glow */}
      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-[500px] bg-brand-accent/10 blur-[120px] rounded-full pointer-events-none" />

      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col items-center text-center">
        
        {/* Badge */}
        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-gray-700 bg-gray-800/50 text-sm text-gray-400 mb-8 animate-pulse-slow">
          <Sparkles size={14} className="text-brand-accent" />
          <span>AI-Powered Documentation & Code</span>
        </div>

        <h1 className="text-5xl md:text-7xl font-bold tracking-tight mb-6 text-white">
          <span className="gradient-text">Generate code at the</span>
          <br />
          <span className="text-gray-500">speed of thought.</span>
        </h1>

        <p className="text-xl text-gray-400 max-w-2xl mb-10 leading-relaxed">
          Deepnote transforms your technical notes into production-ready code, 
          documentation, and visualizations instantly. The future of developer productivity.
        </p>

        <div className="flex flex-col sm:flex-row gap-4 w-full sm:w-auto">
          <button className="flex items-center justify-center gap-2 bg-brand-accent hover:bg-violet-700 text-white px-8 py-4 rounded-lg font-bold text-lg transition-all shadow-lg shadow-brand-accent/25 hover:shadow-brand-accent/40">
            Start for free
            <ArrowRight size={20} />
          </button>
          <button className="flex items-center justify-center gap-2 bg-gray-800 hover:bg-gray-700 text-white border border-gray-700 px-8 py-4 rounded-lg font-bold text-lg transition-all">
            <Code2 size={20} />
            View Demo
          </button>
        </div>

        {/* Code Preview Mockup */}
        <div className="mt-20 w-full max-w-4xl glass-panel rounded-xl p-6 border border-gray-700 shadow-2xl">
          <div className="flex items-center gap-2 mb-4">
            <div className="w-3 h-3 rounded-full bg-red-500" />
            <div className="w-3 h-3 rounded-full bg-yellow-500" />
            <div className="w-3 h-3 rounded-full bg-green-500" />
            <span className="text-xs text-gray-500 ml-2">main.py</span>
          </div>
          <div className="text-left font-mono text-sm text-gray-300 space-y-2 overflow-hidden">
            <div className="flex">
              <span className="text-gray-500 w-8">1</span>
              <span className="text-purple-400">import</span> deepnote <span className="text-purple-400">as</span> dn
            </div>
            <div className="flex">
              <span className="text-gray-500 w-8">2</span>
              <span className="text-blue-400">def</span> <span className="text-yellow-300">generate_component</span>(data):
            </div>
            <div className="flex">
              <span className="text-gray-500 w-8">3</span>
              <span className="ml-4 text-gray-500"># AI analyzes input structure</span>
            </div>
            <div className="flex">
              <span className="text-gray-500 w-8">4</span>
              <span className="ml-4">model = dn.Analyze(data, <span className="text-green-400">mode=<span className="text-orange-300">'react'</span></span>)</span>
            </div>
            <div className="flex">
              <span className="text-gray-500 w-8">5</span>
              <span className="ml-4">return model.render()</span>
            </div>
            <div className="flex animate-pulse">
              <span className="text-gray-500 w-8">6</span>
              <span className="ml-4 text-brand-accent">Processing...</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}