import React, { useState, useMemo } from 'react';
import { X, Search, BookOpen, FileText, ChevronRight, ChevronDown, ExternalLink, Wrench, Droplets, Thermometer, CheckSquare, Shield, Layers, Gauge, Ruler, Calculator } from 'lucide-react';

interface TechnicalManualProps {
    isOpen: boolean;
    onClose: () => void;
}

interface ManualSection {
    id: string;
    title: string;
    icon: React.ElementType;
    content: React.ReactNode;
    keywords: string[];
}

export const TechnicalManual: React.FC<TechnicalManualProps> = ({ isOpen, onClose }) => {
    const [searchTerm, setSearchTerm] = useState('');
    const [activeSection, setActiveSection] = useState<string | null>('intro');
    const [showIndex, setShowIndex] = useState(false);

    // Seções do Manual
    const sections: ManualSection[] = useMemo(() => [
        {
            id: 'intro',
            title: 'Introdução ao GPI',
            icon: BookOpen,
            keywords: ['introdução', 'gpi', 'sistema', 'gestão', 'pintura', 'industrial'],
            content: (
                <div className="space-y-6">
                    <img
                        src="/GPI-processos_geral.png"
                        alt="Processos GPI"
                        className="w-full rounded-2xl border border-border/40 shadow-lg"
                    />
                    <h3 className="text-xl font-black text-primary">Bem-vindo ao GPI</h3>
                    <p className="text-text-secondary leading-relaxed">
                        O <strong>GPI (Gestão de Pintura Industrial)</strong> é um sistema completo para gerenciamento de obras,
                        projetos e processos de pintura industrial em estruturas metálicas. O sistema permite controlar desde
                        a preparação da superfície até a inspeção final de aderência e espessura.
                    </p>

                    <div className="p-4 bg-primary/5 rounded-xl border border-primary/20">
                        <h4 className="font-bold text-primary mb-2">Módulos Disponíveis:</h4>
                        <ul className="space-y-2 text-sm text-text-secondary">
                            <li className="flex items-center gap-2"><ChevronRight size={14} className="text-primary" /> <strong>Obras & Projetos:</strong> Gestão de projetos e cronogramas</li>
                            <li className="flex items-center gap-2"><ChevronRight size={14} className="text-primary" /> <strong>Peças:</strong> Cadastro e acompanhamento de peças</li>
                            <li className="flex items-center gap-2"><ChevronRight size={14} className="text-primary" /> <strong>Esquemas:</strong> Definição de esquemas de pintura</li>
                            <li className="flex items-center gap-2"><ChevronRight size={14} className="text-primary" /> <strong>Inspeções:</strong> Registro e controle de inspeções</li>
                            <li className="flex items-center gap-2"><ChevronRight size={14} className="text-primary" /> <strong>Biblioteca Técnica:</strong> Fichas técnicas de tintas</li>
                            <li className="flex items-center gap-2"><ChevronRight size={14} className="text-primary" /> <strong>Estudo de Rendimento:</strong> Cálculo de consumo de tintas</li>
                            <li className="flex items-center gap-2"><ChevronRight size={14} className="text-primary" /> <strong>Calculadora:</strong> Utilitários técnicos e conversões</li>
                        </ul>
                    </div>
                </div>
            )
        },
        {
            id: 'calculator',
            title: 'Calculadora',
            icon: Calculator,
            keywords: ['calculadora', 'conversão', 'espessura', 'consumo', 'custo', 'bicos', 'airless', 'ambiente'],
            content: (
                <div className="space-y-6">
                    <h3 className="text-xl font-black text-primary">Ferramentas & Cálculos</h3>
                    <p className="text-text-secondary leading-relaxed">
                        O módulo de Calculadora oferece um conjunto de utilitários técnicos essenciais para o dia a dia
                        do inspetor e gestor de pintura, centralizando conversões e cálculos complexos.
                    </p>

                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div className="p-4 bg-surface-soft rounded-xl border border-border/40">
                            <h4 className="font-bold text-text-main mb-2">1. Conversões</h4>
                            <p className="text-sm text-text-secondary">
                                Conversor preciso entre unidades comuns na indústria:
                                <br />• Microns (μm) ↔ Mils (milésimos de polegada)
                                <br />• PSI ↔ Bar (Pressão)
                                <br />• Celsius (°C) ↔ Fahrenheit (°F)
                            </p>
                        </div>

                        <div className="p-4 bg-surface-soft rounded-xl border border-border/40">
                            <h4 className="font-bold text-text-main mb-2">2. Espessura de Película</h4>
                            <p className="text-sm text-text-secondary">
                                Calculadoras para determinar:
                                <br />• <strong>EPS Estimada:</strong> Baseado na EPU e % Sólidos.
                                <br />• <strong>EPU Necessária:</strong> Quanto aplicar úmido para atingir a espessura seca desejada.
                            </p>
                        </div>

                        <div className="p-4 bg-surface-soft rounded-xl border border-border/40">
                            <h4 className="font-bold text-text-main mb-2">3. Consumo & Custo</h4>
                            <p className="text-sm text-text-secondary">
                                Ferramenta rápida para estimar tinta necessária:
                                <br />• Cálculo por Área (m²) e Espessura.
                                <br />• Inclusão de fator de perda (Eficiência).
                                <br />• Estimativa de custo total por demão.
                            </p>
                        </div>

                        <div className="p-4 bg-surface-soft rounded-xl border border-border/40">
                            <h4 className="font-bold text-text-main mb-2">4. Bicos Airless</h4>
                            <p className="text-sm text-text-secondary">
                                Decodificador de códigos de bicos airless (ex: 517):
                                <br />• <strong>Ângulo do leque:</strong> (1º digito × 10) graus.
                                <br />• <strong>Vazão/Orifício:</strong> (2 últimos digitos) milésimos.
                                <br />• Recomendação de uso por tipo de tinta.
                            </p>
                        </div>

                        <div className="p-4 bg-surface-soft rounded-xl border border-border/40 md:col-span-2">
                            <h4 className="font-bold text-text-main mb-2">5. Condições Ambientais</h4>
                            <p className="text-sm text-text-secondary">
                                Verificação rápida de conformidade climática:
                                <br />• Cálculo automático do <strong>Ponto de Orvalho</strong> (baseado em Temp e UR).
                                <br />• Verificação da regra "Temperatura da Superfície {'>'} Ponto de Orvalho + 3°C".
                            </p>
                        </div>
                    </div>
                </div>
            )
        },
        {
            id: 'yield-study',
            title: 'Estudo de Rendimento',
            icon: Gauge,
            keywords: ['rendimento', 'consumo', 'tinta', 'cálculo', 'peso', 'área', 'litros', 'eficiência'],
            content: (
                <div className="space-y-6">
                    <h3 className="text-xl font-black text-primary">Cálculo de Consumo de Tintas</h3>
                    <p className="text-text-secondary leading-relaxed">
                        O módulo de Estudo de Rendimento permite calcular com precisão a quantidade de tinta necessária
                        para um projeto, considerando dois métodos de cálculo: por peso (toneladas) e por área (m²).
                    </p>

                    <div className="grid grid-cols-2 gap-4">
                        <div className="p-4 bg-primary/5 rounded-xl border border-primary/20">
                            <h4 className="font-bold text-primary mb-2">Cálculo por Peso</h4>
                            <p className="text-xs text-text-muted">Baseado na taxa histórica (L/t) multiplicada pelo peso em toneladas.</p>
                            <code className="block mt-2 text-xs bg-surface p-2 rounded">
                                Consumo = Peso × Taxa × (1 / Eficiência)
                            </code>
                        </div>
                        <div className="p-4 bg-blue-500/5 rounded-xl border border-blue-500/20">
                            <h4 className="font-bold text-blue-500 mb-2">Cálculo por Área</h4>
                            <p className="text-xs text-text-muted">Baseado na área e espessura de película seca (DFT).</p>
                            <code className="block mt-2 text-xs bg-surface p-2 rounded">
                                Consumo = (Área × DFT) / (SV × 10)
                            </code>
                        </div>
                    </div>

                    <div className="p-4 bg-amber-500/10 rounded-xl border border-amber-500/30">
                        <h4 className="font-bold text-amber-600 mb-2">⚠️ Importante: Eficiência</h4>
                        <p className="text-sm text-text-secondary">
                            A eficiência (ex: 80%) representa as perdas no processo de aplicação. Um fator de perda
                            é aplicado automaticamente aos cálculos: se eficiência = 80%, o consumo real será 25% maior que o teórico.
                        </p>
                    </div>
                </div>
            )
        },
        {
            id: 'surface-prep',
            title: 'Preparação de Superfície',
            icon: Wrench,
            keywords: ['preparação', 'superfície', 'jateamento', 'limpeza', 'rugosidade', 'abrasivo', 'grau'],
            content: (
                <div className="space-y-6">
                    <h3 className="text-xl font-black text-primary">A Etapa Mais Crítica</h3>
                    <p className="text-text-secondary leading-relaxed">
                        Estudos científicos demonstram que entre <strong>80% e 90%</strong> do sucesso de um sistema de pintura
                        depende da qualidade do preparo da superfície metálica.
                    </p>

                    <div className="space-y-4">
                        <div className="p-4 bg-surface-soft rounded-xl border border-border/40">
                            <h4 className="font-bold text-text-main mb-2">Graus de Limpeza (ISO 8501-1)</h4>
                            <ul className="space-y-2 text-sm text-text-secondary">
                                <li><strong>St 2:</strong> Limpeza manual com ferramentas</li>
                                <li><strong>Sa 2:</strong> Jateamento comercial</li>
                                <li><strong>Sa 2.5:</strong> Jateamento ao metal quase branco (mais comum)</li>
                                <li><strong>Sa 3:</strong> Jateamento ao metal branco (máxima limpeza)</li>
                            </ul>
                        </div>

                        <div className="p-4 bg-primary/5 rounded-xl border border-primary/20">
                            <h4 className="font-bold text-primary mb-2">Perfil de Rugosidade</h4>
                            <p className="text-sm text-text-secondary">
                                O perfil mínimo de rugosidade deve ser de <strong>25 μm</strong> para um bom sistema de pintura
                                (ISO 8503-1, ABNT NBR 10443). Perfil excessivo (acima de 100 μm) pode criar picos frágeis.
                            </p>
                        </div>
                    </div>
                </div>
            )
        },
        {
            id: 'paint-types',
            title: 'Tipos de Tintas',
            icon: Droplets,
            keywords: ['tinta', 'epóxi', 'poliuretano', 'zinco', 'silicato', 'primer', 'acabamento'],
            content: (
                <div className="space-y-6">
                    <h3 className="text-xl font-black text-primary">Características das Tintas</h3>

                    <div className="space-y-4">
                        <div className="p-4 bg-blue-500/10 rounded-xl border border-blue-500/30">
                            <h4 className="font-bold text-blue-600 mb-2">Tintas Epóxi</h4>
                            <ul className="text-sm text-text-secondary space-y-1">
                                <li>• Alta resistência química e física</li>
                                <li>• Excelente aderência e impermeabilidade</li>
                                <li>• Baixa resistência UV (amarelamento)</li>
                                <li>• Cura: 6-16h para repintura, 7 dias completa</li>
                            </ul>
                        </div>

                        <div className="p-4 bg-green-500/10 rounded-xl border border-green-500/30">
                            <h4 className="font-bold text-green-600 mb-2">Tintas Poliuretano (PU)</h4>
                            <ul className="text-sm text-text-secondary space-y-1">
                                <li>• Resistência superior aos raios UV</li>
                                <li>• Mantém cor e brilho por mais tempo</li>
                                <li>• Excelente resistência à abrasão</li>
                                <li>• Cura: 4-24h para repintura</li>
                            </ul>
                        </div>

                        <div className="p-4 bg-amber-500/10 rounded-xl border border-amber-500/30">
                            <h4 className="font-bold text-amber-600 mb-2">Silicato de Zinco</h4>
                            <ul className="text-sm text-text-secondary space-y-1">
                                <li>• Proteção catódica ativa</li>
                                <li>• Oxidação preferencial do zinco</li>
                                <li>• Requer UR adequada (não acima de 85%)</li>
                                <li>• Cura muito rápida: 20-30 min</li>
                            </ul>
                        </div>
                    </div>
                </div>
            )
        },
        {
            id: 'solids-volume',
            title: 'Sólidos por Volume (SV)',
            icon: Layers,
            keywords: ['sólidos', 'volume', 'sv', 'rendimento', 'teórico', 'fórmula', 'cálculo'],
            content: (
                <div className="space-y-6">
                    <h3 className="text-xl font-black text-primary">O Parâmetro Mais Importante</h3>
                    <p className="text-text-secondary leading-relaxed">
                        O <strong>Sólidos por Volume (SV%)</strong> é a porcentagem do volume de tinta que permanece
                        como filme sólido após a evaporação completa de todos os solventes.
                    </p>

                    <div className="p-6 bg-gradient-to-br from-primary/10 to-primary/5 rounded-2xl border border-primary/30">
                        <h4 className="font-bold text-primary mb-4">Fórmula do Rendimento Teórico</h4>
                        <code className="block text-lg bg-surface p-4 rounded-xl text-center font-mono">
                            Rend. Teórico (m²/L) = (SV% × 10) / EPS (μm)
                        </code>
                        <p className="text-xs text-text-muted mt-4">
                            Exemplo: Tinta com 60% SV aplicada para 50 μm = (60 × 10) / 50 = <strong>12 m²/L</strong>
                        </p>
                    </div>

                    <div className="p-4 bg-amber-500/10 rounded-xl border border-amber-500/30">
                        <h4 className="font-bold text-amber-600 mb-2">Efeito da Diluição</h4>
                        <p className="text-sm text-text-secondary">
                            A diluição reduz o SV efetivo. Uma tinta com 60% SV diluída 15% terá SV efetivo de aproximadamente 51%.
                            Normas recomendam não diluir acima de 10-20%.
                        </p>
                    </div>
                </div>
            )
        },
        {
            id: 'film-thickness',
            title: 'Espessura de Película',
            icon: Ruler,
            keywords: ['espessura', 'película', 'úmida', 'seca', 'dft', 'wft', 'epu', 'eps', 'microns'],
            content: (
                <div className="space-y-6">
                    <h3 className="text-xl font-black text-primary">EPU e EPS</h3>

                    <div className="grid grid-cols-2 gap-4">
                        <div className="p-4 bg-blue-500/10 rounded-xl border border-blue-500/30">
                            <h4 className="font-bold text-blue-600 mb-2">EPU (Película Úmida)</h4>
                            <p className="text-xs text-text-muted">WFT - Wet Film Thickness</p>
                            <p className="text-sm text-text-secondary mt-2">
                                Medida imediatamente após aplicação com "pente de campanha".
                            </p>
                        </div>
                        <div className="p-4 bg-green-500/10 rounded-xl border border-green-500/30">
                            <h4 className="font-bold text-green-600 mb-2">EPS (Película Seca)</h4>
                            <p className="text-xs text-text-muted">DFT - Dry Film Thickness</p>
                            <p className="text-sm text-text-secondary mt-2">
                                Medida após cura com medidor magnético ou eletrônico.
                            </p>
                        </div>
                    </div>

                    <div className="p-6 bg-gradient-to-br from-primary/10 to-primary/5 rounded-2xl border border-primary/30">
                        <h4 className="font-bold text-primary mb-4">Relação EPU → EPS</h4>
                        <code className="block text-sm bg-surface p-4 rounded-xl text-center font-mono">
                            EPS (μm) = EPU (μm) × [SV (%) × (100 - Diluição %)] / 10000
                        </code>
                        <p className="text-xs text-text-muted mt-4">
                            Exemplo: EPU=150μm, SV=82%, Diluição=20% → EPS = 150 × (82 × 80) / 10000 = <strong>98 μm</strong>
                        </p>
                    </div>
                </div>
            )
        },
        {
            id: 'environment',
            title: 'Condições Ambientais',
            icon: Thermometer,
            keywords: ['temperatura', 'umidade', 'orvalho', 'ambiente', 'clima', 'condensação'],
            content: (
                <div className="space-y-6">
                    <h3 className="text-xl font-black text-primary">Variáveis Críticas</h3>

                    <div className="space-y-4">
                        <div className="p-4 bg-red-500/10 rounded-xl border border-red-500/30">
                            <h4 className="font-bold text-red-600 mb-2">🌡️ Temperatura do Ar</h4>
                            <p className="text-sm text-text-secondary">
                                Ideal: <strong>16°C a 30°C</strong>. Abaixo de 16°C a cura é muito lenta.
                                Acima de 30°C ocorre "spray seco".
                            </p>
                        </div>

                        <div className="p-4 bg-blue-500/10 rounded-xl border border-blue-500/30">
                            <h4 className="font-bold text-blue-600 mb-2">💧 Umidade Relativa</h4>
                            <p className="text-sm text-text-secondary">
                                Ideal: <strong>30% a 60%</strong>. Nunca acima de 80-85%.
                                Alta umidade pode causar condensação e empolamento.
                            </p>
                        </div>

                        <div className="p-4 bg-amber-500/10 rounded-xl border border-amber-500/30">
                            <h4 className="font-bold text-amber-600 mb-2">🌫️ Ponto de Orvalho</h4>
                            <p className="text-sm text-text-secondary">
                                A temperatura da superfície deve estar <strong>no mínimo 3°C acima</strong> do ponto de orvalho
                                (ISO 8502-4, SSPC).
                            </p>
                        </div>
                    </div>
                </div>
            )
        },
        {
            id: 'inspection',
            title: 'Inspeção e Controle',
            icon: CheckSquare,
            keywords: ['inspeção', 'controle', 'qualidade', 'aderência', 'medição', 'teste', 'defeitos'],
            content: (
                <div className="space-y-6">
                    <h3 className="text-xl font-black text-primary">Controle de Qualidade</h3>

                    <div className="space-y-4">
                        <div className="p-4 bg-surface-soft rounded-xl border border-border/40">
                            <h4 className="font-bold text-text-main mb-2">Medição de Espessura (ASTM D7091)</h4>
                            <p className="text-sm text-text-secondary">
                                Mínimo de <strong>15 medições</strong> por área de ~5m².
                                Resultado deve estar entre 80% e 120% do especificado.
                            </p>
                        </div>

                        <div className="p-4 bg-surface-soft rounded-xl border border-border/40">
                            <h4 className="font-bold text-text-main mb-2">Testes de Aderência</h4>
                            <ul className="text-sm text-text-secondary space-y-1">
                                <li><strong>Pull-Off (ASTM D4541):</strong> Força de tração em MPa</li>
                                <li><strong>Corte em X (ASTM D3359):</strong> Avaliação visual 0B-5B</li>
                            </ul>
                        </div>

                        <div className="p-4 bg-red-500/10 rounded-xl border border-red-500/30">
                            <h4 className="font-bold text-red-600 mb-2">Defeitos Comuns (ISO 4628)</h4>
                            <ul className="text-sm text-text-secondary space-y-1">
                                <li>• Bolhas (blistering) - ar ou solventes aprisionados</li>
                                <li>• Crateras (pinholes) - escape de ar durante cura</li>
                                <li>• Descamação (peeling) - aderência inadequada</li>
                                <li>• Empolamento osmótico - sais contaminantes</li>
                            </ul>
                        </div>
                    </div>
                </div>
            )
        },
        {
            id: 'standards',
            title: 'Normas Técnicas',
            icon: Shield,
            keywords: ['norma', 'abnt', 'iso', 'sspc', 'nace', 'petrobras', 'padrão', 'regulamento'],
            content: (
                <div className="space-y-6">
                    <h3 className="text-xl font-black text-primary">Normas Aplicáveis</h3>

                    <div className="space-y-4">
                        <div className="p-4 bg-green-500/10 rounded-xl border border-green-500/30">
                            <h4 className="font-bold text-green-600 mb-2">ABNT (Brasil)</h4>
                            <ul className="text-xs text-text-secondary space-y-1">
                                <li>NBR 10443 - Espessura de película seca</li>
                                <li>NBR 11003 - Aderência por corte</li>
                                <li>NBR 14847 - Inspeção de pintura</li>
                                <li>NBR 15158 - Limpeza química</li>
                                <li>NBR 16267 - Granulometria de abrasivos</li>
                            </ul>
                        </div>

                        <div className="p-4 bg-blue-500/10 rounded-xl border border-blue-500/30">
                            <h4 className="font-bold text-blue-600 mb-2">ISO (Internacional)</h4>
                            <ul className="text-xs text-text-secondary space-y-1">
                                <li>ISO 12944 - Série completa de pintura anticorrosiva</li>
                                <li>ISO 8501 - Padrões visuais de limpeza</li>
                                <li>ISO 8502 - Contaminação superficial</li>
                                <li>ISO 8503 - Rugosidade de superfície</li>
                            </ul>
                        </div>

                        <div className="p-4 bg-amber-500/10 rounded-xl border border-amber-500/30">
                            <h4 className="font-bold text-amber-600 mb-2">SSPC / NACE / Petrobras</h4>
                            <ul className="text-xs text-text-secondary space-y-1">
                                <li>SSPC-SP 6/10/11 - Graus de limpeza</li>
                                <li>SSPC-PA 2 - Medição de espessura</li>
                                <li>PETROBRAS N-9 - Jato abrasivo</li>
                                <li>PETROBRAS N-13 - Requisitos de pintura</li>
                            </ul>
                        </div>
                    </div>
                </div>
            )
        },
        {
            id: 'navigation',
            title: 'Navegação do App',
            icon: BookOpen,
            keywords: ['navegação', 'menu', 'tela', 'módulo', 'como usar', 'tutorial'],
            content: (
                <div className="space-y-6">
                    <h3 className="text-xl font-black text-primary">Como Usar o GPI</h3>

                    <div className="space-y-4">
                        <div className="p-4 bg-surface-soft rounded-xl border border-border/40">
                            <h4 className="font-bold text-text-main mb-2">1. Obras & Projetos</h4>
                            <p className="text-sm text-text-secondary">
                                Ponto de partida. Crie projetos com nome, cliente, datas e ambiente de corrosividade (C1-C5).
                                Todos os outros módulos se relacionam com as obras cadastradas aqui.
                            </p>
                        </div>

                        <div className="p-4 bg-surface-soft rounded-xl border border-border/40">
                            <h4 className="font-bold text-text-main mb-2">2. Biblioteca Técnica</h4>
                            <p className="text-sm text-text-secondary">
                                Cadastre as fichas técnicas das tintas (PDF). O sistema extrai automaticamente dados como
                                Sólidos por Volume, rendimento e DFT de referência.
                            </p>
                        </div>

                        <div className="p-4 bg-surface-soft rounded-xl border border-border/40">
                            <h4 className="font-bold text-text-main mb-2">3. Esquemas de Pintura</h4>
                            <p className="text-sm text-text-secondary">
                                Defina sistemas de pintura vinculando tintas da biblioteca em camadas (primer, intermediária, acabamento).
                            </p>
                        </div>

                        <div className="p-4 bg-surface-soft rounded-xl border border-border/40">
                            <h4 className="font-bold text-text-main mb-2">4. Estudo de Rendimento</h4>
                            <p className="text-sm text-text-secondary">
                                Calcule o consumo de tinta baseado em peso (toneladas) ou área (m²).
                                Selecione a tinta da biblioteca para usar automaticamente os dados técnicos.
                            </p>
                        </div>
                    </div>
                </div>
            )
        }
    ], []);

    // Filtrar seções pela pesquisa
    const filteredSections = useMemo(() => {
        if (!searchTerm.trim()) return sections;
        const term = searchTerm.toLowerCase();
        return sections.filter(s =>
            s.title.toLowerCase().includes(term) ||
            s.keywords.some(k => k.includes(term))
        );
    }, [sections, searchTerm]);

    const activeContent = sections.find(s => s.id === activeSection);

    if (!isOpen) return null;

    return (
        <div className="fixed inset-0 bg-black/70 backdrop-blur-md z-[100] flex items-center justify-center p-4 animate-in fade-in duration-300">
            <div className="bg-surface rounded-3xl shadow-2xl w-full max-w-5xl h-[85vh] flex flex-col border border-border/50 overflow-hidden">
                {/* Header */}
                <div className="p-6 border-b border-border/40 bg-gradient-to-r from-primary/10 to-transparent flex items-center justify-between shrink-0">
                    <div className="flex items-center gap-4">
                        <div className="w-12 h-12 rounded-2xl bg-primary flex items-center justify-center text-white shadow-lg shadow-primary/30">
                            <BookOpen size={24} />
                        </div>
                        <div>
                            <h2 className="text-xl font-black text-text-main">Manual Técnico</h2>
                            <p className="text-xs text-text-muted">Pintura Industrial & Navegação do App</p>
                        </div>
                    </div>

                    <div className="flex items-center gap-3">
                        {/* Botão PDF */}
                        <a
                            href="/Engenharia_da_Durabilidade_Industrial.pdf"
                            target="_blank"
                            rel="noopener noreferrer"
                            className="flex items-center gap-2 px-4 py-2.5 bg-red-500/10 text-red-500 rounded-xl text-sm font-bold hover:bg-red-500/20 transition-all border border-red-500/30"
                        >
                            <FileText size={16} />
                            <span className="hidden sm:inline">PDF Durabilidade</span>
                            <ExternalLink size={12} />
                        </a>

                        {/* Botão Índice */}
                        <button
                            onClick={() => setShowIndex(!showIndex)}
                            className={`flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm font-bold transition-all border ${showIndex
                                ? 'bg-primary text-white border-primary'
                                : 'bg-surface-soft text-text-main border-border/40 hover:border-primary'
                                }`}
                        >
                            {showIndex ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
                            Índice
                        </button>

                        <button
                            onClick={onClose}
                            className="p-2.5 text-text-muted hover:text-text-main hover:bg-surface-soft rounded-xl transition-all"
                            aria-label="Fechar"
                        >
                            <X size={20} />
                        </button>
                    </div>
                </div>

                {/* Search Bar */}
                <div className="p-4 border-b border-border/40 shrink-0">
                    <div className="relative">
                        <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-text-muted" />
                        <input
                            type="text"
                            placeholder="Buscar no manual... (ex: sólidos, rendimento, espessura)"
                            className="w-full h-12 bg-surface-soft border border-border/40 rounded-xl pl-12 pr-4 text-sm focus:ring-4 focus:ring-primary/10 focus:border-primary transition-all font-medium outline-none"
                            value={searchTerm}
                            onChange={(e) => setSearchTerm(e.target.value)}
                        />
                    </div>
                </div>

                {/* Content Area */}
                <div className="flex-1 flex overflow-hidden">
                    {/* Sidebar / Index */}
                    <div className={`${showIndex ? 'w-72' : 'w-0'} shrink-0 border-r border-border/40 overflow-hidden transition-all duration-300`}>
                        <div className="p-4 overflow-y-auto h-full custom-scrollbar">
                            <div className="space-y-1">
                                {filteredSections.map((section) => (
                                    <button
                                        key={section.id}
                                        onClick={() => {
                                            setActiveSection(section.id);
                                            if (window.innerWidth < 768) setShowIndex(false);
                                        }}
                                        className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-semibold transition-all text-left ${activeSection === section.id
                                            ? 'bg-primary text-white shadow-lg shadow-primary/20'
                                            : 'text-text-secondary hover:bg-surface-hover hover:text-text-main'
                                            }`}
                                    >
                                        <section.icon size={18} />
                                        <span className="truncate">{section.title}</span>
                                    </button>
                                ))}
                            </div>

                            {filteredSections.length === 0 && (
                                <div className="text-center py-8 text-text-muted text-sm">
                                    Nenhum resultado para "{searchTerm}"
                                </div>
                            )}
                        </div>
                    </div>

                    {/* Main Content */}
                    <div className="flex-1 overflow-y-auto p-6 custom-scrollbar">
                        {activeContent ? (
                            <div className="max-w-3xl mx-auto animate-in fade-in slide-in-from-right-4 duration-300">
                                <div className="flex items-center gap-3 mb-6 pb-4 border-b border-border/40">
                                    <div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary">
                                        <activeContent.icon size={20} />
                                    </div>
                                    <h2 className="text-2xl font-black text-text-main">{activeContent.title}</h2>
                                </div>
                                {activeContent.content}
                            </div>
                        ) : (
                            <div className="flex items-center justify-center h-full text-text-muted">
                                Selecione um tópico no índice
                            </div>
                        )}
                    </div>
                </div>

                {/* Footer */}
                <div className="p-4 border-t border-border/40 bg-surface-soft/50 text-center shrink-0">
                    <p className="text-xs text-text-muted">
                        GPI v2.1.0 • Manual Técnico baseado em normas ABNT, ISO, SSPC e Petrobras
                    </p>
                </div>
            </div>
        </div>
    );
};