<?php
/**
 * Convert a YouTube / Vimeo watch URL to an embeddable iframe URL.
 */
function convertToEmbedUrl(string $url): string {
    if (preg_match('/(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_\-]+)/', $url, $m)) {
        return 'https://www.youtube.com/embed/' . $m[1] . '?controls=1&rel=0';
    }
    if (preg_match('/vimeo\.com\/(\d+)/', $url, $m)) {
        return 'https://player.vimeo.com/video/' . $m[1];
    }
    return $url; // already embed or other — return as-is
}

$logoUrl = !empty($profile['company_logo']) ? company_logo_url($profile['company_logo']) : null;

// ── Theme colour map — must match THEMES in edit.php ────────────────────────
$themeMap = [
    'sunset' => ['primary' => '#f9811e', 'secondary' => '#00a854'],
    'ocean'  => ['primary' => '#0066cc', 'secondary' => '#00bfff'],
    'forest' => ['primary' => '#2d6a4f', 'secondary' => '#40916c'],
    'grape'  => ['primary' => '#7209b7', 'secondary' => '#c77dff'],
    'coral'  => ['primary' => '#ff6b6b', 'secondary' => '#ffa500'],
];
$activeTheme   = $themeMap[$profile['theme'] ?? 'sunset'] ?? $themeMap['sunset'];
$themePrimary   = $activeTheme['primary'];
$themeSecondary = $activeTheme['secondary'];
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><?= esc($profile['name']) ?><?= !empty($profile['company_name']) ? ' — ' . esc($profile['company_name']) : '' ?></title>

  <!-- SEO -->
  <meta name="description" content="<?= esc(strip_tags(substr($profile['about_us'] ?? $profile['designation'] ?? '', 0, 160))) ?>">
  <meta property="og:title"       content="<?= esc($profile['name']) ?>">
  <meta property="og:description" content="<?= esc(strip_tags(substr($profile['about_us'] ?? '', 0, 160))) ?>">
  <meta property="og:image"       content="<?= profile_photo_url($profile['profile_photo']) ?>">
  <meta property="og:url"         content="<?= esc($profileUrl) ?>">
  <meta name="twitter:card"       content="summary">

  <!-- Styles -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">

  <style>
    :root {
      --primary:      <?= $themePrimary ?>;
      --secondary:    <?= $themeSecondary ?>;
      --bg:           #f4f2ee;
      --card-bg:      #ffffff;
      --text-dark:    #191919;
      --text-muted:   #666666;
      --border-light: #e8e8e8;
      --overlay-light:#fafafa;
      --bg-hover:     #f9f9f7;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text-dark); overflow-x: hidden; }

    /* ── Shell ── */
    .app-shell { width: 100%; max-width: 480px; margin: 0 auto; background: var(--bg); }

   /* === BANNER & NAVIGATION === */
    .cover-banner {
      width: 100%;
      height: 100px;
     /* background: linear-gradient(135deg, #1a3a5c 0%, #0d2137 60%, #0a1929 100%);*/
      position: relative;
      overflow: hidden;
      background: url(<?= esc($logoUrl) ?>);
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat;
    }

    .cover-banner::before {
      content: '';
      position: absolute;
      top: -40px;
      right: -40px;
      width: 180px;
      height: 180px;
      background: radial-gradient(circle, rgba(249, 129, 30, 0.15) 0%, transparent 70%);
      border-radius: 50%;
    }

    .cover-banner::after {
      content: '';
      position: absolute;
      bottom: -30px;
      left: 30%;
      width: 220px;
      height: 220px;
      background: radial-gradient(circle, rgba(0, 168, 84, 0.1) 0%, transparent 70%);
      border-radius: 50%;
    }

    .banner-menu {
      position: absolute;
      top: 14px;
      right: 16px;
      z-index: 50;
      /* display: none !important; */
    }

    .menu-btn {
      width: 44px;
      height: 44px;
      background: rgba(255, 255, 255, 0.12);
      backdrop-filter: blur(8px);
      border: none;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      color: rgba(255, 255, 255, 0.9);
      font-size: 20px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .menu-btn:hover {
      background: rgba(255, 255, 255, 0.2);
      transform: scale(1.05);
    }

    .menu-btn:active {
      transform: scale(0.98);
    }

   /* === PROFILE AVATAR === */
    .profile-avatar-wrap {
      position: relative;
      padding: 0 20px;
      z-index: 10;
      perspective: 1000px;
    }

    .profile-avatar {
      width: 250px;
      height: 250px;
      position: relative;
      cursor: pointer;
      transform-style: preserve-3d;
      transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    .profile-avatar.flipped {
      transform: rotateY(180deg);
    }

    .profile-avatar-front,
    .profile-avatar-back {
      width: 100%;
      height: 100%;
      position: absolute;
      backface-visibility: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      border: 4px solid var(--primary);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
      overflow: hidden;
    }

    /* .profile-avatar-front {
      background: linear-gradient(135deg, var(--primary), #e06800);
    } */

    .profile-avatar-back {
      background: #f5f5f5;
      transform: rotateY(180deg);
    }

    .profile-avatar .initials {
      font-size: 36px;
      font-weight: 700;
      color: #fff;
      letter-spacing: 1px;
      user-select: none;
    }

    .avatar-qr-canvas {
      width: 180px;
      height: 180px;
      border-radius: 12px;
      background: #fff;
      padding: 8px;
    }

    .flip-hint {
      position: absolute;
      bottom: 10px;
      right: 10px;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.7);
      background: rgba(0, 0, 0, 0.3);
      padding: 4px 8px;
      border-radius: 4px;
      font-weight: 600;
      pointer-events: none;
    }

    /* === PROFILE MAIN CARD === */
    .profile-main-card {
      background: var(--card-bg);
      margin: 0 0 16px 0;
      padding: 20px;
      border-radius: 16px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
      position: relative;
    }

    .profile-name {
      font-size: 28px;
      font-weight: 700;
      color: var(--text-dark);
      line-height: 1.2;
      margin-bottom: 2px;
    }

    .profile-designation {
      font-size: 18px;
      font-weight: 500;
      color: var(--text-dark);
      opacity: 0.8;
      margin-bottom: 1px;
    }

    .profile-company {
      font-size: 18px;
      color: var(--text-muted);
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .profile-company i {
      color: var(--secondary);
      font-size: 12px;
    }
    /* ── Hero layout ── */
    .hero-row { display: flex; flex-direction: column; align-items: center; gap: 6px; }
    .hero-left { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 5px; }
    .profile-name { font-size: 26px; font-weight: 700; color: var(--text-dark); line-height: 1.2; margin-bottom: 2px; text-align: center; }
    .profile-designation { font-size: 16px; font-weight: 500; color: var(--text-dark); opacity: .8; text-align: center; }
    .profile-company { font-size: 15px; color: var(--text-muted); font-weight: 500; display: flex; align-items: center; gap: 5px; }
    .profile-company i { color: var(--secondary); font-size: 12px; }

    /* === CTA BUTTONS === */
    .save-cta {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      /* width: 100%; */
      padding: 13px 25px;
      margin-top: 18px;
      background: var(--primary);
      color: #fff;
      border: none;
      border-radius: 12px;
      font-family: inherit;
      font-size: 18px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.25s;
      box-shadow: 0 4px 16px rgba(249, 129, 30, 0.3);
    }

    .save-cta:hover {
      background: #e57316;
      box-shadow: 0 6px 22px rgba(249, 129, 30, 0.4);
      transform: translateY(-1px);
    }

    .save-cta:active {
      transform: translateY(0);
    }

    .save-cta i {
      font-size: 18px;
    }

    .cta-buttons {
      display: flex;
      gap: 10px;
      margin-top: 15px;
      margin-bottom: 15px;
    }

    .cta-buttons .save-cta {
      flex: 1;
      margin-top: 0;
    }

    .save-cta-secondary {
      background: transparent;
      color: var(--secondary);
      border: 1.5px solid var(--secondary);
      box-shadow: none;
    }

    .save-cta-secondary:hover {
      background: rgba(0, 168, 84, 0.05);
      box-shadow: 0 4px 12px rgba(0, 168, 84, 0.2);
    }

    .save-cta.save-cta-sm {
      padding: 10px;
      font-size: 14px;
      margin: 0;
    }
    .save-cta.save-cta-sm i {
      font-size: 14px;
    }

    .share-btn {
      width: 40px;
      height: 40px;
      background: rgba(0, 168, 84, 0.1);
      border: none;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s;
      flex-shrink: 0;
    }

    .share-btn:hover {
      background: rgba(0, 168, 84, 0.18);
      transform: scale(1.05);
    }

    .share-btn i {
      font-size: 18px;
      color: var(--secondary);
    }

    /* ── About ── */
    .about-card { background: var(--card-bg); margin: 0 0 16px; border-radius: 16px; padding: 22px 20px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
    .about-title { font-size: 20px; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; color: var(--text-dark); }
    .about-title i { color: var(--primary); }
    .about-text {
      font-size: 16px; line-height: 1.65; color: var(--text-muted);
      display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
      overflow: hidden; transition: all .3s ease; word-break: break-word;
    }
    .about-text.expanded { display: block; -webkit-line-clamp: unset; overflow: visible; }
    .read-more-link {
      display: inline; margin-left: 4px; color: var(--primary); font-weight: 600;
      cursor: pointer; background: none; border: none; padding: 0; font-family: inherit; font-size: 15px;
    }
    .read-more-link:hover { opacity: .8; }

    /* ── View contact link ── */
    .view-contact-link {
      display: flex; align-items: center; justify-content: center; gap: 6px;
      color: var(--secondary); font-size: 15px; font-weight: 600; cursor: pointer;
      background: none; border: none; padding: 0; font-family: inherit; text-decoration: none;
      transition: color .2s ease; width: 100%; animation: floatLink 3s ease-in-out infinite;
    }
    .view-contact-link:hover { color: #009844; }
    @keyframes floatLink { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

    /* ── Contact card ── */
    .contact-card {
      background: var(--card-bg); margin: 16px 0; border-radius: 16px;
      padding: 6px 0; box-shadow: 0 1px 4px rgba(0,0,0,.06); overflow: hidden;
      max-height: 1000px; opacity: 1; transition: all .4s cubic-bezier(.4,0,.2,1);
    }
    .contact-card.hidden { max-height: 0; opacity: 0; margin: 0; padding: 0; }
    .contact-row {
      display: flex; align-items: center; gap: 14px; padding: 14px 20px;
      text-decoration: none; color: var(--text-dark); transition: background .2s;
      border-bottom: 1px solid #f0f0f0;
    }
    .contact-row:last-child { border-bottom: none; }
    .contact-row:hover { background: var(--bg-hover); color: var(--text-dark); }
    .contact-icon {
      width: 40px; height: 40px; background: rgba(0,168,84,.08);
      border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .contact-icon i { font-size: 17px; color: var(--secondary); }
    .contact-info { min-width: 0; flex: 1; }
    .contact-info .c-label { font-size: 12px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
    .contact-info .c-value { font-size: 15px; font-weight: 500; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .arrow-icon { color: #ccc; font-size: 15px; flex-shrink: 0; }

    /* ── Social card ── */
    .social-card { background: var(--card-bg); margin: 0 0 16px; border-radius: 16px; padding: 22px 20px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
    .social-title { font-size: 20px; font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
    .social-title i { color: var(--primary); }
    .social-links { display: flex; gap: 10px; flex-wrap: wrap; }
    .social-link {
      width: 46px; height: 46px; border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      text-decoration: none; transition: all .3s ease;
      background: #f5f5f5; border: 1.5px solid transparent;
    }
    .social-link i { font-size: 22px; }
    .social-link.linkedin  { color: #0a66c2; } .social-link.linkedin:hover  { background:#0a66c2; color:#fff; transform:translateY(-3px); box-shadow:0 6px 16px rgba(10,102,194,.3); }
    .social-link.instagram { color: #e4405f; } .social-link.instagram:hover { background:#e4405f; color:#fff; transform:translateY(-3px); box-shadow:0 6px 16px rgba(228,64,95,.3); }
    .social-link.twitter   { color: #1da1f2; } .social-link.twitter:hover   { background:#1da1f2; color:#fff; transform:translateY(-3px); }
    .social-link.facebook  { color: #1877f2; } .social-link.facebook:hover  { background:#1877f2; color:#fff; transform:translateY(-3px); }
    .social-link.youtube   { color: #ff0000; } .social-link.youtube:hover   { background:#ff0000; color:#fff; transform:translateY(-3px); }

    /* ── Video card ── */
    .video-card { background: var(--card-bg); margin: 0 0 16px; border-radius: 16px; padding: 22px 20px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
    .section-title { font-size: 20px; font-weight: 700; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; color: var(--text-dark); }
    .section-title i { color: var(--primary); }
    .video-container { width: 100%; border-radius: 12px; overflow: hidden; background: #000; }
    .video-container iframe { display: block; width: 100%; border-radius: 12px; }
    #videoCarousel { border-radius: 12px; overflow: hidden; }
    #videoCarousel .carousel-item { padding: 0; }
    .video-caption-custom { background: rgba(0,0,0,.55); padding: 10px 14px; }
    .video-caption-title { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 3px; }
    .video-caption-desc { font-size: 13px; color: rgba(255,255,255,.85); }
    #videoCarousel .carousel-control-prev,
    #videoCarousel .carousel-control-next {
      width:36px; height:36px; background:rgba(255,255,255,.9); border-radius:50%;
      top:50%; transform:translateY(-50%); border:none;
    }
    #videoCarousel .carousel-control-prev-icon,
    #videoCarousel .carousel-control-next-icon { filter: invert(1) brightness(0); }

    /* video tabs */
    .video-tabs { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
    .video-tab {
      padding: 5px 13px; border-radius: 20px; font-size: 13px; font-weight: 600;
      background: #f0f0f0; color: var(--text-muted); border: none; cursor: pointer; transition: all .2s;
    }
    .video-tab.active { background: var(--primary); color: #fff; }

    /* ── Documents card ── */
    .documents-card { background: var(--card-bg); margin: 0 0 16px; border-radius: 16px; padding: 22px 20px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
    .documents-list { display: flex; flex-direction: column; gap: 10px; }
    .document-item {
      display: flex; align-items: center; gap: 12px; padding: 12px 14px;
      background: var(--overlay-light); border-radius: 10px; border: 1px solid var(--border-light);
      transition: all .2s;
    }
    .document-item:hover { background: #f5f5f5; border-color: var(--primary); }
    .document-icon { width: 40px; height: 40px; background: rgba(249,129,30,.1); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .document-icon i { font-size: 20px; color: var(--primary); }
    .document-info { flex: 1; min-width: 0; }
    .document-name { font-size: 15px; font-weight: 600; color: var(--text-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 2px; }
    .document-size { font-size: 12px; color: var(--text-muted); }
    .document-download-btn {
      width: 34px; height: 34px; background: var(--primary); border: none; border-radius: 8px;
      display: flex; align-items: center; justify-content: center; cursor: pointer;
      transition: all .2s; flex-shrink: 0; color: #fff;
    }
    .document-download-btn:hover { background: #e57316; transform: scale(1.08); }
    .document-download-btn i { font-size: 15px; }

    /* ── Map card ── */
    .map-card { background: var(--card-bg); margin: 0 0 16px; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
    .map-card iframe { display: block; width: 100%; height: 200px; border: none; }

    /* ── Footer ── */
    .profile-footer { text-align: center; padding: 20px 16px 32px; color: var(--text-muted); font-size: 13px; }
    .profile-footer a { color: var(--primary); text-decoration: none; font-weight: 600; }

    /* ── Animations ── */
    .fade-up { opacity: 0; transform: translateY(16px); animation: fadeUp .5s ease forwards; }
    @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
    .delay-1 { animation-delay: .1s; }
    .delay-2 { animation-delay: .2s; }
    .delay-3 { animation-delay: .3s; }
    .delay-4 { animation-delay: .4s; }

    /* ── Gallery carousel — reuses .video-card styles ── */
    #galleryCarousel .carousel-control-prev,
    #galleryCarousel .carousel-control-next { position: absolute; }

    /* ── Floating share button ── */
    .fab-share {
      position: fixed; bottom: 24px; right: 16px; z-index: 900;
      width: 48px; height: 48px; border-radius: 50%;
      background: var(--primary); color: #fff; border: none;
      box-shadow: 0 4px 18px rgba(249,129,30,.45);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: all .25s; font-size: 20px;
    }
    .fab-share:hover { background: #e57316; transform: scale(1.08); }
    @media (min-width: 520px) { .fab-share { display: none; } }
  </style>
</head>

<body>
<?php
  // Helper variables
  $name       = $profile['name']         ?? '';
  $designation= $profile['designation']  ?? '';
  $company    = $profile['company_name'] ?? '';
  $email      = $profile['email']        ?? '';
  $mobile     = trim(($profile['mobile_country_code'] ?? '') . ' ' . ($profile['mobile'] ?? ''));
  $address    = $profile['address']      ?? '';
  $about      = $profile['about_us']     ?? '';
  $linkedin   = $profile['linkedin']     ?? '';
  $instagram  = $profile['instagram']    ?? '';
  $facebook   = $profile['facebook']     ?? '';
  $twitter    = $profile['twitter']      ?? '';
  $youtube    = $profile['youtube']      ?? '';
  $lat        = $profile['latitude']     ?? null;
  $lng        = $profile['longitude']    ?? null;

  $photoUrl    = profile_photo_url($profile['profile_photo']);
  $logoUrl     = !empty($profile['company_logo']) ? company_logo_url($profile['company_logo']) : null;

  $qrFileUrl = '';
  if (!empty($qr['file_path'])) {
      $qrDisk = FCPATH . 'uploads/' . $qr['file_path'];
      $qrTs   = file_exists($qrDisk) ? filemtime($qrDisk) : 0;
      $qrFileUrl = $qrTs ? base_url('uploads/' . $qr['file_path']) . '?v=' . $qrTs : '';
  }

  // Split media
  $videoFiles = array_filter($videos, fn($v) => empty($v['url']) && !empty($v['file_path']));
  $videoUrls  = array_filter($videos, fn($v) => !empty($v['url']));
  $allVideos  = array_values(array_merge(array_values($videoUrls), array_values($videoFiles)));

  $hasSocials = $linkedin || $instagram || $facebook || $twitter || $youtube;

  // WhatsApp link
  $whatsappNum = preg_replace('/\D/', '', $mobile);
  $whatsappUrl = $whatsappNum ? 'https://wa.me/' . $whatsappNum : '';
?>

<div class="app-shell shadow" id="appShell">

  <!-- ── Cover Banner ── -->
  <div class="cover-banner fade-up">
    
	 <div class="banner-menu"><button class="save-cta save-cta-sm" title="Login"> <i class="bi bi-power"></i> Login
        </button>
      </div>
  </div>
  

  <!-- ── Main Profile Card ── -->
  <div class="profile-main-card fade-up delay-2">

    <div class="hero-row">
      <!-- Left: avatar + info -->
      <div class="hero-left">

        <!-- Flip avatar: front = photo, back = QR -->
        <div class="profile-avatar-wrap">
          <div class="profile-avatar" id="profileAvatar" onclick="this.classList.toggle('flipped')"
               title="Tap to flip and scan QR">
            <div class="profile-avatar-front">
              <img src="<?= esc($photoUrl) ?>" alt="<?= esc($name) ?>" loading="lazy">
            </div>
            <div class="profile-avatar-back">
              <?php if ($qrFileUrl): ?>
              <img src="<?= esc($qrFileUrl) ?>" alt="QR Code"
                   style="image-rendering:pixelated;width:90%;height:90%;object-fit:contain">
              <?php else: ?>
              <div class="initials-qr">
                <i class="bi bi-qr-code" style="font-size:32px;color:#ccc"></i><br>
                <span style="font-size:10px">No QR</span>
              </div>
              <?php endif; ?>
            </div>
          </div>
          <?php if ($qrFileUrl): ?>
          <div style="font-size:10px;color:var(--text-muted);text-align:center;margin-top:6px">
            <i class="bi bi-arrow-repeat me-1"></i>Tap to flip &amp; scan
          </div>
          <?php endif; ?>
        </div>

        <div class="profile-name"><?= esc($name) ?></div>
        <?php if ($designation): ?>
        <div class="profile-designation"><?= esc($designation) ?></div>
        <?php endif; ?>
        <?php if ($company): ?>
        <div class="profile-company">
          <i class="bi bi-building"></i>
          <span><?= esc($company) ?></span>
        </div>
        <?php endif; ?>

      </div><!-- /hero-left -->

    </div><!-- /hero-row -->

    <!-- Save Contact button -->
    <a href="<?= esc($vcardUrl) ?>" class="save-cta mx-auto" style="display:flex;max-width:300px">
      <i class="bi bi-person-plus-fill"></i> Save Contact
    </a>

    <!-- About section -->
    <?php if (!empty($about)): ?>
    <div class="about-card mt-4 fade-up delay-4" style="margin-left:-20px;margin-right:-20px;border-radius:0">
      <div class="about-title"><i class="bi bi-info-circle-fill"></i> About</div>
      <div>
        <span class="about-text" id="aboutText"><?= nl2br(esc(strip_tags($about))) ?></span>
        <button class="read-more-link" id="readMoreBtn" onclick="toggleReadMore()">Read More</button>
      </div>
    </div>
    <?php endif; ?>

    <!-- View Contact / Message buttons -->
    <div class="cta-buttons">
      <button class="view-contact-link" id="viewContactBtn" onclick="toggleContactCard()">
        View Contact Info <i class="bi bi-chevron-down view-contact-link-arrow ms-1"></i>
      </button>
      <?php if ($whatsappUrl): ?>
      <a href="<?= esc($whatsappUrl) ?>" target="_blank" class="save-cta save-cta-secondary">
        <i class="bi bi-whatsapp"></i> Message
      </a>
      <?php elseif ($email): ?>
      <a href="mailto:<?= esc($email) ?>" class="save-cta save-cta-secondary">
        <i class="bi bi-envelope-fill"></i> Email
      </a>
      <?php endif; ?>
    </div>

    <!-- ── Contact Card (hidden until tapped) ── -->
    <div class="contact-card hidden" id="contactCardContainer">
      <?php if ($mobile): ?>
      <a class="contact-row" href="tel:<?= esc(preg_replace('/\s+/','',$mobile)) ?>">
        <div class="contact-icon"><i class="bi bi-telephone-fill"></i></div>
        <div class="contact-info">
          <div class="c-label">Phone</div>
          <div class="c-value"><?= esc($mobile) ?></div>
        </div>
        <i class="bi bi-chevron-right arrow-icon"></i>
      </a>
      <?php endif; ?>

      <?php if ($email): ?>
      <a class="contact-row" href="mailto:<?= esc($email) ?>">
        <div class="contact-icon"><i class="bi bi-envelope-fill"></i></div>
        <div class="contact-info">
          <div class="c-label">Email</div>
          <div class="c-value"><?= esc($email) ?></div>
        </div>
        <i class="bi bi-chevron-right arrow-icon"></i>
      </a>
      <?php endif; ?>

      <?php if ($address): ?>
      <?php $mapsUrl = ($lat && $lng) ? 'https://maps.google.com/?q='.$lat.','.$lng : 'https://maps.google.com/?q='.urlencode($address); ?>
      <a class="contact-row" href="<?= esc($mapsUrl) ?>" target="_blank" rel="noopener">
        <div class="contact-icon"><i class="bi bi-geo-alt-fill"></i></div>
        <div class="contact-info">
          <div class="c-label">Address</div>
          <div class="c-value"><?= esc($address) ?></div>
        </div>
        <i class="bi bi-chevron-right arrow-icon"></i>
      </a>
      <?php endif; ?>

      <?php if ($whatsappUrl): ?>
      <a class="contact-row" href="<?= esc($whatsappUrl) ?>" target="_blank" rel="noopener">
        <div class="contact-icon"><i class="fab fa-whatsapp" style="color:var(--secondary)"></i></div>
        <div class="contact-info">
          <div class="c-label">WhatsApp</div>
          <div class="c-value"><?= esc($mobile) ?></div>
        </div>
        <i class="bi bi-chevron-right arrow-icon"></i>
      </a>
      <?php endif; ?>

      <?php if ($linkedin): ?>
      <a class="contact-row" href="<?= esc($linkedin) ?>" target="_blank" rel="noopener">
        <div class="contact-icon" style="background:rgba(10,102,194,.08)">
          <i class="fab fa-linkedin-in" style="color:#0a66c2"></i>
        </div>
        <div class="contact-info">
          <div class="c-label">LinkedIn</div>
          <div class="c-value"><?= esc(parse_url($linkedin, PHP_URL_HOST) ?: $linkedin) ?></div>
        </div>
        <i class="bi bi-chevron-right arrow-icon"></i>
      </a>
      <?php endif; ?>
    </div><!-- /contact-card -->

    <!-- ── Social Links ── -->
    <?php if ($hasSocials): ?>
    <div class="social-card mt-4 fade-up delay-4" style="margin-left:-20px;margin-right:-20px;border-radius:0">
      <div class="social-title"><i class="bi bi-people-fill"></i> Connect</div>
      <div class="social-links">
        <?php if ($linkedin):  ?><a href="<?= esc($linkedin) ?>"  target="_blank" rel="noopener" class="social-link linkedin"  title="LinkedIn"><i class="fab fa-linkedin-in"></i></a><?php endif; ?>
        <?php if ($instagram): ?><a href="<?= esc($instagram) ?>" target="_blank" rel="noopener" class="social-link instagram" title="Instagram"><i class="fab fa-instagram"></i></a><?php endif; ?>
        <?php if ($twitter):   ?><a href="<?= esc($twitter) ?>"   target="_blank" rel="noopener" class="social-link twitter"   title="Twitter / X"><i class="fab fa-twitter"></i></a><?php endif; ?>
        <?php if ($facebook):  ?><a href="<?= esc($facebook) ?>"  target="_blank" rel="noopener" class="social-link facebook"  title="Facebook"><i class="fab fa-facebook-f"></i></a><?php endif; ?>
        <?php if ($youtube):   ?><a href="<?= esc($youtube) ?>"   target="_blank" rel="noopener" class="social-link youtube"   title="YouTube"><i class="fab fa-youtube"></i></a><?php endif; ?>
        <?php if ($whatsappUrl): ?><a href="<?= esc($whatsappUrl) ?>" target="_blank" rel="noopener" class="social-link" style="color:#25d366" title="WhatsApp"><i class="fab fa-whatsapp"></i></a><?php endif; ?>
      </div>
    </div>
    <?php endif; ?>

    <!-- ── Videos ── -->
    <?php if (!empty($allVideos)): ?>
    <div class="video-card fade-up delay-4" style="margin-left:-20px;margin-right:-20px;border-radius:0">
      <div class="section-title"><i class="bi bi-play-circle-fill"></i> Videos</div>

      <?php if (count($allVideos) > 1): ?>
      <!-- Carousel for multiple videos -->
      <div id="videoCarousel" class="carousel slide" data-bs-interval="false">
        <div class="carousel-inner">
          <?php foreach ($allVideos as $idx => $v): ?>
          <div class="carousel-item <?= $idx === 0 ? 'active' : '' ?>">
            <div class="video-container">
              <?php if (!empty($v['url'])): ?>
              <?php $embedUrl = convertToEmbedUrl($v['url']); ?>
              <iframe width="100%" height="250" src="<?= esc($embedUrl) ?>" frameborder="0"
                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                      allowfullscreen loading="lazy"></iframe>
              <?php else: ?>
              <video controls preload="none" style="width:100%;border-radius:12px" loading="lazy">
                <source src="<?= base_url('uploads/'.$v['file_path']) ?>" type="<?= esc($v['mime_type'] ?? 'video/mp4') ?>">
              </video>
              <?php endif; ?>
            </div>
            <?php if (!empty($v['original_name']) || !empty($v['url'])): ?>
            <div class="video-caption-custom">
              <div class="video-caption-title"><?= esc($v['original_name'] ?? parse_url($v['url'], PHP_URL_HOST) ?? '') ?></div>
            </div>
            <?php endif; ?>
          </div>
          <?php endforeach; ?>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#videoCarousel" data-bs-slide="prev">
          <span class="carousel-control-prev-icon"></span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#videoCarousel" data-bs-slide="next">
          <span class="carousel-control-next-icon"></span>
        </button>
      </div>

      <?php else: /* Single video */ ?>
      <?php $v = $allVideos[0]; ?>
      <div class="video-container">
        <?php if (!empty($v['url'])): ?>
        <iframe width="100%" height="250" src="<?= esc(convertToEmbedUrl($v['url'])) ?>" frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen loading="lazy"></iframe>
        <?php else: ?>
        <video controls preload="none" style="width:100%;border-radius:12px">
          <source src="<?= base_url('uploads/'.$v['file_path']) ?>" type="<?= esc($v['mime_type'] ?? 'video/mp4') ?>">
        </video>
        <?php endif; ?>
      </div>
      <?php endif; ?>
    </div>
    <?php endif; ?>

    <!-- ── Documents ── -->
    <?php if (!empty($documents)): ?>
    <div class="documents-card fade-up delay-4" style="margin-left:-20px;margin-right:-20px;border-radius:0">
      <div class="section-title"><i class="bi bi-file-earmark-pdf"></i> Documents</div>
      <div class="documents-list">
        <?php foreach ($documents as $doc): ?>
        <?php
          $docName = $doc['original_name'] ?? basename($doc['file_path']);
          $docSize = !empty($doc['file_size']) ? human_filesize($doc['file_size']) : '';
          $docUrl  = base_url('uploads/' . $doc['file_path']);
          $ext     = strtolower(pathinfo($docName, PATHINFO_EXTENSION));
          $docIcon = match($ext) {
            'pdf'           => 'bi-file-earmark-pdf',
            'doc', 'docx'   => 'bi-file-earmark-word',
            'xls', 'xlsx'   => 'bi-file-earmark-excel',
            'ppt', 'pptx'   => 'bi-file-earmark-ppt',
            default         => 'bi-file-earmark-text',
          };
        ?>
        <div class="document-item">
          <div class="document-icon"><i class="bi <?= $docIcon ?>"></i></div>
          <div class="document-info">
            <div class="document-name" title="<?= esc($docName) ?>"><?= esc($docName) ?></div>
            <?php if ($docSize): ?><div class="document-size"><?= esc($docSize) ?></div><?php endif; ?>
          </div>
          <a href="<?= esc($docUrl) ?>" download class="document-download-btn" title="Download">
            <i class="bi bi-download"></i>
          </a>
        </div>
        <?php endforeach; ?>
      </div>
    </div>
    <?php endif; ?>

    <!-- ── Gallery ── -->
    <?php if (!empty($gallery)): ?>
    <div class="video-card fade-up delay-4" style="margin-left:-20px;margin-right:-20px;border-radius:0">
      <div class="section-title"><i class="bi bi-images"></i> Gallery</div>

      <?php if (count($gallery) === 1): ?>
      <!-- Single image -->
      <div class="video-container" style="background:#000;border-radius:12px;overflow:hidden">
        <img src="<?= base_url('uploads/'.esc($gallery[0]['file_path'])) ?>"
             alt="Gallery" loading="lazy"
             style="width:100%;height:280px;object-fit:cover;display:block;border-radius:12px">
      </div>

      <?php else: ?>
      <!-- Carousel for multiple images -->
      <div id="galleryCarousel" class="carousel slide" data-bs-interval="false">
        <div class="carousel-inner" style="border-radius:12px;overflow:hidden">
          <?php foreach ($gallery as $idx => $img): ?>
          <div class="carousel-item <?= $idx === 0 ? 'active' : '' ?>">
            <img src="<?= base_url('uploads/'.esc($img['file_path'])) ?>"
                 class="d-block w-100" alt="Gallery photo <?= $idx + 1 ?>" loading="lazy"
                 style="height:280px;object-fit:cover">
            <!-- counter badge -->
            <div style="position:absolute;top:10px;right:12px;background:rgba(0,0,0,.45);
                        color:#fff;font-size:12px;font-weight:600;padding:3px 10px;
                        border-radius:20px;backdrop-filter:blur(4px)">
              <?= $idx + 1 ?> / <?= count($gallery) ?>
            </div>
          </div>
          <?php endforeach; ?>
        </div>
        <!-- Arrows — same style as video carousel -->
        <button class="carousel-control-prev" type="button"
                data-bs-target="#galleryCarousel" data-bs-slide="prev"
                style="width:36px;height:36px;background:rgba(255,255,255,.9);border-radius:50%;
                       top:50%;transform:translateY(-50%);border:none;left:8px">
          <span class="carousel-control-prev-icon" style="filter:invert(1) brightness(0)"></span>
        </button>
        <button class="carousel-control-next" type="button"
                data-bs-target="#galleryCarousel" data-bs-slide="next"
                style="width:36px;height:36px;background:rgba(255,255,255,.9);border-radius:50%;
                       top:50%;transform:translateY(-50%);border:none;right:8px">
          <span class="carousel-control-next-icon" style="filter:invert(1) brightness(0)"></span>
        </button>
      </div>
      <?php endif; ?>

    </div>
    <?php endif; ?>

    <!-- ── Custom Sections ── -->
    <?php foreach ($sections as $sec):
      $secItems = $sectionItems[$sec['id']] ?? [];
    ?>

      <?php if ($sec['section_type'] === 'text' && !empty($sec['content'])): ?>
      <div class="about-card fade-up" style="margin-left:-20px;margin-right:-20px;border-radius:0">
        <div class="about-title">
          <i class="bi bi-file-text"></i> <?= esc($sec['title']) ?>
        </div>
        <div class="about-text" id="csText<?= $sec['id'] ?>">
          <?= nl2br(esc(strip_tags($sec['content']))) ?>
        </div>
        <?php if (mb_strlen($sec['content']) > 300): ?>
        <button class="read-more-link" onclick="
          var t=document.getElementById('csText<?= $sec['id'] ?>');
          var expanded=t.classList.toggle('expanded');
          this.textContent=expanded?'Read Less':'Read More';
        ">Read More</button>
        <?php endif; ?>
      </div>

      <?php elseif ($sec['section_type'] === 'photo' && !empty($secItems)): ?>
      <div class="video-card fade-up" style="margin-left:-20px;margin-right:-20px;border-radius:0">
        <div class="section-title">
          <i class="bi bi-image"></i> <?= esc($sec['title']) ?>
        </div>
        <?php if (count($secItems) === 1): ?>
        <!-- Single photo -->
        <div class="video-container" style="border-radius:12px;overflow:hidden">
          <img src="<?= base_url('uploads/' . esc($secItems[0]['file_path'])) ?>"
               alt="<?= esc($sec['title']) ?>" loading="lazy"
               style="width:100%;height:280px;object-fit:cover;display:block;border-radius:12px">
        </div>
        <?php else: ?>
        <!-- Multiple photos — carousel -->
        <?php $cid = 'secPhotoCarousel' . $sec['id']; ?>
        <div id="<?= $cid ?>" class="carousel slide" data-bs-interval="false">
          <div class="carousel-inner" style="border-radius:12px;overflow:hidden">
            <?php foreach ($secItems as $idx => $item): ?>
            <div class="carousel-item <?= $idx === 0 ? 'active' : '' ?>">
              <img src="<?= base_url('uploads/' . esc($item['file_path'])) ?>"
                   class="d-block w-100" alt="Photo <?= $idx + 1 ?>" loading="lazy"
                   style="height:280px;object-fit:cover">
              <div style="position:absolute;top:10px;right:12px;background:rgba(0,0,0,.45);
                          color:#fff;font-size:12px;font-weight:600;padding:3px 10px;
                          border-radius:20px;backdrop-filter:blur(4px)">
                <?= $idx + 1 ?> / <?= count($secItems) ?>
              </div>
            </div>
            <?php endforeach; ?>
          </div>
          <button class="carousel-control-prev" type="button" data-bs-target="#<?= $cid ?>" data-bs-slide="prev"
                  style="width:36px;height:36px;background:rgba(255,255,255,.9);border-radius:50%;top:50%;transform:translateY(-50%);border:none;left:8px">
            <span class="carousel-control-prev-icon" style="filter:invert(1) brightness(0)"></span>
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#<?= $cid ?>" data-bs-slide="next"
                  style="width:36px;height:36px;background:rgba(255,255,255,.9);border-radius:50%;top:50%;transform:translateY(-50%);border:none;right:8px">
            <span class="carousel-control-next-icon" style="filter:invert(1) brightness(0)"></span>
          </button>
        </div>
        <?php endif; ?>
      </div>

      <?php elseif ($sec['section_type'] === 'video' && !empty($secItems)): ?>
      <div class="video-card fade-up" style="margin-left:-20px;margin-right:-20px;border-radius:0">
        <div class="section-title">
          <i class="bi bi-play-circle-fill"></i> <?= esc($sec['title']) ?>
        </div>
        <?php if (count($secItems) === 1): ?>
        <!-- Single video -->
        <div class="video-container">
          <iframe width="100%" height="250" src="<?= esc($secItems[0]['url'] ?? '') ?>"
                  frameborder="0"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                  allowfullscreen loading="lazy"></iframe>
        </div>
        <?php else: ?>
        <!-- Multiple videos — carousel -->
        <?php $cvid = 'secVideoCarousel' . $sec['id']; ?>
        <div id="<?= $cvid ?>" class="carousel slide" data-bs-interval="false">
          <div class="carousel-inner">
            <?php foreach ($secItems as $idx => $item): ?>
            <div class="carousel-item <?= $idx === 0 ? 'active' : '' ?>">
              <div class="video-container">
                <iframe width="100%" height="250" src="<?= esc($item['url'] ?? '') ?>"
                        frameborder="0"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                        allowfullscreen loading="lazy"></iframe>
              </div>
            </div>
            <?php endforeach; ?>
          </div>
          <button class="carousel-control-prev" type="button" data-bs-target="#<?= $cvid ?>" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#<?= $cvid ?>" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
          </button>
        </div>
        <?php endif; ?>
      </div>

      <?php elseif ($sec['section_type'] === 'document' && !empty($secItems)): ?>
      <div class="documents-card fade-up" style="margin-left:-20px;margin-right:-20px;border-radius:0">
        <div class="section-title">
          <i class="bi bi-file-earmark-pdf"></i> <?= esc($sec['title']) ?>
        </div>
        <div class="documents-list">
          <?php foreach ($secItems as $item):
            $iName = $item['original_name'] ?? basename($item['file_path'] ?? '');
            $iSize = !empty($item['file_size']) ? round($item['file_size'] / 1048576, 1) . ' MB' : '';
            $iUrl  = base_url('uploads/' . $item['file_path']);
            $iExt  = strtolower(pathinfo($iName, PATHINFO_EXTENSION));
            $iIcon = match($iExt) {
              'pdf'           => 'bi-file-earmark-pdf',
              'doc', 'docx'   => 'bi-file-earmark-word',
              'xls', 'xlsx'   => 'bi-file-earmark-excel',
              'ppt', 'pptx'   => 'bi-file-earmark-ppt',
              default         => 'bi-file-earmark-text',
            };
          ?>
          <div class="document-item">
            <div class="document-icon"><i class="bi <?= $iIcon ?>"></i></div>
            <div class="document-info">
              <div class="document-name" title="<?= esc($iName) ?>"><?= esc($iName) ?></div>
              <?php if ($iSize): ?><div class="document-size"><?= $iSize ?></div><?php endif; ?>
            </div>
            <a href="<?= esc($iUrl) ?>" download class="document-download-btn" title="Download">
              <i class="bi bi-download"></i>
            </a>
          </div>
          <?php endforeach; ?>
        </div>
      </div>

      <?php endif; ?>
    <?php endforeach; ?>

    <!-- ── Map ── -->
    <?php if ($lat && $lng): ?>
    <div class="map-card fade-up delay-4">
      <iframe
        src="https://maps.google.com/maps?q=<?= (float)$lat ?>,<?= (float)$lng ?>&z=15&output=embed"
        title="Location" loading="lazy" allowfullscreen></iframe>
    </div>
    <?php endif; ?>

  </div><!-- /profile-main-card -->

  <!-- ── Footer ── 
  <div class="profile-footer">
    <p>Powered by <a href="<?= base_url() ?>" target="_blank">QR Profile CMS</a></p>
    <p style="margin-top:6px;font-size:12px">
      <a href="<?= esc($vcardUrl) ?>"><i class="bi bi-person-vcard me-1"></i>Save Contact</a>
      &nbsp;·&nbsp;
      <button onclick="shareProfile()" style="background:none;border:none;padding:0;color:var(--primary);font-weight:600;font-size:13px;cursor:pointer;font-family:inherit"><i class="bi bi-share-fill me-1"></i>Share Profile</button>
    </p>
  </div>-->

  <!-- ── Copy-link toast ── -->
  <div id="copyToast" style="
    position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);
    background:#191919;color:#fff;padding:11px 22px;border-radius:30px;font-size:14px;font-weight:600;
    box-shadow:0 4px 20px rgba(0,0,0,.3);z-index:9999;opacity:0;transition:all .35s ease;
    display:flex;align-items:center;gap:8px;white-space:nowrap;pointer-events:none">
    <i class="bi bi-check-circle-fill" style="color:#00d084"></i> Link copied to clipboard!
  </div>

</div><!-- /app-shell -->


<!-- ── Floating share button (mobile only) ── -->
<button class="fab-share" onclick="shareProfile()" title="Share Profile" aria-label="Share Profile">
  <i class="bi bi-share-fill"></i>
</button>

<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
// ── Toggle About Read More ──────────────────────────────────
function toggleReadMore() {
  const text = document.getElementById('aboutText');
  const btn  = document.getElementById('readMoreBtn');
  if (!text) return;
  const expanded = text.classList.toggle('expanded');
  btn.textContent = expanded ? 'Read Less' : 'Read More';
}

// ── Toggle Contact Card ─────────────────────────────────────
function toggleContactCard() {
  const card = document.getElementById('contactCardContainer');
  const btn  = document.getElementById('viewContactBtn');
  if (!card) return;
  const isHidden = card.classList.toggle('hidden');
  const arrow = btn.querySelector('.view-contact-link-arrow');
  if (arrow) {
    arrow.style.transform = isHidden ? 'rotate(0deg)' : 'rotate(180deg)';
  }
  btn.innerHTML = isHidden
    ? 'View Contact Info <i class="bi bi-chevron-down view-contact-link-arrow ms-1"></i>'
    : 'Hide Contact Info <i class="bi bi-chevron-up view-contact-link-arrow ms-1"></i>';
}

// ── Share profile via native share API ─────────────────────
function shareProfile() {
  const profileUrl = '<?= esc($profileUrl, 'js') ?>';
  const name       = '<?= esc($name, 'js') ?>';
  if (navigator.share) {
    navigator.share({ title: name, url: profileUrl }).catch(() => {});
  } else {
    navigator.clipboard.writeText(profileUrl)
      .then(() => showCopyToast())
      .catch(() => prompt('Copy this link:', profileUrl));
  }
}

// ── Toast notification ──────────────────────────────────────
function showCopyToast() {
  const toast = document.getElementById('copyToast');
  if (!toast) return;
  toast.style.opacity = '1';
  toast.style.transform = 'translateX(-50%) translateY(0)';
  setTimeout(() => {
    toast.style.opacity = '0';
    toast.style.transform = 'translateX(-50%) translateY(80px)';
  }, 2500);
}

// ── Read More — hide button if text is short ───────────────
document.addEventListener('DOMContentLoaded', function () {
  const text = document.getElementById('aboutText');
  const btn  = document.getElementById('readMoreBtn');
  if (text && btn) {
    if (text.scrollHeight <= text.clientHeight + 2) {
      btn.style.display = 'none';
    }
  }
});

</script>

</body>
</html>
