@extends('layouts.marketing')

@section('title', 'Design Test – Connect (LinkedIn clone)')

@push('styles')
<style>
/* Design test: LinkedIn-style Connect – self-contained, no impact on real Connect until applied */
.dt-connect {
    --li-bg: #f3f2ef;
    --li-surface: #ffffff;
    --li-border: #e0dfdc;
    --li-blue: #0a66c2;
    --li-blue-hover: #004182;
    --li-text: rgba(0,0,0,0.9);
    --li-text-muted: rgba(0,0,0,0.6);
    --li-radius: 8px;
    --li-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.12);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 'Helvetica Neue', sans-serif;
    min-height: 100vh;
    background: var(--li-bg);
    padding-top: 56px;
}
.dt-banner {
    background: linear-gradient(135deg, #0a66c2 0%, #004182 100%);
    color: #fff;
    padding: 12px 24px;
    text-align: center;
    font-size: 0.875rem;
}
.dt-banner strong { margin-right: 8px; }
.dt-container {
    max-width: 1128px;
    margin: 0 auto;
    padding: 24px 16px 48px;
}
.dt-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
}
@media (min-width: 768px) {
    .dt-grid {
        grid-template-columns: 220px minmax(0, 1fr);
    }
    .dt-left { position: sticky; top: 88px; max-height: calc(100vh - 110px); overflow-y: auto; }
    .dt-right { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
    .dt-grid {
        grid-template-columns: 1fr minmax(0, 552px) 1fr;
        gap: 24px;
    }
    .dt-left { grid-column: 1; position: sticky; top: 88px; max-height: calc(100vh - 110px); overflow-y: auto; }
    .dt-center { grid-column: 2; }
    .dt-right { grid-column: 3; grid-row: 1; position: sticky; top: 88px; max-height: calc(100vh - 110px); overflow-y: auto; }
}
.dt-card {
    background: var(--li-surface);
    border-radius: var(--li-radius);
    box-shadow: var(--li-shadow);
    border: 1px solid var(--li-border);
    overflow: hidden;
}
/* Left: profile card */
.dt-profile-card .dt-profile-banner {
    height: 56px;
    background: linear-gradient(135deg, var(--li-blue) 0%, #057642 100%);
}
.dt-profile-card .dt-profile-body {
    padding: 0 12px 12px;
    margin-top: -28px;
}
.dt-profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 2px solid var(--li-surface);
    background: linear-gradient(135deg, var(--li-blue), #057642);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 12px;
    box-shadow: var(--li-shadow);
}
.dt-profile-name { font-weight: 600; font-size: 1rem; color: var(--li-text); margin: 0 0 2px 0; }
.dt-profile-headline { font-size: 0.8125rem; color: var(--li-text-muted); margin: 0 0 4px 0; }
.dt-profile-links {
    border-top: 1px solid var(--li-border);
    padding: 12px;
    display: flex;
    justify-content: space-between;
    font-size: 0.8125rem;
}
.dt-profile-links a { color: var(--li-blue); font-weight: 600; text-decoration: none; }
.dt-profile-links a:hover { text-decoration: underline; }
.dt-profile-links a:last-child { color: var(--li-text-muted); font-weight: 400; }
/* Left: manage network */
.dt-card-title { font-size: 0.875rem; font-weight: 600; color: var(--li-text); margin: 0 0 12px 0; padding: 12px 12px 0; }
.dt-list { padding: 0 12px 12px; }
.dt-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--li-text);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}
.dt-list-item:hover { background: var(--li-bg); }
.dt-list-item span:last-child { font-weight: 600; color: var(--li-blue); }
/* Center: composer + tabs in one card – polished “Start a post” */
.dt-composer-card { padding: 20px; padding-bottom: 0; }
.dt-composer-inner {
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%);
    border: 1px solid var(--li-border);
    border-radius: 12px;
    padding: 16px 20px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.dt-composer-inner:hover {
    border-color: #cfcdc9;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.dt-composer-trigger {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 18px;
    border: 1px solid var(--li-border);
    border-radius: 28px;
    background: var(--li-surface);
    color: var(--li-text-muted);
    font-size: 0.9375rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.dt-composer-trigger:hover {
    border-color: var(--li-blue);
    background: var(--li-surface);
    color: var(--li-text);
    box-shadow: 0 2px 8px rgba(10, 102, 194, 0.12);
}
.dt-composer-trigger:focus-visible { outline: 2px solid var(--li-blue); outline-offset: 2px; }
.dt-composer-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--li-blue) 0%, #057642 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    flex-shrink: 0;
    border: 2px solid var(--li-surface);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.dt-composer-trigger span.dt-composer-label { flex: 1; font-weight: 500; }
.dt-composer-options {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(0,0,0,0.06);
}
.dt-composer-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--li-text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.dt-composer-option:hover { background: rgba(0,0,0,0.06); color: var(--li-text); }
.dt-composer-option:disabled { opacity: 0.6; cursor: not-allowed; }
.dt-composer-option:disabled:hover { background: transparent; color: var(--li-text-muted); }
.dt-composer-option svg { width: 20px; height: 20px; opacity: 0.85; }
.dt-feed-tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin: 0 -20px -1px;
    border-top: 1px solid var(--li-border);
    padding: 0;
    font-size: 0.875rem;
    font-weight: 500;
    overflow-x: auto;
    overflow-y: hidden;
    min-height: 44px;
}
.dt-feed-tab {
    padding: 12px 16px;
    color: var(--li-text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
}
.dt-feed-tab:hover { color: var(--li-text); }
.dt-feed-tab:active { transform: scale(0.98); }
.dt-feed-tab.active {
    border-bottom-color: var(--li-blue);
    color: var(--li-blue);
    font-weight: 600;
    background-color: rgba(10, 102, 194, 0.08);
}
/* Center: post cards */
.dt-feed { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.dt-post {
    background: var(--li-surface);
    border-radius: var(--li-radius);
    box-shadow: var(--li-shadow);
    border: 1px solid var(--li-border);
    padding: 16px;
}
.dt-post-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}
.dt-post-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--li-blue), #057642);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dt-post-meta { flex: 1; min-width: 0; }
.dt-post-author { font-weight: 600; font-size: 0.9375rem; color: var(--li-text); margin: 0 0 2px 0; }
.dt-post-author:hover { color: var(--li-blue); text-decoration: underline; }
.dt-post-time { font-size: 0.75rem; color: var(--li-text-muted); margin: 0; }
/* Post text: 16:9 gradient container with centered text (no images/videos for now) */
.dt-post-body-wrap {
    margin: 12px 0 0 0;
    aspect-ratio: 16 / 9;
    min-height: 140px;
    border-radius: 10px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e8f4fc 100%);
    border: 1px solid rgba(10, 102, 194, 0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.dt-post-body {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--li-text);
    margin: 0;
    text-align: center;
    max-width: 100%;
}
.dt-post-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid var(--li-border);
    font-size: 0.875rem;
    color: var(--li-text-muted);
}
.dt-post-actions span { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 4px 8px; border-radius: 4px; }
.dt-post-actions span:hover { background: var(--li-bg); color: var(--li-text); }
/* Right: people you may know */
.dt-right-card { padding: 0; }
.dt-right-card .dt-card-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--li-border);
    font-size: 0.875rem; font-weight: 600; color: var(--li-text);
}
.dt-suggestion {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--li-border);
    transition: background 0.15s;
}
.dt-suggestion:hover { background: var(--li-bg); }
.dt-suggestion:last-child { border-bottom: none; }
.dt-suggestion-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--li-blue), #057642);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dt-suggestion-info { flex: 1; min-width: 0; }
.dt-suggestion-name { font-weight: 600; font-size: 0.9375rem; color: var(--li-text); margin: 0 0 2px 0; }
.dt-suggestion-headline { font-size: 0.8125rem; color: var(--li-text-muted); margin: 0; }
.dt-suggestion .dt-btn {
    width: 100%;
    padding: 6px 16px;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 16px;
    border: 1px solid var(--li-blue);
    color: var(--li-blue);
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}
.dt-suggestion .dt-btn:hover { background: #eff6ff; }
.dt-list-icon { width: 20px; height: 20px; color: var(--li-text-muted); margin-right: 8px; vertical-align: middle; }
</style>
@endpush

@section('content')
<x-marketing-nav />

<div class="dt-connect">
    <div class="dt-banner">
        <strong>Design test</strong> This is a LinkedIn-style clone for the Connect page. Review the layout and design here. Once you confirm, we’ll apply this exact structure and styles to the real Connect page.
    </div>
    <div class="dt-container">
        <div class="dt-grid">
            {{-- Left rail --}}
            <aside class="dt-left">
                <div class="dt-card dt-profile-card">
                    <div class="dt-profile-banner"></div>
                    <div class="dt-profile-body">
                        <div class="dt-profile-avatar">JD</div>
                        <p class="dt-profile-name">Jane Doe</p>
                        <p class="dt-profile-headline">RN, BSN · Healthcare Professional</p>
                        <p class="dt-profile-headline">Greater Accra, Ghana</p>
                        <div class="dt-profile-links">
                            <a href="#profile">View profile</a>
                            <a href="#edit">Edit</a>
                        </div>
                    </div>
                </div>
                <div class="dt-card">
                    <h3 class="dt-card-title">Manage my network</h3>
                    <div class="dt-list">
                        <a href="#connections" class="dt-list-item">
                            <span>Connections</span>
                            <span>128</span>
                        </a>
                        <a href="#following" class="dt-list-item">
                            <span>Following &amp; followers</span>
                            <span>42</span>
                        </a>
                        <a href="#groups" class="dt-list-item">
                            <span>Groups</span>
                            <span>5</span>
                        </a>
                        <a href="#events" class="dt-list-item">
                            <span>Events</span>
                            <span>2</span>
                        </a>
                        <a href="#newsletters" class="dt-list-item">
                            <span>Newsletters</span>
                            <span>1</span>
                        </a>
                    </div>
                </div>
            </aside>

            {{-- Center feed --}}
            <main class="dt-center">
                <div class="dt-card dt-composer-card">
                    <div class="dt-composer-inner">
                        <button type="button" class="dt-composer-trigger" onclick="typeof openAddPostModal === 'function' && openAddPostModal()">
                            <span class="dt-composer-avatar">JD</span>
                            <span class="dt-composer-label">Start a post</span>
                        </button>
                        <div class="dt-composer-options">
                            <button type="button" class="dt-composer-option" disabled title="Coming soon">
                                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
                                Photo
                            </button>
                            <button type="button" class="dt-composer-option" disabled title="Coming soon">
                                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z"/></svg>
                                Video
                            </button>
                            <button type="button" class="dt-composer-option" disabled title="Coming soon">
                                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
                                Document
                            </button>
                        </div>
                    </div>
                    <div class="dt-feed-tabs">
                        <a href="#all" class="dt-feed-tab active">All</a>
                        <a href="#network" class="dt-feed-tab">Network</a>
                        <a href="#mine" class="dt-feed-tab">My Posts</a>
                        <a href="#liked" class="dt-feed-tab">Liked</a>
                        <a href="#replies" class="dt-feed-tab">Replies</a>
                        <a href="#more" class="dt-feed-tab">More</a>
                    </div>
                </div>
                <div class="dt-feed">
                    <article class="dt-post">
                        <div class="dt-post-header">
                            <div class="dt-post-avatar">MK</div>
                            <div class="dt-post-meta">
                                <p class="dt-post-author">Mary K. Nurse</p>
                                <p class="dt-post-time">RN, ICU · 1st · 2d</p>
                            </div>
                        </div>
                        <div class="dt-post-body-wrap">
                            <p class="dt-post-body">Excited to share that I just completed my BLS renewal. Grateful for the ongoing learning opportunities in our field. Who else is renewing certifications this quarter?</p>
                        </div>
                        <div class="dt-post-actions">
                            <span>👍 Like</span>
                            <span>💬 Comment</span>
                            <span>🔄 Repost</span>
                            <span>📤 Send</span>
                        </div>
                    </article>
                    <article class="dt-post">
                        <div class="dt-post-header">
                            <div class="dt-post-avatar">AB</div>
                            <div class="dt-post-meta">
                                <p class="dt-post-author">Alex Brown</p>
                                <p class="dt-post-time">LPN · 2nd · 5d</p>
                            </div>
                        </div>
                        <div class="dt-post-body-wrap">
                            <p class="dt-post-body">Visa sponsorship and relocation support made my move to the US possible. If you’re an international nurse considering the same path, happy to answer questions in the comments.</p>
                        </div>
                        <div class="dt-post-actions">
                            <span>👍 Like</span>
                            <span>💬 Comment</span>
                            <span>🔄 Repost</span>
                            <span>📤 Send</span>
                        </div>
                    </article>
                    <article class="dt-post">
                        <div class="dt-post-header">
                            <div class="dt-post-avatar">CD</div>
                            <div class="dt-post-meta">
                                <p class="dt-post-author">Chris Davis</p>
                                <p class="dt-post-time">Healthcare Admin · 1w</p>
                            </div>
                        </div>
                        <div class="dt-post-body-wrap">
                            <p class="dt-post-body">Our facility is hiring for night shift RNs with critical care experience. Relocation assistance and sign-on bonus available. DM me for details.</p>
                        </div>
                        <div class="dt-post-actions">
                            <span>👍 Like</span>
                            <span>💬 Comment</span>
                            <span>🔄 Repost</span>
                            <span>📤 Send</span>
                        </div>
                    </article>
                </div>
            </main>

            {{-- Right rail --}}
            <aside class="dt-right">
                <div class="dt-card dt-right-card">
                    <div class="dt-card-header">People you may know</div>
                    <div class="dt-suggestion">
                        <div class="dt-suggestion-avatar">EW</div>
                        <div class="dt-suggestion-info">
                            <p class="dt-suggestion-name">Emma Wilson</p>
                            <p class="dt-suggestion-headline">RN · Pediatrics</p>
                        </div>
                        <button type="button" class="dt-btn">Connect</button>
                    </div>
                    <div class="dt-suggestion">
                        <div class="dt-suggestion-avatar">JL</div>
                        <div class="dt-suggestion-info">
                            <p class="dt-suggestion-name">James Lee</p>
                            <p class="dt-suggestion-headline">LPN · Long-term care</p>
                        </div>
                        <button type="button" class="dt-btn">Connect</button>
                    </div>
                    <div class="dt-suggestion">
                        <div class="dt-suggestion-avatar">SM</div>
                        <div class="dt-suggestion-info">
                            <p class="dt-suggestion-name">Sarah Miller</p>
                            <p class="dt-suggestion-headline">RN · Emergency</p>
                        </div>
                        <button type="button" class="dt-btn">Connect</button>
                    </div>
                    <div class="dt-suggestion">
                        <div class="dt-suggestion-avatar">RJ</div>
                        <div class="dt-suggestion-info">
                            <p class="dt-suggestion-name">Rachel Johnson</p>
                            <p class="dt-suggestion-headline">Healthcare Professional</p>
                        </div>
                        <button type="button" class="dt-btn">Connect</button>
                    </div>
                </div>
            </aside>
        </div>
    </div>
</div>

{{-- Real Connect “Add post” modal so we can try posting from the design test --}}
@include('nurse.connect.partials.add-post-modal', ['forumCategories' => \App\Models\ForumCategory::active()->ordered()->get()])
@endsection