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

export const revalidate = SITE.revalidateSeconds;

export default function SolutionsPage({ params }: { params: { lang: Lang } }) {
  const isAr = params.lang === "ar";
  const verticals = [
    {
      titleEn: "Aesthetic clinics",
      titleAr: "عيادات التجميل",
      bulletEn: [
        "Cross-sell skincare plans",
        "Deposit high-value treatments",
        "Automated follow-ups",
      ],
      bulletAr: [
        "بيع باقات العناية بالبشرة",
        "تحصيل عربون للإجراءات مرتفعة الثمن",
        "متابعة آلية بعد الزيارة",
      ],
    },
    {
      titleEn: "Dental practices",
      titleAr: "العيادات السنية",
      bulletEn: [
        "Digital consent flows",
        "Recall overdue patients",
        "Coordinate specialists",
      ],
      bulletAr: [
        "نماذج موافقة رقمية",
        "استرجاع المرضى المتأخرين",
        "تنسيق المواعيد بين الأخصائيين",
      ],
    },
    {
      titleEn: "Medical spas",
      titleAr: "مراكز السبا الطبية",
      bulletEn: [
        "Promote seasonal offers",
        "Segment VIP guests",
        "Personalize retention scripts",
      ],
      bulletAr: [
        "ترويج العروض الموسمية",
        "تقسيم العملاء المميزين",
        "نصوص تخصّصية للحفاظ على العملاء",
      ],
    },
  ];
  return (
    <main className="max-w-6xl mx-auto px-4 py-16 space-y-12">
      <section>
        <h1 className="text-3xl md:text-4xl font-extrabold">
          {isAr ? "حلول مصممة لكل قطاع" : "Solutions tailored to each vertical"}
        </h1>
        <p className="mt-4 text-neutral-600 text-lg">
          {isAr
            ? "نضبط التدفقات والردود وفقاً لنوع العيادة، لغة الجمهور، ومستوى الحساسية الطبية."
            : "We customize flows and tone based on clinic type, audience language, and medical sensitivity."}
        </p>
      </section>
      <section className="grid md:grid-cols-3 gap-6">
        {verticals.map((vertical) => (
          <div
            key={vertical.titleEn}
            className="border rounded-2xl p-6 bg-white space-y-3"
          >
            <h2 className="text-xl font-semibold">
              {isAr ? vertical.titleAr : vertical.titleEn}
            </h2>
            <ul className="text-neutral-600 space-y-2">
              {(isAr ? vertical.bulletAr : vertical.bulletEn).map((bullet) => (
                <li key={bullet} className="flex gap-2">
                  <span>•</span>
                  <span>{bullet}</span>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </section>
    </main>
  );
}