import React from 'react';
import Link from 'next/link';
import { ObfuscatedMailto } from '@/components/ui/ObfuscatedMailto';
import { Metadata } from 'next';

export const metadata: Metadata = {
    title: 'Contact Us | QR Master Support & Inquiries',
    description: 'Get in touch with QR Master support for technical help, billing questions, or partnership inquiries. We are here to help you scale your QR campaigns.',
    openGraph: {
        title: 'Contact QR Master | Support & Team',
        description: 'Need help with your QR codes? Reach out to our support team for assistance with dynamic codes, analytics, and more.',
        url: 'https://www.qrmaster.net/contact',
        type: 'website',
        images: ['/og-image.png'],
    },
};

export default function ContactPage() {
    return (
        <div className="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
            <div className="max-w-3xl mx-auto bg-white shadow overflow-hidden sm:rounded-lg">
                <div className="px-4 py-5 sm:px-6">
                    <h1 className="text-3xl font-bold leading-6 text-gray-900">
                        Contact Us
                    </h1>
                    <p className="mt-1 max-w-2xl text-sm text-gray-500">
                        We are here to help.
                    </p>
                </div>
                <div className="border-t border-gray-200">
                    <div className="px-4 py-5 sm:p-6 space-y-6">

                        {/* Email Section */}
                        <div>
                            <h3 className="text-lg leading-6 font-medium text-gray-900">
                                Email Support
                            </h3>
                            <div className="mt-2 text-base text-gray-500">
                                <p>For any inquiries, please email us at:</p>
                                <div className="mt-1 text-primary-600 font-medium">
                                    <ObfuscatedMailto email="support@qrmaster.net" />
                                </div>
                            </div>
                        </div>

                        {/* Address Section */}
                        <div>
                            <h3 className="text-lg leading-6 font-medium text-gray-900">
                                Business Address
                            </h3>
                            <div className="mt-2 text-base text-gray-500">
                                <p>1001 Blucher Street</p>
                                <p>Corpus Christi, Texas</p>
                            </div>
                        </div>

                        {/* Hours Section */}
                        <div>
                            <h3 className="text-lg leading-6 font-medium text-gray-900">
                                Support Hours
                            </h3>
                            <p className="mt-2 text-base text-gray-500">
                                Monday - Friday, 9:00 AM - 5:00 PM CET
                            </p>
                        </div>

                        {/* Useful Links */}
                        <div className="pt-4 border-t border-gray-200">
                            <h3 className="text-lg leading-6 font-medium text-gray-900 mb-4">
                                Useful Links
                            </h3>
                            <ul className="space-y-3">
                                <li>
                                    <Link href="/faq" className="text-primary-600 hover:text-primary-500">
                                        Check our FAQ first &rarr;
                                    </Link>
                                </li>
                                <li>
                                    <Link href="/" className="text-primary-600 hover:text-primary-500">
                                        Back to Home &rarr;
                                    </Link>
                                </li>
                            </ul>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    );
}
