"use client";

import { useState } from "react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import Input from '@/components/form/Input';
import ButtonShiftHover from '@/components/button/ButtonShiftHover/ButtonShiftHover';
import { MapPin, Phone, Mail, Clock } from 'lucide-react';

export default function ContactPage() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phone: '',
    subject: '',
    message: ''
  });
  const [submitted, setSubmitted] = useState(false);

  const handleInputChange = (field: string, value: string) => {
    setFormData(prev => ({
      ...prev,
      [field]: value
    }));
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // Here you would typically send the form data to your backend
    console.log('Form submitted:', formData);
    setSubmitted(true);
    setTimeout(() => {
      setSubmitted(false);
      setFormData({ name: '', email: '', phone: '', subject: '', message: '' });
    }, 3000);
  };

  return (
    <ThemeProvider
      defaultButtonVariant="slide-background"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="smallMedium"
      sizing="mediumLarge"
      background="floatingGradient"
      cardStyle="solid"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          brandName="No Audi No Travel"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Fleet", id: "products" },
            { name: "Pricing", id: "pricing" },
            { name: "Why Us", id: "features" },
            { name: "Contact", id: "contact" }
          ]}
          bottomLeftText="Premium Vehicle Rentals"
          bottomRightText="hello@noaudinotravel.com"
        />
      </div>

      <div id="contact" data-section="contact" className="w-content-width mx-auto py-20 px-6">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
          {/* Contact Form */}
          <div>
            <h1 className="text-5xl md:text-6xl font-bold text-foreground mb-2">Get In Touch</h1>
            <p className="text-foreground/75 mb-8">Have a question about our fleet or rental process? We'd love to hear from you. Fill out the form below and our team will respond as soon as possible.</p>

            <form onSubmit={handleSubmit} className="space-y-6">
              <div>
                <label className="block text-sm font-medium text-foreground mb-2">Name</label>
                <Input
                  value={formData.name}
                  onChange={(value) => handleInputChange('name', value)}
                  placeholder="Your name"
                  required
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-foreground mb-2">Email</label>
                <Input
                  value={formData.email}
                  onChange={(value) => handleInputChange('email', value)}
                  type="email"
                  placeholder="your@email.com"
                  required
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-foreground mb-2">Phone</label>
                <Input
                  value={formData.phone}
                  onChange={(value) => handleInputChange('phone', value)}
                  type="tel"
                  placeholder="+1 (555) 000-0000"
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-foreground mb-2">Subject</label>
                <Input
                  value={formData.subject}
                  onChange={(value) => handleInputChange('subject', value)}
                  placeholder="Inquiry about rental"
                  required
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-foreground mb-2">Message</label>
                <textarea
                  value={formData.message}
                  onChange={(e) => handleInputChange('message', e.target.value)}
                  placeholder="Tell us how we can help..."
                  rows={5}
                  required
                  className="w-full px-4 py-3 rounded-theme bg-secondary-cta text-foreground placeholder-foreground/50 border border-accent focus:outline-none focus:ring-2 focus:ring-primary-cta"
                />
              </div>

              <div className="pt-4">
                <ButtonShiftHover
                  text={submitted ? "Message Sent!" : "Send Message"}
                  disabled={submitted}
                />
              </div>
            </form>
          </div>

          {/* Business Information & Support Details */}
          <div>
            <h2 className="text-4xl md:text-5xl font-bold text-foreground mb-8">Contact Information</h2>

            {/* Business Info Cards */}
            <div className="space-y-6 mb-12">
              {/* Address */}
              <div className="card p-6 flex gap-4">
                <div className="flex-shrink-0">
                  <MapPin className="w-6 h-6 text-primary-cta" />
                </div>
                <div>
                  <h3 className="text-lg font-semibold text-foreground mb-1">Address</h3>
                  <p className="text-foreground/75">123 Luxury Lane<br />Premium City, PC 12345<br />United States</p>
                </div>
              </div>

              {/* Phone */}
              <div className="card p-6 flex gap-4">
                <div className="flex-shrink-0">
                  <Phone className="w-6 h-6 text-primary-cta" />
                </div>
                <div>
                  <h3 className="text-lg font-semibold text-foreground mb-1">Phone</h3>
                  <p className="text-foreground/75">+1 (800) 123-4567<br />Available 24/7</p>
                </div>
              </div>

              {/* Email */}
              <div className="card p-6 flex gap-4">
                <div className="flex-shrink-0">
                  <Mail className="w-6 h-6 text-primary-cta" />
                </div>
                <div>
                  <h3 className="text-lg font-semibold text-foreground mb-1">Email</h3>
                  <p className="text-foreground/75">hello@noaudinotravel.com<br />support@noaudinotravel.com</p>
                </div>
              </div>

              {/* Business Hours */}
              <div className="card p-6 flex gap-4">
                <div className="flex-shrink-0">
                  <Clock className="w-6 h-6 text-primary-cta" />
                </div>
                <div>
                  <h3 className="text-lg font-semibold text-foreground mb-1">Business Hours</h3>
                  <p className="text-foreground/75">Monday - Friday: 8:00 AM - 6:00 PM<br />Saturday - Sunday: 10:00 AM - 4:00 PM<br />Holidays: By appointment</p>
                </div>
              </div>
            </div>

            {/* Support Details */}
            <div>
              <h3 className="text-2xl font-bold text-foreground mb-4">Support Services</h3>
              <ul className="space-y-3 text-foreground/75">
                <li className="flex items-start gap-3">
                  <span className="text-primary-cta font-bold mt-1">•</span>
                  <span><strong>24/7 Roadside Assistance:</strong> Emergency support for all active rentals</span>
                </li>
                <li className="flex items-start gap-3">
                  <span className="text-primary-cta font-bold mt-1">•</span>
                  <span><strong>Same-Day Booking:</strong> Call to book a vehicle with immediate availability</span>
                </li>
                <li className="flex items-start gap-3">
                  <span className="text-primary-cta font-bold mt-1">•</span>
                  <span><strong>Dedicated Account Manager:</strong> For monthly leases and corporate rentals</span>
                </li>
                <li className="flex items-start gap-3">
                  <span className="text-primary-cta font-bold mt-1">•</span>
                  <span><strong>Airport Services:</strong> Free pickup and dropoff at major airports</span>
                </li>
                <li className="flex items-start gap-3">
                  <span className="text-primary-cta font-bold mt-1">•</span>
                  <span><strong>Vehicle Support:</strong> Technical assistance and replacement vehicles</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal logoText="No Audi No Travel" />
      </div>
    </ThemeProvider>
  );
}
