import Link from "next/link";
import { MAIL_PLAN_CARDS } from "@/lib/mail-plan-cards";

function CheckBullet() {
  return (
    <span className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-[#2f6df6] text-[12px] font-bold text-white shadow-[0_8px_18px_rgba(47,109,246,0.22)]">
      ✓
    </span>
  );
}

function ActionLink({
  href,
  children,
  featured = false,
}: {
  href: string;
  children: string;
  featured?: boolean;
}) {
  const className = featured
    ? "om-btn-primary h-[56px] w-full rounded-[16px] px-6 text-[16px]"
    : "om-btn-secondary h-[56px] w-full rounded-[16px] px-6 text-[16px]";

  if (/^https?:\/\//.test(href)) {
    return (
      <a href={href} className={className}>
        {children}
        <span aria-hidden>→</span>
      </a>
    );
  }

  return (
    <Link href={href} className={className}>
      {children}
      <span aria-hidden>→</span>
    </Link>
  );
}

export function LandingPricingSection({
  primaryHref,
}: {
  primaryHref: string;
}) {
  return (
    <section
      id="pricing"
      className="relative mt-12 bg-[radial-gradient(circle_at_top,#f6f9ff_0%,#ffffff_74%)] px-4 py-10 sm:px-8 sm:py-12 lg:px-10 lg:py-14"
    >
      <div className="pointer-events-none absolute -left-[180px] top-[4%] h-[420px] w-[420px] rounded-full bg-[#8db6ff]/18 blur-[140px]" />
      <div className="pointer-events-none absolute -right-[160px] bottom-[2%] h-[360px] w-[360px] rounded-full bg-[#f8c89b]/16 blur-[140px]" />

      <div className="relative z-10 text-center">
        <h2 className="text-balance text-[26px] font-semibold leading-[1.18] tracking-[-0.06em] text-[#111a33] sm:text-[34px] lg:text-[46px]">
          메일 비용은 줄이고
          <br />
          <span className="text-[#2f6df6]">사업에 더 집중하세요</span>
        </h2>
        <p className="mx-auto mt-4 max-w-[760px] text-[15px] leading-7 text-[#5f6e88] sm:mt-5 sm:text-[17px] sm:leading-7">
          무료 플랜에서는 대표 메일 1개로 시작하고, 성장 플랜 전환 후에는
          실제 사용 인원당 3,900원으로 확장하면 됩니다.
        </p>
      </div>

      <div className="relative z-10 mx-auto mt-10 grid max-w-[1060px] gap-5 sm:mt-12 sm:gap-6 lg:grid-cols-3">
        {MAIL_PLAN_CARDS.map((plan) => (
          <article
            key={plan.key}
            className={`relative flex h-full flex-col rounded-[24px] border bg-white/96 p-6 shadow-[0_20px_44px_rgba(15,23,42,0.05)] sm:rounded-[28px] sm:p-7 ${
              plan.featured
                ? "border-[#9dc0ff] shadow-[0_24px_54px_rgba(47,109,246,0.16)]"
                : "border-[#e6edf8]"
            }`}
          >
            {plan.featured ? (
              <div className="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 rounded-full bg-[linear-gradient(135deg,#ff8a1d,#ff6a00)] px-5 py-2 text-[12px] font-bold tracking-[-0.02em] text-white shadow-[0_12px_28px_rgba(255,122,24,0.28)]">
                가장 많이 선택
              </div>
            ) : null}

            <p
              className={`text-[11px] font-bold uppercase tracking-[0.1em] ${
                plan.featured ? "text-[#2f6df6]" : "text-[#8c9ab1]"
              }`}
            >
              {plan.label}
            </p>
            <h3 className="mt-2 text-[26px] font-extrabold tracking-[-0.05em] text-[#061832] sm:text-[28px]">
              {plan.title}
            </h3>
            <p className="mt-2 text-[14px] font-medium leading-6 text-[#6c7a93]">
              {plan.description}
            </p>

            <div className="mt-8 min-h-[104px]">
              <div className="flex items-end gap-2">
                <span
                  className={`leading-none font-black tracking-[-0.08em] ${
                    plan.featured
                      ? "text-[48px] text-[#2f6df6] sm:text-[54px]"
                      : "text-[42px] text-[#061832] sm:text-[46px]"
                  }`}
                >
                  {plan.price}
                </span>
                {plan.priceSuffix ? (
                  <span className="mb-1 text-[14px] font-bold text-[#98a4b9] sm:mb-1.5 sm:text-[16px]">
                    {plan.priceSuffix}
                  </span>
                ) : null}
              </div>
              <p className="mt-3 text-[14px] font-medium text-[#98a4b9]">
                {plan.note}
              </p>
              {plan.featured ? (
                <p className="mt-2 text-[12px] leading-5 text-[#6f7d95]">
                  월·연 구독 시 결제일 기준 자동 갱신되는 정기결제 상품입니다.
                </p>
              ) : null}
            </div>

            <div className="my-6 h-px w-full bg-[#edf2fb]" />

            <ul className="flex flex-1 flex-col gap-3">
              {plan.features.map((feature) => (
                <li
                  key={feature}
                  className="flex items-start gap-3 text-[15px] leading-[1.55] text-[#465468]"
                >
                  <CheckBullet />
                  <span>{feature}</span>
                </li>
              ))}
            </ul>

            {plan.cta ? (
              <div className="mt-8">
                <ActionLink href={primaryHref} featured={plan.featured}>
                  {plan.cta}
                </ActionLink>
              </div>
            ) : null}
          </article>
        ))}
      </div>

      <div className="relative z-10 mx-auto mt-10 max-w-[980px] text-center text-[12px] leading-6 text-[#96a2b6] sm:mt-12 sm:text-[14px] sm:leading-7">
        무료 플랜은 대표자 1명 기준 1계정 제공입니다.
        <br />
        성장 플랜은 대표 메일과 추가 멤버를 포함한 전체 팀 인원 기준으로 월 과금됩니다.
        <br />
        월간·연간 구독권은 해지 시점 기준 미사용 잔여일에 대해 일할 계산 환불이 적용됩니다.
        <br />
        전액 청약철회는 결제 후 7일 이내이며 메일 송수신 이력이 전혀 없을 때만 가능합니다.
        <br />
        도메인 연결, DNS 안내, 대표 메일 생성 흐름은 가입 후 메일 설정 화면에서 바로 이어집니다.
      </div>
    </section>
  );
}