"use client";

import React, { useState } from "react";
import Link from "next/link";
import { ArrowRight, ChevronDown } from "lucide-react";
import { AnimatePresence, motion } from "framer-motion";
import { FadeUp } from "@/app/components/Motion/Motion";
import { GLOSSARY, GLOSSARY_META } from "./glossary";
import styles from "./learn.module.css";

export function LearnContent() {
  const [open, setOpen] = useState<Record<string, boolean>>({});
  const toggle = (term: string) => setOpen((prev) => ({ ...prev, [term]: !prev[term] }));

  return (
    <>
      <FadeUp as="header" className={styles.hero}>
        <span className={styles.eyebrow}>{GLOSSARY_META.eyebrow}</span>
        <h1 className={styles.title}>{GLOSSARY_META.title}</h1>
        <p className={styles.lead}>{GLOSSARY_META.intro}</p>
      </FadeUp>

      {GLOSSARY.map((category) => (
        <FadeUp as="section" className={styles.categoryBlock} key={category.name}>
          <div className={styles.categoryHead}>
            <h2 className={styles.categoryName}>{category.name}</h2>
            <p className={styles.categoryBlurb}>{category.blurb}</p>
          </div>

          <div className={styles.termList}>
            {category.terms.map((t) => {
              const isOpen = !!open[t.term];
              return (
                <div className={styles.term} key={t.term}>
                  <button
                    type="button"
                    className={styles.termHeader}
                    aria-expanded={isOpen}
                    onClick={() => toggle(t.term)}
                  >
                    <span className={styles.termHeadText}>
                      <span className={styles.termName}>{t.term}</span>
                      <span className={styles.termDef}>{t.definition}</span>
                    </span>
                    <ChevronDown
                      size={20}
                      aria-hidden="true"
                      className={`${styles.termChevron} ${isOpen ? styles.termChevronOpen : ""}`}
                    />
                  </button>

                  <AnimatePresence initial={false}>
                    {isOpen ? (
                      <motion.div
                        key="panel"
                        initial={{ height: 0, opacity: 0 }}
                        animate={{ height: "auto", opacity: 1 }}
                        exit={{ height: 0, opacity: 0 }}
                        transition={{ duration: 0.28, ease: [0.25, 0.1, 0.25, 1] }}
                        style={{ overflow: "hidden" }}
                      >
                        <div className={styles.termPanel}>
                          <div className={styles.termRow}>
                            <span className={styles.termLabel}>What it is</span>
                            <p>{t.explanation}</p>
                          </div>
                          <div className={styles.termRow}>
                            <span className={styles.termLabel}>How it&apos;s used</span>
                            <p>{t.use}</p>
                          </div>
                          <div className={styles.termRow}>
                            <span className={styles.termLabel}>Why it matters</span>
                            <p>{t.benefit}</p>
                          </div>
                          {t.meliorateTie ? <p className={styles.termTie}>{t.meliorateTie}</p> : null}
                        </div>
                      </motion.div>
                    ) : null}
                  </AnimatePresence>
                </div>
              );
            })}
          </div>
        </FadeUp>
      ))}

      <FadeUp as="section" className={styles.ctaBand}>
        <div className={styles.ctaCopy}>
          <p className={styles.ctaEyebrow}>Put it to work</p>
          <h2>Want these built into your systems, safely?</h2>
          <p>
            We design, build, and operationalize AI systems with the context, guardrails, and governance
            this glossary describes — reliability from architecture, not model magic.
          </p>
        </div>
        <Link href="/contact" className={styles.ctaLink}>
          Start a Project <ArrowRight size={16} />
        </Link>
      </FadeUp>
    </>
  );
}