"use client"

import { Navigation } from "@/components/navigation"
import { Footer } from "@/components/footer"
import { motion } from "framer-motion"
import { ArrowUpRight } from "lucide-react"

const projects = {
  webDevelopment: [
    {
      title: "BMT Industries",
      description: "Best Roofing Company - Corporate website with modern design",
      url: "https://bmtindustries.com",
      tech: ["WordPress", "Corporate", "SEO"],
    },
    {
      title: "Barclays Security Services",
      description: "Canada Private Security Company Website",
      url: "https://barclayssecurityservices.com",
      tech: ["WordPress", "Security", "Corporate"],
    },
    {
      title: "HHCCA",
      description: "NGO in Canada - Non-profit organization website",
      url: "https://hhcca.org/",
      tech: ["WordPress", "NGO", "Responsive"],
    },
    {
      title: "AustinLaz Nigeria",
      description: "Biggest Fabrication company in Nigeria",
      url: "https://austinlaz.com.ng",
      tech: ["WordPress", "Manufacturing", "Corporate"],
    },
    {
      title: "The Word Became Flesh Secondary School",
      description: "Catholic School - Educational institution website",
      url: "https://thewordbecamefleshsecondaryschool.com",
      tech: ["WordPress", "Education", "School"],
    },
    {
      title: "Immortal Web Solutions",
      description: "Powerful Sales page with high conversion design",
      url: "https://immortalwebsolutions.site",
      tech: ["Landing Page", "Sales", "Conversion"],
    },
    {
      title: "Baxis Investments",
      description: "Investment Site with modern financial design",
      url: "https://baxisinvestments.com/",
      tech: ["Investment", "Finance", "Corporate"],
    },
  ],
  vibeCoding: [
    {
      title: "O4D Diary",
      description: "Biggest E-commerce Platform in Enugu State Nigeria",
      url: "https://042diary.com/",
      tech: ["Next.js", "E-commerce", "Vibe Coded"],
    },
    {
      title: "Our Joy FM",
      description: "Radio Livestream Platform with real-time audio",
      url: "https://my.immortalwebsolutions.site/",
      tech: ["Streaming", "Audio", "Vibe Coded"],
    },
    {
      title: "Whyte Plumbers",
      description: "High Converting Plumbing site with Active CTA",
      url: "https://test.whyteabrahamtech.com",
      tech: ["Landing Page", "CTA", "Vibe Coded"],
    },
  ],
  aiAutomation: [
    {
      title: "Bakery AI Assistant",
      description: "AI-powered customer service for bakery business",
      url: "https://ai.studio/apps/d8f90daa-a1fa-4b0d-b387-1fac3596197a",
      tech: ["AI", "Automation", "Customer Service"],
    },
    {
      title: "GYM AI Assistant",
      description: "AI automation for gym membership management",
      url: "https://ai.studio/apps/9c07fffe-b201-4975-9d71-8ba9d3262641",
      tech: ["AI", "Fitness", "Automation"],
    },
    {
      title: "GYM Website AI",
      description: "AI-powered gym website with smart features",
      url: "https://ai.studio/apps/5af2428f-44c2-4932-b519-f1750d35db28",
      tech: ["AI", "Website", "Smart"],
    },
    {
      title: "Cold Call AI",
      description: "AI automation for sales cold calling",
      url: "https://ai.studio/apps/02bdff69-319b-4fd3-bdca-14e584d8d6cd",
      tech: ["AI", "Sales", "Voice"],
    },
  ],
}

export default function WorkPage() {
  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"
          >
            MY PORTFOLIO
          </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"
          >
            Work & Projects
          </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-2xl"
          >
            A collection of projects spanning web development, vibe coding, and AI automation.
            Each project represents a unique challenge solved with modern technologies.
          </motion.p>
        </div>
      </section>

      {/* Web Development 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 }}
            whileInView={{ opacity: 1 }}
            viewport={{ once: true }}
            className="flex items-center gap-4 mb-8"
          >
            <span className="text-5xl md:text-7xl font-bold text-secondary">01</span>
            <div>
              <h2 className="text-2xl md:text-3xl font-bold text-foreground">Web Development</h2>
              <p className="text-muted-foreground">Next.js, React, Node.js, WordPress</p>
            </div>
          </motion.div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {projects.webDevelopment.map((project, index) => (
              <motion.a
                key={project.title}
                href={project.url}
                target="_blank"
                rel="noopener noreferrer"
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: index * 0.05 }}
                className="group p-6 rounded-2xl border border-border bg-card hover:border-primary/50 transition-all duration-300"
              >
                <div className="flex justify-between items-start">
                  <div>
                    <h3 className="text-lg font-semibold text-foreground group-hover:text-primary transition-colors">
                      {project.title}
                    </h3>
                    <p className="text-muted-foreground text-sm mt-1">{project.description}</p>
                    <div className="flex flex-wrap gap-2 mt-4">
                      {project.tech.map((tech) => (
                        <span
                          key={tech}
                          className="text-xs px-2 py-1 rounded-full bg-secondary text-muted-foreground"
                        >
                          {tech}
                        </span>
                      ))}
                    </div>
                  </div>
                  <ArrowUpRight className="w-5 h-5 text-muted-foreground group-hover:text-primary group-hover:translate-x-1 group-hover:-translate-y-1 transition-all flex-shrink-0" />
                </div>
              </motion.a>
            ))}
          </div>
        </div>
      </section>

      {/* Vibe Coding Section */}
      <section className="px-6 md:px-12 lg:px-24 py-12 bg-card/50">
        <div className="max-w-6xl mx-auto">
          <motion.div
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            viewport={{ once: true }}
            className="flex items-center gap-4 mb-8"
          >
            <span className="text-5xl md:text-7xl font-bold text-secondary">02</span>
            <div>
              <h2 className="text-2xl md:text-3xl font-bold text-foreground">Vibe Coding</h2>
              <p className="text-muted-foreground">Cursor, Open Code, Claude AI</p>
            </div>
          </motion.div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {projects.vibeCoding.map((project, index) => (
              <motion.a
                key={project.title}
                href={project.url}
                target="_blank"
                rel="noopener noreferrer"
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: index * 0.1 }}
                className="group p-6 rounded-2xl border border-border bg-background hover:border-primary/50 transition-all duration-300"
              >
                <div className="flex justify-between items-start">
                  <div>
                    <h3 className="text-lg font-semibold text-foreground group-hover:text-primary transition-colors">
                      {project.title}
                    </h3>
                    <p className="text-muted-foreground text-sm mt-1">{project.description}</p>
                    <div className="flex flex-wrap gap-2 mt-4">
                      {project.tech.map((tech) => (
                        <span
                          key={tech}
                          className="text-xs px-2 py-1 rounded-full bg-primary/20 text-primary"
                        >
                          {tech}
                        </span>
                      ))}
                    </div>
                  </div>
                  <ArrowUpRight className="w-5 h-5 text-muted-foreground group-hover:text-primary group-hover:translate-x-1 group-hover:-translate-y-1 transition-all flex-shrink-0" />
                </div>
              </motion.a>
            ))}
          </div>
        </div>
      </section>

      {/* AI Automation 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 }}
            whileInView={{ opacity: 1 }}
            viewport={{ once: true }}
            className="flex items-center gap-4 mb-8"
          >
            <span className="text-5xl md:text-7xl font-bold text-secondary">03</span>
            <div>
              <h2 className="text-2xl md:text-3xl font-bold text-foreground">AI Automation</h2>
              <p className="text-muted-foreground">Zapier, GoHighLevel, n8n, Claude AI, ChatGPT</p>
            </div>
          </motion.div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {projects.aiAutomation.map((project, index) => (
              <motion.a
                key={project.title}
                href={project.url}
                target="_blank"
                rel="noopener noreferrer"
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: index * 0.1 }}
                className="group p-6 rounded-2xl border border-border bg-card hover:border-primary/50 transition-all duration-300"
              >
                <div className="flex justify-between items-start">
                  <div>
                    <h3 className="text-lg font-semibold text-foreground group-hover:text-primary transition-colors">
                      {project.title}
                    </h3>
                    <p className="text-muted-foreground text-sm mt-1">{project.description}</p>
                    <div className="flex flex-wrap gap-2 mt-4">
                      {project.tech.map((tech) => (
                        <span
                          key={tech}
                          className="text-xs px-2 py-1 rounded-full bg-secondary text-muted-foreground"
                        >
                          {tech}
                        </span>
                      ))}
                    </div>
                  </div>
                  <ArrowUpRight className="w-5 h-5 text-muted-foreground group-hover:text-primary group-hover:translate-x-1 group-hover:-translate-y-1 transition-all flex-shrink-0" />
                </div>
              </motion.a>
            ))}
          </div>
        </div>
      </section>

      <Footer />
    </main>
  )
}