'use client'

import { useState } from 'react'
import { motion } from 'framer-motion'
import { SectionHeader } from '@/components/ui/SectionHeader'
import { GlassCard } from '@/components/ui/GlassCard'
import { Button } from '@/components/ui/Button'

export function Contact() {
  const [email, setEmail] = useState('')
  const [society, setSociety] = useState('')
  const [submitted, setSubmitted] = useState(false)

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (email) {
      setSubmitted(true)
      setTimeout(() => {
        setSubmitted(false)
        setEmail('')
        setSociety('')
      }, 4000)
    }
  }

  return (
    <div className="py-24 sm:py-32 bg-nearle-bgsoft px-5 sm:px-8 relative overflow-hidden">
      {/* Decorative Blur Backgrounds */}
      <div className="absolute top-1/4 left-1/4 w-[400px] h-[400px] rounded-full bg-purple-soft/30 blur-3xl -z-10 pointer-events-none" />

      <div className="max-w-6xl mx-auto">
        <div className="grid lg:grid-cols-12 gap-12 items-center">
          {/* Left Column Text (5 cols) */}
          <div className="lg:col-span-5 flex flex-col justify-center">
            <SectionHeader
              label="Join the Network"
              heading={
                <>
                  Request Nearle in
                  <br />
                  <span className="bg-gradient-purple bg-clip-text text-transparent">
                    Your Neighbourhood
                  </span>
                </>
              }
              sub="Are you a society coordinator or a local merchant who wants to activate cooperative living? Reach out and we will geofence your area."
              align="left"
              className="mb-8"
            />

            <div className="flex flex-col gap-5 font-body text-nearle-mid text-sm">
              <div className="flex items-center gap-3">
                <span className="w-10 h-10 rounded-xl bg-purple-soft text-purple-deep flex items-center justify-center text-lg">
                  📍
                </span>
                <div>
                  <p className="font-bold text-nearle-dark">HQ Location</p>
                  <p>RS Puram, Coimbatore, Tamil Nadu, India</p>
                </div>
              </div>

              <div className="flex items-center gap-3">
                <span className="w-10 h-10 rounded-xl bg-purple-soft text-purple-deep flex items-center justify-center text-lg">
                  ✉
                </span>
                <div>
                  <p className="font-bold text-nearle-dark">Official Email</p>
                  <p>partners@nearle.in · operations@nearle.in</p>
                </div>
              </div>
            </div>
          </div>

          {/* Right Column Form (7 cols) */}
          <div className="lg:col-span-7">
            <GlassCard className="border-purple-lavender/50 hover:border-purple-primary shadow-nearle-md p-8 sm:p-10 relative overflow-hidden">
              {submitted ? (
                <motion.div
                  initial={{ opacity: 0, scale: 0.95 }}
                  animate={{ opacity: 1, scale: 1 }}
                  className="text-center py-12 flex flex-col items-center"
                >
                  <span className="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center text-3xl mb-6 shadow-sm">
                    ✓
                  </span>
                  <h3 className="font-display font-extrabold text-2xl text-nearle-dark">
                    Request Received!
                  </h3>
                  <p className="font-body text-nearle-mid text-sm leading-relaxed mt-4 max-w-sm">
                    Thank you! Our geofencing calibration team will contact you or your society management shortly to initiate the verification process.
                  </p>
                </motion.div>
              ) : (
                <form onSubmit={handleSubmit} className="flex flex-col gap-6">
                  <div>
                    <label
                      htmlFor="email-address"
                      className="block font-display font-bold text-xs uppercase tracking-wider text-purple-deep mb-2"
                    >
                      Email Address
                    </label>
                    <input
                      id="email-address"
                      type="email"
                      required
                      placeholder="e.g. coordinator@society.com"
                      value={email}
                      onChange={(e) => setEmail(e.target.value)}
                      className="w-full bg-white border border-nearle-border rounded-xl px-4 py-3.5 text-sm focus:outline-none focus:border-purple-primary focus:ring-1 focus:ring-purple-primary transition-all duration-300"
                    />
                  </div>

                  <div>
                    <label
                      htmlFor="society-name"
                      className="block font-display font-bold text-xs uppercase tracking-wider text-purple-deep mb-2"
                    >
                      Society or Complex Name
                    </label>
                    <input
                      id="society-name"
                      type="text"
                      placeholder="e.g. Sree Vatsa Residency, RS Puram"
                      value={society}
                      onChange={(e) => setSociety(e.target.value)}
                      className="w-full bg-white border border-nearle-border rounded-xl px-4 py-3.5 text-sm focus:outline-none focus:border-purple-primary focus:ring-1 focus:ring-purple-primary transition-all duration-300"
                    />
                  </div>

                  <Button
                    type="submit"
                    variant="primary"
                    size="md"
                    className="w-full justify-center mt-2 shadow-cta hover:shadow-cta-hover transition-all"
                  >
                    Send Society Request
                  </Button>
                </form>
              )}
            </GlassCard>
          </div>
        </div>
      </div>
    </div>
  )
}
