<layout name="layouts/main" />

<div class="campaign-landing">
    <!-- Hero Section with Album Art -->
    <section class="campaign-hero">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <div class="campaign-artwork">
                        <if condition="campaign.artwork_url">
                            <img src="{{ campaign.artwork_url }}"
                                 alt="{{ campaign.artist_name }} - {{ campaign.album_title }}"
                                 class="img-fluid rounded shadow-lg">
                        </if>
                        <if condition="!campaign.artwork_url">
                            <div class="artwork-placeholder">
                                <i class="bi bi-music-note-beamed"></i>
                            </div>
                        </if>
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="campaign-info">
                        <h1 class="campaign-title">{{ campaign.album_title }}</h1>
                        <h2 class="campaign-artist">{{ campaign.artist_name }}</h2>

                        <if condition="campaign.release_date">
                            <div class="release-info">
                                <i class="bi bi-calendar-event"></i>
                                <span>Releases {{ campaign.release_date }}</span>
                            </div>
                        </if>

                        <if condition="campaign.description">
                            <p class="campaign-description">{{ campaign.description }}</p>
                        </if>

                        <div class="campaign-stats">
                            <div class="stat-item">
                                <span class="stat-value">{{ campaign.total_saves ?? 0 }}</span>
                                <span class="stat-label">Pre-Saves</span>
                            </div>
                            <if condition="campaign.track_count">
                                <div class="stat-item">
                                    <span class="stat-value">{{ campaign.track_count }}</span>
                                    <span class="stat-label">Tracks</span>
                                </div>
                            </if>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Pre-Save Actions Section -->
    <section class="campaign-actions">
        <div class="container">
            <div class="actions-wrapper">
                <h3 class="actions-title">Pre-Save Now</h3>
                <p class="actions-subtitle">Be the first to hear it when it drops</p>

                <div class="platform-buttons">
                    <if condition="campaign.spotify_enabled">
                        <button class="platform-btn spotify-btn" data-platform="spotify">
                            <i class="bi bi-spotify"></i>
                            <span>Pre-Save on Spotify</span>
                        </button>
                    </if>

                    <if condition="campaign.apple_music_enabled">
                        <button class="platform-btn apple-btn" data-platform="apple-music">
                            <i class="bi bi-apple"></i>
                            <span>Pre-Add on Apple Music</span>
                        </button>
                    </if>
                </div>

                <if condition="!user_has_saved">
                    <div class="email-capture-prompt">
                        <p class="small text-muted">
                            Or enter your email to get notified on release day
                        </p>
                        <button class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#emailModal">
                            <i class="bi bi-envelope"></i> Get Email Reminder
                        </button>
                    </div>
                </if>

                <if condition="user_has_saved">
                    <div class="saved-confirmation">
                        <i class="bi bi-check-circle-fill text-success"></i>
                        <span>You've pre-saved this release!</span>
                    </div>
                </if>
            </div>
        </div>
    </section>

    <!-- Track List (if available) -->
    <if condition="campaign.track_count">
        <section class="campaign-tracklist">
            <div class="container">
                <h3 class="section-title">Track List</h3>
                <div class="tracks">
                    <for var="track" in="campaign.tracks">
                        <div class="track-item">
                            <span class="track-number">{{ track.position }}</span>
                            <div class="track-info">
                                <div class="track-title">{{ track.title }}</div>
                                <if condition="track.duration">
                                    <div class="track-duration">{{ track.duration }}</div>
                                </if>
                            </div>
                            <if condition="track.preview_url">
                                <button class="btn-preview" data-preview="{{ track.preview_url }}">
                                    <i class="bi bi-play-circle"></i>
                                </button>
                            </if>
                        </div>
                    </for>
                </div>
            </div>
        </section>
    </if>

    <!-- Social Share Section -->
    <section class="campaign-share">
        <div class="container">
            <div class="share-wrapper">
                <h3 class="share-title">Spread the Word</h3>
                <div class="share-buttons">
                    <button class="share-btn twitter" data-share="twitter">
                        <i class="bi bi-twitter"></i>
                        <span>Tweet</span>
                    </button>
                    <button class="share-btn facebook" data-share="facebook">
                        <i class="bi bi-facebook"></i>
                        <span>Share</span>
                    </button>
                    <button class="share-btn whatsapp" data-share="whatsapp">
                        <i class="bi bi-whatsapp"></i>
                        <span>WhatsApp</span>
                    </button>
                    <button class="share-btn copy-link" data-share="copy">
                        <i class="bi bi-link-45deg"></i>
                        <span>Copy Link</span>
                    </button>
                </div>
            </div>
        </div>
    </section>
</div>

<!-- Email Collection Modal -->
<div class="modal fade" id="emailModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Get Notified on Release Day</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="emailCaptureForm" action="/campaign/{{ campaign.slug }}/subscribe" method="POST">
                    <input type="hidden" name="_csrf" value="{{ csrf_token }}">

                    <div class="mb-3">
                        <label for="email" class="form-label">Email Address</label>
                        <input type="email"
                               class="form-control"
                               id="email"
                               name="email"
                               required
                               placeholder="your@email.com">
                        <div class="invalid-feedback">
                            Please enter a valid email address
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="name" class="form-label">Name (optional)</label>
                        <input type="text"
                               class="form-control"
                               id="name"
                               name="name"
                               placeholder="Your name">
                    </div>

                    <div class="form-check mb-3">
                        <input type="checkbox"
                               class="form-check-input"
                               id="newsletter"
                               name="newsletter"
                               value="1">
                        <label class="form-check-label" for="newsletter">
                            Also send me news and updates from {{ campaign.artist_name }}
                        </label>
                    </div>

                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-bell"></i> Notify Me
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<style>
.campaign-landing {
    padding: 2rem 0;
}

.campaign-hero {
    padding: 3rem 0;
}

.campaign-artwork img {
    width: 100%;
    max-width: 500px;
    display: block;
    margin: 0 auto;
}

.artwork-placeholder {
    width: 100%;
    max-width: 500px;
    aspect-ratio: 1;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.artwork-placeholder i {
    font-size: 8rem;
    color: rgba(255, 255, 255, 0.3);
}

.campaign-info {
    padding: 2rem 0;
}

.campaign-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.campaign-artist {
    font-size: 1.5rem;
    color: #6c757d;
    margin-bottom: 1.5rem;
}

.release-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    color: #6c757d;
}

.campaign-description {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.campaign-stats {
    display: flex;
    gap: 2rem;
    margin-top: 2rem;
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: #667eea;
}

.stat-label {
    font-size: 0.875rem;
    color: #6c757d;
    text-transform: uppercase;
}

.campaign-actions {
    background: #f8f9fa;
    padding: 3rem 0;
}

.actions-wrapper {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.actions-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.actions-subtitle {
    color: #6c757d;
    margin-bottom: 2rem;
}

.platform-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.platform-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.platform-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.platform-btn i {
    font-size: 1.5rem;
}

.spotify-btn {
    background: #1DB954;
    color: white;
}

.apple-btn {
    background: #FA243C;
    color: white;
}

.email-capture-prompt {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #dee2e6;
}

.saved-confirmation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
    padding: 1rem;
    background: #d1e7dd;
    border-radius: 0.5rem;
    color: #0f5132;
    font-weight: 500;
}

.saved-confirmation i {
    font-size: 1.5rem;
}

.campaign-tracklist {
    padding: 3rem 0;
}

.section-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.tracks {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    overflow: hidden;
}

.track-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
    transition: background 0.2s;
}

.track-item:last-child {
    border-bottom: none;
}

.track-item:hover {
    background: #f8f9fa;
}

.track-number {
    width: 2rem;
    text-align: center;
    color: #6c757d;
    font-weight: 500;
}

.track-info {
    flex: 1;
}

.track-title {
    font-weight: 500;
}

.track-duration {
    font-size: 0.875rem;
    color: #6c757d;
}

.btn-preview {
    background: none;
    border: none;
    color: #667eea;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    transition: color 0.2s;
}

.btn-preview:hover {
    color: #764ba2;
}

.campaign-share {
    padding: 3rem 0;
    background: #f8f9fa;
}

.share-wrapper {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.share-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.share-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.share-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: 2px solid #dee2e6;
    background: white;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s;
}

.share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.share-btn.twitter:hover {
    border-color: #1DA1F2;
    color: #1DA1F2;
}

.share-btn.facebook:hover {
    border-color: #1877F2;
    color: #1877F2;
}

.share-btn.whatsapp:hover {
    border-color: #25D366;
    color: #25D366;
}

.share-btn.copy-link:hover {
    border-color: #667eea;
    color: #667eea;
}

@media (max-width: 991px) {
    .campaign-title {
        font-size: 2rem;
    }

    .campaign-artist {
        font-size: 1.25rem;
    }

    .campaign-artwork img,
    .artwork-placeholder {
        max-width: 100%;
    }
}
</style>

<script>
// Platform Pre-Save Buttons
document.querySelectorAll('.platform-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        const platform = this.dataset.platform;
        const campaignSlug = '{{ campaign.slug }}';

        if (platform === 'spotify') {
            window.location.href = `/campaign/${campaignSlug}/presave/spotify`;
        } else if (platform === 'apple-music') {
            window.location.href = `/campaign/${campaignSlug}/presave/apple-music`;
        }
    });
});

// Share Functionality
document.querySelectorAll('.share-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        const shareType = this.dataset.share;
        const url = window.location.href;
        const text = `Check out {{ campaign.album_title }} by {{ campaign.artist_name }}!`;

        switch(shareType) {
            case 'twitter':
                window.open(`https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(url)}`, '_blank');
                break;
            case 'facebook':
                window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`, '_blank');
                break;
            case 'whatsapp':
                window.open(`https://wa.me/?text=${encodeURIComponent(text + ' ' + url)}`, '_blank');
                break;
            case 'copy':
                navigator.clipboard.writeText(url).then(() => {
                    this.innerHTML = '<i class="bi bi-check"></i><span>Copied!</span>';
                    setTimeout(() => {
                        this.innerHTML = '<i class="bi bi-link-45deg"></i><span>Copy Link</span>';
                    }, 2000);
                });
                break;
        }
    });
});

// Email Form Validation
const emailForm = document.getElementById('emailCaptureForm');
if (emailForm) {
    emailForm.addEventListener('submit', function(e) {
        const emailInput = this.querySelector('#email');
        if (!emailInput.value || !emailInput.value.includes('@')) {
            e.preventDefault();
            emailInput.classList.add('is-invalid');
            return false;
        }
    });
}
</script>
