import React, { useState, useEffect } from 'react';
import { 
  Zap, 
  Cpu, 
  Users, 
  Target, 
  TrendingUp, 
  Layers, 
  Camera, 
  Mic, 
  ArrowRight, 
  CheckCircle2, 
  Sparkles,
  Clock,
  ShieldCheck,
  Globe
} from 'lucide-react';

const App = () => {
  const [activeStep, setActiveStep] = useState(0);
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => setScrolled(window.scrollY > 50);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const steps = [
    {
      title: "Brand DNA Discovery",
      desc: "We don't just prompt; we listen. We map your unique culture and voice so the AI output sounds like your best day, not a generic algorithm.",
      icon: <Users className="w-6 h-6" />
    },
    {
      title: "Competitive Insight",
      desc: "AI-driven deep dives into the local landscape. We see exactly where your competitors are winning—and more importantly, where they are failing.",
      icon: <Target className="w-6 h-6" />
    },
    {
      title: "Market Gap ID",
      desc: "We pinpoint the 'empty spaces'—the emotional and visual voids in your industry that are ripe for disruption.",
      icon: <TrendingUp className="w-6 h-6" />
    },
    {
      title: "Targeted AI Campaigns",
      desc: "Deploying high-fidelity commercials and automated production lines to dominate the identified gaps with precision.",
      icon: <Zap className="w-6 h-6" />
    }
  ];

  const tiers = [
    {
      name: "The Spotlight",
      price: "15,000",
      description: "A single, A-list quality 30s/60s commercial. The high-fidelity alternative to a ₱60k traditional shoot.",
      features: ["30-60s Cinematic AI Film", "Custom Sound Design", "High-End Color Grading", "4K Resolution"],
      accent: "border-gray-800"
    },
    {
      name: "The Lean Engine",
      price: "25k-30k",
      description: "The entrepreneur's upgrade. A high-performance presence without the overhead of a full production house.",
      features: ["3 Social Media Assets", "Brand Voice Alignment", "AI Voiceover Narration", "Unlimited Backgrounds"],
      accent: "border-blue-500 shadow-[0_0_20px_rgba(59,130,246,0.3)]",
      featured: true
    },
    {
      name: "The Partnership",
      price: "60k-80k",
      description: "A fully integrated AI marketing ecosystem with custom Brand Ambassadors and automated production.",
      features: ["Custom AI Avatar/Ambassador", "Bi-Weekly Asset Delivery", "Strategy Retainer", "Priority Access"],
      accent: "border-lime-400 shadow-[0_0_20px_rgba(163,230,53,0.3)]"
    }
  ];

  return (
    <div className="min-h-screen bg-[#0a0a0a] text-gray-100 font-sans selection:bg-lime-400 selection:text-black">
      {/* Navigation */}
      <nav className={`fixed w-full z-50 transition-all duration-300 ${scrolled ? 'bg-black/80 backdrop-blur-md py-4' : 'bg-transparent py-6'}`}>
        <div className="container mx-auto px-6 flex justify-between items-center">
          <div className="flex items-center space-x-2">
            <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-lime-400 rounded-sm flex items-center justify-center">
              <span className="text-black font-black text-xl">N</span>
            </div>
            <span className="text-2xl font-bold tracking-tighter">NEXTFRAME<span className="text-lime-400">.PH</span></span>
          </div>
          <div className="hidden md:flex space-x-8 text-sm font-medium tracking-widest uppercase">
            <a href="#process" className="hover:text-lime-400 transition-colors">The Journey</a>
            <a href="#tiers" className="hover:text-lime-400 transition-colors">Tiers</a>
            <a href="#edge" className="hover:text-lime-400 transition-colors">The Edge</a>
            <a href="#legacy" className="hover:text-blue-400 transition-colors">Legacy Lab</a>
          </div>
          <button className="bg-lime-400 text-black px-5 py-2 rounded-full font-bold text-sm hover:bg-white transition-all transform hover:scale-105">
            START THE CONVERSATION
          </button>
        </div>
      </nav>

      {/* Hero Section */}
      <section className="relative pt-32 pb-20 overflow-hidden">
        <div className="absolute top-0 right-0 w-1/2 h-full bg-blue-500/10 blur-[120px] rounded-full -mr-24 -mt-24 animate-pulse"></div>
        <div className="absolute bottom-0 left-0 w-1/3 h-1/2 bg-lime-400/5 blur-[100px] rounded-full -ml-24"></div>
        
        <div className="container mx-auto px-6 relative z-10 text-center lg:text-left grid lg:grid-cols-2 gap-12 items-center">
          <div>
            <div className="inline-block px-3 py-1 bg-lime-400/10 border border-lime-400/20 rounded-full text-lime-400 text-xs font-bold tracking-[0.2em] mb-6">
              GEARED FOR A BETTER FUTURE
            </div>
            <h1 className="text-5xl lg:text-7xl font-black leading-tight mb-6">
              The Human Bridge <br/>
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-lime-300">
                to AI Fidelity.
              </span>
            </h1>
            <p className="text-lg text-gray-400 mb-8 max-w-xl leading-relaxed">
              We turn cold AI patterns into authentic brand stories. Like the paintbrush to the camera, AI changes the tool—but it can never replace the human storyteller.
            </p>
            <div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 justify-center lg:justify-start">
              <button className="bg-white text-black px-8 py-4 rounded-sm font-black tracking-widest hover:bg-lime-400 transition-all flex items-center justify-center">
                START THE CONVERSATION <ArrowRight className="ml-2 w-5 h-5" />
              </button>
              <button className="border border-white/20 px-8 py-4 rounded-sm font-black tracking-widest hover:bg-white/5 transition-all">
                VIEW SHOWREEL
              </button>
            </div>
          </div>
          
          <div className="relative group">
            <div className="absolute inset-0 bg-gradient-to-tr from-blue-500/20 to-lime-400/20 blur-xl opacity-50 group-hover:opacity-100 transition-opacity"></div>
            <div className="relative bg-[#121212] border border-white/10 p-8 rounded-xl aspect-video flex flex-col justify-center items-center">
               <div className="mb-4 p-4 rounded-full bg-white/5 border border-white/10 animate-bounce">
                <Sparkles className="w-12 h-12 text-lime-400" />
               </div>
               <p className="text-sm font-mono text-gray-500">SYSTEM: HUMAN_INTERFACE_ACTIVE</p>
               <p className="text-lg font-bold mt-2">Elite Content Production at Athlete Speed.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Comparison Grid */}
      <section className="py-20 bg-white/5">
        <div className="container mx-auto px-6">
          <div className="grid md:grid-cols-2 gap-px bg-white/10 border border-white/10">
            <div className="bg-[#0a0a0a] p-12">
              <h3 className="text-sm font-bold text-gray-500 uppercase tracking-widest mb-8">The Traditional Way</h3>
              <ul className="space-y-6">
                <li className="flex items-start space-x-4 opacity-50 italic">
                  <div className="w-6 h-6 rounded-full border border-red-500/50 flex items-center justify-center text-red-500">×</div>
                  <p>₱60k+ per single-day shoot</p>
                </li>
                <li className="flex items-start space-x-4 opacity-50 italic">
                  <div className="w-6 h-6 rounded-full border border-red-500/50 flex items-center justify-center text-red-500">×</div>
                  <p>2-week post-production cycles</p>
                </li>
                <li className="flex items-start space-x-4 opacity-50 italic">
                  <div className="w-6 h-6 rounded-full border border-red-500/50 flex items-center justify-center text-red-500">×</div>
                  <p>Rigid setups: One mistake = Expensive reshoot</p>
                </li>
              </ul>
            </div>
            <div className="bg-[#0a0a0a] p-12 relative overflow-hidden">
              <div className="absolute top-0 right-0 p-4">
                <div className="px-2 py-1 bg-lime-400 text-black text-[10px] font-black">ELITE</div>
              </div>
              <h3 className="text-sm font-bold text-lime-400 uppercase tracking-widest mb-8">The NextFrame Way</h3>
              <ul className="space-y-6">
                <li className="flex items-start space-x-4">
                  <div className="w-6 h-6 rounded-full bg-lime-400 flex items-center justify-center text-black"><CheckCircle2 className="w-4 h-4" /></div>
                  <p className="font-bold">₱15k for A-list cinematic fidelity</p>
                </li>
                <li className="flex items-start space-x-4">
                  <div className="w-6 h-6 rounded-full bg-lime-400 flex items-center justify-center text-black"><CheckCircle2 className="w-4 h-4" /></div>
                  <p className="font-bold">48-hour delivery on key assets</p>
                </li>
                <li className="flex items-start space-x-4">
                  <div className="w-6 h-6 rounded-full bg-lime-400 flex items-center justify-center text-black"><CheckCircle2 className="w-4 h-4" /></div>
                  <p className="font-bold">Infinite Flexibility: Relight & Swap in the Cloud</p>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* The 4-Step Journey */}
      <section id="process" className="py-24">
        <div className="container mx-auto px-6">
          <div className="max-w-3xl mb-16">
            <h2 className="text-4xl font-black mb-4 uppercase italic">Elite Precision Process</h2>
            <div className="h-1 w-20 bg-lime-400 mb-6"></div>
            <p className="text-gray-400">Our workflow is lean and scrappy. We eliminate the fluff and focus on high-fidelity execution through a 4-step strategic sprint.</p>
          </div>

          <div className="grid lg:grid-cols-4 gap-8">
            {steps.map((step, idx) => (
              <div 
                key={idx}
                className={`group p-8 border-l-2 transition-all duration-500 cursor-default ${idx === activeStep ? 'border-lime-400 bg-white/5' : 'border-white/10 hover:border-blue-400'}`}
                onMouseEnter={() => setActiveStep(idx)}
              >
                <div className={`mb-6 p-3 inline-block transition-all ${idx === activeStep ? 'text-lime-400 scale-110' : 'text-gray-600'}`}>
                  {step.icon}
                </div>
                <h4 className="text-xl font-bold mb-4 uppercase tracking-tighter">{step.title}</h4>
                <p className="text-sm text-gray-500 leading-relaxed group-hover:text-gray-300 transition-colors">
                  {step.desc}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Pricing Tiers */}
      <section id="tiers" className="py-24 bg-[#0d0d0d]">
        <div className="container mx-auto px-6">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-black mb-4 uppercase italic">Service Tiers</h2>
            <p className="text-gray-400">High-performance production for every stage of your growth.</p>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            {tiers.map((tier, idx) => (
              <div 
                key={idx}
                className={`p-10 border rounded-sm transition-all hover:translate-y-[-8px] flex flex-col ${tier.accent}`}
              >
                <div className="mb-8">
                  <h3 className="text-2xl font-black mb-2 uppercase italic tracking-tighter">{tier.name}</h3>
                  <div className="flex items-baseline mb-4">
                    <span className="text-lg font-bold mr-1">₱</span>
                    <span className="text-4xl font-black tracking-tighter">{tier.price}</span>
                  </div>
                  <p className="text-sm text-gray-500 leading-relaxed h-12">
                    {tier.description}
                  </p>
                </div>
                
                <ul className="space-y-4 mb-10 flex-grow">
                  {tier.features.map((f, i) => (
                    <li key={i} className="flex items-center text-sm">
                      <CheckCircle2 className="w-4 h-4 text-lime-400 mr-3" />
                      <span>{f}</span>
                    </li>
                  ))}
                </ul>

                <button className={`w-full py-4 rounded-sm font-black tracking-widest text-sm transition-all ${tier.featured ? 'bg-blue-500 text-white hover:bg-lime-400 hover:text-black' : 'border border-white/20 hover:border-white'}`}>
                  LOCK IN THIS TIER
                </button>
              </div>
            ))}
          </div>
          
          <div className="mt-12 p-8 border border-dashed border-white/10 rounded-sm flex flex-col md:flex-row items-center justify-between text-center md:text-left">
            <div>
              <h4 className="text-xl font-bold uppercase tracking-tight">The Internal Machine</h4>
              <p className="text-gray-500 text-sm">Enterprise/Custom: Proprietary AI systems for large workforces (Real Estate, Casinos, etc.)</p>
            </div>
            <button className="mt-6 md:mt-0 px-8 py-3 bg-white text-black font-bold hover:bg-lime-400 transition-colors">
              CUSTOM QUOTE
            </button>
          </div>
        </div>
      </section>

      {/* Value Proposition / Edge */}
      <section id="edge" className="py-24 overflow-hidden relative">
        <div className="container mx-auto px-6 relative z-10">
          <div className="grid lg:grid-cols-2 gap-16 items-center">
            <div className="order-2 lg:order-1">
              <div className="grid sm:grid-cols-2 gap-8">
                <div className="space-y-4">
                  <div className="p-4 bg-white/5 border border-white/10 rounded-sm">
                    <Layers className="w-8 h-8 text-blue-400 mb-4" />
                    <h5 className="font-bold uppercase mb-2">Infinite Flexibility</h5>
                    <p className="text-xs text-gray-500 leading-relaxed">Relight, change settings, and swap backgrounds in the cloud. We built the set once, you use it forever.</p>
                  </div>
                  <div className="p-4 bg-white/5 border border-white/10 rounded-sm">
                    <Camera className="w-8 h-8 text-lime-400 mb-4" />
                    <h5 className="font-bold uppercase mb-2">Max Endorsements</h5>
                    <p className="text-xs text-gray-500 leading-relaxed">Capture a celebrity once; use AI to create a year's worth of personalized assets in their likeness.</p>
                  </div>
                </div>
                <div className="space-y-4 mt-8">
                  <div className="p-4 bg-white/5 border border-white/10 rounded-sm">
                    <Globe className="w-8 h-8 text-lime-400 mb-4" />
                    <h5 className="font-bold uppercase mb-2">All-Access Pipeline</h5>
                    <p className="text-xs text-gray-500 leading-relaxed">We handle the tools (Veo, Sora, Midjourney) so you get world-class results without managing 20 subscriptions.</p>
                  </div>
                  <div className="p-4 bg-white/5 border border-white/10 rounded-sm">
                    <ShieldCheck className="w-8 h-8 text-blue-400 mb-4" />
                    <h5 className="font-bold uppercase mb-2">Proprietary Assets</h5>
                    <p className="text-xs text-gray-500 leading-relaxed">Your brand DNA stays yours. We build custom agents and avatars that no one else can use.</p>
                  </div>
                </div>
              </div>
            </div>
            <div className="order-1 lg:order-2">
              <h2 className="text-4xl font-black mb-6 uppercase italic">The NextFrame Edge</h2>
              <p className="text-gray-400 mb-8 leading-relaxed">
                Traditional media is rigid. We are fluid. We operate with an <span className="text-white font-bold italic">Athlete Mindset</span>—obsessed with speed, precision, and the constant pursuit of high-fidelity output.
              </p>
              <div className="space-y-4">
                <div className="flex items-center space-x-4 p-4 border border-white/5">
                  <span className="text-3xl font-black text-lime-400/20 italic">01</span>
                  <p className="text-sm font-bold uppercase tracking-widest">No Reshoots. Only Refinements.</p>
                </div>
                <div className="flex items-center space-x-4 p-4 border border-white/5">
                  <span className="text-3xl font-black text-lime-400/20 italic">02</span>
                  <p className="text-sm font-bold uppercase tracking-widest">Global Talent. Local Insight.</p>
                </div>
                <div className="flex items-center space-x-4 p-4 border border-white/5">
                  <span className="text-3xl font-black text-lime-400/20 italic">03</span>
                  <p className="text-sm font-bold uppercase tracking-widest">Future-Proofed Media Stack.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Legacy Lab (Phase Expansion) */}
      <section id="legacy" className="py-24 bg-gradient-to-b from-black to-blue-900/20">
        <div className="container mx-auto px-6 text-center">
          <div className="inline-block px-3 py-1 bg-blue-500/20 border border-blue-500/30 rounded-full text-blue-300 text-[10px] font-bold tracking-[0.2em] mb-12">
            THE LEGACY LAB: EXPANSION PHASES
          </div>
          
          <div className="max-w-4xl mx-auto grid md:grid-cols-2 gap-12 text-left">
            <div className="p-10 border border-blue-500/30 bg-blue-950/20 backdrop-blur-sm group hover:border-lime-400 transition-all duration-700">
               <Clock className="w-10 h-10 text-blue-400 mb-6 group-hover:text-lime-400 transition-colors" />
               <h3 className="text-2xl font-black mb-4 uppercase tracking-tighter italic">Prime Preservation</h3>
               <p className="text-gray-400 text-sm leading-relaxed mb-6">
                 We use AI as a Time Machine. Upscale old photos of elders into cinematic life stories. Don't just remember your story. Relive it.
               </p>
               <span className="text-xs font-black tracking-widest text-blue-400 group-hover:text-lime-400">STATUS: IN DEVELOPMENT</span>
            </div>

            <div className="p-10 border border-blue-500/30 bg-blue-950/20 backdrop-blur-sm group hover:border-lime-400 transition-all duration-700">
               <Camera className="w-10 h-10 text-blue-400 mb-6 group-hover:text-lime-400 transition-colors" />
               <h3 className="text-2xl font-black mb-4 uppercase tracking-tighter italic">Gala AI Experience</h3>
               <p className="text-gray-400 text-sm leading-relaxed mb-6">
                 High-end AI Movie Photobooths. Deliver personalized, themed mini-movies to event guests in real-time. The ultimate event flex.
               </p>
               <span className="text-xs font-black tracking-widest text-blue-400 group-hover:text-lime-400">STATUS: PROTOTYPE</span>
            </div>
          </div>

          <div className="mt-24 max-w-2xl mx-auto border-t border-white/10 pt-16">
            <h4 className="text-sm font-bold text-gray-500 uppercase tracking-[0.3em] mb-8 italic">The Golden Legacy Teaser</h4>
            <div className="relative aspect-video rounded-sm overflow-hidden border border-white/10 bg-black flex items-center justify-center italic text-gray-400 px-12">
              <div className="text-center">
                <p className="mb-4">"Two elderly women giggle over a phone, seeing high-definition movies of their younger selves created from old photos."</p>
                <p className="text-white font-black uppercase text-xl">"Immortalize your appearance."</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA Footer */}
      <footer className="py-20 border-t border-white/10">
        <div className="container mx-auto px-6">
          <div className="flex flex-col md:flex-row justify-between items-center">
            <div className="mb-12 md:mb-0 text-center md:text-left">
              <div className="flex items-center space-x-2 mb-4 justify-center md:justify-start">
                <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-lime-400 rounded-sm flex items-center justify-center">
                  <span className="text-black font-black text-2xl">N</span>
                </div>
                <span className="text-3xl font-bold tracking-tighter">NEXTFRAME<span className="text-lime-400">.PH</span></span>
              </div>
              <p className="text-gray-500 max-w-sm">Geared for a better future. The human interface for the AI media revolution.</p>
            </div>
            
            <div className="text-center md:text-right">
              <h3 className="text-3xl font-black mb-6 uppercase italic">Ready to Bridge the Gap?</h3>
              <button className="bg-lime-400 text-black px-12 py-5 rounded-full font-black tracking-widest hover:bg-white transition-all transform hover:scale-110 shadow-2xl">
                START THE CONVERSATION
              </button>
            </div>
          </div>
          
          <div className="mt-20 pt-8 border-t border-white/5 flex flex-col md:flex-row justify-between items-center text-[10px] font-bold text-gray-600 tracking-widest uppercase">
            <p>© 2025 NEXTFRAME.PH ALL RIGHTS RESERVED.</p>
            <div className="flex space-x-6 mt-4 md:mt-0">
              <a href="#" className="hover:text-white transition-colors">Privacy</a>
              <a href="#" className="hover:text-white transition-colors">Terms</a>
              <a href="#" className="hover:text-white transition-colors">Instagram</a>
              <a href="#" className="hover:text-white transition-colors">LinkedIn</a>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default App;