// "use client";

// import { motion } from "motion/react";

// export default function OurServices() {
//   return (
//     <div className="pt-24 sm:pt-32">
//       <section className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
//         <motion.h2
//           className="text-center text-base/7 font-semibold text-indigo-700"
//           initial={{ opacity: 0, y: -20 }}
//           whileInView={{ opacity: 1, y: 0 }}
//           transition={{ duration: 0.5 }}
//         >
//           Learn In a Better Way
//         </motion.h2>
//         <motion.p
//           className="mx-auto mt-2 max-w-lg text-center text-4xl font-semibold tracking-tight sm:text-5xl"
//           initial={{ opacity: 0, y: -20 }}
//           whileInView={{ opacity: 1, y: 0 }}
//           transition={{ duration: 0.5, delay: 0.1 }}
//         >
//           Our Services
//         </motion.p>
//         <div className="mt-10 grid gap-4 sm:mt-16 lg:grid-cols-3 lg:grid-rows-2">
//           <motion.div
//             className="relative lg:row-span-2"
//             initial={{ opacity: 0, y: 20 }}
//             whileInView={{ opacity: 1, y: 0 }}
//             transition={{ delay: 0.2, duration: 0.2 }}
//           >
//             <div className="absolute inset-px rounded-lg bg-white/30 outline outline-black/5 lg:rounded-l-4xl" />
//             <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-l-[calc(2rem+1px)]">
//               <div className="px-8 pt-8 pb-3 sm:px-10 sm:pt-10 sm:pb-0">
//                 <p className="mt-2 text-lg font-medium tracking-tight max-lg:text-center">
//                   Tutoring at All Grade Levels
//                 </p>
//                 <p className="mt-2 text-sm/6 text-gray-600 max-lg:text-center">
//                   Our tutors cover a wide range of subjects and grade levels,
//                 </p>
//               </div>
//               <div className="@container relative min-h-120 w-full grow max-lg:mx-auto max-lg:max-w-sm">
//                 <div className="absolute inset-x-10 top-10 bottom-0 overflow-hidden rounded-t-[12cqw] border-x-[3cqw] border-t-[3cqw] border-gray-700 bg-gray-900 outline outline-white/20">
//                   <img
//                     alt=""
//                     src="https://tailwindcss.com/plus-assets/img/component-images/bento-03-mobile-friendly.png"
//                     className="size-full object-cover object-top"
//                   />
//                 </div>
//               </div>
//             </div>
//             <div className="pointer-events-none absolute inset-px rounded-lg shadow-sm outline outline-white/15 lg:rounded-l-4xl" />
//           </motion.div>
//           <motion.div
//             className="relative max-lg:row-start-1"
//             initial={{ opacity: 0, y: 20 }}
//             whileInView={{
//               opacity: 1,
//               y: 0,
//               transition: { delay: 0.2, duration: 0.2 },
//             }}
//           >
//             <div className="absolute inset-px rounded-lg bg-white/30 outline outline-black/5 max-lg:rounded-t-4xl" />
//             <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)]">
//               <div className="px-8 pt-8 sm:px-10 sm:pt-10">
//                 <p className="mt-2 text-lg font-medium tracking-tight max-lg:text-center">
//                   SAT / ACT Prep
//                 </p>
//                 <p className="mt-2 text-sm/6 text-gray-600 max-lg:text-center">
//                   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.
//                 </p>
//               </div>
//               <div className="flex flex-1 items-center justify-center px-8 max-lg:pt-10 max-lg:pb-12 sm:px-10 lg:pb-2">
//                 <img
//                   alt=""
//                   src="https://tailwindcss.com/plus-assets/img/component-images/dark-bento-03-performance.png"
//                   className="w-full max-lg:max-w-xs"
//                 />
//               </div>
//             </div>
//             <div className="pointer-events-none absolute inset-px rounded-lg shadow-sm outline outline-white/15 max-lg:rounded-t-4xl" />
//           </motion.div>
//           <motion.div
//             className="relative max-lg:row-start-3 lg:col-start-2 lg:row-start-2"
//             initial={{ opacity: 0, y: 20 }}
//             whileInView={{
//               opacity: 1,
//               y: 0,
//               transition: { delay: 0.2, duration: 0.2 },
//             }}
//           >
//             <div className="absolute inset-px rounded-lg bg-white/30 outline outline-black/5" />
//             <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]">
//               <div className="px-8 pt-8 sm:px-10 sm:pt-10">
//                 <p className="mt-2 text-lg font-medium tracking-tight max-lg:text-center">
//                   Secure Technological Integration
//                 </p>
//                 <p className="mt-2 text-sm/6 text-gray-700 max-lg:text-center">
//                   While applying technology to make learning the best it can be,
//                   we prioritize security and privacy to protect our users&apos; data
//                   and ensure a safe learning environment.
//                 </p>
//               </div>
//               <div className="@container flex flex-1 items-center max-lg:py-6 lg:pb-2">
//                 <img
//                   alt=""
//                   src="https://tailwindcss.com/plus-assets/img/component-images/dark-bento-03-security.png"
//                   className="h-[min(152px,40cqw)] object-cover"
//                 />
//               </div>
//             </div>
//             <div className="pointer-events-none absolute inset-px rounded-lg shadow-sm outline outline-white/15" />
//           </motion.div>
//           <motion.div
//             className="relative lg:row-span-2"
//             initial={{ opacity: 0, y: 20 }}
//             whileInView={{
//               opacity: 1,
//               y: 0,
//               transition: { delay: 0.2, duration: 0.2 },
//             }}
//           >
//             <div className="absolute inset-px rounded-lg bg-white/30 outline outline-black/5 max-lg:rounded-b-4xl lg:rounded-r-4xl" />
//             <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-r-[calc(2rem+1px)]">
//               <div className="px-8 pt-8 pb-3 sm:px-10 sm:pt-10 sm:pb-0">
//                 <p className="mt-2 text-lg font-medium tracking-tight max-lg:text-center">
//                   Competitive Math and Coding Counseling
//                 </p>
//                 <p className="mt-2 text-sm/6 text-gray-600 max-lg:text-center">
//                   Our handcrafted AI learns from your sessions and provides
//                   personalized summaries, practice problems, and study plans to
//                   help you succeed.
//                 </p>
//               </div>
//               <div className="relative min-h-120 w-full grow">
//                 <div className="absolute top-10 right-0 bottom-0 left-10 overflow-hidden rounded-tl-xl bg-gray-900/60 outline outline-white/10">
//                   <div className="flex bg-gray-900 outline outline-white/5">
//                     <div className="-mb-px flex text-sm/6 font-medium text-gray-400">
//                       <div className="border-r border-b border-r-white/10 border-b-white/20 bg-white/5 px-4 py-2 text-white">
//                         Week1_Session_Precalc.md
//                       </div>
//                       <div className="border-r border-gray-600/10 px-4 py-2">
//                         Week2_Session_Precalc.md
//                       </div>
//                     </div>
//                   </div>
//                   <div className="px-6 pt-6 pb-14">
//                     <p className="text-sm/6 text-gray-400">AI Summary:</p>
//                     <p className="text-sm/6 text-gray-400">
//                       This is a summary of the AI&apos;s findings and recommendations
//                       based on the user&apos;s input and interactions.
//                     </p>
//                   </div>
//                 </div>
//               </div>
//             </div>
//             <div className="pointer-events-none absolute inset-px rounded-lg shadow-sm outline outline-white/15 max-lg:rounded-b-4xl lg:rounded-r-4xl" />
//           </motion.div>
//         </div>
//       </section>
//     </div>
//   );
// }