import { CheckCircle2, XCircle } from "lucide-react";

import SectionHeader from "@/components/home/SectionHeader";
import type { AboutContent } from "@/data/about.data";

export default function WhyBuiltPureSaaS({ content }: { content: AboutContent["whyBuilt"] }) {
  return (
    <section className="bg-gradient-to-b from-[#f9faff] to-white py-14">
      <div className="mx-auto max-w-[1200px] px-6">
        <p className="text-center text-[11px] font-extrabold uppercase tracking-[0.2em] text-[#626bef]">{content.eyebrow}</p>
        <SectionHeader title={content.title} subtitle={content.description} className="mx-auto mt-2 max-w-[790px]" />
        <div className="mt-8 grid gap-5 lg:grid-cols-2">
          <IssueColumn icon={XCircle} items={content.problems} title={content.problemsTitle} tone="rose" />
          <IssueColumn icon={CheckCircle2} items={content.solutions} title={content.solutionsTitle} tone="green" />
        </div>
      </div>
    </section>
  );
}

function IssueColumn({ icon: Icon, items, title, tone }: { icon: typeof XCircle; items: string[]; title: string; tone: "rose" | "green" }) {
  const styles = tone === "rose" ? "border-rose-100 bg-rose-50/50 text-rose-500" : "border-emerald-100 bg-emerald-50/50 text-emerald-600";
  return (
    <article className={`rounded-[24px] border p-5 sm:p-6 ${styles}`}>
      <h3 className="text-xl font-extrabold tracking-[-0.04em] text-[#1f294b]">{title}</h3>
      <div className="mt-5 grid gap-3 sm:grid-cols-2">
        {items.map((item) => <p key={item} className="flex gap-2.5 rounded-xl border border-white/90 bg-white/80 p-3 text-[12px] font-semibold leading-5 text-[#68748c] shadow-sm"><Icon size={17} className="mt-0.5 shrink-0" />{item}</p>)}
      </div>
    </article>
  );
}