<script lang="ts">
  import type { IPost } from '$type/post';
  import { defaultLocale, locale, localeLink, t } from '$lib/translations';
  export let data: IPost;
</script>

<div class="author-card">
  <div class="author-card-avatar">
    <img src={data.authorData.avatar.thumbnail} alt={data.authorData.name} width="72" height="72">
  </div>
  <div class="author-card-info">
    <div class="author-card-label">{$t('Written by')}</div>
    <a href="{localeLink()}/author/{data.authorData.slug}" class="author-card-name">{data.authorData.name}</a>
    <div class="author-card-role">{data.authorData.position}</div>
    <p class="author-card-bio">{data.authorData.description}</p>
    {#if data.authorData.linkedin}
      <a href={data.authorData.linkedin} target="_blank" rel="noopener" class="author-linkedin"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path></svg> {$t('LinkedIn Profile')}</a>
    {/if}
  </div>
</div>

<style lang="scss">
  .sidebar-author-wrap {
    padding-bottom: 20px; margin-bottom: 20px;
    border-bottom: 1px solid #e5e7eb;
  }
  .sb-author-row { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
  .sb-avatar {
    width: 96px; height: 96px; min-width: 96px; overflow: hidden; flex-shrink: 0;
    clip-path: url(#authorShape);
    -webkit-clip-path: url(#authorShape);
    border: 1px solid #e5e7eb;
  }
  .sb-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .sb-name {
    font-size: 0.875rem; font-weight: 700; color: #141414;
    text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.3; margin-bottom: 2px;
    white-space: nowrap;
  }
  .sb-role {
    font-size: 0.8125rem; color: #5a6872; font-weight: 500; line-height: 1.3;
  }
  .sb-bio {
    font-size: 0.8125rem; color: #374151; line-height: 1.55;
  }
  .sb-share-label { font-size: 0.8125rem; font-weight: 500; color: #141414; margin-bottom: 8px; }
  .sb-share-btns { display: flex; gap: 8px; margin-bottom: 20px; }
  .sb-share-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 6px;
    background: #141414; color: #fff;
    transition: opacity 0.2s;
  }
  .sb-share-btn:hover { opacity: 0.85; }
  .sb-share-btn svg { width: 18px; height: 18px; }
  .author-card {
    display: flex; gap: 20px; align-items: flex-start;
    padding: 32px; background: #f7f9fb; border-radius: 12px;
    margin-bottom: 40px;
  }
  .author-card-avatar {
    width: 72px; height: 72px; min-width: 72px; overflow: hidden;
    clip-path: url(#authorShape);
    -webkit-clip-path: url(#authorShape);
    border: 1px solid #e5e7eb;
  }
  .author-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .author-card-info { flex: 1; }
  .author-card-label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #889aa8; margin-bottom: 6px; }
  .author-card-name {
    font-size: 1.0625rem; font-weight: 700; color: #141414; margin-bottom: 2px;
    text-decoration: none; display: inline-block;
  }
  .author-card-name:hover { text-decoration: underline; }
  .author-card-role { font-size: 0.8125rem; color: #889aa8; margin-bottom: 8px; }
  .author-card-bio { font-size: 0.875rem; line-height: 1.6; color: #5a6872; }
  .author-linkedin { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 0.8125rem; font-weight: 600; color: #0a66c2; text-decoration: none; transition: opacity .2s; }
  .author-linkedin:hover { opacity: .75; }
  .author-linkedin svg { width: 16px; height: 16px; }

  @media (max-width: 768px) {
    .qc-topbar { display: none; }
    .qc-header-nav { display: none; }
    .qc-header-inner, .article-wrapper { padding-left: 20px; padding-right: 20px; max-width: 100%; }
    .article-hero .breadcrumbs, .article-hero .article-header { padding-left: 20px; padding-right: 20px; }
    .article-hero .article-header { padding-top: 16px; padding-bottom: 10px; }
    .article-hero-meta { padding-bottom: 10px; }
    .article-body { padding-top: 12px; }
    .qc-footer-grid { grid-template-columns: repeat(2, 1fr); }
    .sidebar { flex-direction: column; }
    .author-card { flex-direction: column; align-items: center; text-align: center; }
    .qc-footer-inner { padding: 0 20px; }
    /* Hide author detail at top of article on mobile */
    .article-meta-author, .article-contributors { display: none !important; }
    .sidebar { display: none !important; }
  }
</style>