import PageLayout from "../components/PageLayout";
import ContactImg from "../assets/Исходники/lobster.jpg";

export default function Contact() {
  return (
    <PageLayout>
      <main className="px-6 md:px-16 grow w-full mb-10 text-white">
        <h1 className="text-2xl md:text-4xl font-medium uppercase md:mt-10 mb-8">
          Контакты
        </h1>

        {/* Контейнер с фоновой картинкой */}
        <div className="relative">
          {/* Фоновая картинка — по центру, под контентом, полупрозрачная */}
          <img
            src={ContactImg}
            alt=""
            className="absolute inset-0 w-full h-full object-cover object-center opacity-30 rounded-md -z-10"
          />

          {/* Контент поверх картинки */}
          <div className="relative flex flex-col gap-10 p-6 md:p-10">
            {/* Блок контактов */}
            <div className="flex flex-col gap-6 ">
              <div>
                <p className="font-medium mb-2">Связаться с нами:</p>
                <p className="text-lg">
                  +7 (800) 900-20-20{" "}
                  <span className="text-white/60 text-sm">с 9:00 до 22:00</span>
                </p>
              </div>
              <div className="flex flex-col gap-1">
                <p>
                  support@fishmarket.com{" "}
                  <span className="text-white/60 text-sm">
                    • если что-то пошло не так
                  </span>
                </p>
                <p>
                  sales@fishmarket.com{" "}
                  <span className="text-white/60 text-sm">
                    • если хотите сотрудничать с FISH FISH
                  </span>
                </p>
              </div>
              <div>
                <p className="font-medium mb-1">Наш адрес:</p>
                <p className="text-white/80">
                  г. Санкт-Петербург, набережная Обводного канала, д. 32
                </p>
              </div>
            </div>

            {/* Карта */}
            <div className="w-full overflow-hidden rounded shadow-md">
              <iframe
                src="https://yandex.ru/map-widget/v1/?um=constructor%3Aaee46827fd51e482587f99245635b92b3d473b8d2aef2b4e36f83ddfaaf77cb9&amp;source=constructor"
                className="w-full h-[300px] md:h-[400px] border-0"
                title="Yandex Map"
              />
            </div>
          </div>
        </div>
      </main>
    </PageLayout>
  );
}
