import { motion } from "framer-motion";
import React from "react";
import { MdCloudQueue } from "react-icons/md";
import { SiFlutter, SiKotlin, SiSwift } from "react-icons/si";

// 1. Define the interface for your timeline items
interface TimelineItem {
  title: string;
  icon: React.ReactNode;
  desc: string;
  color: string;
}

const timelineData: TimelineItem[] = [
  {
    title: "iOS Native",
    icon: <SiSwift />,
    desc: "Premium Swift-based applications optimized for the Apple ecosystem performance.",
    color: "text-[#00B4D8]",
  },
  {
    title: "Android Native",
    icon: <SiKotlin />,
    desc: "Robust Kotlin applications built for scalability across all Android devices.",
    color: "text-[#2E8B57]",
  },
  {
    title: "Cross-Platform",
    icon: <SiFlutter />,
    desc: "High-performance Flutter apps with a single codebase for iOS and Android.",
    color: "text-[#7B2D8E]",
  },
  {
    title: "Cloud Sync",
    icon: <MdCloudQueue />,
    desc: "Real-time data synchronization and secure backend cloud integration.",
    color: "text-primary",
  },
];

export default function MobileHorizontalTimeline(): React.JSX.Element {
  return (
    <section className="py-20 px-6 bg-background overflow-hidden">
      {/* Header Section */}
      <div className="max-w-3xl mx-auto text-center mb-16 space-y-4">
        <h2 className="text-4xl md:text-5xl font-bold tracking-tight">
          Mobile App Development <span className="text-primary">Services</span>
        </h2>
        <p>
          <p className="text-muted-foreground text-lg">
            We develop mobile applications that are smooth, reliable, and built
            to deliver a better experience for your users.
          </p>
        </p>
      </div>

      <div className="relative container mx-auto">
        {/* Horizontal Spine */}
        <div className="absolute top-[44px] left-0 w-full h-[2px] bg-gradient-to-r from-transparent via-primary/50 to-transparent hidden md:block" />

        {/* Scroll Container */}
        <div className="flex flex-col md:flex-row gap-2 pb-12">
          {timelineData.map((item, index) => (
            <div
              key={item.title}
              className="flex-shrink-0 w-full md:w-1/4 snap-center relative pt-12 md:pt-0"
            >
              {/* Icon Node */}
              <div className="absolute top-0 md:top-6 left-1/2 -translate-x-1/2 z-20">
                <motion.div
                  initial={{ scale: 0, y: 20 }}
                  whileInView={{ scale: 1, y: 0 }}
                  viewport={{ once: true }}
                  className="w-10 h-10 rounded-full glass border-2 border-primary flex items-center justify-center text-primary neon-glow "
                >
                  {item.icon}
                </motion.div>
              </div>

              {/* 3D Flip Card */}
              <motion.div
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: index * 0.1 }}
                viewport={{ once: true }}
                className="mt-6 md:mt-24 px-2"
              >
                <div className="group relative ">
                  <div className="relative h-full w-full transition-all">
                    {/* Front Side */}
                    <div className="absolute inset-0 rounded-2xl shimmer bg-card p-6 flex flex-col items-center text-center justify-center">
                      <span
                        className={`text-4xl mb-4 opacity-40 ${item.color}`}
                      >
                        {item.icon}
                      </span>
                      <h3 className="text-xl font-bold mb-3 tracking-tight">
                        {item.title}
                      </h3>
                      <p className="text-muted-foreground text-xs leading-relaxed">
                        {item.desc}
                      </p>
                    </div>
                  </div>
                </div>
              </motion.div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
