import { SITE, type Lang } from "@/lib/config";

export const revalidate = SITE.revalidateSeconds;

const verticals = [
  {
    icon: "💉",
    titleEn: "Aesthetic & laser centres",
    titleAr: "مراكز التجميل والليزر",
    copyEn:
      "Deposit-led bookings, script variations by treatment type, and photo consent workflows.",
    copyAr: "حجوزات بعربون، نصوص مخصصة لكل إجراء، ونماذج موافقة على الصور.",
  },
  {
    icon: "🦷",
    titleEn: "Dental clinics",
    titleAr: "عيادات الأسنان",
    copyEn:
      "Chair availability sync, multi-specialist coordination, and financing follow-ups.",
    copyAr: "مزامنة مواعيد الكراسي، تنسيق الأخصائيين، ومتابعة خيارات التقسيط.",
  },
  {
    icon: "🧖",
    titleEn: "Wellness & medical spas",
    titleAr: "سبا طبي وعافية",
    copyEn:
      "Membership renewals, seasonal offers, and VIP guest segmentation without mass blasting.",
    copyAr:
      "تجديد العضويات، عروض موسمية، وتقسيم العملاء المميزين بدون رسائل إزعاج.",
  },
  {
    icon: "🏥",
    titleEn: "Specialty clinics",
    titleAr: "العيادات التخصصية",
    copyEn:
      "Follow-up protocols, script approval by physicians, and structured escalation paths.",
    copyAr:
      "بروتوكولات المتابعة، موافقة الأطباء على النصوص، ومسارات تصعيد واضحة.",
  },
];

export default function IndustriesPage({ params }: { params: { lang: Lang } }) {
  const isAr = params.lang === "ar";
  return (
    <main className="max-w-6xl mx-auto px-4 py-16 space-y-10">
      <section className="space-y-4">
        <h1 className="text-3xl md:text-4xl font-extrabold">
          {isAr ? "حلول لكل قطاع" : "Industry-specific solutions"}
        </h1>
        <p className="text-neutral-600 text-lg">
          {isAr
            ? "نضبط لهجة الردود ومسارات العربون والتذكير بحسب نوع العيادة وعدد الفروع."
            : "We adapt language, deposit flows, and reminder cadence to suit each clinic type and footprint."}
        </p>
      </section>
      <section className="grid gap-6 md:grid-cols-2">
        {verticals.map((vertical) => (
          <div
            key={vertical.titleEn}
            className="rounded-2xl border border-slate-100 bg-white p-6 shadow-sm"
          >
            <div className="text-3xl">{vertical.icon}</div>
            <h3 className="mt-3 text-xl font-semibold text-brand-ink">
              {isAr ? vertical.titleAr : vertical.titleEn}
            </h3>
            <p className="mt-2 text-neutral-600">
              {isAr ? vertical.copyAr : vertical.copyEn}
            </p>
          </div>
        ))}
      </section>
    </main>
  );
}
