import { useState } from 'react';
import { motion } from 'framer-motion';
import { MessageCircle, Send, Clock, Mail, MapPin, CheckCircle } from 'lucide-react';
import SEO from '../components/SEO';
import SectionTitle from '../components/SectionTitle';
import { useApp } from '../context/AppContext';
import { pageKeywords } from '../data/keywords';
import { OrganizationSchema, LocalBusinessSchema } from '../components/schemas';

export default function Contact() {
  const { t } = useApp();
  const [copied, setCopied] = useState(false);

  const copyNumber = () => {
    navigator.clipboard.writeText('+917035146526');
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  return (
    <>
      <SEO
        title="Contact MFA Tools Net | 24/7 WhatsApp Support & Telegram Support"
        description="Get in touch with MFA Tools Net. WhatsApp Support: +91 70351 46526. Telegram: @mfatool. Fast Response under 10 minutes. DM For Pricing. 24/7 Support available."
        keywords={pageKeywords.contact}
      />
      <OrganizationSchema />
      <LocalBusinessSchema />

      <section className="pt-28 pb-10 lg:pt-32 lg:pb-14">
        <div className="container-main text-center max-w-3xl">
          <SectionTitle
            label="CONTACT"
            title={t('getTouch')}
            subtitle="We're here to help. Reach out anytime — we actually respond fast. Like, embarrassingly fast sometimes."
            centered
          />
        </div>
      </section>

      <section className="pb-16 lg:pb-20">
        <div className="container-main">
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-5">
            {/* WhatsApp Card */}
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5 }}
              className="bg-bg-secondary border border-bg-border rounded-2xl p-6"
            >
              <div className="w-12 h-12 bg-whatsapp/10 rounded-xl flex items-center justify-center mb-4">
                <MessageCircle size={24} className="text-whatsapp" />
              </div>
              <h3 className="text-white font-semibold mb-2">WhatsApp</h3>
              <p className="text-text-secondary text-sm mb-4">Fastest way to reach us. Seriously. We check WhatsApp more than our own texts sometimes. Average response: under 5 minutes.</p>
              <button
                onClick={copyNumber}
                className="text-white font-medium text-sm mb-3 flex items-center gap-2 hover:text-accent-yellow transition-colors"
                aria-label="Copy WhatsApp number"
                aria-live="polite"
              >
                {copied ? <CheckCircle size={16} className="text-success" aria-hidden="true" /> : null}
                {copied ? 'Copied!' : '+91 70351 46526'}
              </button>
              <a
                href="https://wa.me/917035146526?text=Hello%20MFA%20Tools%20Net%2C%20I%20need%20help."
                target="_blank"
                rel="noopener noreferrer"
                className="block w-full text-center bg-whatsapp text-white font-semibold py-3 rounded-xl hover:bg-[#128C7E] transition-colors text-sm"
              >
                {t('chatWhatsApp')}
              </a>
            </motion.div>

            {/* Telegram Card */}
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: 0.1 }}
              className="bg-bg-secondary border border-bg-border rounded-2xl p-6"
            >
              <div className="w-12 h-12 bg-telegram/10 rounded-xl flex items-center justify-center mb-4">
                <Send size={24} className="text-telegram" />
              </div>
              <h3 className="text-white font-semibold mb-2">Telegram</h3>
              <p className="text-text-secondary text-sm mb-4">Join our channel for deals and updates. DM us for support. We love Telegram because it doesn't compress our screenshots.</p>
              <p className="text-white font-medium text-sm mb-4">@mfatool</p>
              <a
                href="https://t.me/mfatools"
                target="_blank"
                rel="noopener noreferrer"
                className="block w-full text-center bg-telegram text-white font-semibold py-3 rounded-xl hover:bg-[#0077B3] transition-colors text-sm"
              >
                {t('messageTelegram')}
              </a>
            </motion.div>

            {/* Email Card */}
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: 0.2 }}
              className="bg-bg-secondary border border-bg-border rounded-2xl p-6"
            >
              <div className="w-12 h-12 bg-info/10 rounded-xl flex items-center justify-center mb-4">
                <Mail size={24} className="text-info" />
              </div>
              <h3 className="text-white font-semibold mb-2">Email</h3>
              <p className="text-text-secondary text-sm mb-4">For business inquiries, partnerships, or if you just prefer email over chat. We check it a few times a day.</p>
              <p className="text-white font-medium text-sm mb-4">mfatoolsnet@gmail.com</p>
              <a
                href="mailto:mfatoolsnet@gmail.com"
                className="block w-full text-center bg-bg-tertiary border border-bg-border text-white font-semibold py-3 rounded-xl hover:bg-bg-border transition-colors text-sm"
              >
                Send Email
              </a>
            </motion.div>
          </div>

          {/* Business Info */}
          <div className="mt-10 bg-bg-secondary border border-bg-border rounded-2xl p-6 lg:p-8">
            <h3 className="text-white font-semibold mb-4">Business Information</h3>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
              <div className="flex items-center gap-2 text-text-secondary">
                <MapPin size={16} className="text-text-tertiary" />
                <span>India (Serving customers worldwide)</span>
              </div>
              <div className="flex items-center gap-2 text-text-secondary">
                <Clock size={16} className="text-text-tertiary" />
                <span>24/7 Global Support</span>
              </div>
              <div className="flex items-center gap-2 text-text-secondary">
                <MessageCircle size={16} className="text-text-tertiary" />
                <span>WhatsApp: +91 70351 46526</span>
              </div>
              <div className="flex items-center gap-2 text-text-secondary">
                <Send size={16} className="text-text-tertiary" />
                <span>Telegram: @mfatool</span>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}