'use client';

import React from 'react';

interface PartnerAuthLayoutProps {
  badgeText: string;
  heading: string;
  subheading: string;
  children: React.ReactNode;
  metrics?: Array<{ value: string; label: string }>;
}

export default function PartnerAuthLayout({
  badgeText,
  heading,
  subheading,
  children,
  metrics = [
    { value: '5 Mins', label: 'Quick Onboarding' },
    { value: '24/7', label: 'Partner Support' },
    { value: 'Flexible', label: 'Daily, Weekly & Monthly Payouts' }
  ]
}: PartnerAuthLayoutProps) {
  return (
    <div className="w-full">
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 items-stretch">
        <div className="lg:col-span-6 bg-white border border-slate-200/80 rounded-2xl p-6 sm:p-8 shadow-sm flex flex-col justify-between">
          <div>
            <div className="inline-flex items-center gap-1.5 rounded-full bg-[var(--orange-50)] px-3 py-1 text-xs font-bold text-[var(--primary-brand)] border border-[var(--primary-brand)]/20 mb-3">
              <span className="relative flex h-2 w-2">
                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[var(--primary-brand)] opacity-75"></span>
                <span className="relative inline-flex rounded-full h-2 w-2 bg-[var(--primary-brand)]"></span>
              </span>
              {badgeText}
            </div>
            <h2 className="text-xl sm:text-2xl font-black text-slate-900 tracking-tight">
              {heading}
            </h2>
            <p className="text-xs sm:text-sm text-slate-500 mt-1">
              {subheading}
            </p>
          </div>

          <div className="my-4 sm:my-5">
            {children}
          </div>

          {metrics && metrics.length > 0 && (
            <div className="mt-auto pt-4 border-t border-slate-100 grid grid-cols-3 gap-2 text-center">
              {metrics.map((m, idx) => (
                <div
                  key={idx}
                  className={`p-2 ${idx === 1 ? 'border-x border-slate-100' : ''}`}
                >
                  <div className="text-base sm:text-lg font-black text-slate-900">{m.value}</div>
                  <div className="text-[10px] sm:text-[11px] font-medium text-slate-500 leading-tight">{m.label}</div>
                </div>
              ))}
            </div>
          )}
        </div>

        <div className="lg:col-span-6 flex flex-col justify-between space-y-4">
          <div className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-slate-900 via-slate-800 to-slate-950 p-6 sm:p-8 text-white shadow-md flex-1 flex flex-col justify-center">
            <div className="absolute -right-10 -bottom-10 h-44 w-44 rounded-full bg-[var(--primary-brand)]/20 blur-3xl"></div>
            <div className="relative z-10">
              <div className="inline-flex items-center gap-2 rounded-full bg-[var(--primary-brand)]/20 border border-[var(--primary-brand)]/30 px-3 py-1 text-xs font-semibold text-[var(--orange-300)] mb-4">
                🎉 Partner Benefits
              </div>
              <h3 className="text-xl sm:text-2xl font-black leading-tight tracking-tight">
                Partner with ReadyEats &amp; <span className="text-[var(--orange-300)]">Transform Your Business</span>
              </h3>
              <p className="mt-2 text-xs sm:text-sm text-slate-300 leading-relaxed">
                Join thousands of restaurants, home chefs &amp; caterers delivering delicious food across the city.
              </p>
            </div>
          </div>

          <div className="grid grid-cols-2 gap-3">
            <div className="rounded-xl border border-slate-200/80 bg-white p-4 shadow-2xs">
              <div className="h-9 w-9 rounded-lg bg-[var(--primary-brand)]/10 text-[var(--primary-brand)] flex items-center justify-center font-bold mb-2 text-base">
                🚀
              </div>
              <h4 className="text-xs font-bold text-slate-900">Massive Reach</h4>
              <p className="text-[11px] text-slate-500 mt-0.5">Get orders from thousands of foodies daily.</p>
            </div>

            <div className="rounded-xl border border-slate-200/80 bg-white p-4 shadow-2xs">
              <div className="h-9 w-9 rounded-lg bg-green-100 text-green-600 flex items-center justify-center font-bold mb-2 text-base">
                💳
              </div>
              <h4 className="text-xs font-bold text-slate-900">Fast Settlements</h4>
              <p className="text-[11px] text-slate-500 mt-0.5">Direct transfers to your bank hassle-free.</p>
            </div>

            <div className="rounded-xl border border-slate-200/80 bg-white p-4 shadow-2xs">
              <div className="h-9 w-9 rounded-lg bg-blue-100 text-blue-600 flex items-center justify-center font-bold mb-2 text-base">
                🛵
              </div>
              <h4 className="text-xs font-bold text-slate-900">Rider Support</h4>
              <p className="text-[11px] text-slate-500 mt-0.5">Dedicated delivery fleet for fast dispatch.</p>
            </div>

            <div className="rounded-xl border border-slate-200/80 bg-white p-4 shadow-2xs">
              <div className="h-9 w-9 rounded-lg bg-purple-100 text-purple-600 flex items-center justify-center font-bold mb-2 text-base">
                📊
              </div>
              <h4 className="text-xs font-bold text-slate-900">Live Dashboard</h4>
              <p className="text-[11px] text-slate-500 mt-0.5">Track sales, orders and menu live.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}