// BEGIN CHANGE: pagina Biblioteca - Imbuements (scrolls temporarios)
"use client";

import Link from "next/link";
import { useI18n } from "@/i18n/LanguageProvider";
import { Navbar } from "@/components/Navbar";
import { Footer } from "@/components/Footer";
import { ItemIcon } from "@/components/ItemIcon";
import {
  IMBUEMENT_MAX_ACTIVE,
  IMBUEMENT_SCROLLS,
  type ImbuementScrollKey,
} from "@/lib/imbuements-content";

export default function ImbuementsPage() {
  const { t } = useI18n();
  const page = t.imbuementsPage;

  return (
    <div className="flex min-h-screen flex-col">
      <Navbar />
      <main className="mx-auto w-full max-w-4xl flex-1 px-6 py-14">
        <h1 className="text-3xl font-semibold tracking-tight">{page.title}</h1>
        <p className="mt-2 text-muted">{page.subtitle}</p>

        <div className="mt-4 flex flex-wrap gap-3 text-sm">
          <Link href="/shop" className="text-brand hover:underline">
            {page.linkShop}
          </Link>
          <span className="text-muted">-</span>
          <Link href="/items" className="text-brand hover:underline">
            {page.linkItems}
          </Link>
        </div>

        <section className="mt-10 rounded-xl border border-border bg-panel p-5">
          <h2 className="text-lg font-semibold">{page.howTitle}</h2>
          <ol className="mt-3 list-decimal space-y-2 pl-5 text-sm text-muted">
            {page.howSteps.map((step, i) => (
              <li key={i}>{step}</li>
            ))}
          </ol>
        </section>

        <section className="mt-6 rounded-xl border border-border bg-panel p-5">
          <h2 className="text-lg font-semibold">{page.whereTitle}</h2>
          <p className="mt-3 text-sm text-muted whitespace-pre-wrap">{page.whereBody}</p>
        </section>

        <section className="mt-6 rounded-xl border border-border bg-panel p-5">
          <h2 className="text-lg font-semibold">{page.rulesTitle}</h2>
          <ul className="mt-3 list-disc space-y-2 pl-5 text-sm text-muted">
            {page.rules.map((rule, i) => (
              <li key={i}>{rule}</li>
            ))}
          </ul>
          <p className="mt-4 text-sm text-muted">
            {page.maxActiveHint.replace("{max}", String(IMBUEMENT_MAX_ACTIVE))}
          </p>
          <p className="mt-2 text-sm text-muted">{page.statusHint}</p>
        </section>

        <section className="mt-10">
          <h2 className="text-lg font-semibold">{page.scrollsTitle}</h2>
          <p className="mt-1 text-sm text-muted">{page.scrollsSubtitle}</p>
          <div className="mt-6 grid gap-4 sm:grid-cols-2">
            {IMBUEMENT_SCROLLS.map((scroll) => {
              const info = page.scrolls[scroll.key as ImbuementScrollKey];
              return (
                <article
                  key={scroll.itemId}
                  className="rounded-xl border border-border bg-panel p-4"
                >
                  <div className="flex items-start gap-3">
                    <div className="mt-0.5 grid h-10 w-10 shrink-0 place-items-center">
                      <ItemIcon id={scroll.itemId} alt={info.name} size={36} />
                    </div>
                    <div className="min-w-0">
                      <h3 className="font-medium">{info.name}</h3>
                      <p className="mt-0.5 font-mono text-xs text-muted">ID {scroll.itemId}</p>
                      <p className="mt-2 text-sm text-brand">{info.effect}</p>
                      <p className="mt-2 text-sm text-muted">{info.detail}</p>
                    </div>
                  </div>
                </article>
              );
            })}
          </div>
        </section>
      </main>
      <Footer />
    </div>
  );
}
// END CHANGE