import Link from 'next/link';
import InternalPageTemplate from '@/components/InternalPageTemplate';

export default function ContactFailurePage() {
  return (
    <InternalPageTemplate>
      <div className="flex flex-col items-center justify-center text-center py-24 max-w-md mx-auto">
        {/* Icon */}
        <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-6">
          <svg className="w-8 h-8 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
          </svg>
        </div>

        <h1 className="text-2xl font-bold text-gray-900 mb-3">Something went wrong</h1>
        <p className="text-gray-500 text-sm leading-relaxed mb-2">
          We couldn't send your message. This may be a temporary issue — please try again or reach us directly.
        </p>
        <p className="text-gray-400 text-xs mb-8">
          You can also email us at{' '}
          <a href="mailto:info@cahootravel.com" className="text-brand-purple hover:underline">
            info@cahootravel.com
          </a>
        </p>

        <div className="flex flex-col sm:flex-row gap-3">
          <Link
            href="/contact"
            className="bg-brand-purple hover:bg-purple-700 text-white text-sm font-medium px-6 py-2.5 rounded-lg transition-colors"
          >
            Try again
          </Link>
          <a
            href="mailto:info@cahootravel.com"
            className="border border-gray-200 text-gray-600 hover:text-gray-900 hover:border-gray-300 text-sm font-medium px-6 py-2.5 rounded-lg transition-colors"
          >
            Email us directly
          </a>
        </div>
      </div>
    </InternalPageTemplate>
  );
}