"use client";
import React from 'react';
import { X, Check } from 'lucide-react';
const dotBg = "/landing/DotBg.png";

interface ComparisonItem {
  negative: string;
  positive: string;
}

export interface WhyDocqubeProps {
  badgeText?: string;
  title?: string;
  comparisons?: ComparisonItem[];
}

const defaultComparisons: ComparisonItem[] = [
  {
    negative: "Files scattered across apps",
    positive: "One source of truth",
  },
  {
    negative: "A different login and bill for each",
    positive: "One login, one bill",
  },
  {
    negative: "Separate, inconsistent permissions",
    positive: "One RBAC model across all modules",
  },
  {
    negative: "No end-to-end audit trail",
    positive: "A single audit trail from upload to signature",
  },
  {
    negative: "Data copied between vendors",
    positive: "Data stays in one platform",
  }
];

const WhyDocqube: React.FC<WhyDocqubeProps> = ({
  badgeText = "WHY THE PLATFORM BEATS POINT TOOLS",
  title = "From Fragmented To One Clear System",
  comparisons = defaultComparisons
}) => {
  return (
    <section 
      className="relative py-24 overflow-hidden bg-[#FCFCFC]"
      style={{
        backgroundImage: `url(${dotBg})`,
        backgroundSize: 'contain',
        backgroundPosition: 'center',
        backgroundRepeat: 'repeat'
      }}
    >

      <div className="relative z-10 max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        
        {/* Header */}
        <div className="text-center mb-16">
          <div className="inline-flex items-center text-[#444CE7] font-bold text-[11px] tracking-[0.2em] uppercase mb-4">
            <div className="w-2 h-2 rounded-full bg-[#444CE7] mr-2"></div>
            {badgeText}
          </div>
          <h2 className="text-[32px] md:text-[40px] font-medium text-[#0a1236] tracking-tight">
            {title}
          </h2>
        </div>

        {/* Comparison Card */}
        <div className="bg-white rounded-[24px] border border-gray-100 shadow-[0_8px_30px_rgb(0,0,0,0.04)] overflow-hidden flex flex-col md:flex-row">
          
          {/* Left Side: Negative */}
          <div className="flex-1 p-10 md:p-14">
            <h3 className="text-[22px] font-bold text-gray-800 mb-4">Buying point tools</h3>
            <div className="w-12 h-0.5 bg-gray-200 mb-10"></div>
            
            <ul className="space-y-6">
              {comparisons.map((item, idx) => (
                <li key={idx} className="flex items-start">
                  <X className="w-5 h-5 text-red-500 mr-4 flex-shrink-0 mt-0.5" />
                  <span className="text-[15px] text-gray-600 font-medium leading-snug">{item.negative}</span>
                </li>
              ))}
            </ul>
          </div>

          {/* Right Side: Positive */}
          <div className="flex-1 p-2 md:p-3">
            <div className="bg-[#F6F7FE] h-full rounded-[24px] p-8 md:p-11 shadow-[inset_6px_6px_18px_0_rgba(55,87,233,0.19),inset_-6px_-8px_9px_0_#FFFFFF]">
              <div className="flex items-center mb-4">
                <h3 className="text-[22px] font-bold text-gray-800 mr-2">With DocQube</h3>
                <div className="bg-[#444CE7] text-white rounded-full p-0.5">
                  <Check className="w-3.5 h-3.5" strokeWidth={3} />
                </div>
              </div>
              <div className="w-12 h-[3px] rounded-full bg-[#444CE7] mb-10"></div>
              
              <ul className="space-y-6">
                {comparisons.map((item, idx) => (
                  <li key={idx} className="flex items-start">
                    <Check className="w-5 h-5 text-[#444CE7] mr-4 flex-shrink-0 mt-0.5" />
                    <span className="text-[15px] text-gray-800 font-semibold leading-snug">{item.positive}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
          
        </div>

      </div>
    </section>
  );
};

export default WhyDocqube;