import { createFileRoute } from "@tanstack/react-router";
import { useLang } from "@/lib/i18n";
import { Notice, PageHeader } from "@/components/site/Layout";
import { meta } from "@/lib/meta";
import { FIELDS, PRINCIPLES } from "@/lib/fields";
import f1 from "@/assets/field-01.jpg";
import f2 from "@/assets/field-02.jpg";
import f3 from "@/assets/field-03.jpg";
import f4 from "@/assets/field-04.jpg";
import f5 from "@/assets/field-05.jpg";
import f6 from "@/assets/field-06.jpg";
import f7 from "@/assets/field-07.jpg";
import f8 from "@/assets/field-08.jpg";
import f9 from "@/assets/field-09.jpg";
import f10 from "@/assets/field-10.jpg";

const FIELD_IMAGES = [
  { src: f1, w: 1024, h: 1536 },
  { src: f2, w: 1024, h: 1280 },
  { src: f3, w: 1024, h: 1536 },
  { src: f4, w: 1024, h: 1280 },
  { src: f5, w: 1024, h: 1536 },
  { src: f6, w: 1024, h: 1280 },
  { src: f7, w: 1024, h: 1536 },
  { src: f8, w: 1024, h: 1536 },
  { src: f9, w: 1024, h: 1280 },
  { src: f10, w: 1024, h: 1280 },
];


export const Route = createFileRoute("/categories")({
  head: () => meta("Award Fields & Criteria", "The ten fields of service and evaluation criteria of Thinulaka Uttamachara 2026."),
  component: Categories,
});

function Categories() {
  const { t } = useLang();
  return (
    <>
      <PageHeader
        eyebrow={{ si: "ඇගයීම් ක්ෂේත්‍ර සහ නිර්ණායක", en: "Fields & criteria" }}
        title={{ si: "සේවයේ ක්ෂේත්‍ර දහය", en: "Ten fields of service" }}
        intro={{ si: "සමාජයේ යහපැවැත්ම, මානව ගුණධර්ම, ප්‍රජා සංවර්ධනය සහ අනාගත පරපුරේ අභිවෘද්ධිය වෙනුවෙන් කැපවූ පුද්ගලයන්ගේ දායකත්වය, කැපවීම, සමාජීය බලපෑම සහ ආදර්ශවත් ජීවන ගමන ඇගයීමට ලක් කෙරේ.", en: "We recognise the contribution, dedication, social impact and exemplary lives of people devoted to society, human values, community development and future generations." }}
      />
      <div className="mx-auto max-w-5xl space-y-10 px-5 py-20">
        {FIELDS.map((f, i) => {
          const flip = i % 2 === 1;
          const im = FIELD_IMAGES[i] ?? { src: f1, w: 1024, h: 1536 };

          return (
            <article key={i} id={`field-${i + 1}`} className="gold-frame overflow-hidden bg-card/40">
              <div className={`grid ${flip ? "md:grid-cols-[minmax(0,17rem)_minmax(0,1fr)]" : "md:grid-cols-[minmax(0,1fr)_minmax(0,17rem)]"}`}>
                <div className={`p-8 md:p-12 ${flip ? "md:order-2" : "md:order-1"}`}>
                  <div className="font-display text-3xl text-gold/40">{String(i + 1).padStart(2, "0")}</div>
                  <h2 className="mt-2 text-3xl text-gold">{t(f.name)}</h2>
                  <p className="mt-2 text-lg text-foreground">{t(f.tagline)}</p>
                  <div className="gold-rule mt-6 w-24" />
                  {f.body.map((p, j) => <p key={j} className="mt-5 text-muted-foreground">{t(p)}</p>)}
                  <h3 className="mt-8 text-sm uppercase tracking-[0.2em] text-gold">{t({ si: "ඇගයීම් නිර්ණායක", en: "Evaluation criteria" })}</h3>
                  <ul className="mt-4 space-y-2">
                    {f.criteria.map((c, j) => (
                      <li key={j} className="flex gap-4 text-muted-foreground"><span className="mt-2.5 h-1.5 w-1.5 shrink-0 rotate-45 bg-gold" />{t(c)}</li>
                    ))}
                  </ul>
                </div>
                <div className={`relative order-first aspect-[2/3] border-gold/20 md:aspect-auto md:min-h-full ${flip ? "md:order-1 md:border-r" : "md:order-2 md:border-l"}`}>
                  <img
                    src={im.src}
                    alt={t(f.name)}
                    width={im.w}
                    height={im.h}

                    loading="lazy"
                    className="absolute inset-0 h-full w-full object-cover"

                  />
                  <div aria-hidden className="absolute inset-0 bg-linear-to-t from-ink/70 via-ink/5 to-transparent" />
                </div>
              </div>
            </article>
          );
        })}

        <section className="pt-10">
          <h2 className="text-center text-3xl text-gold">{t({ si: "පොදු ඇගයීම් මූලධර්ම", en: "Common evaluation principles" })}</h2>
          <p className="mx-auto mt-3 max-w-3xl text-center text-muted-foreground">{t({ si: "සියලුම ක්ෂේත්‍රවල සම්මාන සඳහා ඉදිරිපත් වන පුද්ගලයන්ගේ සේවය පහත මූලධර්ම අනුව ඇගයීමට ලක් කෙරේ. එක් එක් ක්ෂේත්‍රයේ ස්වභාවය, සේවය කළ පරිසරය සහ පුද්ගලයාට තිබූ අවස්ථා හා සම්පත් සැලකිල්ලට ගනිමින් මෙම මූලධර්ම යොදාගත යුතුය.", en: "The service of every person nominated for honours is evaluated against the following principles. They must be applied while considering the nature of each field, the environment in which the service was given, and the opportunities and resources available to the person." })}</p>
          <div className="mt-10 grid gap-6 md:grid-cols-2">
            {PRINCIPLES.map((p, i) => (
              <div key={i} className="gold-frame p-6">
                <h3 className="text-xl text-gold">{i + 1}. {t(p.h)}</h3>
                <p className="mt-2 text-foreground">{t(p.p)}</p>
                {p.body.map((b, j) => <p key={j} className="mt-3 text-muted-foreground">{t(b)}</p>)}
              </div>
            ))}
          </div>
          <div className="mt-10">
            <Notice>{t({ si: "වැදගත්: මෙම නිර්ණායක යෝජිත මූලික රාමුවක් වන අතර, සංවිධායක මණ්ඩලයේ අනුමැතියෙන් පසු නිල නිර්ණායක ලෙස ප්‍රකාශයට පත් කළ හැකිය.", en: "Important: these criteria are a proposed framework and may be published as official criteria after approval by the organizing board." })}</Notice>
          </div>
        </section>

        <section className="gold-frame p-10 text-center">
          <h2 className="text-3xl text-gold">{t({ si: "අපගේ ඇගයීමේ දර්ශනය", en: "Our philosophy of evaluation" })}</h2>
          <p className="mx-auto mt-5 max-w-2xl text-muted-foreground">{t({ si: "තිනුලක උත්තමාචාරය තුළ කිසිවෙකු පළමු, දෙවන හෝ තෙවන ස්ථානයට පත් නොකෙරේ. සෑම සම්මානලාභියෙකුගේම සේවය ඔවුන්ගේ සුවිශේෂී ජීවන ගමන සහ සමාජයට ලබාදුන් දායකත්වය අනුව ගෞරවයෙන් ඇගයීමට ලක් කෙරේ.", en: "At Thinulaka Uttamachara no one is placed first, second or third. Every honoree's service is honoured with dignity according to their unique life journey and contribution to society." })}</p>
          <p className="mt-6 font-sinhala-display text-xl text-gold">“ජීවිතය පුරා කළ සේවයට — අද අපේ උත්තමාචාරය.”</p>
        </section>
      </div>
    </>
  );
}