/**
 * Partner Landing Page (/partner)
 * 
 * High-converting provider onboarding experience for salons, beauticians,
 * and freelance beauty professionals across the UAE.
 */

import { type Metadata } from 'next';
import { getTranslations } from 'next-intl/server';
import { Footer } from '@/components/layout/Footer';
import { type Locale } from '@/i18n';

interface PartnerPageProps {
  params: Promise<{ locale: Locale }>;
}

export async function generateMetadata({ params }: PartnerPageProps): Promise<Metadata> {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: 'partner' });

  return {
    title: t('metaTitle'),
    description: t('metaDescription'),
    alternates: {
      canonical: `https://shinecode.ae/${locale}/partner`,
      languages: {
        en: `https://shinecode.ae/en/partner`,
        ar: `https://shinecode.ae/ar/partner`,
        'x-default': `https://shinecode.ae/en/partner`,
      },
    },
    openGraph: {
      title: t('metaTitle'),
      description: t('metaDescription'),
      url: `https://shinecode.ae/${locale}/partner`,
      siteName: 'ShineCode',
      images: ['https://shinecode.ae/images/frontend/socialP.webp'],
      type: 'website',
      locale: locale === 'ar' ? 'ar_AE' : 'en_AE',
    },
  };
}

export default async function PartnerPage({ params }: PartnerPageProps) {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: 'partner' });
  const bookingBase = (process.env.NEXT_PUBLIC_BOOKING_URL || 'https://shinecode.ae').replace(/\/+$/, '');
  const providerRegisterUrl = `${bookingBase}/provider/register`;

  const benefits = [
    {
      icon: '💰',
      title: t('benefit1Title'),
      description: t('benefit1Desc'),
    },
    {
      icon: '📅',
      title: t('benefit2Title'),
      description: t('benefit2Desc'),
    },
    {
      icon: '🛡️',
      title: t('benefit3Title'),
      description: t('benefit3Desc'),
    },
    {
      icon: '🚀',
      title: t('benefit4Title'),
      description: t('benefit4Desc'),
    },
  ];

  const steps = [
    {
      number: '01',
      title: t('step1Title'),
      description: t('step1Desc'),
    },
    {
      number: '02',
      title: t('step2Title'),
      description: t('step2Desc'),
    },
    {
      number: '03',
      title: t('step3Title'),
      description: t('step3Desc'),
    },
  ];

  return (
    <div className="min-h-screen bg-background flex flex-col">
      <main id="main-content" className="flex-1">
        {/* Partner Hero */}
        <section className="relative bg-gradient-to-b from-surface via-brand-50/30 to-surface py-16 md:py-24 border-b border-border/80 text-center">
          <div className="container mx-auto px-4 lg:px-8 max-w-4xl">
            <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-brand-100 text-brand-800 text-xs font-bold mb-6 tracking-wide">
              <span>💼</span>
              <span>{t('heroBadge')}</span>
            </div>

            <h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-ink tracking-tight mb-6 leading-tight">
              {t('heroTitle')}
            </h1>

            <p className="text-lg md:text-xl text-muted max-w-2xl mx-auto mb-10 leading-relaxed">
              {t('heroSubtitle')}
            </p>

            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
              <a
                href={providerRegisterUrl}
                className="w-full sm:w-auto px-8 py-4 bg-brand-500 hover:bg-brand-600 active:bg-brand-700 text-white font-bold rounded-full shadow-brand transition-transform active:scale-95 text-base"
              >
                {t('registerCta')}
              </a>
              <a
                href={`/${locale}/contact`}
                className="w-full sm:w-auto px-8 py-4 bg-surface hover:bg-surface-soft text-ink font-semibold rounded-full border border-border transition-colors text-base"
              >
                {t('contactSales')}
              </a>
            </div>
          </div>
        </section>

        {/* Benefits Grid */}
        <section className="py-16 md:py-24 bg-surface-soft/60">
          <div className="container mx-auto px-4 lg:px-8">
            <div className="text-center max-w-2xl mx-auto mb-16">
              <h2 className="text-3xl md:text-4xl font-bold text-ink mb-4">
                Why Top Beauty Professionals Choose ShineCode
              </h2>
              <p className="text-muted text-base">
                Everything you need to manage appointments, reach high-intent clients, and scale your revenue.
              </p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
              {benefits.map((benefit, idx) => (
                <div
                  key={idx}
                  className="p-6 bg-surface rounded-2xl border border-border/80 shadow-card hover:shadow-elevated transition-all duration-200 text-start"
                >
                  <div className="text-3xl mb-4 p-3 bg-brand-50 inline-block rounded-xl">
                    {benefit.icon}
                  </div>
                  <h3 className="text-lg font-bold text-ink mb-2">
                    {benefit.title}
                  </h3>
                  <p className="text-sm text-muted leading-relaxed">
                    {benefit.description}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* How Onboarding Works */}
        <section className="py-16 md:py-24 bg-surface border-t border-border/80">
          <div className="container mx-auto px-4 lg:px-8 max-w-5xl">
            <div className="text-center mb-16">
              <h2 className="text-3xl md:text-4xl font-bold text-ink mb-4">
                Start Accepting Bookings in 3 Easy Steps
              </h2>
              <p className="text-muted">Fast registration and quick onboarding within 24 hours.</p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              {steps.map((step, idx) => (
                <div key={idx} className="relative p-6 bg-surface-soft/40 rounded-2xl border border-border text-start">
                  <span className="text-4xl font-extrabold text-brand-500/20 block mb-2 font-mono">
                    {step.number}
                  </span>
                  <h3 className="text-lg font-bold text-ink mb-2">{step.title}</h3>
                  <p className="text-sm text-muted">{step.description}</p>
                </div>
              ))}
            </div>

            {/* Bottom Call to Action */}
            <div className="mt-16 p-8 md:p-12 bg-gradient-to-r from-brand-600 to-brand-500 text-white rounded-3xl shadow-elevated text-center">
              <h3 className="text-2xl md:text-3xl font-extrabold mb-3">
                Ready to Expand Your Beauty Client Base?
              </h3>
              <p className="text-brand-100 max-w-xl mx-auto mb-8 text-sm md:text-base">
                Join our network of verified salons, beauticians, and massage experts across the UAE.
              </p>
              <a
                href={providerRegisterUrl}
                className="inline-block px-8 py-4 bg-white text-brand-600 hover:bg-brand-50 active:scale-95 font-bold rounded-full shadow-elevated transition-all"
              >
                {t('registerCta')}
              </a>
            </div>
          </div>
        </section>
      </main>

      <Footer locale={locale} />
    </div>
  );
}