import { SectionHeader } from '@/components/ui/SectionHeader'
import { GlassCard } from '@/components/ui/GlassCard'
import { Mail, Phone, MapPin, Clock } from 'lucide-react'

export default function ContactPage() {
  return (
    <div className="pt-32 pb-24 sm:pt-40 sm:pb-32 bg-nearle-bgsoft relative overflow-hidden">
      <div className="max-w-7xl mx-auto px-5 sm:px-8">
        <SectionHeader
          label="Contact Us"
          heading={
            <>
              Get in touch
              <br />
              <span className="bg-gradient-purple bg-clip-text text-transparent">
                Feel free to ask for details
              </span>
            </>
          }
          sub="Don't save any questions! We are here to help you build your neighbourhood."
          align="center"
          className="mb-16"
        />

        <div className="grid lg:grid-cols-2 gap-10 items-start">
          {/* Form Side */}
          <GlassCard className="p-8 border-purple-lavender/50 shadow-nearle-md">
            <form className="flex flex-col gap-5">
              <div>
                <label className="block text-sm font-bold text-nearle-dark mb-2">Full Name</label>
                <input 
                  type="text" 
                  placeholder="John Doe"
                  className="w-full px-4 py-3 rounded-xl border border-nearle-border focus:outline-none focus:border-purple-primary transition-colors"
                />
              </div>
              <div>
                <label className="block text-sm font-bold text-nearle-dark mb-2">Email Address</label>
                <input 
                  type="email" 
                  placeholder="john@example.com"
                  className="w-full px-4 py-3 rounded-xl border border-nearle-border focus:outline-none focus:border-purple-primary transition-colors"
                />
              </div>
              <div>
                <label className="block text-sm font-bold text-nearle-dark mb-2">Subject</label>
                <input 
                  type="text" 
                  placeholder="How can we help?"
                  className="w-full px-4 py-3 rounded-xl border border-nearle-border focus:outline-none focus:border-purple-primary transition-colors"
                />
              </div>
              <div>
                <label className="block text-sm font-bold text-nearle-dark mb-2">Message</label>
                <textarea 
                  rows={5}
                  placeholder="Type your message here..."
                  className="w-full px-4 py-3 rounded-xl border border-nearle-border focus:outline-none focus:border-purple-primary transition-colors resize-none"
                />
              </div>
              <button 
                type="button"
                className="mt-2 bg-purple-deep text-white font-bold py-4 rounded-xl shadow-cta hover:bg-purple-primary transition-colors"
              >
                Send Message
              </button>
            </form>
          </GlassCard>

          {/* Info Side */}
          <div className="flex flex-col gap-6">
            <GlassCard className="flex items-start gap-4 border-purple-lavender/30">
              <div className="w-12 h-12 rounded-full bg-purple-soft text-purple-primary flex items-center justify-center shrink-0">
                <MapPin size={24} />
              </div>
              <div>
                <h4 className="font-display font-bold text-lg text-nearle-dark mb-1">Office Address</h4>
                <p className="font-body text-nearle-mid text-sm leading-relaxed">
                  Nearle Technology Private Limited,<br />
                  No.424, Red Rose Towers, DB Road,<br />
                  RS Puram Coimbatore- 641002
                </p>
              </div>
            </GlassCard>

            <GlassCard className="flex items-start gap-4 border-purple-lavender/30">
              <div className="w-12 h-12 rounded-full bg-purple-soft text-purple-primary flex items-center justify-center shrink-0">
                <Phone size={24} />
              </div>
              <div>
                <h4 className="font-display font-bold text-lg text-nearle-dark mb-1">Phone</h4>
                <p className="font-body text-nearle-mid text-sm leading-relaxed">
                  +91 96... (Contact Number)
                </p>
              </div>
            </GlassCard>

            <GlassCard className="flex items-start gap-4 border-purple-lavender/30">
              <div className="w-12 h-12 rounded-full bg-purple-soft text-purple-primary flex items-center justify-center shrink-0">
                <Mail size={24} />
              </div>
              <div>
                <h4 className="font-display font-bold text-lg text-nearle-dark mb-1">Email</h4>
                <p className="font-body text-nearle-mid text-sm leading-relaxed">
                  care@nearle.in
                </p>
              </div>
            </GlassCard>

            <GlassCard className="flex items-start gap-4 border-purple-lavender/30">
              <div className="w-12 h-12 rounded-full bg-purple-soft text-purple-primary flex items-center justify-center shrink-0">
                <Clock size={24} />
              </div>
              <div>
                <h4 className="font-display font-bold text-lg text-nearle-dark mb-1">Business Hours</h4>
                <div className="font-body text-nearle-mid text-sm leading-relaxed flex flex-col gap-1">
                  <span className="flex justify-between w-48"><span>Monday - Friday</span> <span className="font-bold">9am to 6pm</span></span>
                  <span className="flex justify-between w-48"><span>Saturday</span> <span className="font-bold">9am to 2pm</span></span>
                  <span className="flex justify-between w-48"><span>Sunday</span> <span className="font-bold text-red-500">Closed</span></span>
                </div>
              </div>
            </GlassCard>
          </div>
        </div>
      </div>
    </div>
  )
}
