import { useState } from 'react';
import contactimg from "../assets/images/contactimg.jpg";
import LazyImage from '../components/common/LazyImage';

import InstagramIcon from '@mui/icons-material/Instagram';
import FacebookIcon from '@mui/icons-material/Facebook';
import TwitterIcon from '@mui/icons-material/Twitter';
import CloseIcon from '@mui/icons-material/Close'; // using as X icon
import SvgIcon from "@mui/material/SvgIcon";

function XIcon(props) {
  return (
    <SvgIcon {...props} viewBox="0 0 24 24">
      <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 socialLinks = [
  { name: "Instagram", icon: <InstagramIcon fontSize="large" />, color: "from-purple-500 to-[#d93f87]", url: "#" },
  { name: "Facebook", icon: <FacebookIcon fontSize="large" />, color: "from-blue-900 to-blue-800", url: "#" },
  { name: "Twitter", icon: <TwitterIcon fontSize="large" />, color: "from-blue-400 to-blue-500", url: "#" },
  { name: "X", icon: <XIcon fontSize="large" />, color: "from-gray-800 to-black", url: "#" },
];

  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={contactimg} className=""/>

 <div className="max-w-md mx-auto px-4 py-8">
        
        {/* Get in touch section */}
        <div className="text-center mb-8">
          <h2 className="text-2xl font-bold text-[#034E08] mb-3">Get in touch</h2>
          <p className="text-gray-600 text-sm leading-relaxed">
            If you have inquiries get in touch with us we'll happy to help you
          </p>
        </div>

        {/* Contact Information Cards */}
        <div className="space-y-4 mb-8">
          {/* Phone Card */}
          <a href="tel:9345656442" 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">
                <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                </svg>
              </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">93456 56442</p>
              </div>
              <svg className="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
              </svg>
            </div>
          </a>

          {/* Email Card */}
          <a href="mailto:ddsmile.03@gmailcom" 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">
                <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                </svg>
              </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">ddsmile.03@gmailcom</p>
              </div>
              <svg className="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
              </svg>
            </div>
          </a>
        </div>

        {/* Social Media Section */}
        <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">
    {socialLinks.map((social, idx) => (
      <a
        key={idx}
        href={social.url}
        className={`w-14 h-14 bg-gradient-to-br ${social.color} rounded-2xl flex items-center justify-center text-white text-2xl shadow-lg hover:scale-110 transition-transform`}
      >
        {social.icon}
      </a>
    ))}
  </div>
</div>


      
      </div>
      </div>
      
    </div>
  );
};

export default ContactUsPage;