<?php
// Shared error page renderer — not a standalone file
// Usage: include this file after setting $err_code, $err_title, $err_color, $err_icon, $err_msg, $err_info, $err_hint
// $err_btns = array of ['label'=>'', 'href'=>'', 'type'=>'primary|outline', 'onclick'=>'']
?>
<?php include('../include/header.php'); ?>
<?php $page_title = $site_data['web_name'] . ' | ' . $err_title; ?>
<title><?php echo $page_title; ?></title>

<style>
  .err-section{min-height:80vh;display:flex;align-items:center;padding:5rem 2rem;background:var(--bg);}
  .err-wrap{max-width:800px;margin:0 auto;text-align:center;}
  .err-ico-ring{width:110px;height:110px;margin:0 auto 2rem;border-radius:50%;background:<?php echo $err_color_bg ?? 'rgba(31,208,112,.08)'; ?>;border:2px solid <?php echo $err_color_border ?? 'rgba(31,208,112,.22)'; ?>;display:flex;align-items:center;justify-content:center;animation:float 3.5s ease-in-out infinite;}
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
  .err-code{font-size:clamp(5rem,14vw,10rem);font-weight:900;background:<?php echo $err_gradient; ?>;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:1rem;animation:pulse 2.5s ease-in-out infinite;}
  @keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
  .err-title{font-size:clamp(1.75rem,4vw,2.75rem);font-weight:800;letter-spacing:-.04em;color:var(--text);margin-bottom:1rem;}
  .err-msg{font-size:1rem;line-height:1.8;color:var(--text2);max-width:560px;margin:0 auto 2.5rem;}
  .err-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:3rem;}
  .err-btn-primary{display:inline-flex;align-items:center;gap:8px;padding:13px 30px;background:var(--g);color:#000;border-radius:12px;font-size:.875rem;font-weight:700;transition:all .25s;box-shadow:0 4px 20px var(--g-glow);cursor:pointer;border:none;font-family:inherit;}
  .err-btn-primary:hover{background:var(--g2);transform:translateY(-2px);box-shadow:0 8px 28px var(--g-glow);}
  .err-btn-outline{display:inline-flex;align-items:center;gap:8px;padding:12px 26px;background:var(--surface);color:var(--text);border:1.5px solid var(--border2);border-radius:12px;font-size:.875rem;font-weight:600;transition:all .25s;cursor:pointer;font-family:inherit;}
  .err-btn-outline:hover{border-color:var(--g);color:var(--g);transform:translateY(-2px);}
  .err-info-box{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1.5rem 2rem;margin:0 auto;max-width:560px;text-align:left;}
  .err-info-box h3{font-size:1rem;font-weight:700;color:var(--text);margin-bottom:.875rem;}
  .err-info-box ul{display:flex;flex-direction:column;gap:.5rem;padding-left:0;list-style:none;}
  .err-info-box li{display:flex;align-items:flex-start;gap:8px;font-size:.8125rem;color:var(--text2);line-height:1.6;}
  .err-info-box li::before{content:'→';color:var(--g);flex-shrink:0;font-weight:700;}
  .help-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem;margin-top:3rem;max-width:800px;margin-left:auto;margin-right:auto;}
  .help-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1.5rem;text-align:center;transition:all .3s;}
  .help-card:hover{transform:translateY(-5px);border-color:rgba(31,208,112,.25);box-shadow:0 16px 40px var(--shadow);}
  .help-card-ico{width:48px;height:48px;border-radius:12px;background:rgba(31,208,112,.08);border:1px solid rgba(31,208,112,.15);display:flex;align-items:center;justify-content:center;margin:0 auto .875rem;}
  .help-card h4{font-size:.9rem;font-weight:700;color:var(--text);margin-bottom:.375rem;}
  .help-card p{font-size:.775rem;color:var(--text3);margin-bottom:.875rem;line-height:1.6;}
  .help-card a{font-size:.775rem;color:var(--g);font-weight:700;}
  @media(max-width:480px){.err-btns{flex-direction:column;align-items:center;}.err-btn-primary,.err-btn-outline{width:100%;justify-content:center;}}
</style>

<div class="err-section">
  <div class="err-wrap">
    <div class="err-ico-ring">
      <?php echo $err_icon; ?>
    </div>
    <div class="err-code"><?php echo $err_code; ?></div>
    <h1 class="err-title"><?php echo $err_title; ?></h1>
    <p class="err-msg"><?php echo $err_msg; ?></p>
    <div class="err-btns">
      <?php foreach($err_btns as $btn): ?>
        <?php if(!empty($btn['onclick'])): ?>
          <button onclick="<?php echo $btn['onclick']; ?>" class="err-btn-<?php echo $btn['type']; ?>">
            <?php echo $btn['label']; ?>
          </button>
        <?php else: ?>
          <a href="<?php echo $btn['href']; ?>" class="err-btn-<?php echo $btn['type']; ?>">
            <?php echo $btn['label']; ?>
          </a>
        <?php endif; ?>
      <?php endforeach; ?>
    </div>
    <?php if(!empty($err_info)): ?>
    <div class="err-info-box">
      <h3><?php echo $err_hint ?? 'What can you do?'; ?></h3>
      <ul>
        <?php foreach($err_info as $item): ?>
          <li><?php echo $item; ?></li>
        <?php endforeach; ?>
      </ul>
    </div>
    <?php endif; ?>

    <?php if(!empty($err_help_cards)): ?>
    <div class="help-grid">
      <?php foreach($err_help_cards as $card): ?>
      <div class="help-card">
        <div class="help-card-ico"><?php echo $card['icon']; ?></div>
        <h4><?php echo $card['title']; ?></h4>
        <p><?php echo $card['desc']; ?></p>
        <a href="<?php echo $card['href']; ?>" <?php echo !empty($card['target']) ? 'target="'.$card['target'].'"' : ''; ?>><?php echo $card['link']; ?></a>
      </div>
      <?php endforeach; ?>
    </div>
    <?php endif; ?>
  </div>
</div>

<?php include('../include/footer.php'); ?>
