import { Terminal } from 'lucide-react';

export function ApiExampleSection() {
  return (
    <section className="py-16 px-6">
      <div className="max-w-4xl mx-auto">
        <div className="bg-gradient-to-b from-indigo-500/10 to-[rgba(30,27,75,0.4)] border border-indigo-500/20 backdrop-blur-[10px] rounded-2xl p-8">
          <div className="flex items-center gap-3 mb-6">
            <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-indigo-500/20 to-purple-500/20 flex items-center justify-center">
              <Terminal className="w-5 h-5 text-indigo-400" />
            </div>
            <div>
              <h2 className="text-xl font-bold">One request. Production-ready URL.</h2>
              <p className="text-gray-400 text-sm">Simple REST API that handles everything</p>
            </div>
          </div>

          <div className="bg-black/50 border border-indigo-500/20 rounded-lg p-4 font-mono text-sm overflow-x-auto mb-4">
            <div className="text-gray-500 mb-2"># Generate an image</div>
            <span className="text-cyan-400">curl</span>{' '}
            <span className="text-gray-300">-X POST https://api.banatie.app/v1/generate \</span>
            <br />
            <span className="text-gray-300 ml-4">-H</span>{' '}
            <span className="text-green-400">&quot;Authorization: Bearer $API_KEY&quot;</span>{' '}
            <span className="text-gray-300">\</span>
            <br />
            <span className="text-gray-300 ml-4">-d</span>{' '}
            <span className="text-green-400">
              &apos;{`{"prompt": "modern office interior, natural light"}`}&apos;
            </span>
          </div>

          <div className="bg-black/50 border border-indigo-500/20 rounded-lg p-4 font-mono text-sm overflow-x-auto">
            <div className="text-gray-500 mb-2"># Response</div>
            <span className="text-gray-300">{'{'}</span>
            <br />
            <span className="text-purple-400 ml-4">&quot;url&quot;</span>
            <span className="text-gray-300">:</span>{' '}
            <span className="text-green-400">
              &quot;https://cdn.banatie.app/img/a7x2k9.png&quot;
            </span>
            <span className="text-gray-300">,</span>
            <br />
            <span className="text-purple-400 ml-4">&quot;enhanced_prompt&quot;</span>
            <span className="text-gray-300">:</span>{' '}
            <span className="text-green-400">&quot;A photorealistic modern office...&quot;</span>
            <span className="text-gray-300">,</span>
            <br />
            <span className="text-purple-400 ml-4">&quot;generation_time&quot;</span>
            <span className="text-gray-300">:</span> <span className="text-yellow-400">12.4</span>
            <br />
            <span className="text-gray-300">{'}'}</span>
          </div>

          <p className="text-gray-500 text-sm mt-4 text-center">
            CDN-cached, optimized, ready to use. No download, no upload, no extra steps.
          </p>
        </div>
      </div>
    </section>
  );
}
