import type { ReactNode } from "react";
import { type Lang } from "@/lib/config";

interface SectorCardProps {
  icon: ReactNode;
  title: string;
  description: string;
}

function SectorCard({ icon, title, description }: SectorCardProps) {
  return (
    <div className="group relative flex gap-4 rounded-xl p-4 transition-all hover:bg-slate-50 dark:hover:bg-slate-800">
      <div className="flex-shrink-0">
        <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-gradient-to-br from-brand-green/10 to-brand-green/5 text-brand-green">
          {icon}
        </div>
      </div>
      <div className="flex-1">
        <h3 className="mb-2 text-lg font-semibold text-slate-900 dark:text-white">
          {title}
        </h3>
        <p className="text-sm leading-relaxed text-slate-600 dark:text-slate-300">
          {description}
        </p>
      </div>
    </div>
  );
}

// SVG Icons for each sector
const icons = {
  medical: (
    <svg
      className="h-6 w-6"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth={2}
        d="M9 12h6m-3-3v6m-7 3h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
      />
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth={2}
        d="M9 3h6v3H9z"
      />
    </svg>
  ),
  beauty: (
    <svg
      className="h-6 w-6"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth={2}
        d="M5 3v4M3 5h4M6 17v4m-2-2h4m10-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"
      />
    </svg>
  ),
  dental: (
    <svg
      className="h-6 w-6"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth={2}
        d="M12 2C9.24 2 7 4.24 7 7c0 1.06.16 2.08.45 3.04L6 14c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h2v-6l2.5-6h3l2.5 6v6h2c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2l-1.45-3.96c.29-.96.45-1.98.45-3.04 0-2.76-2.24-5-5-5z"
      />
    </svg>
  ),
  physiotherapy: (
    <svg
      className="h-6 w-6"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth={2}
        d="M13 7a4 4 0 11-8 0 4 4 0 018 0zM9 14a6 6 0 00-6 6v1h12v-1a6 6 0 00-6-6zM21 12h-6M18 9v6"
      />
    </svg>
  ),
  veterinary: (
    <svg
      className="h-6 w-6"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth={2}
        d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
      />
    </svg>
  ),
  fitness: (
    <svg
      className="h-6 w-6"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth={2}
        d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
      />
    </svg>
  ),
  optometry: (
    <svg
      className="h-6 w-6"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth={2}
        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
      />
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth={2}
        d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
      />
    </svg>
  ),
  pharmacy: (
    <svg
      className="h-6 w-6"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth={2}
        d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"
      />
    </svg>
  ),
};

export default function SectorsShowcase({ lang }: { lang: Lang }) {
  const isAr = lang === "ar";

  const sectors = [
    {
      icon: icons.medical,
      titleEn: "Medical Clinics & Hospitals",
      titleAr: "العيادات الطبية والمستشفيات",
      descriptionEn:
        "Streamline patient appointments, manage multi-department scheduling, and send automated health reminders via WhatsApp.",
      descriptionAr:
        "تبسيط مواعيد المرضى وإدارة الجدولة متعددة الأقسام وإرسال تذكيرات صحية آلية عبر واتساب.",
    },
    {
      icon: icons.beauty,
      titleEn: "Beauty & Aesthetic Centers",
      titleAr: "مراكز التجميل والعناية",
      descriptionEn:
        "Book treatments, collect deposits for procedures, and showcase before/after galleries through WhatsApp Business.",
      descriptionAr:
        "حجز العلاجات وتحصيل العربون للإجراءات وعرض معارض قبل/بعد عبر واتساب بيزنس.",
    },
    {
      icon: icons.dental,
      titleEn: "Dental Practices",
      titleAr: "عيادات الأسنان",
      descriptionEn:
        "Coordinate complex treatment plans, send appointment cards, and manage emergency slots with instant messaging.",
      descriptionAr:
        "تنسيق خطط العلاج المعقدة وإرسال بطاقات المواعيد وإدارة فترات الطوارئ بالرسائل الفورية.",
    },
    {
      icon: icons.physiotherapy,
      titleEn: "Physiotherapy & Rehabilitation",
      titleAr: "العلاج الطبيعي والتأهيل",
      descriptionEn:
        "Schedule recurring sessions, share exercise videos, and track patient progress through automated check-ins.",
      descriptionAr:
        "جدولة الجلسات المتكررة ومشاركة فيديوهات التمارين وتتبع تقدم المريض عبر المتابعات الآلية.",
    },
    {
      icon: icons.veterinary,
      titleEn: "Veterinary Clinics",
      titleAr: "العيادات البيطرية",
      descriptionEn:
        "Manage pet appointments, send vaccination reminders, and share care instructions with pet owners instantly.",
      descriptionAr:
        "إدارة مواعيد الحيوانات الأليفة وإرسال تذكيرات التطعيم ومشاركة تعليمات الرعاية مع أصحاب الحيوانات.",
    },
    {
      icon: icons.fitness,
      titleEn: "Wellness & Spa Centers",
      titleAr: "مراكز العافية والسبا",
      descriptionEn:
        "Book spa packages, manage therapist schedules, and send special offers to VIP members via WhatsApp.",
      descriptionAr:
        "حجز باقات السبا وإدارة جداول المعالجين وإرسال العروض الخاصة للأعضاء المميزين عبر واتساب.",
    },
    {
      icon: icons.optometry,
      titleEn: "Optometry & Vision Centers",
      titleAr: "مراكز البصريات والعيون",
      descriptionEn:
        "Schedule eye exams, notify when prescriptions are ready, and share frame collections through catalog messages.",
      descriptionAr:
        "جدولة فحوصات العيون وإشعار عند جاهزية الوصفات ومشاركة مجموعات الإطارات عبر رسائل الكتالوج.",
    },
    {
      icon: icons.pharmacy,
      titleEn: "Pharmacies & Medical Supplies",
      titleAr: "الصيدليات واللوازم الطبية",
      descriptionEn:
        "Process prescription orders, confirm pickup times, and send medication reminders to patients automatically.",
      descriptionAr:
        "معالجة طلبات الوصفات الطبية وتأكيد أوقات الاستلام وإرسال تذكيرات الأدوية للمرضى تلقائياً.",
    },
  ];

  return (
    <section className="bg-white py-20 dark:bg-slate-900">
      <div className="mx-auto max-w-7xl px-6">
        <div className="mb-12 text-center">
          <div className="mb-4 inline-flex items-center gap-2 rounded-full bg-brand-green/10 px-4 py-2 text-sm font-medium text-brand-green">
            <span className="text-lg">🏥</span>
            <span>
              {isAr ? "حلول متخصصة حسب القطاع" : "Industry-Specific Solutions"}
            </span>
          </div>
          <h2 className="text-4xl font-bold text-slate-900 dark:text-white md:text-5xl">
            {isAr
              ? "ماويدي يخدم جميع قطاعات الرعاية الصحية في الخليج"
              : "Mawidi serves every healthcare sector in the GCC"}
          </h2>
          <p className="mt-4 text-lg text-slate-600 dark:text-slate-300">
            {isAr
              ? "من العيادات الصغيرة إلى المستشفيات الكبرى، نوفر حلول واتساب مخصصة لكل احتياج"
              : "From small clinics to major hospitals, we provide tailored WhatsApp solutions for every need"}
          </p>
        </div>

        <div className="grid gap-2 rounded-2xl border border-slate-200 bg-slate-50/50 p-6 dark:border-slate-700 dark:bg-slate-800/50 md:grid-cols-2">
          {sectors.map((sector, index) => (
            <SectorCard
              key={index}
              icon={sector.icon}
              title={isAr ? sector.titleAr : sector.titleEn}
              description={isAr ? sector.descriptionAr : sector.descriptionEn}
            />
          ))}
        </div>

        <div className="mt-12 text-center">
          <p className="mb-6 text-slate-600 dark:text-slate-300">
            {isAr
              ? "لا ترى قطاعك؟ تواصل معنا لحلول مخصصة"
              : "Don't see your sector? Contact us for custom solutions"}
          </p>
          <div className="flex flex-wrap justify-center gap-4">
            <a
              href={`/${lang}/contact`}
              className="rounded-lg bg-brand-green px-6 py-3 font-semibold text-white shadow-sm transition-colors hover:bg-brand-greenHover"
            >
              {isAr ? "احجز استشارة مجانية" : "Book Free Consultation"}
            </a>
            <a
              href={`/${lang}/industries`}
              className="rounded-lg border border-brand-green px-6 py-3 font-semibold text-brand-green transition-colors hover:bg-brand-green hover:text-white"
            >
              {isAr ? "استكشف جميع الصناعات" : "Explore All Industries"}
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}