import { cn } from "@/lib/utils";
import { Clock, ShoppingCart, Eye, FileText, ToggleLeft, Settings } from "lucide-react";

interface SolutionSectionProps {
  className?: string;
}

export default function SolutionSection({ className }: SolutionSectionProps) {
  const features = [
    {
      icon: Clock,
      title: "نمایش قیمت لحظه‌ای به مشتریان",
      description: "دسترسی آنی به آخرین قیمت‌های بازار"
    },
    {
      icon: ShoppingCart,
      title: "ثبت و مدیریت سفارش‌ها",
      description: "سیستم جامع ثبت و پیگیری سفارش‌ها"
    },
    {
      icon: Eye,
      title: "مشاهده آنلاین مانده حساب هر مشتری",
      description: "دسترسی لحظه‌ای به وضعیت حساب مشتریان"
    },
    {
      icon: FileText,
      title: "دسترسی به ریز کامل معاملات در هر ساعت از شبانه‌روز",
      description: "گزارش‌گیری دقیق و کامل از تمام معاملات"
    },
    {
      icon: ToggleLeft,
      title: "کنترل وضعیت بازار (باز / بسته)",
      description: "مدیریت وضعیت بازار به صورت لحظه‌ای"
    },
    {
      icon: Settings,
      title: "پنل مدیریت پیشرفته برای ادمین",
      description: "ابزارهای کامل مدیریت و کنترل سیستم"
    }
  ];

  return (
    <section className={cn("py-16 md:py-24 lg:py-32", className)}>
      <div className="container mx-auto max-w-6xl px-6">
        <div className="flex flex-col items-start gap-8 lg:gap-12 lg:px-16 xl:gap-32">
          <h2 className="text-heading-2 font-semibold md:shrink-0 lg:max-w-1/3 lg:max-w-3xl">
            یک پلتفرم اختصاصی برای مدیریت کامل معاملات
          </h2>
          <div className="grid w-full gap-6 md:grid-cols-2">
            {features.map((feature, index) => {
              const Icon = feature.icon;
              return (
                <div
                  key={index}
                  className="flex rounded-lg border border-border bg-accent p-6 md:p-8"
                >
                  <Icon className="mr-3 size-5 shrink-0 lg:mr-6 lg:size-6 text-primary" />
                  <div>
                    <div className="text-body-sm mb-3 h-5 font-semibold text-accent-foreground">
                      {feature.title}
                    </div>
                    <div className="text-body-sm font-medium text-muted-foreground">
                      {feature.description}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}