#!/usr/bin/env python3
"""Generate all 15 Kaizen carousel slides using Playwright."""

import asyncio
from playwright.async_api import async_playwright
import os

OUTPUT_DIR = os.path.dirname(os.path.abspath(__file__))

# Shared CSS
SHARED_CSS = """
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Inter:wght@300;400;500;600;700;800&display=swap');

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

body {
    width: 1080px;
    height: 1080px;
    background: #0C0A1A;
    font-family: 'Inter', sans-serif;
    color: #FFFFFF;
    overflow: hidden;
    position: relative;
}

.slide {
    width: 1080px;
    height: 1080px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 80px;
}

/* Glow effects */
.glow-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.3;
    pointer-events: none;
}

.glow-pink {
    background: #FF2D78;
}

.glow-violet {
    background: #B44AFF;
}

/* Typography */
.headline {
    font-family: 'DM Serif Display', serif;
    font-size: 72px;
    line-height: 1.1;
    text-align: center;
    letter-spacing: -1px;
}

.headline-lg {
    font-size: 84px;
}

.headline-sm {
    font-size: 56px;
}

.subtext {
    font-family: 'Inter', sans-serif;
    font-size: 28px;
    color: #B8B5D0;
    text-align: center;
    line-height: 1.5;
    font-weight: 300;
    max-width: 800px;
}

.accent-text {
    background: linear-gradient(135deg, #FF2D78 0%, #B44AFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.tag {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #FF2D78;
}

.cta-button {
    background: linear-gradient(135deg, #FF2D78 0%, #B44AFF 100%);
    color: white;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 26px;
    padding: 24px 56px;
    border-radius: 60px;
    border: none;
    letter-spacing: 1px;
    box-shadow: 0 0 40px rgba(255, 45, 120, 0.4), 0 0 80px rgba(180, 74, 255, 0.2);
}

.divider {
    width: 80px;
    height: 4px;
    background: linear-gradient(135deg, #FF2D78, #B44AFF);
    border-radius: 2px;
}

.slide-number {
    position: absolute;
    bottom: 40px;
    right: 50px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: rgba(184, 181, 208, 0.4);
    font-weight: 500;
    letter-spacing: 2px;
}

.brand-mark {
    position: absolute;
    bottom: 40px;
    left: 50px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: rgba(184, 181, 208, 0.3);
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* Decorative elements */
.line-accent {
    position: absolute;
    background: linear-gradient(135deg, #FF2D78, #B44AFF);
    opacity: 0.6;
}

.grid-pattern {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: 
        linear-gradient(rgba(255,45,120,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,45,120,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
}
"""

def wrap_html(body_content, extra_css=""):
    return f"""<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<style>{SHARED_CSS}\n{extra_css}</style>
</head><body>{body_content}</body></html>"""


# ============================================================
# CAMPAIGN 1: "100 Days That Changed Everything"
# ============================================================

C1_SLIDES = []

# Slide 1 - Cover
C1_SLIDES.append(wrap_html("""
<div class="slide">
    <div class="grid-pattern"></div>
    <div class="glow-orb glow-pink" style="width:400px;height:400px;top:-100px;right:-100px;"></div>
    <div class="glow-orb glow-violet" style="width:350px;height:350px;bottom:-80px;left:-80px;"></div>
    
    <div class="line-accent" style="width:3px;height:200px;top:60px;left:80px;"></div>
    <div class="line-accent" style="width:200px;height:3px;bottom:160px;right:60px;"></div>
    
    <div style="display:flex;flex-direction:column;align-items:center;gap:40px;">
        <span class="tag">KAIZEN SEASON 10</span>
        <h1 class="headline headline-lg" style="max-width:800px;">100 Days<br>That Changed<br><span class="accent-text">Everything</span></h1>
        <div class="divider"></div>
        <p class="subtext" style="font-size:24px;">The transformation program that rewrites your life.</p>
    </div>
    
    <span class="brand-mark">@Melanie</span>
    <span class="slide-number">01 / 05</span>
</div>
"""))

# Slide 2 - The Problem
C1_SLIDES.append(wrap_html("""
<div class="slide">
    <div class="grid-pattern"></div>
    <div class="glow-orb glow-violet" style="width:500px;height:500px;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0.15;"></div>
    
    <div style="display:flex;flex-direction:column;align-items:center;gap:48px;">
        <span class="tag">THE PROBLEM</span>
        <h1 class="headline" style="max-width:800px;">Tired of<br><span class="accent-text">Starting Over?</span></h1>
        <div class="divider"></div>
        <div style="display:flex;flex-direction:column;gap:24px;align-items:center;">
            <p class="subtext">Lacking discipline?</p>
            <p class="subtext">Can't stay consistent?</p>
            <p class="subtext">Programs that never stick?</p>
        </div>
        <p style="font-size:22px;color:#FF2D78;font-weight:600;font-style:italic;">You're not broken. You just need the right system.</p>
    </div>
    
    <span class="brand-mark">@Melanie</span>
    <span class="slide-number">02 / 05</span>
</div>
"""))

# Slide 3 - The Solution
C1_SLIDES.append(wrap_html("""
<div class="slide">
    <div class="grid-pattern"></div>
    <div class="glow-orb glow-pink" style="width:300px;height:300px;top:100px;left:-50px;"></div>
    <div class="glow-orb glow-violet" style="width:300px;height:300px;bottom:100px;right:-50px;"></div>
    
    <div style="display:flex;flex-direction:column;align-items:center;gap:48px;">
        <span class="tag">THE SOLUTION</span>
        <h1 class="headline headline-sm" style="max-width:850px;">Kaizen isn't just fitness —<br>it's a <span class="accent-text">complete life<br>transformation</span></h1>
        <div class="divider"></div>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:32px;max-width:700px;">
            <div style="text-align:center;padding:28px;border:1px solid rgba(255,45,120,0.2);border-radius:16px;background:rgba(255,45,120,0.05);">
                <p style="font-size:36px;margin-bottom:8px;">💪</p>
                <p style="font-weight:600;font-size:20px;">Fitness</p>
            </div>
            <div style="text-align:center;padding:28px;border:1px solid rgba(180,74,255,0.2);border-radius:16px;background:rgba(180,74,255,0.05);">
                <p style="font-size:36px;margin-bottom:8px;">🧠</p>
                <p style="font-weight:600;font-size:20px;">Mindset</p>
            </div>
            <div style="text-align:center;padding:28px;border:1px solid rgba(180,74,255,0.2);border-radius:16px;background:rgba(180,74,255,0.05);">
                <p style="font-size:36px;margin-bottom:8px;">⚡</p>
                <p style="font-weight:600;font-size:20px;">Habits</p>
            </div>
            <div style="text-align:center;padding:28px;border:1px solid rgba(255,45,120,0.2);border-radius:16px;background:rgba(255,45,120,0.05);">
                <p style="font-size:36px;margin-bottom:8px;">🔥</p>
                <p style="font-weight:600;font-size:20px;">Identity</p>
            </div>
        </div>
    </div>
    
    <span class="brand-mark">@Melanie</span>
    <span class="slide-number">03 / 05</span>
</div>
"""))

# Slide 4 - Social Proof
C1_SLIDES.append(wrap_html("""
<div class="slide">
    <div class="grid-pattern"></div>
    <div class="glow-orb glow-pink" style="width:600px;height:600px;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0.1;"></div>
    
    <div style="display:flex;flex-direction:column;align-items:center;gap:48px;">
        <span class="tag">REAL RESULTS</span>
        <h1 class="headline headline-sm" style="max-width:800px;">See what past Kaizen students achieved in just <span class="accent-text">100 days</span></h1>
        <div class="divider"></div>
        <div style="display:flex;flex-direction:column;gap:28px;max-width:750px;">
            <div style="padding:28px 36px;border-left:4px solid #FF2D78;background:rgba(255,45,120,0.05);border-radius:0 12px 12px 0;">
                <p style="font-size:22px;font-style:italic;line-height:1.5;color:#e0ddf0;">"I lost 15kg and gained a completely new identity. Kaizen changed who I am."</p>
            </div>
            <div style="padding:28px 36px;border-left:4px solid #B44AFF;background:rgba(180,74,255,0.05);border-radius:0 12px 12px 0;">
                <p style="font-size:22px;font-style:italic;line-height:1.5;color:#e0ddf0;">"The discipline I built in 100 days carried over to my career, relationships — everything."</p>
            </div>
        </div>
    </div>
    
    <span class="brand-mark">@Melanie</span>
    <span class="slide-number">04 / 05</span>
</div>
"""))

# Slide 5 - CTA
C1_SLIDES.append(wrap_html("""
<div class="slide">
    <div class="grid-pattern"></div>
    <div class="glow-orb glow-pink" style="width:500px;height:500px;top:-150px;left:50%;transform:translateX(-50%);"></div>
    <div class="glow-orb glow-violet" style="width:400px;height:400px;bottom:-100px;left:50%;transform:translateX(-50%);"></div>
    
    <div class="line-accent" style="width:3px;height:150px;top:80px;right:80px;"></div>
    <div class="line-accent" style="width:150px;height:3px;bottom:200px;left:80px;"></div>
    
    <div style="display:flex;flex-direction:column;align-items:center;gap:48px;">
        <span class="tag">SEASON 10 — JULY 2026</span>
        <h1 class="headline" style="max-width:800px;">Join the<br><span class="accent-text">Waitlist Now</span></h1>
        <div class="divider"></div>
        <div class="cta-button">GET ON THE WAITLIST →</div>
        <p class="subtext" style="font-size:22px;">🔗 Link in bio</p>
        <p style="font-size:18px;color:rgba(184,181,208,0.6);">100daytransformation.ph/Melanie</p>
    </div>
    
    <span class="brand-mark">@Melanie</span>
    <span class="slide-number">05 / 05</span>
</div>
"""))


# ============================================================
# CAMPAIGN 2: "More Than A Fitness Program"
# ============================================================

C2_SLIDES = []

# Slide 1 - Cover
C2_SLIDES.append(wrap_html("""
<div class="slide">
    <div class="grid-pattern"></div>
    <div class="glow-orb glow-violet" style="width:450px;height:450px;top:-120px;left:-120px;"></div>
    <div class="glow-orb glow-pink" style="width:350px;height:350px;bottom:-80px;right:-80px;"></div>
    
    <div style="display:flex;flex-direction:column;align-items:center;gap:40px;">
        <span class="tag">KAIZEN SEASON 10</span>
        <h1 class="headline headline-lg" style="max-width:850px;">This Is <span class="accent-text">NOT</span><br>Your Typical<br>Fitness Program</h1>
        <div class="divider"></div>
        <p class="subtext" style="font-size:22px;">It goes way deeper than reps and sets.</p>
    </div>
    
    <span class="brand-mark">@Melanie</span>
    <span class="slide-number">01 / 05</span>
</div>
"""))

# Slide 2 - What You Get
C2_SLIDES.append(wrap_html("""
<div class="slide">
    <div class="grid-pattern"></div>
    <div class="glow-orb glow-pink" style="width:400px;height:400px;top:200px;right:-100px;opacity:0.2;"></div>
    
    <div style="display:flex;flex-direction:column;align-items:center;gap:44px;">
        <span class="tag">WHAT YOU GET</span>
        <h1 class="headline headline-sm">Fitness + Mindset +<br>Habits + <span class="accent-text">Identity</span></h1>
        <div class="divider"></div>
        <div style="display:flex;flex-direction:column;gap:20px;max-width:700px;width:100%;">
            <div style="display:flex;align-items:center;gap:24px;padding:24px 32px;background:linear-gradient(135deg, rgba(255,45,120,0.1), rgba(255,45,120,0.02));border-radius:16px;border:1px solid rgba(255,45,120,0.15);">
                <span style="font-size:32px;">💪</span>
                <div>
                    <p style="font-weight:700;font-size:22px;">Physical Transformation</p>
                    <p style="color:#B8B5D0;font-size:17px;">Build the body you've always wanted</p>
                </div>
            </div>
            <div style="display:flex;align-items:center;gap:24px;padding:24px 32px;background:linear-gradient(135deg, rgba(180,74,255,0.1), rgba(180,74,255,0.02));border-radius:16px;border:1px solid rgba(180,74,255,0.15);">
                <span style="font-size:32px;">🧠</span>
                <div>
                    <p style="font-weight:700;font-size:22px;">Mental Rewiring</p>
                    <p style="color:#B8B5D0;font-size:17px;">Reprogram beliefs that hold you back</p>
                </div>
            </div>
            <div style="display:flex;align-items:center;gap:24px;padding:24px 32px;background:linear-gradient(135deg, rgba(255,45,120,0.1), rgba(180,74,255,0.05));border-radius:16px;border:1px solid rgba(255,45,120,0.1);">
                <span style="font-size:32px;">⚡</span>
                <div>
                    <p style="font-weight:700;font-size:22px;">Habit Architecture</p>
                    <p style="color:#B8B5D0;font-size:17px;">Systems that make discipline automatic</p>
                </div>
            </div>
        </div>
    </div>
    
    <span class="brand-mark">@Melanie</span>
    <span class="slide-number">02 / 05</span>
</div>
"""))

# Slide 3 - The Method
C2_SLIDES.append(wrap_html("""
<div class="slide">
    <div class="grid-pattern"></div>
    <div class="glow-orb glow-violet" style="width:500px;height:500px;bottom:-150px;left:50%;transform:translateX(-50%);opacity:0.15;"></div>
    
    <div style="display:flex;flex-direction:column;align-items:center;gap:48px;">
        <span class="tag">THE METHOD</span>
        <h1 class="headline"><span class="accent-text">100 Days</span><br>of Guided<br>Transformation</h1>
        <div class="divider"></div>
        <div style="display:flex;gap:24px;max-width:800px;">
            <div style="flex:1;text-align:center;padding:32px 16px;">
                <p style="font-size:48px;font-family:'DM Serif Display',serif;background:linear-gradient(135deg,#FF2D78,#B44AFF);-webkit-background-clip:text;-webkit-text-fill-color:transparent;">01</p>
                <p style="font-weight:600;font-size:18px;margin-top:12px;">Daily<br>Workouts</p>
            </div>
            <div style="width:1px;background:linear-gradient(to bottom,transparent,rgba(255,45,120,0.3),transparent);"></div>
            <div style="flex:1;text-align:center;padding:32px 16px;">
                <p style="font-size:48px;font-family:'DM Serif Display',serif;background:linear-gradient(135deg,#FF2D78,#B44AFF);-webkit-background-clip:text;-webkit-text-fill-color:transparent;">02</p>
                <p style="font-weight:600;font-size:18px;margin-top:12px;">Mindset<br>Coaching</p>
            </div>
            <div style="width:1px;background:linear-gradient(to bottom,transparent,rgba(180,74,255,0.3),transparent);"></div>
            <div style="flex:1;text-align:center;padding:32px 16px;">
                <p style="font-size:48px;font-family:'DM Serif Display',serif;background:linear-gradient(135deg,#FF2D78,#B44AFF);-webkit-background-clip:text;-webkit-text-fill-color:transparent;">03</p>
                <p style="font-weight:600;font-size:18px;margin-top:12px;">Community<br>Support</p>
            </div>
        </div>
        <p class="subtext" style="font-size:22px;">Created by Cho Lim — The Lazy Lifter</p>
    </div>
    
    <span class="brand-mark">@Melanie</span>
    <span class="slide-number">03 / 05</span>
</div>
"""))

# Slide 4 - Community
C2_SLIDES.append(wrap_html("""
<div class="slide">
    <div class="grid-pattern"></div>
    <div class="glow-orb glow-pink" style="width:350px;height:350px;top:100px;left:-80px;opacity:0.2;"></div>
    <div class="glow-orb glow-violet" style="width:350px;height:350px;bottom:100px;right:-80px;opacity:0.2;"></div>
    
    <div style="display:flex;flex-direction:column;align-items:center;gap:48px;">
        <span class="tag">THE COMMUNITY</span>
        <h1 class="headline headline-sm">Accountability, support,<br>and a tribe that<br><span class="accent-text">pushes you</span></h1>
        <div class="divider"></div>
        <div style="display:flex;flex-direction:column;gap:20px;max-width:650px;">
            <div style="display:flex;align-items:center;gap:20px;">
                <div style="width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#FF2D78,#B44AFF);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">✓</div>
                <p style="font-size:22px;font-weight:500;">Daily accountability check-ins</p>
            </div>
            <div style="display:flex;align-items:center;gap:20px;">
                <div style="width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#FF2D78,#B44AFF);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">✓</div>
                <p style="font-size:22px;font-weight:500;">Like-minded tribe pushing each other</p>
            </div>
            <div style="display:flex;align-items:center;gap:20px;">
                <div style="width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#FF2D78,#B44AFF);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">✓</div>
                <p style="font-size:22px;font-weight:500;">Expert coaching and mentorship</p>
            </div>
            <div style="display:flex;align-items:center;gap:20px;">
                <div style="width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#FF2D78,#B44AFF);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;">✓</div>
                <p style="font-size:22px;font-weight:500;">Lifetime bonds and connections</p>
            </div>
        </div>
    </div>
    
    <span class="brand-mark">@Melanie</span>
    <span class="slide-number">04 / 05</span>
</div>
"""))

# Slide 5 - CTA
C2_SLIDES.append(wrap_html("""
<div class="slide">
    <div class="grid-pattern"></div>
    <div class="glow-orb glow-violet" style="width:500px;height:500px;top:-150px;right:-150px;"></div>
    <div class="glow-orb glow-pink" style="width:400px;height:400px;bottom:-100px;left:-100px;"></div>
    
    <div class="line-accent" style="width:3px;height:120px;top:100px;left:80px;"></div>
    <div class="line-accent" style="width:120px;height:3px;bottom:220px;right:80px;"></div>
    
    <div style="display:flex;flex-direction:column;align-items:center;gap:44px;">
        <span class="tag">SEASON 10 — JULY 2026</span>
        <h1 class="headline">Season 10<br>Waitlist Is<br><span class="accent-text">Open Now</span></h1>
        <div class="divider"></div>
        <div class="cta-button">JOIN THE WAITLIST →</div>
        <p class="subtext" style="font-size:22px;">🔗 Link in bio</p>
        <p style="font-size:18px;color:rgba(184,181,208,0.6);">100daytransformation.ph/Melanie</p>
    </div>
    
    <span class="brand-mark">@Melanie</span>
    <span class="slide-number">05 / 05</span>
</div>
"""))


# ============================================================
# CAMPAIGN 3: "Your Future Self Is Waiting"
# ============================================================

C3_SLIDES = []

# Slide 1 - Cover
C3_SLIDES.append(wrap_html("""
<div class="slide">
    <div class="grid-pattern"></div>
    <div class="glow-orb glow-pink" style="width:400px;height:400px;bottom:-100px;left:-100px;"></div>
    <div class="glow-orb glow-violet" style="width:400px;height:400px;top:-100px;right:-100px;"></div>
    
    <div class="line-accent" style="width:200px;height:3px;top:120px;left:80px;"></div>
    <div class="line-accent" style="width:3px;height:200px;bottom:80px;right:80px;"></div>
    
    <div style="display:flex;flex-direction:column;align-items:center;gap:40px;">
        <span class="tag">KAIZEN SEASON 10</span>
        <h1 class="headline headline-lg" style="max-width:850px;">Who Will You Be<br>In <span class="accent-text">100 Days?</span></h1>
        <div class="divider"></div>
        <p class="subtext" style="font-size:24px;">Your future self is waiting for you to decide.</p>
    </div>
    
    <span class="brand-mark">@Melanie</span>
    <span class="slide-number">01 / 05</span>
</div>
"""))

# Slide 2 - Pain Point
C3_SLIDES.append(wrap_html("""
<div class="slide">
    <div class="grid-pattern"></div>
    <div class="glow-orb glow-violet" style="width:600px;height:600px;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0.1;"></div>
    
    <div style="display:flex;flex-direction:column;align-items:center;gap:48px;">
        <span class="tag">THE CYCLE</span>
        <h1 class="headline headline-sm" style="max-width:800px;">Same habits.<br>Same results.<br><span class="accent-text">Ready to break<br>the cycle?</span></h1>
        <div class="divider"></div>
        <div style="display:flex;flex-direction:column;gap:16px;align-items:center;">
            <p class="subtext" style="font-size:24px;">→ Start a program</p>
            <p class="subtext" style="font-size:24px;">→ Quit after 2 weeks</p>
            <p class="subtext" style="font-size:24px;">→ Feel guilty</p>
            <p class="subtext" style="font-size:24px;">→ Repeat</p>
        </div>
        <p style="font-size:22px;color:#FF2D78;font-weight:600;">Sound familiar?</p>
    </div>
    
    <span class="brand-mark">@Melanie</span>
    <span class="slide-number">02 / 05</span>
</div>
"""))

# Slide 3 - Vision
C3_SLIDES.append(wrap_html("""
<div class="slide">
    <div class="grid-pattern"></div>
    <div class="glow-orb glow-pink" style="width:400px;height:400px;top:80px;right:-100px;opacity:0.2;"></div>
    <div class="glow-orb glow-violet" style="width:300px;height:300px;bottom:150px;left:-60px;opacity:0.2;"></div>
    
    <div style="display:flex;flex-direction:column;align-items:center;gap:44px;">
        <span class="tag">IMAGINE</span>
        <h1 class="headline headline-sm">Stronger body.<br>Sharper mind.<br><span class="accent-text">Unshakeable<br>discipline.</span></h1>
        <div class="divider"></div>
        <div style="display:flex;gap:40px;max-width:750px;">
            <div style="flex:1;text-align:center;padding:28px 16px;border:1px solid rgba(255,45,120,0.15);border-radius:16px;">
                <p style="font-size:44px;margin-bottom:12px;">🏋️</p>
                <p style="font-size:18px;color:#B8B5D0;line-height:1.4;">A body that<br>performs</p>
            </div>
            <div style="flex:1;text-align:center;padding:28px 16px;border:1px solid rgba(180,74,255,0.15);border-radius:16px;">
                <p style="font-size:44px;margin-bottom:12px;">🎯</p>
                <p style="font-size:18px;color:#B8B5D0;line-height:1.4;">A mind that<br>focuses</p>
            </div>
            <div style="flex:1;text-align:center;padding:28px 16px;border:1px solid rgba(255,45,120,0.15);border-radius:16px;">
                <p style="font-size:44px;margin-bottom:12px;">🔥</p>
                <p style="font-size:18px;color:#B8B5D0;line-height:1.4;">A discipline<br>that lasts</p>
            </div>
        </div>
        <p class="subtext" style="font-size:20px;">All of this is 100 days away.</p>
    </div>
    
    <span class="brand-mark">@Melanie</span>
    <span class="slide-number">03 / 05</span>
</div>
"""))

# Slide 4 - Proof
C3_SLIDES.append(wrap_html("""
<div class="slide">
    <div class="grid-pattern"></div>
    <div class="glow-orb glow-pink" style="width:400px;height:400px;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0.15;"></div>
    
    <div style="display:flex;flex-direction:column;align-items:center;gap:48px;">
        <span class="tag">PROVEN</span>
        <h1 class="headline headline-sm"><span class="accent-text">Hundreds</span> have<br>done it.</h1>
        <h2 style="font-family:'DM Serif Display',serif;font-size:48px;margin-top:-16px;">Season 10 is <span class="accent-text">your</span> turn.</h2>
        <div class="divider"></div>
        <div style="display:flex;gap:48px;max-width:700px;">
            <div style="flex:1;text-align:center;">
                <p style="font-size:64px;font-family:'DM Serif Display',serif;background:linear-gradient(135deg,#FF2D78,#B44AFF);-webkit-background-clip:text;-webkit-text-fill-color:transparent;">9</p>
                <p style="font-size:18px;color:#B8B5D0;font-weight:500;">Successful<br>Seasons</p>
            </div>
            <div style="width:1px;background:linear-gradient(to bottom,transparent,rgba(255,45,120,0.3),transparent);"></div>
            <div style="flex:1;text-align:center;">
                <p style="font-size:64px;font-family:'DM Serif Display',serif;background:linear-gradient(135deg,#FF2D78,#B44AFF);-webkit-background-clip:text;-webkit-text-fill-color:transparent;">100</p>
                <p style="font-size:18px;color:#B8B5D0;font-weight:500;">Days of<br>Transformation</p>
            </div>
            <div style="width:1px;background:linear-gradient(to bottom,transparent,rgba(180,74,255,0.3),transparent);"></div>
            <div style="flex:1;text-align:center;">
                <p style="font-size:64px;font-family:'DM Serif Display',serif;background:linear-gradient(135deg,#FF2D78,#B44AFF);-webkit-background-clip:text;-webkit-text-fill-color:transparent;">∞</p>
                <p style="font-size:18px;color:#B8B5D0;font-weight:500;">Lives<br>Changed</p>
            </div>
        </div>
    </div>
    
    <span class="brand-mark">@Melanie</span>
    <span class="slide-number">04 / 05</span>
</div>
"""))

# Slide 5 - CTA
C3_SLIDES.append(wrap_html("""
<div class="slide">
    <div class="grid-pattern"></div>
    <div class="glow-orb glow-pink" style="width:500px;height:500px;top:-100px;left:-150px;"></div>
    <div class="glow-orb glow-violet" style="width:500px;height:500px;bottom:-100px;right:-150px;"></div>
    
    <div class="line-accent" style="width:3px;height:180px;top:60px;right:80px;"></div>
    <div class="line-accent" style="width:180px;height:3px;bottom:180px;left:60px;"></div>
    
    <div style="display:flex;flex-direction:column;align-items:center;gap:44px;">
        <span class="tag" style="color:#B44AFF;">⚡ LIMITED SPOTS</span>
        <h1 class="headline">Get On The<br>Waitlist <span class="accent-text">Before<br>Spots Fill Up</span></h1>
        <div class="divider"></div>
        <div class="cta-button">SECURE YOUR SPOT →</div>
        <p class="subtext" style="font-size:22px;">🔗 Link in bio</p>
        <p style="font-size:18px;color:rgba(184,181,208,0.6);">100daytransformation.ph/Melanie</p>
    </div>
    
    <span class="brand-mark">@Melanie</span>
    <span class="slide-number">05 / 05</span>
</div>
"""))


# ============================================================
# RENDER ALL SLIDES
# ============================================================

async def render_slides():
    campaigns = [
        ("campaign-1", C1_SLIDES),
        ("campaign-2", C2_SLIDES),
        ("campaign-3", C3_SLIDES),
    ]
    
    async with async_playwright() as p:
        browser = await p.chromium.launch()
        
        for campaign_dir, slides in campaigns:
            for i, html_content in enumerate(slides, 1):
                page = await browser.new_page(viewport={"width": 1080, "height": 1080})
                await page.set_content(html_content, wait_until="networkidle")
                # Wait for fonts to load
                await page.wait_for_timeout(2000)
                
                output_path = os.path.join(OUTPUT_DIR, campaign_dir, f"slide-{i}.png")
                await page.screenshot(path=output_path, type="png")
                await page.close()
                print(f"✅ Generated: {output_path}")
        
        await browser.close()

asyncio.run(render_slides())
print("\n🎉 All 15 slides generated!")
