"use client"

import { Navigation } from "@/components/navigation"
import { Footer } from "@/components/footer"
import { motion } from "framer-motion"
import { Code2, Sparkles, Video, Headphones, Palette, TrendingUp, Radio, Settings, Users } from "lucide-react"

const services = [
  {
    icon: Code2,
    title: "Web Development",
    years: "9+ Years",
    description: "I am a web developer with over 9 years of experience. My core strengths are Front End, UX/UI Design and WordPress. I build any sales pages with irresistible offers.",
    skills: ["Next.js", "React", "Node.js", "React Query", "WordPress", "Tailwind CSS"],
    projects: "Company Websites, Crypto Websites, Courier, Investment, Web3 portals, School Management Apps, E-commerce platforms",
  },
  {
    icon: Sparkles,
    title: "Vibe Coding",
    years: "Expert",
    description: "I can vibe code with modern AI tools to rapidly build and prototype applications with cutting-edge technology.",
    skills: ["Cursor", "Open Code", "Claude AI", "ChatGPT", "GitHub Copilot"],
    projects: "E-commerce platforms, Radio livestream apps, High-converting landing pages",
  },
  {
    icon: Settings,
    title: "AI Automation / Project Engineer",
    years: "Expert",
    description: "With my vast knowledge of Artificial Intelligence, there is practically no AI project or automation I cannot handle.",
    skills: ["Zapier", "GoHighLevel", "n8n", "Slack", "Claude AI", "ChatGPT", "Flow", "Gemini", "Google AI Studio", "Heygen", "HiggsField"],
    projects: "Bakery automation, Gym management systems, Cold call AI, Customer service bots",
  },
  {
    icon: Users,
    title: "UGC AI Creator",
    years: "Expert",
    description: "I make clones of creators via UGC and triple their leads and sales with their own UGC Videos. They sleep while the automation works and posts for them.",
    skills: ["UGC Creation", "AI Cloning", "Content Automation", "Social Media"],
    projects: "Creator clones, Automated posting systems, Lead generation",
  },
  {
    icon: Video,
    title: "Video Editor",
    years: "Expert",
    description: "Professional video editing for content creators, businesses, and brands with industry-standard tools.",
    skills: ["Premiere Pro", "After Effects", "CapCut", "DaVinci Resolve", "Movavi", "Wondershare Filmora", "Camtasia", "Loom"],
    projects: "YouTube videos, Promotional content, Social media reels, Corporate videos",
  },
  {
    icon: Headphones,
    title: "Virtual Assistant / Freelancer",
    years: "Expert",
    description: "Well-versed with Fiverr and Upwork. Good customer relations and meeting deadlines. Handle entry jobs effectively with most office applications.",
    skills: ["Microsoft Word", "Excel", "PowerPoint", "Customer Relations", "Data Entry", "Project Management"],
    projects: "Administrative tasks, Customer support, Data management",
    link: "https://www.fiverr.com/voicenote/",
  },
  {
    icon: Radio,
    title: "Livestream Engineer",
    years: "Expert",
    description: "Expert in high-end broadcasting software on mobile and desktop. Handle all kinds of cameras from DSLR to Red Cams, Video Mixers, and Broadcasting equipment.",
    skills: ["OBS", "VMIX", "Wirecast", "DSLR", "HDV", "Red Cams", "Video Mixers", "Wireless Transmitters"],
    projects: "Live events, Church broadcasts, Corporate streams, Sports events",
  },
  {
    icon: Settings,
    title: "IT Consultant / Tech Support",
    years: "Expert",
    description: "All kinds of tech support and virtual assistant services with modern collaboration tools.",
    skills: ["Microsoft Teams", "Slack", "Zoom", "Google Meet", "AnyDesk", "TeamViewer"],
    projects: "Remote IT support, System troubleshooting, Tech consultation",
  },
  {
    icon: Palette,
    title: "Graphics / Branding Expert",
    years: "Expert",
    description: "Creative logos, flyers, mockups and interfaces. This is where I have most of my foundation in UI/UX design.",
    skills: ["Photoshop", "CorelDRAW", "Illustrator", "Canva", "Figma"],
    projects: "Logo design, Brand identity, Marketing materials, UI mockups",
  },
  {
    icon: TrendingUp,
    title: "Digital Marketing / Media Buyer",
    years: "Expert",
    description: "Managed over 100 pages, groups and channels. Made over 100k USD from these platforms. Setup ads on Facebook, Google, and TikTok.",
    skills: ["Facebook Ads", "Google Ads", "TikTok Ads", "SEO", "Funnel Building", "Copywriting"],
    projects: "Ad campaigns, Sales funnels, Product research, SEO optimization",
  },
]

const stats = [
  { value: "9+", label: "Years Experience" },
  { value: "100+", label: "Projects Completed" },
  { value: "100k+", label: "USD Generated" },
  { value: "100+", label: "Pages Managed" },
]

export default function AboutPage() {
  return (
    <main className="min-h-screen pt-12 pb-24">
      <Navigation />
      
      {/* Hero Section */}
      <section className="px-6 md:px-12 lg:px-24 py-24">
        <div className="max-w-6xl mx-auto">
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            className="text-primary text-sm tracking-widest mb-4"
          >
            ABOUT ME
          </motion.p>
          <motion.h1
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.1 }}
            className="text-4xl md:text-6xl font-bold text-foreground mb-6"
          >
            Abraham Musa
          </motion.h1>
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.2 }}
            className="text-muted-foreground text-lg max-w-3xl leading-relaxed"
          >
            I am a fullstack developer and multi-disciplinary creative with over 9 years of experience.
            My expertise spans web development, AI automation, video production, and digital marketing.
            I build any sales pages with irresistible offers and help businesses scale through technology.
          </motion.p>
        </div>
      </section>

      {/* Stats Section */}
      <section className="px-6 md:px-12 lg:px-24 py-12">
        <div className="max-w-6xl mx-auto">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            {stats.map((stat, index) => (
              <motion.div
                key={stat.label}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: index * 0.1 }}
                className="text-center p-6 rounded-2xl border border-border bg-card"
              >
                <span className="text-4xl md:text-5xl font-bold text-primary">{stat.value}</span>
                <p className="text-muted-foreground text-sm mt-2">{stat.label}</p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Services Section */}
      <section className="px-6 md:px-12 lg:px-24 py-12">
        <div className="max-w-6xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="mb-12"
          >
            <p className="text-primary text-sm tracking-widest mb-2">EXPERTISE</p>
            <h2 className="text-3xl md:text-4xl font-bold text-foreground">My Services</h2>
          </motion.div>

          <div className="space-y-6">
            {services.map((service, index) => (
              <motion.div
                key={service.title}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: index * 0.05 }}
                className="group p-6 md:p-8 rounded-2xl border border-border bg-card hover:border-primary/30 transition-all duration-300"
              >
                <div className="flex flex-col md:flex-row gap-6">
                  <div className="flex items-start gap-4 md:w-1/3">
                    <service.icon className="w-8 h-8 text-primary flex-shrink-0" />
                    <div>
                      <h3 className="text-xl font-bold text-foreground">{service.title}</h3>
                      <span className="text-primary text-sm">{service.years}</span>
                    </div>
                  </div>
                  <div className="md:w-2/3">
                    <p className="text-muted-foreground mb-4">{service.description}</p>
                    <div className="flex flex-wrap gap-2 mb-4">
                      {service.skills.map((skill) => (
                        <span
                          key={skill}
                          className="text-xs px-3 py-1 rounded-full bg-secondary text-muted-foreground"
                        >
                          {skill}
                        </span>
                      ))}
                    </div>
                    <p className="text-sm text-muted-foreground">
                      <span className="text-foreground font-medium">Projects: </span>
                      {service.projects}
                    </p>
                  </div>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      <Footer />
    </main>
  )
}