"use client";

import { BackgroundRippleEffect } from "@/components/ui/background-ripple-effect";
import { motion } from "motion/react";
import Link from "next/link";

export default function Hero() {
  return (
    <div className="relative isolate px-6 pt-14 lg:px-8">
      <BackgroundRippleEffect rows={14} cols={18} />
      <section className="mx-auto max-w-2xl lg:max-w-4xl py-32 sm:py-48 lg:py-56">
        <div className="text-center">
          <h1 className="relative z-10 text-5xl font-semibold tracking-tight sm:text-7xl">
            Sensible Scholars <span className="text-gradient">Tutoring</span>
          </h1>
          <p className="text-lg font-medium text-pretty text-gray-709 sm:text-xl/8 pt-2 sm:pt-1">
            Beyond the Classroom: Deeper Learning, Lasting Success.
          </p>
        </div>
        <motion.div
          className="mt-6 flex justify-center"
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.2 }}
        >
          <motion.div
            className="relative z-10"
            whileHover={{ scale: 1.25 }}
            whileTap={{ scale: 1.1 }}
            transition={{ type: "spring", stiffness: 400, damping: 17 }}
            // className="relative rounded-full px-3 py-1 text-sm/6 ring-1 ring-black/20 shadow-lg bg-white/30  hover:shadow-indigo-600/20 hover:ring-indigo-600/40 hover:bg-white/50"
          >
            <Link
              href="/get-started"
              className="relative inline-flex h-8 overflow-hidden rounded-full p-px focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50 shadow-lg"
            >
              <span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]" />
              <span className="inline-flex h-full mx-auto my-auto w-full cursor-pointer items-center justify-center rounded-full bg-white px-3 py-1 text-sm font-medium z-10">
                <span className="">
                  Get started with our{" "}
                  <span className="font-semibold text-gradient underline decoration-2 decoration-slate-400/70 hover:decoration-slate-400/90">
                    free 20 minute consultation &rarr;
                  </span>
                </span>
              </span>
            </Link>
          </motion.div>
        </motion.div>
      </section>
    </div>
  );
}