import type { Metadata } from 'next';
import { DocPage } from '@/components/docs/layout/DocPage';
import { JsonLd } from '@/components/seo/JsonLd';
import { createDocsMetadata, DOCS_PAGES } from '@/config/docs-seo';
import { createBreadcrumbSchema } from '@/config/docs-schema';
import { Hero } from '@/components/docs/blocks';
import Link from 'next/link';

const PAGE = DOCS_PAGES['guides'];

export const metadata: Metadata = createDocsMetadata(PAGE);

const breadcrumbSchema = createBreadcrumbSchema([
  { name: 'Home', path: '/' },
  { name: 'Documentation', path: '/docs/' },
  { name: 'Guides', path: '/docs/guides/' },
]);

export default function GuidesPage() {
  return (
    <>
      <JsonLd data={breadcrumbSchema} />
      <DocPage
        breadcrumbItems={[
          { label: 'Documentation', href: '/docs/' },
          { label: 'Guides' },
        ]}
        tocItems={[]}
        nextSteps={{
          links: [
            {
              href: '/docs/live-urls/',
              title: 'Live URLs',
              description: 'Generate images directly from URL parameters.',
              accent: 'primary',
            },
            {
              href: '/docs/generation/',
              title: 'Image Generation',
              description: 'Full control via the API.',
              accent: 'secondary',
            },
          ],
        }}
      >
        <Hero
          title="Guides"
          subtitle="Step-by-step tutorials for common use cases."
        />

        <section className="mb-12">
          <div className="grid gap-4">
            <Link
              href="/docs/guides/placeholder-images/"
              className="block p-6 bg-slate-800/50 border border-slate-700 rounded-lg hover:border-purple-500/50 transition-colors"
            >
              <h3 className="text-lg font-semibold text-white mb-2">AI Placeholder Images</h3>
              <p className="text-gray-400 text-sm">
                Generate contextual placeholder images for development.
                Replace gray boxes with AI visuals that match your design.
              </p>
            </Link>
          </div>
        </section>
      </DocPage>
    </>
  );
}