<?php
define('ROOT_PATH', dirname(__DIR__, 3).'/');
require ROOT_PATH.'app/common/header.php';

$id = intval($_GET['id'] ?? 0);
$talent = null;

if ($db && $id > 0) {
    try {
        $talent = $db->table('home_talent')->where("id={$id} AND status=1")->find();
    } catch (Exception $e) {
        $talent = null;
    }
}

$categoryList = [];
try {
    $categoryList = $db->table('home_category')->where("type='talent' AND status=1")->select();
} catch (Exception $e) {
    $categoryList = [];
}

$catName = '才艺达人';
$catIcon = '✨';
if ($talent) {
    foreach ($categoryList as $cat) {
        if ($cat['id'] == $talent['cat_id']) {
            $catName = $cat['cat_name'];
            $catIcon = $cat['cat_icon'] ?? '✨';
            break;
        }
    }
}
?>

<div class="talent-detail-page">
    <!-- Header Navigation -->
    <div class="detail-header">
        <div class="header-wrapper">
            <a href="index.php" class="back-link">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polyline points="15 18 9 12 15 6"></polyline>
                </svg>
                <span>返回达人列表</span>
            </a>
        </div>
    </div>

    <!-- Main Content -->
    <div class="detail-wrapper">
        <div class="container">
            
            <?php if (!$talent): ?>
            <!-- Error State -->
            <div class="error-state">
                <div class="error-content">
                    <div class="error-illustration">
                        <svg viewBox="0 0 200 200" fill="none">
                            <circle cx="100" cy="100" r="80" fill="rgba(251,191,36,0.08)"/>
                            <circle cx="100" cy="100" r="40" stroke="#FBBF24" stroke-width="3" fill="none"/>
                            <line x1="85" y1="85" x2="115" y2="115" stroke="#FBBF24" stroke-width="3" stroke-linecap="round"/>
                            <line x1="115" y1="85" x2="85" y2="115" stroke="#FBBF24" stroke-width="3" stroke-linecap="round"/>
                        </svg>
                    </div>
                    <h2 class="error-title">达人不存在</h2>
                    <p class="error-description">该达人信息可能已被删除或暂时不可用</p>
                    <a href="index.php" class="error-button">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <polyline points="1 4 1 15 6 20 23 20 23 9 18 4 1 4"></polyline>
                            <polyline points="18 4 18 10 23 10"></polyline>
                        </svg>
                        浏览其他达人
                    </a>
                </div>
            </div>
            <?php else: ?>
            
            <div class="detail-layout">
                <!-- Left Column - Talent Card -->
                <div class="detail-main">
                    
                    <!-- Talent Portfolio Card -->
                    <div class="portfolio-card">
                        <div class="portfolio-header">
                            <div class="portfolio-avatar">
                                <div class="avatar-gradient"></div>
                                <div class="avatar-icon"><?php echo $catIcon; ?></div>
                            </div>
                            <div class="portfolio-info">
                                <div class="portfolio-badges">
                                    <span class="badge-category"><?php echo htmlspecialchars($catName); ?></span>
                                    <?php if (isset($talent['verified']) && $talent['verified'] == 1): ?>
                                    <span class="badge-verified">
                                        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
                                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
                                        </svg>
                                        已认证
                                    </span>
                                    <?php endif; ?>
                                </div>
                                <h1 class="portfolio-name"><?php echo htmlspecialchars($talent['name'] ?? '达人'); ?></h1>
                                <div class="portfolio-rating">
                                    <div class="stars-display">
                                        <?php 
                                        $rating = floatval($talent['rating'] ?? 5);
                                        for ($i = 1; $i <= 5; $i++): 
                                        ?>
                                        <span class="star-large <?php echo $i <= $rating ? 'filled' : ''; ?>">
                                            <svg viewBox="0 0 24 24" fill="currentColor">
                                                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
                                            </svg>
                                        </span>
                                        <?php endfor; ?>
                                    </div>
                                    <span class="rating-score-large"><?php echo number_format($rating, 1); ?></span>
                                    <span class="rating-label">分</span>
                                </div>
                            </div>
                        </div>

                        <!-- Quick Stats -->
                        <div class="quick-stats">
                            <div class="stat-box">
                                <div class="stat-icon">📅</div>
                                <div class="stat-value"><?php echo $talent['experience'] ?? 0; ?></div>
                                <div class="stat-unit">年经验</div>
                            </div>
                            <div class="stat-divider"></div>
                            <div class="stat-box">
                                <div class="stat-icon">💰</div>
                                <div class="stat-value">¥<?php echo number_format($talent['price'] ?? 0); ?></div>
                                <div class="stat-unit">元/场</div>
                            </div>
                            <div class="stat-divider"></div>
                            <div class="stat-box">
                                <div class="stat-icon">👁️</div>
                                <div class="stat-value"><?php echo $talent['view_count'] ?? 0; ?></div>
                                <div class="stat-unit">浏览量</div>
                            </div>
                        </div>
                    </div>

                    <!-- About Section -->
                    <div class="content-section">
                        <div class="section-header">
                            <div class="section-icon-wrapper">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
                                    <circle cx="9" cy="7" r="4"/>
                                    <path d="M22 21v-2a4 4 0 0 0-3-3.87"/>
                                    <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
                                </svg>
                            </div>
                            <h3 class="section-title">关于达人</h3>
                        </div>
                        <div class="section-content">
                            <p class="description-text">
                                <?php echo nl2br(htmlspecialchars($talent['description'] ?? '专业才艺达人，经验丰富，期待与您合作！')); ?>
                            </p>
                        </div>
                    </div>

                    <!-- Skills Section -->
                    <?php if (!empty($talent['skills'])): ?>
                    <div class="content-section">
                        <div class="section-header">
                            <div class="section-icon-wrapper">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
                                </svg>
                            </div>
                            <h3 class="section-title">技能特长</h3>
                        </div>
                        <div class="skills-list">
                            <?php 
                            $skills = explode(',', $talent['skills']);
                            foreach ($skills as $skill): 
                            ?>
                            <span class="skill-chip"><?php echo htmlspecialchars(trim($skill)); ?></span>
                            <?php endforeach; ?>
                        </div>
                    </div>
                    <?php endif; ?>

                    <!-- Contact Section -->
                    <div class="content-section">
                        <div class="section-header">
                            <div class="section-icon-wrapper">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <circle cx="12" cy="12" r="3"/>
                                    <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
                                </svg>
                            </div>
                            <h3 class="section-title">联系信息</h3>
                        </div>
                        <div class="info-grid">
                            <?php if (!empty($talent['contact'])): ?>
                            <div class="info-row">
                                <span class="info-label">联系人</span>
                                <span class="info-value"><?php echo htmlspecialchars($talent['contact']); ?></span>
                            </div>
                            <?php endif; ?>
                            <?php if (!empty($talent['phone'])): ?>
                            <div class="info-row">
                                <span class="info-label">联系电话</span>
                                <span class="info-value"><?php echo htmlspecialchars($talent['phone']); ?></span>
                            </div>
                            <?php endif; ?>
                            <?php if (!empty($talent['wechat'])): ?>
                            <div class="info-row">
                                <span class="info-label">微信号</span>
                                <span class="info-value"><?php echo htmlspecialchars($talent['wechat']); ?></span>
                            </div>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>

                <!-- Right Column - Sidebar -->
                <div class="detail-sidebar">
                    <!-- Quick Actions -->
                    <div class="sidebar-card">
                        <h4 class="sidebar-title">快捷操作</h4>
                        <div class="sidebar-actions">
                            <a href="book.php?id=<?php echo $talent['id']; ?>" class="action-btn primary">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                                    <line x1="16" y1="2" x2="16" y2="6"></line>
                                    <line x1="8" y1="2" x2="8" y2="6"></line>
                                    <line x1="3" y1="10" x2="21" y2="10"></line>
                                </svg>
                                <span>立即预订</span>
                            </a>
                            <a href="index.php" class="action-btn secondary">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <polyline points="15 18 9 12 15 6"></polyline>
                                </svg>
                                <span>返回列表</span>
                            </a>
                        </div>
                    </div>

                    <!-- Price Card -->
                    <div class="sidebar-card price-card">
                        <h4 class="sidebar-title">参考价格</h4>
                        <div class="price-info">
                            <div class="price-main">
                                <span class="price-currency">¥</span>
                                <span class="price-amount"><?php echo number_format($talent['price'] ?? 0); ?></span>
                                <span class="price-unit">/场</span>
                            </div>
                            <p class="price-note">* 具体价格可协商，以最终确认为准</p>
                        </div>
                    </div>

                    <!-- Tips Card -->
                    <div class="sidebar-card tips-card">
                        <div class="tips-header">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <circle cx="12" cy="12" r="10"/>
                                <line x1="12" y1="16" x2="12" y2="12"/>
                                <line x1="12" y1="8" x2="12.01" y2="8"/>
                            </svg>
                            <h4 class="sidebar-title">温馨提示</h4>
                        </div>
                        <ul class="tips-list">
                            <li>
                                <span class="tip-dot"></span>
                                <span>请在正常时段联系达人</span>
                            </li>
                            <li>
                                <span class="tip-dot"></span>
                                <span>建议提前3-7天预约档期</span>
                            </li>
                            <li>
                                <span class="tip-dot"></span>
                                <span>确认时间后需支付定金</span>
                            </li>
                            <li>
                                <span class="tip-dot"></span>
                                <span>如有问题可联系平台客服</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <?php endif; ?>
        </div>
    </div>
</div>

<style>
/* CSS Variables - Talent Design System */
:root {
    --primary: #FBBF24;
    --primary-dark: #F59E0B;
    --primary-light: #FCD34D;
    --accent: #EC4899;
    --bg-dark: #0F0F1A;
    --bg-card: #1A1A2E;
    --bg-hover: #252545;
    --text-primary: #FFFFFF;
    --text-secondary: #B8B8D0;
    --text-muted: #787898;
    --border: rgba(255,255,255,0.08);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
    --shadow-md: 0 8px 32px rgba(0,0,0,0.4);
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.5);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.talent-detail-page {
    min-height: 100vh;
    background: var(--bg-dark);
    color: var(--text-primary);
}

/* Header */
.detail-header {
    background: linear-gradient(135deg, rgba(251,191,36,0.12) 0%, transparent 50%);
    padding: 24px 20px;
    border-bottom: 1px solid var(--border);
}

.header-wrapper {
    max-width: 1400px;
    margin: 0 auto;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
}

.back-link:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,0.04);
}

/* Detail Wrapper */
.detail-wrapper {
    padding: 40px 20px 80px;
}

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

/* Error State */
.error-state {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    min-height: 60vh;
}

.error-content {
    text-align: center;
    max-width: 420px;
}

.error-illustration {
    width: 180px;
    height: 180px;
    margin: 0 auto 28px;
}

.error-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
}

.error-description {
    color: var(--text-secondary);
    font-size: 15px;
    margin-bottom: 28px;
    line-height: 1.6;
}

.error-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #000;
    text-decoration: none;
    border-radius: var(--radius-lg);
    font-size: 15px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.error-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(251,191,36,0.4);
}

/* Detail Layout */
.detail-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 28px;
}

.detail-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Portfolio Card */
.portfolio-card {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.portfolio-header {
    padding: 32px;
    display: flex;
    gap: 24px;
}

.portfolio-avatar {
    position: relative;
    width: 140px;
    height: 140px;
    flex-shrink: 0;
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.avatar-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
}

.avatar-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 72px;
}

.portfolio-info {
    flex: 1;
    min-width: 0;
}

.portfolio-badges {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.badge-category {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: rgba(251,191,36,0.15);
    color: var(--primary-light);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
}

.badge-verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #10B981, #059669);
    color: white;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
}

.portfolio-name {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 14px;
    background: linear-gradient(135deg, #FFFFFF 0%, #FBBF24 50%, #FCD34D 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.portfolio-rating {
    display: flex;
    align-items: center;
    gap: 12px;
}

.stars-display {
    display: flex;
    gap: 4px;
}

.star-large {
    width: 22px;
    height: 22px;
    color: var(--text-muted);
}

.star-large.filled {
    color: var(--primary);
}

.rating-score-large {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary);
}

.rating-label {
    font-size: 14px;
    color: var(--text-muted);
}

/* Quick Stats */
.quick-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border);
    border-top: 1px solid var(--border);
}

.stat-box {
    background: var(--bg-card);
    padding: 24px;
    text-align: center;
}

.stat-icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 4px;
}

.stat-unit {
    font-size: 13px;
    color: var(--text-muted);
}

.stat-divider {
    background: var(--border);
}

/* Content Sections */
.content-section {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    padding: 32px;
    border: 1px solid var(--border);
}

.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.section-icon-wrapper {
    width: 44px;
    height: 44px;
    background: rgba(251,191,36,0.12);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

.section-title {
    font-size: 18px;
    font-weight: 700;
}

.section-content {
    padding-left: 56px;
}

.description-text {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.8;
}

/* Skills List */
.skills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-left: 56px;
}

.skill-chip {
    padding: 10px 18px;
    background: rgba(251,191,36,0.1);
    border: 1px solid rgba(251,191,36,0.25);
    border-radius: var(--radius-lg);
    color: var(--primary);
    font-size: 14px;
    font-weight: 500;
}

/* Info Grid */
.info-grid {
    padding-left: 56px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}

.info-row:last-child {
    border-bottom: none;
}

.info-label {
    color: var(--text-muted);
    font-size: 14px;
}

.info-value {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
}

/* Sidebar */
.detail-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sidebar-card {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    padding: 24px;
    border: 1px solid var(--border);
}

.sidebar-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 18px;
}

.sidebar-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: var(--radius-lg);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    width: 100%;
}

.action-btn.primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #000;
}

.action-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(251,191,36,0.4);
}

.action-btn.secondary {
    background: rgba(255,255,255,0.06);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.action-btn.secondary:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.12);
}

/* Price Card */
.price-card {
    background: linear-gradient(135deg, rgba(251,191,36,0.1) 0%, rgba(236,72,153,0.05) 100%);
}

.price-info {
    text-align: center;
}

.price-main {
    margin-bottom: 16px;
}

.price-currency {
    font-size: 24px;
    color: var(--primary);
    font-weight: 600;
}

.price-amount {
    font-size: 48px;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
}

.price-unit {
    font-size: 16px;
    color: var(--text-secondary);
}

.price-note {
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

/* Tips Card */
.tips-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.tips-header svg {
    color: var(--primary);
}

.tips-header .sidebar-title {
    margin-bottom: 0;
}

.tips-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tips-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

.tip-dot {
    width: 6px;
    height: 6px;
    background: var(--primary);
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .detail-layout {
        grid-template-columns: 1fr;
    }
    
    .detail-sidebar {
        order: -1;
    }
}

@media (max-width: 768px) {
    .detail-header {
        padding: 20px 16px;
    }
    
    .detail-wrapper {
        padding: 28px 16px 60px;
    }
    
    .portfolio-header {
        flex-direction: column;
        text-align: center;
        padding: 24px;
    }
    
    .portfolio-avatar {
        width: 110px;
        height: 110px;
        margin: 0 auto;
    }
    
    .avatar-icon {
        font-size: 56px;
    }
    
    .portfolio-name {
        font-size: 24px;
    }
    
    .portfolio-badges {
        justify-content: center;
    }
    
    .quick-stats {
        grid-template-columns: 1fr;
    }
    
    .stat-box {
        padding: 20px;
    }
    
    .content-section {
        padding: 24px 20px;
    }
    
    .section-content,
    .skills-list,
    .info-grid {
        padding-left: 0;
    }
}
</style>

<?php require ROOT_PATH.'app/common/footer.php'; ?>