import { FaBullseye, FaEye, FaHandsHelping, FaArrowRight } from "react-icons/fa";
import Link from "next/link";

export default function MissionVision() {
  return (
    <section className="relative overflow-hidden bg-section-light py-14 sm:py-16 lg:py-24">
      <div className="absolute left-0 top-0 h-72 w-72 rounded-full bg-amber-400/10 blur-3xl" />
      <div className="absolute bottom-0 right-0 h-72 w-72 rounded-full bg-slate-900/5 blur-3xl" />

      <div className="relative z-10 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="mx-auto max-w-3xl text-center">
          <span className="inline-flex rounded-full bg-amber-50 px-4 py-2 text-[11px] font-bold uppercase tracking-widest text-amber-600 sm:text-xs">
            Mission & Vision
          </span>

          <h2 className="mt-4 text-3xl font-extrabold leading-tight text-slate-950 sm:text-4xl lg:text-5xl">
            Building Dignity, Opportunity & Sustainable Social Impact
          </h2>

          <p className="mt-4 text-sm leading-7 text-slate-600 sm:text-base sm:leading-8">
            Rajvi Social Welfare Trust works with a clear purpose to empower
            communities through education, healthcare awareness, women
            empowerment, youth development and grassroots welfare initiatives.
          </p>
        </div>

        <div className="mt-10 grid gap-5 md:grid-cols-2 lg:gap-8">
          <div className="group rounded-3xl border border-slate-200 bg-white p-6 shadow-sm transition duration-300 hover:-translate-y-1 hover:shadow-xl sm:p-8">
            <div className="mb-5 flex h-14 w-14 items-center justify-center rounded-2xl bg-[var(--accent)] text-xl text-black shadow-sm">
              <FaBullseye />
            </div>

            <h3 className="text-2xl font-extrabold text-slate-950">
              Our Mission
            </h3>

            <p className="mt-4 text-sm leading-7 text-slate-600 sm:text-base sm:leading-8">
              To empower individuals and communities through education, health
              awareness, skill development, women empowerment and welfare
              programs that create dignity, opportunity and social progress.
            </p>

            <ul className="mt-6 space-y-3 text-sm text-slate-700">
              <li className="flex gap-3">
                <FaHandsHelping className="mt-1 shrink-0 text-amber-500" />
                Community-focused welfare support
              </li>
              <li className="flex gap-3">
                <FaHandsHelping className="mt-1 shrink-0 text-amber-500" />
                Education and healthcare awareness
              </li>
              <li className="flex gap-3">
                <FaHandsHelping className="mt-1 shrink-0 text-amber-500" />
                Women and youth empowerment
              </li>
            </ul>
          </div>

          <div className="group rounded-3xl border border-slate-200 bg-slate-950 p-6 text-white shadow-sm transition duration-300 hover:-translate-y-1 hover:shadow-xl sm:p-8">
            <div className="mb-5 flex h-14 w-14 items-center justify-center rounded-2xl bg-white text-xl text-slate-950 shadow-sm">
              <FaEye />
            </div>

            <h3 className="text-2xl font-extrabold">Our Vision</h3>

            <p className="mt-4 text-sm leading-7 text-slate-300 sm:text-base sm:leading-8">
              To build an inclusive society where every person has access to
              basic support, awareness, opportunities and resources required for
              a better and more sustainable life.
            </p>

            <ul className="mt-6 space-y-3 text-sm text-slate-300">
              <li className="flex gap-3">
                <FaHandsHelping className="mt-1 shrink-0 text-[var(--accent)]" />
                Equal opportunities for every individual
              </li>
              <li className="flex gap-3">
                <FaHandsHelping className="mt-1 shrink-0 text-[var(--accent)]" />
                Stronger and more aware communities
              </li>
              <li className="flex gap-3">
                <FaHandsHelping className="mt-1 shrink-0 text-[var(--accent)]" />
                Sustainable social development
              </li>
            </ul>
          </div>
        </div>

        <div className="mt-10 flex justify-center">
          <Link
            href="/about"
            className="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-[var(--accent)] px-6 py-4 text-sm font-bold text-black shadow-md transition hover:scale-[1.02] sm:w-auto"
          >
            Learn More About Us
            <FaArrowRight className="text-xs" />
          </Link>
        </div>
      </div>
    </section>
  );
}