export default function KMTutoringWebsite() {
  const subjects = [
    "Math",
    "Science",
    "Physics",
    "Chemistry",
    "Biology",
    "Study Skills",
    "Exam Preparation",
  ];

  const testimonials = [
    {
      name: "Parent of Grade 9 Student",
      quote:
        "Kessem was patient, organized, and made the material much easier to understand. We saw a big improvement in confidence and grades.",
    },
    {
      name: "Grade 10 Student",
      quote:
        "I used to feel lost in science, but sessions were clear and actually helpful. I felt much more prepared before tests.",
    },
    {
      name: "Parent of Grade 8 Student",
      quote:
        "Very reliable, professional, and encouraging. My child looked forward to the sessions and stayed much more motivated.",
    },
  ];

  const faqs = [
    {
      q: "Do you offer online sessions?",
      a: "Yes. Online tutoring is available and designed to be simple, interactive, and convenient for students and families.",
    },
    {
      q: "What grades do you teach?",
      a: "KM Tutoring focuses on Grades 8 to 10, with support in core subjects and academic skill-building.",
    },
    {
      q: "Do you help with test preparation?",
      a: "Yes. Sessions can focus on homework support, concept review, test prep, and stronger study habits.",
    },
    {
      q: "How do I book a session?",
      a: "You can book through Calendly or Acuity, or contact KM Tutoring directly to discuss availability.",
    },
  ];

  return (
    <div className="min-h-screen bg-[#F7F3F2] text-[#4B3A4E]">
      <header className="sticky top-0 z-50 border-b border-[#E7D9D6] bg-[#F7F3F2]/90 backdrop-blur">
        <div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-4 sm:px-6">
          <div>
            <div className="text-xl font-bold tracking-tight text-[#4B3A4E]">KM Tutoring</div>
            <div className="text-sm text-[#8D6C7D]">Personalized support for Grades 8 to 10</div>
          </div>

          <nav className="hidden items-center gap-6 text-sm md:flex text-[#6E5868]">
            <a href="#home" className="transition hover:text-[#4B3A4E]">Home</a>
            <a href="#about" className="transition hover:text-[#4B3A4E]">About</a>
            <a href="#services" className="transition hover:text-[#4B3A4E]">Services</a>
            <a href="#booking" className="transition hover:text-[#4B3A4E]">Booking</a>
            <a href="#contact" className="transition hover:text-[#4B3A4E]">Contact</a>
          </nav>

          <a
            href="#booking"
            className="rounded-2xl bg-[#CE8127] px-4 py-2 text-sm font-medium text-white shadow-sm transition hover:bg-[#B46F20]"
          >
            Book a Session
          </a>
        </div>
      </header>

      <main>
        <section
          id="home"
          className="bg-gradient-to-br from-[#F7F3F2] via-[#F2E6E3] to-[#D8BFCE]"
        >
          <div className="mx-auto grid max-w-7xl gap-10 px-4 py-16 sm:px-6 md:grid-cols-2 md:py-24">
            <div className="flex flex-col justify-center">
              <div className="mb-4 inline-flex w-fit rounded-full border border-[#E8D2D8] bg-white/80 px-3 py-1 text-sm text-[#8D6C7D] shadow-sm">
                Math tutor Ottawa • Online physics tutoring Canada
              </div>
              <h1 className="text-4xl font-bold tracking-tight text-[#4B3A4E] sm:text-5xl md:text-6xl">
                Helping students in Grades 8 to 10 build confidence and improve results.
              </h1>
              <p className="mt-6 max-w-xl text-lg leading-8 text-[#6E5868]">
                KM Tutoring offers focused, supportive tutoring in math and science for middle and high school students. Sessions are designed to strengthen understanding, boost confidence, and help students perform better on assignments, quizzes, and exams.
              </p>
              <div className="mt-8 flex flex-col gap-3 sm:flex-row">
                <a
                  href="#booking"
                  className="rounded-2xl bg-[#CE8127] px-6 py-3 text-center font-medium text-white shadow-sm transition hover:bg-[#B46F20]"
                >
                  Book a Session
                </a>
                <a
                  href="#services"
                  className="rounded-2xl border border-[#DDB8B2] bg-white/70 px-6 py-3 text-center font-medium text-[#6E5868] transition hover:bg-white"
                >
                  View Services
                </a>
              </div>
              <div className="mt-8 grid gap-4 sm:grid-cols-3">
                <div className="rounded-2xl border border-[#E8D8D5] bg-white/85 p-4 shadow-sm">
                  <div className="text-2xl font-bold text-[#4B3A4E]">Grades 8-10</div>
                  <div className="mt-1 text-sm text-[#8D6C7D]">Focused academic support</div>
                </div>
                <div className="rounded-2xl border border-[#E8D8D5] bg-white/85 p-4 shadow-sm">
                  <div className="text-2xl font-bold text-[#4B3A4E]">Online + In Person</div>
                  <div className="mt-1 text-sm text-[#8D6C7D]">Flexible session options</div>
                </div>
                <div className="rounded-2xl border border-[#E8D8D5] bg-white/85 p-4 shadow-sm">
                  <div className="text-2xl font-bold text-[#4B3A4E]">Results Focused</div>
                  <div className="mt-1 text-sm text-[#8D6C7D]">Clear explanations and progress</div>
                </div>
              </div>
            </div>

            <div className="flex items-center justify-center">
              <div className="w-full max-w-md rounded-[28px] border border-[#E8D8D5] bg-white/90 p-4 shadow-xl shadow-[#D8BFCE]/20">
                <div className="aspect-[4/5] w-full overflow-hidden rounded-[22px] border border-dashed border-[#D8BFCE] bg-[#F5ECE8] flex items-center justify-center p-6 text-center text-[#8D6C7D]">
                  Replace this area with Kessem Mechali’s photo
                </div>
                <div className="px-2 pb-2 pt-4">
                  <div className="text-xl font-semibold text-[#4B3A4E]">Kessem Mechali</div>
                  <div className="text-[#8D6C7D]">Tutor for Grades 8 to 10</div>
                  <p className="mt-3 text-sm leading-6 text-[#6E5868]">
                    Supportive, structured tutoring that helps students understand concepts clearly and feel more confident in school.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section id="about" className="mx-auto max-w-7xl px-4 py-16 sm:px-6 md:py-24">
          <div className="grid gap-8 md:grid-cols-2">
            <div>
              <p className="text-sm font-semibold uppercase tracking-[0.2em] text-[#D893A4]">About</p>
              <h2 className="mt-3 text-3xl font-bold tracking-tight text-[#4B3A4E] sm:text-4xl">
                Why families trust KM Tutoring
              </h2>
              <p className="mt-6 text-lg leading-8 text-[#6E5868]">
                KM Tutoring was built to give students the kind of support many classrooms cannot always provide: personalized explanations, patience, and a plan that matches how each student learns best.
              </p>
              <p className="mt-4 leading-8 text-[#6E5868]">
                Kessem Mechali works closely with students to break down difficult concepts, strengthen weak areas, and build academic confidence over time. The goal is not just to get through homework, but to help students feel more capable and independent.
              </p>
            </div>

            <div className="grid gap-4">
              <div className="rounded-[28px] border border-[#E8D8D5] bg-white p-6 shadow-sm">
                <h3 className="text-xl font-semibold text-[#4B3A4E]">Tutor Story</h3>
                <p className="mt-3 leading-7 text-[#6E5868]">
                  Add Kessem’s personal story here: what inspired the tutoring business, what kind of students she enjoys working with, and how she approaches teaching in a calm and encouraging way.
                </p>
              </div>
              <div className="rounded-[28px] border border-[#E8D8D5] bg-[#F2E6E3] p-6 shadow-sm">
                <h3 className="text-xl font-semibold text-[#4B3A4E]">Tutor Qualifications</h3>
                <p className="mt-3 leading-7 text-[#6E5868]">
                  Add academic background, teaching experience, relevant achievements, and any specific strengths in math, science, or test preparation.
                </p>
              </div>
              <div className="rounded-[28px] border border-[#E8D8D5] bg-[#F0E6EE] p-6 shadow-sm">
                <h3 className="text-xl font-semibold text-[#4B3A4E]">Why Trust Kessem</h3>
                <p className="mt-3 leading-7 text-[#6E5868]">
                  Personalized support, strong communication, a consistent learning plan, and a focus on helping students improve both performance and confidence.
                </p>
              </div>
            </div>
          </div>
        </section>

        <section id="services" className="bg-[#F2E6E3] py-16 md:py-24">
          <div className="mx-auto max-w-7xl px-4 sm:px-6">
            <p className="text-sm font-semibold uppercase tracking-[0.2em] text-[#D893A4]">Services</p>
            <h2 className="mt-3 text-3xl font-bold tracking-tight text-[#4B3A4E] sm:text-4xl">
              Tutoring designed for real academic progress
            </h2>
            <div className="mt-10 grid gap-6 md:grid-cols-3">
              <div className="rounded-[28px] border border-[#E5C9C1] bg-white p-6 shadow-sm">
                <h3 className="text-xl font-semibold text-[#4B3A4E]">Subjects Offered</h3>
                <ul className="mt-4 space-y-2 text-[#6E5868]">
                  {subjects.map((subject) => (
                    <li key={subject}>• {subject}</li>
                  ))}
                </ul>
              </div>
              <div className="rounded-[28px] border border-[#E5C9C1] bg-[#F7F3F2] p-6 shadow-sm">
                <h3 className="text-xl font-semibold text-[#4B3A4E]">Levels</h3>
                <p className="mt-4 leading-7 text-[#6E5868]">
                  Primary focus is Grades 8 to 10. This section can be expanded later if you want to include earlier grades, senior high school, or university preparation.
                </p>
              </div>
              <div className="rounded-[28px] border border-[#E5C9C1] bg-white p-6 shadow-sm">
                <h3 className="text-xl font-semibold text-[#4B3A4E]">Pricing</h3>
                <p className="mt-4 leading-7 text-[#6E5868]">
                  Contact for pricing, or replace this text with a structured pricing model such as hourly sessions, bundles, or monthly plans.
                </p>
              </div>
            </div>

            <div className="mt-8 rounded-[28px] border border-[#E6C3C8] bg-[#F0E6EE] p-6">
              <h3 className="text-xl font-semibold text-[#4B3A4E]">Clear value proposition</h3>
              <p className="mt-3 leading-7 text-[#6E5868]">
                This site is written to feel focused rather than too broad. It presents KM Tutoring as a tutoring service that helps Grades 8 to 10 students strengthen math and science skills, raise confidence, and improve test performance with structured one-on-one support.
              </p>
            </div>
          </div>
        </section>

        <section id="booking" className="mx-auto max-w-7xl px-4 py-16 sm:px-6 md:py-24">
          <div className="grid gap-8 md:grid-cols-2">
            <div>
              <p className="text-sm font-semibold uppercase tracking-[0.2em] text-[#D893A4]">Booking</p>
              <h2 className="mt-3 text-3xl font-bold tracking-tight text-[#4B3A4E] sm:text-4xl">
                Make booking simple and fast
              </h2>
              <p className="mt-6 text-lg leading-8 text-[#6E5868]">
                Fast booking matters. Add your Calendly or Acuity Scheduling link below so families can book without extra back-and-forth.
              </p>
              <div className="mt-6 space-y-4">
                <div className="rounded-[24px] border border-[#E8D8D5] bg-white p-5 shadow-sm">
                  <div className="font-semibold text-[#4B3A4E]">Calendly</div>
                  <p className="mt-2 text-[#6E5868]">Paste your Calendly booking link here.</p>
                  <a href="#" className="mt-3 inline-block text-[#CE8127] underline">
                    Add Calendly link
                  </a>
                </div>
                <div className="rounded-[24px] border border-[#E8D8D5] bg-white p-5 shadow-sm">
                  <div className="font-semibold text-[#4B3A4E]">Acuity Scheduling</div>
                  <p className="mt-2 text-[#6E5868]">Paste your Acuity Scheduling booking link here.</p>
                  <a href="#" className="mt-3 inline-block text-[#CE8127] underline">
                    Add Acuity link
                  </a>
                </div>
              </div>
            </div>

            <div className="rounded-[28px] border border-[#E8D8D5] bg-white p-6 shadow-sm">
              <h3 className="text-2xl font-semibold text-[#4B3A4E]">Session Options</h3>
              <div className="mt-6 grid gap-4">
                <div className="rounded-[22px] border border-[#E8D8D5] bg-[#F7F3F2] p-5">
                  <div className="font-semibold text-[#4B3A4E]">One-on-One Tutoring</div>
                  <p className="mt-2 text-[#6E5868]">
                    Personalized sessions based on the student’s learning needs and school material.
                  </p>
                </div>
                <div className="rounded-[22px] border border-[#E8D8D5] bg-[#F2E6E3] p-5">
                  <div className="font-semibold text-[#4B3A4E]">Homework Help</div>
                  <p className="mt-2 text-[#6E5868]">
                    Support with assignments, review questions, and challenging concepts.
                  </p>
                </div>
                <div className="rounded-[22px] border border-[#E8D8D5] bg-[#F0E6EE] p-5">
                  <div className="font-semibold text-[#4B3A4E]">Test Preparation</div>
                  <p className="mt-2 text-[#6E5868]">
                    Focused review sessions to improve readiness and reduce stress before tests.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section id="testimonials" className="bg-[#F0E6EE] py-16 md:py-24">
          <div className="mx-auto max-w-7xl px-4 sm:px-6">
            <p className="text-sm font-semibold uppercase tracking-[0.2em] text-[#D893A4]">Testimonials</p>
            <h2 className="mt-3 text-3xl font-bold tracking-tight text-[#4B3A4E] sm:text-4xl">
              What parents and students say
            </h2>
            <div className="mt-10 grid gap-6 md:grid-cols-3">
              {testimonials.map((item) => (
                <div
                  key={item.name}
                  className="rounded-[28px] border border-[#DFC3CC] bg-white p-6 shadow-sm"
                >
                  <p className="leading-7 text-[#6E5868]">“{item.quote}”</p>
                  <div className="mt-4 font-semibold text-[#4B3A4E]">{item.name}</div>
                </div>
              ))}
            </div>
          </div>
        </section>

        <section className="bg-[#F7F3F2] py-16 md:py-24">
          <div className="mx-auto max-w-4xl px-4 sm:px-6">
            <p className="text-sm font-semibold uppercase tracking-[0.2em] text-[#D893A4]">FAQs</p>
            <h2 className="mt-3 text-3xl font-bold tracking-tight text-[#4B3A4E] sm:text-4xl">
              Common questions
            </h2>
            <div className="mt-10 space-y-4">
              {faqs.map((item) => (
                <div
                  key={item.q}
                  className="rounded-[22px] border border-[#E8D8D5] bg-white p-5 shadow-sm"
                >
                  <div className="text-lg font-semibold text-[#4B3A4E]">{item.q}</div>
                  <p className="mt-2 leading-7 text-[#6E5868]">{item.a}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        <section id="contact" className="mx-auto max-w-7xl px-4 py-16 sm:px-6 md:py-24">
          <div className="grid gap-8 md:grid-cols-2">
            <div>
              <p className="text-sm font-semibold uppercase tracking-[0.2em] text-[#D893A4]">Contact</p>
              <h2 className="mt-3 text-3xl font-bold tracking-tight text-[#4B3A4E] sm:text-4xl">
                Get in touch
              </h2>
              <p className="mt-6 text-lg leading-8 text-[#6E5868]">
                Reach out to ask about subjects, availability, pricing, or the best tutoring plan for your child.
              </p>
              <div className="mt-6 space-y-3 text-[#6E5868]">
                <div>
                  <span className="font-semibold text-[#4B3A4E]">Phone:</span> Add phone number
                </div>
                <div>
                  <span className="font-semibold text-[#4B3A4E]">Email:</span> Add email address
                </div>
                <div>
                  <span className="font-semibold text-[#4B3A4E]">Location:</span> Ottawa / Online across Canada
                </div>
              </div>
              <div className="mt-8 rounded-[24px] border border-[#E6C3C8] bg-[#F2E6E3] p-5">
                <div className="font-semibold text-[#4B3A4E]">SEO foundation built in</div>
                <p className="mt-2 leading-7 text-[#6E5868]">
                  This layout includes natural keyword phrasing such as “math tutor Ottawa” and “online physics tutoring Canada,” while still sounding professional and parent-friendly.
                </p>
              </div>
            </div>

            <div className="rounded-[28px] border border-[#E8D8D5] bg-white p-6 shadow-sm">
              <h3 className="text-2xl font-semibold text-[#4B3A4E]">Email Form</h3>
              <form className="mt-6 space-y-4">
                <input
                  type="text"
                  placeholder="Parent or student name"
                  className="w-full rounded-[18px] border border-[#E0C9C5] bg-[#FDFBFA] px-4 py-3 text-[#4B3A4E] outline-none transition placeholder:text-[#A18491] focus:border-[#D893A4]"
                />
                <input
                  type="email"
                  placeholder="Email address"
                  className="w-full rounded-[18px] border border-[#E0C9C5] bg-[#FDFBFA] px-4 py-3 text-[#4B3A4E] outline-none transition placeholder:text-[#A18491] focus:border-[#D893A4]"
                />
                <input
                  type="text"
                  placeholder="Phone number"
                  className="w-full rounded-[18px] border border-[#E0C9C5] bg-[#FDFBFA] px-4 py-3 text-[#4B3A4E] outline-none transition placeholder:text-[#A18491] focus:border-[#D893A4]"
                />
                <textarea
                  placeholder="How can KM Tutoring help?"
                  rows={5}
                  className="w-full rounded-[18px] border border-[#E0C9C5] bg-[#FDFBFA] px-4 py-3 text-[#4B3A4E] outline-none transition placeholder:text-[#A18491] focus:border-[#D893A4]"
                />
                <button
                  type="button"
                  className="w-full rounded-[18px] bg-[#E5A38F] px-6 py-3 font-medium text-white transition hover:bg-[#D893A4]"
                >
                  Send Message
                </button>
              </form>
            </div>
          </div>
        </section>
      </main>

      <footer className="border-t border-[#E8D8D5] bg-[#F7F3F2]">
        <div className="mx-auto flex max-w-7xl flex-col gap-4 px-4 py-8 text-sm text-[#8D6C7D] sm:px-6 md:flex-row md:items-center md:justify-between">
          <div>© 2026 KM Tutoring. All rights reserved.</div>
          <div className="flex gap-4">
            <a href="#home" className="hover:text-[#4B3A4E]">Home</a>
            <a href="#about" className="hover:text-[#4B3A4E]">About</a>
            <a href="#services" className="hover:text-[#4B3A4E]">Services</a>
            <a href="#booking" className="hover:text-[#4B3A4E]">Booking</a>
            <a href="#contact" className="hover:text-[#4B3A4E]">Contact</a>
          </div>
        </div>
      </footer>
    </div>
  );
}