"use client";
import { Container } from "@/components/container";
import { Button } from "@/components/ui/button";
import { motion } from "framer-motion";
import { Phone, MessageCircle, Globe } from "lucide-react";

export function Contact() {
  const handleCall = () => {
    window.location.href = 'tel:+8801334935472';
  };

  const handleWhatsApp = () => {
    window.open('https://wa.me/8801334935472', '_blank');
  };

  const handleWebsite = () => {
    window.open('https://www.enamgroup.com', '_blank');
  };

  return (
    <section id="contact" className="py-20 bg-white">
      <Container>
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
          className="max-w-4xl mx-auto"
        >
          {/* Section Header */}
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-5xl font-bold text-[#7A1F2B] mb-4">
              যোগাযোগ করুন
            </h2>
            <h3 className="text-2xl md:text-3xl font-semibold text-neutral-700 mb-4">
              Contact Us
            </h3>
            <p className="text-neutral-600">
              আমরা আপনার সেবায় সর্বদা প্রস্তুত • We're here to help you
            </p>
          </div>
          
          {/* Contact Card */}
          <div className="bg-gradient-to-br from-[#7A1F2B] to-[#5a1620] rounded-3xl p-8 md:p-12 shadow-2xl">
            <div className="text-center mb-8">
              <div className="inline-flex items-center justify-center w-20 h-20 bg-white/20 rounded-full mb-6">
                <Phone className="w-10 h-10 text-white" />
              </div>
              <h4 className="text-2xl md:text-3xl font-bold text-white mb-2">
                ফোন / হোয়াটসঅ্যাপ
              </h4>
              <p className="text-white/80 mb-4">Phone / WhatsApp</p>
              <a 
                href="tel:+8801334935472"
                className="text-3xl md:text-4xl font-bold text-white hover:text-white/90 transition-colors"
              >
                +880 1334 935 472
              </a>
            </div>
            
            {/* Action Buttons */}
            <div className="grid md:grid-cols-3 gap-4 mt-8">
              <Button
                size="lg"
                onClick={handleCall}
                className="bg-white text-[#7A1F2B] hover:bg-white/90 font-semibold py-6"
              >
                <Phone className="mr-2 h-5 w-5" />
                Call Now
              </Button>
              
              <Button
                size="lg"
                onClick={handleWhatsApp}
                className="bg-[#25D366] text-white hover:bg-[#20BA5A] font-semibold py-6"
              >
                <MessageCircle className="mr-2 h-5 w-5" />
                WhatsApp Us
              </Button>
              
              <Button
                size="lg"
                onClick={handleWebsite}
                variant="outline"
                className="bg-transparent border-2 border-white text-white hover:bg-white hover:text-[#7A1F2B] font-semibold py-6"
              >
                <Globe className="mr-2 h-5 w-5" />
                Visit Website
              </Button>
            </div>
            
            {/* Website Info */}
            <div className="text-center mt-8 pt-8 border-t border-white/20">
              <p className="text-white/80 mb-2">ওয়েবসাইট • Website</p>
              <a 
                href="https://www.enamgroup.com"
                target="_blank"
                rel="noopener noreferrer"
                className="text-xl font-semibold text-white hover:text-white/90 transition-colors"
              >
                www.enamgroup.com
              </a>
            </div>
          </div>
        </motion.div>
      </Container>
    </section>
  );
}