import { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import { Button } from './ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card'
import { Badge } from './ui/badge'
import { Globe, Zap, Shield, Users, DollarSign, Cpu, Database, Network, CheckCircle, Home, TrendingUp, Brain } from 'lucide-react'
import Navigation from './Navigation'

// Import images
import heroBanner from '../assets/images/hero_banner.png' // This image might need to be replaced with a relevant one for ThreeFold

function Homepage() {
  const [isVisible, setIsVisible] = useState(false)

  useEffect(() => {
    setIsVisible(true)
  }, [])

  const scrollToSection = (sectionId) => {
    document.getElementById(sectionId)?.scrollIntoView({ behavior: 'smooth' })
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
      {/* Navigation */}
      <Navigation />

      {/* Hero Section */}
      <section className={`pt-24 pb-16 px-4 sm:px-6 lg:px-8 transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
        <div className="max-w-6xl mx-auto">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div className="space-y-8">
              <div className="space-y-4">
                <Badge className="bg-blue-100 text-blue-800 hover:bg-blue-200">The Future of Infrastructure</Badge>
                <h1 className="text-2xl md:text-4xl font-bold text-slate-900 leading-tight">
                  Transform Your Building Into a <span className="text-blue-600">Digital Powerhouse</span>. The Future of Infrastructure is Decentralized.
                </h1>
                <p className="text-xl text-slate-600 leading-relaxed">
                  ThreeFold Tier-S & Tier-H Datacenters turn homes, offices, and buildings into sovereign digital infrastructure. Generate passive revenue while providing resilient, local cloud and AI services that keep data where it belongs - under your control.
                </p>
              </div>
              <div className="flex flex-col sm:flex-row gap-4">
                <Button asChild size="lg" className="bg-blue-600 hover:bg-blue-700 text-lg px- py-3">
                  <Link to="/register">Register Interest</Link>
                </Button>
                <Button onClick={() => scrollToSection('products')} variant="outline" size="lg" className="text-lg px-8 py-3">
                  Learn More About Products
                </Button>
              </div>
              <p className="text-sm text-slate-500">Join the revolution in decentralized digital infrastructure.</p>
            </div>
            <div className="relative">
              <img src={heroBanner} alt="ThreeFold Datacenter Illustration" className="w-full h-auto rounded-2xl shadow-2xl" />
              <div className="absolute inset-0 bg-gradient-to-t from-blue-600/20 to-transparent rounded-2xl"></div>
            </div>
          </div>
        </div>
      </section>

      {/* What Are Tier-S and Tier-H? */}
      <section id="products" className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
        <div className="max-w-6xl mx-auto">
          <div className="text-center space-y-8 mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">What Are Tier-S and Tier-H Datacenters?</h2>
            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
              ThreeFold introduces a new class of decentralized digital infrastructure: Tier-S for industrial scale and Tier-H for residential/office scale.
            </p>
          </div>
          <div className="grid md:grid-cols-2 gap-8">
            <Card className="text-center hover:shadow-lg transition-shadow border-blue-200">
              <CardHeader>
                <Cpu className="w-16 h-16 mx-auto mb-4 text-blue-600" />
                <CardTitle className="text-blue-600">Tier-S Datacenters</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="mb-2">Modular, industrial-grade containers that handle over 1 million transactions per second and support 100,000+ users per unit. Perfect for industrial-scale AI and cloud deployment.</p>
              </CardContent>
            </Card>
            <Card className="text-center hover:shadow-lg transition-shadow border-green-200">
              <CardHeader>
                <Home className="w-16 h-16 mx-auto mb-4 text-green-600" />
                <CardTitle className="text-green-600">Tier-H Datacenters</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="mb-2">Plug-and-play nodes for homes, offices, and mixed-use spaces. Provide full compute, storage, and networking with ultra energy-efficiency (less than 10W per node) and zero maintenance.</p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* From Real Estate to Digital Infrastructure */}
      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-green-50">
        <div className="max-w-6xl mx-auto">
          <div className="text-center space-y-8 mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">From Real Estate to Digital Infrastructure</h2>
            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
              Just Like Solar Panels Transform Buildings Into Power Generators, ThreeFold Nodes Transform Them Into Digital Utilities.
            </p>
          </div>
          <div className="grid md:grid-cols-3 gap-8">
            <Card className="text-center hover:shadow-lg transition-shadow">
              <CardHeader>
                <Cpu className="w-12 h-12 mx-auto mb-4 text-blue-600" />
                <CardTitle className="text-blue-600">Compute, Storage, Networking</CardTitle>
              </CardHeader>
              <CardContent>
                Your building can produce essential digital resources.
              </CardContent>
            </Card>
            <Card className="text-center hover:shadow-lg transition-shadow">
              <CardHeader>
                <Brain className="w-12 h-12 mx-auto mb-4 text-green-600" />
                <CardTitle className="text-green-600">AI Inference Power</CardTitle>
              </CardHeader>
              <CardContent>
                Host AI workloads and contribute to decentralized AI.
              </CardContent>
            </Card>
            <Card className="text-center hover:shadow-lg transition-shadow">
              <CardHeader>
                <DollarSign className="w-12 h-12 mx-auto mb-4 text-purple-600" />
                <CardTitle className="text-purple-600">Recurring Digital Revenue</CardTitle>
              </CardHeader>
              <CardContent>
                Monetize idle capacity and generate passive income.
              </CardContent>
            </Card>
          </div>
          <p className="text-center text-xl text-slate-600 mt-12">
            Compute is now one of the world's most valuable resources. Sovereign infrastructure is the new standard.
          </p>
        </div>
      </section>

      {/* Why Real Estate Developers Should Join */}
      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
        <div className="max-w-6xl mx-auto">
          <div className="text-center space-y-8 mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Why Real Estate Developers Should Join</h2>
            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
              Transform your properties into digital assets and unlock new revenue streams.
            </p>
          </div>
          <div className="grid md:grid-cols-3 gap-8">
            <Card className="hover:shadow-lg transition-shadow">
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-blue-600">
                  <DollarSign className="h-5 w-5" />
                  Passive Digital Revenue
                </CardTitle>
              </CardHeader>
              <CardContent>
                Monetize idle compute, bandwidth, and storage capacity.
              </CardContent>
            </Card>
            <Card className="hover:shadow-lg transition-shadow">
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-green-600">
                  <TrendingUp className="h-5 w-5" />
                  Higher Property Value
                </CardTitle>
              </CardHeader>
              <CardContent>
                Market properties as cloud-enabled and future-proof.
              </CardContent>
            </Card>
            <Card className="hover:shadow-lg transition-shadow">
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-purple-600">
                  <Zap className="h-5 w-5" />
                  Green & Resilient
                </CardTitle>
              </CardHeader>
              <CardContent>
                10x less energy vs traditional datacenters, resilient to outages.
              </CardContent>
            </Card>
            <Card className="hover:shadow-lg transition-shadow">
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-orange-600">
                  <CheckCircle className="h-5 w-5" />
                  Turnkey Deployment
                </CardTitle>
              </CardHeader>
              <CardContent>
                No IT expertise required for installation and operation.
              </CardContent>
            </Card>
            <Card className="hover:shadow-lg transition-shadow">
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-teal-600">
                  <Shield className="h-5 w-5" />
                  Sovereign Cloud
                </CardTitle>
              </CardHeader>
              <CardContent>
                Data stays local and private, under your control.
              </CardContent>
            </Card>
            <Card className="hover:shadow-lg transition-shadow">
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-indigo-600">
                  <Globe className="h-5 w-5" />
                  Future-Proof
                </CardTitle>
              </CardHeader>
              <CardContent>
                Supports AI, Web3, digital twins, and modern applications.
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Technical Advantages */}
      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-purple-50">
        <div className="max-w-6xl mx-auto">
          <div className="text-center space-y-8 mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Built on Revolutionary Technology</h2>
            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
              Key differentiators that make ThreeFold superior to traditional infrastructure.
            </p>
          </div>
          <div className="grid md:grid-cols-3 gap-8">
            <Card className="text-center hover:shadow-lg transition-shadow border-blue-200">
              <CardHeader>
                <Cpu className="w-12 h-12 mx-auto mb-4 text-blue-600" />
                <CardTitle className="text-blue-600">Zero-OS</CardTitle>
              </CardHeader>
              <CardContent>
                Stateless, self-healing operating system for autonomous compute.
              </CardContent>
            </Card>
            <Card className="text-center hover:shadow-lg transition-shadow border-green-200">
              <CardHeader>
                <Database className="w-12 h-12 mx-auto mb-4 text-green-600" />
                <CardTitle className="text-green-600">Quantum-Safe Storage</CardTitle>
              </CardHeader>
              <CardContent>
                Unbreakable data protection with 10x efficiency through mathematical dispersion.
              </CardContent>
            </Card>
            <Card className="text-center hover:shadow-lg transition-shadow border-purple-200">
              <CardHeader>
                <Network className="w-12 h-12 mx-auto mb-4 text-purple-600" />
                <CardTitle className="text-purple-600">Mycelium Network</CardTitle>
              </CardHeader>
              <CardContent>
                Mesh networking that routes around failures, ensuring resilient connectivity.
              </CardContent>
            </Card>
            <Card className="text-center hover:shadow-lg transition-shadow border-orange-200">
              <CardHeader>
                <Shield className="w-12 h-12 mx-auto mb-4 text-orange-600" />
                <CardTitle className="text-orange-600">Smart Contract for IT</CardTitle>
              </CardHeader>
              <CardContent>
                Autonomous, cryptographically secured deployments for IT resources.
              </CardContent>
            </Card>
            <Card className="text-center hover:shadow-lg transition-shadow border-teal-200">
              <CardHeader>
                <Brain className="w-12 h-12 mx-auto mb-4 text-teal-600" />
                <CardTitle className="text-teal-600">Geo-Aware AI</CardTitle>
              </CardHeader>
              <CardContent>
                Private AI agents that respect boundaries and data sovereignty.
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Real Cost Comparison */}
      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
        <div className="max-w-4xl mx-auto">
          <div className="text-center space-y-8 mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Dramatic Cost Savings</h2>
            <p className="text-xl text-slate-600 max-w-3xl mx-auto">
              Experience significant cost advantages compared to traditional cloud providers.
            </p>
          </div>
          <div className="overflow-x-auto">
            <table className="min-w-full bg-white rounded-lg shadow-md">
              <thead>
                <tr className="bg-blue-600 text-white">
                  <th className="py-3 px-4 text-left">Service</th>
                  <th className="py-3 px-4 text-left">ThreeFold</th>
                  <th className="py-3 px-4 text-left">Other Providers</th>
                </tr>
              </thead>
              <tbody>
                <tr className="border-b border-slate-200">
                  <td className="py-3 px-4">Storage (1TB + 100GB Transfer)</td>
                  <td className="py-3 px-4 font-semibold">Less than $5/month</td>
                  <td className="py-3 px-4">$12–$160/month</td>
                </tr>
                <tr>
                  <td className="py-3 px-4">Compute (2 vCPU, 4GB RAM)</td>
                  <td className="py-3 px-4 font-semibold">Less than $12/month</td>
                  <td className="py-3 px-4">$20–$100/month</td>
                </tr>
              </tbody>
            </table>
          </div>
          <p className="text-center text-lg text-slate-600 mt-8">
            Up to 10x more energy efficient than traditional datacenters.
          </p>
        </div>
      </section>

      {/* Who It's For */}
      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 to-teal-50">
        <div className="max-w-6xl mx-auto">
          <div className="text-center space-y-8 mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Perfect For</h2>
            <p className="text-xl text-slate-600 max-w-4xl mx-auto">
              Clear target markets and use cases for ThreeFold's solutions.
            </p>
          </div>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            <Card className="text-center hover:shadow-lg transition-shadow">
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-blue-600">
                  <Shield className="h-5 w-5" />
                  Governments
                </CardTitle>
              </CardHeader>
              <CardContent>
                Building sovereign AI and cloud infrastructure.
              </CardContent>
            </Card>
            <Card className="text-center hover:shadow-lg transition-shadow">
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-green-600">
                  <Network className="h-5 w-5" />
                  Telecoms and ISPs
                </CardTitle>
              </CardHeader>
              <CardContent>
                Deploying local compute grids and edge solutions.
              </CardContent>
            </Card>
            <Card className="hover:shadow-lg transition-shadow">
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-purple-600">
                  <Users className="h-5 w-5" />
                  Developers and Startups
                </CardTitle>
              </CardHeader>
              <CardContent>
                Seeking cloud independence and decentralized hosting.
              </CardContent>
            </Card>
            <Card className="hover:shadow-lg transition-shadow">
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-orange-600">
                  <Brain className="h-5 w-5" />
                  AI and Web3 Companies
                </CardTitle>
              </CardHeader>
              <CardContent>
                Hosting inference or full-stack decentralized applications.
              </CardContent>
            </Card>
            <Card className="hover:shadow-lg transition-shadow">
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-teal-600">
                  <Globe className="h-5 w-5" />
                  Communities
                </CardTitle>
              </CardHeader>
              <CardContent>
                Seeking plug-and-play digital resilience and local infrastructure.
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Proven at Scale */}
      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
        <div className="max-w-4xl mx-auto text-center space-y-8">
          <h2 className="text-3xl md:text-4xl font-bold text-slate-900">Proven at Scale</h2>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
            ThreeFold's technology is already deployed globally and proven in production.
          </p>
          <div className="grid md:grid-cols-2 gap-8">
            <Card className="text-center hover:shadow-lg transition-shadow">
              <CardHeader>
                <CardTitle className="text-blue-600">Live in over 50 countries</CardTitle>
              </CardHeader>
              <CardContent>
                Our decentralized grid spans across the globe.
              </CardContent>
            </Card>
            <Card className="text-center hover:shadow-lg transition-shadow">
              <CardHeader>
                <CardTitle className="text-green-600">60,000+ CPU cores active</CardTitle>
              </CardHeader>
              <CardContent>
                Massive computational power available on the grid.
              </CardContent>
            </Card>
            <Card className="text-center hover:shadow-lg transition-shadow">
              <CardHeader>
                <CardTitle className="text-purple-600">Over 1 million contracts processed on-chain</CardTitle>
              </CardHeader>
              <CardContent>
                Secure and transparent deployments managed by smart contracts.
              </CardContent>
            </Card>
            <Card className="text-center hover:shadow-lg transition-shadow">
              <CardHeader>
                <CardTitle className="text-orange-600">Proven technology stack in production for years</CardTitle>
              </CardHeader>
              <CardContent>
                Reliable and robust infrastructure for your digital needs.
              </CardContent>
            </Card>
          </div>
          <p className="text-center text-lg text-slate-600 mt-8">
            View live statistics: <a href="https://stats.grid.tf" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">https://stats.grid.tf</a>
          </p>
        </div>
      </section>

      {/* Call to Action */}
      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-600 to-green-600 text-white">
        <div className="max-w-4xl mx-auto text-center space-y-8">
          <h2 className="text-3xl md:text-4xl font-bold">Ready to Transform Your Infrastructure?</h2>
          <p className="text-xl opacity-90 leading-relaxed">
            The future of digital infrastructure starts with your building.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button asChild size="lg" className="bg-white text-blue-600 hover:bg-slate-100 text-lg px-8 py-3">
              <Link to="/register">For Real Estate Developers: Deploy Tier-H nodes</Link>
            </Button>
            <Button asChild variant="outline" size="lg" className="border-white text-white hover:bg-white hover:text-blue-600 text-lg px-8 py-3">
              <Link to="/products">For Enterprises: Scale with Tier-S datacenters</Link>
            </Button>
          </div>
          <p className="text-sm opacity-75">Join the most resilient, inclusive, and intelligent internet.</p>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-8 px-4 sm:px-6 lg:px-8 bg-slate-900 text-white">
        <div className="max-w-6xl mx-auto text-center">
          <div className="flex items-center justify-center space-x-2 mb-4">
            <Globe className="h-6 w-6 text-blue-400" />
            <span className="text-xl font-bold">ThreeFold Cloud</span>
          </div>
          <p className="text-slate-400">Building the new internet, together in our sovereign digital freezone.</p>
          <p className="text-sm text-slate-500 mt-4">© 2025 ThreeFold Cloud. A new era of decentralized infrastructure.</p>
        </div>
      </footer>
    </div>
  )
}

export default Homepage