import React from 'react';
import Image from 'next/image';

interface ComparisonPoint {
  traditional: string;
  visualization: string;
}

interface ComparisonCardsProps {
  traditionalImage: string;
  visualizationImage: string;
  points: ComparisonPoint[];
}

export const ComparisonCards: React.FC<ComparisonCardsProps> = ({
  traditionalImage,
  visualizationImage,
  points,
}) => {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
      {/* Traditional Photography Card */}
      <div className="bg-ui-dark/80 backdrop-blur-xl border border-ui-border rounded-xl overflow-hidden relative group hover:border-neutral-gray/30 transition-all">
        <div className="h-64 relative">
          <Image 
            src={traditionalImage} 
            alt="Traditional Photography" 
            fill 
            className="object-cover opacity-80 group-hover:opacity-100 transition-opacity"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-background to-transparent"></div>
          <div className="absolute bottom-4 left-4 bg-background/90 backdrop-blur-xl px-4 py-2 rounded-lg text-xs text-white border border-ui-border font-medium uppercase tracking-widest">
            Traditional Photography
          </div>
        </div>
        <div className="p-8">
          <h4 className="text-xl font-semibold text-white mb-6 flex items-center gap-3">
            <div className="w-10 h-10 rounded-xl bg-ui-dark border border-ui-border flex items-center justify-center text-neutral-gray">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"></path><circle cx="12" cy="13" r="3"></circle></svg>
            </div>
            The Traditional Approach
          </h4>
          <ul className="space-y-4">
            {points.map((point, index) => (
              <li key={index} className="flex items-start gap-4">
                <div className="w-6 h-6 rounded-full bg-ui-dark border border-ui-border flex items-center justify-center flex-shrink-0 text-neutral-gray">
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
                </div>
                <span className="text-neutral-gray text-sm leading-relaxed">{point.traditional}</span>
              </li>
            ))}
          </ul>
          <div className="mt-8 pt-6 border-t border-ui-border">
            <p className="italic text-neutral-gray/60 text-sm">
              The old-school way — expensive, slow, and you need the actual product first.
            </p>
          </div>
        </div>
      </div>

      {/* 3D Visualization Card */}
      <div className="bg-ui-dark/80 backdrop-blur-xl border border-primary/30 rounded-xl overflow-hidden relative group hover:border-primary/50 transition-all shadow-[0_0_30px_rgba(0,113,227,0.1)]">
        <div className="absolute -top-20 -right-20 w-40 h-40 bg-primary/10 rounded-full blur-3xl"></div>
        <div className="h-64 relative">
          <Image 
            src={visualizationImage} 
            alt="3D Visualization" 
            fill 
            className="object-cover opacity-90 group-hover:opacity-100 transition-opacity"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-background to-transparent"></div>
          <div className="absolute bottom-4 right-4 bg-primary/20 backdrop-blur-xl px-4 py-2 rounded-lg text-xs text-white border border-primary/30 font-medium uppercase tracking-widest">
            3D Visualization
          </div>
        </div>
        <div className="p-8 relative z-10">
          <h4 className="text-xl font-semibold text-white mb-6 flex items-center gap-3">
            <div className="w-10 h-10 rounded-xl bg-primary flex items-center justify-center text-white shadow-[0_0_15px_rgba(0,113,227,0.4)]">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.29 7 12 12 20.71 7"></polyline><line x1="12" y1="22" x2="12" y2="12"></line></svg>
            </div>
            The Modern Approach
          </h4>
          <ul className="space-y-4">
            {points.map((point, index) => (
              <li key={index} className="flex items-start gap-4">
                <div className="w-6 h-6 rounded-full bg-primary/20 border border-primary/30 flex items-center justify-center flex-shrink-0 text-primary">
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
                </div>
                <span className="text-white text-sm leading-relaxed">{point.visualization}</span>
              </li>
            ))}
          </ul>
          <div className="mt-8 pt-6 border-t border-primary/20">
            <p className="italic text-neutral-light text-sm">
              The smart way — create stunning visuals before you even build the thing.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};