import { notFound } from 'next/navigation';
import { MDXRemote } from 'next-mdx-remote/rsc';
import { Section, Container, Heading, Badge } from '@/components/ui';
import { getTranslations } from 'next-intl/server';

interface PageProps {
  params: {
    locale: string;
    slug: string;
  };
}

export default async function StandardPage({ params: { locale, slug } }: PageProps) {
  const { getPageBySlug } = await import('@/lib/pages');
  const pageData = await getPageBySlug(slug, locale);
  const t = await getTranslations('StandardPage');

  if (!pageData) {
    notFound();
  }

  return (
    <div className="flex flex-col min-h-screen bg-neutral-light">
      {/* Hero Section */}
      <section className="bg-primary-dark text-white py-20 md:py-32 relative overflow-hidden">
        <div className="absolute inset-0 opacity-20">
          <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-accent via-transparent to-transparent" />
        </div>
        <Container className="relative z-10">
          <div className="max-w-4xl animate-slide-up">
            <Badge variant="accent" className="mb-4 md:mb-6">{t('badge')}</Badge>
            <Heading level={1} className="text-3xl md:text-6xl lg:text-7xl xl:text-8xl text-white mb-0">
              <span className="text-white">{pageData.frontmatter.title}</span>
            </Heading>
          </div>
        </Container>
      </section>

      <Section className="bg-white -mt-8 md:-mt-12 relative z-20 rounded-t-[32px] md:rounded-t-[60px] shadow-2xl py-12 md:py-28">
        <Container>
          <div className="sticky-narrative-container">
            {/* Sticky Narrative Sidebar - Mobile Optimized */}
            <div className="sticky-narrative-sidebar mb-8 lg:mb-0">
              <div className="lg:sticky lg:top-32 space-y-4 md:space-y-8">
                {/* Mobile-only chip/stepper feel */}
                <div className="flex lg:hidden overflow-x-auto pb-4 gap-3 no-scrollbar -mx-4 px-4">
                  <Badge variant="primary" className="whitespace-nowrap px-4 py-2 rounded-full shadow-sm">{t('overview')}</Badge>
                  <Badge variant="neutral" className="whitespace-nowrap px-4 py-2 rounded-full shadow-sm opacity-60">{t('details')}</Badge>
                  <Badge variant="neutral" className="whitespace-nowrap px-4 py-2 rounded-full shadow-sm opacity-60">{t('support')}</Badge>
                </div>

                <div className="p-6 md:p-8 bg-neutral-light rounded-2xl md:rounded-3xl border border-neutral-medium shadow-sm">
                  <h3 className="text-lg md:text-xl font-bold text-primary mb-3 md:mb-4 flex items-center gap-2">
                    <span className="w-1.5 h-6 bg-accent rounded-full" />
                    {t('quickNavigation')}
                  </h3>
                  <nav className="space-y-3 md:space-y-4">
                    <p className="text-sm md:text-base text-text-secondary leading-relaxed">
                      {t('exploreDetails', { title: pageData.frontmatter.title })}
                    </p>
                  </nav>
                </div>
                
                <div className="p-6 md:p-8 bg-primary-dark rounded-2xl md:rounded-3xl text-white shadow-xl relative overflow-hidden group">
                  <div className="absolute top-0 right-0 w-24 h-full bg-accent/5 -skew-x-12 translate-x-1/2 transition-transform group-hover:translate-x-1/3" />
                  <h3 className="text-lg md:text-xl font-bold mb-3 md:mb-4 relative z-10">{t('needHelp')}</h3>
                  <p className="text-sm md:text-base text-white/70 mb-4 md:mb-6 relative z-10">{t('supportTeamAvailable')}</p>
                  <a href={`/${locale}/contact`} className="inline-flex items-center text-accent font-bold hover:underline touch-target relative z-10 group/link">
                    {t('contactUs')} 
                    <span className="ml-2 transition-transform group-hover/link:translate-x-1">&rarr;</span>
                  </a>
                </div>
              </div>
            </div>

            {/* Main Content */}
            <div className="sticky-narrative-content">
              <article className="prose prose-sm md:prose-lg lg:prose-xl prose-primary max-w-none 
                prose-headings:text-primary prose-headings:font-bold prose-headings:tracking-tight
                prose-p:text-text-secondary prose-p:leading-relaxed
                prose-strong:text-primary prose-strong:font-extrabold
                prose-a:text-primary prose-a:font-bold prose-a:no-underline hover:prose-a:underline
                prose-img:rounded-2xl md:prose-img:rounded-3xl prose-img:shadow-2xl
                prose-ul:list-disc prose-ul:pl-5 md:prose-ul:pl-6
                prose-li:text-text-secondary
              ">
                <MDXRemote source={pageData.content} />
              </article>
            </div>
          </div>
        </Container>
      </Section>
    </div>
  );
}