import { BlogHeading, BlogQuote, BlogCTA } from '../_components';
import type { TocItem } from '../types';

export const tocItems: TocItem[] = [
  { id: 'introduction', text: 'Introduction', level: 2 },
  { id: 'quality-settings', text: 'Quality Settings', level: 2 },
  { id: 'resolution', text: 'Resolution Guidelines', level: 3 },
  { id: 'consistency', text: 'Maintaining Consistency', level: 2 },
  { id: 'performance', text: 'Performance Optimization', level: 2 },
  { id: 'dos-and-donts', text: 'Dos and Donts', level: 2 },
];

export const Content = () => (
  <>
    <BlogHeading id="introduction" level={2}>
      Introduction
    </BlogHeading>
    <p className="text-gray-700 leading-relaxed mb-4">
      Generating high-quality AI images consistently requires understanding
      both the capabilities and limitations of the technology. This guide
      shares proven practices from thousands of successful generations.
    </p>
    <p className="text-gray-700 leading-relaxed mb-4">
      Following these guidelines will help you achieve better results with
      fewer iterations.
    </p>

    <BlogHeading id="quality-settings" level={2}>
      Quality Settings
    </BlogHeading>
    <p className="text-gray-700 leading-relaxed mb-4">
      The API offers different quality tiers. Higher quality settings produce
      better images but take longer to generate. Choose based on your use case.
    </p>
    <p className="text-gray-700 leading-relaxed mb-4">
      For prototyping and development, standard quality is often sufficient.
      Reserve high quality for production assets.
    </p>

    <BlogHeading id="resolution" level={3}>
      Resolution Guidelines
    </BlogHeading>
    <p className="text-gray-700 leading-relaxed mb-4">
      Match the resolution to your actual display size. Generating 4K images
      for thumbnail displays wastes resources and slows performance.
    </p>

    <BlogQuote>
      Start with the exact dimensions you need. You can always regenerate
      at higher resolution for final production.
    </BlogQuote>

    <BlogHeading id="consistency" level={2}>
      Maintaining Consistency
    </BlogHeading>
    <p className="text-gray-700 leading-relaxed mb-4">
      For projects requiring visual consistency across multiple images, use
      consistent style descriptors and seed values. Document your successful
      prompts for reuse.
    </p>
    <p className="text-gray-700 leading-relaxed mb-4">
      Creating a style guide for your project prompts helps team members
      generate images that feel cohesive.
    </p>

    <BlogHeading id="performance" level={2}>
      Performance Optimization
    </BlogHeading>
    <p className="text-gray-700 leading-relaxed mb-4">
      Cache generated images when possible. Use lazy loading for below-the-fold
      images. Consider generating images ahead of time for predictable content.
    </p>
    <p className="text-gray-700 leading-relaxed mb-4">
      Batch similar requests together when generating multiple images to
      optimize API usage.
    </p>

    <BlogHeading id="dos-and-donts" level={2}>
      Dos and Donts
    </BlogHeading>
    <p className="text-gray-700 leading-relaxed mb-4">
      <strong>Do:</strong> Test prompts iteratively, use specific descriptors,
      cache results, match resolution to need.
    </p>
    <p className="text-gray-700 leading-relaxed mb-4">
      <strong>Do not:</strong> Use vague prompts, generate unnecessarily high
      resolutions, skip error handling, expose API keys client-side.
    </p>

    <BlogCTA
      title="Put these practices to work"
      description="Start generating professional-quality images today."
      buttonText="Get Started"
      buttonHref="/#get-access"
    />
  </>
);
