import { Button } from "@/components/ui/button";
import { Link as LinkIcon, BarChart3, Share2, Zap, TrendingUp, Workflow } from "lucide-react";
import Link from "next/link";

const solutions = [
  {
    icon: LinkIcon,
    title: "یکپارچه‌سازی سیستم‌ها",
    description: "اتصال و هماهنگ‌سازی سیستم‌ها و سرویس‌های مختلف برای ایجاد جریان یکپارچه داده و فرآیند",
    features: [
      "اتصال به سرویس‌ها و APIهای مختلف",
      "همگام‌سازی خودکار داده‌ها بین سیستم‌ها",
      "ایجاد workflowهای یکپارچه",
      "پشتیبانی از پروتکل‌های مختلف ارتباطی"
    ]
  },
  {
    icon: BarChart3,
    title: "پنل‌های مدیریتی قدرتمند",
    description: "ارائه پنل‌های کاربری پیشرفته برای نمایش آمار، تحلیل داده‌ها و مدیریت اطلاعات با رابط کاربری حرفه‌ای",
    features: [
      "داشبوردهای تعاملی و قابل تنظیم",
      "نمایش آمار و گزارش‌های زنده",
      "ویرایش و مدیریت اطلاعات از طریق UI",
      "نمودارها و تجسم‌های داده پیشرفته"
    ]
  },
  {
    icon: Share2,
    title: "تعامل با شبکه‌های اجتماعی",
    description: "ایجاد ارتباطات قدرتمند و خودکار با پلتفرم‌های مختلف شبکه‌های اجتماعی برای مدیریت و تعامل بهتر",
    features: [
      "اتصال به پلتفرم‌های مختلف اجتماعی",
      "مدیریت و ارسال محتوا به صورت خودکار",
      "نظارت و تحلیل تعاملات",
      "همگام‌سازی اطلاعات بین پلتفرم‌ها"
    ]
  },
  {
    icon: Zap,
    title: "اتوماسیون فرآیندها",
    description: "ایجاد کارهای خودکار برای اتوماتیک‌سازی فرآیندهای کسب‌وکار و کاهش کارهای دستی",
    features: [
      "تعریف و اجرای workflowهای خودکار",
      "اتوماسیون بر اساس رویداد و زمان",
      "زمان‌بندی و اجرای کارهای تکراری",
      "اعلان‌ها و هشدارهای خودکار"
    ]
  },
  {
    icon: TrendingUp,
    title: "تحلیل و پردازش داده",
    description: "انجام تحلیل‌های پیشرفته روی داده‌ها و پردازش اطلاعات برای استخراج منابع ارزشمند",
    features: [
      "تحلیل داده‌ها از منابع مختلف",
      "پردازش و تبدیل داده‌ها",
      "گزارش‌گیری و تجسم نتایج",
      "شناسایی الگوها و روندها"
    ]
  },
  {
    icon: Workflow,
    title: "مدیریت جریان کار",
    description: "طراحی و مدیریت جریان‌های کاری پیچیده برای اتصال و هماهنگ‌سازی فرآیندهای مختلف",
    features: [
      "طراحی workflowهای سفارشی",
      "مدیریت و نظارت بر اجرای فرآیندها",
      "خطایابی و بهینه‌سازی جریان‌ها",
      "لاگ و گزارش‌گیری از اجراها"
    ]
  }
];

export default function SolutionsPage() {
  return (
    <>
      {/* Hero Section */}
      <section className="bg-background pt-32 pb-20 md:pt-40 md:pb-28">
        <div className="mx-auto max-w-4xl px-6">
          <div className="text-center space-y-6">
            <h1 className="text-4xl font-bold md:text-5xl lg:text-6xl leading-tight tracking-normal">
              راه‌حل‌های ما
            </h1>
            <p className="text-xl leading-relaxed tracking-normal text-muted-foreground max-w-2xl mx-auto">
              راه‌حل‌های یکپارچه‌سازی پیشرفته برای اتصال سیستم‌ها، اتوماسیون فرآیندها، تعامل با شبکه‌های اجتماعی و تحلیل داده‌ها که کسب‌وکار شما را به سطح جدیدی از کارایی می‌رساند.
            </p>
          </div>
        </div>
      </section>

      {/* Solutions Grid */}
      <section className="bg-muted/30 py-20 md:py-28">
        <div className="mx-auto max-w-6xl px-6">
          <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-2">
            {solutions.map((solution, index) => {
              const Icon = solution.icon;
              return (
                <div
                  key={index}
                  className="group rounded-2xl border bg-card p-8 transition-all duration-300 hover:shadow-lg hover:-translate-y-1"
                >
                  <div className="mb-6 flex items-center gap-4">
                    <div className="flex size-14 items-center justify-center rounded-xl bg-primary/10 text-primary shrink-0">
                      <Icon className="size-7" />
                    </div>
                    <h2 className="text-2xl font-bold leading-tight tracking-normal">
                      {solution.title}
                    </h2>
                  </div>
                  <p className="mb-6 leading-relaxed tracking-normal text-muted-foreground text-lg">
                    {solution.description}
                  </p>
                  <ul className="space-y-3">
                    {solution.features.map((feature, featureIndex) => (
                      <li
                        key={featureIndex}
                        className="flex items-start gap-3 text-base leading-relaxed tracking-normal"
                      >
                        <span className="mt-1.5 size-2 shrink-0 rounded-full bg-primary" />
                        <span className="text-muted-foreground">{feature}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="bg-background py-20 md:py-28">
        <div className="mx-auto max-w-4xl px-6">
          <div className="text-center space-y-8 p-12 rounded-2xl border bg-gradient-to-br from-primary/5 to-primary/10">
            <h2 className="text-3xl font-bold md:text-4xl leading-tight tracking-normal">
              آماده شروع هستید؟
            </h2>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
              همین حالا شروع کنید و از قدرت یکپارچه‌سازی سیستم‌ها، اتوماسیون فرآیندها و تحلیل داده‌ها بهره‌مند شوید
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button asChild size="lg">
                <Link href="/pricing">مشاهده قیمت‌ها</Link>
              </Button>
              <Button asChild size="lg" variant="outline">
                <Link href="/about">درباره ما</Link>
              </Button>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}