techzaa-frontend/src/components/ServicesSection.tsx

import { motion, useInView } from "framer-motion";
import { Brain, Cloud, Globe, Smartphone } from "lucide-react";
import { useRef } from "react";
import PremiumBadge from "./shared/PremiumBadge";

const services = [
  {
    icon: Globe,
    title: "Web Development",
    description:
      "Custom web applications built with cutting-edge technologies. From stunning landing pages to complex enterprise solutions.",
    color: "primary",
  },
  {
    icon: Smartphone,
    title: "Mobile App Development",
    description:
      "Native and cross-platform mobile apps that deliver exceptional user experiences on iOS and Android.",
    color: "primary",
  },
  {
    icon: Brain,
    title: "AI Solutions",
    description:
      "Intelligent automation and machine learning solutions that transform data into actionable insights.",
    color: "primary",
  },
  {
    icon: Cloud,
    title: "Cloud Solutions",
    description:
      "Scalable cloud infrastructure and DevOps practices that ensure your applications run smoothly at any scale.",
    color: "primary",
  },
];

export default function ServicesSection() {
  const ref = useRef<HTMLElement>(null);
  const isInView = useInView(ref, { once: true, margin: "-100px" });

  return (
    <section id="services" ref={ref} className="py-20 relative overflow-hidden">
      <div className="container mx-auto px-4 relative z-10">
        <div className="flex flex-col lg:flex-row gap-12 lg:gap-8 items-center">
          <motion.div
            initial={{ opacity: 0, x: -30 }}
            animate={isInView ? { opacity: 1, x: 0 } : {}}
            transition={{ duration: 0.6 }}
            className="w-full lg:w-1/3 lg:sticky lg:top-24 text-left"
          >
            <PremiumBadge text="Our Expertise" />
            <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4 mt-2">
              What We <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent-foreground">Do</span>
            </h2>
            <p className="text-muted-foreground text-lg leading-relaxed">
              We deliver comprehensive technology solutions that empower
              businesses to thrive in the digital age.
            </p>
          </motion.div>

          <div className="w-full lg:w-2/3 grid sm:grid-cols-2 gap-8 lg:pt-6">
            {services.map((service, index) => {
              return (
                <motion.div
                  key={service.title}
                  initial={{ opacity: 0, y: 40 }}
                  animate={isInView ? { opacity: 1, y: 0 } : {}}
                  transition={{ duration: 0.6, delay: index * 0.1 }}
                  className={`group relative  p-[1.5px] overflow-hidden transition-all duration-500 `}
                >
                  <div className="absolute top-0 left-0 w-0 h-[2px] bg-gradient-to-r from-primary to-transparent group-hover:w-full transition-all duration-500 ease-out z-10" />
                  <div className="absolute top-0 left-0 w-[2px] h-0 bg-gradient-to-b from-primary to-transparent group-hover:h-full transition-all duration-500 ease-out z-10" />

                  <div className="absolute bottom-0 right-0 w-0 h-[2px] bg-gradient-to-l from-primary to-transparent group-hover:w-full transition-all duration-500 ease-out z-10" />
                  <div className="absolute bottom-0 right-0 w-[2px] h-0 bg-gradient-to-t from-primary to-transparent group-hover:h-full transition-all duration-500 ease-out z-10" />

                  <div className="relative h-full p-8 bg-primary/5 dark:bg-card/40 backdrop-blur-sm transition-all duration-300 overflow-hidden z-0">
                    <motion.div
                      whileHover={{ scale: 1.1, rotate: 5 }}
                      className="relative w-14 h-14 rounded-xl bg-primary/10 flex items-center justify-center mb-6 group-hover:bg-primary group-hover:text-primary-foreground transition-all duration-300"
                    >
                      <service.icon className="w-7 h-7 text-primary group-hover:text-inherit transition-colors" />
                    </motion.div>

                    <h3 className="text-xl font-bold mb-3 group-hover:text-primary transition-colors">
                      {service.title}
                    </h3>
                    <p className="text-muted-foreground text-sm leading-relaxed">
                      {service.description}
                    </p>

                    <div className="absolute bottom-0 right-0 w-20 h-20 bg-gradient-to-tl from-primary blur-xl to-transparent rounded-tl-full opacity-100 transition-opacity" />
                  </div>
                </motion.div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}