import { Check, X } from "lucide-react";

type Feature = {
  name: string;
  starter: boolean | string;
  standard: boolean | string;
  premium: boolean | string;
};

const features: Feature[] = [
  { name: "Ядро CRM (клиенты, расписание, воронка)", starter: true, standard: true, premium: true },
  { name: "Продажи и реализация", starter: true, standard: true, premium: true },
  { name: "Координатор", starter: true, standard: true, premium: true },
  { name: "Push-уведомления", starter: "5 000/мес", standard: "20 000/мес", premium: "Безлимит" },
  { name: "Веб: Рецепция", starter: true, standard: true, premium: true },
  { name: "Веб: Отчёты", starter: false, standard: true, premium: true },
  { name: "SIP-телефония", starter: false, standard: true, premium: true },
  { name: "Запись звонков", starter: false, standard: false, premium: true },
  { name: "Webhooks + API", starter: false, standard: true, premium: true },
  { name: "Панель админа клуба", starter: false, standard: true, premium: true },
  { name: "Интеграция 1С", starter: false, standard: true, premium: true },
  { name: "Активные пользователи", starter: "до 5", standard: "до 10", premium: "Безлимит" },
  { name: "Клиентская база", starter: "до 500", standard: "до 1 000", premium: "Безлимит" },
  { name: "Изоляция данных", starter: "Shared DB + RLS", standard: "DB-per-tenant", premium: "K8s namespace" },
];

const plans = [
  {
    name: "Стартовая",
    price: "2 990",
    period: "/мес",
    description: "Для небольших студий и начинающих клубов",
    key: "starter" as const,
    popular: false,
    cta: "Начать бесплатно",
  },
  {
    name: "Стандартная",
    price: "7 990",
    period: "/мес",
    description: "Для растущих клубов с командой тренеров",
    key: "standard" as const,
    popular: true,
    cta: "Попробовать бесплатно",
  },
  {
    name: "Премиум",
    price: "19 990",
    period: "/мес",
    description: "Для сетей клубов и франшиз",
    key: "premium" as const,
    popular: false,
    cta: "Связаться с нами",
  },
];

function FeatureValue({ value }: { value: boolean | string }) {
  if (value === true) {
    return <Check size={18} className="text-success mx-auto" />;
  }
  if (value === false) {
    return <X size={18} className="text-gray-300 mx-auto" />;
  }
  return (
    <span className="text-xs font-medium text-gray-700">{value}</span>
  );
}

export default function Pricing() {
  return (
    <section id="pricing" className="py-20 bg-white">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="text-center max-w-2xl mx-auto mb-14">
          <h2 className="text-3xl sm:text-4xl font-bold text-gray-900">
            Прозрачные тарифы
          </h2>
          <p className="mt-4 text-lg text-gray-500">
            Выберите план, который подходит вашему клубу. Все тарифы включают
            14 дней бесплатного периода.
          </p>
        </div>

        {/* Cards - mobile */}
        <div className="lg:hidden grid sm:grid-cols-2 gap-6 mb-8">
          {plans.map((plan) => (
            <div
              key={plan.name}
              className={`rounded-2xl border-2 p-6 relative ${
                plan.popular
                  ? "border-primary shadow-xl shadow-primary/10"
                  : "border-gray-100"
              }`}
            >
              {plan.popular && (
                <div className="absolute -top-3 left-1/2 -translate-x-1/2 bg-primary text-white text-xs font-semibold px-4 py-1 rounded-full">
                  Популярный
                </div>
              )}
              <div className="text-lg font-bold text-gray-900">
                {plan.name}
              </div>
              <div className="mt-2">
                <span className="text-3xl font-bold text-gray-900">
                  {plan.price} &#8381;
                </span>
                <span className="text-gray-500">{plan.period}</span>
              </div>
              <p className="mt-2 text-sm text-gray-500">{plan.description}</p>
              <a
                href="#demo"
                className={`mt-6 block w-full text-center rounded-xl py-3 text-sm font-semibold transition-colors ${
                  plan.popular
                    ? "bg-primary text-white hover:bg-primary-dark"
                    : "bg-gray-100 text-gray-700 hover:bg-gray-200"
                }`}
              >
                {plan.cta}
              </a>
              <ul className="mt-6 space-y-2.5">
                {features.map((f) => {
                  const val = f[plan.key];
                  if (val === false) return null;
                  return (
                    <li
                      key={f.name}
                      className="flex items-center gap-2 text-sm text-gray-600"
                    >
                      <Check size={14} className="text-success shrink-0" />
                      <span>
                        {f.name}
                        {typeof val === "string" && (
                          <span className="text-gray-400 ml-1">({val})</span>
                        )}
                      </span>
                    </li>
                  );
                })}
              </ul>
            </div>
          ))}
        </div>

        {/* Table - desktop */}
        <div className="hidden lg:block overflow-x-auto">
          <table className="w-full">
            <thead>
              <tr>
                <th className="text-left py-4 pr-4 w-1/3" />
                {plans.map((plan) => (
                  <th key={plan.name} className="text-center px-4 py-4">
                    <div className="relative">
                      {plan.popular && (
                        <div className="absolute -top-8 left-1/2 -translate-x-1/2 bg-primary text-white text-xs font-semibold px-4 py-1 rounded-full whitespace-nowrap">
                          Популярный
                        </div>
                      )}
                      <div className="text-lg font-bold text-gray-900">
                        {plan.name}
                      </div>
                      <div className="mt-1">
                        <span className="text-2xl font-bold text-gray-900">
                          {plan.price} &#8381;
                        </span>
                        <span className="text-gray-500 text-sm">
                          {plan.period}
                        </span>
                      </div>
                      <p className="mt-1 text-xs text-gray-400">
                        {plan.description}
                      </p>
                      <a
                        href="#demo"
                        className={`mt-4 inline-block w-full max-w-[200px] text-center rounded-xl py-2.5 text-sm font-semibold transition-colors ${
                          plan.popular
                            ? "bg-primary text-white hover:bg-primary-dark"
                            : "bg-gray-100 text-gray-700 hover:bg-gray-200"
                        }`}
                      >
                        {plan.cta}
                      </a>
                    </div>
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {features.map((f, idx) => (
                <tr
                  key={f.name}
                  className={idx % 2 === 0 ? "bg-gray-50/50" : ""}
                >
                  <td className="py-3 pr-4 text-sm text-gray-700 font-medium">
                    {f.name}
                  </td>
                  {plans.map((plan) => (
                    <td
                      key={plan.name}
                      className="py-3 px-4 text-center"
                    >
                      <FeatureValue value={f[plan.key]} />
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}
