@extends('layouts.app')

@section('title', '关于我 | About')

@section('content')
<style>
    /* About Section */
    .about {
        padding: 6rem 5%;
        background: white;
        min-height: 100vh;
    }

    .about-container {
        max-width: 1400px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        align-items: center;
    }

    .about-image {
        position: relative;
    }

    .about-image-container {
        position: relative;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    }

    .about-image img {
        width: 100%;
        height: auto;
        display: block;
    }

    .about-text h2 {
        font-family: 'Playfair Display', serif;
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 1.5rem;
        color: var(--text-primary);
    }

    .about-text p {
        color: var(--text-secondary);
        font-size: 1.1rem;
        line-height: 1.8;
        margin-bottom: 1.5rem;
    }

    .skills {
        display: flex;
        flex-wrap: wrap;
        gap: 0.8rem;
        margin-top: 2rem;
    }

    .skill-tag {
        padding: 0.5rem 1rem;
        background: rgba(102, 126, 234, 0.1);
        color: var(--accent-blue);
        border-radius: 50px;
        font-size: 0.9rem;
        font-weight: 500;
        transition: all 0.3s ease;
    }

    .skill-tag:hover {
        background: var(--primary-gradient);
        color: white;
        transform: translateY(-2px);
    }

    /* Experience Section */
    .experience {
        padding: 6rem 5%;
        background: #fafafa;
    }

    .experience-container {
        max-width: 1400px;
        margin: 0 auto;
    }

    .section-header {
        text-align: center;
        margin-bottom: 4rem;
    }

    .section-label {
        display: inline-block;
        padding: 0.5rem 1.2rem;
        background: rgba(102, 126, 234, 0.1);
        color: var(--accent-blue);
        border-radius: 50px;
        font-size: 0.85rem;
        font-weight: 600;
        margin-bottom: 1rem;
    }

    .section-title {
        font-family: 'Playfair Display', serif;
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 1rem;
        color: var(--text-primary);
    }

    .timeline {
        max-width: 900px;
        margin: 0 auto;
        position: relative;
    }

    .timeline::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 2px;
        background: linear-gradient(180deg, var(--accent-blue), var(--accent-purple));
        transform: translateX(-50%);
    }

    .timeline-item {
        display: flex;
        justify-content: flex-end;
        padding-right: 50%;
        margin-bottom: 3rem;
        position: relative;
    }

    .timeline-item:nth-child(even) {
        justify-content: flex-start;
        padding-right: 0;
        padding-left: 50%;
    }

    .timeline-content {
        background: white;
        padding: 2rem;
        border-radius: 20px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        max-width: 400px;
        margin-right: 2rem;
        transition: all 0.3s ease;
    }

    .timeline-item:nth-child(even) .timeline-content {
        margin-right: 0;
        margin-left: 2rem;
    }

    .timeline-content:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    }

    .timeline-date {
        display: inline-block;
        padding: 0.3rem 0.8rem;
        background: var(--primary-gradient);
        color: white;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 600;
        margin-bottom: 0.8rem;
    }

    .timeline-title {
        font-size: 1.3rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        color: var(--text-primary);
    }

    .timeline-company {
        font-size: 1rem;
        font-weight: 600;
        color: var(--accent-blue);
        margin-bottom: 0.8rem;
    }

    .timeline-description {
        color: var(--text-secondary);
        font-size: 0.95rem;
        line-height: 1.6;
    }

    .timeline-marker {
        position: absolute;
        left: 50%;
        top: 2rem;
        width: 16px;
        height: 16px;
        background: var(--primary-gradient);
        border-radius: 50%;
        transform: translateX(-50%);
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
    }

    /* Services Section */
    .services {
        padding: 6rem 5%;
        background: white;
    }

    .services-container {
        max-width: 1400px;
        margin: 0 auto;
    }

    .services-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 2rem;
    }

    .service-card {
        background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
        padding: 2.5rem;
        border-radius: 20px;
        transition: all 0.3s ease;
        border: 2px solid transparent;
    }

    .service-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.2);
        border-color: rgba(102, 126, 234, 0.3);
    }

    .service-icon {
        width: 60px;
        height: 60px;
        background: var(--primary-gradient);
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .service-title {
        font-size: 1.4rem;
        font-weight: 700;
        margin-bottom: 1rem;
        color: var(--text-primary);
    }

    .service-description {
        color: var(--text-secondary);
        font-size: 1rem;
        line-height: 1.6;
        margin-bottom: 1.5rem;
    }

    .service-features {
        list-style: none;
    }

    .service-features li {
        padding: 0.5rem 0;
        color: var(--text-secondary);
        font-size: 0.95rem;
        position: relative;
        padding-left: 1.5rem;
    }

    .service-features li::before {
        content: '✓';
        position: absolute;
        left: 0;
        color: var(--accent-blue);
        font-weight: 700;
    }

    /* Responsive Design */
    @media (max-width: 1024px) {
        .about-container {
            grid-template-columns: 1fr;
        }

        .timeline::before {
            left: 20px;
        }

        .timeline-item,
        .timeline-item:nth-child(even) {
            justify-content: flex-start;
            padding-left: 60px;
            padding-right: 0;
        }

        .timeline-content,
        .timeline-item:nth-child(even) .timeline-content {
            margin-left: 0;
            margin-right: 0;
        }

        .timeline-marker {
            left: 20px;
        }
    }

    @media (max-width: 768px) {
        .services-grid {
            grid-template-columns: 1fr;
        }

        .timeline-content {
            max-width: 100%;
        }
    }
</style>

<!-- About Section -->
<section class="about">
    <div class="about-container">
        <div class="about-image fade-in">
            <div class="about-image-container">
                <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=600&h=700&fit=crop" alt="设计师照片">
            </div>
        </div>
        <div class="about-text fade-in">
            <span class="section-label">关于我</span>
            <h2>热爱设计的<br>创意专业人士</h2>
            <p>我是一名拥有8年经验的平面设计师,专注于品牌设计、UI/UX设计和视觉传达。我相信好的设计不仅仅是美观,更是解决问题和传递价值的有效工具。</p>
            <p>我的设计理念是简约而不简单,注重细节和用户体验。每一个项目我都会深入理解品牌和用户需求,创造出既美观又实用的设计作品。</p>
            <p>在设计过程中,我善于运用色彩、排版和视觉元素,将复杂的信息转化为直观易懂的视觉语言。同时,我也非常注重与客户的沟通,确保设计方案能够准确传达品牌价值。</p>
            <div class="skills">
                <span class="skill-tag">品牌设计</span>
                <span class="skill-tag">UI/UX设计</span>
                <span class="skill-tag">包装设计</span>
                <span class="skill-tag">插画设计</span>
                <span class="skill-tag">海报设计</span>
                <span class="skill-tag">网站设计</span>
                <span class="skill-tag">Adobe Creative Suite</span>
                <span class="skill-tag">Figma</span>
                <span class="skill-tag">Sketch</span>
                <span class="skill-tag">Photoshop</span>
                <span class="skill-tag">Illustrator</span>
                <span class="skill-tag">InDesign</span>
            </div>
            <div style="margin-top: 2rem; display: flex; gap: 1rem; flex-wrap: wrap;">
                <button onclick="showWeChatQRCode()" style="padding: 0.8rem 1.5rem; background: linear-gradient(135deg, #07c160 0%, #06ae56 100%); color: white; border: none; border-radius: 50px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(7, 193, 96, 0.3);">
                    📱 添加微信
                </button>
                <a href="/contact" style="padding: 0.8rem 1.5rem; background: var(--primary-gradient); color: white; text-decoration: none; border-radius: 50px; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);">
                    ✉️ 联系我
                </a>
            </div>
        </div>
    </div>
</section>

<!-- Experience Section -->
<section class="experience">
    <div class="experience-container">
        <div class="section-header">
            <span class="section-label">工作经历</span>
            <h2 class="section-title">我的职业历程</h2>
            <p class="section-description">从业8年来,我参与了各种类型的设计项目,积累了丰富的经验。</p>
        </div>
        <div class="timeline">
            <div class="timeline-item fade-in">
                <div class="timeline-marker"></div>
                <div class="timeline-content">
                    <span class="timeline-date">2021 - 至今</span>
                    <h3 class="timeline-title">高级设计师</h3>
                    <h4 class="timeline-company">创意设计工作室</h4>
                    <p class="timeline-description">负责多个品牌的视觉设计项目,包括品牌识别系统设计、网站UI设计和营销物料设计。带领设计团队完成大型项目,提升设计质量和效率。</p>
                </div>
            </div>

            <div class="timeline-item fade-in">
                <div class="timeline-marker"></div>
                <div class="timeline-content">
                    <span class="timeline-date">2018 - 2021</span>
                    <h3 class="timeline-title">UI/UX设计师</h3>
                    <h4 class="timeline-company">科技公司</h4>
                    <p class="timeline-description">专注于移动端和Web端产品的界面设计,参与多个App和网站的设计项目。通过用户研究和可用性测试,优化产品用户体验。</p>
                </div>
            </div>

            <div class="timeline-item fade-in">
                <div class="timeline-marker"></div>
                <div class="timeline-content">
                    <span class="timeline-date">2016 - 2018</span>
                    <h3 class="timeline-title">平面设计师</h3>
                    <h4 class="timeline-company">广告公司</h4>
                    <p class="timeline-description">负责品牌设计、海报设计和包装设计等项目。为客户提供创意设计方案,参与项目从概念到最终交付的全过程。</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Services Section -->
<section class="services">
    <div class="services-container">
        <div class="section-header">
            <span class="section-label">服务内容</span>
            <h2 class="section-title">我能为你提供什么</h2>
            <p class="section-description">提供专业的设计服务,帮助你实现品牌和业务目标。</p>
        </div>
        <div class="services-grid">
            <div class="service-card fade-in">
                <div class="service-icon">🎨</div>
                <h3 class="service-title">品牌设计</h3>
                <p class="service-description">为企业和个人打造独特的品牌形象,从Logo到完整的视觉识别系统。</p>
                <ul class="service-features">
                    <li>Logo设计</li>
                    <li>VI视觉识别系统</li>
                    <li>品牌指南</li>
                    <li>营销物料设计</li>
                </ul>
            </div>

            <div class="service-card fade-in">
                <div class="service-icon">💻</div>
                <h3 class="service-title">UI/UX设计</h3>
                <p class="service-description">创建直观、美观的用户界面,提升用户体验和产品价值。</p>
                <ul class="service-features">
                    <li>移动App设计</li>
                    <li>网站界面设计</li>
                    <li>用户体验研究</li>
                    <li>交互原型设计</li>
                </ul>
            </div>

            <div class="service-card fade-in">
                <div class="service-icon">📦</div>
                <h3 class="service-title">包装设计</h3>
                <p class="service-description">为产品设计吸引人的包装,提升产品在市场上的竞争力。</p>
                <ul class="service-features">
                    <li>产品包装设计</li>
                    <li>包装结构设计</li>
                    <li>材质选择</li>
                    <li>印刷工艺指导</li>
                </ul>
            </div>

            <div class="service-card fade-in">
                <div class="service-icon">🖼️</div>
                <h3 class="service-title">插画设计</h3>
                <p class="service-description">根据品牌需求创作独特的插画作品,增强品牌识别度。</p>
                <ul class="service-features">
                    <li>商业插画</li>
                    <li>品牌插画</li>
                    <li>编辑插画</li>
                    <li>角色设计</li>
                </ul>
            </div>

            <div class="service-card fade-in">
                <div class="service-icon">📄</div>
                <h3 class="service-title">海报设计</h3>
                <p class="service-description">设计引人注目的海报,有效传达信息和吸引目标受众。</p>
                <ul class="service-features">
                    <li>活动海报</li>
                    <li>宣传海报</li>
                    <li>展览海报</li>
                    <li>社交媒体海报</li>
                </ul>
            </div>

            <div class="service-card fade-in">
                <div class="service-icon">🌐</div>
                <h3 class="service-title">网站设计</h3>
                <p class="service-description">创建响应式、现代化的网站,提升品牌在线形象。</p>
                <ul class="service-features">
                    <li>企业官网设计</li>
                    <li>电商网站设计</li>
                    <li>响应式设计</li>
                    <li>着陆页设计</li>
                </ul>
            </div>
        </div>
    </div>
</section>

<!-- WeChat QR Code Modal -->
<div class="wechat-modal" id="wechatModal">
    <div class="wechat-modal-content">
        <div class="wechat-modal-close" onclick="closeWeChatQRCode()">&times;</div>
        <h3 class="wechat-modal-title">扫码添加微信</h3>
        <p class="wechat-modal-subtitle">扫描二维码，快速联系我</p>
        <div class="wechat-qr-container">
            <div class="wechat-qr-code">
                <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=https://weixin.qq.com/r/selenwoo&bgcolor=ffffff" alt="微信二维码">
            </div>
        </div>
        <div class="wechat-modal-id">微信号: selenwoo</div>
        <p class="wechat-modal-tip">
            💡 使用微信扫描上方二维码<br>
            或直接搜索微信号: <strong>selenwoo</strong><br>
            期待与您交流！
        </p>
    </div>
</div>

<style>
    /* WeChat QR Code Modal */
    .wechat-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 9999;
        align-items: center;
        justify-content: center;
        animation: fadeIn 0.3s ease;
    }

    .wechat-modal.active {
        display: flex;
    }

    .wechat-modal-content {
        background: white;
        padding: 2.5rem;
        border-radius: 20px;
        text-align: center;
        max-width: 400px;
        width: 90%;
        position: relative;
        animation: slideUp 0.3s ease;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    }

    .wechat-modal-close {
        position: absolute;
        top: 1rem;
        right: 1rem;
        font-size: 2rem;
        cursor: pointer;
        color: #999;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: all 0.3s ease;
    }

    .wechat-modal-close:hover {
        background: #f0f0f0;
        color: #333;
    }

    .wechat-qr-container {
        background: linear-gradient(135deg, #07c160 0%, #06ae56 100%);
        padding: 1.5rem;
        border-radius: 15px;
        margin-bottom: 1.5rem;
    }

    .wechat-qr-code {
        background: white;
        padding: 1rem;
        border-radius: 10px;
        display: inline-block;
    }

    .wechat-qr-code img {
        width: 200px;
        height: 200px;
        display: block;
    }

    .wechat-modal-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 0.5rem;
    }

    .wechat-modal-subtitle {
        font-size: 1rem;
        color: var(--text-secondary);
        margin-bottom: 0.5rem;
    }

    .wechat-modal-id {
        font-size: 1.25rem;
        font-weight: 600;
        color: #07c160;
        margin-bottom: 1.5rem;
        background: rgba(7, 193, 96, 0.1);
        padding: 0.75rem 1.5rem;
        border-radius: 10px;
        display: inline-block;
    }

    .wechat-modal-tip {
        font-size: 0.9rem;
        color: var(--text-secondary);
        line-height: 1.6;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    @keyframes slideUp {
        from {
            transform: translateY(50px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
</style>

<script>
    function showWeChatQRCode() {
        document.getElementById('wechatModal').classList.add('active');
        document.body.style.overflow = 'hidden';
    }

    function closeWeChatQRCode() {
        document.getElementById('wechatModal').classList.remove('active');
        document.body.style.overflow = '';
    }

    document.getElementById('wechatModal').addEventListener('click', function(e) {
        if (e.target === this) {
            closeWeChatQRCode();
        }
    });

    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closeWeChatQRCode();
        }
    });
</script>
@endsection