import Link from "next/link";
import { creditDisplayName, creditTicker } from "@/lib/credits-brand";
import { appTitle } from "@/lib/public-env";

export function MissionStatement() {
  const title = appTitle();
  const ticker = creditTicker();
  const name = creditDisplayName();

  return (
    <section id="mission" className="scroll-mt-28 border-b border-white/10 bg-[#030712] py-10">
      <div className="mx-auto max-w-6xl px-4 text-center sm:px-6">
        <p className="text-xs uppercase tracking-[0.32em] text-sky-200/75">Why we’re here</p>
        <h2 className="mx-auto mt-3 max-w-4xl text-3xl font-semibold leading-tight text-white sm:text-4xl">
          A big-tent home for people who want democracy to win — and want to see how their support helps
        </h2>
        <p className="mx-auto mt-5 max-w-3xl text-lg leading-relaxed text-slate-400">
          <strong className="text-slate-200">{title}</strong> is where small-dollar donors, volunteers, and curious neighbors meet the
          same simple story: give if you can, stay for the community, and use{" "}
          <strong className="text-slate-200">
            {name} ({ticker})
          </strong>{" "}
          to cheer on field work, rank ideas, pick perks, and play a small part in something larger than a single campaign cycle.
        </p>
        <p className="mx-auto mt-4 max-w-3xl text-base leading-relaxed text-slate-500">
          You do not need to be a political junkie. If you care about fair elections, good jobs, affordable care, and a country where
          more voices count, you already belong. The tools below — missions, initiatives, polls, wallet, and games — are all optional
          ways to stay involved after your first gift.
        </p>

        <div className="mt-8 rounded-3xl border border-white/10 bg-white/[0.04] p-5 text-left sm:p-6">
          <p className="text-center text-xs uppercase tracking-[0.28em] text-slate-400">Pick your next step</p>
          <p className="mx-auto mt-2 max-w-2xl text-center text-sm leading-relaxed text-slate-500">
            Every link below opens something real you can do today — no insider knowledge required.
          </p>
          <ul className="mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
            {[
              {
                title: "Mission pledges",
                body: "Tell organizers which fights to fund first — voting access, climate jobs, care, and more.",
                href: "/missions",
              },
              {
                title: "Democratic initiatives",
                body: "Publish one idea per account, or back someone else’s — totals show what the crowd wants next.",
                href: "/initiatives",
              },
              {
                title: "Straw poll",
                body: "Cast ballots with your credits — a temperature check, not an official election.",
                href: "/vote/next-president",
              },
              {
                title: "Digital perks & raffles",
                body: "Redeem rewards and enter drawings when the committee drops new SKUs.",
                href: "/wallet",
              },
              {
                title: "Supporter games",
                body: "Optional skill and chance rooms — sign in, bring credits, play responsibly.",
                href: "/casino",
              },
              {
                title: "Live totals board",
                body: "See dollars raised, gift count, and goal progress in one calm, public view.",
                href: "/raised",
              },
              {
                title: "Give now",
                body: "Pick a tier, lock your rate at checkout, and add your name to the meter.",
                href: "/donate",
              },
            ].map((item) => (
              <li key={item.href}>
                <Link
                  href={item.href}
                  className="group flex min-h-[9.5rem] flex-col items-center rounded-2xl border border-white/10 bg-black/30 p-4 text-center transition hover:border-sky-400/40 hover:bg-white/[0.06]"
                >
                  <p className="font-semibold leading-snug text-white">{item.title}</p>
                  <p className="mt-2 flex-1 text-sm leading-relaxed text-slate-500">{item.body}</p>
                  <p className="mt-3 text-xs font-medium text-sky-300 group-hover:text-white">Open →</p>
                </Link>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}