@extends('layouts.admin')
@section('title', 'Contact: '.$contact->full_name)
@section('page-title', 'Contact Detail')

@section('content')
<a href="{{ route('admin.contacts.index') }}" style="color:var(--muted);font-size:12px;font-family:'JetBrains Mono',monospace;text-decoration:none;display:inline-flex;align-items:center;gap:6px;margin-bottom:24px;">← BACK TO CONTACTS</a>

<div style="max-width:720px;display:flex;flex-direction:column;gap:16px;">
    <div class="glass-card" style="padding:24px;">
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;">
            <div>
                <div style="font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-bottom:5px;">NAME</div>
                <div style="color:var(--text);font-weight:500;">{{ $contact->full_name }}</div>
            </div>
            <div>
                <div style="font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-bottom:5px;">EMAIL</div>
                <a href="mailto:{{ $contact->email }}" style="color:#ef4444;text-decoration:none;">{{ $contact->email }}</a>
            </div>
            <div>
                <div style="font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-bottom:5px;">PHONE</div>
                <div class="mono" style="color:var(--text);font-size:13px;">{{ $contact->phone ?? '—' }}</div>
            </div>
            <div>
                <div style="font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-bottom:5px;">SUBMITTED</div>
                <div class="mono" style="color:var(--text);font-size:13px;">{{ $contact->created_at->format('M j, Y g:i A') }}</div>
            </div>
        </div>
        <div>
            <div style="font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-bottom:10px;">MESSAGE</div>
            <div style="background:#080810;border:1px solid var(--border);border-radius:10px;padding:20px;color:#cbd5e1;font-size:13px;line-height:1.8;white-space:pre-wrap;">{{ $contact->message }}</div>
        </div>
    </div>
    <a href="mailto:{{ $contact->email }}?subject=Re: Your TrollMasters.AI Inquiry"
       style="display:inline-flex;align-items:center;gap:8px;background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.25);color:#ef4444;padding:10px 20px;border-radius:10px;font-size:11px;font-family:'JetBrains Mono',monospace;letter-spacing:2px;text-decoration:none;align-self:flex-start;transition:all 0.2s;"
       onmouseover="this.style.background='rgba(239,68,68,0.2)'" onmouseout="this.style.background='rgba(239,68,68,0.1)'">
        REPLY VIA EMAIL →
    </a>
</div>
@endsection
