import { motion } from "framer-motion";
import {
  Apple, Stethoscope, Activity, ClipboardList,
  Heart, MessageCircle, ChevronDown,
} from "lucide-react";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

const services = [
  {
    icon: Apple,
    title: "Nutrition Support",
    desc: "Personalized nutrition guidance from registered dietitians to support healing, strength, and long-term health.",
  },
  {
    icon: Stethoscope,
    title: "Ongoing Clinical Check-Ins",
    desc: "Regular check-ins from nurses, dietitians, and care navigators to monitor how you're feeling and progressing.",
  },
  {
    icon: Activity,
    title: "Recovery & Progress Tracking",
    desc: "Patient-friendly tools to track activity, nutrition, sleep, and symptoms so clinicians can adjust your care.",
  },
  {
    icon: ClipboardList,
    title: "Recovery Planning & Preparation",
    desc: "We help you set expectations and plan at home so you and your support system feel confident.",
  },
  {
    icon: Heart,
    title: "Lifestyle & Routine Coaching",
    desc: "Support building healthy routines—hydration, gentle movement, nutrition consistency, and sleep habits.",
  },
  {
    icon: MessageCircle,
    title: "Timely Access to Your Care Team",
    desc: "Our virtual model enables timely communication to get answers and support when questions arise.",
  },
];

const nutritionSpecialties = [
  { title: "Diabetes", desc: "Medical nutrition therapy to improve glycemic control through individualized meal planning and carbohydrate management." },
  { title: "Cardiovascular Disease & Hypertension", desc: "Optimizing sodium intake, improving lipid profiles, and promoting heart-healthy dietary patterns." },
  { title: "Chronic Kidney Disease", desc: "Tailored nutrition to manage protein, potassium, phosphorus, and sodium needs." },
  { title: "Weight Management & Obesity", desc: "Evidence-based approaches focused on behavior change, metabolic health, and long-term sustainability." },
  { title: "Nutrition for Aging", desc: "Addressing muscle preservation, bone health, appetite changes, and chronic disease prevention." },
  { title: "Metabolic Syndrome", desc: "Improving dietary quality and supporting cardiometabolic health through sustainable changes." },
  { title: "Malnutrition", desc: "Assessing nutritional status and implementing interventions to improve intake and support recovery." },
  { title: "Sports Nutrition", desc: "Optimizing fueling, hydration, recovery, and body composition for athletes and active individuals." },
  { title: "Endocrine Disorders", desc: "Targeted nutrition education and lifestyle counseling for thyroid and metabolic conditions." },
  { title: "Surgical Optimization", desc: "Optimizing nutritional status pre- and post-surgery to support healing and reduce complications." },
];

const fadeUp = {
  hidden: { opacity: 0, y: 30 },
  visible: (i: number) => ({
    opacity: 1, y: 0,
    transition: { duration: 0.5, delay: i * 0.08 },
  }),
};

const ServicesSection = () => {
  return (
    <section id="services" className="py-20 md:py-28 bg-section-alt">
      <div className="container mx-auto px-4">
        <motion.div
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: "-100px" }}
          className="max-w-3xl mx-auto text-center mb-16"
        >
          <motion.span variants={fadeUp} custom={0} className="text-sm font-semibold tracking-widest uppercase text-primary mb-3 block">
            Our Services
          </motion.span>
          <motion.h2 variants={fadeUp} custom={1} className="text-3xl md:text-4xl font-serif text-foreground mb-6">
            How We Support You
          </motion.h2>
          <motion.p variants={fadeUp} custom={2} className="text-lg text-muted-foreground leading-relaxed">
            We stay in touch before and after your surgery and beyond. Our goal is to help you feel supported and confident.
          </motion.p>
        </motion.div>

        {/* Service cards */}
        <motion.div
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: "-50px" }}
          className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-16"
        >
          {services.map((svc, i) => (
            <motion.div
              key={svc.title}
              variants={fadeUp}
              custom={i}
              className="p-6 rounded-xl bg-card border border-border hover:shadow-lg transition-shadow"
            >
              <div className="w-12 h-12 rounded-lg bg-teal-light flex items-center justify-center mb-4">
                <svc.icon className="w-6 h-6 text-primary" />
              </div>
              <h3 className="text-lg font-semibold text-foreground mb-2">{svc.title}</h3>
              <p className="text-sm text-muted-foreground leading-relaxed">{svc.desc}</p>
            </motion.div>
          ))}
        </motion.div>

        {/* Nutrition specialties accordion */}
        <motion.div
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: "-50px" }}
          className="max-w-2xl mx-auto"
        >
          <motion.h3 variants={fadeUp} custom={0} className="text-2xl font-serif text-foreground text-center mb-6">
            Nutrition Specialties
          </motion.h3>
          <motion.p variants={fadeUp} custom={1} className="text-center text-muted-foreground mb-8">
            Our registered dietitians specialize in a wide range of conditions.
          </motion.p>
          <motion.div variants={fadeUp} custom={2}>
            <Accordion type="single" collapsible className="space-y-2">
              {nutritionSpecialties.map((spec, i) => (
                <AccordionItem
                  key={i}
                  value={`spec-${i}`}
                  className="border border-border rounded-lg bg-card px-4"
                >
                  <AccordionTrigger className="text-sm font-semibold text-foreground hover:no-underline">
                    {spec.title}
                  </AccordionTrigger>
                  <AccordionContent className="text-sm text-muted-foreground leading-relaxed">
                    {spec.desc}
                  </AccordionContent>
                </AccordionItem>
              ))}
            </Accordion>
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
};

export default ServicesSection;