// --- GLOBAL LANDING COMPONENT   ---
const { FileText, CheckCircle, Zap, Shield } = window; // Using global icons if needed, or define local SVGs

window.LandingPage = ({ onStart }) => {
    return (
        <div className="min-h-screen bg-white font-sans text-[#2d3440]">
            {/* Header */}
            <header className="max-w-7xl mx-auto px-6 py-6 flex justify-between items-center">
                <div className="flex items-center gap-2 text-blue-600 font-black text-xl tracking-tight">
                    <FileText size={28} />
                    <span>KP Generator</span>
                </div>
                <button onClick={onStart} className="text-sm font-bold text-gray-600 hover:text-blue-600 transition">
                    Войти
                </button>
            </header>

            {/* Hero Section */}
            <section className="max-w-7xl mx-auto px-6 py-16 md:py-24 text-center">
                <h1 className="text-4xl md:text-6xl font-black mb-6 leading-tight">
                    Создавайте коммерческие <br className="hidden md:block" />
                    <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600">предложения за 30 секунд</span>
                </h1>
                <p className="text-lg md:text-xl text-gray-500 mb-10 max-w-2xl mx-auto leading-relaxed">
                    Профессиональный инструмент для менеджеров продаж. Загружайте прайсы, считайте скидки и отправляйте PDF клиентам в один клик.
                </p>
                <button onClick={onStart} className="bg-blue-600 text-white px-8 py-4 rounded-xl font-bold text-lg shadow-xl shadow-blue-600/30 hover:bg-blue-700 hover:scale-105 transition-all transform">
                    Создать первое КП бесплатно
                </button>
                <div className="mt-4 text-sm text-gray-400">Без регистрации карты • 14 дней пробный период</div>
                
                {/* Hero Image / Mockup */}
                <div className="mt-16 relative mx-auto max-w-5xl rounded-2xl shadow-2xl border border-gray-200 overflow-hidden bg-gray-50">
                    <div className="absolute top-0 left-0 w-full h-8 bg-gray-100 border-b border-gray-200 flex items-center px-4 gap-2">
                        <div className="w-3 h-3 rounded-full bg-red-400"></div>
                        <div className="w-3 h-3 rounded-full bg-yellow-400"></div>
                        <div className="w-3 h-3 rounded-full bg-green-400"></div>
                    </div>
                    <div className="pt-8 pb-4 px-4 bg-white">
                        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 opacity-50 blur-[1px] pointer-events-none select-none">
                             <div className="h-32 bg-gray-100 rounded-lg"></div>
                             <div className="h-32 bg-gray-100 rounded-lg"></div>
                             <div className="h-32 bg-gray-100 rounded-lg"></div>
                        </div>
                        <div className="absolute inset-0 flex items-center justify-center">
                            <div className="bg-white/80 backdrop-blur-sm px-8 py-4 rounded-xl border border-gray-200 shadow-lg">
                                <span className="font-bold text-gray-800 flex items-center gap-2">🚀 Простой и быстрый интерфейс</span>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* Features */}
            <section className="bg-gray-50 py-20">
                <div className="max-w-7xl mx-auto px-6">
                    <h2 className="text-3xl font-bold text-center mb-16">Почему выбирают нас?</h2>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
                        <div className="bg-white p-8 rounded-2xl shadow-sm border border-gray-100 hover:shadow-md transition">
                            <div className="w-12 h-12 bg-blue-100 text-blue-600 rounded-lg flex items-center justify-center mb-6"><Zap size={24}/></div>
                            <h3 className="text-xl font-bold mb-3">Мгновенный PDF</h3>
                            <p className="text-gray-500">Автоматическая генерация красивых PDF документов с вашим логотипом и контактами.</p>
                        </div>
                        <div className="bg-white p-8 rounded-2xl shadow-sm border border-gray-100 hover:shadow-md transition">
                            <div className="w-12 h-12 bg-green-100 text-green-600 rounded-lg flex items-center justify-center mb-6"><CheckCircle size={24}/></div>
                            <h3 className="text-xl font-bold mb-3">Интеграция с 1С</h3>
                            <p className="text-gray-500">Копируйте данные из Excel или 1С и вставляйте их прямо в редактор. Умный парсинг сделает всё сам.</p>
                        </div>
                        <div className="bg-white p-8 rounded-2xl shadow-sm border border-gray-100 hover:shadow-md transition">
                            <div className="w-12 h-12 bg-purple-100 text-purple-600 rounded-lg flex items-center justify-center mb-6"><Shield size={24}/></div>
                            <h3 className="text-xl font-bold mb-3">Безопасное облако</h3>
                            <p className="text-gray-500">Ваши коммерческие предложения сохраняются в облаке и доступны с любого устройства.</p>
                        </div>
                    </div>
                </div>
            </section>

            {/* Footer */}
            <footer className="bg-white border-t border-gray-100 py-12">
                <div className="max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-6">
                    <div className="text-sm text-gray-500">
                        &copy; {new Date().getFullYear()} KP Generator. Все права защищены.
                    </div>
                    <div className="flex gap-6">
                        <a href="#" className="text-gray-400 hover:text-blue-600 transition">Политика конфиденциальности</a>
                        <a href="#" className="text-gray-400 hover:text-blue-600 transition">Поддержка</a>
                    </div>
                </div>
            </footer>
        </div>
    );
};