"use client";

import Header from "@/components/Header";
import { motion } from "motion/react";
import Image from "next/image";

export default function AboutUs() {
  const team = [
    {
      name: "Michael Foiani",
      degree: "M.S. in CS & B.S. in Physics @ BrownU",
      role: "Webmaster & Tutor Coordinator",
      image: "/michael.jpg",
      bio: "At Brown Univeristy, Michael served as the head teaching assistant for two 400+ student courses, in which he designed course materials, lectures, assignments, exams, and grading structures. Academically he earned magnum cum laude for his GPA, departmental honors for his bachelors thesis, then went on to complete a masters with a specialty in computational physics. In high school, he tutored AP Stats, led review sessions, ranked top 5 state-wide for algebra & geometry, and taught AP computer science.",
    },
    {
      name: "Matthew Stankewicz",
      degree: "",
      role: "Marketing & Outreach",
      image: "/matthew.jpg",
      bio: "Matthew Stankewicz works in marketing and outreach with a background in digital marketing and creative media. His experience includes content development, audience engagement, and communication strategy across digital platforms. He has worked on projects involving social media, digital campaigns, and creative content production. His work focuses on clear communication, practical outreach, and helping information reach the right audiences. Matthew brings a thoughtful, organized approach to marketing and outreach, with an emphasis on consistency, clarity, and reliability.",
    },
  ];

  const tutors = [
    {
      name: "Joseph",
      degree: "BS in Chemical Engineering @ OSU",
      specialty:
        "Chemistry, Engineering, & Philosophy; Essay Planning & Revision",
    },
    {
      name: "Michael",
      degree: "MS in CS & BS in Physics @ Brown University",
      specialty: "Computer Science & Physics; ACT Prep; College Admissions",
    },
    {
      name: "Madison",
      degree: "PhD Candidate in BioChem @ Emory University",
      specialty: "Chemistry and Biology; Thesis Writing",
    },
    {
      name: "Meiling",
      degree: "MS in Biomedical Engineering @ Brown University",
      specialty: "Engineering; Language & Culture",
    },
    {
      name: "Jino",
      degree: "Pre-Med @ Cornell Universoty",
      specialty: "Undergraduate Biology & Nutrition",
    },
    {
      name: "Will",
      degree: "PhD Candidate in Chemical Engineering @ CaseWRU",
      specialty: "High School Math, Science, & History",
    },
  ];

  return (
    <>
      <header>
        <Header />
      </header>
      <main className="container mx-auto isolate px-4 py-6 sm:py-12 xl:py-16 mt-20 xl:mt-16">
        <div
          aria-hidden="true"
          className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-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 left-1/2 -z-10 aspect-1155/678 w-144.5 max-w-none -translate-x-1/2 rotate-30 bg-linear-to-br from-indigo-600 to-red-300 opacity-80 sm:left-[calc(50%-40rem)] sm:w-288.75"
          />
        </div>
        <div className="mx-auto max-w-5xl outline outline-gray-700/20 rounded-xl p-6 shadow-lg shadow-gray-700/10 backdrop-blur-lg sm:p-10 bg-white/30">
          <div className="mx-auto max-w-4xl text-center">
            <h2 className="text-4xl font-semibold tracking-tight text-balance text-gray-900 sm:text-5xl">
              About the <span className="text-gradient">Founder</span>
            </h2>
            <div className="flex gap-8 justify-center items-center flex-col mt-12 lg:flex-row lg:mt-0">
              <Image
                src="/joseph.jpg"
                alt="Founder, Joseph Ceferatti, Image"
                width={250}
                height={250}
                className="mx-auto rounded-md white/80"
              />
              <div>
                <p className="mt-4 text-lg text-gray-600 text-left tracking-tight">
                  After working with a large national tutoring provider, I saw
                  firsthand what works — and what could be better. Sensible
                  Scholars was created to make the changes I always knew were
                  necessary but never had the authority to implement. Here,
                  sessions are fully personalized to meet the needs of each
                  student and their family, with an approach designed to promote
                  critical thinking and a deeper grasp of the material that can
                  sometimes be difficult to achieve in a traditional classroom
                  setting.
                </p>
                <p className="mt-6 text-lg text-gray-600 text-left tracking-tight">
                  At Sensible Scholars, we believe tutoring should go beyond
                  homework help — it should inspire curiosity, build confidence,
                  and foster true understanding. Our team is made up of
                  successful students and experienced teaching assistants with
                  years of tutoring under their belts, all united by a passion
                  for helping the next generation excel and reach their academic
                  goals.
                </p>
              </div>
            </div>

            <p className="mt-6 text-lg text-gray-600 text-left tracking-tight">
              We&apos;re not just preparing students to pass tests — we&apos;re
              equipping them to think, adapt, and thrive, drawing on personal
              tips and proven strategies honed through years of academic
              success.
            </p>

            <motion.p
              className="text-md text-gray-500 mt-4 text-left italic"
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.25 }}
            >
              Sincerely,
              <br />
              <span className="pl-4">
                Joseph Ceferatti, founder of Sensible Scholars Tutoring LLC
              </span>
            </motion.p>
          </div>
        </div>

        <div
          aria-hidden="true"
          className="absolute inset-x-0 top-245 -z-10 transform-gpu overflow-hidden blur-3xl sm:top-150 sm:left-50"
        >
          <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 left-1/2 -z-10 aspect-1155/678 w-144.5 max-w-none -translate-x-1/2 rotate-210 bg-linear-to-br from-indigo-600 to-red-300 opacity-80 sm:left-[calc(50%-40rem)] sm:w-288.75"
          />
        </div>

        <div className="mx-auto max-w-5xl outline outline-gray-700/20 rounded-xl p-6 shadow-lg shadow-gray-700/10 backdrop-blur-lg sm:p-10 bg-white/30 px-4 py-6 sm:py-12 xl:py-16 mt-16">
          <div className="mx-auto max-w-4xl text-center">
            <h2 className="text-4xl font-semibold tracking-tight text-balance text-gray-800 sm:text-5xl">
              About the <span className="text-gradient">Organizers</span>
            </h2>
            <p className="mt-6 text-lg text-gray-600 text-center tracking-tight">
              The others who joined Joseph use their previous professional
              expereince to carry out their passion for making education the
              best it can be.
            </p>

            <div className="mt-6 pt-8 border-t-2 border-purple-200 flex gap-1 flex-col sm:flex-row">
              {team.map((member, index) => {
                return (
                  <div
                    className="flex flex-col flex-1 items-center sm:mb-0 mb-8 gap-1"
                    key={index}
                  >
                    <span className="mb-2">
                      {" "}
                      <Image
                        className="rounded-xl"
                        alt={`${member.name}'s image`}
                        src={member.image}
                        width={200}
                        height={200}
                      />
                    </span>
                    <h3 className="font-medium text-xl text-gray-700">
                      {member.name}
                    </h3>
                    <h4 className="tracking-tight text-gradient text-lg">
                      {member.role}
                    </h4>
                    <motion.p
                      className="text-md text-gray-600 px-2 tracking-tight"
                      initial={{ opacity: 0, y: 20 }}
                      whileInView={{ opacity: 1, y: 0 }}
                      transition={{ duration: 0.25 }}
                    >
                      {member.bio}
                    </motion.p>
                  </div>
                );
              })}
            </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>

        <div className="mx-auto max-w-5xl outline outline-gray-700/20 rounded-xl p-6 shadow-lg shadow-gray-700/10 backdrop-blur-lg sm:p-10 bg-white/30 px-4 py-6 sm:py-12 xl:py-16 mt-16">
          <div className="mx-auto max-w-4xl text-center">
            <h2 className="text-4xl font-semibold tracking-tight text-balance text-gray-900 sm:text-5xl">
              About the <span className="text-gradient">Tutors</span>
            </h2>
            <p className="mt-6 text-lg text-gray-600 text-center">
              The educators at Sensible Scholars are overachievers who have have
              a passion for mentorship and teaching. We match students with
              tutors who have a university-level understanding of the requested
              subject.
            </p>

            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.25 }}
            >
              {tutors.map((tutor, index) => {
                return (
                  <div key={index} className="pt-6">
                    <span className="flex flex-col sm:flex-row text-left">
                      <h3 className="font-semibold pr-4 text-gray-700">
                        {tutor.name}
                      </h3>
                      <p className="text-gray-700 italic">{tutor.degree}</p>
                    </span>
                    <p className="text-left pl-10">{tutor.specialty}</p>
                  </div>
                );
              })}
            </motion.div>
          </div>
        </div>
      </main>
    </>
  );
}