import { Check } from "lucide-react";

const features = [
  "Automated name approval and DIN generation workflows",
  "Direct integration with MCA database for real-time filing status",
  "Zero-hassle digital signature & PAN/TAN allotment tracking",
];

const statuses = [
  {
    title: "SPICe+ Form Processing",
    status: "Completed",
  },
  {
    title: "Certificate of Incorporation (COI)",
    status: "Issued",
  },
];

export default function CompanyRegistrationSection() {
  return (
    <section className="border-b border-border-custom 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">
        {/* Left Content */}
        <div className="space-y-6">
          <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">
            Core Setup Module
          </div>

          <h2 className="text-3xl font-extrabold tracking-tight text-foreground sm:text-4xl">
            Fast & Seamless Company Registration
          </h2>

          <p className="text-base leading-relaxed text-muted-foreground">
            Launch your next venture with complete legal backing. Streamline
            incorporation workflows for Private Limited companies, LLPs, and
            partnerships with instant automated document verification.
          </p>

          {/* Features */}
          <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>

        {/* Right Dashboard Card */}
        <div className="rounded-3xl border border-border-custom bg-header p-8 shadow-sm">
          {/* Dashboard Header */}
          <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">
              Live Status Dashboard
            </span>

            <p className="text-lg font-bold text-foreground">
              Incorporation Tracker & Document Vault
            </p>
          </div>

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

                <span className="rounded-md bg-emerald-50 px-2.5 py-1 text-xs font-bold text-emerald-600">
                  {item.status}
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}