aragrp/app/solutions/page.tsx

import { Button } from "@/components/ui/button";
import { Database, Fingerprint, IdCard, ChartBarIncreasingIcon, MessageSquare, Zap, Shield, Link as LinkIcon } from "lucide-react";
import Link from "next/link";

const solutions = [
  {
    icon: Database,
    title: "تجمیع پایگاه داده",
    description: "جمع‌آوری و هماهنگ‌سازی داده‌ها از سیستم‌های مختلف برای ایجاد یک نمای واحد از اطلاعات کسب‌وکار شما",
    features: [
      "اتصال به دیتابیس‌های مختلف",
      "همگام‌سازی خودکار داده‌ها",
      "گزارش‌گیری یکپارچه",
      "پشتیبانی از APIهای خارجی"
    ]
  },
  {
    icon: Fingerprint,
    title: "احراز هویت پیشرفته",
    description: "سیستم امن و منعطف برای مدیریت احراز هویت کاربران و سرویس‌ها با پشتیبانی از روش‌های مختلف",
    features: [
      "پشتیبانی از OAuth",
      "توکن‌های اختصاصی",
      "احراز هویت چندمرحله‌ای",
      "مدیریت دسترسی‌ها"
    ]
  },
  {
    icon: IdCard,
    title: "مدیریت هویت",
    description: "مدیریت یکپارچه کاربران، نقش‌ها و مجوزها در همه سیستم‌های متصل به پلتفرم",
    features: [
      "مدیریت کاربران مرکزی",
      "تعریف نقش‌ها و مجوزها",
      "همگام‌سازی خودکار",
      "لاگ تغییرات"
    ]
  },
  {
    icon: ChartBarIncreasingIcon,
    title: "داشبورد تحلیل",
    description: "تبدیل داده‌های خام به گزارش‌ها و نمودارهای قابل‌درک برای تصمیم‌گیری بهتر",
    features: [
      "گزارش‌های سفارشی",
      "نمودارهای تعاملی",
      "تحلیل روندها",
      "خروجی در فرمت‌های مختلف"
    ]
  },
  {
    icon: MessageSquare,
    title: "ارتباطات چندکاناله",
    description: "ارسال و دریافت پیام از کانال‌های مختلف مانند تلگرام، واتساپ و سرویس‌های اختصاصی",
    features: [
      "پشتیبانی از تلگرام",
      "پشتیبانی از واتساپ",
      "کانال‌های اختصاصی",
      "مدیریت مکالمات"
    ]
  },
  {
    icon: Zap,
    title: "اتوماسیون فرآیندها",
    description: "خودکارسازی فرآیندهای کسب‌وکار با استفاده از رویدادها و ترiggerهای قابل تنظیم",
    features: [
      "تعریف workflow",
      "اتوماسیون بر اساس رویداد",
      "زمان‌بندی کارها",
      "اعلان‌های خودکار"
    ]
  },
  {
    icon: Shield,
    title: "امنیت و حریم خصوصی",
    description: "محافظت از داده‌ها و ارتباطات با استفاده از آخرین استانداردهای امنیتی",
    features: [
      "رمزنگاری end-to-end",
      "بکاپ خودکار",
      "مانیتورینگ امنیتی",
      "رعایت استانداردهای GDPR"
    ]
  },
  {
    icon: LinkIcon,
    title: "یکپارچه‌سازی API",
    description: "اتصال آسان به APIهای مختلف و سرویس‌های داخلی و خارجی",
    features: [
      "REST API",
      "GraphQL",
      "Webhooks",
      "مستندات کامل"
    ]
  }
];

export default function SolutionsPage() {
  return (
    <>
      <section className="bg-white py-16 md:py-32">
        <div className="mx-auto max-w-5xl px-6">
          <div className="mx-auto max-w-3xl space-y-6 text-center">
            <h1 className="text-3xl font-semibold md:text-4xl lg:text-5xl leading-relaxed tracking-normal">
              راه‌حل‌های ما
            </h1>
            <p className="text-lg leading-relaxed tracking-normal text-muted-foreground">
              مجموعه‌ای از ابزارهای قدرتمند برای یکپارچه‌سازی، اتوماسیون و ارتباطات هوشمند که به کسب‌وکار شما کمک می‌کند تا کارآمدتر و سریع‌تر عمل کند.
            </p>
          </div>

          <div className="mt-16 md:mt-24 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-white p-6 transition-all hover:shadow-lg"
                >
                  <div className="mb-4 flex items-center gap-3">
                    <div className="flex size-12 items-center justify-center rounded-xl bg-primary/10 text-primary">
                      <Icon className="size-6" />
                    </div>
                    <h2 className="text-xl font-semibold leading-relaxed tracking-normal">
                      {solution.title}
                    </h2>
                  </div>
                  <p className="mb-4 leading-relaxed tracking-normal text-muted-foreground">
                    {solution.description}
                  </p>
                  <ul className="space-y-2">
                    {solution.features.map((feature, featureIndex) => (
                      <li
                        key={featureIndex}
                        className="flex items-start gap-2 text-sm leading-relaxed tracking-normal"
                      >
                        <span className="mt-1.5 size-1.5 shrink-0 rounded-full bg-primary" />
                        <span className="text-muted-foreground">{feature}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              );
            })}
          </div>

          <div className="mt-16 text-center">
            <h2 className="mb-4 text-2xl font-semibold md:text-3xl leading-relaxed tracking-normal">
              آماده شروع هستید؟
            </h2>
            <p className="mb-8 text-muted-foreground leading-relaxed tracking-normal">
              همین حالا شروع کنید و از قدرت یکپارچه‌سازی و ارتباطات هوشمند بهره‌مند شوید
            </p>
            <Button asChild size="lg">
              <Link href="/pricing">مشاهده قیمت‌ها</Link>
            </Button>
          </div>
        </div>
      </section>
    </>
  );
}