export const useProse = () => {
  return {
    // Enhanced Headings with better hierarchy
    h1: "text-4xl xl:text-5xl mb-10 mt-14 text-brand-ink dark:text-white font-black tracking-tight leading-tight bg-gradient-to-r from-brand-ink to-gray-800 dark:from-white dark:to-gray-200 bg-clip-text text-transparent",
    h2: "text-3xl xl:text-4xl mb-8 mt-16 pb-5 border-b-2 border-brand-green/30 text-brand-ink dark:text-white relative pl-10 before:absolute before:left-0 before:top-0 before:w-1 before:h-full before:bg-gradient-to-b before:from-brand-green before:to-emerald-500 before:rounded-full font-bold tracking-tight",
    h3: "text-2xl xl:text-3xl mb-6 mt-14 text-gray-900 dark:text-white font-semibold border-l-4 border-brand-green pl-5 bg-gradient-to-r from-brand-green/5 to-transparent py-2",
    h4: "text-xl xl:text-2xl mb-4 mt-12 text-brand-green font-semibold tracking-wide uppercase text-sm",

    // Enhanced Paragraphs with better readability
    p: "text-gray-700 dark:text-gray-300 leading-relaxed mb-8 text-lg xl:text-xl font-light tracking-wide",
    "p:first-child":
      "first-letter:text-6xl first-letter:font-bold first-letter:text-brand-green first-letter:float-left first-letter:mr-3 first-letter:mt-2 first-letter:leading-none first-letter:tracking-tight",

    // Enhanced Links with better interaction
    a: "text-brand-green font-medium no-underline border-b-2 border-brand-green/20 pb-1 hover:border-brand-green hover:text-brand-green transition-all duration-300 rounded-sm bg-gradient-to-r from-brand-green/5 to-transparent px-1 hover:from-brand-green/10",

    // Enhanced Strong/Bold with subtle background
    strong:
      "text-brand-ink dark:text-white font-semibold bg-gradient-to-r from-brand-green/10 to-emerald-500/10 px-2 py-1 rounded-lg border border-brand-green/10 shadow-sm",

    // Enhanced Lists with better spacing
    ul: "my-10 space-y-3",
    li: 'text-gray-700 dark:text-gray-300 leading-relaxed marker:text-brand-green marker:font-bold flex items-start gap-3 before:content-["•"] before:text-brand-green before:text-xl before:flex-shrink-0 before:mt-1',
    ol: "my-10 space-y-3 text-gray-700 dark:text-gray-300 leading-relaxed list-decimal list-inside marker:font-bold marker:text-brand-green",

    // Enhanced Blockquotes with elegant styling
    blockquote:
      "border-l-4 border-brand-green bg-gradient-to-r from-brand-green/5 to-emerald-500/5 dark:from-brand-green/10 dark:to-emerald-500/10 py-8 px-10 my-12 rounded-r-2xl shadow-xl border border-brand-green/20 italic text-xl relative overflow-hidden",

    // Enhanced Code blocks
    code: "text-brand-green bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 px-3 py-1.5 rounded-lg border border-brand-green/20 font-mono text-sm font-medium shadow-sm",
    pre: "bg-gradient-to-br from-gray-900 to-slate-950 text-gray-100 p-8 rounded-2xl overflow-x-auto shadow-2xl border border-gray-700 my-14 relative",

    // Enhanced Tables
    table:
      "my-14 border-collapse w-full rounded-2xl overflow-hidden shadow-xl border border-gray-200 dark:border-gray-700",
    thead: "bg-gradient-to-r from-brand-green to-emerald-600",
    th: "text-white font-bold p-5 text-left text-lg",
    td: "p-5 border-b border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300",
    tr: "even:bg-gray-50 dark:even:bg-gray-800/30 hover:bg-brand-green/5 transition-colors duration-200",

    // Enhanced Images with better shadows
    img: "rounded-2xl shadow-2xl my-14 border border-gray-200 dark:border-gray-700 hover:scale-[1.02] transition-transform duration-500 shadow-brand-green/10",

    // Enhanced Horizontal Rule
    hr: "my-20 border-0 h-1 bg-gradient-to-r from-transparent via-brand-green/50 to-transparent shadow-lg",

    // Container
    prose: "max-w-none",
  };
};

/**
 * Prose classes for blog posts
 * - Headings: H1 = text-3xl/4xl, H2 = text-2xl/3xl, H3 = text-xl/2xl, H4 = text-lg
 * - Body text: Controlled via CSS in globals.css (default 14px, adjustable 12-16px)
 */
const baseClasses = "prose dark:prose-invert max-w-none";
const headingClasses =
  "prose-headings:font-bold prose-headings:tracking-tight prose-headings:scroll-mt-24";
const h1Classes =
  "prose-h1:text-3xl xl:prose-h1:text-4xl prose-h1:mb-10 prose-h1:mt-14 prose-h1:text-brand-ink dark:prose-h1:text-white prose-h1:font-black prose-h1:tracking-tight prose-h1:leading-tight";
const h2Classes =
  "prose-h2:text-2xl xl:prose-h2:text-3xl prose-h2:mb-8 prose-h2:mt-16 prose-h2:pb-5 prose-h2:border-b-2 prose-h2:border-brand-green/30 prose-h2:text-brand-ink dark:prose-h2:text-white prose-h2:relative prose-h2:pl-10 prose-h2:font-bold prose-h2:tracking-tight prose-h2:before:absolute prose-h2:before:left-0 prose-h2:before:top-0 prose-h2:before:w-1 prose-h2:before:h-full prose-h2:before:bg-gradient-to-b prose-h2:before:from-brand-green prose-h2:before:to-emerald-500 prose-h2:before:rounded-full";
const h3Classes =
  "prose-h3:text-xl xl:prose-h3:text-2xl prose-h3:mb-6 prose-h3:mt-14 prose-h3:text-gray-900 dark:prose-h3:text-white prose-h3:font-semibold prose-h3:border-l-4 prose-h3:border-brand-green prose-h3:pl-5 prose-h3:bg-gradient-to-r prose-h3:from-brand-green/5 prose-h3:to-transparent prose-h3:py-2";
const h4Classes =
  "prose-h4:text-lg prose-h4:mb-4 prose-h4:mt-12 prose-h4:text-brand-green prose-h4:font-semibold prose-h4:tracking-wide prose-h4:uppercase";
const paragraphClasses =
  "prose-p:text-gray-700 dark:prose-p:text-gray-300 prose-p:leading-relaxed prose-p:mb-8 prose-p:font-light prose-p:tracking-wide prose-p:first-letter:text-2xl prose-p:first-letter:font-bold prose-p:first-letter:text-brand-green prose-p:first-letter:float-left prose-p:first-letter:mr-3 prose-p:first-letter:mt-2 prose-p:first-letter:leading-none prose-p:first-letter:tracking-tight";
const linkClasses =
  "prose-a:text-brand-green prose-a:font-medium prose-a:no-underline prose-a:border-b-2 prose-a:border-brand-green/20 prose-a:pb-1 hover:prose-a:border-brand-green hover:prose-a:text-brand-green prose-a:transition-all prose-a:duration-300 prose-a:rounded-sm prose-a:bg-gradient-to-r prose-a:from-brand-green/5 prose-a:to-transparent prose-a:px-1 hover:prose-a:from-brand-green/10";
const strongClasses =
  "prose-strong:text-brand-ink dark:prose-strong:text-white prose-strong:font-semibold prose-strong:bg-gradient-to-r prose-strong:from-brand-green/10 prose-strong:to-emerald-500/10 prose-strong:px-2 prose-strong:py-1 prose-strong:rounded-lg prose-strong:border prose-strong:border-brand-green/10 prose-strong:shadow-sm";
const listClasses =
  'prose-ul:my-10 prose-ul:space-y-3 prose-li:text-gray-700 dark:prose-li:text-gray-300 prose-li:leading-relaxed prose-li:marker:text-brand-green prose-li:marker:font-bold prose-li:flex prose-li:items-start prose-li:gap-3 prose-li:before:content-["•"] prose-li:before:text-brand-green prose-li:before:text-sm prose-li:before:flex-shrink-0 prose-li:before:mt-1';
const olClasses =
  "prose-ol:my-10 prose-ol:space-y-3 prose-ol:text-gray-700 dark:prose-ol:text-gray-300 prose-ol:leading-relaxed prose-ol:list-decimal prose-ol:list-inside prose-ol:marker:font-bold prose-ol:marker:text-brand-green";
const blockquoteClasses =
  "prose-blockquote:border-l-4 prose-blockquote:border-brand-green prose-blockquote:bg-gradient-to-r prose-blockquote:from-brand-green/5 prose-blockquote:to-emerald-500/5 dark:prose-blockquote:from-brand-green/10 dark:prose-blockquote:to-emerald-500/10 prose-blockquote:py-8 prose-blockquote:px-10 prose-blockquote:my-12 prose-blockquote:rounded-r-2xl prose-blockquote:shadow-xl prose-blockquote:border prose-blockquote:border-brand-green/20 prose-blockquote:italic prose-blockquote:relative prose-blockquote:overflow-hidden";
const codeClasses =
  "prose-code:text-brand-green prose-code:bg-gradient-to-r prose-code:from-gray-50 prose-code:to-gray-100 dark:prose-code:from-gray-800 dark:prose-code:to-gray-900 prose-code:px-3 prose-code:py-1.5 prose-code:rounded-lg prose-code:border prose-code:border-brand-green/20 prose-code:font-mono prose-code:text-xs prose-code:font-medium prose-code:shadow-sm";
const preClasses =
  "prose-pre:bg-gradient-to-br prose-pre:from-gray-900 prose-pre:to-slate-950 prose-pre:text-gray-100 prose-pre:p-8 prose-pre:rounded-2xl prose-pre:overflow-x-auto prose-pre:shadow-2xl prose-pre:border prose-pre:border-gray-700 prose-pre:my-14 prose-pre:relative";
const tableClasses =
  "prose-table:my-14 prose-table:border-collapse prose-table:w-full prose-table:rounded-2xl prose-table:overflow-hidden prose-table:shadow-xl prose-table:border prose-table:border-gray-200 dark:prose-table:border-gray-700 prose-thead:bg-gradient-to-r prose-thead:from-brand-green prose-thead:to-emerald-600 prose-th:text-white prose-th:font-bold prose-th:p-5 prose-th:text-left prose-th:text-sm prose-td:p-5 prose-td:border-b prose-td:border-gray-200 dark:prose-td:border-gray-700 prose-td:text-gray-700 dark:prose-td:text-gray-300 prose-tr:even:bg-gray-50 dark:prose-tr:even:bg-gray-800/30 prose-tr:hover:bg-brand-green/5 prose-tr:transition-colors prose-tr:duration-200";
const imageClasses =
  "prose-img:rounded-2xl prose-img:shadow-2xl prose-img:my-14 prose-img:border prose-img:border-gray-200 dark:prose-img:border-gray-700 prose-img:hover:scale-[1.02] prose-img:transition-transform prose-img:duration-500 prose-img:shadow-brand-green/10";
const hrClasses =
  "prose-hr:my-20 prose-hr:border-0 prose-hr:h-1 prose-hr:bg-gradient-to-r prose-hr:from-transparent prose-hr:via-brand-green/50 prose-hr:to-transparent prose-hr:shadow-lg";

// Combine all classes
// Note: Body text sizes (p, li, blockquote, td) are controlled via CSS in globals.css
// Headings are fixed: H1/H2/H3 = 16px (text-base), H4 = 14px (text-sm)
export const proseClasses = [
  baseClasses,
  headingClasses,
  h1Classes,
  h2Classes,
  h3Classes,
  h4Classes,
  paragraphClasses,
  linkClasses,
  strongClasses,
  listClasses,
  olClasses,
  blockquoteClasses,
  codeClasses,
  preClasses,
  tableClasses,
  imageClasses,
  hrClasses,
].join(" ");

/**
 * Get prose classes based on text size
 * Used by BlogArticleContent and DynamicProseContent components
 */
export function getProseClasses(
  textSize: "small" | "medium" | "large" = "medium",
): string {
  // The base prose classes remain the same, text size is handled via CSS classes
  const sizeClasses = {
    small: "text-sm",
    medium: "text-base",
    large: "text-lg",
  };
  return `${proseClasses} ${sizeClasses[textSize]}`;
}

// Default export
export default useProse;