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

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);

  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-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-6">Information</Badge>
            <Heading level={1} className="text-white mb-0">
              <span className="text-white">{pageData.frontmatter.title}</span>
            </Heading>
          </div>
        </Container>
      </section>

      <Section className="bg-white -mt-12 relative z-20 rounded-t-[60px] shadow-2xl">
        <Container>
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-16">
            {/* Sticky Narrative Sidebar */}
            <div className="lg:col-span-4">
              <div className="sticky top-32 space-y-8">
                <div className="p-8 bg-neutral-light rounded-3xl border border-neutral-medium">
                  <h3 className="text-xl font-bold text-primary mb-4">Quick Navigation</h3>
                  <nav className="space-y-4">
                    <div className="h-1 w-12 bg-accent rounded-full" />
                    <p className="text-text-secondary leading-relaxed">
                      Explore the details of {pageData.frontmatter.title}. KLZ provides comprehensive information on all our services and corporate policies.
                    </p>
                  </nav>
                </div>
                
                <div className="p-8 bg-primary-dark rounded-3xl text-white">
                  <h3 className="text-xl font-bold mb-4">Need Help?</h3>
                  <p className="text-white/70 mb-6">Our support team is available for any questions regarding this topic.</p>
                  <a href={`/${locale}/contact`} className="text-accent font-bold hover:underline">Contact Us &rarr;</a>
                </div>
              </div>
            </div>

            {/* Main Content */}
            <div className="lg:col-span-8">
              <article className="prose 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-3xl prose-img:shadow-2xl
                prose-ul:list-disc prose-ul:pl-6
                prose-li:text-text-secondary
              ">
                <MDXRemote source={pageData.content} />
              </article>
            </div>
          </div>
        </Container>
      </Section>
    </div>
  );
}