import { Link } from 'react-router-dom'
import { Button } from './ui/button'
import { Card, CardContent, CardHeader, CardTitle } from './ui/card'
import { Badge } from './ui/badge'
import { Cpu, Database, Network, Shield, Zap, Scale, Globe, CheckCircle, BookOpen, Brain, Layers } from 'lucide-react'
import quantumSafeImage from '../assets/quantum_safe.png'
import MyceliumImage from '../assets/myceliumn.png'
import { AlertCircle } from 'lucide-react'
import GalaxyMachine from '../assets/tenstorrent_galaxy_internal_components.png'
import Navigation from './Navigation.jsx'

function TechnologyPage() {
  return (
    <div className="min-h-screen bg-background">
      {/* The `Navigation` component is now rendered in `App.jsx` remove it from here */}
      <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
        <img src={GalaxyMachine} alt="Galaxy" className="w-full h-auto rounded-lg shadow-lg" />
      </div>

      {/* Technology Hero Section */}
      <section className="pb-16 px-4 sm:px-6 lg:px-8">
        <div className="max-w-5xl mx-auto text-center space-y-8">
          <Badge className="bg-primary/10 text-primary hover:bg-primary/20">Our Innovations</Badge>
          <h1 className="text-4xl md:text-6xl font-bold text-foreground leading-tight">
            Infrastructure Reimagined from <span className="text-primary">First Principles</span>
          </h1>
          <p className="text-xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
            ThreeFold's technology stack represents the most significant advancement in cloud infrastructure since virtualization. Built on breakthrough innovations in compute, storage, and networking that solve the fundamental problems of centralized systems.
          </p>
        </div>
      </section>

      {/* Core Technology Pillars */}
      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
        <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-foreground">Three Pillars of Innovation</h2>
            <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
              Overview of the three main technology innovations that power ThreeFold.
            </p>
          </div>
          <div className="grid md:grid-cols-3 gap-8">
            <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
              <CardHeader>
                <Cpu className="w-16 h-16 mx-auto mb-4 text-primary" />
                <CardTitle className="text-primary">Zero-OS Compute System</CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-1 text-sm text-foreground">
                  <li>Stateless, autonomous operating system</li>
                  <li>Depending the usecase can more efficient than traditional systems</li>
                  <li>Self-healing and cryptographically secured</li>
                </ul>
              </CardContent>
            </Card>
            <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
              <CardHeader>
                <Database className="w-16 h-16 mx-auto mb-4 text-green-600" />
                <CardTitle className="text-green-600">Quantum-Safe Storage</CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-1 text-sm text-foreground">
                  <li>Mathematical data dispersion (not replication)</li>
                  <li>20% overhead vs 400% in traditional systems</li>
                  <li>Unbreakable and self-healing architecture</li>
                </ul>
              </CardContent>
            </Card>
            <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
              <CardHeader>
                <Network className="w-16 h-16 mx-auto mb-4 text-primary" />
                <CardTitle className="text-primary">Mycelium Network</CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-1 text-sm text-foreground">
                  <li>Peer-to-peer mesh overlay network</li>
                  <li>End-to-end encryption with shortest path routing</li>
                  <li>Resilient to internet failures and attacks</li>
                </ul>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Zero-OS: Autonomous Compute */}
      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background">
        <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-foreground">Zero-OS: The World's First Stateless Cloud OS</h2>
            <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
              Deep dive into the revolutionary operating system that powers ThreeFold.
            </p>
          </div>
          <div className="grid md:grid-cols-2 gap-8">
            <div className="space-y-6">
              <h3 className="text-2xl font-bold text-primary">Core Principles:</h3>
              <ul className="space-y-3 text-lg text-foreground">
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> <strong>Autonomy:</strong> Operates without human maintenance</li>
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> <strong>Simplicity:</strong> Avoid layers, less is more</li>
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> <strong>Stateless:</strong> Immune to corruption</li>
              </ul>
            </div>
            <div className="space-y-6">
              <h3 className="text-2xl font-bold text-primary">Unique:</h3>
              <ul className="space-y-3 text-lg text-foreground">
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> <strong>Zero-Install:</strong> Boots from network, no local installation</li>
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> <strong>Zero-Images:</strong> Container images 1000x smaller (2MB vs 2GB)</li>
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> <strong>Smart Contract for IT:</strong> Cryptographically secured deployments</li>
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> <strong>Deterministic Execution:</strong> Reproducible, tamper-proof workloads</li>
              </ul>
            </div>
          </div>
          <div className="mt-12 text-center">
            <h3 className="text-2xl font-bold text-primary mb-6">Technical Advantages:</h3>
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
              <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
                <CardHeader><CardTitle className="text-green-600">Cryptographic verification</CardTitle></CardHeader>
                <CardContent>Ensures integrity of all components.</CardContent>
              </Card>
              <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
                <CardHeader><CardTitle className="text-primary">Self-healing and autonomous</CardTitle></CardHeader>
                <CardContent>Operates without human intervention.</CardContent>
              </Card>
              <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
                <CardHeader><CardTitle className="text-orange-600">Compatible with Kubernetes and VMs</CardTitle></CardHeader>
                <CardContent>Flexible for diverse workloads.</CardContent>
              </Card>
            </div>
          </div>
        </div>
      </section>

      {/* Quantum-Safe Storage: Unbreakable Data */}
      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
        <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-foreground">Quantum-Safe Storage: Mathematics Over Replication</h2>
            <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
              Explanation of the mathematical storage breakthrough that ensures unbreakable data.
            </p>
          </div>
          <div className="grid md:grid-cols-2 gap-8 items-center">
            <div className="md:col-span-1 flex justify-center">
              <img src={quantumSafeImage} alt="Quantum Safe Storage" className="w-full h-auto rounded-lg shadow-lg" />
            </div>
            <div className="md:col-span-1 space-y-6">
              <h3 className="text-2xl font-bold text-green-600">How It Works:</h3>
              <ul className="space-y-3 text-lg text-foreground">
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Data is fragmented and transformed into mathematical equations</li>
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Equations are distributed across multiple nodes</li>
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Original data fragments are discarded</li>
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Any subset of equations can reconstruct the original data</li>
              </ul>
            <h3 className="text-2xl font-bold text-green-600">Zero-Knowledge Architecture:</h3>
            <ul className="space-y-3 text-lg text-foreground">
              <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> No single node knows what it stores</li>
              <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Cryptographic proof without data exposure</li>
              <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Post-quantum security resistant</li>
              <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Self-healing against bitrot and failures</li>
            </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Mycelium Network: Intelligent Connectivity */}
      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background">
        <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-foreground">Mycelium Network: The Internet's Missing Layer</h2>
            <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
              Technical deep dive into the networking innovation that ensures intelligent and resilient connectivity.
            </p>
          </div>
          <div className="grid md:grid-cols-2 gap-8 items-center">
            <div className="md:col-span-1 space-y-6">
              <h3 className="text-2xl font-bold text-primary">Core Capabilities:</h3>
              <ul className="space-y-3 text-lg text-foreground">
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> <strong>End-to-End Encryption</strong> </li>
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> <strong>Shortest Path Routing</strong> </li>
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> <strong>Geographic Awareness:</strong></li>
              </ul>
              <h3 className="text-2xl font-bold text-primary mt-8">Technical Implementation:</h3>
              <ul className="space-y-3 text-lg text-foreground">
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Peer-to-peer mesh topology</li>
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Up to 1 Gbps throughput per agent</li>
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Protocol-agnostic data transport</li>
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-primary" /> Authentication-based security (not perimeter-based)</li>
              </ul>
            </div>
            <div className="md:col-span-1 flex justify-center">
              <img src={MyceliumImage} alt="Quantum Safe Storage" className="w-full h-auto rounded-lg shadow-lg" />
            </div>
          </div>
          <div className="mt-12 text-center">
            <h3 className="text-2xl font-bold text-primary mb-6">Beyond Traditional Networking:</h3>
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
              <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
                <CardHeader><CardTitle className="text-primary">Survives internet outages</CardTitle></CardHeader>
                <CardContent>Ensures continuity even during major disruptions.</CardContent>
              </Card>
              <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
                <CardHeader><CardTitle className="text-green-600">Enables true peer-to-peer</CardTitle></CardHeader>
                <CardContent>Facilitates direct communication between users.</CardContent>
              </Card>
              <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
                <CardHeader><CardTitle className="text-primary">Reduces latency</CardTitle></CardHeader>
                <CardContent>Through optimal path selection and local routing.</CardContent>
              </Card>
            </div>
          </div>
        </div>
      </section>

      {/* Architectural Innovations */}
      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background">
        <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-foreground">Integrated Architecture: Greater Than Sum of Parts</h2>
            <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
              How ThreeFold's core technologies work together to create a superior infrastructure.
            </p>
          </div>
          <div className="grid md:grid-cols-2 gap-8">
            <div className="space-y-6">
              <h3 className="text-2xl font-bold text-primary">Geo-Aware Infrastructure:</h3>
              <ul className="space-y-3 text-lg text-foreground">
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Data sovereignty with precise location control</li>
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Compliance with local regulations (GDPR, etc.)</li>
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Shortest physical paths for efficiency</li>
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Resilient to geopolitical disruptions</li>
              </ul>
            </div>
            <div className="space-y-6">
              <h3 className="text-2xl font-bold text-primary">Smart Contract for IT:</h3>
              <ul className="space-y-3 text-lg text-foreground">
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Cryptographically secured deployments</li>
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Multi-signature authentication</li>
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Immutable execution records on blockchain</li>
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Autonomous management without human intervention</li>
              </ul>
            </div>
          </div>

        </div>
      </section>

      {/* Technical Comparisons */}
      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background">
        <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-foreground">ThreeFold vs Traditional Infrastructure</h2>
            <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
              Side-by-side comparison with traditional approaches.
            </p>
          </div>
          <div className="overflow-x-auto">
            <table className="min-w-full bg-card rounded-lg shadow-md">
              <thead>
                <tr className="bg-primary text-primary-foreground">
                  <th className="py-3 px-4 text-left">Aspect</th>
                  <th className="py-3 px-4 text-left">Traditional Cloud</th>
                  <th className="py-3 px-4 text-left">ThreeFold</th>
                </tr>
              </thead>
              <tbody>
                <tr className="border-b border-border">
                  <td className="py-3 px-4">OS Deployment</td>
                  <td className="py-3 px-4">Local installation, complex updates</td>
                  <td className="py-3 px-4 font-semibold">Network boot, stateless</td>
                </tr>
                <tr className="border-b border-border">
                  <td className="py-3 px-4">Container Images</td>
                  <td className="py-3 px-4">2GB+ monolithic images</td>
                  <td className="py-3 px-4 font-semibold">2MB metadata-only</td>
                </tr>
                <tr className="border-b border-border">
                  <td className="py-3 px-4">Storage Redundancy</td>
                  <td className="py-3 px-4">400% overhead (4 copies)</td>
                  <td className="py-3 px-4 font-semibold">20% overhead (math)</td>
                </tr>
                <tr className="border-b border-border">
                  <td className="py-3 px-4">Network Security</td>
                  <td className="py-3 px-4">Perimeter-based firewalls</td>
                  <td className="py-3 px-4 font-semibold">End-to-end encryption</td>
                </tr>
                <tr className="border-b border-border">
                  <td className="py-3 px-4">Management</td>
                  <td className="py-3 px-4">Human administrators</td>
                  <td className="py-3 px-4 font-semibold">Autonomous agents</td>
                </tr>
                <tr className="border-b border-border">
                  <td className="py-3 px-4">Scalability</td>
                  <td className="py-3 px-4">Vertical, expensive</td>
                  <td className="py-3 px-4 font-semibold">Horizontal, unlimited</td>
                </tr>
                <tr className="border-b border-border">
                  <td className="py-3 px-4">Energy Efficiency</td>
                  <td className="py-3 px-4">High consumption</td>
                  <td className="py-3 px-4 font-semibold">10x more efficient</td>
                </tr>
                <tr className="border-b border-border">
                  <td className="py-3 px-4">Data Sovereignty</td>
                  <td className="py-3 px-4">Limited control</td>
                  <td className="py-3 px-4 font-semibold">Complete control</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </section>

      {/* Implementation Status & Roadmap */}
      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
        <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-foreground">Production-Ready Technology & Roadmap</h2>
            <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
              Current status and future developments of ThreeFold's technology.
            </p>
          </div>
          <div className="grid md:grid-cols-3 gap-8">
            <div className="space-y-6">
              <h3 className="text-2xl font-bold text-primary">Currently Available:</h3>
              <ul className="space-y-3 text-lg text-foreground">
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Zero-OS Core: Production (multiple years)</li>
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Quantum-Safe Storage: Production</li>
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Mycelium Network: Beta (v3.13+)</li>
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Web Gateway: Production</li>
              </ul>
            </div>
            <div className="space-y-6">
              <h3 className="text-2xl font-bold text-primary">Coming H2 2025:</h3>
              <ul className="space-y-3 text-lg text-foreground">
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Smart Contract for IT: General availability</li>
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Geo-Aware AI Agents (3AI)</li>
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> 3CORE Ledger: Geo-fenced blockchain</li>
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> FungiStor: Global content delivery</li>
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Enhanced enterprise features</li>
              </ul>
            </div>
<div className="space-y-6">
              <h3 className="text-2xl font-bold text-primary">Live Deployment Stats:</h3>
              <ul className="space-y-3 text-lg text-foreground">
                <li>2000+ nodes across 70+ countries</li>
                <li>60,000+ CPU cores active</li>
                <li>1+ million contracts processed</li>
                <li>Petabytes of data stored safely</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Open Source & Standards */}
      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background">
        <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-foreground">Built on Open Principles</h2>
            <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
              Commitment to openness and interoperability.
            </p>
          </div>
          <div className="grid md:grid-cols-3 gap-8">
            <div className="space-y-6">
              <h3 className="text-2xl font-bold text-primary">Open Source Components:</h3>
              <ul className="space-y-3 text-lg text-foreground">
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Core technology stack available on GitHub</li>
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Community-driven development</li>
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Transparent security auditing</li>
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> No vendor lock-in</li>
              </ul>
            </div>
            <div className="space-y-6">
              <h3 className="text-2xl font-bold text-primary">Standards Compliance:</h3>
              <ul className="space-y-3 text-lg text-foreground">
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> POSIX filesystem compatibility</li>
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Docker and Kubernetes support</li>
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Standard networking protocols</li>
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Blockchain interoperability</li>
              </ul>
            </div>
            <div className="space-y-6">
              <h3 className="text-2xl font-bold text-primary">Developer Ecosystem:</h3>
              <ul className="space-y-3 text-lg text-foreground">
                <li>Comprehensive APIs and SDKs</li>
                <li>Extensive documentation</li>
                <li>Active community support</li>
                <li>Regular hackathons and events</li>
              </ul>
            </div>
</div>
        </div>
      </section>

      {/* Security & Compliance */}
      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
        <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-foreground">Security by Design & Compliance</h2>
            <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
              Advanced security features and compliance capabilities.
            </p>
          </div>
          <div className="grid md:grid-cols-2 gap-8">
            <div className="space-y-6">
              <h3 className="text-2xl font-bold text-primary">Cryptographic Foundation:</h3>
              <ul className="space-y-3 text-lg text-foreground">
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> End-to-end encryption everywhere</li>
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Post-quantum cryptography ready</li>
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Zero-knowledge data storage</li>
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Immutable audit trails</li>
              </ul>
            </div>
            <div className="space-y-6">
              <h3 className="text-2xl font-bold text-primary">Compliance Features:</h3>
              <ul className="space-y-3 text-lg text-foreground">
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> GDPR compliance through data sovereignty</li>
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Regulatory jurisdiction control</li>
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Audit-ready transaction logs</li>
                <li className="flex items-center gap-2"><CheckCircle className="h-5 w-5 text-green-500" /> Data residency guarantees</li>
              </ul>
            </div>
          </div>
          <div className="mt-12 text-center">
            <h3 className="text-2xl font-bold text-primary mb-6">Threat Resistance:</h3>
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
              <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
                <CardHeader><CardTitle className="text-primary">Immune to ransomware</CardTitle></CardHeader>
                <CardContent>Stateless OS prevents persistent threats.</CardContent>
              </Card>
              <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
                <CardHeader><CardTitle className="text-green-600">DDoS resistant</CardTitle></CardHeader>
                <CardContent>Distributed architecture mitigates attacks.</CardContent>
              </Card>
              <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
                <CardHeader><CardTitle className="text-primary">Quantum computing resistant</CardTitle></CardHeader>
                <CardContent>Future-proof security protocols.</CardContent>
              </Card>
              <Card className="text-center hover:shadow-lg transition-shadow bg-card text-card-foreground">
                <CardHeader><CardTitle className="text-orange-600">Censorship resistant</CardTitle></CardHeader>
                <CardContent>Mycelium network routes around blocking.</CardContent>
              </Card>
            </div>
          </div>
        </div>
      </section>

      {/* Technical Resources */}
      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-background">
        <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-foreground">Dive Deeper into ThreeFold Technology</h2>
            <p className="text-xl text-muted-foreground max-w-4xl mx-auto">
              Access comprehensive technical documentation and resources.
            </p>
          </div>
          <div className="grid md:grid-cols-2 gap-8">
            <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
              <CardHeader>
                <CardTitle className="text-primary">Technical Documentation</CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-foreground">
                  <li>Architecture whitepapers</li>
                  <li>API documentation</li>
                  <li>Deployment guides</li>
                  <li>Best practices</li>
                </ul>
              </CardContent>
            </Card>
            <Card className="text-center hover:shadow-lg transition-shadow border-border bg-card text-card-foreground">
              <CardHeader>
                <CardTitle className="text-primary">Try It Yourself</CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-foreground">
                  <li>Live dashboard: <a href="https://dashboard.grid.tf" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">https://dashboard.grid.tf</a></li>
                  <li>GitHub repositories</li>
                  <li>Developer sandbox</li>
                  <li>Community forums</li>
                </ul>
              </CardContent>
            </Card>
          </div>
          <div className="mt-12 text-center">
            <h3 className="text-2xl font-bold text-primary mb-6">Get Support:</h3>
            <ul className="space-y-2 text-lg text-foreground">
              <li>Technical community</li>
              <li>Professional services</li>
              <li>Training programs</li>
              <li>Certification paths</li>
            </ul>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-8 px-4 sm:px-6 lg:px-8 bg-card text-card-foreground">
        <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-primary" />
            <span className="text-xl font-bold text-foreground">ThreeFold Galaxy</span>
          </div>
          <p className="text-sm text-muted-foreground mt-4">© 2025 ThreeFold Galaxy. A new era of decentralized infrastructure.</p>
        </div>
      </footer>
    </div>
  )
}

export default TechnologyPage