import { notFound } from 'next/navigation';
import '@/styles/pages/legal.css';
import type { LegalSlug } from '@/lib/pages/legal';
import { pageImageUrl } from '@/lib/media/display-url';
import { getLegalPage } from '@/lib/api/services/pages';
import { sanitizeInlineHtml } from '@/lib/sanitize';
import PageBanner from '@/components/common/PageBanner';
import LegalContents from './LegalContents';

const pad = (n: number) => String(n).padStart(2, '0');

export default async function LegalPage({ slug }: { slug: LegalSlug }) {
  const page = await getLegalPage(slug);
  if (!page) notFound();

  const { banner, meta, sections } = page;

  return (
    <div className="page-legal">
      {banner.is_visible && (
        <PageBanner
          variant="legal-banner"
          image={pageImageUrl(banner.banner_image)}
          alt={meta.bannerAlt}
          title={
            meta.titleAccent ? (
              <>
                {meta.title} <span className="mainHeading color-golden">{meta.titleAccent}</span>
              </>
            ) : (
              meta.title
            )
          }
          subtitle={banner.subheading}
        />
      )}

      <section className="bg-color-black webContent py-5">
        <div className="container">
          <div className="row g-4 g-xl-5">
            <div className="col-12 col-lg-4 col-xl-3">
              <LegalContents
                sections={sections.map(({ id, title }) => ({ id, title }))}
                effectiveDate={meta.effectiveDate}
                contactEmail={meta.contactEmail}
              />
            </div>

            <div className="col-12 col-lg-8 col-xl-9">
              {sections.map((section, index) => (
                <article className="legal-section" id={section.id} key={section.id}>
                  <div className="legal-section-head">
                    <span className="legal-section-num text-lg fw-800">{pad(index + 1)}</span>
                    <h2 className="text-xl fw-700 color-white mb-0">{section.title}</h2>
                  </div>
                  {section.body.map((paragraph, i) => (
                    <p className="text-md fw-400 mb-0" key={i} dangerouslySetInnerHTML={{ __html: sanitizeInlineHtml(paragraph) }} />
                  ))}
                </article>
              ))}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}