import { motion } from "motion/react";
import { useState } from "react";
import Image from "next/image";

const posts = [
  {
    id: 1,
    title: "All in all absolutely a 10/10, and I would highly recommend them.",
    href: "#",
    description:
      "My time with Joseph has been great, he really helped me understand the concepts I was learning. Without him I definitely would have failed at least one class so I am forever grateful. The sensible scholars portal is easy to use and very user-friendly. All in all absolutely a 10/10 and I would highly recommend them.",
    date: "September, 2025",
    datetime: "2020-03-16",
    category: { title: "Online Tutoring", href: "#" },
    author: {
      name: "Marcos",
      role: "First Year College Student",
      href: "#",
      imageUrl: "/marcos.jpg",
    },
  },
  {
    id: 2,
    title:
      "Joe is a fantastic teacher who has truly made a difference for our children.",
    href: "#",
    description: `We have been using Joe's tutoring services for the past few months, and it has been an outstanding experience. Joe is a fantastic teacher who has truly made a difference for our children.
Our daughter was struggling with her Honors Physics class, and after just one session with Joe, she was able to grasp the concepts with ease. His clear explanations and patient teaching style helped her regain confidence and perform much better in class.
Joe has also been working with our son on Algebra, and we've seen a significant improvement in both his grades and his confidence since starting tutoring sessions.
Joe and his team communicate effectively and always follow through, making the entire process smooth and reliable. We highly recommend Joe and his team for any academic tutoring or support needs — their professionalism, expertise, and genuine care for their students truly set them apart.`,
    date: "November, 2025",
    datetime: "2020-03-10",
    category: { title: "Group Tutoring", href: "#" },
    author: {
      name: "Mari & Jeff",
      role: "Parents of High School Students",
      href: "#",
      imageUrl: "/mari.jpg",
    },
  },
  {
    id: 3,
    title:
      "Working with Sensible Scholars has changed the path of my academic career.",
    href: "#",
    description:
      "Working with Sensible Scholars has changed the path of my academic career and I couldn't be happier with the results that are reflected in my grades. As a college student, homework, tests, and exams can be overwhelming and difficult to prepare for. Sensible Scholars not only helps me prepare for my exams but also helps me organize my work. As someone who often struggled in math I wanted to make sure I had the proper support going into my first year of college, utilizing the services of Sensible Scholars has now made math my most successful class. The tutoring sessions are easy to understand, straightforward, and beyond helpful. I recommend Sensible Scholars to any student who wants to take their education to the next level.",
    date: "August, 2025",
    datetime: "2020-02-12",
    category: { title: "In-Person Tutoring", href: "#" },
    author: {
      name: "David",
      role: "Italian Exchange Student",
      href: "#",
      imageUrl: "/david.jpg",
    },
  },
];

export default function Testimonials() {
  const [expandedPosts, setExpandedPosts] = useState<boolean[]>([
    false,
    false,
    false,
  ]);

  return (
    <>
      <div
        aria-hidden="true"
        className="absolute inset-x-0 -z-10 transform-gpu overflow-hidden blur-3xl -translate-y-60 sm:-translate-y-80"
      >
        <div
          style={{
            clipPath:
              "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
          }}
          className="relative rotate-12 aspect-1000/900 sm:aspect-1155/700 w-144.5-translate-x-1/2 bg-linear-to-r from-indigo-600 via-red-200 to-red-500 opacity-30 sm:w-288.75 max-w-7xl mx-auto"
        />
      </div>

      <section className="pt-24 sm:pt-32">
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          <motion.div
            className="mx-auto max-w-2xl lg:mx-0"
            initial={{ opacity: 0, y: -20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.25, delay: 0.1 }}
          >
            <h2 className="text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">
              From the Students
            </h2>
            <p className="mt-2 text-lg/8 text-gray-600">
              Listen to what our clients have to say about their experiences.
            </p>
          </motion.div>
          <div className="inline-flex items-center justify-center w-full">
            <hr className="w-full h-1 my-8 button-gradient opacity-50 border-0 rounded-sm dark:bg-gray-700" />
            <div className="absolute px-4 -translate-x-1/2 bg-white/20 backdrop-blur-sm rounded-full left-1/2 dark:bg-gray-900">
              <svg
                className="w-4 h-4 text-gray-700 dark:text-gray-300"
                aria-hidden="true"
                xmlns="http://www.w3.org/2000/svg"
                fill="currentColor"
                viewBox="0 0 18 14"
              >
                <path d="M6 0H2a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4v1a3 3 0 0 1-3 3H2a1 1 0 0 0 0 2h1a5.006 5.006 0 0 0 5-5V2a2 2 0 0 0-2-2Zm10 0h-4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4v1a3 3 0 0 1-3 3h-1a1 1 0 0 0 0 2h1a5.006 5.006 0 0 0 5-5V2a2 2 0 0 0-2-2Z" />
              </svg>
            </div>
          </div>
          <motion.div
            className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-3"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.2 }}
          >
            {posts.map((post) => (
              <article
                key={post.id}
                className="flex max-w-xl flex-col items-start justify-between"
              >
                <div className="flex items-center gap-x-4 text-xs">
                  <time dateTime={post.datetime} className="text-gray-500">
                    {post.date}
                  </time>
                  <p className="relative z-10 rounded-full bg-indigo-100 px-3 py-1.5 font-medium text-gray-600 hover:bg-indigo-200">
                    {post.category.title}
                  </p>
                </div>
                <div className="group relative grow">
                  <h3 className="mt-3 text-lg/6 font-semibold text-gray-900">
                    {/* <a href={post.href}>
                      <span className="absolute inset-0" />
                      {post.title}
                    </a> */}
                    <div>{post.title}</div>
                  </h3>
                  <div className="mt-5 text-sm/6 text-gray-600">
                    <p
                      className={
                        expandedPosts[posts.indexOf(post)] ? "" : "line-clamp-4"
                      }
                    >
                      {post.description}
                    </p>
                    <motion.button
                      className="mt-4 text-sm font-medium text-indigo-600 hover:text-indigo-500 cursor-pointer"
                      whileHover={{ scale: 1.05 }}
                      whileTap={{ scale: 0.95, rotate: -2 }}
                      transition={{
                        type: "spring",
                        stiffness: 400,
                        damping: 17,
                      }}
                      onClick={() => {
                        const newExpandedPosts = [...expandedPosts];
                        newExpandedPosts[posts.indexOf(post)] =
                          !newExpandedPosts[posts.indexOf(post)];
                        setExpandedPosts(newExpandedPosts);
                      }}
                    >
                      {expandedPosts[posts.indexOf(post)]
                        ? "Show less \u2191"
                        : "Read more \u2193"}
                    </motion.button>
                  </div>
                </div>
                <div className="relative mt-8 flex items-center gap-x-4 justify-self-end">
                  <Image
                    width={40}
                    height={40}
                    alt={post.author.name}
                    src={post.author.imageUrl}
                    className="size-10 rounded-full bg-gray-50"
                  />
                  <div className="text-sm/6">
                    <p className="font-semibold text-gray-900">
                      {post.author.name}
                    </p>
                    <p className="text-gray-600">{post.author.role}</p>
                  </div>
                </div>
              </article>
            ))}
          </motion.div>
        </div>
      </section>
    </>
  );
}