PLOT. 패키지 할인 요금표 3단

const TIERS = [
  {
    name: "단품",
    desc: "필요한 제작물 하나만 먼저 시작하고 싶을 때",
    discount: 0,
    features: ["명함 25,000원부터", "홈페이지 290,000원부터", "AI CI 제안 · 브랜드 팜플렛 무료"],
    cta: "무료로 시작",
    style: "dark",
  },
  {
    name: "3종 패키지",
    desc: "명함, 홈페이지, 소개서처럼 꼭 필요한 것을 함께",
    discount: 10,
    features: ["원하는 제작물 3종 선택", "모든 제작물 같은 브랜드 키트", "2종만 함께해도 5% 할인"],
    cta: "패키지 구성하기",
    style: "highlight",
  },
  {
    name: "올인원 4종",
    desc: "명함, 홈페이지, 사업소개서, 사원증 전부",
    discount: 15,
    features: ["4종 시작가 합계 725,000원", "홈페이지 호스팅 월 15,000원부터", "AI CI 제안 · 브랜드 팜플렛 무료"],
    cta: "올인원 시작하기",
    style: "plain",
  },
] as const;

/** PLOT. 요금: 연회색 바탕, 왼쪽 정렬 제목, 흰 카드 3개(가운데 추천 카드는 블루 2px 테두리). 숫자는 제작비 할인율. */
export default function Pricing() {
  return (
    <section id="pricing" className="w-full scroll-mt-24 bg-[#F4F6FA] px-5 py-28 text-[#020A22]">
      <div className="mx-auto max-w-6xl">
        <p className="text-lg font-medium text-[#0055FF]">요금 안내</p>
        <h2 className="mt-3 text-[30px] leading-tight font-semibold tracking-[-0.04em] text-[#1B2233] md:text-[46px]">
          함께 맡길수록
          <br />
          더 가볍게 시작하세요.
        </h2>
        <div className="mt-12 grid gap-5 md:grid-cols-3">
          {TIERS.map((t) => (
            <div key={t.name} className={`rounded-[26px] ${t.style === "highlight" ? "bg-[#0055FF] p-[2px]" : ""}`}>
              <div className="flex h-full flex-col rounded-[24px] bg-white p-8 shadow-[0_8px_30px_rgba(2,10,34,0.06)]">
                <h3 className={`text-[22px] font-semibold ${t.style === "highlight" ? "text-[#0055FF]" : "text-[#1B2233]"}`}>
                  {t.style === "highlight" && <span aria-hidden>* </span>}
                  {t.name}
                </h3>
                <p className="mt-2 border-b border-black/10 pb-5 text-sm break-keep text-[#020A22]/55">{t.desc}</p>
                <div className="mt-6 text-[44px] font-semibold tracking-[-0.03em] text-[#1B2233] tabular-nums">
                  {t.discount}%<span className="ml-1.5 text-base font-medium text-[#020A22]/55">제작비 할인</span>
                </div>
                <ul className="mt-6 flex-1 space-y-2.5 text-[15px] text-[#0055FF]">
                  {t.features.map((f) => (
                    <li key={f} className="flex gap-2">
                      <svg viewBox="0 0 24 24" className="mt-0.5 size-4 shrink-0" fill="currentColor" aria-hidden="true">
                        <path d="M4.29 11.29a1 1 0 0 1 1.42 0L10 15.59l8.29-8.3a1 1 0 0 1 1.42 1.42l-9 9a1 1 0 0 1-1.42 0l-5-5a1 1 0 0 1 0-1.42Z" />
                      </svg>
                      {f}
                    </li>
                  ))}
                </ul>
                <a
                  href="#"
                  className={`mt-8 rounded-full py-3.5 text-center font-semibold transition-colors ${
                    t.style === "dark" ? "bg-[#020A22] text-white hover:bg-black" : "bg-[#F4F6FA] text-[#1B2233] hover:bg-[#EBF2FF]"
                  }`}
                >
                  {t.cta}
                </a>
              </div>
            </div>
          ))}
        </div>
        <p className="mt-5 text-sm text-[#020A22]/50">* 부가세 별도. 호스팅 월 요금은 패키지 할인 대상이 아닙니다.</p>
      </div>
    </section>
  );
}