"use client"

import { Button } from "@/components/ui/button"
import { useAuth } from "@/hooks/useAuth";
import { useCUSDBalance } from "@/hooks/useCUSDBalance";
import { useWalletConnection } from "@/hooks/useWalletConnection";
import { motion } from "framer-motion"
import { ArrowRight, CheckCircle } from "lucide-react"
import { useState } from "react";

export function HeroSection() {
  const { address, isConnected, isConnecting, connect, disconnect, chainId } = useWalletConnection();
    const { authenticate, isAuthenticating, clearAuth, isAuthenticated } = useAuth();
    const { data: balance } = useCUSDBalance(address);
    const [showNetworkModal, setShowNetworkModal] = useState(false);
  
    const expectedChainId = parseInt(process.env.NEXT_PUBLIC_CHAIN_ID || '11142220');
    const isWrongNetwork = isConnected && chainId !== expectedChainId;
  
    const handleConnect = async () => {
      try {
        // Step 1: Connect wallet
        await connect();
  
        // Step 2: Authenticate
        await authenticate();
      } catch (error) {
        console.error('Connection/Authentication error:', error);
      }
    };
  
  return (
    <section className="relative min-h-[600px] flex items-center justify-center overflow-hidden px-4 sm:px-6 lg:px-8 py-20 pt-24 bg-white border-b-2 border-gray-200">
      {/* Green accent border on top */}
      <div className="absolute top-0 left-0 right-0 h-1 bg-primary" />

      {/* Content */}
      <div className="relative z-10 max-w-5xl mx-auto">
        <div className="grid lg:grid-cols-2 gap-12 items-center">
          {/* Left Column - Main Content */}
          <div>
            <motion.div
              className="inline-flex items-center gap-2 mb-6 px-3 py-1.5 border-2 border-primary bg-green-50"
              initial={{ opacity: 0, y: -20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5 }}
            >
              <CheckCircle className="w-4 h-4 text-primary" />
              <span className="text-sm font-semibold text-primary">
                AI-Powered Verification
              </span>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.1 }}
            >
              <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6 leading-tight text-gray-900">
                Complete tasks.{" "}
                <span className="text-primary">
                  Get verified by AI.
                </span>{" "}
                <span className="text-gray-900">Earn instantly.</span>
              </h1>
            </motion.div>

            <motion.p
              className="text-lg text-gray-600 mb-8 leading-relaxed"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.2 }}
            >
              Join the AI-powered microtask marketplace on Celo Sepolia. Complete data labeling, surveys, and content
              moderation tasks. Get paid in cUSD instantly.
            </motion.p>

            <motion.div
              className="flex flex-col sm:flex-row gap-4 mb-8"
              initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.3 }}
        >
          <Button
              onClick={handleConnect}
              size="lg"
              className="font-semibold"
            >
              Connect Wallet <ArrowRight className="w-4 h-4 ml-2" />
            </Button>

          <Button
              size="lg"
              variant="outline"
            >
              Try Demo
            </Button>
        </motion.div>

            {/* Feature Pills */}
            <motion.div
          className="flex flex-wrap items-center gap-4 text-sm text-gray-600"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.5, delay: 0.4 }}
        >
          {[
            { label: "Powered by Gemini AI" },
            { label: "Built on Celo Sepolia" },
            { label: "Instant Payments" },
          ].map((item, i) => (
            <div
              key={i}
              className="flex items-center gap-2 px-3 py-1.5 bg-gray-100 border border-gray-200"
            >
              <div className="w-1.5 h-1.5 bg-primary " />
              {item.label}
            </div>
          ))}
        </motion.div>
          </div>

          {/* Right Column - Stats Box */}
          <motion.div
            className="bg-gray-50 border-2 border-gray-200 p-8"
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.5, delay: 0.2 }}
          >
            <h3 className="text-lg font-bold text-gray-900 mb-6 pb-3 border-b-2 border-gray-200">Platform Statistics</h3>
            <div className="space-y-6">
              <div>
                <div className="text-3xl font-bold text-primary mb-1">2,847</div>
                <div className="text-sm text-gray-600">Active Tasks</div>
              </div>
              <div className="border-t border-gray-200 pt-6">
                <div className="text-3xl font-bold text-primary mb-1">$24,392</div>
                <div className="text-sm text-gray-600">Paid This Week</div>
              </div>
              <div className="border-t border-gray-200 pt-6">
                <div className="text-3xl font-bold text-primary mb-1">15,234</div>
                <div className="text-sm text-gray-600">Verified Workers</div>
              </div>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  )
}