import type { Metadata } from 'next';
import { TipBox } from '@/components/docs/shared/TipBox';
import { Table } from '@/components/docs/shared/Table';
import { CodeBlock } from '@/components/docs/shared/CodeBlock';
import { LivePreview } from '@/components/docs/shared/LivePreview';
import { DocPage } from '@/components/docs/layout/DocPage';
import { JsonLd } from '@/components/seo/JsonLd';
import { createDocsMetadata, DOCS_PAGES } from '@/config/docs-seo';
import { createBreadcrumbSchema, createTechArticleSchema } from '@/config/docs-schema';
import { Hero, SectionHeader, InlineCode } from '@/components/docs/blocks';

const PAGE = DOCS_PAGES['guide-placeholder-images'];

export const metadata: Metadata = createDocsMetadata(PAGE);

const breadcrumbSchema = createBreadcrumbSchema([
  { name: 'Home', path: '/' },
  { name: 'Documentation', path: '/docs/' },
  { name: 'Guides', path: '/docs/guides/' },
  { name: 'Placeholder Images', path: '/docs/guides/placeholder-images/' },
]);

const articleSchema = createTechArticleSchema(PAGE);

const tocItems = [
  { id: 'what-this-guide-covers', text: 'What This Guide Covers', level: 2 },
  { id: 'how-to-create-placeholders', text: 'How to Create Placeholders', level: 2 },
  { id: 'quick-start', text: 'Quick Start', level: 2 },
  { id: 'organizing-placeholders', text: 'Organizing Placeholders', level: 2 },
  { id: 'prompt-tips', text: 'Prompt Tips', level: 2 },
  { id: 'light-mode-placeholders', text: 'Light Mode Placeholders', level: 2 },
  { id: 'dark-mode-placeholders', text: 'Dark Mode Placeholders', level: 2 },
  { id: 'placeholder-image-examples', text: 'Placeholder Image Examples', level: 2 },
  { id: 'file-based-workflow', text: 'File-based Workflow', level: 2 },
];

export default function PlaceholderImagesGuidePage() {
  return (
    <>
      <JsonLd data={breadcrumbSchema} />
      <JsonLd data={articleSchema} />
      <DocPage
        breadcrumbItems={[
          { label: 'Documentation', href: '/docs/' },
          { label: 'Guides', href: '/docs/guides/' },
          { label: 'Placeholder Images' },
        ]}
        tocItems={tocItems}
        nextSteps={{
          links: [
            {
              href: '/docs/live-urls/',
              title: 'Live URLs Reference',
              description: 'Full parameter documentation for Live URLs.',
              accent: 'primary',
            },
            {
              href: '/docs/api/generations/',
              title: 'Generations API',
              description: 'Generate images programmatically.',
              accent: 'secondary',
            },
          ],
        }}
      >
        <Hero
          title="AI Placeholder Images"
          subtitle="Generate contextual images for development. The new era of AI placeholders."
        />

        {/* What This Guide Covers */}
        <section id="what-this-guide-covers" className="mb-12 scroll-mt-24">
          <SectionHeader level={2} id="what-this-guide-covers">
            What This Guide Covers
          </SectionHeader>
          <p className="text-gray-300 leading-relaxed mb-4">
            Two ways to generate placeholder images with Banatie:
          </p>
          <ul className="list-disc list-inside text-gray-300 space-y-2 mb-6">
            <li>
              <a href="#quick-start" className="text-white font-semibold hover:text-purple-400">
                Live URLs
              </a>{' '}
              — describe what you need right in <InlineCode>&lt;img&gt;</InlineCode> src URLs
            </li>
            <li>
              <a href="#file-based-workflow" className="text-white font-semibold hover:text-purple-400">
                API generation
              </a>{' '}
              — full control, permanent URLs, downloadable files
            </li>
          </ul>
          <p className="text-gray-300 leading-relaxed">
            All examples on this page use real placeholder image URLs generated by Banatie.
          </p>
        </section>

        {/* How to Create Placeholders */}
        <section id="how-to-create-placeholders" className="mb-12 scroll-mt-24">
          <SectionHeader level={2} id="how-to-create-placeholders">
            How to Create Placeholders
          </SectionHeader>

          <div className="space-y-6">
            <div>
              <h4 className="text-white font-semibold mb-2">Templates</h4>
              <p className="text-gray-300 mb-2">
                Choose a style, get quality results. Banatie enhances your simple prompt based on
                the selected template:
              </p>
              <ul className="list-disc list-inside text-gray-300 space-y-1">
                <li>
                  <InlineCode>photorealistic</InlineCode> — photo-quality images
                </li>
                <li>
                  <InlineCode>digital-art</InlineCode> — stylized illustrations
                </li>
                <li>
                  <InlineCode>3d-render</InlineCode> — 3D graphics
                </li>
              </ul>
              <p className="text-gray-400 text-sm mt-3">
                <a href="/docs/generation/#templates" className="text-purple-400 hover:underline">
                  View all templates →
                </a>
              </p>
            </div>

            <div>
              <h4 className="text-white font-semibold mb-2">Simple Prompts</h4>
              <p className="text-gray-300 mb-2">
                Write minimal descriptions. Templates handle the rest:
              </p>
              <ul className="list-none text-gray-300 space-y-1">
                <li>
                  <span className="text-gray-500">→</span> &quot;office&quot; becomes a detailed
                  modern office with proper lighting
                </li>
                <li>
                  <span className="text-gray-500">→</span> &quot;headshot&quot; becomes a
                  professional portrait with studio background
                </li>
              </ul>
              <p className="text-gray-400 text-sm mt-3">
                No need for complex prompts — this is for placeholders, not art.
              </p>
            </div>
          </div>
        </section>

        {/* Quick Start */}
        <section id="quick-start" className="mb-12 scroll-mt-24">
          <SectionHeader level={2} id="quick-start">
            Quick Start
          </SectionHeader>
          <p className="text-gray-300 leading-relaxed mb-6">
            Live URLs let you generate images by describing what you need right in the URL. No API
            calls, no file management — just an HTML placeholder image tag with your prompt. Each
            unique prompt is cached, so subsequent loads are instant via CDN.
          </p>

          <p className="text-gray-300 leading-relaxed mb-4">Basic URL format:</p>
          <CodeBlock
            code="https://cdn.banatie.app/{org}/{project}/live/{scope}?prompt={description}&aspectRatio={ratio}"
            language="text"
            filename="URL Format"
          />

          <p className="text-gray-300 leading-relaxed mt-6 mb-4">Example:</p>
          <CodeBlock
            code={`<img
  src="https://cdn.banatie.app/sys/demo/live/test?prompt=mountain+landscape"
  alt="Mountain landscape"
/>`}
            language="html"
            filename="HTML Placeholder Image"
          />

          <p className="text-gray-300 leading-relaxed mt-4 mb-2">Result:</p>
          <LivePreview showLabel={false}>
            <img
              src="https://cdn.banatie.app/sys/demo/live/test?prompt=mountain+landscape&aspectRatio=16:9"
              alt="Mountain landscape"
              className="w-full max-w-md rounded-lg"
            />
          </LivePreview>

          <p className="text-gray-300 leading-relaxed mt-6 mb-4">Parameters:</p>
          <Table
            headers={['Parameter', 'Required', 'Description']}
            rows={[
              [<InlineCode key="p">prompt</InlineCode>, 'Yes', 'Image description (URL-encoded)'],
              [
                <InlineCode key="a">aspectRatio</InlineCode>,
                'No',
                'Ratio like 1:1, 16:9, 4:3 (default: 16:9)',
              ],
              [<InlineCode key="t">template</InlineCode>, 'No', 'Style template name'],
            ]}
          />

          <p className="text-gray-300 leading-relaxed mt-6">
            For full parameter reference, see{' '}
            <a href="/docs/live-urls/" className="text-purple-400 hover:underline">
              Live URLs documentation
            </a>
            .
          </p>
        </section>

        {/* Organizing Placeholders */}
        <section id="organizing-placeholders" className="mb-12 scroll-mt-24">
          <SectionHeader level={2} id="organizing-placeholders">
            Organizing Placeholders
          </SectionHeader>
          <p className="text-gray-300 leading-relaxed mb-4">
            Organize images by sections of your site using scopes:
          </p>
          <CodeBlock
            code={`/live/avatars?prompt=...  → user photos
/live/hero?prompt=...     → hero backgrounds
/live/products?prompt=... → product catalog`}
            language="text"
          />

          <p className="text-gray-300 leading-relaxed mt-6">
            Learn more about scopes in{' '}
            <a href="/docs/live-urls/#scopes" className="text-purple-400 hover:underline">
              Live URLs documentation
            </a>
            .
          </p>
        </section>

        {/* Prompt Tips */}
        <section id="prompt-tips" className="mb-12 scroll-mt-24">
          <SectionHeader level={2} id="prompt-tips">
            Prompt Tips
          </SectionHeader>

          <div className="space-y-6">
            <div>
              <h4 className="text-white font-semibold mb-2">Write less, not more</h4>
              <p className="text-gray-300 mb-2">
                For placeholders, simple prompts are often enough. You can always add more details
                later if needed. Templates handle the rest:
              </p>
              <ul className="list-none text-gray-300 space-y-1">
                <li>
                  <span className="text-gray-500">→</span> Want an office? Write{' '}
                  <InlineCode>office</InlineCode>
                </li>
                <li>
                  <span className="text-gray-500">→</span> Need a dark version? Add{' '}
                  <InlineCode>office dark background</InlineCode>
                </li>
                <li>
                  <span className="text-gray-500">→</span> Templates handle lighting, composition,
                  style
                </li>
              </ul>
            </div>

            <div>
              <h4 className="text-white font-semibold mb-2">Colors and themes</h4>
              <p className="text-gray-300 mb-2">Control the mood with color hints:</p>
              <CodeBlock
                code={`"dark background" → dark theme
"blue and orange accents" → specific palette
"warm lighting" → cozy feel`}
                language="text"
              />
            </div>
          </div>

          <div className="mt-6">
            <TipBox variant="protip">
              Templates automatically enhance your prompts. A simple description becomes a detailed
              generation instruction.
            </TipBox>
          </div>
        </section>

        {/* Light Mode Placeholders */}
        <section id="light-mode-placeholders" className="mb-12 scroll-mt-24">
          <SectionHeader level={2} id="light-mode-placeholders">
            Light Mode Placeholders
          </SectionHeader>
          <p className="text-gray-300 leading-relaxed mb-4">
            Generated images work well with light interfaces by default. If you need more control,
            specify background colors or accents to match your design system.
          </p>

          <CodeBlock
            code={`"product on white background"
"office with soft natural light"
"portrait, bright studio, pastel tones"
"dashboard mockup, light gray background, blue accent"`}
            language="text"
          />

          <div className="mt-6">
            <LivePreview label="Light Background Example">
              <div className="bg-white rounded-xl p-6 max-w-md">
                <img
                  src="https://cdn.banatie.app/sys/demo/live/products?prompt=minimalist+desk+setup+white+background+clean+aesthetic&aspectRatio=16:9"
                  alt="Light theme placeholder"
                  className="w-full rounded-lg mb-4"
                />
                <p className="text-gray-900 font-semibold">Clean Workspace</p>
                <p className="text-gray-600 text-sm">White background, natural lighting</p>
              </div>
            </LivePreview>
          </div>
        </section>

        {/* Dark Mode Placeholders */}
        <section id="dark-mode-placeholders" className="mb-12 scroll-mt-24">
          <SectionHeader level={2} id="dark-mode-placeholders">
            Dark Mode Placeholders
          </SectionHeader>
          <p className="text-gray-300 leading-relaxed mb-4">
            For dark interfaces, add <InlineCode>dark background</InlineCode> or descriptive words
            like night, moody, or twilight. You can also specify accent colors.
          </p>

          <CodeBlock
            code={`"office interior, dark background"
"product photo, dark surface, moody lighting"
"night cityscape, neon accents"
"abstract gradient, dark purple and blue"`}
            language="text"
          />

          <div className="mt-6">
            <LivePreview label="Dark Background Example">
              <div className="bg-slate-900 rounded-xl p-6 max-w-md border border-slate-700">
                <img
                  src="https://cdn.banatie.app/sys/demo/live/hero?prompt=abstract+gradient+dark+background+purple+blue+moody&aspectRatio=16:9"
                  alt="Dark theme placeholder"
                  className="w-full rounded-lg mb-4"
                />
                <p className="text-white font-semibold">Dark Gradient</p>
                <p className="text-gray-400 text-sm">Dark background with purple accents</p>
              </div>
            </LivePreview>
          </div>
        </section>

        {/* Placeholder Image Examples */}
        <section id="placeholder-image-examples" className="mb-12 scroll-mt-24">
          <SectionHeader level={2} id="placeholder-image-examples">
            Placeholder Image Examples
          </SectionHeader>
          <p className="text-gray-300 leading-relaxed mb-8">
            Copy-paste examples for common placeholder image use cases.
          </p>

          {/* Avatar */}
          <div className="mb-10">
            <h3 className="text-xl font-semibold text-white mb-2">Avatar</h3>
            <p className="text-gray-400 text-sm mb-4">
              <InlineCode>1:1</InlineCode> · User profiles, team sections, testimonials
            </p>

            <LivePreview>
              <div className="bg-slate-800/50 rounded-xl p-6 max-w-md">
                <div className="flex items-start gap-4">
                  <img
                    src="https://cdn.banatie.app/sys/demo/live/avatars?prompt=professional+studio+headshot+confident+woman+neutral+background&aspectRatio=1:1"
                    alt="Sarah Chen"
                    className="w-14 h-14 rounded-full object-cover flex-shrink-0"
                  />
                  <div className="border-l-2 border-purple-500/50 pl-4">
                    <p className="text-gray-300 italic">
                      Banatie cut our design mockup time in half. No more hunting for stock photos.
                    </p>
                    <p className="text-white font-semibold mt-3">Sarah Chen</p>
                    <p className="text-gray-500 text-sm">Product Designer at Acme</p>
                  </div>
                </div>
              </div>
            </LivePreview>

            <CodeBlock
              code={`<img
  src="https://cdn.banatie.app/{org}/{project}/live/avatars?prompt=professional+headshot&aspectRatio=1:1"
  alt="User avatar"
  class="w-14 h-14 rounded-full object-cover"
/>`}
              language="html"
            />

            <div className="mt-6">
              <p className="text-gray-400 text-sm mb-3">Team grid example:</p>
              <LivePreview showLabel={false}>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <div className="flex items-center gap-3">
                    <img
                      src="https://cdn.banatie.app/sys/demo/live/avatars?prompt=professional+headshot+young+man+friendly+smile&aspectRatio=1:1"
                      alt="Alex Rivera"
                      className="w-12 h-12 rounded-full object-cover"
                    />
                    <div>
                      <p className="text-white font-medium">Alex Rivera</p>
                      <p className="text-gray-400 text-sm">Engineering Lead</p>
                    </div>
                  </div>
                  <div className="flex items-center gap-3">
                    <img
                      src="https://cdn.banatie.app/sys/demo/live/avatars?prompt=professional+headshot+woman+glasses+confident&aspectRatio=1:1"
                      alt="Maria Santos"
                      className="w-12 h-12 rounded-full object-cover"
                    />
                    <div>
                      <p className="text-white font-medium">Maria Santos</p>
                      <p className="text-gray-400 text-sm">Design Director</p>
                    </div>
                  </div>
                  <div className="flex items-center gap-3">
                    <img
                      src="https://cdn.banatie.app/sys/demo/live/avatars?prompt=professional+headshot+man+beard+casual&aspectRatio=1:1"
                      alt="James Wilson"
                      className="w-12 h-12 rounded-full object-cover"
                    />
                    <div>
                      <p className="text-white font-medium">James Wilson</p>
                      <p className="text-gray-400 text-sm">Product Manager</p>
                    </div>
                  </div>
                </div>
              </LivePreview>
            </div>
          </div>

          {/* Product */}
          <div className="mb-10">
            <h3 className="text-xl font-semibold text-white mb-2">Product</h3>
            <p className="text-gray-400 text-sm mb-4">
              <InlineCode>1:1</InlineCode> or <InlineCode>4:5</InlineCode> · E-commerce, catalogs,
              listings
            </p>

            <LivePreview>
              <div className="bg-white rounded-xl p-4 max-w-xs shadow-lg">
                <img
                  src="https://cdn.banatie.app/sys/demo/live/products?prompt=minimalist+wireless+headphones+white+background+product+photo&aspectRatio=1:1"
                  alt="Wireless Pro Headphones"
                  className="w-full aspect-square object-cover rounded-lg mb-4"
                />
                <p className="text-gray-900 font-semibold">Wireless Pro Headphones</p>
                <p className="text-gray-600 text-lg font-bold mt-1">$299</p>
                <button className="mt-3 w-full bg-gray-900 text-white py-2 px-4 rounded-lg text-sm font-medium">
                  Add to Cart
                </button>
              </div>
            </LivePreview>

            <CodeBlock
              code={`<img
  src="https://cdn.banatie.app/{org}/{project}/live/products?prompt=product+photo+white+background&aspectRatio=1:1"
  alt="Product"
  class="w-full aspect-square object-cover rounded-lg"
/>`}
              language="html"
            />

            <div className="mt-6">
              <p className="text-gray-400 text-sm mb-3">Product grid example:</p>
              <LivePreview showLabel={false}>
                <div className="grid grid-cols-2 gap-4 max-w-lg">
                  <div className="bg-white rounded-lg p-3">
                    <img
                      src="https://cdn.banatie.app/sys/demo/live/products?prompt=modern+smart+watch+product+photo&aspectRatio=1:1"
                      alt="Smart Watch X1"
                      className="w-full aspect-square object-cover rounded-md mb-2"
                    />
                    <p className="text-gray-900 font-medium text-sm">Smart Watch X1</p>
                    <p className="text-gray-600 font-bold">$199</p>
                  </div>
                  <div className="bg-white rounded-lg p-3">
                    <img
                      src="https://cdn.banatie.app/sys/demo/live/products?prompt=wireless+earbuds+case+product+photo&aspectRatio=1:1"
                      alt="AirPods Pro"
                      className="w-full aspect-square object-cover rounded-md mb-2"
                    />
                    <p className="text-gray-900 font-medium text-sm">AirPods Pro</p>
                    <p className="text-gray-600 font-bold">$249</p>
                  </div>
                  <div className="bg-white rounded-lg p-3">
                    <img
                      src="https://cdn.banatie.app/sys/demo/live/products?prompt=portable+bluetooth+speaker+product+photo&aspectRatio=1:1"
                      alt="Portable Speaker"
                      className="w-full aspect-square object-cover rounded-md mb-2"
                    />
                    <p className="text-gray-900 font-medium text-sm">Portable Speaker</p>
                    <p className="text-gray-600 font-bold">$79</p>
                  </div>
                  <div className="bg-white rounded-lg p-3">
                    <img
                      src="https://cdn.banatie.app/sys/demo/live/products?prompt=laptop+stand+aluminum+product&aspectRatio=1:1"
                      alt="Laptop Stand"
                      className="w-full aspect-square object-cover rounded-md mb-2"
                    />
                    <p className="text-gray-900 font-medium text-sm">Laptop Stand</p>
                    <p className="text-gray-600 font-bold">$129</p>
                  </div>
                </div>
              </LivePreview>
            </div>
          </div>

          {/* Hero */}
          <div className="mb-10">
            <h3 className="text-xl font-semibold text-white mb-2">Hero</h3>
            <p className="text-gray-400 text-sm mb-4">
              <InlineCode>16:9</InlineCode> · Landing pages, section backgrounds
            </p>

            <LivePreview className="p-0">
              <div className="relative w-full h-72 rounded-xl overflow-hidden">
                <img
                  src="https://cdn.banatie.app/sys/demo/live/hero?prompt=aerial+view+modern+city+skyline+sunset+dramatic+lighting&aspectRatio=16:9"
                  alt="Hero background"
                  className="w-full h-full object-cover"
                />
                <div className="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-center px-4">
                  <p className="text-3xl font-bold text-white mb-2">Build the Future</p>
                  <p className="text-gray-200">Start your next project with AI-powered tools</p>
                </div>
              </div>
            </LivePreview>

            <CodeBlock
              code={`<div class="relative w-full h-96 overflow-hidden">
  <img
    src="https://cdn.banatie.app/{org}/{project}/live/hero?prompt=abstract+tech+background&aspectRatio=16:9"
    alt="Hero background"
    class="w-full h-full object-cover"
  />
  <div class="absolute inset-0 bg-black/50 flex items-center justify-center">
    <h1 class="text-4xl font-bold text-white">Your Headline</h1>
  </div>
</div>`}
              language="html"
            />
          </div>

          {/* OG Image */}
          <div className="mb-10">
            <h3 className="text-xl font-semibold text-white mb-2">OG Image</h3>
            <p className="text-gray-400 text-sm mb-4">
              <InlineCode>1200:630</InlineCode> · Social sharing, Twitter/LinkedIn cards
            </p>

            <LivePreview>
              <div className="bg-slate-800 rounded-lg overflow-hidden max-w-md shadow-xl">
                <div className="bg-slate-700 px-3 py-2 flex items-center gap-2">
                  <div className="flex gap-1.5">
                    <span className="w-3 h-3 rounded-full bg-red-500"></span>
                    <span className="w-3 h-3 rounded-full bg-yellow-500"></span>
                    <span className="w-3 h-3 rounded-full bg-green-500"></span>
                  </div>
                  <span className="text-gray-400 text-xs ml-2">twitter.com</span>
                </div>
                <div className="p-4">
                  <img
                    src="https://cdn.banatie.app/sys/demo/live/og?prompt=abstract+gradient+purple+blue+tech+background&aspectRatio=1200:630"
                    alt="OG Image Preview"
                    className="w-full rounded-lg"
                  />
                  <p className="text-gray-400 text-xs mt-2">banatie.app</p>
                  <p className="text-white font-medium mt-1">
                    AI Placeholder Images Guide | Banatie
                  </p>
                  <p className="text-gray-400 text-sm mt-1">
                    Generate AI placeholder images for development...
                  </p>
                </div>
              </div>
            </LivePreview>

            <CodeBlock
              code={`<meta property="og:image" content="https://cdn.banatie.app/{org}/{project}/live/og?prompt=your+description&aspectRatio=1200:630" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />`}
              language="html"
            />

            <div className="mt-4">
              <TipBox variant="compact" type="info">
                OG images are cached by social platforms. Change the prompt to regenerate.
              </TipBox>
            </div>
          </div>

          {/* Features */}
          <div className="mb-10">
            <h3 className="text-xl font-semibold text-white mb-2">Features</h3>
            <p className="text-gray-400 text-sm mb-4">
              <InlineCode>1:1</InlineCode> · Feature grids, benefit sections, icons
            </p>

            <LivePreview>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div className="bg-slate-800/60 border border-slate-700/50 rounded-xl p-6 text-center">
                  <img
                    src="https://cdn.banatie.app/sys/demo/live/features?prompt=minimal+icon+lightning+bolt+blue+glow+dark+slate+background&aspectRatio=1:1"
                    alt="Lightning Fast"
                    className="w-20 h-20 mx-auto rounded-xl border border-slate-600/50"
                  />
                  <p className="mt-4 font-semibold text-white">Lightning Fast</p>
                  <p className="mt-2 text-sm text-gray-400">
                    Deploy in seconds with our global CDN
                  </p>
                </div>
                <div className="bg-slate-800/60 border border-slate-700/50 rounded-xl p-6 text-center">
                  <img
                    src="https://cdn.banatie.app/sys/demo/live/features?prompt=minimal+icon+shield+green+glow+dark+slate+background&aspectRatio=1:1"
                    alt="Secure by Default"
                    className="w-20 h-20 mx-auto rounded-xl border border-slate-600/50"
                  />
                  <p className="mt-4 font-semibold text-white">Secure by Default</p>
                  <p className="mt-2 text-sm text-gray-400">Enterprise-grade security built in</p>
                </div>
                <div className="bg-slate-800/60 border border-slate-700/50 rounded-xl p-6 text-center">
                  <img
                    src="https://cdn.banatie.app/sys/demo/live/features?prompt=minimal+icon+puzzle+piece+purple+glow+dark+slate+background&aspectRatio=1:1"
                    alt="Easy Integration"
                    className="w-20 h-20 mx-auto rounded-xl border border-slate-600/50"
                  />
                  <p className="mt-4 font-semibold text-white">Easy Integration</p>
                  <p className="mt-2 text-sm text-gray-400">Works with your existing stack</p>
                </div>
              </div>
            </LivePreview>

            <CodeBlock
              code={`<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
  <div class="bg-slate-800/60 border border-slate-700/50 rounded-xl p-6 text-center">
    <img
      src="https://cdn.banatie.app/{org}/{project}/live/features?prompt=minimal+icon+lightning+bolt+blue+glow+dark+slate+background&aspectRatio=1:1"
      alt="Lightning Fast"
      class="w-20 h-20 mx-auto rounded-xl border border-slate-600/50"
    />
    <p class="mt-4 font-semibold text-white">Lightning Fast</p>
    <p class="mt-2 text-sm text-gray-400">Deploy in seconds with our global CDN</p>
  </div>
  <!-- Repeat for other features -->
</div>`}
              language="html"
            />
          </div>
        </section>

        {/* File-based Workflow */}
        <section id="file-based-workflow" className="mb-12 scroll-mt-24">
          <SectionHeader level={2} id="file-based-workflow">
            File-based Workflow
          </SectionHeader>
          <p className="text-gray-300 leading-relaxed mb-6">
            Need files in your repo? Here&apos;s how to download generated images.
          </p>

          <h4 className="text-white font-semibold mb-3">When to Use Files</h4>
          <ul className="list-disc list-inside text-gray-300 space-y-2 mb-6">
            <li>Next.js/React projects with local image imports</li>
            <li>Version-controlled placeholder assets</li>
            <li>Offline or CI/CD environments</li>
          </ul>

          <h4 className="text-white font-semibold mb-3">Generate via API</h4>
          <p className="text-gray-300 leading-relaxed mb-4">Request:</p>
          <CodeBlock
            code={`POST https://api.banatie.app/v1/generations
Content-Type: application/json
X-API-Key: your_api_key

{
  "prompt": "modern office interior"
}`}
            language="http"
          />

          <p className="text-gray-300 leading-relaxed mt-6 mb-4">Response:</p>
          <CodeBlock
            code={`{
  "image": {
    "id": "img_abc123",
    "cdnUrl": "https://cdn.banatie.app/org/project/images/2025-01/abc123.png"
  }
}`}
            language="json"
          />

          <p className="text-gray-300 leading-relaxed mt-6">
            Open <InlineCode>cdnUrl</InlineCode> in your browser, save the image, and add it to your
            project&apos;s assets folder.
          </p>

          <p className="text-gray-300 leading-relaxed mt-4">
            For full API reference, see{' '}
            <a href="/docs/api/generations/" className="text-purple-400 hover:underline">
              Generations API
            </a>
            .
          </p>
        </section>
      </DocPage>
    </>
  );
}