<?php
/**
 * Under Construction — Placeholder for modules pending API integration
 */
$moduleNames = [
    'overtime-taskforce' => 'Overtime Taskforce',
    'incidents' => 'Active Incidents',
    'target-solutions' => 'Target Solutions',
];
$moduleName = $moduleNames[$page] ?? 'This Module';
?>

<div class="page-header">
    <h1><?= htmlspecialchars($moduleName) ?></h1>
</div>

<?php if ($page === 'overtime-taskforce'): ?>
<!-- OT Intelligence Center Card (HERO) -->
<a href="dashboard.php?page=ot-intelligence" style="text-decoration:none; display:block; margin-bottom:24px;">
    <div style="
        position: relative;
        border-radius: 16px;
        overflow: hidden;
        background: linear-gradient(135deg, #0a0e14 0%, #0d1a2a 30%, #0f2440 60%, #132d4f 100%);
        padding: 44px 48px;
        color: #fff;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        box-shadow: 0 4px 24px rgba(0,180,230,0.15);
    " onmouseover="this.style.transform='translateY(-2px)';this.style.boxShadow='0 8px 36px rgba(0,200,255,0.3)';" onmouseout="this.style.transform='';this.style.boxShadow='0 4px 24px rgba(0,180,230,0.15)';">

        <div style="position:absolute; inset:0; opacity:0.04; background-image:
            radial-gradient(circle at 15% 85%, #00C8FF 1px, transparent 1px),
            radial-gradient(circle at 85% 15%, #00A0E0 1px, transparent 1px),
            radial-gradient(circle at 50% 50%, #fff 1px, transparent 1px);
            background-size: 50px 50px, 65px 65px, 45px 45px;
        "></div>
        <div style="position:absolute; top:-50px; right:-50px; width:250px; height:250px; background:radial-gradient(circle, rgba(0,200,255,0.12) 0%, transparent 70%); border-radius:50%;"></div>
        <div style="position:absolute; bottom:-40px; left:20%; width:200px; height:200px; background:radial-gradient(circle, rgba(0,180,230,0.08) 0%, transparent 70%); border-radius:50%;"></div>
        <div style="position:absolute; top:50%; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent 0%, rgba(0,200,255,0.12) 20%, rgba(0,200,255,0.12) 80%, transparent 100%);"></div>

        <div style="position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:32px;">
            <div style="flex:1;">
                <div style="display:flex; align-items:center; gap:16px; margin-bottom:16px;">
                    <div style="width:56px; height:56px; border-radius:14px; overflow:hidden; flex-shrink:0; border:1px solid rgba(0,200,255,0.3); box-shadow:0 0 20px rgba(0,200,255,0.15);">
                        <img src="https://responseiq.ai/home.png" width="56" height="56" style="object-fit:cover; display:block;">
                    </div>
                    <span style="font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:rgba(0,220,255,0.8);">ResponseIQ Analytics</span>
                </div>

                <h2 style="font-size:28px; font-weight:800; line-height:1.2; margin-bottom:10px; letter-spacing:-0.3px;">
                    OT Intelligence Center
                </h2>
                <p style="font-size:15px; color:rgba(180,210,230,0.65); line-height:1.5; max-width:520px; margin-bottom:20px;">
                    Power BI payroll data, Telestaff staffing patterns, and leave records — cross-referenced with Local 48 CBA and the FY26 approved city budget. Real OT dollars, burn-down analysis, and hire vs. overtime modeling.
                </p>

                <div style="display:flex; gap:16px; flex-wrap:wrap;">
                    <div style="display:flex; align-items:center; gap:6px;">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="rgba(0,200,255,0.7)" stroke-width="2"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
                        <span style="font-size:12px; color:rgba(0,220,255,0.9); font-weight:600;">$8.85M FY26 OT</span>
                    </div>
                    <div style="display:flex; align-items:center; gap:6px;">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="rgba(0,200,255,0.7)" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                        <span style="font-size:12px; color:rgba(0,220,255,0.9); font-weight:600;">269 Burn-Down Members</span>
                    </div>
                    <div style="display:flex; align-items:center; gap:6px;">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="rgba(0,200,255,0.7)" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
                        <span style="font-size:12px; color:rgba(0,220,255,0.9); font-weight:600;">Break-Even Analysis</span>
                    </div>
                </div>
            </div>

            <div style="flex-shrink:0; display:flex; align-items:center; justify-content:center; width:56px; height:56px; background:rgba(0,200,255,0.08); border:1px solid rgba(0,200,255,0.2); border-radius:50%;">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="rgba(0,220,255,0.9)" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
            </div>
        </div>
    </div>
</a>

<!-- Predictive Modeling Card -->
<a href="https://responseiq.ai/overtime/" target="_blank" style="text-decoration:none; display:block; margin-bottom:24px;">
    <div style="
        position: relative;
        border-radius: 16px;
        overflow: hidden;
        background: linear-gradient(135deg, #0B2240 0%, #163158 40%, #1B6CB0 100%);
        padding: 40px 44px;
        color: #fff;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        box-shadow: 0 4px 20px rgba(11,34,64,0.2);
    " onmouseover="this.style.transform='translateY(-2px)';this.style.boxShadow='0 8px 32px rgba(11,34,64,0.3)';" onmouseout="this.style.transform='';this.style.boxShadow='0 4px 20px rgba(11,34,64,0.2)';">

        <!-- Animated background pattern -->
        <div style="position:absolute; inset:0; opacity:0.06; background-image:
            radial-gradient(circle at 20% 80%, #8CC63F 1px, transparent 1px),
            radial-gradient(circle at 80% 20%, #5BA4D9 1px, transparent 1px),
            radial-gradient(circle at 60% 60%, #00A6A0 1px, transparent 1px);
            background-size: 40px 40px, 60px 60px, 50px 50px;
        "></div>

        <!-- Glow accent -->
        <div style="position:absolute; top:-40px; right:-40px; width:200px; height:200px; background:radial-gradient(circle, rgba(140,198,63,0.15) 0%, transparent 70%); border-radius:50%;"></div>
        <div style="position:absolute; bottom:-60px; left:-20px; width:180px; height:180px; background:radial-gradient(circle, rgba(27,108,176,0.2) 0%, transparent 70%); border-radius:50%;"></div>

        <div style="position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:32px;">
            <div style="flex:1;">
                <div style="display:flex; align-items:center; gap:10px; margin-bottom:16px;">
                    <div style="width:44px; height:44px; background:rgba(140,198,63,0.2); border:1px solid rgba(140,198,63,0.3); border-radius:12px; display:flex; align-items:center; justify-content:center;">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#8CC63F" stroke-width="2">
                            <path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
                        </svg>
                    </div>
                    <span style="font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:rgba(140,198,63,0.8);">AI-Powered Analytics</span>
                </div>

                <h2 style="font-size:26px; font-weight:800; line-height:1.2; margin-bottom:8px; letter-spacing:-0.3px;">
                    Predictive Modeling
                </h2>
                <p style="font-size:15px; color:rgba(255,255,255,0.6); line-height:1.5; max-width:480px; margin-bottom:20px;">
                    Machine learning models that forecast overtime demand, identify staffing patterns, and optimize resource allocation across all shifts and districts.
                </p>

                <div style="display:flex; gap:20px; flex-wrap:wrap;">
                    <div style="display:flex; align-items:center; gap:6px;">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                        <span style="font-size:12px; color:rgba(255,255,255,0.5);">Demand Forecasting</span>
                    </div>
                    <div style="display:flex; align-items:center; gap:6px;">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                        <span style="font-size:12px; color:rgba(255,255,255,0.5);">Staffing Optimization</span>
                    </div>
                    <div style="display:flex; align-items:center; gap:6px;">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                        <span style="font-size:12px; color:rgba(255,255,255,0.5);">Cost Analysis</span>
                    </div>
                </div>
            </div>

            <div style="flex-shrink:0; display:flex; align-items:center; justify-content:center; width:56px; height:56px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); border-radius:50%;">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
            </div>
        </div>
    </div>
</a>

<!-- City of Cincinnati | Power BI Card (compact) -->
<a href="dashboard.php?page=powerbi" style="text-decoration:none; display:block; margin-bottom:24px;">
<div style="
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 40%, #F2C811 100%);
    padding: 24px 32px;
    color: #fff;
    box-shadow: 0 4px 16px rgba(242,200,17,0.12);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
" onmouseover="this.style.transform='translateY(-2px)';this.style.boxShadow='0 6px 24px rgba(242,200,17,0.2)';" onmouseout="this.style.transform='';this.style.boxShadow='0 4px 16px rgba(242,200,17,0.12)';">
    <div style="position:absolute; top:-30px; right:-30px; width:150px; height:150px; background:radial-gradient(circle, rgba(242,200,17,0.15) 0%, transparent 70%); border-radius:50%;"></div>
    <div style="position:relative; z-index:2; display:flex; align-items:center; gap:20px;">
        <div style="display:flex; align-items:center; gap:10px; flex-shrink:0;">
            <img src="assets/img/city-logo.png" alt="City of Cincinnati" style="height:32px; width:auto; filter:brightness(0) invert(1); opacity:0.8;">
            <span style="font-size:16px; font-weight:200; color:rgba(255,255,255,0.15);">|</span>
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
                <rect x="2" y="6" width="4" height="16" rx="1" fill="#F2C811"/>
                <rect x="8" y="3" width="4" height="19" rx="1" fill="#E8B800"/>
                <rect x="14" y="8" width="4" height="14" rx="1" fill="#D4A300"/>
                <rect x="20" y="11" width="4" height="11" rx="1" fill="#C09200" opacity="0.7"/>
            </svg>
        </div>
        <div style="flex:1;">
            <div style="display:flex; align-items:baseline; gap:8px;">
                <h2 style="font-size:20px; font-weight:800;">City of Cincinnati</h2>
                <span style="font-size:16px; font-weight:200; color:rgba(255,255,255,0.2);">|</span>
                <span style="font-size:18px; font-weight:700; color:#F2C811;">Power BI</span>
            </div>
            <p style="font-size:13px; color:rgba(255,255,255,0.5); margin-top:4px;">Enterprise analytics dashboards — overtime trends, staffing metrics, budget analysis</p>
        </div>
        <div style="flex-shrink:0; display:flex; align-items:center; justify-content:center; width:40px; height:40px; background:rgba(242,200,17,0.12); border:1px solid rgba(242,200,17,0.2); border-radius:50%;">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#F2C811" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
        </div>
    </div>
</div>
</a>

<!-- Scheduling At A Deficit Card -->
<a href="dashboard.php?page=scheduling-deficit" style="text-decoration:none; display:block; margin-bottom:24px;">
<div style="
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(135deg, #1a0505 0%, #3b0a0a 40%, #DC2626 100%);
    padding: 40px 44px;
    color: #fff;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(220,38,38,0.15);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
">
    <div style="position:absolute; inset:0; opacity:0.05; background-image:
        radial-gradient(circle at 30% 70%, #FCA5A5 1px, transparent 1px),
        radial-gradient(circle at 70% 30%, #FF6B6B 1px, transparent 1px);
        background-size: 45px 45px, 55px 55px;
    "></div>

    <div style="position:absolute; top:-30px; right:-30px; width:180px; height:180px; background:radial-gradient(circle, rgba(220,38,38,0.2) 0%, transparent 70%); border-radius:50%;"></div>
    <div style="position:absolute; bottom:-50px; left:-10px; width:160px; height:160px; background:radial-gradient(circle, rgba(252,165,165,0.1) 0%, transparent 70%); border-radius:50%;"></div>

    <div style="position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:32px;">
        <div style="flex:1;">
            <div style="display:flex; align-items:center; gap:10px; margin-bottom:16px;">
                <div style="width:44px; height:44px; background:rgba(252,165,165,0.2); border:1px solid rgba(252,165,165,0.3); border-radius:12px; display:flex; align-items:center; justify-content:center;">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#FCA5A5" stroke-width="2">
                        <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
                        <line x1="12" y1="9" x2="12" y2="13"/>
                        <line x1="12" y1="17" x2="12.01" y2="17"/>
                    </svg>
                </div>
                <span style="font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:rgba(252,165,165,0.8);">Staffing Intelligence</span>
            </div>

            <h2 style="font-size:26px; font-weight:800; line-height:1.2; margin-bottom:8px; letter-spacing:-0.3px;">
                Scheduling At A Deficit
            </h2>
            <p style="font-size:15px; color:rgba(255,255,255,0.6); line-height:1.5; max-width:480px; margin-bottom:20px;">
                Real-time staffing deficit tracking — identifies when shifts are running below minimum manning, highlights overtime triggers, and forecasts upcoming shortfalls before they happen.
            </p>

            <div style="display:flex; gap:20px; flex-wrap:wrap;">
                <div style="display:flex; align-items:center; gap:6px;">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                    <span style="font-size:12px; color:rgba(255,255,255,0.5);">Minimum Manning Alerts</span>
                </div>
                <div style="display:flex; align-items:center; gap:6px;">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                    <span style="font-size:12px; color:rgba(255,255,255,0.5);">OT Trigger Identification</span>
                </div>
                <div style="display:flex; align-items:center; gap:6px;">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                    <span style="font-size:12px; color:rgba(255,255,255,0.5);">Shortfall Forecasting</span>
                </div>
            </div>

            <div style="margin-top:16px; display:inline-flex; align-items:center; gap:6px; padding:6px 14px; background:rgba(252,165,165,0.15); border:1px solid rgba(252,165,165,0.2); border-radius:20px;">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#FCA5A5" stroke-width="2"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
                <span style="font-size:11px; font-weight:600; color:#FCA5A5;">Under Construction — Waiting for APIs</span>
            </div>
        </div>

        <div style="flex-shrink:0; display:flex; align-items:center; justify-content:center; width:56px; height:56px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:50%;">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
        </div>
    </div>
</div>
</a>

<!-- Meeting Agendas Card (Collapsible) -->
<div style="
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(135deg, #0B2240 0%, #163158 40%, #1B6CB0 100%);
    color: #fff;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(11,34,64,0.2);

" id="meetingAgendasCard">
    <div style="position:absolute; inset:0; opacity:0.06; background-image:
        radial-gradient(circle at 25% 75%, #5BA4D9 1px, transparent 1px),
        radial-gradient(circle at 75% 25%, #00A6A0 1px, transparent 1px);
        background-size: 40px 40px, 55px 55px;
    "></div>
    <div style="position:absolute; top:-40px; right:-40px; width:200px; height:200px; background:radial-gradient(circle, rgba(91,164,217,0.15) 0%, transparent 70%); border-radius:50%;"></div>

    <div style="position:relative; z-index:2; padding:40px 44px; cursor:pointer;" onclick="toggleMeetingAgendas()">
        <div style="display:flex; align-items:center; justify-content:space-between; gap:32px;">
            <div style="flex:1;">
                <div style="display:flex; align-items:center; gap:10px; margin-bottom:16px;">
                    <div style="width:44px; height:44px; background:rgba(91,164,217,0.2); border:1px solid rgba(91,164,217,0.3); border-radius:12px; display:flex; align-items:center; justify-content:center;">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#5BA4D9" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
                    </div>
                    <span style="font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:rgba(91,164,217,0.8);">Taskforce Documents</span>
                </div>

                <h2 style="font-size:26px; font-weight:800; line-height:1.2; margin-bottom:8px; letter-spacing:-0.3px;">
                    Meeting Agendas
                </h2>
                <p style="font-size:15px; color:rgba(255,255,255,0.6); line-height:1.5; max-width:480px;">
                    Meeting summaries, AI-powered analysis, discussion topics, action items, and original PDF documents from the Overtime Taskforce.
                </p>
            </div>

            <div style="flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:8px;">
                <div style="width:56px; height:56px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); border-radius:50%; display:flex; align-items:center; justify-content:center;">
                    <svg id="meetingChevron" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" style="transition:transform 0.3s;"><polyline points="6 9 12 15 18 9"/></svg>
                </div>
                <span style="padding:4px 12px; background:rgba(91,164,217,0.15); border:1px solid rgba(91,164,217,0.25); border-radius:20px; font-size:10px; font-weight:600; color:#5BA4D9; letter-spacing:0.5px;">2 MEETINGS</span>
            </div>
        </div>
    </div>

    <!-- Collapsible meeting list -->
    <div id="meetingAgendasList" style="max-height:0; overflow:hidden; transition:max-height 0.4s cubic-bezier(0.4,0,0.2,1); background:rgba(255,255,255,0.97);">
        <a href="dashboard.php?page=meeting-agenda&id=1" target="_blank" style="display:flex; align-items:center; padding:16px 44px; text-decoration:none; color:#0B2240; border-bottom:1px solid rgba(0,0,0,0.06); transition:background 0.15s; position:relative; z-index:10;" onmouseover="this.style.background='rgba(0,0,0,0.03)'" onmouseout="this.style.background='transparent'">
            <div style="width:48px; height:48px; background:#1B6CB0; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; flex-shrink:0; margin-right:16px;">
                <span style="font-size:16px; font-weight:800; color:#fff; line-height:1;">25</span>
                <span style="font-size:9px; font-weight:600; color:rgba(255,255,255,0.7); text-transform:uppercase;">Mar</span>
            </div>
            <div style="flex:1; min-width:0;">
                <div style="font-size:15px; font-weight:700; margin-bottom:2px;">Meeting One — CFD Overtime Taskforce Kickoff</div>
                <div style="font-size:12px; color:#6B7280;">Tuesday, March 25, 2026 &middot; 3:00 PM</div>
            </div>
            <div style="display:flex; align-items:center; gap:8px; flex-shrink:0;">
                <span style="padding:3px 10px; background:#8CC63F15; border:1px solid #8CC63F30; border-radius:12px; font-size:10px; font-weight:600; color:#16A34A;">Completed</span>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9CA3AF" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
            </div>
        </a>

        <a href="dashboard.php?page=meeting-agenda&id=2" target="_blank" style="display:flex; align-items:center; padding:16px 44px; text-decoration:none; color:#0B2240; transition:background 0.15s; position:relative; z-index:10;" onmouseover="this.style.background='rgba(0,0,0,0.03)'" onmouseout="this.style.background='transparent'">
            <div style="width:48px; height:48px; background:#FF9500; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; flex-shrink:0; margin-right:16px;">
                <span style="font-size:16px; font-weight:800; color:#fff; line-height:1;">01</span>
                <span style="font-size:9px; font-weight:600; color:rgba(255,255,255,0.7); text-transform:uppercase;">Apr</span>
            </div>
            <div style="flex:1; min-width:0;">
                <div style="font-size:15px; font-weight:700; margin-bottom:2px;">Meeting Two</div>
                <div style="font-size:12px; color:#6B7280;">Tuesday, April 1, 2026 &middot; 2:00 PM</div>
            </div>
            <div style="display:flex; align-items:center; gap:8px; flex-shrink:0;">
                <span style="padding:3px 10px; background:#FF950015; border:1px solid #FF950030; border-radius:12px; font-size:10px; font-weight:600; color:#FF9500;">Upcoming</span>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9CA3AF" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
            </div>
        </a>
    </div>
</div>
<script>
function toggleMeetingAgendas() {
    const list = document.getElementById('meetingAgendasList');
    const chevron = document.getElementById('meetingChevron');
    const isOpen = list.style.maxHeight !== '0px' && list.style.maxHeight !== '';
    if (isOpen) {
        list.style.maxHeight = '0px';
        chevron.style.transform = 'rotate(0deg)';
    } else {
        list.style.maxHeight = list.scrollHeight + 'px';
        chevron.style.transform = 'rotate(180deg)';
    }
}
</script>

<div class="card" style="text-align:center; padding:80px 32px;">
    <div style="margin-bottom:24px;">
        <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="1.2" style="opacity:0.6;">
            <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
        </svg>
    </div>
    <h2 style="font-size:28px; font-weight:800; color:var(--primary); margin-bottom:8px;">Under Construction</h2>
    <p style="font-size:16px; color:var(--ios-secondary); max-width:400px; margin:0 auto;">
        APIs are on the way!
    </p>
</div>
<?php endif; ?>
