<div data-controller="sidebar">
  <aside class="tw-sidebar">
    <!-- Logo -->
    <div class="tw-sidebar-logo">
      <a href="#" class="tw-sidebar-logo-link">
        <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M37.47 38L29.43 17.99H26.34L18.27 38H21.12L22.89 33.53H32.85L34.62 38H37.47ZM32.13 31.34H23.64L27.87 20.54L32.13 31.34Z" fill="white"/>
          <path d="M39 18V14H37V18H33V20H37V24H39V20H43V18H39Z" fill="#EC634B"/>
        </svg>
      </a>
    </div>
    <!-- Navigation -->
    <nav class="tw-sidebar-nav" role="navigation" aria-label="LA Dashboard navigation">
      <!-- Overview (navigates to the Overview page) -->
      <a href="/lookbook/preview/projects/la_dashboard/overview"
       data-turbo="false"
       class="tw-sidebar-item"
       data-label="Overview">
        <i class="fa-light fa-chart-pie tw-sidebar-icon"></i>
        <span class="tw:sr-only">Overview</span>
      </a>
      <!-- Comparison (navigates to the Comparison page) -->
      <a href="/lookbook/preview/projects/la_dashboard/comparison"
       data-turbo="false"
       class="tw-sidebar-item"
       data-label="Comparison">
        <i class="fa-light fa-chart-column tw-sidebar-icon"></i>
        <span class="tw:sr-only">Comparison</span>
      </a>
      <!-- Schools (navigates to the Schools page) -->
      <a href="/lookbook/preview/projects/la_dashboard/schools"
       data-turbo="false"
       class="tw-sidebar-item"
       data-label="Schools">
        <i class="fa-light fa-school tw-sidebar-icon"></i>
        <span class="tw:sr-only">Schools</span>
      </a>
      <!-- Students (navigates to the Students page) -->
      <a href="/lookbook/preview/projects/la_dashboard/students"
       data-turbo="false"
       class="tw-sidebar-item"
       data-label="Students">
        <i class="fa-light fa-users tw-sidebar-icon"></i>
        <span class="tw:sr-only">Students</span>
      </a>
      <!-- Destination Tracker (navigates to the Destination Tracker page) -->
      <a href="/lookbook/preview/projects/la_dashboard/destination_tracker"
       data-turbo="false"
       class="tw-sidebar-item"
       data-label="Destination Tracker">
        <i class="fa-light fa-location-dot tw-sidebar-icon"></i>
        <span class="tw:sr-only">Destination Tracker</span>
      </a>
      <!-- Transitions (navigates to the Transitions page) -->
      <a href="/lookbook/preview/projects/la_dashboard/transitions"
       data-turbo="false"
       class="tw-sidebar-item tw-active"
       data-label="Transitions">
        <i class="fa-light fa-right-left tw-sidebar-icon"></i>
        <span class="tw:sr-only">Transitions</span>
      </a>
      <!-- SEND & NEET (navigates to the SEND & NEET page) -->
      <a href="/lookbook/preview/projects/la_dashboard/send_neet"
       data-turbo="false"
       class="tw-sidebar-item"
       data-label="SEND & NEET">
        <i class="fa-light fa-person-circle-exclamation tw-sidebar-icon"></i>
        <span class="tw:sr-only">SEND & NEET</span>
      </a>
    </nav>
    <!-- Bottom Section -->
    <div class="tw-sidebar-bottom">
      <a href="/lookbook/preview/projects/la_dashboard/settings"
       data-turbo="false"
       class="tw-sidebar-item"
       data-label="Settings">
        <i class="fa-light fa-cogs tw-sidebar-icon"></i>
        <span class="tw:sr-only">Settings</span>
      </a>
    </div>
  </aside>
  <header class="tw-topbar" role="banner">
    <div class="tw-topbar-left">
      <!-- LA brand lockup (logo placeholder + authority name) -->
      <div class="tw:flex tw:items-center tw:gap-3">
        <div class="tw-avatar tw-avatar-square tw-avatar-icon" role="img" aria-label="Hackney logo">
          <i class="fa-regular fa-building-columns tw:text-base"></i>
        </div>
        <h2 class="tw-h2 tw:text-neutral-800 tw:mb-0">Hackney</h2>
      </div>
    </div>
    <div class="tw-topbar-right">
      <!-- Action Buttons -->
      <button type="button" class="tw-btn tw-btn-outline-success tw-btn-multiline tw:hidden" data-controller="tooltip" data-tooltip-content-value="Referral Program" data-tooltip-placement-value="bottom">
        <i class="fa-solid fa-gift tw-icon-16"></i>
        Refer<br>
         & Save
      </button>
      <button type="button" class="tw-btn tw-btn-outline-primary tw-btn-multiline tw:hidden" data-controller="tooltip" data-tooltip-content-value="Discuss Ideas & Submit Feature Requests" data-tooltip-placement-value="bottom">
        <i class="fa-solid fa-users tw-icon-16"></i>
        Applicaa<br>
         Community
      </button>
      <button type="button" class="tw-btn tw-btn-outline-primary tw-btn-multiline" data-controller="tooltip" data-tooltip-content-value="Support & Feature Requests" data-tooltip-placement-value="bottom">
        <i class="fa-solid fa-comment-question tw-icon-16"></i>
        Support<br>
         & Requests
      </button>
      <div class="tw-topbar-action-icons">
        <!-- Notification Icon -->
        <button type="button" class="tw-btn tw-btn-tertiary tw-btn-icon tw-topbar-notification-btn" aria-label="Notifications" data-controller="tooltip" data-tooltip-content-value="Notification" data-tooltip-placement-value="bottom">
          <i class="fa-solid fa-bell tw-icon-16"></i>
        </button>
      </div>
      <div class="tw-topbar-divider"></div>
      <!-- User Avatar Dropdown -->
      <div class="tw-dropdown tw-dropdown-icon tw-dropdown-borderless" data-controller="dropdown">
        <button type="button" class="tw-dropdown-trigger tw-topbar-avatar"
              aria-label="User menu"
              aria-haspopup="true"
              aria-expanded="false"
              data-dropdown-target="trigger"
              data-action="click->dropdown#toggle keydown->dropdown#keydown">
          <div class="tw-avatar tw-avatar-primary" role="img" aria-label="Jane Doe">
            <span>JD</span>
          </div>
        </button>
        <div class="tw-dropdown-menu tw-dropdown-menu-end" role="menu" data-dropdown-target="menu" tabindex="-1">
          <div class="tw-dropdown-header">John Doe</div>
          <div class="tw-dropdown-divider"></div>
          <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
            <i class="fa-regular fa-circle-sterling tw-dropdown-item-icon"></i>
            <span class="tw-dropdown-item-text">Referrals & billing</span>
          </button>
          <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
            <i class="fa-regular fa-lock tw-dropdown-item-icon"></i>
            <span class="tw-dropdown-item-text">Password & security</span>
          </button>
          <div class="tw-dropdown-divider"></div>
          <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
            <i class="fa-regular fa-layer-group tw-dropdown-item-icon"></i>
            <span class="tw-dropdown-item-text">Multiple form</span>
          </button>
          <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
            <i class="fa-regular fa-envelope tw-dropdown-item-icon"></i>
            <span class="tw-dropdown-item-text">Email preferences</span>
          </button>
          <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
            <i class="fa-regular fa-right-from-bracket tw-dropdown-item-icon"></i>
            <span class="tw-dropdown-item-text">Logout</span>
          </button>
        </div>
      </div>
    </div>
  </header>
  <main class="tw-sidebar-topbar-content-offset tw:bg-background tw-min-h-screen-offset">
    <div class="tw-container-fluid tw-page-container" data-controller="transitions">
      <div class="tw-page-header tw:mb-4">
        <div class="tw-page-header-main">
          <div class="tw-page-header-title-group">
            <h1 class="tw-page-header-title">Transitions</h1>
          </div>
        </div>
        <div class="tw-page-header-slot">
          <p class="tw-page-header-subtitle">Managing the Year 6 to Year 7 move into secondary school</p>
        </div>
      </div>
      <div class="tw:flex tw:gap-4 tw:p-6 tw:rounded-2xl" style="background-image: linear-gradient(130deg, var(--tw-color-primary-600), var(--tw-color-blue-500))">
        <!-- Left: coming-soon message + CTA -->
        <div class="tw:flex tw:justify-center tw:items-center tw:flex-1">
          <div class="tw:p-4 tw:py-6 tw:max-w-3xl">
            <div class="tw:mb-4">
              <svg height="64" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><g><path d="m512 256c0 83.574-40.048 157.795-102 204.518-2.006 1.513-6.117-3.111-8.168-1.656-6.153 4.363-12.506 8.461-19.045 12.278-1.602.935-1.131 7.96-2.755 8.861-36.744 20.388-79.032 31.999-124.032 31.999-141.385 0-256-114.615-256-256s114.615-256 256-256 256 114.615 256 256z" fill="#203e76"></path><path d="m485.063 256c0 115.428-93.573 209-209 209s-209-93.572-209-209 93.572-209 209-209 209 93.572 209 209z" fill="#274c91"></path><path d="m320 430h-270c-5.523 0-10-4.477-10-10v-380c0-5.523 4.477-10 10-10h270c5.523 0 10 4.477 10 10v380c0 5.523-4.477 10-10 10z" fill="#91aee2"></path><path d="m80 430h-30c-5.523 0-10-4.477-10-10v-380c0-5.523 4.477-10 10-10h30c-5.523 0-10 4.477-10 10v380c0 5.523 4.477 10 10 10z" fill="#6990d7"></path><path d="m320 80 90 90v290.518c-9.497 7.162-19.507 13.678-29.968 19.482h-260.032c-11.198-6.213-20-10-20-21.006v-368.994c0-5.523 4.477-10 10-10z" fill="#dce6eb"></path><path d="m130 480h-20c-5.523 0-10-4.477-10-10v-380c0-5.523 4.477-10 10-10h20c-5.523 0-10 4.477-10 10v380c0 5.523 4.477 10 10 10z" fill="#c8d2dc"></path><path d="m375 330h-240c-2.761 0-5-2.239-5-5v-110c0-2.761 2.239-5 5-5h240c2.761 0 5 2.239 5 5v110c0 2.761-2.239 5-5 5z" fill="#91aee2"></path><path d="m155 330h-20c-2.761 0-5-2.239-5-5v-110c0-2.761 2.239-5 5-5h20c-2.761 0-5 2.239-5 5v110c0 2.761 2.239 5 5 5z" fill="#6990d7"></path><path d="m375 190h-240c-2.761 0-5-2.239-5-5v-70c0-2.761 2.239-5 5-5h180.66c35.534 0 64.34 28.806 64.34 64.34v10.66c0 2.761-2.239 5-5 5z" fill="#bacbec"></path><path d="m195.811 450h-60.811c-2.761 0-5-2.239-5-5v-90c0-2.761 2.239-5 5-5h60.811c2.761 0 5 2.239 5 5v90c0 2.761-2.239 5-5 5z" fill="#6990d7"></path><path d="m154.189 450h-19.189c-2.761 0-5-2.239-5-5v-90c0-2.761 2.239-5 5-5h19.189c-2.761 0-5 2.239-5 5v90c0 2.761 2.239 5 5 5z" fill="#4172cc"></path><path d="m375 450h-150.069c-2.761 0-5-2.239-5-5v-90c0-2.761 2.239-5 5-5h150.069c2.761 0 5 2.239 5 5v90c0 2.761-2.239 5-5 5z" fill="#bacbec"></path><path d="m231.902 380.145c-.353-6.079 2.916-11.431 7.85-14.098.752-.407 1.624.255 1.447 1.092-.269 1.277-.376 2.613-.298 3.986.429 7.548 6.552 13.67 14.099 14.1 1.374.078 2.71-.029 3.986-.298.837-.177 1.499.695 1.092 1.447-2.668 4.934-8.02 8.203-14.098 7.85-7.535-.438-13.64-6.543-14.078-14.079zm27.085 45.282c-1.276.269-2.613.376-3.986.298-7.548-.429-13.67-6.552-14.099-14.1-.078-1.374.029-2.71.298-3.986.177-.837-.695-1.499-1.447-1.092-4.933 2.667-8.203 8.02-7.85 14.098.438 7.536 6.543 13.641 14.079 14.079 6.079.353 11.431-2.916 14.098-7.85.406-.752-.256-1.624-1.093-1.447z" fill="#6990d7"></path><path d="m360 130c0-2.761-2.239-5-5-5h-200c-2.761 0-5 2.239-5 5 0 2.761 2.239 5 5 5h200c2.761 0 5-2.239 5-5zm-1.603 20c0-2.761-2.239-5-5-5h-198.397c-2.761 0-5 2.239-5 5 0 2.761 2.239 5 5 5h198.397c2.761 0 5-2.239 5-5zm-68.931 20c0-2.761-2.239-5-5-5h-129.466c-2.761 0-5 2.239-5 5 0 2.761 2.239 5 5 5h129.466c2.761 0 5-2.239 5-5zm-51.59 203.25c0-2.599.661-5.044 1.825-7.176 2.131-1.163 4.576-1.824 7.175-1.824 8.284 0 15 6.716 15 15 0 2.599-.661 5.044-1.825 7.176-2.131 1.163-4.576 1.824-7.175 1.824-8.284 0-15-6.716-15-15zm9 31.5c-2.599 0-5.044.661-7.175 1.824-1.163 2.131-1.825 4.576-1.825 7.176 0 8.284 6.716 15 15 15 2.599 0 5.044-.661 7.175-1.824 1.163-2.132 1.825-4.576 1.825-7.176 0-8.284-6.716-15-15-15zm113.124-34.5c0-2.761-2.239-5-5-5h-71c-2.761 0-5 2.239-5 5 0 2.761 2.239 5 5 5h71c2.761 0 5-2.239 5-5zm-27.206 20c0-2.761-2.239-5-5-5h-43.794c-2.761 0-5 2.239-5 5 0 2.761 2.239 5 5 5h43.794c2.761 0 5-2.239 5-5zm27.206 20.5c0-2.761-2.239-5-5-5h-71c-2.761 0-5 2.239-5 5 0 2.761 2.239 5 5 5h71c2.761 0 5-2.239 5-5zm-27.206 20c0-2.761-2.239-5-5-5h-43.794c-2.761 0-5 2.239-5 5 0 2.761 2.239 5 5 5h43.794c2.761 0 5-2.239 5-5z" fill="#91aee2"></path><path d="m410 170h-80c-5.523 0-10-4.477-10-10v-80z" fill="#fff5f5"></path><path d="m499.692 270c0 1.989-.79 3.896-2.196 5.304l-31.648 31.648c-1.465 1.464-3.385 2.196-5.304 2.196s-3.839-.732-5.304-2.196c-2.929-2.93-2.929-7.678 0-10.607l18.845-18.845h-134.562c-4.143 0-7.5-3.357-7.5-7.5s3.357-7.5 7.5-7.5h134.562l-18.845-18.844c-2.929-2.93-2.929-7.678 0-10.607 2.93-2.928 7.679-2.928 10.606 0l31.649 31.647c1.407 1.408 2.197 3.315 2.197 5.304zm-182.52-24.375h100.962c4.143 0 7.5-3.357 7.5-7.5s-3.357-7.5-7.5-7.5h-100.962c-4.143 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5zm100.962 49h-100.962c-4.143 0-7.5 3.357-7.5 7.5s3.357 7.5 7.5 7.5h100.962c4.143 0 7.5-3.357 7.5-7.5s-3.357-7.5-7.5-7.5z" fill="#ffc14f"></path><path d="m230.782 279.743c-3.601 6.66-10.826 11.074-19.033 10.597-10.173-.591-18.415-8.833-19.006-19.006-.477-8.206 3.937-15.432 10.597-19.033 1.016-.549 2.192.345 1.954 1.475-.364 1.723-.508 3.527-.403 5.382.579 10.189 8.845 18.455 19.034 19.034 1.854.105 3.658-.039 5.382-.403 1.13-.238 2.024.938 1.475 1.954zm-63.671-3.941c-1.276.269-2.613.376-3.986.298-7.548-.429-13.67-6.552-14.099-14.099-.078-1.374.029-2.71.298-3.986.177-.837-.695-1.499-1.447-1.093-4.934 2.668-8.203 8.02-7.85 14.098.438 7.536 6.543 13.641 14.079 14.079 6.079.353 11.431-2.916 14.098-7.85.406-.752-.256-1.623-1.093-1.447z" fill="#f29500"></path><path d="m312.672 270c0 4.143-3.357 7.5-7.5 7.5h-41.649c-4.143 0-7.5-3.357-7.5-7.5s3.357-7.5 7.5-7.5h41.649c4.143 0 7.5 3.357 7.5 7.5zm-67.5-24.625h25.287c4.143 0 7.5-3.357 7.5-7.5s-3.357-7.5-7.5-7.5h-25.287c-4.143 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5zm25.288 49h-25.287c-4.143 0-7.5 3.357-7.5 7.5s3.357 7.5 7.5 7.5h25.287c4.143 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5zm-57.503-44.5c-3.509 0-6.809.893-9.687 2.463-1.57 2.877-2.463 6.178-2.463 9.687 0 11.184 9.066 20.25 20.25 20.25 3.509 0 6.809-.893 9.687-2.463 1.57-2.877 2.463-6.178 2.463-9.687 0-11.183-9.066-20.25-20.25-20.25zm-57.957 5.25c-2.599 0-5.044.661-7.175 1.825-1.163 2.131-1.825 4.576-1.825 7.175 0 8.284 6.716 15 15 15 2.599 0 5.044-.661 7.175-1.825 1.163-2.131 1.825-4.576 1.825-7.175 0-8.284-6.716-15-15-15z" fill="#ffb52d"></path></g></svg>
            </div>
            <p class="tw-h1 tw:mb-3"><span class="tw:text-white">One shared, accurate picture of every child</span></p>
            <span class="tw-badge tw-badge-success-soft tw:mb-2"><i class="fa-regular fa-calendar-day tw:mr-0.5" aria-hidden="true"></i> Coming September 2026</span>
            <p class="tw:text-body-l tw:leading-body-l tw:mb-5">
              <span class="tw:text-white tw:opacity-70">Every summer, thousands of Hackney pupils move from Year 6 into Year 7 — and vital information too often gets lost between primary and secondary schools. Transitions gives both sides the same accurate picture of every child, so no pupil starts secondary school as a stranger.</span>
            </p>
            <button type="button" class="tw-btn tw-btn-lg tw-btn-info" data-action="click->transitions#notify">
              <i class="fa-regular fa-bell tw:mr-1" aria-hidden="true"></i> <strong>Notify me when it's ready</strong>
            </button>
          </div>
        </div>
        <!-- Right: what it will solve -->
        <div class="tw-card tw:w-[360px] tw:self-center">
          <div class="tw-card-body">
            <h2 class="tw-card-title tw:mb-2">What it will solve</h2>
            <div class="tw:flex tw:items-start tw:gap-3 tw:py-4">
              <span class="tw-avatar tw-avatar-blue tw:shrink-0" aria-hidden="true">
                <i class="fa-regular fa-arrow-right-arrow-left"></i>
              </span>
              <div class="tw:flex-1">
                <p class="tw:font-semibold tw:mb-1">Seamless primary-to-secondary handover</p>
                <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-500 tw:mb-0">Carry every Year 6 record straight into secondary, so nothing is rekeyed or lost when a pupil moves school.</p>
              </div>
            </div>
            <div class="tw:flex tw:items-start tw:gap-3 tw:py-4 tw:border-t tw:border-neutral-200">
              <span class="tw-avatar tw-avatar-blue tw:shrink-0" aria-hidden="true">
                <i class="fa-regular fa-location-dot"></i>
              </span>
              <div class="tw:flex-1">
                <p class="tw:font-semibold tw:mb-1">Know your incoming Year 7 cohort</p>
                <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-500 tw:mb-0">Give each secondary an early, accurate picture of exactly which pupils are joining and where they're coming from.</p>
              </div>
            </div>
            <div class="tw:flex tw:items-start tw:gap-3 tw:py-4 tw:border-t tw:border-neutral-200">
              <span class="tw-avatar tw-avatar-blue tw:shrink-0" aria-hidden="true">
                <i class="fa-regular fa-shield-heart"></i>
              </span>
              <div class="tw:flex-1">
                <p class="tw:font-semibold tw:mb-1">Protect vulnerable pupils</p>
                <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-500 tw:mb-0">Surface SEND, safeguarding and at-risk pupils early, so the right support is ready from the very first day of Year 7.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="tw-toast-container" data-controller="toast" data-transitions-target="toastContainer"></div>
    </div>
  </main>
</div>