require_once __DIR__ . '/../../core/auth.php';
require_once __DIR__ . '/../../core/layouts/agent_layout.php';

$user = $GLOBALS['auth_user'];
$agency_id = $GLOBALS['agency_id'];
$pdo = $pdo ?? $GLOBALS['pdo'];

// Get agency for layout
$stmtAg = $pdo->prepare("SELECT * FROM agencies WHERE id = ?");
$stmtAg->execute([$agency_id]);
$agency = $stmtAg->fetch();

$logoImg = '/assets/modules/firma/logo.png';
$heroImg = '/assets/modules/firma/heroportal.png';

ob_start();
?>
<style>
/* ── PAGE WRAPPER ── */
.page-wrap-replyto{
  position:relative;
  min-height: calc(100vh - 120px);
  overflow:hidden;
}

/* ── HERO IMAGE — fixed right ── */
.hero-bg-replyto{
  position:absolute;
  right:-50px; bottom:0;
  height:90%;
  width:auto;
  pointer-events:none;
  z-index:1;
  opacity: 0.8;
}

/* ── CONTENT COLUMN ── */
.content-replyto{
  position:relative;
  z-index:2;
  max-width:670px;
  margin:0 auto;
  padding:20px 20px 80px;
}

/* ── WELCOME BLOCK ── */
.welcome{margin-bottom:28px;}
.hero-tag{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#06a3b6;margin-bottom:7px;}
.welcome h1{font-size:24px;font-weight:700;color:#1a1a1a;margin:0 0 8px;line-height:1.25;}
.welcome p{font-size:13px;color:#777;margin:0;line-height:1.65;}

/* ── CARDS ── */
.card-replyto{background:#fff;border-radius:10px;border:1px solid #e8e8e8;padding:20px 24px;margin-bottom:16px;}
.card-label{font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#06a3b6;margin-bottom:14px;}

/* ── VIDEO ── */
.video-wrap{
  position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;
  border-radius:8px;
}
.video-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none;}

/* ── STEPS ── */
.steps{margin-top:6px;}
.step{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid #f0f0f0;}
.step:last-child{border-bottom:none;}
.step-num{
  width:28px;height:28px;border-radius:50%;
  background:#06a3b6;color:#fff;
  font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;margin-top:1px;
}
.step-text{font-size:13px;color:#444;line-height:1.65;}
.step-text strong{color:#1a1a1a;}
.step-text code{background:#f0f4f8;border-radius:4px;padding:1px 6px;font-size:12px;color:#06a3b6;font-family:monospace;}

/* ── DONE BANNER ── */
.done-banner{
  background:#06a3b6;border-radius:10px;padding:20px 24px;
  display:flex;align-items:center;gap:16px;
}
.done-icon{font-size:28px;flex-shrink:0;}
.done-text h3{font-size:15px;font-weight:700;color:#fff;margin-bottom:4px;}
.done-text p{font-size:13px;color:rgba(255,255,255,.8);line-height:1.55;}

/* ── MOBILE ── */
@media(max-width:700px){
  .hero-bg-replyto{display:none;}
  .content-replyto{padding:24px 18px 48px;}
}
</style>

<div class="page-wrap-replyto">

  <img class="hero-bg-replyto" src="<br />
<b>Warning</b>:  Undefined variable $heroImg in <b>/home/makingpo/heroinsuranceusa.com/modules/firma/replyto.php</b> on line <b>96</b><br />
<br />
<b>Deprecated</b>:  htmlspecialchars(): Passing null to parameter #1 ($string) of type string is deprecated in <b>/home/makingpo/heroinsuranceusa.com/modules/firma/replyto.php</b> on line <b>96</b><br />
" alt="">

  <div class="content-replyto">

    <div style="margin-bottom: 20px;">
        <a href="/firma/portal.php" style="font-size:12px; color:#06a3b6; text-decoration:none;">← Volver al portal</a>
    </div>

    <!-- WELCOME -->
    <div class="welcome">
      <div class="hero-tag">— Último paso</div>
      <h1>Configura tu Reply-To 📨</h1>
      <p>Tu firma ya est&aacute; instalada. Este paso hace que la firma aparezca tambi&eacute;n cuando <strong>respondes</strong> un correo, no solo cuando escribes uno nuevo.</p>
    </div>

    <!-- VIDEO -->
    <div class="card-replyto">
      <div class="card-label">Video instructivo</div>
      <div class="video-wrap">
        <iframe
          src="https://www.youtube.com/embed/Hj-A4S6Gf2s?rel=0&modestbranding=1&color=white"
          title="Configurar Reply-To en Gmail"
          frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowfullscreen>
        </iframe>
      </div>
    </div>

    <!-- STEPS -->
    <div class="card-replyto">
      <div class="card-label">Paso a paso</div>
      <div class="steps">
        <div class="step">
          <div class="step-num">1</div>
          <div class="step-text">Abre Gmail y ve a <strong>Configuraci&oacute;n</strong> (&iacute;cono de engranaje ⚙️ arriba a la derecha) → <strong>Ver toda la configuraci&oacute;n</strong>.</div>
        </div>
        <div class="step">
          <div class="step-num">2</div>
          <div class="step-text">Qu&eacute;date en la pesta&ntilde;a <strong>General</strong> y baja hasta encontrar la secci&oacute;n <strong>Firma</strong>.</div>
        </div>
        <div class="step">
          <div class="step-num">3</div>
          <div class="step-text">Dentro de la secci&oacute;n Firma, busca el campo <strong>Reply-To</strong> y c&aacute;mbialo a <code>My Signature</code> (el nombre de tu nueva firma).</div>
        </div>
        <div class="step">
          <div class="step-num">4</div>
          <div class="step-text">Baja hasta el final de la p&aacute;gina y haz clic en <strong>Guardar cambios</strong>.</div>
        </div>
      </div>
    </div>

    <!-- DONE BANNER -->
    <div class="done-banner">
      <div class="done-text">
        <h3>¿Ya lo configuraste?</h3>
        <p>Perfecto — ahora s&iacute; est&aacute;s al 100%. Tu firma va a aparecer tanto en correos nuevos como en respuestas.</p>
      </div>
    </div>

  </div><!-- /content -->
</div><!-- /page-wrap -->

<br />
<b>Fatal error</b>:  Uncaught Error: Call to undefined function agent_layout() in /home/makingpo/heroinsuranceusa.com/modules/firma/replyto.php:161
Stack trace:
#0 /home/makingpo/heroinsuranceusa.com/public/index.php(184): require_once()
#1 {main}
  thrown in <b>/home/makingpo/heroinsuranceusa.com/modules/firma/replyto.php</b> on line <b>161</b><br />