"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { siteConfig } from "@/lib/data"
import { MapPin, Phone, Mail, Send } from "lucide-react"
import { cn } from "@/lib/utils"

export function ContactSection({ className, theme = "light" }: { className?: string; theme?: "light" | "dark" }) {
  const isDark = theme === "dark"
  const [formState, setFormState] = useState({
    name: "",
    email: "",
    subject: "",
    message: ""
  })
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [submitted, setSubmitted] = useState(false)
  const [error, setError] = useState("")

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitting(true)
    setError("")
    setSubmitted(false)

    try {
      const response = await fetch('/api/contact', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formState),
      })

      if (!response.ok) {
        throw new Error('Failed to send message')
      }

      setSubmitted(true)
      setFormState({ name: "", email: "", subject: "", message: "" })
      setTimeout(() => setSubmitted(false), 5000)
    } catch (err) {
      setError("Failed to send message. Please try again.")
    } finally {
      setIsSubmitting(false)
    }
  }

  return (
    <section id="contact" className={cn(
      "pt-0 pb-8 sm:pb-10 relative overflow-hidden",
      isDark 
        ? "bg-[#0F172A] text-white" 
        : "bg-background text-foreground",
      className
    )}>
      {/* Background Decorative Element */}
      <div className={cn(
        "absolute bottom-0 right-0 translate-y-1/4 translate-x-1/4 w-96 h-96 rounded-full blur-3xl -z-10",
        isDark ? "bg-primary/10" : "bg-primary/5"
      )} />
      
      <div className="mx-auto max-w-7xl px-4 lg:px-8 relative">
        <div className="text-center mb-8 flex flex-col items-center">
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 text-primary text-sm font-bold uppercase tracking-wider mb-4 border border-primary/20">
            <Mail className="h-4 w-4" />
            Contact Us
          </div>
          <h2 className={cn("text-2xl sm:text-3xl font-bold text-balance tracking-tight", isDark ? "text-white" : "text-foreground")}>
            Get in touch with our team
          </h2>
        </div>

        <div className="grid lg:grid-cols-3 gap-6">
          {/* Contact Info */}
          <div className="space-y-4">
            <div className={cn(
              "flex gap-4 p-5 rounded-xl border transition-colors group",
              isDark 
                ? "bg-white/5 border-white/10 hover:border-primary/30" 
                : "bg-card border-border hover:border-primary/30 hover:shadow-md"
            )}>
              <div className="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center shrink-0 group-hover:bg-primary transition-colors">
                <MapPin className="h-6 w-6 text-primary group-hover:text-white transition-colors" />
              </div>
              <div>
                <h3 className={cn("font-bold mb-1", isDark ? "text-white" : "text-foreground")}>Address</h3>
                <p className={cn("text-sm", isDark ? "text-zinc-400" : "text-muted-foreground")}>{siteConfig.contact.address}</p>
              </div>
            </div>

            <div className={cn(
              "flex gap-4 p-5 rounded-xl border transition-colors group",
              isDark 
                ? "bg-white/5 border-white/10 hover:border-primary/30" 
                : "bg-card border-border hover:border-primary/30 hover:shadow-md"
            )}>
              <div className="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center shrink-0 group-hover:bg-primary transition-colors">
                <Phone className="h-6 w-6 text-primary group-hover:text-white transition-colors" />
              </div>
              <div>
                <h3 className={cn("font-bold mb-1", isDark ? "text-white" : "text-foreground")}>Call Us</h3>
                <a 
                  href={`tel:${siteConfig.contact.phone}`}
                  className={cn("text-sm transition-colors", isDark ? "text-zinc-400 hover:text-primary" : "text-muted-foreground hover:text-primary")}
                >
                  {siteConfig.contact.phone}
                </a>
              </div>
            </div>

            <div className={cn(
              "flex gap-4 p-5 rounded-xl border transition-colors group",
              isDark 
                ? "bg-white/5 border-white/10 hover:border-primary/30" 
                : "bg-card border-border hover:border-primary/30 hover:shadow-md"
            )}>
              <div className="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center shrink-0 group-hover:bg-primary transition-colors">
                <Mail className="h-6 w-6 text-primary group-hover:text-white transition-colors" />
              </div>
              <div>
                <h3 className={cn("font-bold mb-1", isDark ? "text-white" : "text-foreground")}>Email Us</h3>
                <a 
                  href={`mailto:${siteConfig.contact.email}`}
                  className={cn("text-sm transition-colors", isDark ? "text-zinc-400 hover:text-primary" : "text-muted-foreground hover:text-primary")}
                >
                  {siteConfig.contact.email}
                </a>
              </div>
            </div>

            {/* Social Links */}
            <div className="flex gap-4 pt-2">
              <a href="https://x.com/codeframeai" target="_blank" rel="noopener noreferrer" className={cn("h-10 w-10 rounded-lg flex items-center justify-center transition-colors border", isDark ? "bg-white/5 border-white/10 text-zinc-400 hover:bg-primary hover:text-white hover:border-primary" : "bg-muted/50 border-border text-muted-foreground hover:bg-primary hover:text-white hover:border-primary")} aria-label="X (Twitter)">
                <svg viewBox="0 0 24 24" className="w-4 h-4" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 22.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.008 5.965H5.078z" /></svg>
              </a>
              <a href="https://www.facebook.com/CodeframeAI/" target="_blank" rel="noopener noreferrer" className={cn("h-10 w-10 rounded-lg flex items-center justify-center transition-colors border", isDark ? "bg-white/5 border-white/10 text-zinc-400 hover:bg-primary hover:text-white hover:border-primary" : "bg-muted/50 border-border text-muted-foreground hover:bg-primary hover:text-white hover:border-primary")} aria-label="Facebook">
                <svg viewBox="0 0 24 24" className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
              </a>
              <a href="https://www.instagram.com/codeframe.ai/" target="_blank" rel="noopener noreferrer" className={cn("h-10 w-10 rounded-lg flex items-center justify-center transition-colors border", isDark ? "bg-white/5 border-white/10 text-zinc-400 hover:bg-primary hover:text-white hover:border-primary" : "bg-muted/50 border-border text-muted-foreground hover:bg-primary hover:text-white hover:border-primary")} aria-label="Instagram">
                <svg viewBox="0 0 24 24" className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="20" height="20" x="2" y="2" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"/></svg>
              </a>
              <a href="https://www.linkedin.com/company/codeframe-ai/" target="_blank" rel="noopener noreferrer" className={cn("h-10 w-10 rounded-lg flex items-center justify-center transition-colors border", isDark ? "bg-white/5 border-white/10 text-zinc-400 hover:bg-primary hover:text-white hover:border-primary" : "bg-muted/50 border-border text-muted-foreground hover:bg-primary hover:text-white hover:border-primary")} aria-label="LinkedIn">
                <svg viewBox="0 0 24 24" className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect width="4" height="12" x="2" y="9"/><circle cx="4" cy="4" r="2"/></svg>
              </a>
            </div>
          </div>

          {/* Contact Form */}
          <div className="lg:col-span-2">
            <form onSubmit={handleSubmit} className={cn(
              "border rounded-2xl p-6 sm:p-8 transition-colors",
              isDark 
                ? "bg-white/5 border-white/10 hover:border-primary/20" 
                : "bg-card border-border hover:border-primary/20 shadow-md"
            )}>
              <div className="grid sm:grid-cols-2 gap-4">
                <div>
                  <label htmlFor="name" className={cn("block text-sm font-medium mb-2", isDark ? "text-zinc-300" : "text-muted-foreground")}>
                    Your Name
                  </label>
                  <input
                    type="text"
                    id="name"
                    required
                    value={formState.name}
                    onChange={(e) => setFormState({ ...formState, name: e.target.value })}
                    className={cn(
                      "w-full px-4 py-3 rounded-lg border focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all",
                      isDark 
                        ? "border-white/10 bg-white/5 text-white placeholder:text-zinc-600 focus:border-primary" 
                        : "border-border bg-background text-foreground placeholder:text-muted-foreground/60 focus:border-primary"
                    )}
                    placeholder="John Doe"
                  />
                </div>
                <div>
                  <label htmlFor="email" className={cn("block text-sm font-medium mb-2", isDark ? "text-zinc-300" : "text-muted-foreground")}>
                    Your Email
                  </label>
                  <input
                    type="email"
                    id="email"
                    required
                    value={formState.email}
                    onChange={(e) => setFormState({ ...formState, email: e.target.value })}
                    className={cn(
                      "w-full px-4 py-3 rounded-lg border focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all",
                      isDark 
                        ? "border-white/10 bg-white/5 text-white placeholder:text-zinc-600 focus:border-primary" 
                        : "border-border bg-background text-foreground placeholder:text-muted-foreground/60 focus:border-primary"
                    )}
                    placeholder="john@example.com"
                  />
                </div>
              </div>

              <div className="space-y-1 mt-4">
                <label htmlFor="subject" className={cn("block text-sm font-medium mb-2", isDark ? "text-zinc-300" : "text-muted-foreground")}>
                  Subject
                </label>
                <input
                  type="text"
                  id="subject"
                  required
                  value={formState.subject}
                  onChange={(e) => setFormState({ ...formState, subject: e.target.value })}
                  className={cn(
                    "w-full px-4 py-3 rounded-lg border focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all",
                    isDark 
                      ? "border-white/10 bg-white/5 text-white placeholder:text-zinc-600 focus:border-primary" 
                      : "border-border bg-background text-foreground placeholder:text-muted-foreground/60 focus:border-primary"
                  )}
                  placeholder="How can we help?"
                />
              </div>

              <div className="mb-4">
                <label htmlFor="message" className={cn("block text-sm font-medium mb-2", isDark ? "text-zinc-300" : "text-muted-foreground")}>
                  Message
                </label>
                <textarea
                  id="message"
                  required
                  rows={5}
                  value={formState.message}
                  onChange={(e) => setFormState({ ...formState, message: e.target.value })}
                  className={cn(
                    "w-full px-4 py-3 rounded-lg border focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all resize-none",
                    isDark 
                      ? "border-white/10 bg-white/5 text-white placeholder:text-zinc-600 focus:border-primary" 
                      : "border-border bg-background text-foreground placeholder:text-muted-foreground/60 focus:border-primary"
                  )}
                  placeholder="Tell us about your needs..."
                />
              </div>

              <Button type="submit" disabled={isSubmitting} className="w-full sm:w-auto px-8 py-6 bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary/70 text-white font-bold rounded-lg shadow-lg hover:shadow-primary/30 hover:-translate-y-0.5 transition-all duration-300">
                {isSubmitting ? (
                  "Sending..."
                ) : (
                  <>
                    Send Message <Send className="ml-2 h-4 w-4" />
                  </>
                )}
              </Button>

              {submitted && (
                <p className="mt-4 text-sm text-emerald-500 font-medium flex items-center gap-2 animate-in fade-in">
                  <span className="h-2 w-2 bg-emerald-500 rounded-full" />
                  Your message has been sent. Thank you!
                </p>
              )}
              {error && (
                <p className="mt-4 text-sm text-red-500 font-medium flex items-center gap-2 animate-in fade-in">
                  <span className="h-2 w-2 bg-red-500 rounded-full" />
                  {error}
                </p>
              )}
            </form>
          </div>
        </div>
      </div>
    </section>
  )
}