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

export const tocItems: TocItem[] = [
  { id: 'what-is-prompt-engineering', text: 'What is Prompt Engineering?', level: 2 },
  { id: 'basic-structure', text: 'Basic Prompt Structure', level: 2 },
  { id: 'subject', text: 'Subject', level: 3 },
  { id: 'style', text: 'Style', level: 3 },
  { id: 'context', text: 'Context', level: 3 },
  { id: 'common-mistakes', text: 'Common Mistakes', level: 2 },
  { id: 'advanced-techniques', text: 'Advanced Techniques', level: 2 },
];

export const Content = () => (
  <>
    <BlogHeading id="what-is-prompt-engineering" level={2}>
      What is Prompt Engineering?
    </BlogHeading>
    <p className="text-gray-700 leading-relaxed mb-4">
      Prompt engineering is the art of crafting text descriptions that guide
      AI models to generate the exact images you envision. It is a skill that
      improves with practice and understanding of how AI interprets language.
    </p>
    <p className="text-gray-700 leading-relaxed mb-4">
      Good prompts are specific, descriptive, and structured in a way that
      the AI can parse effectively.
    </p>

    <BlogHeading id="basic-structure" level={2}>
      Basic Prompt Structure
    </BlogHeading>
    <p className="text-gray-700 leading-relaxed mb-4">
      A well-structured prompt typically includes three key elements: subject,
      style, and context. Let us break down each component.
    </p>

    <BlogHeading id="subject" level={3}>
      Subject
    </BlogHeading>
    <p className="text-gray-700 leading-relaxed mb-4">
      The subject is what you want to see in the image. Be specific about
      the main focus.
    </p>

    <BlogCodeBlock language="text">
      {`Bad: "a person"
Good: "a young professional woman working at a laptop"
Better: "a young professional woman in business casual attire working at a MacBook in a modern office"`}
    </BlogCodeBlock>

    <BlogHeading id="style" level={3}>
      Style
    </BlogHeading>
    <p className="text-gray-700 leading-relaxed mb-4">
      Style descriptors help define the visual aesthetic of the generated
      image.
    </p>

    <BlogCodeBlock language="text">
      {`Style keywords:
- "photorealistic" - for lifelike images
- "minimalist" - clean, simple compositions
- "vibrant colors" - saturated, energetic palette
- "soft lighting" - gentle, diffused light`}
    </BlogCodeBlock>

    <BlogHeading id="context" level={3}>
      Context
    </BlogHeading>
    <p className="text-gray-700 leading-relaxed mb-4">
      Context provides background information and setting details.
    </p>

    <BlogQuote>
      The more context you provide, the more aligned the result will be
      with your vision. But avoid being so specific that you constrain
      the AI too much.
    </BlogQuote>

    <BlogHeading id="common-mistakes" level={2}>
      Common Mistakes
    </BlogHeading>
    <p className="text-gray-700 leading-relaxed mb-4">
      Avoid vague prompts like &quot;something nice&quot; or overly complex prompts
      with contradicting elements. Do not list too many subjects as this
      confuses the generation.
    </p>
    <p className="text-gray-700 leading-relaxed mb-4">
      Another common mistake is not iterating. Your first prompt rarely
      produces the perfect result - refine and adjust.
    </p>

    <BlogHeading id="advanced-techniques" level={2}>
      Advanced Techniques
    </BlogHeading>
    <p className="text-gray-700 leading-relaxed mb-4">
      As you gain experience, try techniques like negative prompting
      (specifying what you do not want), weighted terms, and compositional
      guidance.
    </p>
    <p className="text-gray-700 leading-relaxed mb-4">
      Keep a prompt journal to track what works for your specific use cases.
    </p>

    <BlogCTA
      title="Practice makes perfect"
      description="Start experimenting with prompts and see immediate results."
      buttonText="Try It Now"
      buttonHref="/#get-access"
    />
  </>
);
