import Navigation from "@/components/Navigation";
import Footer from "@/components/Footer";
import { Card, CardContent } from "@/components/ui/card";
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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { 
  MapPin, 
  Phone, 
  Mail, 
  Clock,
  AlertTriangle,
  MessageSquare,
  Calendar
} from "lucide-react";

const Contact = () => {
  return (
    <div className="min-h-screen">
      <Navigation />
      <main className="pt-16">
        {/* Hero Section */}
        <section className="py-24 bg-gradient-subtle">
          <div className="container mx-auto px-4 text-center">
            <h1 className="text-display-xl font-display font-bold text-forest mb-6">
              Get in Touch
            </h1>
            <p className="text-body-lg text-sage max-w-3xl mx-auto">
              Ready to take control of your financial future? Contact us today for a free consultation and discover how we can help you achieve your goals.
            </p>
          </div>
        </section>

        {/* Contact Form & Info */}
        <section className="py-24 bg-background">
          <div className="container mx-auto px-4">
            <div className="grid lg:grid-cols-2 gap-16">
              {/* Contact Form */}
              <div>
                <h2 className="text-display-lg font-display font-semibold text-forest mb-8">
                  Schedule Your Free Consultation
                </h2>
                
                <Card className="rounded-2xl card-elevation">
                  <CardContent className="p-8">
                    <form className="space-y-6">
                      <div className="grid md:grid-cols-2 gap-4">
                        <div>
                          <Label htmlFor="firstName" className="text-forest font-medium">
                            First Name *
                          </Label>
                          <Input 
                            id="firstName"
                            className="mt-2 rounded-xl"
                            required
                          />
                        </div>
                        <div>
                          <Label htmlFor="lastName" className="text-forest font-medium">
                            Last Name *
                          </Label>
                          <Input 
                            id="lastName"
                            className="mt-2 rounded-xl"
                            required
                          />
                        </div>
                      </div>
                      
                      <div>
                        <Label htmlFor="email" className="text-forest font-medium">
                          Email Address *
                        </Label>
                        <Input 
                          id="email"
                          type="email"
                          className="mt-2 rounded-xl"
                          required
                        />
                      </div>
                      
                      <div>
                        <Label htmlFor="phone" className="text-forest font-medium">
                          Phone Number
                        </Label>
                        <Input 
                          id="phone"
                          type="tel"
                          className="mt-2 rounded-xl"
                        />
                      </div>
                      
                      <div>
                        <Label htmlFor="service" className="text-forest font-medium">
                          Service Needed *
                        </Label>
                        <Select>
                          <SelectTrigger className="mt-2 rounded-xl">
                            <SelectValue placeholder="Select a service" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="tax-prep">Tax Preparation & Planning</SelectItem>
                            <SelectItem value="accounting">Accounting & Bookkeeping</SelectItem>
                            <SelectItem value="payroll">Payroll Solutions</SelectItem>
                            <SelectItem value="irs-rep">IRS Representation</SelectItem>
                            <SelectItem value="business">Business Consulting</SelectItem>
                            <SelectItem value="other">Other / Multiple Services</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                      
                      <div>
                        <Label htmlFor="message" className="text-forest font-medium">
                          Message
                        </Label>
                        <Textarea 
                          id="message"
                          placeholder="Tell us about your situation and how we can help..."
                          className="mt-2 rounded-xl min-h-[120px] resize-none"
                        />
                      </div>
                      
                      <Button size="lg" className="w-full btn-shadow rounded-xl">
                        <MessageSquare className="mr-2 w-5 h-5" />
                        Send Message
                      </Button>
                      
                      <p className="text-sm text-sage text-center">
                        We'll get back to you within one business day
                      </p>
                    </form>
                  </CardContent>
                </Card>
              </div>
              
              {/* Contact Info */}
              <div className="space-y-8">
                {/* Office Info */}
                <Card className="rounded-2xl card-elevation">
                  <CardContent className="p-8">
                    <h3 className="font-display font-semibold text-forest mb-6 flex items-center gap-3">
                      <MapPin className="w-6 h-6 text-brass" strokeWidth={1.5} />
                      Office Information
                    </h3>
                    
                    <div className="space-y-4">
                      <div className="flex items-start gap-3">
                        <MapPin className="w-5 h-5 text-sage flex-shrink-0 mt-1" strokeWidth={1.5} />
                        <div>
                          <div className="font-medium text-forest">Address</div>
                          <div className="text-sage">Corpus Christi, TX</div>
                        </div>
                      </div>
                      
                      <div className="flex items-start gap-3">
                        <Phone className="w-5 h-5 text-sage flex-shrink-0 mt-1" strokeWidth={1.5} />
                        <div>
                          <div className="font-medium text-forest">Phone</div>
                          <a href="tel:+13618543711" className="text-sage hover:text-forest gentle-transition">
                            (361) 854-3711
                          </a>
                        </div>
                      </div>
                      
                      <div className="flex items-start gap-3">
                        <Mail className="w-5 h-5 text-sage flex-shrink-0 mt-1" strokeWidth={1.5} />
                        <div>
                          <div className="font-medium text-forest">Email</div>
                          <a href="mailto:info@gregknopp.com" className="text-sage hover:text-forest gentle-transition">
                            info@gregknopp.com
                          </a>
                        </div>
                      </div>
                      
                      <div className="flex items-start gap-3">
                        <Clock className="w-5 h-5 text-sage flex-shrink-0 mt-1" strokeWidth={1.5} />
                        <div>
                          <div className="font-medium text-forest">Office Hours</div>
                          <div className="text-sage">
                            <div>Monday - Friday: 8:00 AM - 6:00 PM</div>
                            <div>Saturday: By appointment</div>
                            <div>Sunday: Closed</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </CardContent>
                </Card>
                
                {/* Urgent IRS Alert */}
                <Card className="rounded-2xl bg-destructive/10 border-destructive/20">
                  <CardContent className="p-6">
                    <div className="flex items-start gap-3">
                      <AlertTriangle className="w-6 h-6 text-destructive flex-shrink-0" strokeWidth={1.5} />
                      <div>
                        <h4 className="font-display font-semibold text-destructive mb-2">
                          Urgent IRS Matter?
                        </h4>
                        <p className="text-sage mb-4 text-sm">
                          If you're facing an IRS audit, notice, or other urgent tax matter, don't wait. Call us immediately for same-day response.
                        </p>
                        <Button 
                          size="sm" 
                          variant="destructive"
                          className="rounded-xl"
                          onClick={() => window.open('tel:+13618543711')}
                        >
                          Call Now: (361) 854-3711
                        </Button>
                      </div>
                    </div>
                  </CardContent>
                </Card>
                
                {/* Quick Actions */}
                <div className="space-y-4">
                  <Button 
                    size="lg" 
                    variant="outline" 
                    className="w-full rounded-xl"
                    onClick={() => window.open('tel:+13618543711')}
                  >
                    <Phone className="mr-2 w-5 h-5" />
                    Call (361) 854-3711
                  </Button>
                  
                  <Button 
                    size="lg" 
                    variant="outline" 
                    className="w-full rounded-xl"
                  >
                    <Calendar className="mr-2 w-5 h-5" />
                    Schedule Online
                  </Button>
                  
                  <p className="text-center text-sm text-sage">
                    <strong>Response Time:</strong> Within 1 business day<br />
                    <strong>Consultation:</strong> Always free and confidential
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Map Section */}
        <section className="py-16 bg-muted/30">
          <div className="container mx-auto px-4">
            <div className="max-w-4xl mx-auto text-center">
              <h2 className="text-display-lg font-display font-semibold text-forest mb-8">
                Visit Our Corpus Christi Office
              </h2>
              
              {/* Placeholder for map - would integrate with Google Maps */}
              <div className="bg-sage/20 rounded-2xl h-80 flex items-center justify-center">
                <div className="text-center">
                  <MapPin className="w-12 h-12 text-sage mx-auto mb-4" strokeWidth={1.5} />
                  <p className="text-sage">
                    Google Maps integration would go here<br />
                    Showing our Corpus Christi location
                  </p>
                </div>
              </div>
              
              <p className="text-sage mt-6">
                Conveniently located to serve Corpus Christi and surrounding areas
              </p>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </div>
  );
};

export default Contact;