import React, { useEffect } from "react";
import { motion } from "framer-motion";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import { Button } from "@/components/ui/button";
import { Phone, Mail, MapPin, Clock, CheckCircle, ExternalLink, MessageCircle, Navigation } from "lucide-react";
import ContactForm from "@/components/ContactForm";
import SEOHead from "@/components/SEOHead";
import CinematicBackdrop from "@/components/CinematicBackdrop";

const PHONE_NUMBER = "+918595691335";
const PHONE_DISPLAY = "+91 85956 91335";
const WHATSAPP_NUMBER = "918595691335";
const WHATSAPP_PREFILL = encodeURIComponent(
  "Hi FTFX team! 👋 I'd like to know more about your IT support services. Please assist."
);
const GEO = { lat: 28.4929998, lng: 77.0108809 };
const PLACE_NAME = "FTFX TECH SOLUTIONS (OPC) PRIVATE LIMITED";

const getDirectionsUrl = () => {
  const ua = typeof navigator !== "undefined" ? navigator.userAgent : "";
  const isIOS = /iPhone|iPad|iPod/i.test(ua);
  if (isIOS) {
    return `maps://?daddr=${GEO.lat},${GEO.lng}&dirflg=d`;
  }
  return `https://www.google.com/maps/dir/?api=1&destination=${GEO.lat},${GEO.lng}&travelmode=driving`;
};

const localBusinessSchema = {
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "@id": "https://ftfxtechsolutions.com/#localbusiness",
  name: PLACE_NAME,
  alternateName: "FTFX Tech Solutions",
  description:
    "Professional IT support, cybersecurity, website, and AI services for home and business clients in India.",
  url: "https://ftfxtechsolutions.com/contact-us",
  telephone: PHONE_NUMBER,
  email: "support@ftfxtechsolutions.com",
  image: "https://ftfxtechsolutions.com/og-image.jpg",
  priceRange: "₹₹",
  address: {
    "@type": "PostalAddress",
    streetAddress: "Gurgaon",
    addressLocality: "Gurgaon",
    addressRegion: "Haryana",
    postalCode: "122001",
    addressCountry: "IN",
  },
  geo: {
    "@type": "GeoCoordinates",
    latitude: GEO.lat,
    longitude: GEO.lng,
  },
  hasMap: `https://www.google.com/maps/place/FTFX+TECH+SOLUTIONS+(OPC)+PRIVATE+LIMITED/@${GEO.lat},${GEO.lng},17z`,
  openingHoursSpecification: [
    {
      "@type": "OpeningHoursSpecification",
      dayOfWeek: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
      opens: "08:00",
      closes: "18:00",
    },
  ],
  contactPoint: [
    {
      "@type": "ContactPoint",
      telephone: PHONE_NUMBER,
      contactType: "customer support",
      areaServed: "IN",
      availableLanguage: ["English", "Hindi"],
    },
  ],
};

const ContactUs = () => {
  useEffect(() => {
    window.scrollTo(0, 0);
  }, []);

  return (
    <div className="min-h-screen bg-background text-foreground relative">
      <CinematicBackdrop />
      <SEOHead
        title="Contact Us | IT Support Gurgaon | FTFX Tech"
        description="Get expert IT support, computer repair & cybersecurity. FTFX Tech Solutions — 24/7 assistance with fast response across India."
        keywords="contact tech support, IT help, computer support, tech solutions contact, 24/7 IT support"
        canonicalUrl="/contact-us"
        ogType="website"
      />
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(localBusinessSchema) }}
      />

      <Navbar />

      <main className="relative z-10">
        {/* Hero Section */}
        <section className="pt-32 pb-16 px-4">
          <div className="container mx-auto max-w-6xl">
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8 }}
              className="text-center"
            >
              <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
                Contact <span className="bg-gradient-to-r from-primary via-primary/80 to-primary bg-clip-text text-transparent">Us</span>
              </h1>
              <p className="text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto">
                Get in touch with our team for support, inquiries, or to schedule a consultation.
              </p>
            </motion.div>
          </div>
        </section>

        {/* Contact Form Section */}
        <section className="py-12 px-4">
          <div className="container mx-auto max-w-6xl">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
              {/* Contact Information */}
              <motion.div
                initial={{ opacity: 0, x: -30 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.8 }}
              >
                <h2 className="text-3xl font-bold mb-6 text-foreground">
                  Get in <span className="text-primary">Touch</span>
                </h2>
                <p className="text-muted-foreground mb-8">
                  We're here to help with all your technology needs. Reach out to us using any of the contact methods 
                  below, or fill out the form and we'll get back to you as soon as possible.
                </p>
                
                <div className="space-y-4 mb-6">
                  <ContactItem
                    icon={<Phone className="h-5 w-5" />}
                    title="Call Us"
                    content={PHONE_DISPLAY}
                    link={`tel:${PHONE_NUMBER}`}
                  />
                  <ContactItem
                    icon={<MessageCircle className="h-5 w-5" />}
                    title="WhatsApp"
                    content="Chat with us instantly"
                    link={`https://wa.me/${WHATSAPP_NUMBER}?text=${WHATSAPP_PREFILL}`}
                  />
                  <ContactItem
                    icon={<Mail className="h-5 w-5" />}
                    title="Email"
                    content="support@ftfxtechsolutions.com"
                    link="mailto:support@ftfxtechsolutions.com"
                  />
                  <ContactItem
                    icon={<MapPin className="h-5 w-5" />}
                    title="Address"
                    content="Gurgaon, Haryana (122001) India"
                    link={`https://www.google.com/maps/place/${encodeURIComponent(PLACE_NAME)}/@${GEO.lat},${GEO.lng},17z`}
                  />
                  <ContactItem
                    icon={<Clock className="h-5 w-5" />}
                    title="Business Hours"
                    content="Monday - Friday: 8am - 6pm IST"
                  />
                </div>

                {/* Quick action widget */}
                <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 mb-8">
                  <Button
                    asChild
                    className="bg-primary text-primary-foreground hover:bg-primary/90 h-12 font-medium"
                  >
                    <a href={`tel:${PHONE_NUMBER}`} aria-label="Call FTFX Tech Solutions">
                      <Phone className="h-4 w-4 mr-2" />
                      Call Now
                    </a>
                  </Button>
                  <Button
                    asChild
                    className="bg-[#25D366] text-white hover:bg-[#1ebe57] h-12 font-medium"
                  >
                    <a
                      href={`https://wa.me/${WHATSAPP_NUMBER}?text=${WHATSAPP_PREFILL}`}
                      target="_blank"
                      rel="noopener noreferrer"
                      aria-label="Chat on WhatsApp"
                    >
                      <MessageCircle className="h-4 w-4 mr-2" />
                      WhatsApp
                    </a>
                  </Button>
                  <Button
                    asChild
                    variant="outline"
                    className="h-12 font-medium border-white/20 hover:bg-white/10"
                  >
                    <a
                      href={getDirectionsUrl()}
                      target="_blank"
                      rel="noopener noreferrer"
                      aria-label="Get directions to FTFX Tech Solutions"
                    >
                      <Navigation className="h-4 w-4 mr-2" />
                      Directions
                    </a>
                  </Button>
                </div>
                
                <div className="bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl p-6 shadow-[0_8px_32px_hsla(0,0%,0%,0.4)]">
                  <h3 className="text-xl font-bold mb-3 text-foreground">Priority Support</h3>
                  <p className="text-muted-foreground mb-4">
                    For clients with existing support plans, please mention your plan type in your message 
                    for expedited assistance.
                  </p>
                  <p className="flex items-center text-primary">
                    <CheckCircle className="h-5 w-5 mr-2" />
                    <span className="font-medium">Faster response times for plan members</span>
                  </p>
                </div>
              </motion.div>
              
              {/* Contact Form Component */}
              <motion.div
                initial={{ opacity: 0, x: 30 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.8, delay: 0.2 }}
              >
                <ContactForm />
              </motion.div>
            </div>
          </div>
        </section>
        
        {/* FAQ Section */}
        <section className="py-20 px-4">
          <div className="container mx-auto max-w-6xl">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              className="text-center mb-12"
            >
              <h2 className="text-3xl md:text-4xl font-bold mb-4 text-foreground">
                Frequently Asked <span className="text-primary">Questions</span>
              </h2>
              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
                Find quick answers to common questions about our services.
              </p>
            </motion.div>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-5xl mx-auto">
              {[
                { question: "What are your typical response times?", answer: "For clients with support plans, we typically respond within 1-4 hours during business hours. For general inquiries, we aim to respond within 24 business hours." },
                { question: "Do you offer same-day service?", answer: "Yes, for urgent issues we provide same-day remote support for clients with our Priority and Business support plans." },
                { question: "Can you help with both Windows and Mac systems?", answer: "Absolutely! Our technicians are certified in both Windows and Mac systems, as well as mobile devices and various software applications." },
                { question: "How do your support plans work?", answer: "Our support plans provide different levels of service based on your needs, from basic troubleshooting to comprehensive IT management." },
                { question: "Do you offer on-site support?", answer: "We primarily provide remote support, which allows for faster response times. For special cases, we can arrange on-site assistance." },
                { question: "What if I need help outside business hours?", answer: "Clients with our Business and Enterprise plans have access to after-hours emergency support for critical issues." }
              ].map((faq, index) => (
                <FaqItem key={index} question={faq.question} answer={faq.answer} delay={index * 0.1} />
              ))}
            </div>
          </div>
        </section>

        {/* Map & Location Section */}
        <section className="py-20 px-4">
          <div className="container mx-auto max-w-6xl">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
              <motion.div
                initial={{ opacity: 0, x: -30 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.8 }}
              >
                <h2 className="text-3xl md:text-4xl font-bold mb-6 text-foreground">
                  Our <span className="text-primary">Location</span>
                </h2>
                <p className="text-muted-foreground mb-6">
                  While most of our support is provided remotely, our main office is located in Gurgaon, Haryana (122001) India. 
                  We serve clients across India and worldwide.
                </p>
                <div className="bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl p-6 shadow-[0_8px_32px_hsla(0,0%,0%,0.4)]">
                  <h3 className="text-xl font-bold mb-3 text-foreground">Remote Support</h3>
                  <p className="text-muted-foreground mb-4">
                    Our secure remote support allows us to resolve most technical issues without requiring an on-site visit. 
                    This means faster resolution times and more convenience for you.
                  </p>
                  <p className="text-muted-foreground mb-4">
                    For situations that do require hands-on assistance, we can coordinate with local technicians in your area.
                  </p>
                  <div className="p-4 bg-white/5 rounded-xl border border-white/10">
                    <h4 className="font-medium mb-2 text-foreground">Address</h4>
                    <p className="text-muted-foreground">
                      Gurgaon, Haryana (122001) India
                    </p>
                  </div>
                </div>
              </motion.div>
              
              <motion.div
                initial={{ opacity: 0, x: 30 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.8 }}
                className="bg-white/5 backdrop-blur-xl border border-white/10 p-3 rounded-2xl shadow-[0_8px_32px_hsla(0,0%,0%,0.4)] h-[450px] relative"
              >
                <div className="w-full h-full rounded-xl overflow-hidden relative">
                  <iframe
                    title="FTFX Tech Solutions (OPC) Private Limited - Google Maps 3D View"
                    src="https://maps.google.com/maps?q=FTFX+TECH+SOLUTIONS+(OPC)+PRIVATE+LIMITED&ll=28.4929998,77.0108809&z=18&t=k&output=embed"
                    width="100%"
                    height="100%"
                    style={{ border: 0, filter: "grayscale(0.2) contrast(1.05)" }}
                    allowFullScreen
                    loading="lazy"
                    referrerPolicy="no-referrer-when-downgrade"
                    className="w-full h-full"
                  />
                  <div className="absolute bottom-3 left-3 right-3 flex flex-col sm:flex-row gap-2 z-10">
                    <div className="flex-1 bg-background/80 backdrop-blur-xl border border-white/20 rounded-lg px-3 py-2 flex items-center gap-2">
                      <MapPin className="h-4 w-4 text-primary flex-shrink-0" />
                      <div className="min-w-0">
                        <p className="text-xs font-semibold text-foreground truncate">FTFX TECH SOLUTIONS (OPC) PRIVATE LIMITED</p>
                        <p className="text-[10px] text-muted-foreground truncate">Gurgaon, Haryana 122001, India</p>
                      </div>
                    </div>
                    <Button
                      size="sm"
                      className="bg-primary text-primary-foreground hover:bg-primary/90"
                      asChild
                    >
                      <a
                        href={getDirectionsUrl()}
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                        <Navigation className="h-4 w-4 mr-1" />
                        Get Directions
                      </a>
                    </Button>
                  </div>
                </div>
              </motion.div>
            </div>
          </div>
        </section>

        {/* CTA Section */}
        <section className="py-20 px-4">
          <div className="container mx-auto max-w-4xl">
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              className="bg-gradient-to-br from-primary/20 via-white/5 to-accent/10 backdrop-blur-xl border border-white/10 rounded-3xl p-8 md:p-12 text-center shadow-[0_0_60px_hsla(var(--primary),0.15)]"
            >
              <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-6">
                Need Immediate Assistance?
              </h2>
              <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
                Email us at support@ftfxtechsolutions.com for urgent support needs.
              </p>
              <Button 
                className="px-8 py-6 text-lg font-medium bg-primary text-primary-foreground hover:bg-primary/90 transition-all duration-300 hover:shadow-[0_0_30px_hsla(var(--primary),0.4)]"
                asChild
              >
                <a href="mailto:support@ftfxtechsolutions.com">
                  <Mail className="h-5 w-5 mr-2" />
                  Email Now
                </a>
              </Button>
            </motion.div>
          </div>
        </section>
      </main>

      {/* Floating click-to-call & WhatsApp widget — stacked above the LiveChat launcher */}
      <div className="fixed bottom-24 right-4 sm:right-5 z-[10000] flex flex-col gap-3">
        <a
          href={`https://wa.me/${WHATSAPP_NUMBER}?text=${WHATSAPP_PREFILL}`}
          target="_blank"
          rel="noopener noreferrer"
          aria-label="Chat with us on WhatsApp"
          className="w-14 h-14 rounded-full bg-[#25D366] text-white flex items-center justify-center shadow-[0_8px_24px_rgba(37,211,102,0.45)] hover:scale-110 transition-transform"
        >
          <MessageCircle className="h-6 w-6" />
        </a>
        <a
          href={`tel:${PHONE_NUMBER}`}
          aria-label="Call FTFX Tech Solutions"
          className="w-14 h-14 rounded-full bg-primary text-primary-foreground flex items-center justify-center shadow-[0_8px_24px_hsla(var(--primary),0.45)] hover:scale-110 transition-transform"
        >
          <Phone className="h-6 w-6" />
        </a>
      </div>

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

interface ContactItemProps {
  icon: React.ReactNode;
  title: string;
  content: string;
  link?: string;
}

const ContactItem = ({ icon, title, content, link }: ContactItemProps) => (
  <div className="flex items-start gap-4 p-4 bg-white/5 backdrop-blur-xl border border-white/10 rounded-xl hover:bg-white/[0.08] transition-all duration-300">
    <div className="w-10 h-10 bg-primary/20 rounded-lg flex items-center justify-center flex-shrink-0">
      <div className="text-primary">{icon}</div>
    </div>
    <div>
      <h3 className="font-semibold mb-1 text-foreground">{title}</h3>
      {link ? (
        <a 
          href={link} 
          className="text-primary hover:text-primary/80 transition-colors"
          target={link.startsWith('http') ? "_blank" : undefined}
          rel={link.startsWith('http') ? "noopener noreferrer" : undefined}
        >
          {content}
        </a>
      ) : (
        <p className="text-muted-foreground">{content}</p>
      )}
    </div>
  </div>
);

interface FaqItemProps {
  question: string;
  answer: string;
  delay: number;
}

const FaqItem = ({ question, answer, delay }: FaqItemProps) => (
  <motion.div
    initial={{ opacity: 0, y: 20 }}
    whileInView={{ opacity: 1, y: 0 }}
    viewport={{ once: true }}
    transition={{ duration: 0.6, delay }}
    className="bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl p-6 shadow-[0_8px_32px_hsla(0,0%,0%,0.4)] hover:bg-white/[0.08] hover:border-white/20 transition-all duration-300"
  >
    <h3 className="text-lg font-semibold mb-2 text-foreground">{question}</h3>
    <p className="text-muted-foreground">{answer}</p>
  </motion.div>
);

export default ContactUs;