import {
  SiFastapi,
  SiGo,
  SiJavascript,
  SiNestjs,
  SiNextdotjs,
  SiNodedotjs,
  SiReact,
  SiTypescript,
} from "react-icons/si";
import { TbApi } from "react-icons/tb";

export default function WebDev() {
  const techStack = [
    {
      name: "React",
      icon: <SiReact />,
      desc: "We use React to build fast, interactive, and smooth user interfaces that improve the overall user experience.",
      color: "text-[#61DAFB]",
    },
    {
      name: "Next.js",
      icon: <SiNextdotjs />,
      desc: "We use Next.js for better performance, SEO, and scalable frontend applications that load quickly.",
      color: "text-foreground",
    },
    {
      name: "TypeScript",
      icon: <SiTypescript />,
      desc: "We use TypeScript to write safer, maintainable code and reduce bugs in large-scale applications.",
      color: "text-[#3178C6]",
    },
    {
      name: "JavaScript",
      icon: <SiJavascript />,
      desc: "JavaScript powers the core functionality of our web applications, making them dynamic and responsive.",
      color: "text-[#F7DF1E]",
    },
    {
      name: "Node.js",
      icon: <SiNodedotjs />,
      desc: "We use Node.js to build fast, scalable backend systems capable of handling real-time applications and APIs.",
      color: "text-[#339933]",
    },
    {
      name: "GoLang",
      icon: <SiGo />,
      desc: "We use Go for high-performance backend services that require speed, scalability, and efficient concurrency.",
      color: "text-[#00ADD8]",
    },
    {
      name: "Fast API",
      icon: <SiFastapi />,
      desc: "We use FastAPI to develop secure and high-performance APIs with clean architecture and rapid development.",
      color: "text-[#05998B]",
    },

    {
      name: "Nest JS",
      icon: <SiNestjs />,
      desc: "We use NestJS to build structured, scalable, and enterprise-ready backend applications with clean architecture.",
      color: "text-[#E0234E]",
    },
    {
      name: "Rest API",
      icon: <TbApi />,
      desc: "REST APIs help our applications communicate smoothly between frontend, backend, and third-party services.",
      color: "text-primary",
    },
  ];
  const services = [
    "Custom Web Application Development",
    "E-commerce Solution Architectures",
    "Real-time Dashboard Systems",
    "API Design & Integration",
    "Progressive Web Apps (PWA)",
    "Legacy Code Migration",
  ];
  return (
    <>
      <section className="container mx-auto flex flex-col lg:flex-row gap-16 items-center">
        <div className="w-full lg:w-1/3 space-y-8 sticky top-24 self-start">
          <div className="space-y-4">
            <h2 className="text-4xl md:text-5xl font-bold tracking-tight">
              Our Web Development{" "}
              <span className="text-primary">Services</span>
            </h2>
            <p className="text-muted-foreground leading-relaxed">
              From business websites to complex web applications, we create
              digital solutions focused on performance, usability, and growth.
            </p>
          </div>

          <ul className="space-y-4">
            {services.map((service, i) => (
              <li key={i} className="flex items-center gap-3 group">
                <span className="h-2 w-2 rounded-full bg-primary group-hover:scale-150 transition-transform duration-300 neon-glow" />
                <span className="font-medium text-lg hover:text-primary transition-colors cursor-default">
                  {service}
                </span>
              </li>
            ))}
          </ul>
        </div>
        <div className="container mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 w-full lg:w-2/3">
          {techStack.map((tech, index) => (
            <div key={index} className="group [perspective:1000px]">
              {/* Inner Wrapper for Flip */}
              <div className="relative h-full w-full transition-all duration-500 [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)]">
                {/* Front Side: Icon & Title */}
                <div className="absolute inset-0 flex flex-col items-center justify-center p-12 rounded-2xl border border-gradient ">
                  <div
                    className={`text-6xl mb-4 transition-transform duration-300 group-hover:scale-110 ${tech.color}`}
                  >
                    {tech.icon}
                  </div>
                  <h3 className=" font-bold tracking-wide">{tech.name}</h3>
                </div>

                {/* Back Side: "Why we use it" */}
                <div className="absolute inset-0 h-full w-full rounded-2xl bg-card px-8 py-10 text-center [transform:rotateY(180deg)] [backface-visibility:hidden] flex flex-col items-center justify-center border-2 border-primary/50 neon-glow">
                  <h4 className="text-primary font-bold mb-2 uppercase text-sm tracking-tighter">
                    Why we use it
                  </h4>
                  <p className="text-xs text-muted-foreground leading-relaxed">
                    {tech.desc}
                  </p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>
    </>
  );
}
