import React, { useEffect } from 'react';
import { motion } from 'framer-motion';

import SEO from '../../components/SEO';
import { useContactForm } from '../hooks/useContactForm';

const ContactPage: React.FC = () => {
    const { errorMessage, hasError, isSubmitted, isSubmitting, resetFeedback, submitContactForm } = useContactForm();

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

    const faqs = [
        { q: 'How quickly can you start?', a: 'Most assessments can begin within 48 hours of contact. Emergency support is available 24/7.' },
        { q: 'How do you price services?', a: 'Transparent monthly pricing based on devices and services needed. No hidden fees or surprise charges.' },
        { q: 'What\'s included in support?', a: '24/7 monitoring, helpdesk, proactive maintenance, security updates, and SLA guarantees.' },
    ];

    return (
        <>
        <SEO
            title="Contact Bay Area IT | Free IT Assessment in Corpus Christi"
            description="Talk to Bay Area IT about managed IT support, help desk coverage, business email, networking, and technology support across Corpus Christi and the Coastal Bend."
            keywords={['contact Bay Area IT', 'Corpus Christi IT consultation', 'managed IT assessment']}
            canonicalUrl="https://bayareait.services/contact"
        />
        <div className="pt-20 min-h-screen bg-background-light dark:bg-background-dark relative overflow-x-hidden">
            <div className="absolute top-0 left-0 right-0 h-[800px] bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(0,0,0,0.2),rgba(0,0,0,0))] dark:bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(255,255,255,0.25),rgba(255,255,255,0))] pointer-events-none" />
            <div className="absolute bottom-0 right-0 w-[500px] h-[500px] bg-gray-100/50 dark:bg-white/5 rounded-full blur-[100px] pointer-events-none" />
            {/* Hero */}
            <section className="py-20 px-6 text-center border-b border-white/5 relative z-10">
                <h1 className="font-display text-4xl md:text-5xl font-bold mb-6 text-white">
                    Let&apos;s talk about <br /><span className="text-gray-500">your IT needs</span>
                </h1>
                <p className="text-xl text-gray-400 max-w-2xl mx-auto">
                    Ready to improve your technology? We&apos;re here to help. Get started with a free consultation and see how we can make your IT work better for you.
                </p>
            </section>

            <section className="py-24 px-6 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(0,0,0,0.05),rgba(0,0,0,0))] dark:bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(255,255,255,0.05),rgba(255,255,255,0))]">
                <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-16">

                    {/* Left: Contact Form */}
                    <motion.div
                        initial={{ opacity: 0, x: -20 }}
                        animate={{ opacity: 1, x: 0 }}
                        className="bg-white/5 backdrop-blur-sm p-8 md:p-10 rounded-3xl shadow-xl border border-white/10"
                    >
                        <h3 className="text-2xl font-bold mb-8 text-white">Send us a message</h3>
                        <form className="space-y-6" onChange={resetFeedback} onSubmit={submitContactForm}>
                            <input type="text" name="website" tabIndex={-1} autoComplete="off" className="hidden" aria-hidden="true" />
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label htmlFor="name" className="block text-sm font-medium text-gray-300 mb-2">Name *</label>
                                    <input type="text" id="name" name="name" required className="w-full px-4 py-3 rounded-xl bg-black/20 border border-white/10 focus:border-white/30 focus:ring-1 focus:ring-white/30 outline-none transition-all text-white placeholder-gray-600" placeholder="John Doe" />
                                </div>
                                <div>
                                    <label htmlFor="phone" className="block text-sm font-medium text-gray-300 mb-2">Phone</label>
                                    <input type="tel" id="phone" name="phone" className="w-full px-4 py-3 rounded-xl bg-black/20 border border-white/10 focus:border-white/30 focus:ring-1 focus:ring-white/30 outline-none transition-all text-white placeholder-gray-600" placeholder="(555) 000-0000" />
                                </div>
                            </div>
                            <div>
                                <label htmlFor="email" className="block text-sm font-medium text-gray-300 mb-2">Email *</label>
                                <input type="email" id="email" name="email" required className="w-full px-4 py-3 rounded-xl bg-black/20 border border-white/10 focus:border-white/30 focus:ring-1 focus:ring-white/30 outline-none transition-all text-white placeholder-gray-600" placeholder="john@company.com" />
                            </div>
                            <div>
                                <label htmlFor="company" className="block text-sm font-medium text-gray-300 mb-2">Company</label>
                                <input type="text" id="company" name="company" className="w-full px-4 py-3 rounded-xl bg-black/20 border border-white/10 focus:border-white/30 focus:ring-1 focus:ring-white/30 outline-none transition-all text-white placeholder-gray-600" placeholder="Acme Inc." />
                            </div>
                            <div>
                                <label htmlFor="message" className="block text-sm font-medium text-gray-300 mb-2">Message *</label>
                                <textarea id="message" name="message" rows={4} required className="w-full px-4 py-3 rounded-xl bg-black/20 border border-white/10 focus:border-white/30 focus:ring-1 focus:ring-white/30 outline-none transition-all text-white placeholder-gray-600 resize-none" placeholder="How can we help you?"></textarea>
                            </div>
                            <button type="submit" disabled={isSubmitting} className="selection-inverse w-full py-4 bg-white text-black font-bold rounded-xl transition-all hover:bg-gray-200 hover:scale-[1.02] shadow-[0_0_20px_rgba(255,255,255,0.1)] disabled:cursor-not-allowed disabled:opacity-70 disabled:hover:scale-100">
                                {isSubmitting ? 'Sending...' : 'Send Message'}
                            </button>
                            {isSubmitted && (
                                <p className="text-sm text-gray-400">
                                    Thanks. Your message was sent successfully. If you need immediate help, email us at info@bayareaaffiliates.com.
                                </p>
                            )}
                            {hasError && (
                                <p className="text-sm text-red-300">
                                    {errorMessage}
                                </p>
                            )}
                        </form>
                    </motion.div>

                    {/* Right: FAQ & Info */}
                    <motion.div
                        initial={{ opacity: 0, x: 20 }}
                        animate={{ opacity: 1, x: 0 }}
                        transition={{ delay: 0.2 }}
                        className="space-y-12"
                    >
                        {/* Contact Info */}
                        <div className="grid sm:grid-cols-2 gap-8">
                            <div className="bg-white/5 backdrop-blur-sm p-6 rounded-2xl border border-white/10 hover:border-white/20 transition-colors">
                                <div className="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center text-white mb-4">
                                    <span className="material-symbols-outlined">call</span>
                                </div>
                                <h4 className="font-bold text-white mb-1">Phone</h4>
                                <p className="text-gray-400">(361) 765-8400</p>
                            </div>
                            <div className="bg-white/5 backdrop-blur-sm p-6 rounded-2xl border border-white/10 hover:border-white/20 transition-colors">
                                <div className="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center text-white mb-4">
                                    <span className="material-symbols-outlined">location_on</span>
                                </div>
                                <h4 className="font-bold text-white mb-1">Address</h4>
                                <p className="text-gray-400">1001 Blucher St,<br />Corpus Christi, TX 78401</p>
                            </div>
                        </div>

                        <div className="bg-white/5 backdrop-blur-sm p-8 rounded-2xl border border-white/10">
                            <h4 className="font-bold text-white mb-4">Hours & Area</h4>
                            <p className="text-gray-400 mb-2"><span className="font-semibold text-white">Mon - Fri:</span> 8:00 AM - 6:00 PM</p>
                            <p className="text-gray-500 text-sm mb-4">(Emergency support: 24/7)</p>
                            <p className="text-gray-400"><span className="font-semibold text-white">Service Area:</span> Corpus Christi & the Coastal Bend (including Portland, Rockport, Aransas Pass, Kingsville, Port Aransas)</p>
                        </div>

                        {/* FAQ */}
                        <div>
                            <h3 className="text-2xl font-bold mb-6 text-white">Quick Answers</h3>
                            <div className="space-y-4">
                                {faqs.map((faq, index) => (
                                    <div key={index} className="bg-white/5 backdrop-blur-sm p-6 rounded-2xl border border-white/10 hover:border-white/30 transition-colors">
                                        <h4 className="font-bold text-white mb-2">{faq.q}</h4>
                                        <p className="text-gray-400 text-sm leading-relaxed">{faq.a}</p>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </motion.div>
                </div>
            </section>

            {/* What Happens Next Section */}
            <section className="py-24 px-6 border-t border-white/5">
                <div className="max-w-7xl mx-auto">
                    <h2 className="font-display text-3xl md:text-4xl font-bold text-center mb-16 text-white">
                        What happens next?
                    </h2>
                    <div className="grid md:grid-cols-3 gap-8">
                        {[
                            {
                                step: '01',
                                title: 'We respond quickly',
                                description: 'Get a response within 24 hours, usually much faster.'
                            },
                            {
                                step: '02',
                                title: 'Free consultation',
                                description: '20-minute call to understand your needs and challenges.'
                            },
                            {
                                step: '03',
                                title: 'Custom proposal',
                                description: 'Tailored solution with clear next steps and pricing.'
                            }
                        ].map((item, index) => (
                            <motion.div
                                key={index}
                                initial={{ opacity: 0, y: 20 }}
                                whileInView={{ opacity: 1, y: 0 }}
                                viewport={{ once: true }}
                                transition={{ delay: index * 0.1 }}
                                className="bg-white/5 backdrop-blur-sm p-8 rounded-2xl border border-white/10 hover:bg-white/10 transition-colors relative overflow-hidden group"
                            >
                                <div className="absolute top-0 right-0 p-8 opacity-10 font-display text-8xl font-bold text-white group-hover:scale-110 transition-transform select-none pointer-events-none">
                                    {item.step}
                                </div>
                                <div className="relative z-10">
                                    <div className="w-12 h-12 bg-white/10 rounded-full flex items-center justify-center text-white mb-6 border border-white/10">
                                        <span className="material-symbols-outlined">
                                            {index === 0 ? 'schedule_send' : index === 1 ? 'phone_in_talk' : 'contract_edit'}
                                        </span>
                                    </div>
                                    <h3 className="text-xl font-bold text-white mb-3">{item.title}</h3>
                                    <p className="text-gray-400 leading-relaxed">{item.description}</p>
                                </div>
                            </motion.div>
                        ))}
                    </div>
                </div>
            </section>

            {/* Service Area Section */}
            <section className="py-24 px-6 relative overflow-hidden">
                <div className="absolute inset-0 bg-white/5"></div>
                <div className="max-w-7xl mx-auto relative z-10">
                    <div className="grid lg:grid-cols-2 gap-16 items-center">
                        <div>
                            <h2 className="font-display text-3xl md:text-4xl font-bold mb-6 text-white">
                                Our Service Area
                            </h2>
                            <p className="text-lg text-gray-400 mb-8 leading-relaxed">
                                Proudly serving Corpus Christi, Portland, Rockport, Aransas Pass, Kingsville, Port Aransas, and the entire Coastal Bend region.
                            </p>

                            <div className="flex flex-wrap gap-3">
                                {['Corpus Christi', 'Portland', 'Rockport', 'Aransas Pass', 'Kingsville', 'Port Aransas'].map((city) => (
                                    <div key={city} className="flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 text-gray-300">
                                        <span className="material-symbols-outlined text-sm text-white">location_on</span>
                                        {city}
                                    </div>
                                ))}
                            </div>
                        </div>

                        <div className="h-[400px] bg-[#1a1a1a] rounded-3xl overflow-hidden border border-white/10 shadow-2xl relative">
                            <iframe
                                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3532.1843778537446!2d-97.39864222453538!3d27.79426697613324!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x86685f8090787b65%3A0x6762397985799732!2s1001%20Blucher%20St%2C%20Corpus%20Christi%2C%20TX%2078401!5e0!3m2!1sen!2sus!4v1709420000000!5m2!1sen!2sus"
                                width="100%"
                                height="100%"
                                style={{ border: 0 }}
                                allowFullScreen
                                loading="lazy"
                                referrerPolicy="no-referrer-when-downgrade"
                            ></iframe>
                        </div>
                    </div>
                </div>
            </section>
        </div>
        </>
    );
};

export default ContactPage;