import React, { useEffect } from 'react';
import { Link } from 'react-router-dom';
import { useTranslation } from '@/hooks/useTranslation';

export const DesignSystemDemo: React.FC = () => {
    const { t } = useTranslation();

    useEffect(() => {
        document.title = t('designSystem.pageTitle');
    }, [t]);

    return (
        <main
            id="main-content"
            className="min-h-screen bg-[var(--sumi-bg-void)] text-[var(--sumi-text-primary)]"
            data-testid="design-system-page"
        >
            <header className="flex flex-col items-center justify-center px-4 sm:px-6 pt-16 pb-12">
                <h1
                    className="text-3xl sm:text-4xl tracking-[0.1em] mb-3"
                    style={{ fontFamily: 'var(--sumi-font-heading)', fontWeight: 200 }}
                >
                    {t('designSystem.title')}
                </h1>
                <div
                    className="w-16 h-px bg-gradient-to-r from-transparent via-[var(--sumi-kin)]/30 to-transparent mb-4"
                    aria-hidden="true"
                />
                <p
                    className="text-sm text-[var(--sumi-text-secondary)]"
                    style={{ fontFamily: 'var(--sumi-font-body)' }}
                >
                    {t('designSystem.subtitle')}
                </p>
            </header>

            <section className="px-4 sm:px-6 pb-16 max-w-[800px] mx-auto text-center">
                <p
                    className="text-sm text-[var(--sumi-text-tertiary)] leading-relaxed"
                    style={{ fontFamily: 'var(--sumi-font-body)' }}
                >
                    {t('designSystem.underConstruction')}
                </p>
                <div className="mt-8">
                    <Link
                        to="/"
                        className="text-xs tracking-[0.1em] px-4 py-1.5 border border-[var(--sumi-border-strong)] rounded-sm text-[var(--sumi-text-secondary)] hover:text-[var(--sumi-text-primary)] hover:border-[var(--sumi-accent)]/40 transition-all"
                        style={{ fontFamily: 'var(--sumi-font-heading)', fontWeight: 300 }}
                    >
                        {t('designSystem.backToHome')}
                    </Link>
                </div>
            </section>
        </main>
    );
};