"use client";

import { motion } from "framer-motion";
import { content } from "@/lib/content";
import { fadeUp, staggerContainer, staggerItem } from "@/lib/animations";
import {
  FileSpreadsheet,
  MessageCircle,
  FileText,
  AlertTriangle,
  LayoutDashboard,
  CheckCircle2,
  TrendingUp,
  Users,
} from "lucide-react";

const problemContent = content.ar.problem;

const beforeIcons = [
  { Icon: FileSpreadsheet, label: "إكسيل", rotation: -6, x: 10, y: 5 },
  { Icon: MessageCircle, label: "واتساب", rotation: 4, x: 55, y: 15 },
  { Icon: FileText, label: "ورق", rotation: -3, x: 25, y: 55 },
  { Icon: AlertTriangle, label: "فوضى", rotation: 8, x: 65, y: 60 },
];

function BeforeState() {
  return (
    <motion.div
      variants={staggerContainer}
      initial="hidden"
      whileInView="visible"
      viewport={{ once: true }}
      className="relative flex flex-col items-center"
    >
      <div className="relative h-64 w-full max-w-sm rounded-2xl border-2 border-dashed border-slate-200 bg-slate-50/50 p-8 md:h-72">
        {beforeIcons.map(({ Icon, label, rotation, x, y }, index) => (
          <motion.div
            key={label}
            variants={staggerItem}
            className="absolute"
            style={{
              left: `${x}%`,
              top: `${y}%`,
              transform: `rotate(${rotation}deg)`,
            }}
          >
            <div className="flex flex-col items-center gap-1 opacity-60">
              <div className="rounded-lg bg-white p-3 shadow-sm border border-slate-100">
                <Icon className="h-6 w-6 text-slate-400" />
              </div>
              <span className="text-xs text-slate-400">{label}</span>
            </div>
          </motion.div>
        ))}
        {/* Scattered lines for chaos effect */}
        <svg
          className="absolute inset-0 h-full w-full opacity-10"
          viewBox="0 0 200 200"
        >
          <path d="M20 80 L80 40 L140 90 L180 30" stroke="currentColor" strokeWidth="1" fill="none" strokeDasharray="4 4" />
          <path d="M30 140 L90 160 L150 120 L170 170" stroke="currentColor" strokeWidth="1" fill="none" strokeDasharray="4 4" />
        </svg>
      </div>
      <motion.p
        variants={fadeUp}
        className="mt-6 max-w-xs text-center text-base font-medium text-slate-600"
      >
        {problemContent.before}
      </motion.p>
    </motion.div>
  );
}

function AfterState() {
  return (
    <motion.div
      initial={{ opacity: 0, x: -30 }}
      whileInView={{ opacity: 1, x: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.7, delay: 1 }}
      className="relative flex flex-col items-center"
    >
      <div className="relative h-64 w-full max-w-sm rounded-2xl border border-sky-100 bg-white p-6 shadow-xl md:h-72">
        {/* Mini dashboard */}
        <div className="space-y-3">
          <div className="flex items-center gap-3 rounded-lg bg-sky-50 p-3">
            <LayoutDashboard className="h-5 w-5 text-sky-500" />
            <div className="flex-1">
              <div className="h-2 w-3/4 rounded bg-sky-200" />
              <div className="mt-1.5 h-2 w-1/2 rounded bg-sky-100" />
            </div>
          </div>
          <div className="flex items-center gap-3 rounded-lg bg-emerald-50 p-3">
            <CheckCircle2 className="h-5 w-5 text-emerald-500" />
            <div className="flex-1">
              <div className="h-2 w-2/3 rounded bg-emerald-200" />
              <div className="mt-1.5 h-2 w-2/5 rounded bg-emerald-100" />
            </div>
          </div>
          <div className="flex items-center gap-3 rounded-lg bg-amber-50 p-3">
            <TrendingUp className="h-5 w-5 text-amber-500" />
            <div className="flex-1">
              <div className="h-2 w-4/5 rounded bg-amber-200" />
              <div className="mt-1.5 h-2 w-1/3 rounded bg-amber-100" />
            </div>
          </div>
          <div className="flex items-center gap-3 rounded-lg bg-violet-50 p-3">
            <Users className="h-5 w-5 text-violet-500" />
            <div className="flex-1">
              <div className="h-2 w-3/5 rounded bg-violet-200" />
              <div className="mt-1.5 h-2 w-1/4 rounded bg-violet-100" />
            </div>
          </div>
        </div>
      </div>
      <motion.p
        initial={{ opacity: 0 }}
        whileInView={{ opacity: 1 }}
        viewport={{ once: true }}
        transition={{ delay: 1.3 }}
        className="mt-6 max-w-xs text-center text-base font-medium text-slate-700"
      >
        {problemContent.after}
      </motion.p>
    </motion.div>
  );
}

export default function ProblemSolution() {
  return (
    <section className="py-20 lg:py-28">
      <div className="container mx-auto px-4">
        <motion.div
          variants={fadeUp}
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true }}
          className="mb-12 text-center"
        >
          <span className="inline-block rounded-full bg-sky-50 px-4 py-1.5 text-sm font-medium text-sky-600">
            المشكلة والحل
          </span>
        </motion.div>

        <div className="grid items-center gap-8 md:grid-cols-2 lg:gap-16">
          <BeforeState />
          <AfterState />
        </div>
      </div>
    </section>
  );
}
