import Link from 'next/link';
import { ArrowUpRight } from 'lucide-react';
import Reveal from '../Reveal.jsx';
import SectionHeading from '../SectionHeading.jsx';

export default function Promotions({ promotions, limit, moreHref, showMailNote = false }) {
  if (promotions.length === 0) return null;
  const list = limit ? promotions.slice(0, limit) : promotions;

  return (
    <section id="promotions" className="py-20 bg-slate-100/60 dark:bg-slate-950/40">
      <div className="max-w-6xl mx-auto px-5 sm:px-8">
        <SectionHeading
          eyebrow="promotions --active"
          title="Акции и специальные предложения"
          desc="Актуальные сроки и условия уточняйте у менеджера при обращении."
        />
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
          {list.map((p, i) => (
            <Reveal key={p.id} delay={i * 60}>
              <div className="h-full rounded-lg border p-5 flex flex-col bg-white border-slate-200 dark:bg-slate-900 dark:border-slate-800">
                <h3 className="font-bold mb-2 font-display text-[15px]">{p.title}</h3>
                <div className="flex items-baseline gap-2 mb-3">
                  <span className="text-xl font-bold text-emerald-500 font-mono">{p.price_text}</span>
                  {p.old_price_text && (
                    <span className="text-sm line-through text-slate-400 dark:text-slate-600 font-mono">
                      {p.old_price_text}
                    </span>
                  )}
                </div>
                <p className="text-sm flex-1 text-slate-600 dark:text-slate-400">{p.description}</p>
                <Link
                  href="/kontakty"
                  className="mt-4 text-sm text-emerald-500 font-medium inline-flex items-center gap-1 hover:gap-2 transition-all"
                >
                  Забронировать <ArrowUpRight className="h-3.5 w-3.5" />
                </Link>
              </div>
            </Reveal>
          ))}
        </div>

        {moreHref && (
          <Reveal className="mt-8">
            <Link href={moreHref} className="text-sm text-emerald-500 font-medium hover:underline">
              Все акции →
            </Link>
          </Reveal>
        )}

        {showMailNote && (
          <Reveal className="mt-8">
            <div className="rounded-lg border p-5 bg-white border-slate-200 dark:bg-slate-900 dark:border-slate-800">
              <p className="text-sm font-medium mb-1">В чём разница между акцией и обычной услугой на почтовый сервер?</p>
              <p className="text-xs text-slate-500 dark:text-slate-400">
                Услуги «Почтовый сервер (ваше/наше оборудование)» из прайс-листа — это базовое развёртывание или
                аренда+администрирование без пакета доп. настроек. Акция «Почтовый сервер под ключ» — это
                отдельный, более полный пакет: настройка на вашем оборудовании + SPF/DKIM/DMARC, антиспам,
                веб-почта и 3 месяца сопровождения включены в стоимость — по акционной цене вместо отдельной оплаты
                каждого пункта.
              </p>
            </div>
          </Reveal>
        )}
      </div>
    </section>
  );
}