'use client';

import { motion } from "framer-motion";
import { useInView } from "framer-motion";
import { useRef, useEffect, useState } from "react";
import { Award, Heart, Users } from "lucide-react";

export function About() {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: "-100px" });
  const [isDark, setIsDark] = useState(false);

  useEffect(() => {
    const checkTheme = () => {
      setIsDark(document.documentElement.classList.contains('dark'));
    };
    
    checkTheme();
    const observer = new MutationObserver(checkTheme);
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ['class']
    });
    
    return () => observer.disconnect();
  }, []);

  const credentials = [
    {
      icon: Award,
      title: "Licensed Mental Health Counselor (LMHC)",
      description: "Florida licensed with 30 years of experience",
    },
    {
      icon: Heart,
      title: "Trauma-Focused Specialist",
      description: "Certified in TF-CBT for trauma recovery",
    },
    {
      icon: Users,
      title: "Infant Mental Health & Play Therapy",
      description: "Registered Play Therapist (RPT-S) and IMH Endorsement",
    },
  ];

  return (
    <section 
      id="about"
      ref={ref} 
      className="relative py-20 px-4 overflow-hidden"
    >
      {/* Background Image */}
      <div 
        className="absolute inset-0 z-0"
        style={{
          // backgroundImage: `url('https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?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 overflow-hidden z-[3]">
        <motion.div
          className="absolute top-10 left-10 w-64 h-64 bg-cyan-100 dark:bg-cyan-900/20 rounded-full mix-blend-multiply dark:mix-blend-lighten filter blur-xl opacity-30 dark:opacity-50"
          animate={{
            x: [0, 80, 0],
            y: [0, 40, 0],
            scale: [1, 1.1, 1],
          }}
          transition={{
            duration: 18,
            repeat: Infinity,
            ease: 'easeInOut',
          }}
        />
        <motion.div
          className="absolute bottom-20 right-10 w-80 h-80 bg-emerald-100 dark:bg-emerald-900/20 rounded-full mix-blend-multiply dark:mix-blend-lighten filter blur-xl opacity-30 dark:opacity-50"
          animate={{
            x: [0, -80, 0],
            y: [0, 60, 0],
            scale: [1, 1.15, 1],
          }}
          transition={{
            duration: 22,
            repeat: Infinity,
            ease: 'easeInOut',
          }}
        />
      </div>

      <div className="container max-w-6xl mx-auto relative z-10">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.8 }}
          className="text-center mb-16"
        >
          <motion.h2
            className="text-4xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-rose-600 via-pink-600 to-orange-600 bg-clip-text text-transparent"
            initial={{ opacity: 0, y: 20 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8, delay: 0.2 }}
          >
            Meet Nathalie Mac-Guffie
          </motion.h2>
          <motion.p
            className="text-xl text-muted-foreground max-w-3xl mx-auto"
            initial={{ opacity: 0, y: 20 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8, delay: 0.4 }}
          >
            A dedicated mental health professional specializing in helping children 
            under 10 and their families navigate trauma, emotional challenges, and 
            developmental needs.
          </motion.p>
        </motion.div>

        <div className="grid md:grid-cols-2 gap-12 items-center mb-16">
          <motion.div
            initial={{ opacity: 0, x: -50 }}
            animate={isInView ? { opacity: 1, x: 0 } : {}}
            transition={{ duration: 0.8, delay: 0.2 }}
          >
            <div className="bg-gradient-to-br from-rose-100/15 via-pink-100/15 to-orange-100/15 dark:from-rose-900/15 dark:via-pink-900/15 dark:to-orange-900/15 rounded-3xl p-8 border border-border/50 backdrop-blur-sm">
              <motion.h3
                className="text-2xl font-semibold mb-4 bg-gradient-to-r from-rose-600 via-pink-600 to-orange-600 bg-clip-text text-transparent"
                initial={{ opacity: 0 }}
                animate={isInView ? { opacity: 1 } : {}}
                transition={{ duration: 0.8, delay: 0.3 }}
              >
                My Approach
              </motion.h3>
              <div className="flex flex-col sm:flex-row items-center sm:items-start gap-6">
                <div className="relative flex-shrink-0">
                  <img
                    src="/hshot.jpeg"
                    alt="Nathalie Mac-Guffie supporting clients"
                    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(153,246,228,0.18), transparent 70%), radial-gradient(circle, rgba(20,184,166,0.12), transparent 70%)",
                    }}
                  />
                </div>
                <div className="text-center sm:text-left">
                  <p className="text-muted-foreground mb-4 leading-relaxed">
                    I provide person-centered guidance, following your child's lead while 
                    drawing out their strengths and incorporating effective coping skills. 
                    My interventions are relationship-based, creating a warm, non-judgmental 
                    space for growth and healing.
                  </p>
                  <p className="text-muted-foreground leading-relaxed">
                    Together, we'll set realistic, measurable, and achievable goals with 
                    clear objectives tailored to your family's unique needs.
                  </p>
                </div>
              </div>
            </div>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, x: 50 }}
            animate={isInView ? { opacity: 1, x: 0 } : {}}
            transition={{ duration: 0.8, delay: 0.4 }}
            className="space-y-6"
          >
            {credentials.map((cred, index) => {
              const Icon = cred.icon;
              return (
                <motion.div
                  key={cred.title}
                  initial={{ opacity: 0, y: 20 }}
                  animate={isInView ? { opacity: 1, y: 0 } : {}}
                  transition={{ duration: 0.5, delay: 0.6 + index * 0.1 }}
                  className="bg-card/50 backdrop-blur-sm rounded-2xl p-6 border border-border/50 hover:border-rose-500/50 hover:scale-105 transition-all cursor-pointer"
                >
                  <div className="flex items-start gap-4">
                    <motion.div 
                      className="bg-gradient-to-br from-rose-500/20 via-pink-500/20 to-orange-500/20 dark:from-rose-500/30 dark:via-pink-500/30 dark:to-orange-500/30 p-3 rounded-xl"
                      whileHover={{ scale: 1.1, rotate: 5 }}
                      transition={{ duration: 0.2 }}
                    >
                      <Icon className="h-6 w-6 text-rose-600 dark:text-rose-400" />
                    </motion.div>
                    <div>
                      <motion.h4
                        className="font-semibold mb-2 text-foreground"
                        initial={{ opacity: 0, x: -10 }}
                        animate={isInView ? { opacity: 1, x: 0 } : {}}
                        transition={{ duration: 0.5, delay: 0.7 + index * 0.1 }}
                      >
                        {cred.title}
                      </motion.h4>
                      <motion.p
                        className="text-sm text-muted-foreground"
                        initial={{ opacity: 0 }}
                        animate={isInView ? { opacity: 1 } : {}}
                        transition={{ duration: 0.5, delay: 0.8 + index * 0.1 }}
                      >
                        {cred.description}
                      </motion.p>
                    </div>
                  </div>
                </motion.div>
              );
            })}
          </motion.div>
        </div>

        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.8, delay: 0.5 }}
          className="bg-card/60 dark:bg-background/80 backdrop-blur-sm border border-border/50 rounded-3xl p-8 mt-16"
        >
          <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-8">
            <div className="max-w-2xl">
              <motion.h3
                className="text-2xl font-semibold mb-4 bg-gradient-to-r from-rose-600 via-pink-600 to-orange-600 bg-clip-text text-transparent"
                initial={{ opacity: 0 }}
                animate={isInView ? { opacity: 1 } : {}}
                transition={{ duration: 0.8, delay: 0.6 }}
              >
                Professional Qualifications
              </motion.h3>
              <p className="text-muted-foreground leading-relaxed">
                Nathalie Mac-Guffie brings more than three decades of licensed experience serving children, caregivers, and families 
                across South Florida. Her practice is grounded in ongoing professional development and nationally recognized credentials.
              </p>
            </div>
            <motion.a
              href="https://www.psychologytoday.com/us/therapists/nathalie-mac-guffie-miami-fl/1203864"
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center justify-center self-start rounded-xl border border-border px-4 py-2 text-sm font-medium text-rose-600 dark:text-rose-400 hover:underline transition"
              initial={{ opacity: 0, y: 10 }}
              animate={isInView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.6, delay: 0.7 }}
            >
              View Psychology Today Verification
            </motion.a>
          </div>
          <div className="mt-8 grid gap-6 md:grid-cols-2">
            <div className="space-y-4">
              <div>
                <p className="text-sm font-semibold text-foreground uppercase tracking-wide">Verification</p>
                <p className="text-sm text-muted-foreground">
                  Verified by Psychology Today • Licensed by the State of Florida (LMHC #MH5585)
                </p>
              </div>
              <div>
                <p className="text-sm font-semibold text-foreground uppercase tracking-wide">Education</p>
                <p className="text-sm text-muted-foreground">
                  Barry University — Master of Science in Mental Health Counseling (1994)
                </p>
              </div>
            </div>
            <div className="space-y-4">
              <div>
                <p className="text-sm font-semibold text-foreground uppercase tracking-wide">Additional Credentials</p>
                <p className="text-sm text-muted-foreground">
                  Licensed Mental Health Counselor • Registered Play Therapist-Supervisor (Association of Play Therapy)
                </p>
              </div>
              <div>
                <p className="text-sm font-semibold text-foreground uppercase tracking-wide">Specialized Expertise</p>
                <p className="text-sm text-muted-foreground">
                  Trauma-Focused CBT • Infant Mental Health • Dyadic and Relationship-Based Therapy
                </p>
              </div>
            </div>
          </div>
        </motion.div>
      </div>
    </section>
  );
}