'use client'

import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Check } from 'lucide-react'
import Image from 'next/image'
import Link from 'next/link'
import { cn } from '@/lib/utils'

interface Solution {
  id: number
  title: string
  description: string
  features: string[]
  suitableFor?: string
  buttonText: string
  buttonLink: string
  image: string
  emoji: string
}

const solutions: Solution[] = [
  {
    id: 1,
    emoji: '1️⃣',
    title: 'سامانه معاملات آبشده همکاران',
    description: 'پلتفرم حرفه‌ای ثبت و مدیریت معاملات آبشده برای فعالان عمده بازار.',
    features: [
      'نمایش قیمت لحظه‌ای',
      'ثبت سفارش سریع',
      'مدیریت اعتبار مشتریان',
      'کنترل وضعیت بازار',
      'گزارش‌گیری دقیق معاملات'
    ],
    suitableFor: 'بنکداران و مجموعه‌های دارای حجم بالای معامله',
    buttonText: 'مشاهده محصول',
    buttonLink: '/product/abeshde-hamkar',
    image: '/assets/apps-pic/app1.jpg'
  },
  {
    id: 2,
    emoji: '2️⃣',
    title: 'سامانه خرید آبشده خانگی',
    description: 'راهکار اختصاصی برای طلافروشان جهت خرید خرد آبشده از مشتریان با محاسبه دقیق و لحظه‌ای.',
    features: [
      'محاسبه خودکار بر اساس قیمت لحظه‌ای',
      'ثبت اطلاعات مشتری',
      'گزارش‌گیری و مدیریت سوابق',
      'کاهش خطای محاسباتی'
    ],
    buttonText: 'مشاهده محصول',
    buttonLink: '/product/abeshde-khaneghi',
    image: '/assets/apps-pic/app2.jpg'
  },
  {
    id: 3,
    emoji: '3️⃣',
    title: 'فروشگاه‌ساز تخصصی طلا',
    description: 'راه‌اندازی فروشگاه آنلاین طلا با طراحی مدرن و سازگار با رفتار کاربران شبکه‌های اجتماعی.',
    features: [
      'طراحی کاربرپسند',
      'مدیریت محصولات و موجودی',
      'اتصال به سامانه قیمت لحظه‌ای',
      'سازگار با موبایل'
    ],
    buttonText: 'مشاهده محصول',
    buttonLink: '/product/forushgah-saz-tala',
    image: '/assets/apps-pic/app3.jpg'
  },
  {
    id: 4,
    emoji: '4️⃣',
    title: 'سامانه قیمت‌دهی آنلاین طلا و نقره',
    description: 'ارائه قیمت لحظه‌ای طلا و نقره از طریق وب‌سایت، اپلیکیشن، ویجت یا API.',
    features: [
      'بروزرسانی لحظه‌ای',
      'امکان استفاده در سایت‌ها و پنل‌ها',
      'نمایش حرفه‌ای و قابل سفارشی‌سازی'
    ],
    buttonText: 'مشاهده محصول',
    buttonLink: '/product/gheymat-dehi-tala',
    image: '/assets/apps-pic/app1.jpg'
  }
]

export default function SolutionsShowcase() {
  return (
    <section className="relative py-16 md:py-24 lg:py-32">
      <div className="mx-auto max-w-7xl px-6">
        {/* Header */}
        <div className="mx-auto max-w-2xl text-center mb-12 md:mb-16">
          <h2 className="text-heading-2 font-semibold leading-tight mb-4 text-foreground">
            راهکارهای ما
          </h2>
          <p className="text-body leading-relaxed text-muted-foreground">
            سامانه‌های تخصصی برای معاملات آبشده، مدیریت فروشگاه‌های طلا و قیمت‌دهی آنلاین
          </p>
        </div>

        {/* Solutions Grid */}
        <div className="grid gap-6 md:grid-cols-2 lg:gap-8">
          {solutions.map((solution, index) => (
            <Card
              key={solution.id}
              className={cn(
                "group relative overflow-hidden transition-all duration-300 hover:shadow-lg hover:border-primary/20",
                "flex flex-col"
              )}
            >
              {/* Image Section */}
              <div className="relative h-64 w-full overflow-hidden bg-muted">
                <Image
                  src={solution.image}
                  alt={solution.title}
                  fill
                  className="object-contain transition-transform duration-500 group-hover:scale-105"
                  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-background/80 via-background/40 to-transparent" />
                
                {/* Emoji Badge */}
                <div className="absolute top-4 right-4">
                  <div className="flex h-10 w-10 items-center justify-center rounded-full bg-background/90 backdrop-blur-sm text-xl shadow-sm">
                    {solution.emoji}
                  </div>
                </div>
              </div>

              {/* Content */}
              <CardHeader className="flex-1">
                <CardTitle className="text-heading-3 mb-2 font-semibold text-foreground">
                  {solution.title}
                </CardTitle>
                <CardDescription className="text-body leading-relaxed text-muted-foreground">
                  {solution.description}
                </CardDescription>
              </CardHeader>

              <CardContent className="flex-1 space-y-4">
                {/* Features List */}
                <div className="space-y-2">
                  <h4 className="text-heading-5 font-semibold text-foreground mb-3">ویژگی‌ها:</h4>
                  <ul className="space-y-2">
                    {solution.features.map((feature, idx) => (
                      <li key={idx} className="flex items-start gap-2 text-body-sm text-muted-foreground">
                        <Check className="size-4 text-primary mt-0.5 shrink-0" />
                        <span>{feature}</span>
                      </li>
                    ))}
                  </ul>
                </div>

                {/* Suitable For */}
                {solution.suitableFor && (
                  <div className="pt-2 border-t">
                    <p className="text-body-sm">
                      <span className="font-semibold text-foreground">مناسب برای:</span>{' '}
                      <span className="text-muted-foreground">{solution.suitableFor}</span>
                    </p>
                  </div>
                )}
              </CardContent>

              <CardFooter>
                <Button asChild className="w-full" variant="primary">
                  <Link href={solution.buttonLink}>
                    {solution.buttonText}
                  </Link>
                </Button>
              </CardFooter>
            </Card>
          ))}
        </div>
      </div>
    </section>
  )
}