"use client";

import Link from "next/link";

import { AppLogo } from "@/components/branding/app-logo";
import { LanguageSwitcher } from "@/components/layout/language-switcher";
import { useLocale } from "@/components/providers/locale-provider";

type PublicInfoPageProps = {
  title: string;
  description: string;
  sections: Array<{
    title: string;
    paragraphs: string[];
  }>;
};

export function PublicInfoPage({ title, description, sections }: PublicInfoPageProps) {
  const { dict } = useLocale();

  return (
    <main className="min-h-screen bg-canvas px-6 py-10 lg:px-0">
      <div className="mx-auto w-full max-w-4xl">
        <div className="rounded-2xl border border-line/70 bg-white shadow-panel">
          <header className="border-b border-line/70 px-8 py-8 sm:px-10">
            <div className="flex items-start justify-between gap-4">
              <div className="flex items-center gap-4">
                <AppLogo size={64} className="h-16 w-16 rounded-2xl object-contain" priority />
                <div>
                  <p className="text-sm font-semibold uppercase tracking-[0.12em] text-slate-500">
                    AbelBirdnest Stock
                  </p>
                  <h1 className="mt-1 text-3xl font-semibold tracking-tight text-ink">{title}</h1>
                </div>
              </div>
              <LanguageSwitcher />
            </div>
            <p className="mt-5 max-w-3xl text-[15px] leading-7 text-slate-600">{description}</p>
          </header>

          <div className="space-y-8 px-8 py-8 sm:px-10">
            {sections.map((section) => (
              <section key={section.title}>
                <h2 className="text-lg font-semibold text-ink">{section.title}</h2>
                <div className="mt-3 space-y-3 text-[14px] leading-7 text-slate-600">
                  {section.paragraphs.map((paragraph) => (
                    <p key={paragraph}>{paragraph}</p>
                  ))}
                </div>
              </section>
            ))}
          </div>

          <footer className="flex flex-col gap-3 border-t border-line/70 px-8 py-6 text-sm text-slate-500 sm:flex-row sm:items-center sm:justify-between sm:px-10">
            <span>© 2026 AbelBirdnest</span>
            <Link href="/login" className="font-semibold text-moss hover:underline">
              {dict.common.backToLogin}
            </Link>
          </footer>
        </div>
      </div>
    </main>
  );
}
