"use client";

import { Button } from "@/components/ui/button";
import { motion } from "framer-motion";
import { ArrowRight, ChevronDown } from "lucide-react";
import { useState } from "react";
import { FeatureShowcase } from "./_sections/feature-showcase";
import { HeroSection } from "./_sections/hero-section";
import { HowItWorks } from "./_sections/how-it-works";
import { IntegrationsSection } from "./_sections/integrations-section";
import { StatsSection } from "./_sections/stats-section";
import { TaskExamples } from "./_sections/task-examples";
import { Testimonials } from "./_sections/testimonials";

export default function Home() {
  const [expandedFaq, setExpandedFaq] = useState<number | null>(null);

  const faqItems = [
    {
      q: "How much can I earn?",
      a: "Earnings vary by task complexity. Most workers earn $200-500/month.",
    },
    {
      q: "How long does verification take?",
      a: "AI verification is instant. Most tasks are approved within seconds.",
    },
    {
      q: "When do I get paid?",
      a: "Payments are instant to your Celo wallet. No waiting periods.",
    },
    {
      q: "Is there a minimum withdrawal?",
      a: "No minimum. Withdraw any amount anytime to your wallet.",
    },
  ];

  return (
    <main className="min-h-screen bg-white">
      <HeroSection />
      <StatsSection />
      <FeatureShowcase />
      <TaskExamples />
      <HowItWorks />
      <Testimonials />
      <IntegrationsSection />

      {/* Security & Trust Section */}
      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50 border-y-2 border-gray-200">
        <div className="max-w-6xl mx-auto">
          <motion.div
            className="text-center mb-12"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            viewport={{ once: true }}
          >
            <h2 className="text-3xl sm:text-4xl font-bold mb-4 text-gray-900">
              Secure &{" "}
              <span className="text-primary">
                Transparent
              </span>
            </h2>
            <p className="text-base text-gray-600">
              Your earnings and data are protected with blockchain technology
            </p>
          </motion.div>

          <div className="grid md:grid-cols-3 gap-6">
            {[
              {
                title: "Smart Contract Verified",
                desc: "All payments verified on-chain",
              },
              {
                title: "Zero Hidden Fees",
                desc: "100% transparent pricing model",
              },
              {
                title: "Instant Withdrawals",
                desc: "Access your earnings anytime",
              },
            ].map((item, i) => (
              <motion.div
                key={i}
                className="bg-white border-2 border-gray-200 p-6 h-full hover:border-primary transition-colors"
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: i * 0.1 }}
                viewport={{ once: true }}
              >
                <h3 className="text-lg font-bold mb-2 text-gray-900">{item.title}</h3>
                <p className="text-gray-600 text-sm">{item.desc}</p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ Section */}
      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
        <div className="max-w-4xl mx-auto">
          <motion.div
            className="text-center mb-12"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            viewport={{ once: true }}
          >
            <h2 className="text-3xl sm:text-4xl font-bold mb-4 text-gray-900">
              Frequently Asked{" "}
              <span className="text-primary">
                Questions
              </span>
            </h2>
          </motion.div>

          <div className="space-y-3">
            {faqItems.map((item, i) => (
              <motion.div
                key={i}
                className="bg-white border-2 border-gray-200 overflow-hidden hover:border-primary transition-colors"
                initial={{ opacity: 0, x: -20 }}
                whileInView={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.5, delay: i * 0.1 }}
                viewport={{ once: true }}
              >
                <button
                  onClick={() => setExpandedFaq(expandedFaq === i ? null : i)}
                  className="w-full p-5 flex items-center justify-between hover:bg-gray-50 transition-colors"
                >
                  <h3 className="font-bold text-base text-left text-gray-900">{item.q}</h3>
                  <motion.div
                    animate={{ rotate: expandedFaq === i ? 180 : 0 }}
                    transition={{ duration: 0.3 }}
                    className="flex-shrink-0 ml-4"
                  >
                    <ChevronDown className="w-5 h-5 text-primary" />
                  </motion.div>
                </button>

                <motion.div
                  initial={{ height: 0, opacity: 0 }}
                  animate={{
                    height: expandedFaq === i ? "auto" : 0,
                    opacity: expandedFaq === i ? 1 : 0,
                  }}
                  transition={{ duration: 0.3 }}
                  className="overflow-hidden"
                >
                  <div className="px-5 pb-5 text-gray-600 text-sm border-t-2 border-gray-100 pt-4">
                    {item.a}
                  </div>
                </motion.div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Final CTA Section */}
      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50 border-t-2 border-gray-200">
        <div className="max-w-4xl mx-auto text-center">
          <motion.h2
            className="text-3xl sm:text-4xl font-bold mb-6 text-gray-900"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            viewport={{ once: true }}
          >
            Ready to start{" "}
            <span className="text-primary">
              earning
            </span>
            ?
          </motion.h2>

          <motion.p
            className="text-base text-gray-600 mb-8"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.1 }}
            viewport={{ once: true }}
          >
            Join thousands of workers completing AI-verified tasks on Celo
            Sepolia
          </motion.p>

          <motion.div
            className="flex flex-col sm:flex-row gap-4 justify-center"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.2 }}
            viewport={{ once: true }}
          >
            <Button
                size="lg"
                className="font-semibold"
              >
                Get Started <ArrowRight className="w-4 h-4 ml-2" />
              </Button>

            <Button
                size="lg"
                variant="outline"
              >
                Try Demo
              </Button>
          </motion.div>
        </div>
      </section>
    </main>
  );
}