'use client'

import React from 'react'
import { motion, useInView } from 'framer-motion'
import Particles from '@/components/particles'
import { categories, statsData, type ServiceCard, type ServiceCategory } from '@/components/service-data'

/* ─── Animated Counter Hook ─── */
function useCounter(target: number, duration = 2000, startOnView = true) {
  const [count, setCount] = React.useState(0)
  const [started, setStarted] = React.useState(!startOnView)
  const ref = React.useRef<HTMLDivElement>(null)
  const isInView = useInView(ref, { once: true })

  React.useEffect(() => {
    if (isInView && !started) setStarted(true)
  }, [isInView, started])

  React.useEffect(() => {
    if (!started) return
    let start = 0
    const increment = target / (duration / 16)
    const timer = setInterval(() => {
      start += increment
      if (start >= target) {
        setCount(target)
        clearInterval(timer)
      } else {
        setCount(Math.floor(start))
      }
    }, 16)
    return () => clearInterval(timer)
  }, [started, target, duration])

  return { count, ref }
}

/* ─── Fade-in on Scroll Wrapper ─── */
function FadeIn({ children, delay = 0, className = '' }: { children: React.ReactNode; delay?: number; className?: string }) {
  const ref = React.useRef(null)
  const isInView = useInView(ref, { once: true, margin: '-50px' })

  return (
    <motion.div
      ref={ref}
      initial={{ opacity: 0, y: 30 }}
      animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
      transition={{ duration: 0.6, delay, ease: 'easeOut' }}
      className={className}
    >
      {children}
    </motion.div>
  )
}

/* ─── Service Card Component ─── */
function ServiceCardComponent({ service, index }: { service: ServiceCard; index: number }) {
  const [hovered, setHovered] = React.useState(false)

  return (
    <motion.a
      href={service.url}
      target="_blank"
      rel="noopener noreferrer"
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.4, delay: index * 0.05 }}
      className="service-card rounded-xl p-5 block cursor-pointer group relative overflow-hidden"
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
    >
      {/* Glow effect on hover */}
      <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 bg-gradient-to-br from-hub-teal/5 via-transparent to-hub-teal-bright/5" />

      <div className="relative z-10">
        <div className="flex items-start justify-between mb-3">
          <div className="flex items-center gap-3">
            <span className="text-2xl">{service.icon}</span>
            <div>
              <h3 className="font-semibold text-hub-text text-sm leading-tight">{service.name}</h3>
              <span className="text-xs font-mono text-hub-teal/70">{service.subdomain}</span>
            </div>
          </div>
          <span className="status-badge whitespace-nowrap">✅ Operational</span>
        </div>

        <p className="text-xs text-muted-foreground leading-relaxed mb-3 line-clamp-3">
          {service.description}
        </p>

        {/* Tags */}
        {service.tags && service.tags.length > 0 && (
          <div className="flex flex-wrap gap-1.5">
            {service.tags.map((tag) => (
              <span
                key={tag}
                className="text-[10px] px-2 py-0.5 rounded-full bg-hub-teal/[0.08] text-hub-teal/70 border border-hub-teal/10"
              >
                {tag}
              </span>
            ))}
          </div>
        )}

        {/* Arrow indicator */}
        <motion.div
          className="absolute top-5 right-5 opacity-0 group-hover:opacity-100"
          animate={hovered ? { x: 0, opacity: 1 } : { x: -5, opacity: 0 }}
          transition={{ duration: 0.2 }}
        >
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="text-hub-teal">
            <path d="M7 17L17 7M17 7H7M17 7V17" />
          </svg>
        </motion.div>
      </div>
    </motion.a>
  )
}

/* ─── Category Section ─── */
function CategorySection({ category, categoryIndex }: { category: ServiceCategory; categoryIndex: number }) {
  return (
    <FadeIn delay={categoryIndex * 0.1}>
      <div className="mb-10">
        <div className="category-header mb-5">
          <h2 className="text-xl font-bold text-hub-text flex items-center gap-2">
            <span className="text-2xl">{category.icon}</span>
            {category.title}
            <span className="text-sm font-normal text-muted-foreground ml-2">({category.services.length})</span>
          </h2>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
          {category.services.map((service, idx) => (
            <ServiceCardComponent key={service.subdomain} service={service} index={idx} />
          ))}
        </div>
      </div>
    </FadeIn>
  )
}

/* ─── Architecture Diagram ─── */
function ArchitectureDiagram() {
  return (
    <FadeIn>
      <section className="py-16">
        <div className="text-center mb-12">
          <h2 className="text-3xl font-bold text-hub-text mb-3">System Architecture</h2>
          <p className="text-muted-foreground max-w-2xl mx-auto">
            How everything connects — from the Cloudflare Tunnel down to shared memory and back
          </p>
        </div>

        <div className="max-w-5xl mx-auto relative">
          {/* Main flow */}
          <div className="flex flex-col items-center gap-6">
            {/* Cloudflare Tunnel */}
            <div className="arch-node w-full max-w-lg">
              <div className="flex items-center justify-center gap-2 mb-1">
                <span className="text-xl">☁️</span>
                <span className="font-bold text-hub-teal text-sm">Cloudflare Tunnel</span>
              </div>
              <span className="text-[11px] text-muted-foreground">Zero open ports · WSS/WSS encrypted · All traffic through outbound tunnel</span>
            </div>

            {/* Arrow */}
            <svg width="2" height="24" className="text-hub-teal/40">
              <line x1="1" y1="0" x2="1" y2="24" stroke="currentColor" strokeWidth="2" strokeDasharray="4 4">
                <animate attributeName="stroke-dashoffset" from="8" to="0" dur="1s" repeatCount="indefinite" />
              </line>
            </svg>

            {/* Three branches */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 w-full">
              <motion.div
                className="arch-node"
                whileHover={{ scale: 1.03 }}
                transition={{ type: 'spring', stiffness: 400 }}
              >
                <span className="text-lg">🌐</span>
                <div className="font-semibold text-hub-text text-sm mt-1">Web UI</div>
                <span className="text-[11px] text-muted-foreground">Browser access</span>
              </motion.div>

              <motion.div
                className="arch-node border-hub-amber/30"
                whileHover={{ scale: 1.03 }}
                transition={{ type: 'spring', stiffness: 400 }}
              >
                <span className="text-lg">🤖</span>
                <div className="font-semibold text-hub-amber text-sm mt-1">AI Agents</div>
                <span className="text-[11px] text-muted-foreground">Vicki · Wally · Phone</span>
              </motion.div>

              <motion.div
                className="arch-node"
                whileHover={{ scale: 1.03 }}
                transition={{ type: 'spring', stiffness: 400 }}
              >
                <span className="text-lg">📱</span>
                <div className="font-semibold text-hub-text text-sm mt-1">Mobile Apps</div>
                <span className="text-[11px] text-muted-foreground">Android — QR pairing</span>
              </motion.div>
            </div>

            {/* Arrow */}
            <svg width="2" height="24" className="text-hub-teal/40">
              <line x1="1" y1="0" x2="1" y2="24" stroke="currentColor" strokeWidth="2" strokeDasharray="4 4">
                <animate attributeName="stroke-dashoffset" from="8" to="0" dur="1s" repeatCount="indefinite" />
              </line>
            </svg>

            {/* AI Layer */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 w-full">
              <motion.div
                className="arch-node border-hub-teal/30"
                whileHover={{ scale: 1.03 }}
                transition={{ type: 'spring', stiffness: 400 }}
              >
                <span className="text-lg">🧩</span>
                <div className="font-semibold text-hub-teal text-sm mt-1">MetaMCP</div>
                <span className="text-[11px] text-muted-foreground">10+ MCP tools</span>
              </motion.div>

              <motion.div
                className="arch-node"
                whileHover={{ scale: 1.03 }}
                transition={{ type: 'spring', stiffness: 400 }}
              >
                <span className="text-lg">🤖</span>
                <div className="font-semibold text-hub-text text-sm mt-1">A2A Agent</div>
                <span className="text-[11px] text-muted-foreground">Agent-to-Agent protocol</span>
              </motion.div>

              <motion.div
                className="arch-node border-hub-amber/20"
                whileHover={{ scale: 1.03 }}
                transition={{ type: 'spring', stiffness: 400 }}
              >
                <span className="text-lg">🦞</span>
                <div className="font-semibold text-hub-amber text-sm mt-1">OpenClaw</div>
                <span className="text-[11px] text-muted-foreground">Gateway + Telegram</span>
              </motion.div>
            </div>

            {/* Arrow */}
            <svg width="2" height="24" className="text-hub-teal/40">
              <line x1="1" y1="0" x2="1" y2="24" stroke="currentColor" strokeWidth="2" strokeDasharray="4 4">
                <animate attributeName="stroke-dashoffset" from="8" to="0" dur="1s" repeatCount="indefinite" />
              </line>
            </svg>

            {/* Shared Memory */}
            <div className="arch-node w-full max-w-lg border-hub-green/30 bg-gradient-to-br from-hub-green/10 to-hub-teal/5">
              <div className="flex items-center justify-center gap-2 mb-1">
                <span className="text-xl">🧠</span>
                <span className="font-bold text-hub-green text-sm">Shared Memory</span>
              </div>
              <div className="flex flex-wrap justify-center gap-3 mt-2">
                <span className="text-[11px] px-2 py-0.5 rounded bg-hub-green/10 text-hub-green/80 border border-hub-green/20">LanceDB</span>
                <span className="text-[11px] px-2 py-0.5 rounded bg-hub-green/10 text-hub-green/80 border border-hub-green/20">Engram</span>
                <span className="text-[11px] px-2 py-0.5 rounded bg-hub-green/10 text-hub-green/80 border border-hub-green/20">Search Cache</span>
                <span className="text-[11px] px-2 py-0.5 rounded bg-hub-green/10 text-hub-green/80 border border-hub-green/20">Mistral Embed</span>
              </div>
            </div>

            {/* Data flow examples */}
            <div className="mt-6 w-full max-w-3xl">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-[11px] font-mono">
                <div className="p-3 rounded-lg bg-hub-navy/60 border border-hub-border text-muted-foreground">
                  <span className="text-hub-teal">Obsidian</span> → LiveSync → <span className="text-hub-teal">CouchDB</span> → <span className="text-hub-amber">AnythingLLM</span> → <span className="text-hub-green">LanceDB</span> → AI Agents
                </div>
                <div className="p-3 rounded-lg bg-hub-navy/60 border border-hub-border text-muted-foreground">
                  <span className="text-hub-amber">Huly</span> (10 svcs) ↔ <span className="text-hub-teal">PostgreSQL</span> ↔ MinIO ↔ ElasticSearch
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </FadeIn>
  )
}

/* ─── Tech Stack Section ─── */
function TechStackSection() {
  const techGroups = [
    {
      title: 'Infrastructure',
      items: ['Docker', 'Docker Compose', 'Cloudflare Tunnel', 'Cloudflare Zero Trust', 'Nginx', 'systemd', 'fail2ban'],
    },
    {
      title: 'Storage',
      items: ['Cloudflare R2', 'CouchDB', 'PostgreSQL', 'MariaDB', 'SQLite', 'Valkey', 'Redis', 'LanceDB', 'CockroachDB', 'MinIO', 'ElasticSearch'],
    },
    {
      title: 'AI & Tools',
      items: ['OpenClaw', 'MetaMCP', 'A2A Protocol', 'AnythingLLM', 'Mistral Embeddings', 'DeepSeek', 'Newscope', 'SearXNG', 'Datasette'],
    },
    {
      title: 'Applications',
      items: ['Immich', 'Nextcloud', 'Vaultwarden', 'Gitea', 'WordPress', 'BookStack', 'Vikunja', 'Huly', 'Filestash', 'Netdata'],
    },
    {
      title: 'Languages',
      items: ['Go (SSE-C Proxy)', 'Python (MCP Server, A2A)', 'Node.js (MetaMCP, OpenClaw)', 'Rust (Vaultwarden)'],
    },
    {
      title: 'Security',
      items: ['Cloudflare Access', 'Cloudflare Tunnel', 'SSH over Tunnel', 'fail2ban', 'Docker Isolation', '.env 600', 'UFW', 'ED25519', 'Zero Trust'],
    },
  ]

  return (
    <FadeIn>
      <section className="py-16">
        <div className="text-center mb-12">
          <h2 className="text-3xl font-bold text-hub-text mb-3">Tech Stack</h2>
          <p className="text-muted-foreground">Every technology powering the infrastructure</p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {techGroups.map((group, gi) => (
            <motion.div
              key={group.title}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.4, delay: gi * 0.08 }}
              className="p-5 rounded-xl bg-hub-card/60 border border-hub-border"
            >
              <h3 className="font-semibold text-hub-teal text-sm mb-3 flex items-center gap-2">
                <span className="w-1.5 h-1.5 rounded-full bg-hub-teal" />
                {group.title}
              </h3>
              <div className="flex flex-wrap gap-2">
                {group.items.map((item) => (
                  <span key={item} className="tech-badge">
                    {item}
                  </span>
                ))}
              </div>
            </motion.div>
          ))}
        </div>
      </section>
    </FadeIn>
  )
}

/* ─── Security Section ─── */
function SecuritySection() {
  const items = [
    { icon: '🛡️', title: 'Cloudflare Tunnel', desc: 'All traffic through encrypted outbound tunnel' },
    { icon: '🔐', title: 'Zero Trust Access', desc: 'Every subdomain requires authentication' },
    { icon: '🚫', title: 'No Open Ports', desc: 'Firewall blocks everything except outbound tunnel' },
    { icon: '🔑', title: 'Service Tokens', desc: 'Programmatic access via Cloudflare Access tokens' },
    { icon: '🔒', title: 'SSE-C Encryption', desc: 'Photos encrypted with customer-provided AES-256 key' },
    { icon: '📦', title: 'Docker Isolation', desc: 'Each service in its own container with restricted capabilities' },
    { icon: '🔐', title: 'Disk Encryption', desc: 'Server SSD encrypted at rest (LUKS)' },
    { icon: '🔑', title: 'SSH Key Only', desc: 'No password authentication, ED25519 keys only' },
    { icon: '🛡️', title: 'fail2ban', desc: 'SSH brute-force protection, 24h bans after 5 attempts' },
  ]

  return (
    <FadeIn>
      <section className="py-16">
        <div className="text-center mb-12">
          <h2 className="text-3xl font-bold text-hub-text mb-3">Zero Trust Security</h2>
          <p className="text-muted-foreground max-w-2xl mx-auto">
            Every layer is protected. No open ports, no password auth, no trust without verification.
          </p>
        </div>

        {/* Visual shield */}
        <div className="flex justify-center mb-10">
          <div className="relative">
            <svg width="120" height="120" viewBox="0 0 120 120" className="text-hub-teal">
              <defs>
                <linearGradient id="shieldGrad" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" stopColor="#00d4aa" stopOpacity="0.3" />
                  <stop offset="100%" stopColor="#00b4d8" stopOpacity="0.1" />
                </linearGradient>
              </defs>
              <path
                d="M60 10 L100 30 L100 60 C100 85 80 105 60 115 C40 105 20 85 20 60 L20 30 Z"
                fill="url(#shieldGrad)"
                stroke="#00d4aa"
                strokeWidth="1.5"
                opacity="0.8"
              />
              <text x="60" y="65" textAnchor="middle" fill="#00d4aa" fontSize="28">🔒</text>
            </svg>
            <div className="absolute inset-0 animate-ping opacity-20 rounded-full" />
          </div>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 max-w-5xl mx-auto">
          {items.map((item, i) => (
            <motion.div
              key={item.title}
              initial={{ opacity: 0, scale: 0.95 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ duration: 0.3, delay: i * 0.05 }}
              className="security-card"
            >
              <span className="text-2xl mb-2 block">{item.icon}</span>
              <h3 className="font-semibold text-hub-text text-sm mb-1">{item.title}</h3>
              <p className="text-[11px] text-muted-foreground leading-relaxed">{item.desc}</p>
            </motion.div>
          ))}
        </div>
      </section>
    </FadeIn>
  )
}

/* ─── Agent Mesh Section ─── */
function AgentMeshSection() {
  const agents = [
    { emoji: '🐺', name: 'Vicki', desc: 'Cloud Server', color: 'hub-teal' },
    { emoji: '🖥️', name: 'Wally', desc: 'Windows', color: 'hub-teal-bright' },
    { emoji: '📱', name: 'Phone Agent', desc: 'Android', color: 'hub-amber' },
    { emoji: '💻', name: 'Holly Molly', desc: 'Windows Laptop', color: 'hub-green' },
  ]

  return (
    <FadeIn>
      <section className="py-16">
        <div className="text-center mb-12">
          <h2 className="text-3xl font-bold text-hub-text mb-3">Agent Mesh</h2>
          <p className="text-muted-foreground max-w-2xl mx-auto">
            A multi-agent AI architecture with shared memory and tool access
          </p>
        </div>

        {/* Agent visualization */}
        <div className="max-w-4xl mx-auto">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
            {agents.map((agent, i) => (
              <motion.div
                key={agent.name}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.4, delay: i * 0.1 }}
                whileHover={{ scale: 1.05 }}
                className="arch-node py-5"
              >
                <span className="text-3xl block mb-2">{agent.emoji}</span>
                <div className={`font-bold text-${agent.color} text-sm`}>{agent.name}</div>
                <span className="text-[11px] text-muted-foreground">{agent.desc}</span>
              </motion.div>
            ))}
          </div>

          {/* Connection lines - decorative */}
          <div className="flex justify-center mb-8">
            <svg width="300" height="60" viewBox="0 0 300 60" className="opacity-30">
              {/* Vicki <-> Wally */}
              <line x1="40" y1="10" x2="260" y2="10" stroke="#00d4aa" strokeWidth="1" strokeDasharray="6 4">
                <animate attributeName="stroke-dashoffset" from="10" to="0" dur="2s" repeatCount="indefinite" />
              </line>
              <text x="150" y="8" textAnchor="middle" fill="#00d4aa" fontSize="9">A2A Protocol</text>
              {/* Vicki <-> Phone */}
              <line x1="40" y1="10" x2="100" y2="50" stroke="#f0a500" strokeWidth="1" strokeDasharray="6 4">
                <animate attributeName="stroke-dashoffset" from="10" to="0" dur="2s" repeatCount="indefinite" />
              </line>
              {/* Wally <-> Holly */}
              <line x1="260" y1="10" x2="200" y2="50" stroke="#00cc88" strokeWidth="1" strokeDasharray="6 4">
                <animate attributeName="stroke-dashoffset" from="10" to="0" dur="2s" repeatCount="indefinite" />
              </line>
            </svg>
          </div>

          {/* Shared capabilities */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="p-4 rounded-xl bg-hub-card/60 border border-hub-border text-center">
              <span className="text-xl mb-2 block">🧠</span>
              <div className="font-semibold text-hub-teal text-sm">Shared LanceDB Memory</div>
              <p className="text-[11px] text-muted-foreground mt-1">All agents read and write to the same vector store</p>
            </div>
            <div className="p-4 rounded-xl bg-hub-card/60 border border-hub-border text-center">
              <span className="text-xl mb-2 block">🧩</span>
              <div className="font-semibold text-hub-teal text-sm">MetaMCP Hub</div>
              <p className="text-[11px] text-muted-foreground mt-1">Unified tool access for all agents</p>
            </div>
            <div className="p-4 rounded-xl bg-hub-card/60 border border-hub-border text-center">
              <span className="text-xl mb-2 block">🦞</span>
              <div className="font-semibold text-hub-amber text-sm">OpenClaw Gateway</div>
              <p className="text-[11px] text-muted-foreground mt-1">Telegram + Web Chat + Android via Cloudflare Tunnel</p>
            </div>
          </div>

          {/* Tagline */}
          <div className="text-center mt-8">
            <p className="text-lg font-semibold text-hub-text italic">
              &ldquo;One memory. Many minds.&rdquo;
            </p>
          </div>
        </div>
      </section>
    </FadeIn>
  )
}

/* ─── Hero Section ─── */
function HeroSection() {
  const [mounted, setMounted] = React.useState(false)

  React.useEffect(() => {
    setMounted(true)
  }, [])

  return (
    <section className="relative min-h-screen flex items-center justify-center overflow-hidden">
      {/* Animated gradient background */}
      <div
        className="absolute inset-0"
        style={{
          background: 'linear-gradient(135deg, #0a0e27 0%, #1a1f4e 40%, #0a0e27 70%, #0d1333 100%)',
          backgroundSize: '400% 400%',
          animation: 'gradient-shift 15s ease infinite',
        }}
      />

      {/* Particles */}
      {mounted && <Particles />}

      {/* Content */}
      <div className="relative z-10 text-center px-6 max-w-4xl mx-auto">
        <motion.div
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.2 }}
        >
          {/* Logo / Title */}
          <h1 className="text-5xl sm:text-6xl md:text-7xl font-bold text-hub-text mb-6 tracking-tight">
            FILIPE&apos;S{' '}
            <span className="bg-gradient-to-r from-hub-teal to-hub-teal-bright bg-clip-text text-transparent">
              HUB
            </span>
          </h1>
        </motion.div>

        <motion.p
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.4 }}
          className="text-lg sm:text-xl text-hub-text/80 mb-4 font-medium"
        >
          Your Private Cloud — Self-Hosted, Secure, Always On
        </motion.p>

        <motion.p
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.6 }}
          className="text-sm sm:text-base text-muted-foreground mb-8 max-w-2xl mx-auto leading-relaxed"
        >
          A multi-agent AI mesh connecting 23+ services behind Cloudflare Tunnel.
          Zero open ports, Zero Trust security, shared memory across all agents.
        </motion.p>

        {/* Status indicator */}
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.8, delay: 0.8 }}
          className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-hub-green/10 border border-hub-green/20 mb-4"
        >
          <span className="relative flex h-2.5 w-2.5">
            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-hub-green opacity-75" />
            <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-hub-green" />
          </span>
          <span className="text-hub-green text-sm font-medium">All Systems Operational</span>
        </motion.div>

        {/* Sub-status */}
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.8, delay: 1.0 }}
          className="text-xs text-muted-foreground font-mono"
        >
          23 subdomains · 50 Docker containers · 3 AI agents online
        </motion.div>

        {/* Scroll indicator */}
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.8, delay: 1.5 }}
          className="absolute bottom-8 left-1/2 -translate-x-1/2"
        >
          <motion.div
            animate={{ y: [0, 8, 0] }}
            transition={{ duration: 1.5, repeat: Infinity, ease: 'easeInOut' }}
            className="text-muted-foreground/50"
          >
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M12 5v14M5 12l7 7 7-7" />
            </svg>
          </motion.div>
        </motion.div>
      </div>

      {/* Bottom fade */}
      <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-background to-transparent" />
    </section>
  )
}

/* ─── Stat Item Component ─── */
function StatItem({ stat, index }: { stat: typeof statsData[number]; index: number }) {
  const { count, ref } = useCounter(stat.value, 2000)
  return (
    <motion.div
      ref={ref}
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.4, delay: index * 0.08 }}
      className="text-center"
    >
      <span className="text-lg mb-1 block">{stat.icon}</span>
      <div className="text-2xl sm:text-3xl font-bold text-hub-text counter-value">
        {count.toLocaleString()}
        {stat.suffix}
      </div>
      <div className="text-[11px] text-muted-foreground uppercase tracking-wider mt-1">
        {stat.label}
      </div>
    </motion.div>
  )
}

/* ─── Stats Bar ─── */
function StatsBar() {
  return (
    <section className="py-12 border-y border-hub-border/50">
      <div className="max-w-6xl mx-auto px-6">
        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-6">
          {statsData.map((stat, i) => (
            <StatItem key={stat.label} stat={stat} index={i} />
          ))}
        </div>
      </div>
    </section>
  )
}

/* ─── Footer ─── */
function Footer() {
  return (
    <footer className="mt-auto border-t border-hub-border/50 py-8">
      <div className="max-w-6xl mx-auto px-6 text-center">
        <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-4">
          <span className="text-sm text-muted-foreground">
            © {new Date().getFullYear()} Filipe&apos;s Hub
          </span>
          <span className="text-hub-border hidden sm:inline">|</span>
          <span className="text-sm text-muted-foreground">
            Powered by <span className="text-hub-amber">OpenClaw</span>
          </span>
          <span className="text-hub-border hidden sm:inline">|</span>
          <span className="text-sm text-muted-foreground">
            Protected by <span className="text-hub-teal">Cloudflare</span>
          </span>
        </div>
        <p className="text-[11px] text-muted-foreground/60 mb-2">
          Last updated: May 17, 2026
        </p>
        <p className="text-xs text-muted-foreground/40 italic">
          Built in 48 hours. Growing every day.
        </p>
      </div>
    </footer>
  )
}

/* ─── Main Page ─── */
export default function Home() {
  return (
    <div className="min-h-screen flex flex-col bg-background">
      <HeroSection />
      <StatsBar />

      {/* Services Grid */}
      <section className="py-16 px-6">
        <div className="max-w-7xl mx-auto">
          <FadeIn>
            <div className="text-center mb-12">
              <h2 className="text-3xl font-bold text-hub-text mb-3">Services Dashboard</h2>
              <p className="text-muted-foreground">Click any card to access the service</p>
            </div>
          </FadeIn>

          {categories.map((category, i) => (
            <CategorySection key={category.id} category={category} categoryIndex={i} />
          ))}
        </div>
      </section>

      <div className="max-w-7xl mx-auto px-6 w-full">
        <ArchitectureDiagram />
        <TechStackSection />
        <SecuritySection />
        <AgentMeshSection />
      </div>

      <Footer />
    </div>
  )
}
