import { createFileRoute, Link } from "@tanstack/react-router";
import { useState } from "react";
import { useLang, type Lang, type T } from "@/lib/i18n";
import { PageHeader } from "@/components/site/Layout";
import { meta } from "@/lib/meta";
import {
  CHAIRMAN_CLOSING,
  CHAIRMAN_EYEBROW,
  CHAIRMAN_PARAGRAPHS,
  CHAIRMAN_QUOTE,
  CHAIRMAN_SIGNATURE,
  CHAIRMAN_TAGLINE,
  CHAIRMAN_TITLE,
} from "@/lib/chairman";

export const Route = createFileRoute("/about")({
  head: () => meta("About the Ceremony", "The mission and philosophy behind Thinulaka Uttamachara 2026."),
  component: About,
});

const BLOCKS = [
  { h: { si: "අපගේ මෙහෙවර", en: "Our mission" }, p: { si: "කිසිවෙකුගේ අවධානයට ලක් නොවී, තම ජීවිතය සමාජයේ යහපත වෙනුවෙන් කැප කළ ජ්‍යෙෂ්ඨ පුරවැසියන් සොයා ගෙන, ඔවුන්ට සුදුසු ගෞරවය හා කෘතඥතාව පිරිනැමීම.", en: "To find senior citizens who devoted their lives to the good of society without recognition, and to offer them the honour and gratitude they deserve." } },
  { h: { si: "අපගේ දර්ශනය", en: "Our philosophy" }, p: { si: "මෙහි පළමු, දෙවන හෝ තුන්වන ස්ථාන නැත. තෝරාගත් සෑම උත්තමයෙකුටම සමාන ගෞරවයක් හිමි වේ. සේවය මැනිය නොහැකි බැවින්, අපි එය සංසන්දනය නොකරමු.", en: "There is no first, second or third place. Every selected honoree receives equal dignity. Service cannot be measured, so we do not compare it." } },
  { h: { si: "එය වැදගත් වන්නේ ඇයි", en: "Why it matters" }, p: { si: "ගම්මානවල ගුරුවරුන්, සෞඛ්‍ය සේවකයින්, ප්‍රජා නායකයින් සහ ස්වේච්ඡා සේවකයින් පරම්පරා ගණනාවක් හැඩගැස්වූහ. ඔවුන්ගේ කතා ඊළඟ පරම්පරාවට ආලෝකයකි.", en: "Village teachers, health workers, community leaders and volunteers have shaped generations. Their stories are a light for the next." } },
];

function About() {
  const { t, lang } = useLang();
  /* The chairman's message can be read on its own in either language,
     independently of the site-wide language switch. */
  const [msgLang, setMsgLang] = useState<Lang | null>(null);
  const active = msgLang ?? lang;
  const tm = (x: T) => x[active];

  return (
    <>
      <PageHeader eyebrow={{ si: "උත්සවය ගැන", en: "About the ceremony" }} title={{ si: "හදවතින් කරන උපහාරයක්", en: "A tribute from the heart" }} />
      <div className="mx-auto max-w-3xl space-y-16 px-5 py-20">
        {BLOCKS.map((b, i) => (
          <article key={i} className="fade-up">
            <div className="eyebrow">0{i + 1}</div>
            <h2 className="mt-3 text-3xl text-gold">{t(b.h)}</h2>
            <p className="mt-5 text-lg text-muted-foreground">{t(b.p)}</p>
          </article>
        ))}
      </div>

      <section id="chairman-message" className="border-y border-border bg-section">
        <div className="mx-auto max-w-4xl px-5 py-24">
          <div className="text-center fade-up">
            <div className="eyebrow">{tm(CHAIRMAN_EYEBROW)}</div>
            <h2 className="mt-3 font-sinhala-display text-3xl leading-tight text-shine-gold md:text-5xl">{tm(CHAIRMAN_TITLE)}</h2>
            <div className="gold-rule mx-auto mt-8 w-40" />
          </div>

          <div className="mt-10 flex flex-wrap items-center justify-center gap-3 fade-up">
            <div
              className="flex rounded-sm border border-gold/50 text-sm"
              role="group"
              aria-label={tm({ si: "සභාපති පණිවිඩයේ භාෂාව", en: "Language of the chairman's message" })}
            >
              {(["si", "en"] as const).map((l) => (
                <button
                  key={l}
                  type="button"
                  onClick={() => setMsgLang(l)}
                  aria-pressed={active === l}
                  className={`px-4 py-1.5 transition-colors ${active === l ? "bg-gold text-ink" : "text-gold hover:bg-gold/10"}`}
                >
                  {l === "si" ? "සිංහල" : "English"}
                </button>
              ))}
            </div>
            <Link
              to="/chairman-message"
              search={{ lang: active }}
              className="rounded-sm border border-gold/50 px-4 py-1.5 text-sm text-gold transition-colors hover:bg-gold/10"
            >
              {tm({ si: "මුද්‍රණයට සුදුසු පිරිසිදු ආකෘතිය", en: "Print-friendly copy" })}
            </Link>
          </div>

          <figure className="gold-frame mt-12 p-8 fade-up md:p-14">
            <blockquote className="text-center">
              <p className="font-sinhala-display text-2xl leading-relaxed text-gold md:text-3xl">“{tm(CHAIRMAN_QUOTE)}”</p>
            </blockquote>
            <div className="mx-auto mt-10 max-w-2xl space-y-6 text-lg leading-relaxed text-foreground/90">
              {CHAIRMAN_PARAGRAPHS.map((p, i) => (
                <p key={i} className={p.lead ? "font-sinhala-display text-2xl text-gold" : undefined}>{tm(p)}</p>
              ))}
              <p className="font-sinhala-display text-xl text-gold md:text-2xl">{tm(CHAIRMAN_TAGLINE)}</p>
            </div>
            <figcaption className="mt-14 border-t border-border pt-10 text-right">
              <p className="text-muted-foreground">{tm(CHAIRMAN_CLOSING)}</p>
              {CHAIRMAN_SIGNATURE.map((s) => (
                <div key={s.name.en} className="mt-4">
                  <p className="font-sinhala-display text-2xl text-gold">{tm(s.name)}</p>
                  <p className="mt-1 text-foreground/90">{tm(s.role)}</p>
                  <p className="text-muted-foreground">{tm(s.org)}</p>
                  <p className="text-sm text-muted-foreground">{tm(s.event)}</p>
                </div>
              ))}
            </figcaption>
          </figure>
        </div>
      </section>
    </>
  );
}