import { Bot, MessageCircle, Sparkles } from 'lucide-react';
import Reveal from '../Reveal.jsx';

export default function AccountPromo() {
  return (
    <section className="max-w-6xl mx-auto px-5 sm:px-8 pb-16">
      <Reveal>
        <div className="rounded-lg border border-emerald-200 bg-emerald-50 dark:bg-emerald-950/30 dark:border-emerald-900 p-6 sm:p-8 flex flex-col sm:flex-row items-start sm:items-center gap-6 justify-between">
          <div>
            <p className="text-xs uppercase tracking-widest text-emerald-600 dark:text-emerald-400 mb-2 font-mono">
              &gt; account --perks
            </p>
            <h3 className="font-bold text-lg mb-2 font-display">Личный кабинет для клиентов</h3>
            <ul className="text-sm text-slate-600 dark:text-slate-400 space-y-1">
              <li className="flex items-center gap-2">
                <Bot className="h-4 w-4 text-emerald-500 flex-shrink-0" /> ИИ-ассистент отвечает на вопросы 24/7
              </li>
              <li className="flex items-center gap-2">
                <MessageCircle className="h-4 w-4 text-emerald-500 flex-shrink-0" /> Личная переписка с нашей командой
              </li>
              <li className="flex items-center gap-2">
                <Sparkles className="h-4 w-4 text-emerald-500 flex-shrink-0" /> Акции и предложения специально для вас
              </li>
            </ul>
          </div>
          <div className="flex gap-3 flex-shrink-0">
            {/* /account живёт в отдельном приложении (Vite), поэтому обычная ссылка, а не next/link */}
            <a
              href="/account/register"
              className="px-4 py-2.5 rounded-md bg-emerald-500 text-white text-sm font-medium hover:bg-emerald-600 transition-colors whitespace-nowrap"
            >
              Зарегистрироваться
            </a>
            <a
              href="/account"
              className="px-4 py-2.5 rounded-md text-sm font-medium border border-slate-300 dark:border-slate-700 hover:bg-white dark:hover:bg-slate-900 transition-colors whitespace-nowrap"
            >
              Войти
            </a>
          </div>
        </div>
      </Reveal>
    </section>
  );
}