import {
  AcademicCapIcon,
  BanknotesIcon,
  CalendarDateRangeIcon,
  CloudArrowUpIcon,
} from "@heroicons/react/24/solid";
import { motion } from "motion/react";
import Image from "next/image";

const features = [
  {
    name: "High Quality Tutors",
    description:
      "We only hire tutors who have been high-performing students with previous teaching experience. Most of our tutors are currently pursuing PhDs or Masters in their respective fields.",
    icon: AcademicCapIcon,
  },
  {
    name: "Negotiable Pricing",
    description:
      "We determine pricing on a case-by-case basis during our free consultation to best accommodate the needs of both students and tutors.",
    icon: BanknotesIcon,
  },
  {
    name: "Flexible Scheduling",
    description:
      "We offer both in-person and online session options and can accommodate different time zones.",
    icon: CalendarDateRangeIcon,
  },
  {
    name: "Modern, Accessible Platform",
    description:
      "Our platform uses the latest web technologies to ensure a seamless connection between students and tutors on all devices.",
    icon: CloudArrowUpIcon,
  },
];

export default function WhyUs() {
  return (
    <section className="overflow-hidden pt-24 sm:pt-32">
      <div className="mx-auto max-w-7xl px-6 lg:px-8">
        <div className="mx-auto grid items-center max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
          <div className="lg:mt-4 lg:pr-8">
            <div className="lg:max-w-lg">
              <motion.h2
                className="mt-2 text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl"
                initial={{ opacity: 0, y: -20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: 0.1 }}
              >
                Why Choose{" "}
                <span className="text-gradient">Sensible Scholars?</span>
              </motion.h2>
              <motion.p
                className="pt-4 text-base/7 text-indigo-600/80"
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.25, delay: 0.1 }}
              >
                We make learning the best it can possibly be.
              </motion.p>
              <dl className="mt-6 max-w-xl space-y-8 text-base/7 text-gray-600 lg:max-w-none">
                {features.map((feature) => (
                  <motion.div
                    key={feature.name}
                    className="relative pl-9"
                    initial={{ opacity: 0, y: 20 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    transition={{
                      duration: 0.5,
                      delay: 0.1 + features.indexOf(feature) * 0.05,
                    }}
                  >
                    <dt className="inline font-semibold text-gray-900">
                      <feature.icon
                        aria-hidden="true"
                        className="absolute top-1 left-1 size-5 text-indigo-600"
                      />
                      {feature.name}
                    </dt>{" "}
                    <dd className="inline">{feature.description}</dd>
                  </motion.div>
                ))}
              </dl>
            </div>
          </div>
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.1 }}
          >
            <Image
              alt="Product screenshot"
              src="/portal-page.png"
              width={2432}
              height={1442}
              className="w-3xl max-w-none rounded-xl shadow-xl ring-1 ring-gray-400/10 sm:w-228 md:-ml-4 lg:-ml-0"
            />
          </motion.div>
        </div>
      </div>
      <div
        aria-hidden="true"
        className="absolute inset-x-0 -z-10 transform-gpu overflow-hidden blur-3xl sm:-translate-y-30 sm:-translate-x-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-180 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>
  );
}