import React from 'react';
import { HelpCircle, ArrowRight } from 'lucide-react';

const Help: React.FC = () => {
    return (
        <div style={{ height: '100%', overflowY: 'auto', padding: '2rem' }}>
          <div style={{ maxWidth: '1000px', margin: '0 auto', paddingBottom: '4rem' }}>
            <div style={{ marginBottom: '2rem' }}>
                <h1 style={{ fontSize: '2.5rem', fontWeight: 800, margin: '0 0 0.5rem 0', display: 'flex', alignItems: 'center', gap: '1rem', color: '#fff' }}>
                    <HelpCircle color="var(--accent-blue)" size={36} /> Centrum Pomocy
                </h1>
                <p style={{ color: '#f3f4f6', fontSize: '1.1rem' }}>Instrukcja obsługi krok po kroku oraz najczęściej zadawane pytania (FAQ).</p>
            </div>

            <div className="glass-card" style={{ marginBottom: '3rem' }}>
                <h2 style={{ fontSize: '1.4rem', borderBottom: '1px solid rgba(255,255,255,0.1)', paddingBottom: '1rem', marginBottom: '1.5rem', color: '#34d399' }}>
                    Instrukcja obsługi krok po kroku
                </h2>
                
                <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
                    <div>
                        <h3 style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '1.1rem', color: '#fff' }}><span style={{ color: '#60a5fa', fontWeight: 'bold' }}>Krok 1:</span> Dekompozycja i Profilowanie (Wizard & AdvancedMatcher)</h3>
                        <p style={{ color: '#e5e7eb', lineHeight: '1.6', margin: '0.5rem 0 0 0' }}>
                            Przejdź do zakładki Nowy Projekt. Wirtualny <strong>WizardAgent</strong> pomoże Ci w dekompozycji pomysłu poprzez zadawanie doprecyzowujących pytań (Human-in-the-Loop). Następnie <strong>AdvancedMatcherAgent</strong> użyje lokalnej grafowej bazy danych (GraphRAG + Neo4j) do weryfikacji Twojego statusu MŚP oraz powiązań kapitałowych w oparciu o aktualne dane KRS. Dzięki temu system dopasuje wyłącznie te programy, do których realnie się kwalifikujesz.
                        </p>
                    </div>

                    <div>
                        <h3 style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '1.1rem', color: '#fff' }}><span style={{ color: '#60a5fa', fontWeight: 'bold' }}>Krok 2:</span> Generacja Wniosku (GeneratorAgent)</h3>
                        <p style={{ color: '#e5e7eb', lineHeight: '1.6', margin: '0.5rem 0 0 0' }}>
                            Po zatwierdzeniu dopasowania, <strong>GeneratorAgent</strong> (wykorzystujący Ensemble LLM: Gemini 2.5 Pro / Grok 4.3) zacznie tworzyć poszczególne sekcje wniosku, wliczając w to bogato sformatowany tekst (Markdown, tabele, listy). Jeśli brakuje mu kluczowych danych, zawsze dopyta Cię przed wygenerowaniem treści, dbając o zerową tolerancję dla halucynacji.
                        </p>
                    </div>

                    <div>
                        <h3 style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '1.1rem', color: '#fff' }}><span style={{ color: '#60a5fa', fontWeight: 'bold' }}>Krok 3:</span> Audyt Sekcyjny i Całościowy (AuditorAgent)</h3>
                        <p style={{ color: '#e5e7eb', lineHeight: '1.6', margin: '0.5rem 0 0 0' }}>
                            Każda sekcja podlega ocenie przez wirtualnego audytora i <strong>Holistic Critic</strong>, który bada kontekst całego dokumentu (np. zgodność budżetu z zadaniami oraz weryfikacja zasady DNSH i pomocy publicznej). Jeśli pewność wygenerowanej sekcji spadnie poniżej 90%, system automatycznie zasugeruje poprawki.
                        </p>
                    </div>

                    <div>
                        <h3 style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '1.1rem', color: '#fff' }}><span style={{ color: '#60a5fa', fontWeight: 'bold' }}>Krok 4:</span> Automatyczna Poprawa (AutofixAgent)</h3>
                        <p style={{ color: '#e5e7eb', lineHeight: '1.6', margin: '0.5rem 0 0 0' }}>
                            Jeśli audytor zgłosi uwagi, do gry wchodzi <strong>AutofixAgent</strong>. Dokona on gruntownej poprawy tekstu (np. wzmocni argumentację, przepisze akapity), opierając się wyłącznie na twardych danych i regulaminach naborów (weryfikowanych przez Temporal GraphRAG).
                        </p>
                    </div>

                    <div>
                        <h3 style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '1.1rem', color: '#fff' }}><span style={{ color: '#60a5fa', fontWeight: 'bold' }}>Krok 5:</span> Ostateczna Weryfikacja (RedTeamCriticAgent) i Eksport</h3>
                        <p style={{ color: '#e5e7eb', lineHeight: '1.6', margin: '0.5rem 0 0 0' }}>
                            Zanim wyeksportujesz wniosek, musi on uzyskać akceptację agenta <strong>Red Team Critic</strong>, który weryfikuje odporność dokumentu na potencjalne błędy i spójność prawną. Po uzyskaniu zielonego światła i osiągnięciu odpowiedniej objętości (min. 5000 znaków), wniosek może zostać bezpiecznie wyeksportowany do PDF/DOCX.
                        </p>
                    </div>
                </div>
            </div>

            <div className="glass-card" style={{ marginBottom: '3rem' }}>
                <h2 style={{ fontSize: '1.4rem', borderBottom: '1px solid rgba(255,255,255,0.1)', paddingBottom: '1rem', marginBottom: '1.5rem', color: '#c4b5fd' }}>
                    Często Zadawane Pytania (FAQ)
                </h2>

                <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
                    <div>
                        <h4 style={{ fontSize: '1.05rem', margin: '0 0 0.4rem 0', color: '#fff', display: 'flex', alignItems: 'flex-start', gap: '0.5rem' }}>
                            <ArrowRight size={18} color="var(--accent-blue)" style={{ flexShrink: 0, marginTop: '2px' }}/>
                            1. Czy instytucje takie jak PARP lub NCBR akceptują wnioski wspomagane przez sztuczną inteligencję?
                        </h4>
                        <p style={{ color: '#e5e7eb', margin: '0 0 0 1.8rem', lineHeight: '1.6' }}>Tak. Instytucje finansujące nie zabraniają korzystania z zaawansowanych narzędzi. Oceniających interesuje przede wszystkim rzetelność danych, prawda biznesowa oraz innowacyjność Twojego projektu. AI to potężne narzędzie pomagające ubrać idee w sztywne ramy biurokratyczne.</p>
                    </div>
                    <div>
                        <h4 style={{ fontSize: '1.05rem', margin: '0 0 0.4rem 0', color: '#fff', display: 'flex', alignItems: 'flex-start', gap: '0.5rem' }}>
                            <ArrowRight size={18} color="var(--accent-blue)" style={{ flexShrink: 0, marginTop: '2px' }}/>
                            2. Co mam zrobić, gdy moduł weryfikacji (Agent Critic) wystawi mi niską ocenę?
                        </h4>
                        <p style={{ color: '#e5e7eb', margin: '0 0 0 1.8rem', lineHeight: '1.6' }}>Nie traktuj tego jako porażki – najczęściej wynika z faktu, że system otrzymał od Ciebie za mało danych liczbowych. Dodaj parametry, procenty i kwoty, a następnie uruchom weryfikację ponownie.</p>
                    </div>
                    <div>
                        <h4 style={{ fontSize: '1.05rem', margin: '0 0 0.4rem 0', color: '#fff', display: 'flex', alignItems: 'flex-start', gap: '0.5rem' }}>
                            <ArrowRight size={18} color="var(--accent-blue)" style={{ flexShrink: 0, marginTop: '2px' }}/>
                            3. Skąd system wie o zmianach w naborach i terminów?
                        </h4>
                        <p style={{ color: '#e5e7eb', margin: '0 0 0 1.8rem', lineHeight: '1.6' }}>Systemy są zintegrowane poprzez bezpieczne API z publicznymi bazami danych. Zawsze jednak zachęcamy do ostatecznego weryfikowania godzin zamknięcia naborów na stronach operatorów.</p>
                    </div>
                    <div>
                        <h4 style={{ fontSize: '1.05rem', margin: '0 0 0.4rem 0', color: '#fff', display: 'flex', alignItems: 'flex-start', gap: '0.5rem' }}>
                            <ArrowRight size={18} color="var(--accent-blue)" style={{ flexShrink: 0, marginTop: '2px' }}/>
                            4. Czy platforma daje 100% gwarancji otrzymania dotacji?
                        </h4>
                        <p style={{ color: '#e5e7eb', margin: '0 0 0 1.8rem', lineHeight: '1.6' }}>Nie. System maksymalizuje Twoje szanse poprzez drastyczną eliminację błędów logicznych, jednak ostateczna ocena spoczywa na ekspertach instytucji dysponujących środkami.</p>
                    </div>
                    <div>
                        <h4 style={{ fontSize: '1.05rem', margin: '0 0 0.4rem 0', color: '#fff', display: 'flex', alignItems: 'flex-start', gap: '0.5rem' }}>
                            <ArrowRight size={18} color="var(--accent-blue)" style={{ flexShrink: 0, marginTop: '2px' }}/>
                            5. Gdzie znajdę integrację z orzecznictwem EUR-Lex?
                        </h4>
                        <p style={{ color: '#e5e7eb', margin: '0 0 0 1.8rem', lineHeight: '1.6' }}>Funkcja integracji z bazą prawną Unii Europejskiej (EUR-Lex) jest obecnie we wczesnej fazie testów i dostępna z poziomu panelu administratora (Diagnostics). Służy do pogłębiania wektoryzacji bazy RAG o akty prawne powiązane z pomocą publiczną.</p>
                    </div>
                    <div>
                        <h4 style={{ fontSize: '1.05rem', margin: '0 0 0.4rem 0', color: '#fff', display: 'flex', alignItems: 'flex-start', gap: '0.5rem' }}>
                            <ArrowRight size={18} color="var(--accent-blue)" style={{ flexShrink: 0, marginTop: '2px' }}/>
                            6. Czy w przypadku awarii prądu stracę napisany wniosek?
                        </h4>
                        <p style={{ color: '#d4d4d8', margin: '0 0 0 1.8rem', lineHeight: '1.6' }}>Nie. Platforma działa w bezpiecznym ekosystemie chmurowym i jest wyposażona w mechanizmy automatycznego zapisu projektu.</p>
                    </div>
                </div>
            </div>

            <div style={{ textAlign: 'center', color: '#d4d4d8' }}>
                Nie znalazłeś odpowiedzi na swoje pytanie? Skontaktuj się z naszym <strong>Supportem</strong> z poziomu panelu Ustawień.
            </div>
          </div>
        </div>
    );
};

export default Help;