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

export const tocItems: TocItem[] = [
  { id: 'introduction', text: 'Introduction', level: 2 },
  { id: 'traditional-workflow', text: 'Traditional Workflow Problems', level: 2 },
  { id: 'ai-powered-approach', text: 'AI-Powered Approach', level: 2 },
  { id: 'figma-integration', text: 'Figma Integration', level: 3 },
  { id: 'time-savings', text: 'Time Savings', level: 2 },
  { id: 'tips', text: 'Pro Tips', level: 2 },
];

export const Content = () => (
  <>
    <BlogHeading id="introduction" level={2}>
      Introduction
    </BlogHeading>
    <p className="text-gray-700 leading-relaxed mb-4">
      Design workflows have traditionally been bottlenecked by the need for
      placeholder content. Finding the right stock photos or waiting for
      actual assets can slow down the creative process significantly.
    </p>
    <p className="text-gray-700 leading-relaxed mb-4">
      AI-generated placeholders offer a new paradigm where designers can
      instantly visualize their concepts with contextually relevant images.
    </p>

    <BlogHeading id="traditional-workflow" level={2}>
      Traditional Workflow Problems
    </BlogHeading>
    <p className="text-gray-700 leading-relaxed mb-4">
      The conventional design process often involves searching through stock
      photo libraries, downloading images, and then realizing they do not quite
      fit the vision. This cycle repeats multiple times per project.
    </p>

    <BlogQuote author="Design Lead at a Fortune 500">
      We used to spend hours just finding the right placeholder images.
      Now we describe what we need and get it instantly.
    </BlogQuote>

    <BlogHeading id="ai-powered-approach" level={2}>
      AI-Powered Approach
    </BlogHeading>
    <p className="text-gray-700 leading-relaxed mb-4">
      With AI-generated images, you simply describe what you need. Want a
      hero image showing a team collaboration scene? Just ask for it. Need
      product mockups with specific aesthetics? Describe the style.
    </p>
    <p className="text-gray-700 leading-relaxed mb-4">
      This approach keeps you in the creative flow instead of breaking
      concentration to hunt for assets.
    </p>

    <BlogHeading id="figma-integration" level={3}>
      Figma Integration
    </BlogHeading>
    <p className="text-gray-700 leading-relaxed mb-4">
      Many designers are using Banatie URLs directly in Figma prototypes.
      This means your mockups automatically show relevant images without
      manual image placement.
    </p>

    <BlogHeading id="time-savings" level={2}>
      Time Savings
    </BlogHeading>
    <p className="text-gray-700 leading-relaxed mb-4">
      Teams report saving 2-4 hours per project on asset hunting alone.
      That time can now be spent on actual design work and iteration.
    </p>
    <p className="text-gray-700 leading-relaxed mb-4">
      The quick iteration cycle also means stakeholder feedback sessions
      are more productive since designs look more complete.
    </p>

    <BlogHeading id="tips" level={2}>
      Pro Tips
    </BlogHeading>
    <p className="text-gray-700 leading-relaxed mb-4">
      Start with broad prompts and refine as needed. Use consistent style
      descriptors across your project for visual coherence. Create a prompt
      library for commonly used image types in your brand.
    </p>

    <BlogCTA
      title="Transform your workflow"
      description="Join designers who are already saving hours on every project."
      buttonText="Start Free Trial"
      buttonHref="/#get-access"
    />
  </>
);
