import { useState } from 'react';
import { Link } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Phone, Mail, MapPin, Clock, Send, Calendar, ArrowRight } from 'lucide-react';
import SEO from '@/components/SEO';
import { trackFormSubmit, trackPhoneClick } from '@/lib/gtm';

export default function ContactPage() {
  const baseUrl = 'https://swimmingpoolpro.in';
  const [loading, setLoading] = useState(false);
  const [submitted, setSubmitted] = useState(false);
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phone: '',
    subject: '',
    message: '',
  });

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);

    // Simulate form submission
    setTimeout(() => {
      setLoading(false);
      setSubmitted(true);
      trackFormSubmit('Contact Us', 'contact_form', {
        subject: formData.subject,
      });
      setFormData({
        name: '',
        email: '',
        phone: '',
        subject: '',
        message: '',
      });
    }, 1000);
  };

  return (
    <>
      <SEO
        title="Contact Aqua Technic - Pool Construction Experts in Hyderabad | Get Free Quote"
        description="Contact Aqua Technic for luxury pool construction in Hyderabad. Call +91 93913 55379 or email info@swimmingpoolpro.in. Free consultation available. Visit our showroom at Lakdikapul."
        keywords="contact pool builders Hyderabad, pool construction quote, swimming pool consultation, Aqua Technic contact, pool contractor Hyderabad"
        canonical={`${baseUrl}/contact`}
        structuredData={{
          '@context': 'https://schema.org',
          '@type': 'ContactPage',
          name: 'Contact Aqua Technic',
          url: `${baseUrl}/contact`,
          description: 'Contact Aqua Technic for swimming pool construction and maintenance services in Hyderabad.',
          mainEntity: {
            '@type': 'LocalBusiness',
            name: 'Aqua Technic',
            telephone: '+919704999060',
            email: 'info@swimmingpoolpro.in',
            address: {
              '@type': 'PostalAddress',
              streetAddress: '303 Surbhai Plaza, Opp Srikara Hospital, Lakdikapul',
              addressLocality: 'Hyderabad',
              addressRegion: 'Telangana',
              postalCode: '500004',
              addressCountry: 'IN',
            },
            openingHoursSpecification: [{
              '@type': 'OpeningHoursSpecification',
              dayOfWeek: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
              opens: '10:30',
              closes: '17:00',
            }],
          },
        }}
      />
    <div className="min-h-screen py-16 bg-background">
      <div className="container mx-auto px-4">
        {/* Header */}
        <div className="text-center mb-16">
          <h1 className="text-4xl md:text-5xl font-bold mb-4">
            Get in Touch
          </h1>
          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
            Have questions about your pool project? We're here to help. Reach out to our team today.
          </p>
        </div>

        <div className="max-w-6xl mx-auto">
          <div className="grid lg:grid-cols-3 gap-8 mb-12">
            {/* Contact Methods */}
            <Card>
              <CardHeader>
                <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                  <Phone className="h-6 w-6 text-primary" />
                </div>
                <CardTitle>Phone</CardTitle>
                <CardDescription>Call us during business hours</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-2">
                  <a href="tel:+919704999060" onClick={() => trackPhoneClick('+919704999060', 'contact_page')} className="text-lg font-medium hover:text-primary transition-colors block">
                    +91 93913 55379
                  </a>
                  <a href="tel:+919391111962" onClick={() => trackPhoneClick('+919391111962', 'contact_page')} className="text-lg font-medium hover:text-primary transition-colors block">
                    +91 93911 11962
                  </a>
                  <a href="tel:04023220724" onClick={() => trackPhoneClick('04023220724', 'contact_page')} className="text-base font-medium hover:text-primary transition-colors block">
                    040-23220724
                  </a>
                </div>
                <p className="text-sm text-muted-foreground mt-3">
                  Mon-Fri: 10:30 AM - 5:00 PM<br />
                  Sat-Sun: Closed
                </p>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                  <Mail className="h-6 w-6 text-primary" />
                </div>
                <CardTitle>Email</CardTitle>
                <CardDescription>Send us a message anytime</CardDescription>
              </CardHeader>
              <CardContent>
                <a href="mailto:info@swimmingpoolpro.in" className="text-lg font-medium hover:text-primary transition-colors break-all">
                  info@swimmingpoolpro.in
                </a>
                <p className="text-sm text-muted-foreground mt-2">
                  We typically respond within 24 hours
                </p>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                  <MapPin className="h-6 w-6 text-primary" />
                </div>
                <CardTitle>Location</CardTitle>
                <CardDescription>Visit our showroom</CardDescription>
              </CardHeader>
              <CardContent>
                <a
                  href="https://www.google.com/maps/search/?api=1&query=Aqua+Technic&query_place_id=17.404466724939045,78.46172920646356"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-lg font-medium hover:text-primary transition-colors inline-block"
                >
                  303 Surbhai Plaza<br />
                  Opp Srikara Hospital<br />
                  Lakdikapul, Hyderabad, Telangana - 500004
                </a>
                <p className="text-sm text-muted-foreground mt-2">
                  By appointment only
                </p>
                <Button asChild variant="outline" className="mt-4 w-full">
                  <a
                    href="https://www.google.com/maps/search/?api=1&query=Aqua+Technic&query_place_id=17.404466724939045,78.46172920646356"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    <MapPin className="h-4 w-4 mr-2" />
                    Get Directions
                  </a>
                </Button>
              </CardContent>
            </Card>
          </div>

          <div className="grid lg:grid-cols-2 gap-8">
            {/* Contact Form */}
            <Card>
              <CardHeader>
                <CardTitle>Send Us a Message</CardTitle>
                <CardDescription>
                  Fill out the form below and we'll get back to you as soon as possible
                </CardDescription>
              </CardHeader>
              <CardContent>
                {submitted ? (
                  <div className="text-center py-8">
                    <div className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
                      <Send className="h-8 w-8 text-primary" />
                    </div>
                    <h3 className="text-xl font-semibold mb-2">Message Sent!</h3>
                    <p className="text-muted-foreground mb-6">
                      Thank you for contacting us. We'll respond within 24 hours.
                    </p>
                    <Button onClick={() => setSubmitted(false)} variant="outline">
                      Send Another Message
                    </Button>
                  </div>
                ) : (
                  <form onSubmit={handleSubmit} className="space-y-4">
                    <div className="grid md:grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <Label htmlFor="name">Full Name *</Label>
                        <Input
                          id="name"
                          placeholder="John Smith"
                          value={formData.name}
                          onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                          required
                        />
                      </div>

                      <div className="space-y-2">
                        <Label htmlFor="phone">Phone Number *</Label>
                        <Input
                          id="phone"
                          type="tel"
                          placeholder="(555) 123-4567"
                          value={formData.phone}
                          onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                          required
                        />
                      </div>
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="email">Email Address *</Label>
                      <Input
                        id="email"
                        type="email"
                        placeholder="your@email.com"
                        value={formData.email}
                        onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                        required
                      />
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="subject">Subject *</Label>
                      <Input
                        id="subject"
                        placeholder="What can we help you with?"
                        value={formData.subject}
                        onChange={(e) => setFormData({ ...formData, subject: e.target.value })}
                        required
                      />
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="message">Message *</Label>
                      <Textarea
                        id="message"
                        placeholder="Tell us about your project or question..."
                        rows={6}
                        value={formData.message}
                        onChange={(e) => setFormData({ ...formData, message: e.target.value })}
                        required
                      />
                    </div>

                    <Button type="submit" size="lg" className="w-full" disabled={loading}>
                      {loading ? 'Sending...' : 'Send Message'}
                      <Send className="ml-2 h-5 w-5" />
                    </Button>
                  </form>
                )}
              </CardContent>
            </Card>

            {/* Additional Info & CTA */}
            <div className="space-y-8">
              {/* Business Hours */}
              <Card>
                <CardHeader>
                  <div className="flex items-center gap-3 mb-2">
                    <Clock className="h-6 w-6 text-primary" />
                    <CardTitle>Business Hours</CardTitle>
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="space-y-3">
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">Monday - Friday</span>
                      <span className="font-medium">10:30 AM - 5:00 PM</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">Saturday - Sunday</span>
                      <span className="font-medium">Closed</span>
                    </div>
                  </div>
                  <div className="mt-6 p-4 bg-muted rounded-lg">
                    <p className="text-sm text-muted-foreground">
                      <strong>Emergency Service:</strong> For existing customers with urgent pool issues, call our 24/7 emergency line at <a href="tel:+919391111962" onClick={() => trackPhoneClick('+919391111962', 'contact_page_emergency')} className="font-semibold hover:text-primary transition-colors">+91 93911 11962</a>
                    </p>
                  </div>
                </CardContent>
              </Card>

              {/* Schedule Consultation CTA */}
              <Card className="bg-primary text-primary-foreground">
                <CardHeader>
                  <div className="flex items-center gap-3 mb-2">
                    <Calendar className="h-6 w-6" />
                    <CardTitle className="text-primary-foreground">Ready to Start Your Project?</CardTitle>
                  </div>
                  <CardDescription className="text-primary-foreground/80">
                    Schedule a free consultation with our design team
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <p className="mb-6 text-primary-foreground/90">
                    Meet with our experts to discuss your vision, get professional advice, and receive a custom proposal for your dream pool.
                  </p>
                  <Button size="lg" variant="secondary" className="w-full" asChild>
                    <Link to="/book-consultation">
                      Schedule Free Consultation
                    </Link>
                  </Button>
                </CardContent>
              </Card>


            </div>
          </div>

          {/* FAQ Section */}
          <div className="mt-16">
            <h2 className="text-3xl font-bold text-center mb-8">Frequently Asked Questions</h2>
            <div className="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
              <Card>
                <CardHeader>
                  <CardTitle className="text-lg">How long does pool construction take?</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-muted-foreground">
                    Most custom pool projects take 8-12 weeks from start to finish, depending on design complexity and weather conditions.
                  </p>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle className="text-lg">Do you offer financing options?</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-muted-foreground">
                    Yes, we partner with several financing companies to offer flexible payment plans for qualified customers.
                  </p>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle className="text-lg">What's included in the consultation?</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-muted-foreground">
                    Our free consultation includes site evaluation, design discussion, budget planning, and a preliminary project timeline.
                  </p>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle className="text-lg">Are you licensed and insured?</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-muted-foreground">
                    Yes, we are fully licensed, bonded, and insured. We carry comprehensive liability and workers' compensation coverage.
                  </p>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </div>

      {/* Internal Links Section */}
      <section className="py-16 bg-muted border-t border-border">
        <div className="container mx-auto px-4">
          <h3 className="text-xl font-semibold text-center mb-8 text-muted-foreground">You May Also Be Interested In</h3>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
            <Link to="/pricing" className="group bg-background rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow border border-border">
              <h4 className="font-semibold text-foreground group-hover:text-primary transition-colors mb-2">Pool Pricing Guide</h4>
              <p className="text-sm text-muted-foreground">Transparent pricing from ₹38L. See what's included in each package.</p>
              <span className="text-primary text-sm font-medium mt-3 inline-flex items-center gap-1">View pricing <ArrowRight className="h-3 w-3" /></span>
            </Link>
            <Link to="/book-consultation" className="group bg-background rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow border border-border">
              <h4 className="font-semibold text-foreground group-hover:text-primary transition-colors mb-2">Book a Free Consultation</h4>
              <p className="text-sm text-muted-foreground">Schedule a site visit and design discussion with our pool experts.</p>
              <span className="text-primary text-sm font-medium mt-3 inline-flex items-center gap-1">Book now <ArrowRight className="h-3 w-3" /></span>
            </Link>
            <Link to="/service-areas" className="group bg-background rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow border border-border">
              <h4 className="font-semibold text-foreground group-hover:text-primary transition-colors mb-2">Service Areas</h4>
              <p className="text-sm text-muted-foreground">We serve Hyderabad, Secunderabad, and surrounding areas across Telangana.</p>
              <span className="text-primary text-sm font-medium mt-3 inline-flex items-center gap-1">Check your area <ArrowRight className="h-3 w-3" /></span>
            </Link>
          </div>
        </div>
      </section>
    </div>
  </>
  );
}