---
import Layout from "@/layouts/Layout.astro";
import Tag from "@/components/Tag.astro";
import { metadata } from "@/consts";

const { author, email, githubUrl, aboutBio, skills } = metadata;
---

<Layout title="关于" description="关于我和这个博客">
  <article class="about">
    <!-- 个人简介区域 -->
    <section class="profile-section">
      <div class="avatar-container">
        <div class="avatar">
          <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="50" cy="50" r="50" fill="url(#gradient)"/>
            <circle cx="50" cy="35" r="15" fill="white" opacity="0.9"/>
            <path d="M25 75 Q25 55, 50 55 T75 75" fill="white" opacity="0.9"/>
            <defs>
              <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" style="stop-color:#0066FF;stop-opacity:1" />
                <stop offset="100%" style="stop-color:#7B1FA2;stop-opacity:1" />
              </linearGradient>
            </defs>
          </svg>
        </div>
      </div>
      
      <h1 class="page-title">关于我</h1>
      
      <div class="bio">
        {aboutBio.split('\n\n').map((paragraph: string) => (
          <p>{paragraph}</p>
        ))}
      </div>
    </section>

    <!-- 技能标签云 -->
    <section class="skills-section">
      <h2 class="section-title">技能标签</h2>
      <div class="skills-cloud">
        {skills.map((skill: string) => (
          <Tag tag={skill} size="medium" />
        ))}
      </div>
    </section>

    <!-- 联系方式 -->
    <section class="contact-section">
      <h2 class="section-title">联系方式</h2>
      <div class="contact-links">
        {email && (
          <a href={`mailto:${email}`} class="contact-link">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" stroke-width="2"/>
              <polyline points="22,6 12,13 2,6" stroke-width="2"/>
            </svg>
            <span>Email</span>
          </a>
        )}
        
        {githubUrl && (
          <a href={githubUrl} class="contact-link" target="_blank" rel="noopener">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
              <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
            </svg>
            <span>GitHub</span>
          </a>
        )}
      </div>
    </section>

    <!-- 关于博客 -->
    <section class="blog-info-section">
      <h2 class="section-title">关于这个博客</h2>
      <div class="blog-info">
        <p>
          这个博客使用 <a href="https://astro.build" target="_blank" rel="noopener">Astro</a> 
          构建，配合 <a href="https://www.solidjs.com" target="_blank" rel="noopener">SolidJS</a> 
          实现交互功能。
        </p>
        <p>
          设计追求简洁、优雅和高性能，支持明暗主题切换，提供舒适的阅读体验。
        </p>
        <div class="tech-stack">
          <div class="tech-item">
            <strong>框架</strong>
            <span>Astro</span>
          </div>
          <div class="tech-item">
            <strong>UI 库</strong>
            <span>SolidJS</span>
          </div>
          <div class="tech-item">
            <strong>语言</strong>
            <span>TypeScript</span>
          </div>
          <div class="tech-item">
            <strong>样式</strong>
            <span>CSS Variables</span>
          </div>
        </div>
      </div>
    </section>
  </article>
</Layout>

<style>
  .about {
    max-width: var(--content-width);
    margin: 0 auto;
  }

  /* 个人简介区域 */
  .profile-section {
    text-align: center;
    margin-bottom: var(--space-2xl);
    padding-bottom: var(--space-2xl);
    border-bottom: 1px solid var(--border-color);
  }

  .avatar-container {
    margin-bottom: var(--space-xl);
  }

  .avatar {
    width: 120px;
    height: 120px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: var(--shadow-md);
  }

  .avatar svg {
    width: 100%;
    height: 100%;
  }

  .page-title {
    font-size: var(--text-h1);
    line-height: var(--line-h1);
    font-weight: 800;
    margin: 0 0 var(--space-lg) 0;
    color: var(--text-primary);
  }

  .bio {
    max-width: 600px;
    margin: 0 auto;
    text-align: left;
  }

  .bio p {
    font-size: var(--text-base);
    line-height: var(--line-base);
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
  }

  /* 技能区域 */
  .skills-section {
    margin-bottom: var(--space-2xl);
    padding-bottom: var(--space-2xl);
    border-bottom: 1px solid var(--border-color);
  }

  .section-title {
    font-size: var(--text-h2);
    line-height: var(--line-h2);
    font-weight: 700;
    margin: 0 0 var(--space-lg) 0;
    color: var(--text-primary);
  }

  .skills-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: center;
  }

  /* 联系方式区域 */
  .contact-section {
    margin-bottom: var(--space-2xl);
    padding-bottom: var(--space-2xl);
    border-bottom: 1px solid var(--border-color);
  }

  .contact-links {
    display: flex;
    gap: var(--space-lg);
    justify-content: center;
    flex-wrap: wrap;
  }

  .contact-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    text-decoration: none;
    transition: all var(--transition-base);
    font-weight: 500;
  }

  .contact-link:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }

  /* 博客信息区域 */
  .blog-info-section {
    margin-bottom: var(--space-2xl);
  }

  .blog-info p {
    font-size: var(--text-base);
    line-height: var(--line-base);
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
  }

  .blog-info a {
    color: var(--accent-color);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--transition-fast);
  }

  .blog-info a:hover {
    border-bottom-color: var(--accent-color);
  }

  .tech-stack {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-lg);
  }

  .tech-item {
    padding: var(--space-md);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .tech-item strong {
    font-size: var(--text-small);
    color: var(--text-secondary);
    font-weight: 600;
  }

  .tech-item span {
    font-size: var(--text-base);
    color: var(--text-primary);
    font-weight: 500;
  }

  /* 响应式设计 */
  @media (max-width: 640px) {
    .page-title {
      font-size: 28px;
    }

    .section-title {
      font-size: 24px;
    }

    .bio {
      text-align: left;
    }

    .contact-links {
      flex-direction: column;
      align-items: stretch;
    }

    .contact-link {
      justify-content: center;
    }

    .tech-stack {
      grid-template-columns: 1fr;
    }
  }
</style>