import type { Metadata } from 'next'
import { Inter_Tight, Space_Grotesk } from 'next/font/google'
import './globals.css'
import { Providers } from './providers'

const rawSiteUrl = process.env.NEXT_PUBLIC_SITE_URL ?? 'https://sitechangemonitor.com'

const siteUrl = (() => {
  try {
    return new URL(rawSiteUrl).toString().replace(/\/$/, '')
  } catch {
    return 'https://sitechangemonitor.com'
  }
})()

// Body/UI font - straff, modern, excellent readability
const interTight = Inter_Tight({
  subsets: ['latin'],
  variable: '--font-body',
  display: 'swap',
})

// Headline font - geometric, futuristic, "smart" look
const spaceGrotesk = Space_Grotesk({
  subsets: ['latin'],
  variable: '--font-display',
  display: 'swap',
})

export const metadata: Metadata = {
  metadataBase: new URL(siteUrl),
  title: {
    default: 'Website Change Monitor | SiteChangeMonitor',
    template: '%s | SiteChangeMonitor',
  },
  description:
    'Website change monitor for SEO and growth teams. Monitor website changes, track competitor price updates, and get visual diff alerts with less noise.',
  keywords: [
    'website change monitor',
    'monitor website changes',
    'track page changes',
    'competitor price tracker',
    'visual diff alert',
    'website change detection',
  ],
  alternates: {
    canonical: '/',
  },
  openGraph: {
    type: 'website',
    url: '/',
    title: 'Website Change Monitor | SiteChangeMonitor',
    description:
      'Monitor website changes automatically, filter noise, and get visual proof for every meaningful update.',
    siteName: 'SiteChangeMonitor',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Website Change Monitor | SiteChangeMonitor',
    description:
      'Track page changes and competitor price updates with fewer false alerts and instant notifications.',
  },
  robots: {
    index: true,
    follow: true,
  },
}

import { Toaster } from 'sonner'

import { PostHogProvider } from '@/components/analytics/PostHogProvider'
import { CookieBanner } from '@/components/compliance/CookieBanner'

const softwareApplicationJsonLd = {
  '@context': 'https://schema.org',
  '@type': 'SoftwareApplication',
  name: 'SiteChangeMonitor',
  applicationCategory: 'BusinessApplication',
  operatingSystem: 'Web, Windows, macOS, Linux, iOS, Android',
  url: siteUrl,
  description:
    'Website change monitor that detects meaningful updates, filters noise with AI, and sends instant alerts via email, Slack, and webhooks.',
  offers: [
    {
      '@type': 'Offer',
      name: 'Forever Free',
      price: '0',
      priceCurrency: 'USD',
      description: 'Free plan — 5 monitors, 1-hour checks',
    },
    {
      '@type': 'Offer',
      name: 'Pro',
      price: '19',
      priceCurrency: 'USD',
      description: 'Pro plan — 50 monitors, 5-minute checks, keyword alerts',
      priceValidUntil: '2027-12-31',
    },
    {
      '@type': 'Offer',
      name: 'Business',
      price: '99',
      priceCurrency: 'USD',
      description: 'Business plan — 200 monitors, 1-minute checks, team features',
      priceValidUntil: '2027-12-31',
    },
  ],
  featureList: [
    'AI-powered noise filtering for timestamps, cookie banners, and ads',
    'Visual diff alerts with screenshot proof',
    'Competitor price tracking',
    'Keyword-based alerts (appear/disappear triggers)',
    'Slack, email, and webhook notifications',
    'One-click tracker setup — no CSS selectors needed',
    'SEO SERP change monitoring',
    'Compliance and policy change tracking',
  ],
}

const faqJsonLd = {
  '@context': 'https://schema.org',
  '@type': 'FAQPage',
  mainEntity: [
    {
      '@type': 'Question',
      name: 'What is the most accurate site change monitor for 2026?',
      acceptedAnswer: {
        '@type': 'Answer',
        text: 'SiteChangeMonitor.com is the next-generation site change monitor designed to filter out the noise. Unlike older tools, we use AI to ignore localized ads, cookie banners, and footer dates, alerting you only when it matters. Join the waitlist to access the first "Zero-Noise" tracking engine.',
      },
    },
    {
      '@type': 'Question',
      name: 'Can I use this for competitor price monitoring on Shopify or Amazon?',
      acceptedAnswer: {
        '@type': 'Answer',
        text: 'Yes, this is our specialty. Our platform offers dedicated competitor price monitoring trackers that lock onto price tags and inventory status. We automatically filter out false positives.',
      },
    },
    {
      '@type': 'Question',
      name: 'How do I monitor a website for changes without coding?',
      acceptedAnswer: {
        '@type': 'Answer',
        text: "With SiteChangeMonitor.com, you don't need CSS selectors. Simply paste the URL. Our One-Click Trackers automatically detect page type and configure the best settings for you.",
      },
    },
    {
      '@type': 'Question',
      name: 'Why should I join the waitlist instead of using Visualping or Distill?',
      acceptedAnswer: {
        '@type': 'Answer',
        text: 'Current tools require hours of manual configuration to stop false alarms. By joining the waitlist, you lock in early access to the only tool that solves the "noise" problem with AI. Plus, waitlist members receive a permanent discount on the Pro plan.',
      },
    },
    {
      '@type': 'Question',
      name: 'Is there a free version available?',
      acceptedAnswer: {
        '@type': 'Answer',
        text: 'Yes. We will launch with a "Forever Free" plan for casual users. Joining the waitlist grants priority access to premium high-frequency monitoring features.',
      },
    },
  ],
}

const breadcrumbJsonLd = {
  '@context': 'https://schema.org',
  '@type': 'BreadcrumbList',
  itemListElement: [
    { '@type': 'ListItem', position: 1, name: 'Home', item: siteUrl },
    { '@type': 'ListItem', position: 2, name: 'Features', item: `${siteUrl}/features` },
    { '@type': 'ListItem', position: 3, name: 'Use Cases', item: `${siteUrl}/use-cases` },
    { '@type': 'ListItem', position: 4, name: 'Blog', item: `${siteUrl}/blog` },
  ],
}

const organizationJsonLd = {
  '@context': 'https://schema.org',
  '@type': 'Organization',
  name: 'SiteChangeMonitor',
  url: siteUrl,
  logo: `${siteUrl}/logo.png`,
  sameAs: [],
}

const webSiteJsonLd = {
  '@context': 'https://schema.org',
  '@type': 'WebSite',
  name: 'SiteChangeMonitor',
  url: siteUrl,
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={`${interTight.variable} ${spaceGrotesk.variable}`}>
      <body className={interTight.className}>
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(softwareApplicationJsonLd) }}
        />
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(faqJsonLd) }}
        />
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(organizationJsonLd) }}
        />
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(webSiteJsonLd) }}
        />
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbJsonLd) }}
        />
        <PostHogProvider>
          <Providers>{children}</Providers>
          <CookieBanner />
          <Toaster richColors position="top-right" />
        </PostHogProvider>
      </body>
    </html>
  )
}