"use client";

/**
 * Honest Kerala SSLC Physics beta ledger. Sound Waves is the complete chapter;
 * future chapters are visible as planned syllabus work, never as ready content.
 */

import { motion, useReducedMotion, type Variants } from "framer-motion";

const revealEase = [0.22, 1, 0.36, 1] as const;

const reveal: Variants = {
  hidden: { opacity: 0, y: 18 },
  visible: (step = 0) => ({
    opacity: 1,
    y: 0,
    transition: { duration: 0.7, delay: step * 0.06, ease: revealEase },
  }),
};

const chapters = [
  { index: "01", title: "Sound Waves", status: "Complete beta chapter", note: "vibration, echo, SONAR, v = fλ numericals" },
  { index: "02", title: "Lenses", status: "Not yet available", note: "images, ray diagrams, power of a lens" },
  { index: "03", title: "The World of Colours and Vision", status: "Not yet available", note: "dispersion, scattering, the human eye" },
  { index: "04", title: "Magnetic Effect of Electric Current", status: "Not yet available", note: "right-hand rule, motors, Fleming's left hand" },
  { index: "05", title: "Electric Energy", status: "Not yet available", note: "heating effect, power, safe wiring" },
  { index: "06", title: "Electromagnetic Induction", status: "Not yet available", note: "generators, transformers, Lenz's law" },
  { index: "07", title: "Mechanical Advantage in Action", status: "Not yet available", note: "levers, pulleys, inclined planes" },
];

export function SyllabusCoverage() {
  const reduceMotion = Boolean(useReducedMotion());

  return (
    <section
      id="syllabus-coverage"
      className="relative isolate overflow-hidden px-5 py-24 font-sans sm:px-8 sm:py-32"
      aria-label="Kerala SSLC Physics beta chapter status"
    >
      <div className="relative z-10 mx-auto w-full max-w-[1180px]">
        <motion.div
          initial={reduceMotion ? false : "hidden"}
          whileInView="visible"
          viewport={{ once: true, amount: 0.2 }}
          className="max-w-[720px]"
        >
          <motion.p
            className="text-[11px] font-semibold uppercase tracking-[0.2em] text-white/45"
            variants={reduceMotion ? undefined : reveal}
          >
            Beta chapter status
          </motion.p>
          <motion.h2
            className="font-display mt-4 text-balance text-[clamp(2.15rem,5.5vw,3.5rem)] font-semibold leading-[1.02] tracking-[-0.04em] text-[#F2F4F1]"
            variants={reduceMotion ? undefined : reveal}
            custom={1}
          >
            One chapter complete. The next six stay clearly marked.
          </motion.h2>
          <motion.p
            className="mt-5 max-w-[58ch] text-base font-normal leading-relaxed text-[rgba(242,244,241,0.58)] sm:text-[17px]"
            variants={reduceMotion ? undefined : reveal}
            custom={2}
          >
            Sound Waves is the complete Kerala SSLC Class 10 Physics beta
            chapter. The other syllabus chapters remain visible as the
            production roadmap, not as finished lessons.
          </motion.p>
        </motion.div>

        <motion.ol
          className="mt-12"
          initial={reduceMotion ? false : "hidden"}
          whileInView="visible"
          viewport={{ once: true, amount: 0.1 }}
        >
          {chapters.map((chapter, i) => (
            <motion.li
              key={chapter.index}
              className="grid grid-cols-[36px_1fr_auto] items-baseline gap-4 border-b border-white/8 py-5 sm:grid-cols-[44px_minmax(0,320px)_1fr_auto] sm:gap-8"
              variants={reduceMotion ? undefined : reveal}
              custom={i}
            >
              <span className="font-mono text-xs text-white/30">{chapter.index}</span>
              <h3 className="text-[15px] font-semibold text-white sm:text-base">{chapter.title}</h3>
              <p className="col-start-2 text-sm font-light text-white/45 sm:col-start-3">{chapter.note}</p>
              <span className="col-start-3 row-start-1 whitespace-nowrap text-sm font-medium text-white/55 sm:col-start-4">
                {chapter.status}
              </span>
            </motion.li>
          ))}
        </motion.ol>

        <motion.p
          className="mt-8 max-w-[62ch] text-sm font-light leading-relaxed text-white/45"
          initial={reduceMotion ? false : "hidden"}
          whileInView="visible"
          viewport={{ once: true, amount: 0.4 }}
          variants={reduceMotion ? undefined : reveal}
        >
          A chapter moves from “not yet available” only after its grounded
          teaching, practice, test, correction, and revision flow is ready.
        </motion.p>
      </div>
    </section>
  );
}