import React from 'react';
import { useQuery } from '@tanstack/react-query';
import { getContactUs } from '../api/contact.api';
import LazyImage from '../components/common/LazyImage';
import InstagramIcon from '@mui/icons-material/Instagram';
import FacebookIcon from '@mui/icons-material/Facebook';
import SvgIcon from '@mui/material/SvgIcon';
import { Phone, Mail, ChevronRight } from 'lucide-react';

const XIcon = (props) => (
  <SvgIcon {...props}>
    <path d="M18.3 2H21L13.4 10.5L22 22H15.6L10.7 15.7L5 22H2L9.9 13L2 2H8.5L13.9 8.8L18.3 2Z" />
  </SvgIcon>
);

const ContactUsPage = () => {
  const { data, isLoading } = useQuery({
    queryKey: ['contactUs'],
    queryFn: getContactUs,
  });

  const contact = data || {};

  const socialMedia = [
    {
      name: "Instagram",
      icon: <InstagramIcon fontSize="large" />,
      color: "from-purple-500 to-[#d93f87]",
      url: contact.instagram_url
    },
    {
      name: "Facebook",
      icon: <FacebookIcon fontSize="large" />,
      color: "from-blue-900 to-blue-800",
      url: contact.facebook_url
    },
    {
      name: "X",
      icon: <XIcon fontSize="large" />,
      color: "from-gray-800 to-black",
      url: contact.x_url
    }
  ];

  if (isLoading) {
    return <div className="min-h-screen flex items-center justify-center">Loading...</div>;
  }

  return (
    <div className="min-h-screen my-8">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-2 items-center" style={{ justifyItems: "center" }}>
        <LazyImage 
          src={contact.image} 
          className="" 
          alt="Contact Us"
        />
        
        <div className="max-w-md mx-auto px-4 py-8">
          <div className="text-center mb-8">
            <h2 className="text-2xl font-bold text-[#034E08] mb-3">{contact.title}</h2>
            <p className="text-gray-600 text-sm leading-relaxed">
              {contact.content}
            </p>
          </div>

          <div className="space-y-4 mb-8">
            <a href={`tel:${contact.mobile}`} className="block bg-white rounded-2xl shadow-md hover:shadow-xl transition-shadow p-5 border border-gray-100">
              <div className="flex items-center">
                <div className="w-12 h-12 bg-[#A70710] rounded-xl flex items-center justify-center mr-4 shadow-lg">
                  <Phone className="w-6 h-6 text-white" />
                </div>
                <div className="flex-1">
                  <p className="text-[14px] text-gray-500 mb-1">Call us</p>
                  <p className="text-base font-semibold text-gray-800">{contact.mobile}</p>
                </div>
                <ChevronRight className="w-5 h-5 text-gray-400" />
              </div>
            </a>

            <a href={`mailto:${contact.email}`} className="block bg-white rounded-2xl shadow-md hover:shadow-xl transition-shadow p-5 border border-gray-100">
              <div className="flex items-center">
                <div className="w-12 h-12 bg-[#A70710] rounded-xl flex items-center justify-center mr-4 shadow-lg">
                  <Mail className="w-6 h-6 text-white" />
                </div>
                <div className="flex-1">
                  <p className="text-[14px] text-gray-500 mb-1">Email us</p>
                  <p className="text-base font-semibold text-gray-800">{contact.email}</p>
                </div>
                <ChevronRight className="w-5 h-5 text-gray-400" />
              </div>
            </a>
          </div>

          <div className="mb-8">
            <h3 className="text-lg font-bold text-gray-800 mb-4 text-center">Social Media</h3>
            <div className="flex justify-center gap-4">
              {socialMedia.map((item, index) => (
                item.url && (
                  <a 
                    key={index}
                    href={item.url}
                    target="_blank"
                    rel="noopener noreferrer"
                    className={`w-14 h-14 bg-gradient-to-br ${item.color} rounded-2xl flex items-center justify-center text-white text-2xl shadow-lg hover:scale-110 transition-transform`}
                  >
                    {item.icon}
                  </a>
                )
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ContactUsPage;