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 (
    <>
      {/* Hero Section */}
      <section className="bg-white py-20 md:py-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-white p-8 transition-all hover:shadow-lg"
                >
                  <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-white 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>
    </>
  );
}