<div class="tw:relative tw:min-h-screen tw:flex tw:flex-col tw:overflow-hidden">
  <img src="https://images.unsplash.com/photo-1568792923760-d70635a89fdc?q=80&w=2000&auto=format&fit=crop"
       alt="" class="tw:absolute tw:inset-0 tw:w-full tw:h-full tw:object-cover">
  <div class="tw:absolute tw:inset-0 tw:bg-linear-to-r tw:from-neutral-950/70 tw:via-neutral-950/35 tw:to-neutral-950/10" aria-hidden="true"></div>
  <div class="tw:relative tw:flex-1 tw:flex tw:items-center tw:px-6 tw:py-12">
    <div class="tw:w-full tw:max-w-6xl tw:mx-auto tw:grid tw:gap-10 tw:items-center tw:lg:grid-cols-2">
      <div class="tw:bg-neutral-950/55 tw:backdrop-blur-sm tw:border tw:border-white/15 tw:rounded-2xl tw:text-white tw:p-8 tw:lg:p-10 tw:max-w-154">
        <div class="tw:flex tw:items-center tw:gap-3 tw:mb-6">
          <span class="tw:w-11 tw:h-11 tw:rounded-lg tw:bg-white tw:text-blue-800 tw:font-black tw:text-lg tw:inline-flex tw:items-center tw:justify-center tw:shrink-0" aria-hidden="true">H</span>
          <div class="tw:font-bold tw:text-lg">Hillcrest Sixth Form College</div>
        </div>
        <h1 class="tw:text-white tw:mb-3"><span class="tw:block tw:text-3xl tw:leading-tight">Welcome to Hillcrest admissions</span></h1>
        <p class="tw:text-base tw:leading-relaxed tw:text-white/85 tw:mb-6">To continue an application, sign in with the details we emailed you. New to Hillcrest? Create an account to start your application for September 2026 — it takes around 20 minutes.</p>
        <ul class="tw:list-none tw:p-0 tw:m-0 tw:flex tw:flex-col tw:gap-3">
          <li class="tw:flex tw:gap-3 tw:items-start"><i class="fa-solid fa-circle-check tw:text-green-400 tw:mt-1" aria-hidden="true"></i><span class="tw:text-sm tw:leading-relaxed tw:text-white/85">Save as you go — return any time to finish</span></li>
          <li class="tw:flex tw:gap-3 tw:items-start"><i class="fa-solid fa-circle-check tw:text-green-400 tw:mt-1" aria-hidden="true"></i><span class="tw:text-sm tw:leading-relaxed tw:text-white/85">Track your offer and enrolment steps in one place</span></li>
          <li class="tw:flex tw:gap-3 tw:items-start"><i class="fa-solid fa-circle-check tw:text-green-400 tw:mt-1" aria-hidden="true"></i><span class="tw:text-sm tw:leading-relaxed tw:text-white/85">Stuck? Ask Emma in the corner, or the team will help</span></li>
        </ul>
      </div>
      <div class="tw:w-full tw:max-w-92 tw:justify-self-center tw:lg:justify-self-end">
        <div class="tw-card">
          <div class="tw-card-body">
            <h2>Sign in</h2>
            <p class="tw:text-body-s tw:leading-body-s tw:text-muted tw:mb-5">Sign in to continue an application, or create an account to start a new one.</p>
            <div class="tw:flex tw:flex-col tw:gap-3">
              <div class="tw-form-group">
                <label class="tw-form-label" for="login-email">Email address</label>
                <input type="email" id="login-email" class="tw-form-control" placeholder="you@example.com" autocomplete="email">
              </div>
              <div class="tw-form-group">
                <label class="tw-form-label" for="login-password">Password</label>
                <input type="password" id="login-password" class="tw-form-control" placeholder="••••••••" autocomplete="current-password">
              </div>
              <button type="button" class="tw-btn tw-btn-primary tw-btn-block tw:mt-1.5">Sign in</button>
              <button type="button" class="tw-btn tw-btn-secondary tw-btn-block">Start a new application</button>
            </div>
            <div class="tw:flex tw:flex-col tw:items-center tw:gap-2 tw:mt-4">
              <button type="button" class="tw:bg-transparent tw:border-0 tw:p-0 tw:cursor-pointer tw:text-body-s tw:leading-body-s tw:font-semibold tw:text-primary tw:hover:underline">Forgot your password?</button>
              <button type="button" class="tw:bg-transparent tw:border-0 tw:p-0 tw:cursor-pointer tw:text-body-s tw:leading-body-s tw:font-semibold tw:text-orange-700 tw:hover:underline">Trouble logging in?</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div data-controller="applicant-emma"
     data-applicant-emma-surface-value="public"
     data-applicant-emma-welcome-value="Welcome to Hillcrest's application pages. I'm Emma — I can help you sign in, start an application, or answer questions about applying, all from what the college has published."
     data-applicant-emma-hidden-class="tw-support-hidden"
     data-applicant-emma-fab-open-class="tw-support-fab--open"
     data-applicant-emma-invalid-class="tw-is-invalid">
    <button class="tw-support-fab" type="button" aria-label="Chat with Emma" aria-expanded="false"
          data-applicant-emma-target="fab" data-action="applicant-emma#toggle">
      <span class="tw-support-fab-ring"></span>
      <span class="tw-support-fab-av"><i class="fa-solid fa-message" aria-hidden="true"></i></span>
    </button>
    <div class="tw-support-panel tw-support-hidden" role="dialog" aria-label="Emma chat"
       data-applicant-emma-target="panel"
       data-action="keydown.esc->applicant-emma#close">
      <div class="tw-support-panel-hdr">
        <span class="tw:w-8 tw:h-8 tw:rounded-full tw:bg-white/20 tw:flex tw:items-center tw:justify-center tw:shrink-0" aria-hidden="true">
          <span class="tw:w-3.5 tw:h-3.5 tw:rounded-full tw:bg-white/90"></span>
        </span>
        <div class="tw-support-panel-hdr-info">
          <div class="tw-support-panel-hdr-name">Emma · Hillcrest Sixth Form</div>
          <div class="tw-support-panel-hdr-status">
            <i class="fa-solid fa-circle tw:text-[8px] tw:text-white/60" data-applicant-emma-target="dotIdle" aria-hidden="true"></i>
            <i class="fa-solid fa-circle tw:text-[8px] tw:text-green-400 tw-support-hidden" data-applicant-emma-target="dotLive" aria-hidden="true"></i>
            <span data-applicant-emma-target="status">Answers from what Hillcrest has published</span>
          </div>
        </div>
        <button type="button"
              class="tw-support-hidden tw:bg-white/10 tw:hover:bg-white/20 tw:text-white/90 tw:border-0 tw:rounded-lg tw:h-9 tw:px-2.5 tw:text-body-xs tw:leading-body-xs tw:font-semibold tw:cursor-pointer tw:shrink-0 tw:focus-visible:ring-4 tw:focus-visible:ring-white/40 tw:focus-visible:outline-none"
              data-applicant-emma-target="endChat" data-action="applicant-emma#endLive">End chat</button>
        <div class="tw-support-panel-hdr-btns">
          <button class="tw-support-panel-btn" type="button" aria-label="Close chat" data-action="applicant-emma#close">
            <i class="fa-solid fa-xmark" aria-hidden="true"></i>
          </button>
        </div>
      </div>
      <div class="tw-support-panel-thread" role="log" aria-live="polite" data-applicant-emma-target="thread"></div>
      <div class="tw-support-hidden tw:flex tw:items-center tw:gap-2 tw:px-3.5 tw:py-2.5 tw:bg-orange-100 tw:text-orange-800 tw:text-body-xs tw:leading-body-xs tw:border-t tw:border-orange-200"
         data-applicant-emma-target="rateStrip" role="status">
        <i class="fa-solid fa-hourglass-half" aria-hidden="true"></i>
        You've sent a lot of messages — please try again in a few minutes.
      </div>
      <div class="tw-support-panel-composer">
        <div class="tw-chat-input-area">
          <div class="tw-chat-input-row">
            <input type="text" class="tw-chat-input" placeholder="Ask Emma about Hillcrest…" aria-label="Message Emma"
                 data-applicant-emma-target="input"
                 data-action="keydown.enter->applicant-emma#send">
            <button class="tw-chat-send" type="button" aria-label="Send"
                  data-applicant-emma-target="send" data-action="applicant-emma#send">
              <i class="fa-solid fa-paper-plane" aria-hidden="true"></i>
            </button>
          </div>
        </div>
      </div>
      <a href="https://www.applicaa.com" target="_blank" rel="noopener"
       class="tw:flex tw:items-center tw:justify-center tw:gap-1 tw:px-3 tw:py-1.5 tw:bg-neutral-100 tw:border-t tw:border-neutral-200 tw:text-body-xs tw:leading-body-xs tw:text-muted tw:no-underline tw:hover:text-neutral-700 tw:shrink-0">
        Powered by <strong class="tw:font-bold tw:text-primary-500">Applicaa</strong>
      </a>
    </div>
    <template data-applicant-emma-target="tplEmma">
      <div class="tw-chat-msg">
        <div class="tw-chat-avatar" aria-hidden="true">E</div>
        <div class="tw:flex tw:flex-col tw:gap-2 tw:min-w-0">
          <div class="tw-chat-bubble tw:whitespace-pre-line" data-slot="text"></div>
          <div class="tw:flex tw:flex-col tw:gap-1.5 tw:items-start" data-slot="cites"></div>
          <div class="tw:flex tw:flex-wrap tw:gap-1.5" data-slot="chips"></div>
        </div>
      </div>
    </template>
    <template data-applicant-emma-target="tplUser">
      <div class="tw-chat-msg tw-chat-msg-user">
        <div class="tw-chat-bubble-user tw:whitespace-pre-line" data-slot="text"></div>
      </div>
    </template>
    <template data-applicant-emma-target="tplAgent">
      <div class="tw-chat-msg">
        <span class="tw-avatar tw-avatar-sm tw-support-av-agent" aria-hidden="true">SW</span>
        <div class="tw-chat-bubble tw:whitespace-pre-line">
          <div class="tw:text-body-xs tw:leading-body-xs tw:font-bold tw:uppercase tw:tracking-wide tw:text-primary-600 tw:mb-1">Sarah · Admissions team</div>
          <div data-slot="text"></div>
        </div>
      </div>
    </template>
    <template data-applicant-emma-target="tplSys">
      <div class="tw:text-center tw:text-body-xs tw:leading-body-xs tw:text-muted tw:px-5 tw:py-0.5">
        <i class="fa-solid fa-ticket tw:mr-1.5" data-slot="icon" aria-hidden="true"></i><span data-slot="text"></span>
      </div>
    </template>
    <template data-applicant-emma-target="tplTyping">
      <div class="tw-chat-msg">
        <div class="tw-chat-avatar" aria-hidden="true">E</div>
        <div class="tw-chat-bubble tw:flex tw:items-center tw:gap-1" aria-label="Emma is typing">
          <span class="tw:w-1.5 tw:h-1.5 tw:rounded-full tw:bg-neutral-400 tw:animate-bounce"></span>
          <span class="tw:w-1.5 tw:h-1.5 tw:rounded-full tw:bg-neutral-400 tw:animate-bounce tw:[animation-delay:120ms]"></span>
          <span class="tw:w-1.5 tw:h-1.5 tw:rounded-full tw:bg-neutral-400 tw:animate-bounce tw:[animation-delay:240ms]"></span>
        </div>
      </div>
    </template>
    <template data-applicant-emma-target="tplCite">
      <a class="tw:inline-flex tw:items-center tw:gap-1.5 tw:self-start tw:rounded-md tw:bg-blue-100 tw:hover:bg-blue-200 tw:px-2 tw:py-1 tw:text-body-xs tw:leading-body-xs tw:text-blue-700 tw:no-underline tw:cursor-pointer">
        <i class="fa-solid fa-link" aria-hidden="true"></i><span data-slot="label"></span>
      </a>
    </template>
    <template data-applicant-emma-target="tplChip">
      <button type="button" class="tw-chat-chip" data-action="applicant-emma#chip"></button>
    </template>
    <template data-applicant-emma-target="tplQueue">
      <div class="tw:rounded-xl tw:border tw:border-neutral-200 tw:bg-white tw:p-3.5 tw:flex tw:flex-col tw:items-center tw:gap-2 tw:text-center">
        <i class="fa-solid fa-user-clock tw:text-lg tw:text-primary" aria-hidden="true"></i>
        <div class="tw:text-body-s tw:leading-body-s tw:text-neutral-900"><strong>You're <span data-slot="pos">2nd</span> in the queue</strong></div>
        <div class="tw:text-body-xs tw:leading-body-xs tw:text-muted">Your position updates as chats finish.</div>
        <button type="button" class="tw-btn tw-btn-tertiary tw-btn-sm" data-action="applicant-emma#leaveQueueAsTicket">Leave it with us as a ticket instead</button>
      </div>
    </template>
    <template data-applicant-emma-target="tplEoi">
      <form class="tw:rounded-xl tw:border tw:border-neutral-200 tw:bg-white tw:p-3.5 tw:flex tw:flex-col tw:gap-3" novalidate
          data-emma-form="eoi" data-action="submit->applicant-emma#submitEoi">
        <div class="tw:text-body-s tw:leading-body-s tw:font-bold tw:text-neutral-900">Your details</div>
        <div class="tw-form-group">
          <label class="tw-form-label tw-form-label-required" for="public-eoi-parent">Parent / carer name</label>
          <input type="text" id="public-eoi-parent" class="tw-form-control" data-slot="eoi-parent" aria-required="true">
          <div class="tw-invalid-feedback">Please enter your name</div>
        </div>
        <div class="tw-form-group">
          <label class="tw-form-label tw-form-label-required" for="public-eoi-email">Email address</label>
          <input type="email" id="public-eoi-email" class="tw-form-control" data-slot="eoi-email" aria-required="true">
          <div class="tw-invalid-feedback">Enter a valid email address</div>
        </div>
        <div class="tw-form-group">
          <label class="tw-form-label tw-form-label-optional" for="public-eoi-phone">Phone</label>
          <input type="tel" id="public-eoi-phone" class="tw-form-control" data-slot="eoi-phone">
        </div>
        <div class="tw-form-group">
          <label class="tw-form-label tw-form-label-required" for="public-eoi-child">Child's name</label>
          <input type="text" id="public-eoi-child" class="tw-form-control" data-slot="eoi-child" aria-required="true">
          <div class="tw-invalid-feedback">Please enter your child's name</div>
        </div>
        <div class="tw-form-group">
          <label class="tw-form-label tw-form-label-required" for="public-eoi-year">Expected year of entry</label>
          <select id="public-eoi-year" class="tw-form-select" data-slot="eoi-year" aria-required="true">
            <option>Year 12 — September 2026</option>
            <option>Year 12 — September 2027</option>
            <option>Year 13 transfer</option>
          </select>
        </div>
        <div class="tw-form-check">
          <input type="checkbox" class="tw-form-check-input" id="public-eoi-consent" data-slot="eoi-consent" aria-required="true">
          <label class="tw-form-check-label" for="public-eoi-consent">
            Hillcrest may contact me about my enquiry. See the college's <a class="tw:underline">privacy notice</a>.
          </label>
          <div class="tw-invalid-feedback">Please confirm consent so the school can contact you</div>
        </div>
        <button type="submit" class="tw-btn tw-btn-primary tw-btn-block">Send to the school</button>
      </form>
    </template>
    <template data-applicant-emma-target="tplContact">
      <form class="tw:rounded-xl tw:border tw:border-neutral-200 tw:bg-white tw:p-3.5 tw:flex tw:flex-col tw:gap-3" novalidate
          data-emma-form="contact" data-action="submit->applicant-emma#submitContact">
        <div class="tw:text-body-s tw:leading-body-s tw:font-bold tw:text-neutral-900">Where should the school reply?</div>
        <div class="tw-form-group">
          <label class="tw-form-label tw-form-label-required" for="public-ct-name">Your name</label>
          <input type="text" id="public-ct-name" class="tw-form-control" data-slot="ct-name" aria-required="true">
          <div class="tw-invalid-feedback">Please enter your name</div>
        </div>
        <div class="tw-form-group">
          <label class="tw-form-label tw-form-label-required" for="public-ct-email">Email address</label>
          <input type="email" id="public-ct-email" class="tw-form-control" data-slot="ct-email" aria-required="true">
          <div class="tw-invalid-feedback">Enter a valid email address</div>
        </div>
        <button type="submit" class="tw-btn tw-btn-primary tw-btn-block">Send to the team</button>
      </form>
    </template>
  </div>
</div>