import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Maintenance — We’ll be back shortly',
  robots: { index: false, follow: false },
};

export default function MaintenancePage() {
  const storeName = process.env.NEXT_PUBLIC_STORE_NAME || 'The shop';
  const supportEmail = process.env.NEXT_PUBLIC_SUPPORT_EMAIL || '';
  const supportPhone = process.env.NEXT_PUBLIC_SUPPORT_PHONE || '';

  return (
    <div className="min-h-[70vh] flex items-center justify-center px-6 py-16">
      <div className="max-w-xl w-full text-center">
        <div className="w-20 h-20 mx-auto mb-6 rounded-full bg-brand-50 text-brand-600 flex items-center justify-center">
          <svg className="w-10 h-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={1.5}
              d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
            />
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
          </svg>
        </div>

        <h1 className="text-3xl sm:text-4xl font-bold text-surface-900 mb-3">
          We’ll be back shortly
        </h1>
        <p className="text-surface-600 text-lg mb-8">
          {storeName} is currently undergoing scheduled maintenance. Thanks for your patience —
          please check back in a little while.
        </p>

        {(supportEmail || supportPhone) && (
          <div className="bg-surface-50 rounded-2xl p-6 text-sm text-surface-700">
            <p className="font-semibold text-surface-900 mb-2">Need help right now?</p>
            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
              {supportPhone && (
                <a href={`tel:${supportPhone.replace(/\s+/g, '')}`} className="hover:text-brand-600">
                  {supportPhone}
                </a>
              )}
              {supportEmail && (
                <a href={`mailto:${supportEmail}`} className="hover:text-brand-600">
                  {supportEmail}
                </a>
              )}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}