---
import '@/styles/global.css'
import Header from '@/components/Header.astro'
import Footer from '@/components/Footer.astro'

interface Props {
  title: string
  description?: string
  ogImage?: string
}
const { title, description = 'Программа учёта и касса для розничных магазинов в Казахстане. Бесплатно 90 дней.', ogImage = '/og/home.png' } = Astro.props
const canonical = new URL(Astro.url.pathname, Astro.site).toString()
---
<!doctype html>
<html lang="ru-KZ">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>{title} · Food Market</title>
    <meta name="description" content={description} />
    <link rel="canonical" href={canonical} />

    <meta property="og:type" content="website" />
    <meta property="og:title" content={`${title} · Food Market`} />
    <meta property="og:description" content={description} />
    <meta property="og:url" content={canonical} />
    <meta property="og:image" content={new URL(ogImage, Astro.site).toString()} />
    <meta property="og:locale" content="ru_KZ" />

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content={`${title} · Food Market`} />
    <meta name="twitter:description" content={description} />
    <meta name="twitter:image" content={new URL(ogImage, Astro.site).toString()} />

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" />

    <script type="application/ld+json" set:html={JSON.stringify({
      '@context': 'https://schema.org',
      '@type': 'SoftwareApplication',
      name: 'Food Market',
      applicationCategory: 'BusinessApplication',
      operatingSystem: 'Web, Windows',
      offers: { '@type': 'Offer', price: '5000', priceCurrency: 'KZT' },
    })} />
  </head>
  <body class="min-h-screen flex flex-col">
    <Header />
    <main class="flex-1"><slot /></main>
    <Footer />
  </body>
</html>
