import { Sparkles } from 'lucide-react';

export function PromptUrlsSection() {
  return (
    <section className="py-16 px-6">
      <div className="max-w-4xl mx-auto">
        <div className="bg-gradient-to-br from-cyan-500/10 to-indigo-500/[0.08] border border-cyan-500/30 rounded-2xl p-8">
          <div className="flex items-start gap-4 mb-6">
            <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-indigo-500/20 to-purple-500/20 flex items-center justify-center flex-shrink-0">
              <Sparkles className="w-6 h-6 text-cyan-400" />
            </div>
            <div>
              <span className="inline-block px-3 py-1 bg-cyan-500/20 text-cyan-300 text-xs rounded-full mb-2">
                Unique
              </span>
              <h2 className="text-2xl font-bold mb-2">Prompt URLs — Images via HTML</h2>
              <p className="text-gray-400">
                Put a prompt in your{' '}
                <code className="text-cyan-300 bg-black/30 px-1 rounded">img src</code> and get a
                real image. No API calls. No JavaScript. Just HTML.
              </p>
            </div>
          </div>

          <div className="bg-black/50 border border-indigo-500/20 rounded-lg p-4 font-mono text-sm overflow-x-auto">
            <span className="text-gray-500">&lt;!-- Write this --&gt;</span>
            <br />
            <span className="text-purple-400">&lt;img</span>{' '}
            <span className="text-cyan-300">src</span>=
            <span className="text-green-400">
              &quot;https://cdn.banatie.app/gen?p=modern office interior&quot;
            </span>{' '}
            <span className="text-purple-400">/&gt;</span>
            <br />
            <br />
            <span className="text-gray-500">
              &lt;!-- Get this: production-ready image, cached, CDN-delivered --&gt;
            </span>
          </div>

          <p className="text-gray-500 text-sm mt-4">
            Perfect for static sites, prototypes, and AI coding agents that generate HTML.
          </p>
        </div>
      </div>
    </section>
  );
}