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

export const tocItems: TocItem[] = [
  { id: 'introduction', text: 'Introduction', level: 2 },
  { id: 'why-ai-placeholders', text: 'Why AI Placeholders?', level: 2 },
  { id: 'getting-started', text: 'Getting Started', level: 2 },
  { id: 'api-usage', text: 'API Usage', level: 3 },
  { id: 'next-steps', text: 'Next Steps', level: 2 },
];

export const Content = () => (
  <>
    <BlogHeading id="introduction" level={2}>
      Introduction
    </BlogHeading>
    <p className="text-gray-700 leading-relaxed mb-4">
      Placeholder images have been a staple of web development for decades.
      From simple gray boxes to stock photos, developers have always needed
      a way to visualize layouts before final content is ready.
    </p>
    <p className="text-gray-700 leading-relaxed mb-4">
      Banatie takes this concept to the next level with AI-generated
      contextual placeholders that actually match your design intent.
    </p>

    <BlogHeading id="why-ai-placeholders" level={2}>
      Why AI Placeholders?
    </BlogHeading>
    <p className="text-gray-700 leading-relaxed mb-4">
      Traditional placeholder services give you random images that rarely
      match your actual content needs. With AI-powered placeholders, you get
      images that are contextually relevant to your project.
    </p>

    <BlogQuote author="A Developer">
      Finally, placeholder images that actually look like what the final
      product will have. No more explaining to clients why there are cats
      everywhere.
    </BlogQuote>

    <BlogHeading id="getting-started" level={2}>
      Getting Started
    </BlogHeading>
    <p className="text-gray-700 leading-relaxed mb-4">
      Getting started with Banatie is simple. You can use our CDN URLs
      directly in your HTML or integrate with our API for more control.
    </p>

    <BlogHeading id="api-usage" level={3}>
      API Usage
    </BlogHeading>
    <p className="text-gray-700 leading-relaxed mb-4">
      Here is a simple example of how to use Banatie in your HTML:
    </p>

    <BlogCodeBlock language="html">
      {`<img
  src="https://cdn.banatie.app/demo/live/hero?prompt=modern+office+workspace"
  alt="Office workspace"
/>`}
    </BlogCodeBlock>

    <p className="text-gray-700 leading-relaxed mb-4">
      The prompt parameter tells our AI what kind of image to generate.
      Be descriptive for best results!
    </p>

    <BlogHeading id="next-steps" level={2}>
      Next Steps
    </BlogHeading>
    <p className="text-gray-700 leading-relaxed mb-4">
      Ready to start using AI-powered placeholders in your projects?
      Check out our documentation for more detailed examples and API reference.
    </p>

    <BlogCTA
      title="Ready to get started?"
      description="Join our early access program and start generating contextual placeholder images today."
      buttonText="Get Early Access"
      buttonHref="/#get-access"
    />
  </>
);