"use client";
import { useTranslations } from "use-intl";
import ContactForm from "./ContactForm";
import { useSelector } from "react-redux";
import { RootState } from "@/store/store";

export default function Contact() {
  const t = useTranslations();
  const setting = useSelector(
    (state: RootState) => state.SettingsConfig.allSettings,
  );
  return (
    <div className="container max-w-4xl">
      <div className="text-center mb-12">
        <h1 className="text-3xl md:text-4xl text-primary mb-4">
          {t("Text.contact_title")}
        </h1>
        <p className="text-text-secondary max-w-2xl mx-auto">
          {t("Text.contact_description")}
        </p>
      </div>
      <ContactForm />
      <div className="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
        <div className="border border-gray-200 rounded-2xl shadow-md shadow-black/10 bg-white  p-6 text-center">
          <div className="w-12 h-12 bg-gradient-to-br from-primary to-secondary rounded-full flex items-center justify-center mx-auto mb-4">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="lucide lucide-map-pin text-white"
            >
              <path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path>
              <circle cx="12" cy="10" r="3"></circle>
            </svg>
          </div>
          <h3 className="text-lg mb-2">{t("LABELS.address")}</h3>
          <p className="text-sm text-text-secondary">
            {setting?.location}
          </p>
        </div>
        <div className="border border-gray-200 rounded-2xl shadow-md shadow-black/10 bg-white  p-6 text-center">
          <div className="w-12 h-12 bg-gradient-to-br from-primary to-secondary rounded-full flex items-center justify-center mx-auto mb-4">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="lucide lucide-map-pin text-white"
            >
              <path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path>
              <circle cx="12" cy="10" r="3"></circle>
            </svg>
          </div>
          <h3 className="text-lg mb-2">{t("LABELS.phone")}</h3>
          <p className="text-sm text-text-secondary" dir="ltr">
            {setting?.phone}
          </p>
        </div>
        <div className="border border-gray-200 rounded-2xl shadow-md shadow-black/10 bg-white  p-6 text-center">
          <div className="w-12 h-12 bg-gradient-to-br from-primary to-secondary rounded-full flex items-center justify-center mx-auto mb-4">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="lucide lucide-message-square text-white"
            >
              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
            </svg>
          </div>
          <h3 className="text-lg mb-2">{t("LABELS.email")}</h3>
          <p className="text-sm text-text-secondary" dir="ltr">
            {setting?.email}
          </p>
        </div>
      </div>
    </div>
  );
}