import { motion } from "framer-motion";
import { FileText, Calendar, UserCircle, ExternalLink } from "lucide-react";

const resources = [
  {
    icon: FileText,
    title: "Patient Consent Forms",
    desc: "Review and complete your consent forms before your first visit.",
    href: "#",
    linkLabel: "Coming Soon",
    disabled: true,
  },
  {
    icon: Calendar,
    title: "Online Scheduling",
    desc: "Book or manage your upcoming appointments easily.",
    href: "#",
    linkLabel: "Coming Soon",
    disabled: true,
  },
  {
    icon: UserCircle,
    title: "Patient Portal Login",
    desc: "Message your care team or check on your appointments.",
    href: "https://pp-wfe-102.advancedmd.com/156981/account/logon",
    linkLabel: "Open Portal",
    disabled: false,
  },
];

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

const ResourcesSection = () => {
  return (
    <section id="resources" 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">
            Resources
          </motion.span>
          <motion.h2 variants={fadeUp} custom={1} className="text-3xl md:text-4xl font-serif text-foreground mb-6">
            Patient Resources
          </motion.h2>
          <motion.p variants={fadeUp} custom={2} className="text-lg text-muted-foreground">
            Helpful links for your journey.
          </motion.p>
        </motion.div>

        <motion.div
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: "-50px" }}
          className="grid md:grid-cols-3 gap-6 max-w-4xl mx-auto"
        >
          {resources.map((res, i) => (
            <motion.div
              key={res.title}
              variants={fadeUp}
              custom={i}
              className="p-6 rounded-xl bg-card border border-border text-center"
            >
              <div className="w-12 h-12 rounded-lg bg-teal-light flex items-center justify-center mx-auto mb-4">
                <res.icon className="w-6 h-6 text-primary" />
              </div>
              <h3 className="text-lg font-semibold text-foreground mb-2">{res.title}</h3>
              <p className="text-sm text-muted-foreground mb-4">{res.desc}</p>
              {res.disabled ? (
                <span className="text-sm text-muted-foreground/60 italic">{res.linkLabel}</span>
              ) : (
                <a
                  href={res.href}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex items-center gap-1 text-sm font-semibold text-primary hover:underline"
                >
                  {res.linkLabel}
                  <ExternalLink className="w-3.5 h-3.5" />
                </a>
              )}
            </motion.div>
          ))}
        </motion.div>
      </div>
    </section>
  );
};

export default ResourcesSection;