"use client";

import { useLocale, useTranslations } from 'next-intl';
import Link from 'next/link';

export default function AboutUsPage() {
    const locale = useLocale();
    const t = useTranslations('about-us-page');

    const boldRenderer = {
        bold: (chunks: React.ReactNode) => <span className="font-bold text-text-main-light dark:text-white">{chunks}</span>
    };

    return (
        <div className="bg-background-light dark:bg-background-dark font-cairo text-text-main-light dark:text-gray-100 transition-colors duration-300 antialiased min-h-screen">
            <main className="max-w-4xl mx-auto px-6 py-12 md:py-16">
                {/* Breadcrumb */}
                <nav aria-label="Breadcrumb" className="flex items-center text-sm text-text-muted-light dark:text-gray-500 mb-16">
                    <Link href={`/${locale}/home`} className="hover:text-text-main-light dark:hover:text-gray-300 transition-colors">
                        {t('breadcrumb-home')}
                    </Link>
                    <span className="mx-2 text-xs opacity-50">&gt;</span>
                    <span className="text-text-muted-light dark:text-gray-300 font-medium">{t('breadcrumb-title')}</span>
                </nav>

                <div className="space-y-16">
                    {/* Journey Section */}
                    <section className="relative">
                        <div className="mb-6 inline-block relative group">
                            <h2 className="text-3xl md:text-4xl font-bold text-text-main-light dark:text-white pb-2 relative z-10">
                                {t('journey-title')}
                            </h2>
                        </div>
                        <p className="text-lg leading-loose text-gray-600 dark:text-gray-300 max-w-3xl text-justify md:text-start font-light">
                            {t('journey-desc')}
                        </p>
                    </section>

                    {/* Mission Section */}
                    <section className="relative">
                        <div className="mb-6 inline-block relative">
                            <h2 className="text-3xl md:text-4xl font-bold text-text-main-light dark:text-white pb-2 relative z-10">
                                {t('mission-title')}
                            </h2>
                        </div>
                        <p className="text-lg leading-loose text-gray-600 dark:text-gray-300 max-w-3xl text-justify md:text-start font-light">
                            {t('mission-desc')}
                        </p>
                    </section>

                    {/* Vision Section */}
                    <section className="relative">
                        <div className="mb-6 inline-block relative">
                            <h2 className="text-3xl md:text-4xl font-bold text-text-main-light dark:text-white pb-2 relative z-10">
                                {t('vision-title')}
                            </h2>
                        </div>
                        <p className="text-lg leading-loose text-gray-600 dark:text-gray-300 max-w-3xl text-justify md:text-start font-light">
                            {t('vision-desc')}
                        </p>
                    </section>
                </div>

                {/* Why Choose Balmy Section */}
                <div className="mt-24 pt-8 border-t border-gray-100 dark:border-gray-800">
                    <h2 className="text-3xl font-bold text-text-main-light dark:text-white mb-10 text-start">
                        {t('why-choose-title')}
                    </h2>
                    <ul className="space-y-6 text-gray-700 dark:text-gray-300">
                        {([1, 2, 3, 4, 5, 6, 7] as const).map((num) => (
                            <li key={num} className="flex items-start gap-3">
                                <span className="mt-2 block w-1.5 h-1.5 rounded-full bg-gray-400 dark:bg-gray-500 flex-shrink-0"></span>
                                <p className="text-lg leading-relaxed">
                                    {t.rich(`reason-${num}`, boldRenderer)}
                                </p>
                            </li>
                        ))}
                    </ul>
                </div>
            </main>
            <div className="h-2 w-full bg-gradient-to-l from-gray-200 to-transparent dark:from-gray-800 dark:to-transparent mt-12 opacity-30"></div>
        </div>
    );
}