import React, { useState, useEffect } from 'react';
import { 
  Globe2, CheckCircle2, Building2, CreditCard, 
  Landmark, Package, Users, ArrowRight, ChevronRight, 
  MapPin, BarChart3, ShieldCheck, Zap, X, Menu,
  Quote
} from 'lucide-react';

const App = () => {
  const [isScrolled, setIsScrolled] = useState(false);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

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

  return (
    <div className="min-h-screen bg-slate-50 font-sans text-slate-900 selection:bg-blue-100 selection:text-blue-900">
      
      {/* Navigation */}
      <nav className={`fixed top-0 w-full z-50 transition-all duration-300 ${isScrolled ? 'bg-white/90 backdrop-blur-md border-b border-slate-200 shadow-sm py-3' : 'bg-transparent py-5'}`}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center">
            <div className="flex items-center space-x-2 cursor-pointer">
              <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${isScrolled ? 'bg-blue-600' : 'bg-white'}`}>
                <Globe2 className={`w-5 h-5 ${isScrolled ? 'text-white' : 'text-[#3498db]'}`} />
              </div>
              <span className={`text-xl font-bold tracking-tight ${isScrolled ? 'text-slate-900' : 'text-white'}`}>GOLDEN FLYING INC</span>
            </div>
            
            {/* Desktop Nav */}
            <div className="hidden md:flex items-center space-x-8">
              <a href="#solutions" className={`text-sm font-medium transition-colors ${isScrolled ? 'text-slate-600 hover:text-blue-600' : 'text-white/90 hover:text-white'}`}>Solutions</a>
              <a href="#capabilities" className={`text-sm font-medium transition-colors ${isScrolled ? 'text-slate-600 hover:text-blue-600' : 'text-white/90 hover:text-white'}`}>Capabilities</a>
              <a href="#coverage" className={`text-sm font-medium transition-colors ${isScrolled ? 'text-slate-600 hover:text-blue-600' : 'text-white/90 hover:text-white'}`}>Global Network</a>
              <a href="#resources" className={`text-sm font-medium transition-colors ${isScrolled ? 'text-slate-600 hover:text-blue-600' : 'text-white/90 hover:text-white'}`}>Resources</a>
            </div>

            <div className="hidden md:flex items-center space-x-4">
              <button className={`text-sm font-medium transition-colors ${isScrolled ? 'text-slate-600 hover:text-slate-900' : 'text-white/90 hover:text-white'}`}>Login</button>
              <button className={`px-5 py-2.5 text-sm font-medium rounded-lg transition-all shadow-sm ${isScrolled ? 'bg-slate-900 hover:bg-slate-800 text-white' : 'bg-white hover:bg-slate-50 text-[#3498db]'}`}>
                Contact Sales
              </button>
            </div>

            {/* Mobile Menu Toggle */}
            <button className={`md:hidden ${isScrolled || mobileMenuOpen ? 'text-slate-600' : 'text-white'}`} onClick={() => setMobileMenuOpen(!mobileMenuOpen)}>
              {mobileMenuOpen ? <X /> : <Menu />}
            </button>
          </div>
        </div>
      </nav>

      {/* Mobile Menu Overlay */}
      {mobileMenuOpen && (
        <div className="fixed inset-0 top-[60px] bg-white z-40 p-4 border-t border-slate-100 md:hidden">
          <div className="flex flex-col space-y-4">
            <a href="#solutions" className="text-lg font-medium text-slate-800 py-2 border-b border-slate-100">Solutions</a>
            <a href="#capabilities" className="text-lg font-medium text-slate-800 py-2 border-b border-slate-100">Capabilities</a>
            <a href="#coverage" className="text-lg font-medium text-slate-800 py-2 border-b border-slate-100">Global Network</a>
            <button className="mt-4 px-5 py-3 bg-[#3498db] text-white font-medium rounded-lg">Contact Sales</button>
          </div>
        </div>
      )}

      {/* Hero Section */}
      <section 
        className="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden shadow-[0_4px_8px_rgba(0,0,0,0.1)] rounded-b-[10px]"
        style={{ background: 'linear-gradient(45deg, #3498db, #2ecc71)' }}
      >
        {/* Pattern Overlay */}
        <div 
          className="absolute inset-0 pointer-events-none"
          style={{
            backgroundImage: 'linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px)',
            backgroundSize: '20px 20px'
          }}
        ></div>
        
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div className="grid md:grid-cols-2 gap-8 lg:gap-16 items-center">
            {/* Left Content */}
            <div className="max-w-2xl">
              <div className="inline-flex items-center px-3 py-1.5 rounded-full bg-white/20 border border-white/30 text-white text-sm font-medium mb-6 backdrop-blur-sm">
                <span className="flex w-2 h-2 rounded-full bg-white mr-2 animate-pulse"></span>
                Next-Generation Global Infrastructure
              </div>
              <h1 className="text-5xl lg:text-6xl font-extrabold text-white leading-[1.15] tracking-tight mb-6">
                Go Local, <br/>
                <span>Globally.</span>
              </h1>
              <p className="text-lg lg:text-xl text-white/90 mb-8 leading-relaxed max-w-lg">
                More than just cross-border sales—build true localized operational capabilities. We provide full-stack infrastructure for entity setup, local payments, tax compliance, fulfillment, and HR in 100+ countries.
              </p>
              <div className="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
                <button className="px-8 py-4 bg-white hover:bg-slate-50 text-[#3498db] text-base font-bold rounded-lg transition-all shadow-lg flex items-center justify-center">
                  Start Your Global Journey <ArrowRight className="ml-2 w-5 h-5" />
                </button>
                <button className="px-8 py-4 bg-transparent border border-white/50 hover:bg-white/10 text-white text-base font-medium rounded-lg transition-all flex items-center justify-center backdrop-blur-sm">
                  Watch Platform Demo
                </button>
              </div>
              
              <div className="mt-10 flex flex-col xl:flex-row xl:items-center space-y-2 xl:space-y-0 xl:space-x-4 text-sm text-white/80 font-medium">
                <div className="flex items-center"><CheckCircle2 className="w-4 h-4 text-white mr-1.5 flex-shrink-0" /> Covering 100+ Countries</div>
                <div className="flex items-center"><CheckCircle2 className="w-4 h-4 text-white mr-1.5 flex-shrink-0" /> 100% Compliance Guaranteed</div>
              </div>
            </div>

            {/* Right Visualization (Global Map & Floating Cards) */}
            <div className="relative hidden md:block h-[400px] lg:h-[500px]">
              {/* Earth Image Visualization */}
              <div className="absolute inset-0 flex items-center justify-center">
                <div className="w-[300px] h-[300px] lg:w-[420px] lg:h-[420px] rounded-full overflow-hidden shadow-[0_0_80px_rgba(255,255,255,0.2)] border border-white/20 relative">
                   <img 
                     src="https://images.unsplash.com/photo-1614730321146-b6fa6a46bcb4?auto=format&fit=crop&w=800&q=80" 
                     alt=""
                     className="w-full h-full object-cover animate-[spin_120s_linear_infinite]"
                   />
                   {/* Inner shadow for 3D sphere effect */}
                   <div className="absolute inset-0 rounded-full shadow-[inset_-30px_-30px_70px_rgba(0,0,0,0.7)] pointer-events-none"></div>
                   <div className="absolute inset-0 rounded-full shadow-[inset_10px_10px_30px_rgba(255,255,255,0.4)] pointer-events-none"></div>
                </div>
              </div>

              {/* Floating Cards */}
              <div className="absolute top-4 lg:top-10 left-0 bg-white/80 backdrop-blur-md p-3 lg:p-4 rounded-xl shadow-xl border border-white max-w-[180px] lg:max-w-[200px] animate-[bounce_6s_infinite]">
                <div className="flex items-center space-x-3 mb-2">
                  <div className="bg-indigo-100 p-2 rounded-lg"><Building2 className="w-4 h-4 lg:w-5 lg:h-5 text-indigo-600" /></div>
                  <span className="font-semibold text-xs lg:text-sm text-slate-800">US Entity Setup</span>
                </div>
                <div className="w-full bg-slate-100 h-1.5 rounded-full"><div className="bg-indigo-600 w-full h-1.5 rounded-full"></div></div>
                <p className="text-[10px] lg:text-xs text-slate-500 mt-2">Delaware C-Corp Ready</p>
              </div>

              <div className="absolute top-1/2 right-0 -translate-y-1/2 bg-white/80 backdrop-blur-md p-3 lg:p-4 rounded-xl shadow-xl border border-white max-w-[200px] lg:max-w-[220px] animate-[bounce_7s_infinite_0.5s]">
                <div className="flex items-center space-x-3 mb-2">
                  <div className="bg-emerald-100 p-2 rounded-lg"><Landmark className="w-4 h-4 lg:w-5 lg:h-5 text-emerald-600" /></div>
                  <span className="font-semibold text-xs lg:text-sm text-slate-800">EU Tax Compliance</span>
                </div>
                <div className="flex items-center justify-between mt-2 border-t border-slate-100 pt-2">
                  <span className="text-[10px] lg:text-xs text-slate-500">VAT Filing</span>
                  <span className="text-[10px] lg:text-xs font-semibold text-emerald-600">Auto-Completed</span>
                </div>
              </div>

              <div className="absolute bottom-4 lg:bottom-10 left-1/4 bg-white/80 backdrop-blur-md p-3 lg:p-4 rounded-xl shadow-xl border border-white max-w-[200px] lg:max-w-[240px] animate-[bounce_8s_infinite_1s]">
                <div className="flex items-center space-x-3 mb-2">
                  <div className="bg-blue-100 p-2 rounded-lg"><CreditCard className="w-4 h-4 lg:w-5 lg:h-5 text-blue-600" /></div>
                  <span className="font-semibold text-xs lg:text-sm text-slate-800">Local Payments</span>
                </div>
                <div className="flex items-baseline space-x-2 mt-1">
                  <span className="text-lg lg:text-xl font-bold text-slate-900">€ 45,200</span>
                  <span className="text-[10px] lg:text-xs text-green-500">+12%</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Trusted Brands */}
      <section className="py-10 border-y border-slate-200 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <p className="text-center text-sm font-semibold text-slate-400 uppercase tracking-wider mb-8">Trusted by Innovative Global Enterprises</p>
          <div className="flex flex-wrap justify-center gap-12 opacity-60 grayscale hover:grayscale-0 transition-all duration-500">
            {/* Using text logos as placeholders for premium feel */}
            <div className="text-2xl font-black font-serif text-slate-800">ACME Corp</div>
            <div className="text-2xl font-bold tracking-tighter text-slate-800">GlobalNet</div>
            <div className="text-2xl font-black italic text-slate-800">Vertex</div>
            <div className="text-2xl font-semibold uppercase tracking-widest text-slate-800">Nexus</div>
            <div className="text-2xl font-extrabold text-slate-800">Horizon</div>
          </div>
        </div>
      </section>

      {/* Problem vs Solution */}
      <section id="solutions" className="py-24 bg-slate-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center max-w-3xl mx-auto mb-16">
            <h2 className="text-3xl lg:text-4xl font-bold text-slate-900 mb-4">Bridging the Traditional Expansion Gap</h2>
            <p className="text-lg text-slate-600">From simple product exports to becoming a true multinational enterprise, you no longer need to build complex operations from scratch.</p>
          </div>

          <div className="grid md:grid-cols-2 gap-8 items-stretch">
            {/* The Old Way */}
            <div className="bg-white border border-slate-200 rounded-2xl p-8 lg:p-10 shadow-sm">
              <div className="inline-flex items-center px-3 py-1 bg-red-50 text-red-600 text-sm font-semibold rounded-full mb-6">
                <X className="w-4 h-4 mr-1" /> The Traditional Way
              </div>
              <h3 className="text-xl font-bold text-slate-900 mb-6">Fragmented and High-Risk Patchwork Expansion</h3>
              <ul className="space-y-4">
                {[
                  "Need to coordinate with law firms and accountants in dozens of countries",
                  "Cross-border fund flows face constant compliance and regulatory risks",
                  "Unable to support local payment methods preferred by consumers",
                  "Cross-border labor contracts and local tax/benefits are extremely complex",
                  "Takes 6-9 months on average to launch operations in a single new country"
                ].map((item, i) => (
                  <li key={i} className="flex items-start">
                    <div className="flex-shrink-0 w-6 h-6 rounded-full bg-slate-100 flex items-center justify-center mt-0.5 mr-3">
                      <span className="text-slate-500 text-xs font-bold">{i+1}</span>
                    </div>
                    <span className="text-slate-600 leading-relaxed">{item}</span>
                  </li>
                ))}
              </ul>
            </div>

            {/* The GOLDEN FLYING INC Way */}
            <div className="bg-slate-900 rounded-2xl p-8 lg:p-10 shadow-xl relative overflow-hidden">
              <div className="absolute top-0 right-0 w-64 h-64 bg-blue-600 rounded-full blur-[100px] opacity-20 pointer-events-none"></div>
              <div className="inline-flex items-center px-3 py-1 bg-blue-500/20 border border-blue-500/30 text-blue-300 text-sm font-semibold rounded-full mb-6 relative z-10">
                <CheckCircle2 className="w-4 h-4 mr-1" /> GOLDEN FLYING INC Infrastructure
              </div>
              <h3 className="text-xl font-bold text-white mb-6 relative z-10">One Console to Command Global Local Business</h3>
              <ul className="space-y-4 relative z-10">
                {[
                  "Standardized API & console to generate global legal entities in one click",
                  "Integrated tier-1 bank networks for global clearing and local settlement",
                  "Natively supports 150+ local payment methods to boost conversion rates",
                  "Employer of Record (EOR) model for compliant global team management",
                  "Shrinks time-to-market in new regions from months to mere days"
                ].map((item, i) => (
                  <li key={i} className="flex items-start">
                    <div className="flex-shrink-0 w-6 h-6 rounded-full bg-blue-600/30 text-blue-400 flex items-center justify-center mt-0.5 mr-3">
                      <CheckCircle2 className="w-4 h-4" />
                    </div>
                    <span className="text-slate-300 leading-relaxed">{item}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Core Capabilities */}
      <section id="capabilities" className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex flex-col md:flex-row md:items-end justify-between mb-16">
            <div className="max-w-2xl">
              <h2 className="text-3xl lg:text-4xl font-bold text-slate-900 mb-4">Enterprise-Grade Globalization Engine</h2>
              <p className="text-lg text-slate-600">
                Abstracting tedious cross-border operations into standardized SaaS services, providing full-stack support from company incorporation to financial compliance.
              </p>
            </div>
            <a href="#" className="hidden md:flex items-center text-blue-600 font-semibold hover:text-blue-700 transition-colors">
              View All Feature Docs <ChevronRight className="w-4 h-4 ml-1" />
            </a>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {[
              {
                icon: <Building2 className="w-6 h-6 text-indigo-600" />,
                bg: "bg-indigo-50",
                title: "Global Entity Setup & Maintenance",
                desc: "Quickly register companies and open offshore accounts in 100+ jurisdictions, with automated annual filings and corporate secretary services."
              },
              {
                icon: <CreditCard className="w-6 h-6 text-blue-600" />,
                bg: "bg-blue-50",
                title: "Local Payments & Acquiring",
                desc: "Integrate local payment methods like iDEAL, Pix, and Alipay to lower chargeback rates. Supports multi-currency pooling and FX hedging."
              },
              {
                icon: <Landmark className="w-6 h-6 text-emerald-600" />,
                bg: "bg-emerald-50",
                title: "Tax & Accounting Compliance",
                desc: "Built-in global tax engine for real-time Sales Tax/VAT calculation, auto-generating localized financial reports for 100% audit compliance."
              },
              {
                icon: <Zap className="w-6 h-6 text-amber-600" />,
                bg: "bg-amber-50",
                title: "DTC Storefront Infrastructure",
                desc: "High-performance localized digital storefront infrastructure for expanding brands, including localized pricing and multi-language checkout."
              },
              {
                icon: <Package className="w-6 h-6 text-purple-600" />,
                bg: "bg-purple-50",
                title: "Cross-Border & Local Fulfillment",
                desc: "Connect with top-tier global 3PL networks for smart inventory routing, ensuring a last-mile delivery experience comparable to domestic brands."
              },
              {
                icon: <Users className="w-6 h-6 text-rose-600" />,
                bg: "bg-rose-50",
                title: "Local HR & Payroll",
                desc: "Legally hire overseas talent via EOR, automating local social security, benefits compliance, and multi-currency payroll distribution."
              }
            ].map((feature, index) => (
              <div key={index} className="group p-8 rounded-2xl border border-slate-200 bg-white hover:border-blue-200 hover:shadow-lg hover:shadow-blue-900/5 transition-all duration-300 relative overflow-hidden">
                <div className={`w-12 h-12 ${feature.bg} rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform`}>
                  {feature.icon}
                </div>
                <h3 className="text-xl font-bold text-slate-900 mb-3">{feature.title}</h3>
                <p className="text-slate-600 leading-relaxed text-sm">
                  {feature.desc}
                </p>
                <div className="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-blue-600 to-indigo-600 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300"></div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Process Timeline */}
      <section className="py-24 bg-slate-50 border-t border-slate-200">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="text-center max-w-2xl mx-auto mb-16">
               <h2 className="text-3xl font-bold text-slate-900 mb-4">Agile Deployment: 4 Steps to Global Operations</h2>
               <p className="text-slate-600">Skip months of legal and financial consulting. Rapidly expand your business footprint following our proven, standard pathways.</p>
            </div>

            <div className="relative">
               {/* Connecting Line */}
               <div className="hidden md:block absolute top-1/2 left-0 w-full h-0.5 bg-slate-200 -translate-y-1/2 z-0"></div>
               
               <div className="grid md:grid-cols-4 gap-8 relative z-10">
                  {[
                     { step: "01", title: "Select Target Markets", desc: "Choose the countries you want to enter in the console; the system auto-matches compliance requirements." },
                     { step: "02", title: "1-Click Infrastructure Setup", desc: "Submit basic info to auto-generate legal documents and spin up entity registration and payment accounts in parallel." },
                     { step: "03", title: "API Integration & Unification", desc: "Seamlessly integrate local checkout and tax calculations into your system via a unified GraphQL API." },
                     { step: "04", title: "Launch Local Operations", desc: "Hire local teams, collect payments in local currencies, and manage global performance from one console." }
                  ].map((item, index) => (
                     <div key={index} className="bg-white border border-slate-200 p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow">
                        <div className="w-10 h-10 bg-slate-900 text-white rounded-full flex items-center justify-center font-bold text-sm mb-5 shadow-inner">
                           {item.step}
                        </div>
                        <h4 className="text-lg font-bold text-slate-900 mb-2">{item.title}</h4>
                        <p className="text-sm text-slate-600 leading-relaxed">{item.desc}</p>
                     </div>
                  ))}
               </div>
            </div>
         </div>
      </section>

      {/* Dark Global Coverage Section */}
      <section id="coverage" className="py-24 lg:py-32 bg-[#0A192F] text-white relative overflow-hidden">
        {/* Background glow effects */}
        <div className="absolute top-0 left-1/4 w-96 h-96 bg-blue-600 rounded-full blur-[120px] opacity-20"></div>
        <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-indigo-600 rounded-full blur-[120px] opacity-20"></div>

        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div className="text-center mb-16">
            <h2 className="text-3xl lg:text-5xl font-bold mb-6 tracking-tight">Our Infrastructure, Your Global Home Court</h2>
            <p className="text-xl text-slate-300 max-w-3xl mx-auto">
              GOLDEN FLYING INC has established legitimate financial and operational pipelines across major economies, enabling you to achieve the highest level of global trust at the lowest cost.
            </p>
          </div>

          {/* Metrics */}
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
            {[
              { label: "Supported Countries & Regions", value: "100+" },
              { label: "Native Payment Methods", value: "150+" },
              { label: "Annual Transaction Volume", value: "$5B+" },
              { label: "System API Uptime", value: "99.99%" }
            ].map((metric, i) => (
              <div key={i} className="text-center">
                <div className="text-4xl lg:text-5xl font-black text-white mb-2 tracking-tight">{metric.value}</div>
                <div className="text-sm font-medium text-slate-400 uppercase tracking-wider">{metric.label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Testimonials */}
      <section className="py-24 bg-white border-b border-slate-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl font-bold text-slate-900">Chosen by Industry Pioneers</h2>
          </div>

          <div className="grid md:grid-cols-2 gap-8">
            <div className="bg-slate-50 p-8 lg:p-10 rounded-2xl relative">
              <Quote className="absolute top-8 right-8 w-12 h-12 text-slate-200" />
              <div className="flex text-amber-400 mb-6">
                 {'★'.repeat(5)}
              </div>
              <p className="text-lg text-slate-700 leading-relaxed mb-8 italic">
                "Before switching to GOLDEN FLYING INC, our European entity structure and cross-border taxes consumed half of our CFO team's bandwidth. Now, everything is compliant, transparent, and automated. This is true enterprise-grade global infrastructure."
              </p>
              <div className="flex items-center">
                <div className="w-12 h-12 bg-slate-300 rounded-full mr-4"></div>
                <div>
                  <h4 className="font-bold text-slate-900">Sarah Chen</h4>
                  <p className="text-sm text-slate-500">CFO, Top Consumer Electronics Brand</p>
                </div>
              </div>
            </div>

            <div className="bg-slate-50 p-8 lg:p-10 rounded-2xl relative">
              <Quote className="absolute top-8 right-8 w-12 h-12 text-slate-200" />
              <div className="flex text-amber-400 mb-6">
                 {'★'.repeat(5)}
              </div>
              <p className="text-lg text-slate-700 leading-relaxed mb-8 italic">
                "They didn't just provide a payment gateway; they solved an entire package of localization and compliance challenges. Using their unified interface, our local conversion rate in LATAM increased by 40% in a single month."
              </p>
              <div className="flex items-center">
                <div className="w-12 h-12 bg-slate-300 rounded-full mr-4"></div>
                <div>
                  <h4 className="font-bold text-slate-900">David Miller</h4>
                  <p className="text-sm text-slate-500">VP of Engineering, Global SaaS Inc</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <section className="py-24 bg-white">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-4xl lg:text-5xl font-bold text-slate-900 mb-6 tracking-tight">Ready to Conquer the Global Market as a Local?</h2>
          <p className="text-xl text-slate-600 mb-10 max-w-2xl mx-auto">
            Connect with our team of cross-border operations experts to tailor your global infrastructure deployment roadmap.
          </p>
          <div className="flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-4">
            <button className="px-8 py-4 bg-slate-900 hover:bg-slate-800 text-white text-base font-medium rounded-lg transition-all w-full sm:w-auto flex items-center justify-center">
              Schedule a Consultation <ArrowRight className="ml-2 w-5 h-5" />
            </button>
            <button className="px-8 py-4 bg-white border border-slate-200 hover:border-slate-300 hover:bg-slate-50 text-slate-700 text-base font-medium rounded-lg transition-all w-full sm:w-auto">
              Read Industry Reports
            </button>
          </div>
        </div>
      </section>

      {/* Minimal Enterprise Footer */}
      <footer className="bg-slate-50 pt-16 pb-8 border-t border-slate-200 text-sm">
        <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 lg:grid-cols-5 gap-8 mb-12">
            <div className="col-span-2 lg:col-span-2">
              <div className="flex items-center space-x-2 mb-6">
                <div className="w-6 h-6 bg-slate-900 rounded-md flex items-center justify-center">
                  <Globe2 className="text-white w-3 h-3" />
                </div>
                <span className="text-lg font-bold tracking-tight text-slate-900">GOLDEN FLYING INC</span>
              </div>
              <p className="text-slate-500 max-w-sm mb-6 leading-relaxed">
                Enterprise-grade global operations infrastructure platform, dedicated to helping global brands build impeccable localized business experiences.
              </p>
            </div>
            
            <div>
              <h4 className="font-semibold text-slate-900 mb-4 uppercase tracking-wider text-xs">Solutions</h4>
              <ul className="space-y-3 text-slate-600">
                <li><a href="#" className="hover:text-blue-600 transition-colors">Entities & Compliance</a></li>
                <li><a href="#" className="hover:text-blue-600 transition-colors">Global Acquiring Network</a></li>
                <li><a href="#" className="hover:text-blue-600 transition-colors">Automated Tax Engine</a></li>
                <li><a href="#" className="hover:text-blue-600 transition-colors">Cross-Border Fulfillment</a></li>
                <li><a href="#" className="hover:text-blue-600 transition-colors">Global EOR Hiring</a></li>
              </ul>
            </div>

            <div>
              <h4 className="font-semibold text-slate-900 mb-4 uppercase tracking-wider text-xs">Developers</h4>
              <ul className="space-y-3 text-slate-600">
                <li><a href="#" className="hover:text-blue-600 transition-colors">API Documentation</a></li>
                <li><a href="#" className="hover:text-blue-600 transition-colors">SDK Downloads</a></li>
                <li><a href="#" className="hover:text-blue-600 transition-colors">System Status</a></li>
                <li><a href="#" className="hover:text-blue-600 transition-colors">Webhooks</a></li>
              </ul>
            </div>

            <div>
              <h4 className="font-semibold text-slate-900 mb-4 uppercase tracking-wider text-xs">Company</h4>
              <ul className="space-y-3 text-slate-600">
                <li><a href="#" className="hover:text-blue-600 transition-colors">About Us</a></li>
                <li><a href="#" className="hover:text-blue-600 transition-colors">Customer Stories</a></li>
                <li><a href="#" className="hover:text-blue-600 transition-colors">Partners</a></li>
                <li><a href="#" className="hover:text-blue-600 transition-colors">Careers</a></li>
                <li><a href="#" className="hover:text-blue-600 transition-colors">Contact Us</a></li>
              </ul>
            </div>
          </div>

          <div className="flex flex-col md:flex-row items-center justify-between pt-8 border-t border-slate-200 text-slate-500 text-xs">
            <p>© {new Date().getFullYear()} GOLDEN FLYING INC. All rights reserved.</p>
            <div className="flex space-x-6 mt-4 md:mt-0">
              <a href="#" className="hover:text-slate-900">Privacy Policy</a>
              <a href="#" className="hover:text-slate-900">Terms of Service</a>
              <a href="#" className="hover:text-slate-900">Legal Notice</a>
            </div>
          </div>
        </div>
      </footer>

    </div>
  );
};

export default App;