@extends('emails.layouts.main')
@section('title', 'Welcome to Readingful')
@section('content')
<p
  style="
    font-size: 2.8rem;
    color: #000000;
    margin-top: 5px;
    margin-bottom: 18px;
    font-family: 'Readmore', Georgia, serif;
  "
>
  Hello,
  <b style="font-family: 'Readingful', Georgia, serif; font-weight: 600"
    >{{ explode(' ', $user->name)[0] ?? $user->name }}</b
  >
</p>

{{-- Email body paragraphs --}}
<p style="font-family: 'Readmore', Georgia, serif; font-size: 1.8rem; color: #000000">
  Welcome to Readingful. Your 2-week free trial has begun!
</p>

<p style="font-family: 'Readmore', Georgia, serif; font-size: 1.8rem; color: #000000">
  To get your students started, please simply log in and create a reader account for each of them.
  After that, all you need to do is direct your students to log in themselves, and start reading.
  It's that easy!
</p>

<p style="font-family: 'Readmore', Georgia, serif; font-size: 1.8rem; color: #000000">
  If you have any questions or concerns, simply reply to this email to ask them, or submit a
  question from within your teacher account.
</p>

<p style="font-family: 'Readmore', Georgia, serif; font-size: 1.8rem; color: #000000">
  We're always here to help.
</p>

{{-- Call-to-action button --}}
<div style="text-align: left; margin-top: 30px; margin-bottom: 20px">
  <a
    href="{{ config('app.url') }}"
    style="
      background-color: #2c78ff;
      color: #ffffff !important;
      display: inline-block;
      font-size: 1.8rem;
      font-weight: 500;
      text-decoration: none;
      border-radius: 16px;
      padding-left: 22px;
      padding-right: 22px;
      align-content: center;
      height: 44px;
      font-family: 'Readingful', Georgia, serif;
    "
    onmouseover="this.style.backgroundColor='#2C78FF80'"
    onmouseout="this.style.backgroundColor='#2C78FF'"
  >
    Visit Readingful
  </a>
</div>
@endsection