{{-- Tela apenas para a apresentação do mockup: a rota da documentação --}}
@extends('manifest.layout')

@section('title', 'A Rota da Documentação')

@section('content')
    <div class="pagehead">
        <div class="wrap">
            <span class="badge-circle"><i class="fa-solid fa-route"></i></span>
            <h1>A Rota da Documentação</h1>
            <div class="context">Manifesto de bordo · TABEX</div>
            <p class="lead">
                Da task concluída no Notion até o porto final — cada etapa é automatizada
                por uma skill do Claude. Apenas a área dev tem integração direta com o Notion;
                a versão dos usuários é publicada como conteúdo aberto, sem login.
            </p>
        </div>
    </div>

    <div class="wrap">
        <div class="process" style="padding-top: 34px;">
            <div class="route with-art">

                {{-- Etapa 1 — Task concluída no Notion --}}
                <div class="port">
                    <div class="art">
                        <svg viewBox="0 0 220 130" xmlns="http://www.w3.org/2000/svg" fill="none"
                             stroke="currentColor" stroke-width="2" stroke-linecap="round">
                            {{-- card da task --}}
                            <rect x="30" y="14" width="160" height="102" rx="10"/>
                            <line x1="46" y1="36" x2="132" y2="36" stroke-width="4"/>
                            {{-- checklist --}}
                            <rect x="46" y="52" width="12" height="12" rx="3" stroke="#0F766E"/>
                            <path d="M48 58 l3 3 l6 -6" stroke="#0F766E"/>
                            <line x1="66" y1="58" x2="150" y2="58"/>
                            <rect x="46" y="74" width="12" height="12" rx="3" stroke="#0F766E"/>
                            <path d="M48 80 l3 3 l6 -6" stroke="#0F766E"/>
                            <line x1="66" y1="80" x2="132" y2="80"/>
                            {{-- chip de status Done --}}
                            <rect x="46" y="96" width="44" height="14" rx="7" fill="#0F766E" stroke="none"/>
                            {{-- selo de concluído --}}
                            <circle cx="176" cy="100" r="17" fill="#F6F8FA" stroke="#0F766E"/>
                            <path d="M168 100 l6 6 l11 -12" stroke="#0F766E" stroke-width="3"/>
                        </svg>
                    </div>
                    <div class="step">Partida</div>
                    <h3 class="plain">Task concluída</h3>
                    <p>Suporte registra a evidência e o dev conclui a task no Notion (Dev-Status: Done).</p>
                </div>

                {{-- Etapa 2 — document-this escreve as docs --}}
                <div class="port skill">
                    <div class="art">
                        <svg viewBox="0 0 220 130" xmlns="http://www.w3.org/2000/svg" fill="none"
                             stroke="currentColor" stroke-width="2" stroke-linecap="round">
                            <defs>
                                <pattern id="hatch-doc" width="6" height="6" patternTransform="rotate(45)" patternUnits="userSpaceOnUse">
                                    <line x1="0" y1="0" x2="0" y2="6" stroke="currentColor" stroke-width="1.4"/>
                                </pattern>
                            </defs>
                            {{-- doc técnica (atrás) --}}
                            <rect x="36" y="20" width="88" height="96" rx="8"/>
                            <rect x="36" y="20" width="88" height="22" rx="8" fill="url(#hatch-doc)"/>
                            <line x1="48" y1="56" x2="112" y2="56"/>
                            <line x1="48" y1="70" x2="104" y2="70"/>
                            <line x1="48" y1="84" x2="112" y2="84"/>
                            <line x1="48" y1="98" x2="92" y2="98"/>
                            {{-- release note (frente) --}}
                            <rect x="102" y="40" width="76" height="76" rx="8" fill="#F6F8FA"/>
                            <line x1="114" y1="60" x2="166" y2="60" stroke="#0E4E8B"/>
                            <line x1="114" y1="74" x2="158" y2="74" stroke="#0E4E8B"/>
                            <line x1="114" y1="88" x2="166" y2="88" stroke="#0E4E8B"/>
                            {{-- varinha + faíscas --}}
                            <line x1="150" y1="38" x2="184" y2="12" stroke="#B98A2F" stroke-width="3"/>
                            <path d="M192 20 l2 6 l6 2 l-6 2 l-2 6 l-2 -6 l-6 -2 l6 -2 Z" fill="#B98A2F" stroke="none"/>
                            <path d="M176 4 l1.4 4 l4 1.4 l-4 1.4 l-1.4 4 l-1.4 -4 l-4 -1.4 l4 -1.4 Z" fill="#B98A2F" stroke="none"/>
                        </svg>
                    </div>
                    <div class="step">Skill Claude</div>
                    <h3>document-this</h3>
                    <p>Lê a task inteira e escreve a documentação técnica e a release note do usuário.</p>
                </div>

                {{-- Etapa 3 — manifest-it publica o site público --}}
                <div class="port skill">
                    <div class="art">
                        <svg viewBox="0 0 220 130" xmlns="http://www.w3.org/2000/svg" fill="none"
                             stroke="currentColor" stroke-width="2" stroke-linecap="round">
                            {{-- janela do navegador --}}
                            <rect x="24" y="14" width="172" height="102" rx="10"/>
                            <line x1="24" y1="36" x2="196" y2="36"/>
                            <circle cx="38" cy="25" r="3" fill="currentColor" stroke="none"/>
                            <circle cx="50" cy="25" r="3" fill="currentColor" stroke="none"/>
                            <circle cx="62" cy="25" r="3" fill="currentColor" stroke="none"/>
                            {{-- livro aberto (o manifest) --}}
                            <path d="M110 56 C 100 50, 84 50, 76 54 L 76 88 C 84 84, 100 84, 110 90 C 120 84, 136 84, 144 88 L 144 54 C 136 50, 120 50, 110 56 Z" stroke="#B98A2F"/>
                            <line x1="110" y1="56" x2="110" y2="90" stroke="#B98A2F"/>
                            {{-- ondas (público navegando) --}}
                            <path d="M40 104 q6 -5 12 0 q6 5 12 0 q6 -5 12 0" stroke="#0E4E8B"/>
                            <path d="M144 104 q6 -5 12 0 q6 5 12 0 q6 -5 12 0" stroke="#0E4E8B"/>
                            {{-- cadeado aberto = sem login --}}
                            <rect x="160" y="52" width="20" height="16" rx="4" stroke="#0F766E"/>
                            <path d="M164 52 v-6 a6 6 0 0 1 12 0" stroke="#0F766E"/>
                        </svg>
                    </div>
                    <div class="step">Skill Claude</div>
                    <h3>manifest-it</h3>
                    <p>Publica a versão do usuário aqui no The Manifest — pública, sem login.</p>
                </div>

                {{-- Etapa 4 — dock-it atraca a doc técnica na área dev --}}
                <div class="port skill">
                    <div class="art">
                        <svg viewBox="0 0 220 130" xmlns="http://www.w3.org/2000/svg" fill="none"
                             stroke="currentColor" stroke-width="2" stroke-linecap="round">
                            <defs>
                                <pattern id="hatch-dock" width="6" height="6" patternTransform="rotate(45)" patternUnits="userSpaceOnUse">
                                    <line x1="0" y1="0" x2="0" y2="6" stroke="currentColor" stroke-width="1.4"/>
                                </pattern>
                            </defs>
                            {{-- cais (doca) --}}
                            <rect x="150" y="16" width="52" height="98" rx="6" fill="url(#hatch-dock)"/>
                            {{-- cabeço de amarração --}}
                            <circle cx="160" cy="64" r="5" fill="currentColor" stroke="none"/>
                            {{-- navio visto de cima atracando --}}
                            <path d="M14 64 C 30 38, 58 32, 84 32 L 130 32 L 130 96 L 84 96 C 58 96, 30 90, 14 64 Z"/>
                            <rect x="58" y="52" width="16" height="10" rx="2"/>
                            <rect x="58" y="68" width="16" height="10" rx="2"/>
                            <rect x="88" y="46" width="30" height="16" rx="2" stroke="#0E4E8B"/>
                            <rect x="88" y="68" width="30" height="16" rx="2" stroke="#0E4E8B"/>
                            {{-- cabo de amarração até o cais --}}
                            <path d="M130 64 Q 142 74 155 64" stroke="#B98A2F" stroke-width="2.5" stroke-dasharray="4 4"/>
                            {{-- "N" do Notion no cais --}}
                            <rect x="168" y="52" width="24" height="24" rx="5" fill="#0A2239" stroke="none"/>
                            <path d="M174 70 V 58 L 186 70 V 58" stroke="#fff" stroke-width="2.4"/>
                        </svg>
                    </div>
                    <div class="step">Skill Claude</div>
                    <h3>dock-it</h3>
                    <p>Atraca a doc técnica na área dev — a única com integração direta ao Notion.</p>
                </div>
            </div>
        </div>
    </div>
@endsection
