website/components/ContactSection.tsx

"use client";

import { motion, useInView } from "framer-motion";
import { useEffect, useRef, useState } from "react";
import { Send } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Card, CardContent } from "@/components/ui/card";
import { toast } from "sonner";

export function ContactSection() {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: "-100px" });
  const [isDark, setIsDark] = useState(false);
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    phone: "",
    message: "",
  });

  // Sync with global theme class like Navbar/Hero/About
  useEffect(() => {
    const sync = () => setIsDark(document.documentElement.classList.contains("dark"));
    sync();
    const observer = new MutationObserver(sync);
    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
    return () => observer.disconnect();
  }, []);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    toast("Message Received", {
      description: "Thank you for reaching out. We'll get back to you soon!",
    });
    setFormData({ name: "", email: "", phone: "", message: "" });
  };

  return (
    <section id="contact" className="relative overflow-hidden py-20" ref={ref}>
      {/* Background Image */}
      <div 
        className="absolute inset-0 z-0"
        style={{
          // backgroundImage: `url('https://images.unsplash.com/photo-1556761175-5973dc0f32e7?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80')`,
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          backgroundRepeat: 'no-repeat',
        }}
      />
      
      {/* Subtle overlay for readability - keeping background image clearly visible */}
      <div 
        className="absolute inset-0 z-[1]" 
        style={{
          backgroundColor: isDark ? 'rgba(0, 0, 0, 0.35)' : 'rgba(255, 255, 255, 0.30)'
        }}
      />
      
      {/* Very subtle gradient overlay */}
      {!isDark && (
        <div className="absolute inset-0 z-[2] bg-gradient-to-br from-rose-50/20 via-pink-50/15 to-orange-50/20" />
      )}
      {isDark && (
        <div className="absolute inset-0 z-[2] bg-gradient-to-br from-gray-900/25 via-gray-800/20 to-gray-900/25" />
      )}

      {/* Subtle animated blobs */}
      <div className="absolute inset-0 z-[3] overflow-hidden">
        <motion.div
          className={`absolute -top-10 left-10 h-64 w-64 rounded-full blur-3xl ${isDark ? "bg-pink-900/30 opacity-50" : "bg-pink-100 opacity-40"}`}
          animate={{ x: [0, 60, 0], y: [0, 40, 0], scale: [1, 1.05, 1] }}
          transition={{ duration: 18, repeat: Infinity, ease: "easeInOut" }}
        />
        <motion.div
          className={`absolute -bottom-10 right-10 h-72 w-72 rounded-full blur-3xl ${isDark ? "bg-orange-900/30 opacity-50" : "bg-orange-100 opacity-40"}`}
          animate={{ x: [0, -60, 0], y: [0, -40, 0], scale: [1, 1.08, 1] }}
          transition={{ duration: 22, repeat: Infinity, ease: "easeInOut" }}
        />
      </div>

      <div className="container mx-auto px-4 relative z-10 text-foreground">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.6 }}
          className="mb-16 text-center"
        >
          <h2 className="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-rose-600 via-pink-600 to-orange-600 bg-clip-text text-transparent">
            Get in Touch
          </h2>
          <div className="mx-auto mb-6 h-1 w-24 rounded-full bg-gradient-to-r from-rose-500 to-pink-600" />
          <p className="mx-auto max-w-2xl text-lg text-muted-foreground">
            Ready to start your journey? Reach out to schedule a consultation.
          </p>
        </motion.div>

        <div className="grid gap-12 lg:grid-cols-2 lg:items-stretch">
          {/* Left: Illustration replacing cards */}
          <motion.div
            initial={{ opacity: 0, x: -50 }}
            animate={isInView ? { opacity: 1, x: 0 } : {}}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="relative flex"
          >
            <Card className="bg-gradient-to-br from-rose-100/30 via-pink-100/30 to-orange-100/30 dark:from-rose-900/20 dark:via-pink-900/20 dark:to-orange-900/20 backdrop-blur-sm border border-border/50 overflow-hidden relative h-full flex flex-col rounded-3xl">
              <CardContent className="p-0 flex-1 flex flex-col">
                {/* Background image for the card */}
                <div 
                  className="absolute inset-0 z-0 rounded-3xl"
                  style={{
                    // backgroundImage: `url('https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80')`,
                    backgroundSize: 'cover',
                    backgroundPosition: 'center',
                    backgroundRepeat: 'no-repeat',
                    opacity: 0.3,
                  }}
                />
                
                {/* Content */}
                <div className="relative z-10 p-6 flex-1 flex flex-col">
                  {/* Image and text side by side */}
                  <div className="flex flex-col sm:flex-row items-center sm:items-start gap-6 flex-1">
                    {/* Modern therapy-related illustration */}
                    <div className="relative flex-shrink-0">
                      <img
                        src="/mmmfil.jpeg"
                        alt="Nathalie Mac Guffie, LCSW - Your therapist"
                        className="w-32 h-32 sm:w-40 sm:h-40 md:w-48 md:h-48 select-none rounded-full object-cover shadow-lg"
                        loading="lazy"
                      />
                      <motion.div
                        className="pointer-events-none absolute inset-0 rounded-full"
                        animate={{ opacity: [0.3, 0.6, 0.3] }}
                        transition={{ duration: 3, repeat: Infinity }}
                        style={{ background: "radial-gradient(circle, rgba(244,114,182,0.15), transparent 70%), radial-gradient(circle, rgba(251,146,60,0.12), transparent 70%)" }}
                      />
                    </div>
                    {/* Text content */}
                    <div className="flex-1 text-center sm:text-left flex flex-col justify-center">
                      <h3 className="text-2xl font-bold mb-4 text-foreground">Let's Begin Your Healing Journey</h3>
                      <div className="space-y-3 text-muted-foreground leading-relaxed">
                        <p>
                          Taking the first step toward therapy can feel daunting, but you're not alone. I'm here to support
                          you through every stage of your journey toward wellness and growth.
                        </p>
                        <p>
                          Whether you're seeking help for yourself or your child, I provide a warm, non-judgmental space where 
                          healing can begin. My approach is relationship-based and tailored to meet your unique needs.
                        </p>
                        <p>
                          Reach out today to schedule a consultation. Together, we can explore how therapy can support you 
                          in creating positive change and building resilience.
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </motion.div>

          {/* Right: Contact form */}
          <motion.div
            initial={{ opacity: 0, x: 50 }}
            animate={isInView ? { opacity: 1, x: 0 } : {}}
            transition={{ duration: 0.6, delay: 0.4 }}
          >
            <Card className="border border-border/50 bg-card/70 backdrop-blur-sm">
              <CardContent className="p-6 md:p-8">
                <h3 className="mb-6 text-2xl font-bold text-foreground">Send a Message</h3>
                <form onSubmit={handleSubmit} className="space-y-4">
                  <div>
                    <Input
                      placeholder="Your Name"
                      value={formData.name}
                      onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                      required
                      className="bg-card text-foreground dark:text-zinc-100 placeholder:text-muted-foreground dark:placeholder:text-zinc-400 border-border focus-visible:ring-rose-500"
                    />
                  </div>
                  <div>
                    <Input
                      type="email"
                      placeholder="Email Address"
                      value={formData.email}
                      onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                      required
                      className="bg-card text-foreground dark:text-zinc-100 placeholder:text-muted-foreground dark:placeholder:text-zinc-400 border-border focus-visible:ring-rose-500"
                    />
                  </div>
                  <div>
                    <Input
                      type="tel"
                      placeholder="Phone Number"
                      value={formData.phone}
                      onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                      className="bg-card text-foreground dark:text-zinc-100 placeholder:text-muted-foreground dark:placeholder:text-zinc-400 border-border focus-visible:ring-rose-500"
                    />
                  </div>
                  <div>
                    <Textarea
                      placeholder="Tell me a bit about what brings you to therapy..."
                      rows={6}
                      value={formData.message}
                      onChange={(e) => setFormData({ ...formData, message: e.target.value })}
                      required
                      className="bg-card text-foreground dark:text-zinc-100 placeholder:text-muted-foreground dark:placeholder:text-zinc-400 border-border focus-visible:ring-rose-500"
                    />
                  </div>
                  <Button
                    type="submit"
                    className="w-full cursor-pointer bg-gradient-to-r from-rose-500 to-pink-600 text-white transition-all hover:from-rose-600 hover:to-pink-700 hover:scale-[1.02]"
                    size="lg"
                  >
                    <Send className="mr-2 h-5 w-5" />
                    Send Message
                  </Button>
                </form>
              </CardContent>
            </Card>
          </motion.div>
        </div>
      </div>
    </section>
  );
}