import { Link } from "react-router-dom";
import { useDocumentTitle } from "../hooks/useDocumentTitle";

export default function About() {
  useDocumentTitle("About — Chrysopedia");
  return (
    <div className="about">
      <section className="about-hero">
        <h1 className="about-hero__title">About Chrysopedia</h1>
        <p className="about-hero__subtitle">
          A structured knowledge base for music production techniques
        </p>
      </section>

      <section className="about-section">
        <h2 className="about-section__heading">What Is Chrysopedia?</h2>
        <p className="about-section__text">
          Chrysopedia turns long-form music production tutorials into a
          searchable, structured knowledge base. Instead of scrubbing through
          hours of video looking for the one technique you need, you can search
          by topic, creator, or keyword and jump straight to the insight.
        </p>
        <p className="about-section__text">
          The name comes from <em>chrysopoeia</em> — the art of transmutation.
          We transmute raw video content into distilled, accessible knowledge.
        </p>
      </section>

      <section className="about-section">
        <h2 className="about-section__heading">How Content Is Extracted</h2>
        <p className="about-section__text">
          Videos are processed through a multi-stage pipeline that transcribes
          audio, identifies key moments, classifies topics, and generates
          structured technique pages — all using a combination of speech
          recognition and large language models.
        </p>
        <ol className="about-pipeline">
          <li className="about-pipeline__step">
            <strong>Transcription</strong> — Audio is converted to timestamped
            text
          </li>
          <li className="about-pipeline__step">
            <strong>Key Moment Detection</strong> — The transcript is analyzed
            to find discrete techniques and insights
          </li>
          <li className="about-pipeline__step">
            <strong>Topic Classification</strong> — Each moment is tagged with
            categories and sub-topics
          </li>
          <li className="about-pipeline__step">
            <strong>Page Generation</strong> — Structured technique pages are
            written with context, steps, and creator attribution
          </li>
          <li className="about-pipeline__step">
            <strong>Indexing</strong> — Content is embedded for semantic search
          </li>
        </ol>
        <p className="about-section__text">
          Every technique page links back to its source video and creator,
          preserving attribution throughout.
        </p>
      </section>

      <section className="about-section">
        <h2 className="about-section__heading">Who Maintains This</h2>
        <p className="about-section__text">
          Chrysopedia is built and maintained by{" "}
          <a
            href="https://github.com/xpltdco"
            className="about-link"
            target="_blank"
            rel="noopener noreferrer"
          >
            xpltd
          </a>
          . The project is open source on{" "}
          <a
            href="https://github.com/xpltdco/chrysopedia"
            className="about-link"
            target="_blank"
            rel="noopener noreferrer"
          >
            GitHub
          </a>
          .
        </p>
      </section>

      <div className="about-cta">
        <Link to="/" className="btn about-cta__btn">
          Start Exploring
        </Link>
      </div>
    </div>
  );
}
