import Image from "next/image";
import Link from "next/link";

export default function Home() {
  return (
    <div className="min-h-screen bg-gray-900 flex flex-col font-sans text-gray-100">
      
      {/* Navigation */}
      <nav className="fixed w-full z-50 bg-gray-900/80 backdrop-blur-md border-b border-gray-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-20 items-center">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl flex items-center justify-center shadow-lg shadow-indigo-500/30">
                <span className="text-white font-black text-xl tracking-tighter">CQ</span>
              </div>
              <span className="font-extrabold text-2xl tracking-tight text-white">CK-QR</span>
            </div>
            <div className="flex gap-4 items-center">
              <Link href="/login" className="text-gray-300 hover:text-white font-medium px-4 transition-colors">
                Login
              </Link>
              <Link href="/register" className="bg-white text-gray-900 px-6 py-2.5 rounded-full font-bold hover:bg-gray-100 transition-colors shadow-lg hover:shadow-white/20">
                Start Free Trial
              </Link>
            </div>
          </div>
        </div>
      </nav>

      {/* Hero Section with Parallax */}
      <div 
        className="relative pt-32 pb-20 lg:pt-48 lg:pb-32 bg-fixed bg-center bg-cover"
        style={{ backgroundImage: "url('/parallax-bg.png')" }}
      >
        <div className="absolute inset-0 bg-gray-900/80"></div>
        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:flex-row items-center gap-16">
          
          <div className="flex-1 text-center lg:text-left">
            <h1 className="text-5xl lg:text-7xl font-black text-white tracking-tight leading-[1.1] mb-8">
              The Engine for <br />
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-400">
                Dynamic QR
              </span>
            </h1>
            <p className="text-xl text-gray-300 mb-10 max-w-2xl mx-auto lg:mx-0 leading-relaxed font-medium">
              Create, manage, and track intelligent QR codes. Update destinations in real-time, inject brand colors, and analyze global scan traffic instantly.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
              <Link href="/register" className="bg-indigo-600 text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-indigo-700 transition-all shadow-lg hover:shadow-indigo-500/40 hover:-translate-y-1">
                Start 14-Day Free Trial
              </Link>
            </div>
            <div className="mt-10 flex items-center justify-center lg:justify-start gap-4 text-sm font-medium text-gray-400">
              <div className="flex items-center gap-2">
                <svg className="w-5 h-5 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" /></svg>
                No credit card required
              </div>
              <div className="flex items-center gap-2">
                <svg className="w-5 h-5 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" /></svg>
                Cancel anytime
              </div>
            </div>
          </div>

          <div className="flex-1 w-full max-w-2xl hidden lg:block">
            <div className="relative rounded-2xl overflow-hidden shadow-2xl border border-gray-700/50 transform -rotate-2 hover:rotate-0 transition-transform duration-500 hover:shadow-indigo-500/20">
              <Image 
                src="/hero-mockup.png" 
                alt="CK-QR Dashboard Preview" 
                width={800} 
                height={600} 
                className="w-full h-auto"
                priority
              />
            </div>
          </div>
        </div>
      </div>

      {/* Trust & Scale Metrics (Data Section) */}
      <div className="bg-gray-900 border-y border-gray-800 py-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-8 text-center divide-x divide-gray-800">
            <div>
              <div className="text-4xl font-black text-white mb-2">10M+</div>
              <div className="text-sm font-bold text-gray-500 uppercase tracking-widest">Scans Tracked</div>
            </div>
            <div>
              <div className="text-4xl font-black text-white mb-2">99.9%</div>
              <div className="text-sm font-bold text-gray-500 uppercase tracking-widest">Uptime SLA</div>
            </div>
            <div>
              <div className="text-4xl font-black text-white mb-2">250ms</div>
              <div className="text-sm font-bold text-gray-500 uppercase tracking-widest">Global Routing</div>
            </div>
            <div>
              <div className="text-4xl font-black text-white mb-2">15+</div>
              <div className="text-sm font-bold text-gray-500 uppercase tracking-widest">Data Types</div>
            </div>
          </div>
        </div>
      </div>

      {/* Deep Dive Features */}
      <div className="bg-gray-950 py-32">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-20">
            <h2 className="text-4xl font-black text-white">Everything you need to scale</h2>
            <p className="mt-4 text-xl text-gray-400">Built for individuals, marketers, and enterprise teams.</p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="bg-gray-900 border border-gray-800 p-10 rounded-3xl hover:border-indigo-500/50 transition-colors group">
              <div className="w-14 h-14 bg-indigo-500/10 rounded-2xl flex items-center justify-center mb-8 group-hover:scale-110 transition-transform">
                <svg className="w-7 h-7 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
              </div>
              <h3 className="text-2xl font-bold text-white mb-4">Dynamic Routing</h3>
              <p className="text-gray-400 leading-relaxed">Update destination URLs instantly without ever needing to reprint your physical QR codes. Fix mistakes in seconds.</p>
            </div>

            <div className="bg-gray-900 border border-gray-800 p-10 rounded-3xl hover:border-purple-500/50 transition-colors group">
              <div className="w-14 h-14 bg-purple-500/10 rounded-2xl flex items-center justify-center mb-8 group-hover:scale-110 transition-transform">
                <svg className="w-7 h-7 text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>
              </div>
              <h3 className="text-2xl font-bold text-white mb-4">Deep Analytics</h3>
              <p className="text-gray-400 leading-relaxed">Track operating systems, device types, global locations, and view rich temporal charts of your scan traffic.</p>
            </div>

            <div className="bg-gray-900 border border-gray-800 p-10 rounded-3xl hover:border-pink-500/50 transition-colors group">
              <div className="w-14 h-14 bg-pink-500/10 rounded-2xl flex items-center justify-center mb-8 group-hover:scale-110 transition-transform">
                <svg className="w-7 h-7 text-pink-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" /></svg>
              </div>
              <h3 className="text-2xl font-bold text-white mb-4">Design Studio</h3>
              <p className="text-gray-400 leading-relaxed">Customize dot patterns, eye shapes, and inject your brand colors or logo directly into the center of the codes.</p>
            </div>
          </div>
        </div>
      </div>

      {/* How It Works Section */}
      <div className="bg-gray-900 py-32 border-t border-gray-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-20">
            <h2 className="text-4xl font-black text-white">How it Works</h2>
            <p className="mt-4 text-xl text-gray-400">Launch your first dynamic QR campaign in under 60 seconds.</p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-12 relative">
            <div className="hidden md:block absolute top-12 left-1/6 right-1/6 h-0.5 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 opacity-20"></div>
            
            <div className="relative text-center">
              <div className="w-24 h-24 mx-auto bg-gray-950 border-2 border-indigo-500 rounded-full flex items-center justify-center text-3xl font-black text-indigo-400 mb-8 shadow-[0_0_30px_rgba(99,102,241,0.2)]">1</div>
              <h3 className="text-2xl font-bold text-white mb-4">Generate & Customize</h3>
              <p className="text-gray-400 leading-relaxed">Input your destination URL and use our powerful design studio to apply your brand colors, patterns, and logos.</p>
            </div>

            <div className="relative text-center">
              <div className="w-24 h-24 mx-auto bg-gray-950 border-2 border-purple-500 rounded-full flex items-center justify-center text-3xl font-black text-purple-400 mb-8 shadow-[0_0_30px_rgba(168,85,247,0.2)]">2</div>
              <h3 className="text-2xl font-bold text-white mb-4">Download & Print</h3>
              <p className="text-gray-400 leading-relaxed">Export in high-resolution SVG or PNG formats and embed the code securely onto your physical marketing materials.</p>
            </div>

            <div className="relative text-center">
              <div className="w-24 h-24 mx-auto bg-gray-950 border-2 border-pink-500 rounded-full flex items-center justify-center text-3xl font-black text-pink-400 mb-8 shadow-[0_0_30px_rgba(236,72,153,0.2)]">3</div>
              <h3 className="text-2xl font-bold text-white mb-4">Track & Update</h3>
              <p className="text-gray-400 leading-relaxed">Watch global scans roll in via the analytics dashboard. Change the destination URL at any time without reprinting!</p>
            </div>
          </div>
        </div>
      </div>

      {/* Use Cases Section */}
      <div className="bg-gray-950 py-32 border-t border-gray-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-20">
            <h2 className="text-4xl font-black text-white">Built for Every Industry</h2>
            <p className="mt-4 text-xl text-gray-400">Join thousands of businesses bridging the physical and digital worlds.</p>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            <div className="bg-gray-900 border border-gray-800 p-8 rounded-3xl relative overflow-hidden group">
              <div className="absolute top-0 right-0 w-32 h-32 bg-orange-500/10 rounded-full blur-3xl group-hover:bg-orange-500/20 transition-colors"></div>
              <h3 className="text-xl font-bold text-white mb-2">Restaurants</h3>
              <p className="text-sm text-gray-400">Dynamic digital menus that can be updated daily without replacing table tents.</p>
            </div>
            <div className="bg-gray-900 border border-gray-800 p-8 rounded-3xl relative overflow-hidden group">
              <div className="absolute top-0 right-0 w-32 h-32 bg-blue-500/10 rounded-full blur-3xl group-hover:bg-blue-500/20 transition-colors"></div>
              <h3 className="text-xl font-bold text-white mb-2">Real Estate</h3>
              <p className="text-sm text-gray-400">Property yard signs that dynamically route to the latest virtual 3D tour.</p>
            </div>
            <div className="bg-gray-900 border border-gray-800 p-8 rounded-3xl relative overflow-hidden group">
              <div className="absolute top-0 right-0 w-32 h-32 bg-emerald-500/10 rounded-full blur-3xl group-hover:bg-emerald-500/20 transition-colors"></div>
              <h3 className="text-xl font-bold text-white mb-2">Retail & CPG</h3>
              <p className="text-sm text-gray-400">Product packaging that links to instruction manuals and warranty registrations.</p>
            </div>
            <div className="bg-gray-900 border border-gray-800 p-8 rounded-3xl relative overflow-hidden group">
              <div className="absolute top-0 right-0 w-32 h-32 bg-red-500/10 rounded-full blur-3xl group-hover:bg-red-500/20 transition-colors"></div>
              <h3 className="text-xl font-bold text-white mb-2">Events</h3>
              <p className="text-sm text-gray-400">Smart ticketing and rapid attendee check-in systems via scannable badges.</p>
            </div>
          </div>
        </div>
      </div>

      {/* Pricing Section */}
      <div className="bg-gray-900 py-32 border-t border-gray-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-20">
            <h2 className="text-4xl font-black text-white">Simple, transparent pricing</h2>
            <p className="mt-4 text-xl text-gray-400">No hidden fees. Cancel anytime.</p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
            
            {/* Free Tier */}
            <div className="bg-gray-950 border border-gray-800 rounded-3xl p-10 flex flex-col">
              <h3 className="text-2xl font-bold text-white mb-2">Free Trial</h3>
              <p className="text-gray-400 mb-6">Perfect for testing the waters.</p>
              <div className="text-4xl font-black text-white mb-8">$0<span className="text-lg text-gray-500 font-medium">/14 days</span></div>
              <ul className="space-y-4 mb-8 flex-1 text-gray-300">
                <li className="flex items-center gap-3"><svg className="w-5 h-5 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg> 5 Dynamic QR Codes</li>
                <li className="flex items-center gap-3"><svg className="w-5 h-5 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg> Basic Analytics</li>
                <li className="flex items-center gap-3"><svg className="w-5 h-5 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg> Standard Design Tools</li>
              </ul>
              <Link href="/register" className="w-full text-center bg-gray-800 hover:bg-gray-700 text-white py-4 rounded-xl font-bold transition-colors">Start Free Trial</Link>
            </div>

            {/* Pro Tier */}
            <div className="bg-gradient-to-b from-indigo-900/50 to-gray-950 border-2 border-indigo-500 rounded-3xl p-10 flex flex-col relative transform md:-translate-y-4 shadow-[0_0_40px_rgba(99,102,241,0.15)]">
              <div className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-indigo-500 text-white px-4 py-1 rounded-full text-sm font-bold tracking-wide uppercase">Most Popular</div>
              <h3 className="text-2xl font-bold text-white mb-2">Professional</h3>
              <p className="text-indigo-200 mb-6">For marketers and creators.</p>
              <div className="text-4xl font-black text-white mb-8">$29<span className="text-lg text-gray-400 font-medium">/mo</span></div>
              <ul className="space-y-4 mb-8 flex-1 text-gray-200">
                <li className="flex items-center gap-3"><svg className="w-5 h-5 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg> Unlimited QR Codes</li>
                <li className="flex items-center gap-3"><svg className="w-5 h-5 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg> Advanced Device Analytics</li>
                <li className="flex items-center gap-3"><svg className="w-5 h-5 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg> Custom Logos & Colors</li>
                <li className="flex items-center gap-3"><svg className="w-5 h-5 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg> API Access</li>
              </ul>
              <Link href="/register" className="w-full text-center bg-indigo-600 hover:bg-indigo-500 text-white py-4 rounded-xl font-bold transition-colors shadow-lg shadow-indigo-500/25">Upgrade to Pro</Link>
            </div>

            {/* Enterprise Tier */}
            <div className="bg-gray-950 border border-gray-800 rounded-3xl p-10 flex flex-col">
              <h3 className="text-2xl font-bold text-white mb-2">Enterprise</h3>
              <p className="text-gray-400 mb-6">For large scale operations.</p>
              <div className="text-4xl font-black text-white mb-8">$99<span className="text-lg text-gray-500 font-medium">/mo</span></div>
              <ul className="space-y-4 mb-8 flex-1 text-gray-300">
                <li className="flex items-center gap-3"><svg className="w-5 h-5 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg> Everything in Pro</li>
                <li className="flex items-center gap-3"><svg className="w-5 h-5 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg> Multi-user Teams</li>
                <li className="flex items-center gap-3"><svg className="w-5 h-5 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg> Dedicated Account Manager</li>
                <li className="flex items-center gap-3"><svg className="w-5 h-5 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg> 99.9% Uptime SLA</li>
              </ul>
              <Link href="/register" className="w-full text-center bg-gray-800 hover:bg-gray-700 text-white py-4 rounded-xl font-bold transition-colors">Contact Sales</Link>
            </div>

          </div>
        </div>
      </div>

      {/* Footer */}
      <footer className="bg-[#050505] pt-20 pb-10 border-t border-gray-900 text-gray-400">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-12 mb-16">
            <div className="col-span-2 md:col-span-1">
              <div className="flex items-center gap-2 mb-6">
                <div className="w-8 h-8 bg-indigo-600 rounded-lg flex items-center justify-center">
                  <span className="text-white font-bold tracking-tighter">CQ</span>
                </div>
                <span className="font-extrabold text-xl tracking-tight text-white">CK-QR</span>
              </div>
              <p className="text-sm leading-relaxed mb-6">
                The world's most powerful platform for generating, managing, and tracking dynamic QR codes at scale.
              </p>
            </div>
            
            <div>
              <h4 className="text-white font-bold mb-4 uppercase tracking-wider text-sm">Product</h4>
              <ul className="space-y-3 text-sm">
                <li><Link href="/features/dynamic-qr" className="hover:text-white transition-colors">Dynamic QR Codes</Link></li>
                <li><Link href="/features/analytics" className="hover:text-white transition-colors">Analytics Dashboard</Link></li>
                <li><Link href="/features/design-studio" className="hover:text-white transition-colors">Design Studio</Link></li>
                <li><Link href="/features/api" className="hover:text-white transition-colors">API & Webhooks</Link></li>
              </ul>
            </div>

            <div>
              <h4 className="text-white font-bold mb-4 uppercase tracking-wider text-sm">Company</h4>
              <ul className="space-y-3 text-sm">
                <li><Link href="/company/about" className="hover:text-white transition-colors">About Us</Link></li>
                <li><Link href="/company/careers" className="hover:text-white transition-colors">Careers</Link></li>
                <li><Link href="/company/blog" className="hover:text-white transition-colors">Blog</Link></li>
                <li><Link href="/company/contact" className="hover:text-white transition-colors">Contact</Link></li>
                <li><Link href="/support/how-to-use" className="hover:text-white transition-colors text-indigo-400">Support & How-To</Link></li>
              </ul>
            </div>

            <div>
              <h4 className="text-white font-bold mb-4 uppercase tracking-wider text-sm">Legal</h4>
              <ul className="space-y-3 text-sm">
                <li><Link href="/legal/privacy" className="hover:text-white transition-colors">Privacy Policy</Link></li>
                <li><Link href="/legal/terms" className="hover:text-white transition-colors">Terms of Service</Link></li>
                <li><Link href="/legal/cookies" className="hover:text-white transition-colors">Cookie Policy</Link></li>
              </ul>
            </div>
          </div>
          
          <div className="border-t border-gray-900 pt-8 flex flex-col md:flex-row justify-between items-center text-sm">
            <p>&copy; {new Date().getFullYear()} CK-QR Inc. All rights reserved.</p>
            <div className="flex gap-4 mt-4 md:mt-0">
               <a href="#" className="text-gray-500 hover:text-white transition-colors">Twitter</a>
               <a href="#" className="text-gray-500 hover:text-white transition-colors">GitHub</a>
               <a href="#" className="text-gray-500 hover:text-white transition-colors">LinkedIn</a>
            </div>
          </div>
        </div>
      </footer>

    </div>
  );
}
