import React from 'react';
import Layout from "../components/layout";
import FeedbackForm from "../components/reports/FeedbackForm";
import { useTranslations } from 'next-intl';

const ContactsPage = () => {
    const t = useTranslations('common');
    return (
        <Layout>
            <div className="mx-auto my-8 p-6 max-w-4xl bg-white rounded-lg shadow-md">
                <h1 className="text-2xl font-bold text-gray-800 mb-4">{t('appNameLong') - t('contacts')}</h1>
                <ul className="list-disc pl-5">
                    <li className="text-gray-700 mb-2">Янко Ванчев - <a href="tel:+359878224467" className="text-blue-500 hover:text-blue-600">+359 878 22 44 67</a></li>
                    <li className="text-gray-700">Крейг Смит - <a href="tel:+359878994573" className="text-blue-500 hover:text-blue-600">+359 878 994 573</a></li>
                </ul>
                <div className="text-gray-700 pl-4 py-5">Електронна поща:  <a href="mailto:specialnosvidetelstvanesofia@gmail.com" className="text-blue-500 hover:text-blue-600">specialnosvidetelstvanesofia@gmail.com</a></div>

                {/* <div className="mt-6">
                    <h3 className="text-lg font-semibold text-gray-800 mb-3">Социални мрежи</h3>
                    <div className="flex space-x-4">
                        <a href="#" className="text-blue-500 hover:text-blue-600">
                            <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M24 4.557a9.83 9.83 0 0 1-2.828.775 4.932 4.932 0 0 0 2.165-2.723c-.951.564-2.005.974-3.127 1.195a4.916 4.916 0 0 0-8.384 4.482C7.69 7.88 4.067 5.794 1.64 2.905a4.822 4.822 0 0 0-.666 2.475c0 1.706.869 3.213 2.188 4.096a4.904 4.904 0 0 1-2.228-.616v.06a4.923 4.923 0 0 0 3.946 4.827 4.996 4.996 0 0 1-2.212.083 4.937 4.937 0 0 0 4.604 3.417A9.867 9.867 0 0 1 0 19.54a13.995 13.995 0 0 0 7.548 2.209c9.142 0 14.307-7.721 13.995-14.646A9.936 9.936 0 0 0 24 4.557z" /></svg>
                        </a>
                        <a href="#" className="text-blue-500 hover:text-blue-600">
            </a>
        </div>
                </div > */
                }
                {/* <a href="https://t.me/mwHitnessing_bot" className="inline-flex items-center ml-4" target="_blank">
                    <img src="styles/icons/telegram-svgrepo-com.svg" alt="Телеграм" width="32" height="32" className="align-middle" />
                    <span className="align-middle">Телеграм</span>
                </a> */}
            </div >

        </Layout >
    );
};

export default ContactsPage;