<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title><?= e($title ?? 'Sign in') ?> · AOSWARE CRM</title>
  <link rel="icon" href="<?= e(asset('img/aosware-crm-logo.jpg')) ?>">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
  <link href="<?= e(asset('css/app.css')) ?>" rel="stylesheet">
</head>
<body class="auth-body">
<div class="auth-wrap">
  <div class="auth-shell">
    <div class="auth-hero">
      <h2>One CRM for every role</h2>
      <p class="auth-tagline">
        Same company data for every person who signs in.<br>
        Sales, marketing, and service work from the same customers.<br>
        Managers watch the team; admins keep people and setup in order.<br>
        Each role has different daily work — not a different website.
      </p>
      <div class="auth-roles">
        <div class="auth-role">
          <img src="<?= e(asset('img/role-salesperson.png')) ?>" alt="">
          <div>
            <strong>Salesperson</strong>
            <span>Leads, deals, and follow-up</span>
          </div>
        </div>
        <div class="auth-role">
          <img src="<?= e(asset('img/role-manager.png')) ?>" alt="">
          <div>
            <strong>Manager</strong>
            <span>Pipeline, forecast, assignment</span>
          </div>
        </div>
        <div class="auth-role">
          <img src="<?= e(asset('img/role-admin.png')) ?>" alt="">
          <div>
            <strong>Admin</strong>
            <span>Users, roles, and company setup</span>
          </div>
        </div>
        <div class="auth-role">
          <img src="<?= e(asset('img/role-marketing.png')) ?>" alt="">
          <div>
            <strong>Marketing</strong>
            <span>Campaigns, lists, and templates</span>
          </div>
        </div>
        <div class="auth-role">
          <img src="<?= e(asset('img/role-service.png')) ?>" alt="">
          <div>
            <strong>Service</strong>
            <span>Site visits and field work</span>
          </div>
        </div>
      </div>
    </div>
    <div class="auth-card">
      <?= $content ?>
    </div>
  </div>
</div>
</body>
</html>
