import { motion } from "framer-motion";
import { Stethoscope, Users, Salad, HeartPulse } from "lucide-react";

const teamRoles = [
  { icon: Stethoscope, label: "Doctors (MDs)" },
  { icon: Users, label: "Physician Assistants (PAs)" },
  { icon: Salad, label: "Registered Dietitians (RDs)" },
  { icon: HeartPulse, label: "Nurses & Health Coaches" },
];

const differentiators = [
  "Your surgeon will still see you for surgery appointments.",
  "We are the team that checks on you between those visits.",
  "We make sure your home, body, and support system are ready.",
  "We answer your questions and help when you're unsure what to do.",
];

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

const AboutSection = () => {
  return (
    <section id="about" className="py-20 md:py-28 bg-background">
      <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">
            About Us
          </motion.span>
          <motion.h2 variants={fadeUp} custom={1} className="text-3xl md:text-4xl font-serif text-foreground mb-6">
            Who We Are
          </motion.h2>
          <motion.p variants={fadeUp} custom={2} className="text-lg text-muted-foreground leading-relaxed">
            We support you before and after surgery—helping your body get strong and ready, 
            checking in to help you heal, and supporting your diet, activity, and routines for long-term lifestyle changes.
          </motion.p>
        </motion.div>

        {/* Team roles */}
        <motion.div
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: "-50px" }}
          className="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 mb-20"
        >
          {teamRoles.map((role, i) => (
            <motion.div
              key={role.label}
              variants={fadeUp}
              custom={i}
              className="flex flex-col items-center text-center p-6 rounded-xl bg-teal-light"
            >
              <role.icon className="w-8 h-8 text-primary mb-3" />
              <span className="text-sm font-semibold text-foreground">{role.label}</span>
            </motion.div>
          ))}
        </motion.div>

        {/* What makes us different */}
        <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-8">
            What Makes Us Different
          </motion.h3>
          <div className="space-y-4">
            {differentiators.map((item, i) => (
              <motion.div
                key={i}
                variants={fadeUp}
                custom={i + 1}
                className="flex items-start gap-4 p-4 rounded-lg bg-card border border-border"
              >
                <div className="w-2 h-2 rounded-full bg-coral mt-2 shrink-0" />
                <p className="text-foreground">{item}</p>
              </motion.div>
            ))}
          </div>
        </motion.div>
      </div>
    </section>
  );
};

export default AboutSection;