import Link from 'next/link';
import { Sparkles, Zap, Calendar, BarChart3, MessageCircle, Globe, ArrowRight, Check } from 'lucide-react';

const FEATURES = [
  { icon: Zap,           title: 'AI генерация постов',      desc: 'Claude пишет посты под твою нишу и стиль. Тексты, которые хочется читать.' },
  { icon: Calendar,      title: 'Отложенная публикация',     desc: 'Планируй контент на неделю вперёд. Автопостинг в нужное время.' },
  { icon: Globe,         title: 'Telegram, VK, MAX',         desc: 'Один интерфейс для всех платформ. Публикуй везде одновременно.' },
  { icon: Sparkles,      title: 'Авто-черновики',            desc: 'Каждое утро 3 новых поста на проверку. Ты только одобряешь лучшее.' },
  { icon: BarChart3,     title: 'Аналитика канала',          desc: 'Видишь что работает. Охват, реакции, лучшее время для публикации.' },
  { icon: MessageCircle, title: 'Inbox и AI-ответы',         desc: 'Комментарии приходят в одно место. AI предлагает ответы за тебя.' },
];

const PLANS = [
  {
    name: 'Free',     price: 0,    credits: 50,   channels: 1,
    features: ['1 канал', '50 кредитов/мес', 'AI генерация постов', 'Планировщик'],
    cta: 'Начать бесплатно', ctaHref: '/register', accent: false,
  },
  {
    name: 'Starter',  price: 490,  credits: 500,  channels: 2,
    features: ['2 канала', '500 кредитов/мес', 'Авто-черновики', 'Аналитика', 'Inbox'],
    cta: 'Попробовать', ctaHref: '/register', accent: true,
  },
  {
    name: 'Pro',      price: 1490, credits: 2000, channels: 5,
    features: ['5 каналов', '2000 кредитов/мес', 'Все платформы', 'Хештеги AI', 'Опросы TG'],
    cta: 'Выбрать Pro', ctaHref: '/register', accent: false,
  },
  {
    name: 'Business', price: 3990, credits: -1,   channels: -1,
    features: ['Безлимит каналов', 'Безлимит кредитов', 'Приоритетная поддержка', 'API доступ'],
    cta: 'Связаться', ctaHref: 'mailto:hello@zeropost.ru', accent: false,
  },
];

export default function LandingPage() {
  return (
    <div className="min-h-screen bg-background text-text">
      {/* Nav */}
      <nav className="border-b border-border sticky top-0 bg-background/90 backdrop-blur z-50">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 h-14 flex items-center justify-between">
          <Link href="/" className="flex items-center gap-2 font-bold text-lg">
            <Sparkles className="w-5 h-5 text-accent" /> ZeroPost
          </Link>
          <div className="flex items-center gap-3">
            <Link href="/login" className="btn-ghost text-sm px-4 py-2">Войти</Link>
            <Link href="/register" className="btn-primary text-sm px-4 py-2">Попробовать бесплатно</Link>
          </div>
        </div>
      </nav>

      {/* Hero */}
      <section className="max-w-4xl mx-auto px-4 sm:px-6 pt-20 pb-16 text-center">
        <div className="inline-flex items-center gap-2 text-xs text-accent bg-accent/10 px-3 py-1.5 rounded-full mb-6">
          <Sparkles className="w-3.5 h-3.5" /> AI-контент для Telegram и VK
        </div>
        <h1 className="text-4xl sm:text-5xl font-bold leading-tight mb-5">
          Ведите канал на автопилоте.<br />
          <span className="text-accent">AI пишет, ты одобряешь.</span>
        </h1>
        <p className="text-gray-400 text-lg max-w-2xl mx-auto mb-8">
          ZeroPost генерирует посты для Telegram и VK, планирует публикации и отвечает на комментарии.
          Тратьте 10 минут в день вместо 2 часов.
        </p>
        <div className="flex flex-wrap items-center justify-center gap-3">
          <Link href="/register"
            className="btn-primary px-6 py-3 text-base flex items-center gap-2">
            Начать бесплатно <ArrowRight className="w-4 h-4" />
          </Link>
          <Link href="/login" className="btn-ghost px-6 py-3 text-base">
            Уже есть аккаунт
          </Link>
        </div>
        <p className="text-xs text-gray-500 mt-4">50 кредитов бесплатно · Без карты</p>
      </section>

      {/* Features */}
      <section className="max-w-6xl mx-auto px-4 sm:px-6 pb-20">
        <h2 className="text-2xl font-bold text-center mb-10">Что умеет ZeroPost</h2>
        <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
          {FEATURES.map(f => (
            <div key={f.title} className="card p-5">
              <f.icon className="w-8 h-8 text-accent mb-3" />
              <h3 className="font-semibold mb-2">{f.title}</h3>
              <p className="text-sm text-gray-400 leading-relaxed">{f.desc}</p>
            </div>
          ))}
        </div>
      </section>

      {/* How it works */}
      <section className="max-w-4xl mx-auto px-4 sm:px-6 pb-20">
        <h2 className="text-2xl font-bold text-center mb-10">Как это работает</h2>
        <div className="grid gap-6 sm:grid-cols-3">
          {[
            { step: '1', title: 'Добавь канал',     desc: 'Подключи Telegram, VK или MAX. Укажи нишу и стиль.' },
            { step: '2', title: 'AI генерирует',    desc: 'Каждое утро — свежие черновики. Редактируй, одобряй.' },
            { step: '3', title: 'Публикуй в один клик', desc: 'Запланируй или публикуй сейчас. Всё само.' },
          ].map(s => (
            <div key={s.step} className="text-center">
              <div className="w-10 h-10 rounded-full bg-accent/10 text-accent font-bold text-lg flex items-center justify-center mx-auto mb-3">
                {s.step}
              </div>
              <h3 className="font-semibold mb-2">{s.title}</h3>
              <p className="text-sm text-gray-400">{s.desc}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Pricing */}
      <section className="max-w-6xl mx-auto px-4 sm:px-6 pb-20">
        <h2 className="text-2xl font-bold text-center mb-2">Тарифы</h2>
        <p className="text-gray-400 text-center text-sm mb-10">Начни бесплатно, масштабируй по мере роста</p>
        <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
          {PLANS.map(plan => (
            <div key={plan.name} className={`card p-5 flex flex-col ${plan.accent ? 'border-accent bg-accent/5' : ''}`}>
              {plan.accent && (
                <div className="text-xs text-accent font-medium mb-2">✨ Популярный</div>
              )}
              <div className="font-bold text-lg">{plan.name}</div>
              <div className="text-3xl font-bold mt-1 mb-1">
                {plan.price === 0 ? <span className="text-accent">0₽</span> : `${plan.price}₽`}
                {plan.price > 0 && <span className="text-sm font-normal text-gray-500">/мес</span>}
              </div>
              <div className="text-xs text-gray-500 mb-4">
                {plan.credits === -1 ? '∞ кредитов' : `${plan.credits} кредитов/мес`}
              </div>
              <ul className="space-y-2 flex-1 mb-5">
                {plan.features.map(f => (
                  <li key={f} className="text-sm text-gray-300 flex items-center gap-2">
                    <Check className="w-3.5 h-3.5 text-green-400 shrink-0" /> {f}
                  </li>
                ))}
              </ul>
              <Link href={plan.ctaHref}
                className={`py-2.5 px-4 rounded-lg text-sm font-medium text-center transition-colors ${
                  plan.accent ? 'btn-primary' : 'btn-ghost border border-border'
                }`}>
                {plan.cta}
              </Link>
            </div>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section className="max-w-2xl mx-auto px-4 sm:px-6 pb-20 text-center">
        <h2 className="text-3xl font-bold mb-4">Готовы попробовать?</h2>
        <p className="text-gray-400 mb-6">50 бесплатных кредитов. Без карты. Настройка за 5 минут.</p>
        <Link href="/register" className="btn-primary px-8 py-3 text-base inline-flex items-center gap-2">
          Создать аккаунт <ArrowRight className="w-4 h-4" />
        </Link>
      </section>

      {/* Footer */}
      <footer className="border-t border-border py-8">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 flex flex-wrap items-center justify-between gap-4 text-sm text-gray-500">
          <div className="flex items-center gap-2">
            <Sparkles className="w-4 h-4 text-accent" />
            <span className="font-medium text-gray-300">ZeroPost</span>
            <span>· AI-автоматизация контента</span>
          </div>
          <div className="flex gap-4">
            <Link href="/login"    className="hover:text-gray-300">Войти</Link>
            <Link href="/register" className="hover:text-gray-300">Регистрация</Link>
            <a href="mailto:hello@zeropost.ru" className="hover:text-gray-300">Контакты</a>
          </div>
        </div>
      </footer>
    </div>
  );
}