<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Proposta Comercial — {{ $proposta->razao_social }}</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'DejaVu Sans', sans-serif; font-size: 11px; color: #1e3a5f; background: #fff; }
        .header { background: #1e3a5f; color: #fff; padding: 28px 36px; }
        .header-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
        .logo-area h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; }
        .logo-area p { font-size: 10px; color: rgba(255,255,255,0.65); margin-top: 3px; }
        .proposta-badge { text-align: right; }
        .proposta-badge .num { font-size: 10px; color: rgba(255,255,255,0.55); }
        .proposta-badge .val { font-size: 28px; font-weight: 800; color: #25b87e; }
        .proposta-badge .val small { font-size: 13px; }
        .validade-bar { background: rgba(255,255,255,0.1); border-radius: 6px; padding: 8px 12px; font-size: 10px; color: rgba(255,255,255,0.75); display: flex; justify-content: space-between; }
        .body { padding: 28px 36px; }
        .section { margin-bottom: 24px; }
        .section-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #94a3b8; border-bottom: 1px solid #e2e8f0; padding-bottom: 6px; margin-bottom: 12px; }
        .info-grid { display: flex; flex-wrap: wrap; gap: 12px; }
        .info-item { flex: 1; min-width: 140px; background: #f8fafc; border-radius: 8px; padding: 10px 12px; }
        .info-label { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; margin-bottom: 3px; }
        .info-value { font-size: 11px; font-weight: 600; color: #1e3a5f; }
        table { width: 100%; border-collapse: collapse; }
        thead tr { background: #f1f5f9; }
        thead th { padding: 8px 10px; text-align: left; font-size: 9px; font-weight: 700; text-transform: uppercase; color: #64748b; }
        tbody td { padding: 8px 10px; font-size: 10px; border-bottom: 1px solid #f8fafc; }
        .total-row td { font-weight: 700; font-size: 12px; background: #f0fdf4; color: #065f46; padding: 10px; }
        .obs-box { background: #f8fafc; border-left: 3px solid #25b87e; border-radius: 0 8px 8px 0; padding: 12px; font-size: 10px; color: #374151; line-height: 1.6; }
        .aceite-box { background: #1e3a5f; color: #fff; border-radius: 10px; padding: 20px 24px; text-align: center; margin-bottom: 24px; }
        .aceite-box h3 { font-size: 13px; margin-bottom: 6px; }
        .aceite-box p { font-size: 10px; color: rgba(255,255,255,0.7); margin-bottom: 12px; }
        .aceite-url { background: rgba(255,255,255,0.12); border-radius: 6px; padding: 8px 12px; font-size: 9px; color: #6ee7b7; word-break: break-all; }
        .footer { text-align: center; font-size: 9px; color: #94a3b8; padding: 16px 36px; border-top: 1px solid #e2e8f0; }
    </style>
</head>
<body>

<div class="header">
    <div class="header-top">
        <div class="logo-area">
            <h2>OPCON</h2>
            <p>Soluções Contábeis e Empresariais</p>
        </div>
        <div class="proposta-badge">
            <div class="num">Honorário mensal</div>
            <div class="val"><small>R$</small> {{ number_format($proposta->honorario_final, 2, ',', '.') }}</div>
        </div>
    </div>
    <div class="validade-bar">
        <span>Proposta #{{ $proposta->id }} &nbsp;·&nbsp; {{ $proposta->created_at->format('d/m/Y') }}</span>
        <span>Válida até: <strong>{{ $proposta->validade->format('d/m/Y') }}</strong></span>
    </div>
</div>

<div class="body">

    <div class="section">
        <div class="section-title">Dados do cliente</div>
        <div class="info-grid">
            <div class="info-item">
                <div class="info-label">Razão Social / Nome</div>
                <div class="info-value">{{ $proposta->razao_social }}</div>
            </div>
            @if($proposta->cnpj)
            <div class="info-item">
                <div class="info-label">CNPJ / CPF</div>
                <div class="info-value">{{ $proposta->cnpj }}</div>
            </div>
            @endif
            <div class="info-item">
                <div class="info-label">Regime tributário</div>
                <div class="info-value">{{ $proposta->regime_tributario }}</div>
            </div>
            @if($proposta->telefone)
            <div class="info-item">
                <div class="info-label">Telefone</div>
                <div class="info-value">{{ $proposta->telefone }}</div>
            </div>
            @endif
            <div class="info-item">
                <div class="info-label">E-mail</div>
                <div class="info-value">{{ $proposta->email }}</div>
            </div>
        </div>
    </div>

    @if($proposta->detalhes && count($proposta->detalhes))
    <div class="section">
        <div class="section-title">Composição do honorário</div>
        <table>
            <thead>
                <tr>
                    <th>Item</th>
                    <th style="text-align:right;">Valor</th>
                </tr>
            </thead>
            <tbody>
                @foreach($proposta->detalhes as $item)
                <tr>
                    <td>{{ $item['label'] ?? $item['item'] ?? '—' }}</td>
                    <td style="text-align:right;">R$ {{ number_format($item['valor'] ?? 0, 2, ',', '.') }}</td>
                </tr>
                @endforeach
                <tr class="total-row">
                    <td>Total mensal</td>
                    <td style="text-align:right;">R$ {{ number_format($proposta->honorario_final, 2, ',', '.') }}</td>
                </tr>
            </tbody>
        </table>
    </div>
    @endif

    @if($proposta->observacoes)
    <div class="section">
        <div class="section-title">Observações</div>
        <div class="obs-box">{{ $proposta->observacoes }}</div>
    </div>
    @endif

    @if($proposta->status === 'enviada')
    <div class="aceite-box">
        <h3>Aceite digital</h3>
        <p>Para aceitar esta proposta, acesse o link abaixo:</p>
        <div class="aceite-url">{{ url('/proposta/' . $proposta->token . '/aceitar') }}</div>
    </div>
    @endif

</div>

<div class="footer">
    OPCON Soluções Contábeis &nbsp;·&nbsp; Este documento tem validade até {{ $proposta->validade->format('d/m/Y') }}
    &nbsp;·&nbsp; Gerado em {{ now()->format('d/m/Y H:i') }}
</div>

</body>
</html>
