import { content } from '@/content'

export const metadata = {
  title: `${content.pages.hasznalatiFeltetelek.title} | ${content.common.labels.features || 'mozdIT Bt.'}`,
  description: 'Általános Szerződési Feltételek - Ismerje meg a mozdIT Bt. szolgáltatásainak használati feltételeit.',
}

export default function TermsOfService() {
  const pageContent = content.pages.hasznalatiFeltetelek

  return (
    <div className="py-20 lg:py-28 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
      <div className="mb-12">
        <h1 
          className="text-4xl md:text-5xl font-bold mb-4"
          style={{ color: 'var(--color-foreground)' }}
        >
          {pageContent.title}
        </h1>
        <p 
          className="text-sm"
          style={{ color: 'var(--color-foreground-muted)' }}
        >
          Utolsó frissítés: {pageContent.lastUpdated}
        </p>
      </div>

      <div className="space-y-12">
        {pageContent.sections.map((section) => (
          <section key={section.id}>
            <h2 
              className="text-2xl font-semibold mb-4"
              style={{ color: 'var(--color-foreground)' }}
            >
              {section.title}
            </h2>
            <div 
              className="prose max-w-none"
              style={{ color: 'var(--color-foreground-muted)' }}
              dangerouslySetInnerHTML={{
                __html: section.content
                  .replace(/\n\n/g, '</p><p class="mb-4">')
                  .replace(/• \*\*(.*?)\*\*/g, '<br/>• <strong>$1</strong>')
                  .replace(/^/, '<p class="mb-4">')
                  .replace(/$/, '</p>')
              }}
            />
          </section>
        ))}
      </div>
    </div>
  )
}