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

export const metadata: Metadata = {
  title: "راه حل‌ها",
  description:
    "راهکارهای فیپ: یکپارچه‌سازی سیستم‌ها، پنل‌های مدیریتی، اتوماسیون فرآیندها و تحلیل داده.",
};

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

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-3xl mx-auto">
              در دنیای امروز، کسب‌و‌کارهای موفق دیگر نمی‌توانند سیستم‌ها، ابزارها و داده‌هایشان را جدا از هم مدیریت کنند. حجم اطلاعات، تعداد ابزارهای مختلف و نیاز به واکنش سریع باعث شده تا یکپارچه‌سازی واقعی سیستم‌ها دیگر تنها یک انتخاب نباشد — بلکه یک ضرورت باشد.
            </p>
            <p className="text-lg leading-relaxed tracking-normal text-muted-foreground max-w-3xl mx-auto">
              راهکارهایی که اینجا معرفی می‌شود، فراتر از تکنولوژی‌های معمول است. هدف اصلی این نیست که فقط چند سرویس را به هم وصل کنیم، بلکه این است که فرایندهای کسب‌و‌کار شما را هوشمند، کارا و قابل کنترل‌تر کنیم.
            </p>
          </div>
        </div>
      </section>

      {/* Solutions */}
      <section className="bg-muted/30 py-20 md:py-28">
        <div className="mx-auto max-w-6xl px-6">
          <div className="space-y-16">
            {solutions.map((solution, index) => {
              const Icon = solution.icon;
              return (
                <div
                  key={index}
                  className="group rounded-2xl border bg-card p-8 md:p-10 transition-all duration-300 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">
                      {index + 1}. {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 mb-6">
                    {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>
                  {solution.result && (
                    <p className="text-base leading-relaxed tracking-normal text-foreground/90 font-medium border-r-4 border-primary/50 pr-4">
                      {solution.result}
                    </p>
                  )}
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* نتیجه‌گیری */}
      <section className="bg-background py-16 md:py-24">
        <div className="mx-auto max-w-4xl px-6">
          <div className="rounded-2xl border bg-muted/30 p-8 md:p-10">
            <h2 className="text-2xl font-bold mb-6">نتیجه‌گیری</h2>
            <p className="text-lg leading-relaxed text-muted-foreground mb-4">
              این راهکارها کمک می‌کنند تا کسب‌و‌کار شما از حالت «جزیره‌ای» بیرون بیاید و به یک ساختار هوشمند، به‌هم‌پیوسته و قابل رشد تبدیل شود.
            </p>
            <p className="text-lg leading-relaxed text-muted-foreground">
              دیگر لازم نیست زمان زیادی صرف انتقال داده، گزارش‌گیری دستی یا تکرار فعالیت‌ها بکنید؛ بلکه می‌توانید به‌طور هوشمندانه‌تر روی اهداف استراتژیک خود تمرکز کنید و رشد سریع‌تر را تجربه کنید.
            </p>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="bg-muted/30 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>
    </>
  );
}