"use client";

import Link from 'next/link';

export default function ContactsPage() {
  return (
    <div className="min-h-screen bg-[#F3F4F6] text-gray-900 antialiased py-8 px-4">
      <div className="max-w-[550px] mx-auto bg-white rounded-[32px] shadow-sm overflow-hidden p-8 md:p-12">
        
        {/* ЗАГОЛОВОК */}
        <div className="mb-10 text-center">
          <h1 className="text-2xl font-black uppercase tracking-tight">Контактная информация</h1>
          <div className="h-1 w-12 bg-gray-200 mx-auto mt-4"></div>
        </div>

        <div className="space-y-8 text-[15px] leading-relaxed text-gray-600">
          
          {/* ЮРИДИЧЕСКОЕ ЛИЦО */}
          <section>
            <h2 className="font-bold text-gray-900 text-lg mb-4 text-center">Юридическое лицо</h2>
            <div className="space-y-4 border-y border-gray-50 py-6">
              <div className="flex justify-between border-b border-gray-50 pb-2">
                <span className="text-gray-400">Наименование:</span>
                <span className="font-semibold text-gray-800 text-right">ООО «Вэллвэй Солюшнс»</span>
              </div>
              <div className="flex justify-between border-b border-gray-50 pb-2">
                <span className="text-gray-400">УНП:</span>
                <span className="font-semibold text-gray-800">291839005</span>
              </div>
              <div className="flex flex-col gap-1">
                <span className="text-gray-400">Адрес:</span>
                <span className="font-semibold text-gray-800 leading-tight">
                  225750, Брестская область, Пинский р-н, д.Галево, ул. Пинская, 7-1, Республика Беларусь
                </span>
              </div>
              <div className="flex justify-between border-b border-gray-50 pb-2">
                <span className="text-gray-400">Режим работы:</span>
                <span className="font-semibold text-gray-800">Пн-Пт 9:00-18:00</span>
              </div>
            </div>
          </section>

          {/* ОБРАТНАЯ СВЯЗЬ */}
          <section>
            <h2 className="font-bold text-gray-900 text-lg mb-4 text-center">Обратная связь</h2>
            <div className="space-y-3">
              <a href="mailto:wellway1982@gmail.com" className="flex items-center gap-3 p-4 rounded-2xl bg-gray-50 hover:bg-gray-100 transition-colors">
                <div className="w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-sm text-gray-400">
                  @
                </div>
                <div>
                  <p className="text-[12px] uppercase tracking-wider text-gray-400 font-bold">E-mail</p>
                  <p className="text-gray-800 font-semibold">wellway1982@gmail.com</p>
                </div>
              </a>
              
              <a href="tel:+375298043417" className="flex items-center gap-3 p-4 rounded-2xl bg-gray-50 hover:bg-gray-100 transition-colors">
                <div className="w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-sm text-gray-400">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
                  </svg>
                </div>
                <div>
                  <p className="text-[12px] uppercase tracking-wider text-gray-400 font-bold">Телефон</p>
                  <p className="text-gray-800 font-semibold">+375 (29) 804 34 17</p>
                </div>
              </a>
            </div>
          </section>

          {/* ЛОГОТИПЫ ПЛАТЕЖНЫХ СИСТЕМ */}
          <section>
            <h2 className="font-bold text-gray-900 text-lg mb-4 text-center">Принимаем к оплате</h2>
            <div className="flex justify-center items-center gap-4 py-4">
              <img 
                src="/images/line-gray.png" 
                alt="VISA, Mastercard, Белкарт, WebPay"
                className="h-8 w-auto object-contain grayscale opacity-60 hover:opacity-100 transition-opacity"
              />
            </div>
          </section>

          {/* ССЫЛКИ НА ДРУГИЕ СТРАНИЦЫ */}
          <section>
            <h2 className="font-bold text-gray-900 text-lg mb-4 text-center">Дополнительная информация</h2>
            <div className="space-y-2">
              <Link href="/terms" className="block p-4 rounded-2xl bg-purple-50 hover:bg-purple-100 transition-colors text-center">
                <span className="text-purple-700 font-semibold">📄 Соглашение (оплата, возврат, отмена)</span>
              </Link>
              <Link href="/privacy" className="block p-4 rounded-2xl bg-gray-50 hover:bg-gray-100 transition-colors text-center">
                <span className="text-gray-700 font-semibold">🔒 Политика конфиденциальности</span>
              </Link>
            </div>
          </section>

        </div>

        {/* КНОПКА НАЗАД */}
        <div className="mt-12 pt-8 border-t border-gray-100 flex justify-center">
          <Link href="/" className="flex items-center gap-2 text-gray-400 hover:text-gray-900 font-bold uppercase text-xs tracking-[0.1em] transition-colors">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
              <path d="M19 12H5M12 19l-7-7 7-7"/>
            </svg>
            Вернуться на главную
          </Link>
        </div>

      </div>
    </div>
  );
}