'use client';
import Link from 'next/link';
import { ArrowRight, Plug, Zap, ShieldCheck } from 'lucide-react';
import { useTranslation } from '@client/contexts/LanguageContext';
import { getIntegrations, getIntegrationCategories } from '../_data/marketing';

export default function IntegrationsPage() {
  const { t } = useTranslation();
  const integrations = getIntegrations(t);
  const categories = getIntegrationCategories(t);

  return (
    <div data-ra-landing className="min-h-screen bg-slate-50 dark:bg-[#080a0f]">
      <section className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-20">
        <div className="text-center mb-12">
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-orange-50 dark:bg-orange-500/10 border border-orange-100 dark:border-orange-500/20 text-orange-600 dark:text-orange-400 text-xs font-semibold mb-4">
            <Plug size={12} /> {t('landing.integrationsPage.badge', 'Ecosystem')}
          </div>
          <h1 className="text-4xl sm:text-5xl font-bold text-slate-900 dark:text-white mb-4">
            {t('landing.integrationsPage.title', 'Connects with your entire stack')}
          </h1>
          <p className="text-base sm:text-lg text-slate-500 dark:text-slate-400 max-w-2xl mx-auto">
            {t('landing.integrationsPage.sub', 'Native integrations with 50+ POS, delivery, telephony, messaging, and payment platforms — no rip-and-replace required.')}
          </p>
        </div>

        {categories.map((cat) => {
          const items = integrations.filter((i) => i.category === cat.key);
          if (!items.length) return null;
          return (
            <div key={cat.key} className="mb-10">
              <h2 className="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-widest mb-4">{cat.label}</h2>
              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
                {items.map((item) => (
                  <div key={item.name} className="flex items-start gap-3 p-4 rounded-xl bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 hover:border-orange-200 dark:hover:border-orange-800 transition-colors">
                    <div
                      className="w-14 h-12 rounded-lg flex items-center justify-center flex-shrink-0 shadow-sm overflow-hidden p-2"
                      style={{ backgroundColor: item.color, color: 'white' }}
                    >
                      {/* eslint-disable-next-line @next/next/no-img-element */}
                      <img src={item.logoSrc} alt={item.logoAlt} className="w-full h-full object-contain" loading="lazy" decoding="async" />
                    </div>
                    <div className="min-w-0 flex-1">
                      <div className="flex items-center justify-between gap-2">
                        <div className="text-sm font-semibold text-slate-900 dark:text-white truncate">{item.name}</div>
                        <span className="text-[10px] font-medium text-slate-400 dark:text-slate-500 whitespace-nowrap">{cat.label}</span>
                      </div>
                      <div className="text-[11px] text-slate-500 dark:text-slate-400 leading-snug mt-1 line-clamp-2">{item.description}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          );
        })}

        <div className="mt-14 grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6">
            <div className="w-10 h-10 rounded-lg bg-teal-100 dark:bg-teal-900/40 text-teal-600 dark:text-teal-400 flex items-center justify-center mb-3">
              <Zap size={18} />
            </div>
            <h3 className="font-bold text-slate-900 dark:text-white mb-2">{t('landing.integrationsPage.cta1Title', "Don't see your tool?")}</h3>
            <p className="text-sm text-slate-600 dark:text-slate-400 mb-4">{t('landing.integrationsPage.cta1Sub', "We build new connectors at no extra cost. Tell us what you use and we'll wire it up.")}</p>
            <Link href="/contact" className="inline-flex items-center gap-1.5 text-sm font-semibold text-teal-600 dark:text-teal-400">
              {t('landing.integrationsPage.cta1Link', 'Request an integration')} <ArrowRight size={14} />
            </Link>
          </div>
          <div className="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6">
            <div className="w-10 h-10 rounded-lg bg-orange-100 dark:bg-orange-900/40 text-orange-600 dark:text-orange-400 flex items-center justify-center mb-3">
              <ShieldCheck size={18} />
            </div>
            <h3 className="font-bold text-slate-900 dark:text-white mb-2">{t('landing.integrationsPage.cta2Title', 'Enterprise-grade reliability')}</h3>
            <p className="text-sm text-slate-600 dark:text-slate-400 mb-4">{t('landing.integrationsPage.cta2Sub', 'OAuth, webhooks, retries, and idempotent syncs — built for production restaurants.')}</p>
            <Link href="/security" className="inline-flex items-center gap-1.5 text-sm font-semibold text-orange-600 dark:text-orange-400">
              {t('landing.integrationsPage.cta2Link', 'Read our security docs')} <ArrowRight size={14} />
            </Link>
          </div>
        </div>
      </section>
    </div>
  );
}