import type { Metadata } from 'next'
import Link from 'next/link'
import { ArrowLeft } from 'lucide-react'
import { Footer } from '@/components/layout/Footer'
import { notFound } from 'next/navigation'

const useCases: Record<string, {
  title: string
  metaDescription: string
  intro: string
  benefits: string[]
  howItWorks: { step: string; description: string }[]
  whoIsItFor: string[]
}> = {
  'ecommerce-price-monitoring': {
    title: 'E-Commerce Price Monitoring',
    metaDescription: 'Monitor competitor prices on Shopify, Amazon, and any e-commerce site. SiteChangeMonitor tracks price changes and inventory status with AI-powered noise filtering.',
    intro: 'SiteChangeMonitor tracks competitor product prices and inventory status across Shopify, Amazon, WooCommerce, and any e-commerce site — filtering out false alerts from rotating ads and dynamic page elements.',
    benefits: [
      'Lock onto specific price elements automatically — no CSS selectors needed',
      'Filter out false positives from ads, banners, and session-specific content',
      'Get instant email alerts (or Slack/webhook on Pro+) when a competitor changes pricing',
      'Track inventory status changes (in stock → sold out)',
      'Historical price snapshots with visual proof',
    ],
    howItWorks: [
      { step: 'Paste the product URL', description: 'Our system auto-detects the page type and locks onto the price element.' },
      { step: 'Set your alert preferences', description: 'Choose email (all plans) or Slack/webhook (Pro+). Set thresholds for price changes.' },
      { step: 'Get notified on real changes', description: 'AI filters out noise. You only hear about actual price or inventory changes.' },
    ],
    whoIsItFor: [
      'E-commerce managers tracking competitor pricing',
      'Marketplace sellers monitoring Buy Box prices',
      'Procurement teams watching supplier pricing',
      'Deal hunters tracking product price drops',
    ],
  },
  'seo-serp-tracking': {
    title: 'SEO & SERP Change Tracking',
    metaDescription: 'Monitor SERP changes, featured snippet updates, and competitor ranking movements. SiteChangeMonitor alerts SEO teams to meaningful search result changes.',
    intro: 'SiteChangeMonitor helps SEO teams track changes to search engine results pages, including ranking shifts, featured snippet appearances, and competitor movements — without noise from personalized or localized results.',
    benefits: [
      'Track SERP changes for your target keywords',
      'Monitor featured snippet ownership changes',
      'Detect when competitors appear or disappear from page 1',
      'Filter out localized and personalized result variations',
      'Get visual diff proof of every SERP change',
    ],
    howItWorks: [
      { step: 'Enter the Google search URL for your keyword', description: 'We capture the SERP as it appears to a clean, non-personalized browser session.' },
      { step: 'Configure keyword triggers', description: 'Set alerts for when your brand or competitor names appear or disappear.' },
      { step: 'Review changes with visual diffs', description: 'See exactly what changed with side-by-side screenshot comparisons.' },
    ],
    whoIsItFor: [
      'SEO managers tracking keyword rankings',
      'Content teams monitoring featured snippets',
      'Agencies reporting SERP changes to clients',
      'Growth teams tracking competitive search landscape',
    ],
  },
  'compliance-policy-monitoring': {
    title: 'Compliance & Policy Change Monitoring',
    metaDescription: 'Track changes to terms of service, privacy policies, and regulatory pages. SiteChangeMonitor provides audit-proof snapshots for compliance teams.',
    intro: 'SiteChangeMonitor provides compliance and legal teams with automated tracking of terms of service, privacy policies, and regulatory pages — with audit-proof snapshots and instant change alerts.',
    benefits: [
      'Automatically monitor ToS, privacy policies, and regulatory pages',
      'Audit-proof timestamped snapshots of every version',
      'AI filtering removes irrelevant changes (dates, formatting, ads)',
      'Instant alerts when material policy changes occur',
      'Full version history with diff comparison',
    ],
    howItWorks: [
      { step: 'Add the policy or regulatory page URL', description: 'SiteChangeMonitor begins tracking the page content immediately.' },
      { step: 'AI filters noise automatically', description: 'Copyright year changes, formatting tweaks, and boilerplate updates are ignored.' },
      { step: 'Get alerted on material changes', description: 'Only substantive policy changes trigger notifications to your team.' },
    ],
    whoIsItFor: [
      'Legal teams monitoring vendor terms of service',
      'Compliance officers tracking regulatory changes',
      'Privacy teams monitoring third-party data policies',
      'Risk managers tracking contractual obligations',
    ],
  },
  'competitor-intelligence': {
    title: 'Competitor Intelligence Monitoring',
    metaDescription: 'Monitor competitor websites for product launches, pricing changes, hiring signals, and strategic shifts. SiteChangeMonitor automates competitive intelligence.',
    intro: 'SiteChangeMonitor automates competitive intelligence by monitoring competitor websites for product launches, pricing changes, team growth signals, and strategic messaging shifts — delivering only meaningful changes to your team.',
    benefits: [
      'Monitor competitor homepages, pricing pages, and product pages',
      'Detect new product launches and feature announcements',
      'Track hiring page changes as growth signals',
      'Keyword alerts for strategic terms (e.g., "enterprise", "AI")',
      'Weekly digest emails for competitive intelligence summaries (coming soon)',
    ],
    howItWorks: [
      { step: 'Add competitor page URLs', description: 'Monitor pricing pages, about pages, careers pages, and product pages.' },
      { step: 'Set keyword triggers', description: 'Get alerted when competitors mention specific terms or remove them.' },
      { step: 'Review changes in context', description: 'Visual diffs show exactly what changed, so your team can act fast.' },
    ],
    whoIsItFor: [
      'Product managers tracking competitor features',
      'Marketing teams monitoring competitor messaging',
      'Sales teams tracking competitor pricing changes',
      'Strategy teams monitoring industry shifts',
    ],
  },
}

export function generateStaticParams() {
  return Object.keys(useCases).map((slug) => ({ slug }))
}

export function generateMetadata({ params }: { params: { slug: string } }): Metadata {
  const data = useCases[params.slug]
  if (!data) return {}
  return {
    title: data.title,
    description: data.metaDescription,
    alternates: { canonical: `/use-cases/${params.slug}` },
    openGraph: { title: data.title, description: data.metaDescription, url: `/use-cases/${params.slug}` },
  }
}

export default function UseCasePage({ params }: { params: { slug: string } }) {
  const data = useCases[params.slug]
  if (!data) notFound()

  const howToJsonLd = {
    '@context': 'https://schema.org',
    '@type': 'HowTo',
    name: `How to use SiteChangeMonitor for ${data.title}`,
    step: data.howItWorks.map((s, i) => ({
      '@type': 'HowToStep',
      position: i + 1,
      name: s.step,
      text: s.description,
    })),
  }

  return (
    <div className="min-h-screen bg-background flex flex-col">
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(howToJsonLd) }}
      />
      <div className="flex-1 py-24 px-6">
        <div className="mx-auto max-w-4xl space-y-12">
          <div className="space-y-4">
            <Link href="/use-cases" className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors">
              <ArrowLeft className="mr-2 h-4 w-4" />
              All Use Cases
            </Link>
            <h1 className="text-4xl md:text-5xl font-bold font-display text-foreground">
              {data.title}
            </h1>
            <p className="text-xl text-muted-foreground max-w-3xl">{data.intro}</p>
          </div>

          {/* Benefits */}
          <section>
            <h2 className="text-2xl font-bold text-foreground mb-4">Key Benefits</h2>
            <ul className="space-y-3 text-muted-foreground">
              {data.benefits.map((b, i) => (
                <li key={i} className="flex items-start gap-3">
                  <span className="mt-1 h-2 w-2 rounded-full bg-primary shrink-0" />
                  {b}
                </li>
              ))}
            </ul>
          </section>

          {/* How It Works */}
          <section className="rounded-2xl border border-border bg-card p-8">
            <h2 className="text-2xl font-bold text-foreground mb-6">How It Works</h2>
            <dl className="space-y-6">
              {data.howItWorks.map((step, i) => (
                <div key={i} className="flex gap-4">
                  <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground text-sm font-bold">
                    {i + 1}
                  </div>
                  <div>
                    <dt className="font-medium text-foreground">{step.step}</dt>
                    <dd className="mt-1 text-muted-foreground">{step.description}</dd>
                  </div>
                </div>
              ))}
            </dl>
          </section>

          {/* Who Is It For */}
          <section>
            <h2 className="text-2xl font-bold text-foreground mb-4">Who Is This For?</h2>
            <ul className="grid md:grid-cols-2 gap-3 text-muted-foreground">
              {data.whoIsItFor.map((who, i) => (
                <li key={i} className="flex items-start gap-3">
                  <span className="mt-1 h-2 w-2 rounded-full bg-primary shrink-0" />
                  {who}
                </li>
              ))}
            </ul>
          </section>

          {/* CTA */}
          <section className="text-center py-12">
            <h2 className="text-2xl font-bold text-foreground mb-4">Start monitoring today</h2>
            <p className="text-muted-foreground mb-6">Join the waitlist for early access and a permanent Pro discount.</p>
            <Link
              href="/"
              className="inline-flex items-center rounded-full bg-primary px-8 py-3 font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
            >
              Join the Waitlist
            </Link>
          </section>

          {/* Internal Links */}
          <nav className="flex flex-wrap gap-3 text-sm">
            <Link href="/features" className="text-primary hover:underline">Explore Features</Link>
            <span className="text-muted-foreground">•</span>
<Link href="/use-cases" className="text-primary hover:underline">More Use Cases</Link>
          </nav>
        </div>
      </div>
      <Footer />
    </div>
  )
}