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

export const tocItems: TocItem[] = [
  { id: 'overview', text: 'Overview', level: 2 },
  { id: 'product-mockups', text: 'Product Mockups', level: 2 },
  { id: 'category-banners', text: 'Category Banners', level: 2 },
  { id: 'lifestyle-images', text: 'Lifestyle Images', level: 3 },
  { id: 'ab-testing', text: 'A/B Testing Visuals', level: 2 },
  { id: 'implementation', text: 'Implementation Example', level: 2 },
];

export const Content = () => (
  <>
    <BlogHeading id="overview" level={2}>
      Overview
    </BlogHeading>
    <p className="text-gray-700 leading-relaxed mb-4">
      E-commerce platforms face unique challenges when it comes to visual
      content. From product listings to marketing banners, the need for
      high-quality images is constant and demanding.
    </p>
    <p className="text-gray-700 leading-relaxed mb-4">
      AI-generated placeholders offer e-commerce teams a way to prototype,
      test, and iterate faster than ever before.
    </p>

    <BlogHeading id="product-mockups" level={2}>
      Product Mockups
    </BlogHeading>
    <p className="text-gray-700 leading-relaxed mb-4">
      Before product photography is complete, use AI to generate realistic
      product mockups. This allows the development and marketing teams to
      work in parallel rather than waiting for final assets.
    </p>

    <BlogQuote author="E-commerce Director">
      We launched our new collection page two weeks earlier by using AI
      placeholders during development. Real photos were swapped in seamlessly
      when ready.
    </BlogQuote>

    <BlogHeading id="category-banners" level={2}>
      Category Banners
    </BlogHeading>
    <p className="text-gray-700 leading-relaxed mb-4">
      Category and promotional banners can be prototyped instantly. Test
      different visual themes before committing to professional photo shoots.
    </p>
    <p className="text-gray-700 leading-relaxed mb-4">
      This is especially valuable for seasonal campaigns where timing is
      critical.
    </p>

    <BlogHeading id="lifestyle-images" level={3}>
      Lifestyle Images
    </BlogHeading>
    <p className="text-gray-700 leading-relaxed mb-4">
      Lifestyle images showing products in use are expensive to produce.
      AI can generate concept images to validate ideas before investing
      in professional shoots.
    </p>

    <BlogHeading id="ab-testing" level={2}>
      A/B Testing Visuals
    </BlogHeading>
    <p className="text-gray-700 leading-relaxed mb-4">
      Test different visual styles with real users before full production.
      Generate multiple variations of hero images and measure which performs
      better.
    </p>
    <p className="text-gray-700 leading-relaxed mb-4">
      This data-driven approach to visual design can significantly improve
      conversion rates.
    </p>

    <BlogHeading id="implementation" level={2}>
      Implementation Example
    </BlogHeading>
    <p className="text-gray-700 leading-relaxed mb-4">
      Here is a simple example of using Banatie for product category images:
    </p>

    <BlogCodeBlock language="html">
      {`<!-- Category Banner -->
<div class="category-banner">
  <img
    src="https://cdn.banatie.app/demo/live/banner?prompt=summer+fashion+collection+minimal+style"
    alt="Summer Collection"
  />
</div>

<!-- Product Grid Placeholder -->
<div class="product-image">
  <img
    src="https://cdn.banatie.app/demo/live/product?prompt=white+sneakers+product+photo"
    alt="Product"
  />
</div>`}
    </BlogCodeBlock>

    <BlogCTA
      title="Accelerate your e-commerce development"
      description="Join online stores already using AI placeholders to ship faster."
      buttonText="Get Early Access"
      buttonHref="/#get-access"
    />
  </>
);
