import { getDictionary, Locale } from "../../dictionaries";

export async function generateMetadata({ params }: { params: Promise<{ lang: string }> }) {
  const { lang } = await params;
  const dict = await getDictionary(lang as Locale);
  return {
    title: dict.seo.corporate.title,
    description: dict.seo.corporate.description,
    alternates: {
      canonical: `/${lang}/kurumsal`,
    },
  };
}

export default async function KurumsalPage({
  params,
}: {
  params: Promise<{ lang: string }>;
}) {
  const { lang } = await params;
  const locale = lang as Locale;
  const dict = await getDictionary(locale);
  const t = dict.corporate;

  return (
    <div className="pt-32 pb-24 min-h-screen bg-[var(--color-moy-light)]">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        
        {/* HAKKIMIZDA */}
        <section className="mb-20">
          <h1 className="text-4xl md:text-5xl font-serif text-[var(--color-moy-dark)] mb-6 text-center">{t.title}</h1>
          <div className="w-24 h-1 bg-[var(--color-moy-gold)] mx-auto mb-10"></div>
          <div className="bg-white p-8 md:p-12 rounded-2xl shadow-sm border border-gray-100 text-gray-700 leading-relaxed space-y-6">
            <p>{t.p1}</p>
            <p>{t.p2}</p>
            <p>{t.p3}</p>
            <p>{t.p4}</p>
          </div>
        </section>

        {/* VİZYONUMUZ & MİSYONUMUZ */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
          
          <section>
            <div className="bg-[var(--color-moy-dark)] text-white p-8 md:p-10 rounded-2xl shadow-lg h-full border border-gray-800">
              <h2 className="text-2xl font-serif text-[var(--color-moy-gold)] mb-6 uppercase tracking-wider">{t.vision}</h2>
              <p className="text-gray-300 leading-relaxed font-light">
                {t.visionText}
              </p>
            </div>
          </section>

          <section>
            <div className="bg-white p-8 md:p-10 rounded-2xl shadow-sm h-full border border-gray-200">
              <h2 className="text-2xl font-serif text-[var(--color-moy-gold-dark)] mb-6 uppercase tracking-wider">{t.mission}</h2>
              <p className="text-gray-600 leading-relaxed">
                {t.missionText}
              </p>
            </div>
          </section>

        </div>
      </div>
    </div>
  );
}