About Comparison

"use client";

import React from "react";
import { motion } from "framer-motion";
import { ArrowRight } from "lucide-react";

interface ComparisonSide {
  label: string;
  image?: string;
  points: { label: string; value: string }[];
}

interface AboutComparisonProps {
  badge?: string;
  title?: string;
  subtitle?: string;
  before?: ComparisonSide;
  after?: ComparisonSide;
}

function SideCard({ side, delay, accent }: { side: ComparisonSide; delay: number; accent: boolean }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 30 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ delay, duration: 0.5 }}
      className="rounded-[var(--radius-xl,1.5rem)] border overflow-hidden"
      style={{
        backgroundColor: accent ? "var(--color-background-dark)" : "var(--color-background-card)",
        borderColor: accent ? "var(--color-accent)" : "var(--color-border)",
      }}
    >
      {side.image && (
        <div className="aspect-[3/2]" style={{ backgroundColor: "var(--color-background-alt)", backgroundImage: `url(${side.image})`, backgroundSize: "cover", backgroundPosition: "center" }} />
      )}
      <div className="p-6">
        <h3 className="text-lg font-bold mb-4" style={{ color: accent ? "var(--color-accent)" : "var(--color-foreground)" }}>{side.label}</h3>
        <div className="space-y-3">
          {side.points.map((point, i) => (
            <div key={i} className="flex justify-between items-center py-2 border-b" style={{ borderColor: "var(--color-border)" }}>
              <span className="text-xs" style={{ color: "var(--color-foreground-muted)" }}>{point.label}</span>
              <span className="text-sm font-semibold" style={{ color: "var(--color-foreground)" }}>{point.value}</span>
            </div>
          ))}
        </div>
      </div>
    </motion.div>
  );
}

export default function AboutComparison({ badge, title, subtitle, before, after }: AboutComparisonProps) {
  return (
    <section className="py-[var(--section-padding-y,6rem)]" style={{ backgroundColor: "var(--color-background)" }}>
      <div className="mx-auto max-w-6xl px-[var(--container-padding-x,1.5rem)]">
        <motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5 }} className="text-center max-w-2xl mx-auto mb-14">
          {badge && <span className="inline-block text-xs font-medium tracking-wider uppercase px-3 py-1 rounded-full border" style={{ color: "var(--color-accent)", borderColor: "var(--color-border)" }}>{badge}</span>}
          {title && <h2 className="mt-4 text-3xl font-bold tracking-tight md:text-4xl" style={{ color: "var(--color-foreground)" }}>{title}</h2>}
          {subtitle && <p className="mt-3 text-sm" style={{ color: "var(--color-foreground-muted)" }}>{subtitle}</p>}
        </motion.div>

        <div className="grid grid-cols-1 lg:grid-cols-[1fr_auto_1fr] gap-6 items-center">
          {before && <SideCard side={before} delay={0.1} accent={false} />}
          <motion.div initial={{ opacity: 0, scale: 0 }} whileInView={{ opacity: 1, scale: 1 }} viewport={{ once: true }} transition={{ delay: 0.3, duration: 0.4 }} className="flex justify-center">
            <div className="flex h-12 w-12 items-center justify-center rounded-full" style={{ backgroundColor: "var(--color-accent)" }}>
              <ArrowRight className="h-5 w-5" style={{ color: "var(--color-background)" }} />
            </div>
          </motion.div>
          {after && <SideCard side={after} delay={0.2} accent={true} />}
        </div>
      </div>
    </section>
  );
}