<?php
// x_card.php (INCLUDE)
// Requiere: $twitter (puede venir como "@user", "user", "https://twitter.com/user", "https://x.com/user")

$tw = isset($twitter) ? trim($twitter) : '';
if ($tw === '') return;

// Normalizar a "user"
$tw = preg_replace('~^https?://(www\.)?(twitter\.com|x\.com)/~i', '', $tw);
$tw = ltrim(trim($tw), '@');
$tw = preg_replace('~[^A-Za-z0-9_]~', '', $tw);

if ($tw === '') return;

$user = $tw;
$profileUrl = 'https://x.com/' . $user;

// Imprimir CSS 1 sola vez aunque el include se use varias veces
static $x_card_css_printed = false;
if (!$x_card_css_printed) {
  $x_card_css_printed = true;
  ?>
  <style>
    .x-card-wrap{margin-bottom:20px;}
    .x-card{
      display:flex; align-items:center; gap:12px;
      padding:14px 16px;
      border:1px solid rgba(0,0,0,.10);
      border-radius:12px;
      background:#fff;
      box-shadow:0 6px 18px rgba(0,0,0,.06);
      text-decoration:none;
      color:#111;
      transition:transform .12s ease, box-shadow .12s ease;
    }
    .x-card:hover{
      transform:translateY(-1px);
      box-shadow:0 10px 24px rgba(0,0,0,.10);
      text-decoration:none;
      color:#111;
    }
    .x-card__icon{
      width:44px; height:44px;
      border-radius:12px;
      display:flex; align-items:center; justify-content:center;
      background:#111; color:#fff;
      flex:0 0 44px;
    }
    .x-card__icon svg{width:20px; height:20px; display:block;}
    .x-card__user{font-weight:700; font-size:16px; line-height:1.1;}
    .x-card__url{font-size:12px; opacity:.75; margin-top:4px;}
  </style>
  <?php
}
?>

<div class="x-card-wrap col-12">
  <a class="x-card"
     href="<?php echo htmlspecialchars($profileUrl, ENT_QUOTES, 'UTF-8'); ?>"
     target="_blank" rel="noopener noreferrer">
    <div class="x-card__icon" aria-hidden="true">
      <!-- Logo X (SVG inline) -->
      <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true">
        <path fill="currentColor" d="M18.244 2.25h3.308l-7.227 8.26 8.504 11.24H16.17l-5.214-6.817-5.965 6.817H1.684l7.73-8.837L1.25 2.25h6.73l4.713 6.231L18.244 2.25Zm-1.161 17.52h1.833L6.758 4.126H4.793L17.083 19.77Z"/>
      </svg>
    </div>

    <div>
      <div class="x-card__user">@<?php echo htmlspecialchars($user, ENT_QUOTES, 'UTF-8'); ?></div>
      <div class="x-card__url"><?php echo htmlspecialchars($profileUrl, ENT_QUOTES, 'UTF-8'); ?></div>
    </div>
  </a>
</div>