import { Check } from "lucide-react";

const complianceChecks = [
  {
    label: "GST Return Timeliness",
    value: "100% On-Time",
  },
  {
    label: "MCA Annual Filings",
    value: "Up to Date",
  },
];

const features = [
  "Continuous monitoring of vendor and partner tax statuses",
  "Automated deadline reminders for board meetings and filings",
  "Comprehensive compliance scorecards for audit readiness",
];

export default function ComplianceAuditSection() {
  return (
    <section className="bg-background py-20">
      <div className="mx-auto grid max-w-7xl grid-cols-1 items-center gap-12 px-6 lg:grid-cols-2">
        {/* Compliance Dashboard */}
        <div className="order-2 rounded-3xl border border-border-custom bg-header p-8 shadow-sm lg:order-1">
          <div className="mb-6 rounded-2xl border border-blue-100 bg-blue-50/50 p-6">
            <span className="mb-1 block text-xs font-bold uppercase tracking-wider text-blue-600">
              Automated Guardian
            </span>

            <p className="text-lg font-bold text-foreground">
              Statutory Health Monitor
            </p>
          </div>

          <div className="space-y-3">
            {complianceChecks.map((check) => (
              <div
                key={check.label}
                className="flex items-center justify-between rounded-xl border border-border-custom bg-hover-background p-4 text-sm"
              >
                <span className="font-semibold text-foreground">
                  {check.label}
                </span>

                <span className="font-bold text-emerald-600">
                  {check.value}
                </span>
              </div>
            ))}
          </div>
        </div>

        {/* Content */}
        <div className="order-1 space-y-6 lg:order-2">
          <div className="inline-flex items-center gap-2 rounded-full bg-blue-50 px-3 py-1 text-xs font-bold uppercase tracking-wider text-blue-600">
            Risk & Regulation
          </div>

          <h2 className="text-3xl font-extrabold tracking-tight text-foreground sm:text-4xl">
            Automated Compliance Audit
          </h2>

          <p className="text-base leading-relaxed text-muted-foreground">
            Eliminate penalty risks and regulatory defaults. Automate statutory
            health checks, vendor audits, and recurring compliance tracking
            effortlessly.
          </p>

          <ul className="space-y-3 text-sm font-medium text-foreground">
            {features.map((feature) => (
              <li key={feature} className="flex items-center gap-3">
                <Check
                  size={20}
                  strokeWidth={2.5}
                  className="shrink-0 text-blue-600"
                />
                <span>{feature}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}