@extends('layouts.app')
@section('title', 'Dashboard')
@section('content')

  <div class="surface-card rounded-xl overflow-hidden">
    <div class="bg-primary px-8 py-8">
      <p class="text-label-md font-label-md text-on-primary-container uppercase tracking-wide mb-1">Head Office</p>
      <h3 class="text-headline-lg font-headline-lg text-on-primary mb-2">Welcome, {{ auth()->user()->name }}</h3>
      <p class="text-body-md font-body-md text-on-primary-container max-w-xl">
        Your Head of Department workspace. Department tools and reporting will appear here as they're rolled out.
      </p>
    </div>
  </div>

  <div class="grid grid-cols-1 md:grid-cols-3 gap-gutter mt-gutter">
    <div class="surface-card rounded-xl p-6">
      <span class="material-symbols-outlined text-primary text-[28px] mb-2">groups</span>
      <h4 class="text-headline-md font-headline-md text-on-surface mb-1">Your Team</h4>
      <p class="text-body-md font-body-md text-outline">Department roster and structure — coming soon.</p>
    </div>
    <div class="surface-card rounded-xl p-6">
      <span class="material-symbols-outlined text-primary text-[28px] mb-2">insights</span>
      <h4 class="text-headline-md font-headline-md text-on-surface mb-1">Reporting</h4>
      <p class="text-body-md font-body-md text-outline">Departmental reports and insights — coming soon.</p>
    </div>
    <div class="surface-card rounded-xl p-6">
      <span class="material-symbols-outlined text-primary text-[28px] mb-2">description</span>
      <h4 class="text-headline-md font-headline-md text-on-surface mb-1">Documents</h4>
      <p class="text-body-md font-body-md text-outline">Shared department documents — coming soon.</p>
    </div>
  </div>

@endsection