import { Eye, Target, type LucideIcon } from "lucide-react";

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

export default function MissionVision({ content }: { content: AboutContent["missionVision"] }) {
  const cards: { icon: LucideIcon; title: string; description: string; gradient: string }[] = [
    { icon: Target, title: content.missionTitle, description: content.mission, gradient: "from-[#675cf0] to-[#8c66f4]" },
    { icon: Eye, title: content.visionTitle, description: content.vision, gradient: "from-[#3d86e8] to-[#5ac3e7]" },
  ];
  return (
    <section className="mx-auto max-w-[1120px] px-6 py-14">
      <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="mt-2" />
      <div className="mt-7 grid gap-5 md:grid-cols-2">
        {cards.map(({ icon: Icon, title, description, gradient }) => (
          <article key={title} className="group rounded-[24px] border border-[#e5eaf4] bg-white p-6 shadow-[0_12px_32px_rgba(51,66,116,0.06)] transition duration-300 hover:-translate-y-1 hover:shadow-[0_18px_38px_rgba(67,78,145,0.11)]">
            <div className={`grid h-12 w-12 place-items-center rounded-2xl bg-gradient-to-br text-white shadow-lg ${gradient}`}><Icon size={23} /></div>
            <h3 className="mt-5 text-xl font-extrabold tracking-[-0.04em] text-[#1b2649]">{title}</h3>
            <p className="mt-3 text-[14px] leading-7 text-[#6d7895]">{description}</p>
          </article>
        ))}
      </div>
    </section>
  );
}