import { motion } from "framer-motion";
import { Mail, Phone, ExternalLink } from "lucide-react";

const fadeUp = {
  hidden: { opacity: 0, y: 30 },
  visible: (i: number) => ({
    opacity: 1, y: 0,
    transition: { duration: 0.5, delay: i * 0.1 },
  }),
};

const ContactSection = () => {
  return (
    <section id="contact" className="py-20 md:py-28 bg-hero text-hero-foreground">
      <div className="container mx-auto px-4">
        <motion.div
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: "-100px" }}
          className="max-w-2xl mx-auto text-center"
        >
          <motion.h2 variants={fadeUp} custom={0} className="text-3xl md:text-4xl font-serif mb-4">
            Contact Us
          </motion.h2>
          <motion.p variants={fadeUp} custom={1} className="text-lg text-hero-foreground/80 mb-12">
            If you have any questions, need help with scheduling, or aren't sure what to do next—we're here for you.
          </motion.p>

          <motion.div
            variants={fadeUp}
            custom={2}
            className="grid sm:grid-cols-3 gap-6"
          >
            <a
              href="mailto:contact@mendphysicianservices.com"
              className="flex flex-col items-center gap-3 p-6 rounded-xl bg-hero-foreground/10 hover:bg-hero-foreground/15 transition-colors"
            >
              <Mail className="w-6 h-6 text-coral" />
              <span className="text-sm font-semibold">Email Us</span>
              <span className="text-xs text-hero-foreground/70">contact@mendps.com</span>
            </a>

            <a
              href="tel:9173820243"
              className="flex flex-col items-center gap-3 p-6 rounded-xl bg-hero-foreground/10 hover:bg-hero-foreground/15 transition-colors"
            >
              <Phone className="w-6 h-6 text-coral" />
              <span className="text-sm font-semibold">Call Us</span>
              <span className="text-xs text-hero-foreground/70">(917) 382-0243</span>
            </a>

            <a
              href="https://pp-wfe-102.advancedmd.com/156981/account/logon"
              target="_blank"
              rel="noopener noreferrer"
              className="flex flex-col items-center gap-3 p-6 rounded-xl bg-hero-foreground/10 hover:bg-hero-foreground/15 transition-colors"
            >
              <ExternalLink className="w-6 h-6 text-coral" />
              <span className="text-sm font-semibold">Patient Portal</span>
              <span className="text-xs text-hero-foreground/70">Login Here</span>
            </a>
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
};

export default ContactSection;