import SeoNavbar from '@/components/seo/SeoNavbar'
import SeoFooter from '@/components/seo/SeoFooter'
import {
  SeoHero,
  SeoAdvantage,
  SeoMethodology,
  SeoComparison,
  SeoContentSections,
  SeoBestFit,
  SeoFaq,
  SeoRelated,
} from '@/components/seo/SeoSections'
import type { SeoPageProfile } from '@/lib/seoPages'
import { seoTemplateCopy } from '@/lib/seoTemplateCopy'
import { siteConfig, hasIosStoreUrl } from '@/lib/site'

interface SeoCategoryPageProps {
  profile: SeoPageProfile
}

export default function SeoCategoryPage({ profile }: SeoCategoryPageProps) {
  const locale = profile.locale ?? 'en'
  const copy = seoTemplateCopy[locale]

  const faqSchema = {
    '@context': 'https://schema.org',
    '@type': 'FAQPage',
    mainEntity: profile.faqs.map((item) => ({
      '@type': 'Question',
      name: item.question,
      acceptedAnswer: {
        '@type': 'Answer',
        text: item.answer,
      },
    })),
  }

  const appSchema = profile.includeAppSchema
    ? {
        '@context': 'https://schema.org',
        '@type': 'SoftwareApplication',
        name: siteConfig.name,
        operatingSystem: 'iOS, Android',
        applicationCategory: 'LifestyleApplication',
        description: profile.directAnswer,
        ...(hasIosStoreUrl && { downloadUrl: siteConfig.iosAppStoreUrl }),
        offers: {
          '@type': 'Offer',
          price: '0',
          priceCurrency: 'EUR',
        },
      }
    : null

  const breadcrumbSchema = {
    '@context': 'https://schema.org',
    '@type': 'BreadcrumbList',
    itemListElement: [
      {
        '@type': 'ListItem',
        position: 1,
        name: 'Home',
        item: siteConfig.domain,
      },
      {
        '@type': 'ListItem',
        position: 2,
        name: profile.h1,
        item: `${siteConfig.domain}${profile.canonical}`,
      },
    ],
  }

  return (
    <div className="bg-background text-on-background font-body antialiased">
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(faqSchema) }}
      />
      {appSchema && (
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(appSchema) }}
        />
      )}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
      />

      <SeoNavbar locale={locale} />

      <main className="pt-[72px] relative overflow-hidden bg-[#fdfbf6]">
        {/* Dekorative Farb-Blobs */}
        <div className="absolute inset-0 pointer-events-none -z-10" aria-hidden="true">
          <div className="absolute top-[-5%] left-[-10%] w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-[#ffd8b1] blur-[120px] rounded-full mix-blend-multiply opacity-60"></div>
          <div className="absolute top-[15%] right-[-5%] w-[50vw] h-[50vw] max-w-[600px] max-h-[600px] bg-[#c2e5cc] blur-[100px] rounded-full mix-blend-multiply opacity-80"></div>
          <div className="absolute top-[40%] left-[15%] w-[40vw] h-[40vw] max-w-[500px] max-h-[500px] bg-[#e5f0cb] blur-[100px] rounded-full mix-blend-multiply opacity-70"></div>
        </div>

        <SeoHero profile={profile} copy={copy} />
        <SeoAdvantage profile={profile} copy={copy} />
        <SeoMethodology copy={copy} />
        <SeoComparison profile={profile} copy={copy} />
        <SeoContentSections profile={profile} />
        <SeoBestFit profile={profile} copy={copy} />
        <SeoFaq profile={profile} copy={copy} />
        <SeoRelated profile={profile} copy={copy} />
      </main>

      <SeoFooter locale={locale} />
    </div>
  )
}