"use client";

import { motion } from "framer-motion";
import { Check } from "lucide-react";
import { content } from "@/lib/content";
import { fadeUp, staggerContainer, staggerItem } from "@/lib/animations";

const features = content.ar.features;

const mockupColors = [
  { bg: "bg-blue-50", accent: "bg-blue-500", secondary: "bg-blue-200" },
  { bg: "bg-emerald-50", accent: "bg-emerald-500", secondary: "bg-emerald-200" },
  { bg: "bg-purple-50", accent: "bg-purple-500", secondary: "bg-purple-200" },
];

function FeatureMockup({ colorIndex }: { colorIndex: number }) {
  const colors = mockupColors[colorIndex];
  return (
    <div
      className={`${colors.bg} rounded-2xl p-6 w-full max-w-md aspect-[4/3] flex flex-col gap-4 shadow-lg`}
    >
      {/* Header bar */}
      <div className="flex items-center gap-3">
        <div className={`${colors.accent} w-3 h-3 rounded-full`} />
        <div className={`${colors.secondary} h-3 rounded-full flex-1 max-w-[60%]`} />
      </div>
      {/* Content rows */}
      <div className="flex-1 flex flex-col gap-3 justify-center">
        <div className="flex gap-3 items-center">
          <div className={`${colors.accent} w-10 h-10 rounded-lg opacity-80`} />
          <div className="flex-1 space-y-2">
            <div className={`${colors.secondary} h-3 rounded-full w-3/4`} />
            <div className={`${colors.secondary} h-2 rounded-full w-1/2 opacity-60`} />
          </div>
        </div>
        <div className="flex gap-3 items-center">
          <div className={`${colors.accent} w-10 h-10 rounded-lg opacity-60`} />
          <div className="flex-1 space-y-2">
            <div className={`${colors.secondary} h-3 rounded-full w-2/3`} />
            <div className={`${colors.secondary} h-2 rounded-full w-2/5 opacity-60`} />
          </div>
        </div>
        <div className="flex gap-3 items-center">
          <div className={`${colors.accent} w-10 h-10 rounded-lg opacity-40`} />
          <div className="flex-1 space-y-2">
            <div className={`${colors.secondary} h-3 rounded-full w-4/5`} />
            <div className={`${colors.secondary} h-2 rounded-full w-1/3 opacity-60`} />
          </div>
        </div>
      </div>
      {/* Bottom bar */}
      <div className="flex gap-2">
        <div className={`${colors.accent} h-8 rounded-lg flex-1 opacity-90`} />
        <div className={`${colors.secondary} h-8 rounded-lg w-20`} />
      </div>
    </div>
  );
}

export default function FeatureDeepDive() {
  return (
    <section className="py-16 md:py-24">
      <div className="container mx-auto px-4 md:px-6">
        {features.map((feature, index) => {
          const isReversed = index % 2 !== 0;

          return (
            <motion.div
              key={index}
              initial="hidden"
              whileInView="visible"
              viewport={{ once: true, margin: "-100px" }}
              variants={staggerContainer}
              className={`flex flex-col ${
                isReversed ? "md:flex-row-reverse" : "md:flex-row"
              } items-center gap-10 md:gap-16 py-16 md:py-20`}
            >
              {/* Text side */}
              <motion.div variants={fadeUp} className="flex-1 space-y-6">
                <span className="inline-block px-3 py-1 text-sm font-medium bg-sky-100 text-sky-700 rounded-full">
                  {feature.tag}
                </span>
                <h3 className="text-3xl md:text-4xl font-bold text-slate-900">
                  {feature.title}
                </h3>
                <p className="text-lg text-slate-600 leading-relaxed">
                  {feature.description}
                </p>
                <motion.ul
                  variants={staggerContainer}
                  initial="hidden"
                  whileInView="visible"
                  viewport={{ once: true }}
                  className="space-y-3 pt-2"
                >
                  {feature.points.map((point, i) => (
                    <motion.li
                      key={i}
                      variants={staggerItem}
                      className="flex items-center gap-3"
                    >
                      <span className="flex-shrink-0 w-6 h-6 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center">
                        <Check size={14} strokeWidth={3} />
                      </span>
                      <span className="text-slate-700 font-medium">{point}</span>
                    </motion.li>
                  ))}
                </motion.ul>
              </motion.div>

              {/* Mockup side */}
              <motion.div
                variants={fadeUp}
                className="flex-1 flex justify-center"
              >
                <FeatureMockup colorIndex={index} />
              </motion.div>
            </motion.div>
          );
        })}
      </div>
    </section>
  );
}
