import { Zap, Check, Crown, Type, Brain, Target, Image, Award } from 'lucide-react';

const flashFeatures = [
  { text: 'Sub-3 second', detail: 'generation time' },
  { text: 'Multi-turn editing', detail: '— refine through conversation' },
  { text: 'Up to 3 reference images', detail: 'for consistency' },
  { text: '1024px', detail: 'resolution output' },
];

const proFeatures = [
  { text: 'Up to 4K', detail: 'resolution output' },
  { text: '14 reference images', detail: 'for brand consistency' },
  { text: 'Studio controls', detail: '— lighting, focus, color grading' },
  { text: 'Thinking mode', detail: '— advanced reasoning for complex prompts' },
];

const capabilities = [
  {
    icon: Type,
    title: 'Perfect Text Rendering',
    description:
      'Legible text in images — logos, diagrams, posters. What other models still struggle with.',
  },
  {
    icon: Brain,
    title: 'Native Multimodal',
    description:
      'Understands text AND images in one model. Not a text model + image model bolted together.',
  },
  {
    icon: Target,
    title: 'Precise Prompt Following',
    description:
      'What you ask is what you get. No artistic "interpretation" that ignores your instructions.',
  },
  {
    icon: Image,
    title: 'Professional Realism',
    description:
      'Photorealistic output that replaces stock photos. Not fantasy art — real, usable images.',
  },
];

export function GeminiSection() {
  return (
    <section className="py-20 px-6">
      <div className="max-w-5xl mx-auto">
        <div className="bg-gradient-to-b from-[rgba(120,90,20,0.35)] via-[rgba(60,45,10,0.5)] to-[rgba(30,20,5,0.6)] border border-yellow-500/30 rounded-2xl p-8 md:p-12">
          <div className="text-center mb-10">
            <div className="flex items-center justify-center gap-3 mb-4">
              <Zap className="w-8 h-8 text-yellow-400" />
              <h2 className="text-2xl md:text-3xl font-bold">Powered by Google Gemini</h2>
            </div>
            <p className="text-gray-400 max-w-2xl mx-auto">
              We chose Gemini because it&apos;s the only model family that combines native
              multimodal understanding with production-grade image generation. Two models, optimized
              for different needs.
            </p>
          </div>

          <div className="grid md:grid-cols-2 gap-6 mb-10">
            <div className="bg-black/30 border border-cyan-500/30 rounded-xl p-6">
              <div className="flex items-center gap-3 mb-4">
                <div className="w-10 h-10 rounded-lg bg-cyan-500/20 flex items-center justify-center">
                  <Zap className="w-5 h-5 text-cyan-400" />
                </div>
                <div>
                  <h3 className="font-bold text-lg">Gemini 2.5 Flash Image</h3>
                  <p className="text-cyan-400 text-sm">Nano Banana</p>
                </div>
              </div>
              <p className="text-gray-400 text-sm mb-4">
                Optimized for speed and iteration. Perfect for rapid prototyping and high-volume
                generation.
              </p>
              <ul className="space-y-2 text-sm">
                {flashFeatures.map((feature, i) => (
                  <li key={i} className="flex items-start gap-2">
                    <Check className="w-4 h-4 text-cyan-400 mt-0.5 flex-shrink-0" />
                    <span className="text-gray-300">
                      <strong className="text-white">{feature.text}</strong> {feature.detail}
                    </span>
                  </li>
                ))}
              </ul>
            </div>

            <div className="bg-black/30 border border-yellow-500/30 rounded-xl p-6">
              <div className="flex items-center gap-3 mb-4">
                <div className="w-10 h-10 rounded-lg bg-yellow-500/20 flex items-center justify-center">
                  <Crown className="w-5 h-5 text-yellow-400" />
                </div>
                <div>
                  <h3 className="font-bold text-lg">Gemini 3 Pro Image</h3>
                  <p className="text-yellow-400 text-sm">Nano Banana Pro</p>
                </div>
              </div>
              <p className="text-gray-400 text-sm mb-4">
                Maximum quality and creative control. For production assets and professional
                workflows.
              </p>
              <ul className="space-y-2 text-sm">
                {proFeatures.map((feature, i) => (
                  <li key={i} className="flex items-start gap-2">
                    <Check className="w-4 h-4 text-yellow-400 mt-0.5 flex-shrink-0" />
                    <span className="text-gray-300">
                      <strong className="text-white">{feature.text}</strong> {feature.detail}
                    </span>
                  </li>
                ))}
              </ul>
            </div>
          </div>

          <div className="border-t border-yellow-500/20 pt-8">
            <h4 className="text-center font-semibold mb-6 text-gray-300">
              Why Gemini outperforms competitors
            </h4>
            <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
              {capabilities.map((cap, i) => (
                <div key={i} className="text-center p-4">
                  <div className="w-12 h-12 rounded-xl bg-yellow-500/10 flex items-center justify-center mx-auto mb-3">
                    <cap.icon className="w-6 h-6 text-yellow-400" />
                  </div>
                  <h5 className="font-medium text-sm mb-1">{cap.title}</h5>
                  <p className="text-gray-500 text-xs">{cap.description}</p>
                </div>
              ))}
            </div>
          </div>

          <p className="text-center text-gray-500 text-sm mt-8">
            <Award className="w-4 h-4 inline mr-1 text-yellow-400" />
            Gemini 2.5 Flash Image ranked #1 on LMArena for both text-to-image and image editing
            (August 2025)
          </p>
        </div>
      </div>
    </section>
  );
}
