{% extends 'santa_app/base.html' %}
{% block content %}

<style>
/* === EXISTING STYLES === */
body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    background: #fffaf8;
    color: #333;
}

/* 🔗 Top Navigation inside hero */
.top-links a {
    text-decoration: none;
    color: black;
    font-weight: 600;
    font-size: 16px;
    transition: color 0.3s ease;
}

.top-links a:hover {
    color: #c31432;
}

/* 🎅 HERO SECTION */
.hero {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    height: 850px;
    padding: 0 150px;
    background: url("/static/bg11.jpg") no-repeat center center;
    background-size: 100% 100%;
    text-align: right;
}

.hero-content {
    max-width: 700px;
    text-align: center;
    margin: 0 auto;
    color: #fff;
    position: relative;
    top: -50px;
}

/* 🎅 Bold Main Title with red outline */
.hero-content h1 {
    margin-top: -50px;
    font-size: clamp(40px, 6vw, 70px);
    font-weight: 1000;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #fff;
    -webkit-text-stroke: 2px #ff1e1e;
    text-shadow:
        0 0 20px rgba(255, 0, 0, 0.7),
        0 0 30px rgba(0, 0, 0, 0.8),
        3px 3px 10px rgba(0, 0, 0, 0.7);
}


.hero-content p {
    margin-top: -40px;
    font-size: clamp(16px, 3vw, 32px);
    font-weight: 700;
    color: #ffffffff;
    -webkit-text-stroke: 1px #000000ff;
    text-shadow:
        3px 3px 10px rgba(0, 0, 0, 0.8),
        0 0 15px rgba(0, 0, 0, 0.5),
        
    line-height: 1.6;
}


.hero-content .btn-start {
    margin-bottom: -250px ;
    position: absolute;
    bottom: 60px;
    right: -300px;
    background: black;
    color: white;
    border: none;
    padding: 14px 40px;
    border-radius: 40px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.25);
}

.hero-content .btn-start:hover {
    background: #c31432;
    transform: scale(1.05);
    box-shadow: 0 6px 14px rgba(0,0,0,0.35);
}

/* 🎄 ZIG-ZAG SECTIONS */
.section {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 50px;
    max-width: 1100px;
    margin: 80px auto;
    padding: 0 20px;
}

.section img {
    width: 380px;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.section-content {
    flex: 1;
    min-width: 280px;
}

.section-content h2 {
    font-size: 60px;
    color: #c31432;
    margin-bottom: 15px;
}

.section-content h3 {
    line-height: 1.8;
    font-size: 25px;
    margin-bottom: 20px;
}


/* 🎅 Section Button (Start Your Group) */
.section .btn-start {
    background: black;
    color: white;
    border: none;
    padding: 14px 40px;
    border-radius: 8px; /* square edges */
    font-size: 18px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.25);
}

.section .btn-start:hover {
    background: #c31432; /* red on hover */
    transform: scale(1.05);
    box-shadow: 0 6px 14px rgba(0,0,0,0.35);
}




/* 🎁 CARD SECTION */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    max-width: 1100px;
    margin: 80px auto;
    padding: 0 20px;
}

.card {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    padding: 25px 20px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

.card h3 {
    color: #45b29d;
    margin-bottom: 12px;
    font-size: 22px;
}

.card p {
    font-size: 15px;
    color: #555;
}

/* 📱 RESPONSIVE FIXES */

/* Medium devices */
@media (max-width: 1200px) {
    .hero-content h1 { font-size: 60px; }
    .hero-content p { font-size: 28px; }
}

/* Tablets */
@media (max-width: 992px) {
    .hero {
        flex-direction: column;
        height: auto;
        padding: 80px 20px;
        text-align: center;
    }
    .top-links {
        position: relative;
        right: auto;
        top: auto;
        justify-content: center;
        margin-bottom: 20px;
    }
    .hero-content {
        max-width: 100%;
        text-align: center;
        margin-right: 0;
        margin-top: 0;
    }
    .hero-content .btn-start {
        position: relative;
        bottom: auto;
        right: auto;
        margin-top: 20px;
    }
    .section { flex-direction: column; text-align: center; }
    .section img { order: -1; width: 100%; max-width: 380px; }
}

/* Small tablets / large phones */
@media (max-width: 768px) {
    .hero-content h1 { font-size: 45px; }
    .hero-content p { font-size: 22px; }
    .hero-content .btn-start { padding: 12px 32px; font-size: 16px; }
}

/* Mobile devices */
@media (max-width: 480px) {
    .hero-content h1 { font-size: 32px; -webkit-text-stroke: 1.5px #ff1e1e; }
    .hero-content p { font-size: 16px; -webkit-text-stroke: 1px #000; }
    .hero-content .btn-start { padding: 8px 20px; font-size: 14px; }
    .section-content h2 { font-size: 26px; }
    .section-content p { font-size: 14px; }
}
</style>

<!-- 🔗 HERO + TOP LINKS --> 
<div class="hero">
    <div class="top-links">
        <!--<a href="{% url 'superadmin_login' %}">Super Admin Login</a>
        <a href="{% url 'org_admin_login' %}">Org Admin Login</a>-->
    </div>

    <div class="hero-content">
        <h1> Welcome to Secret Santa</h1>
        <p>Organize your Secret Santa gift exchange online with joy and ease</p>
        <a href="{% url 'register_organization' %}">
            <button class="btn-start">🎁 Get Started</button>
        </a>
    </div>
</div>

<!-- 🎄 ZIG-ZAG SECTION 1 -->
<div class="section">
    <div class="section-content">
        <h2>What is Secret Santa?</h2>
        <h3>
            It’s an <strong>online Pionium Secret Santa gift exchange</strong> for offices, friends, and families.
            Easily create your group, invite participants, and randomly assign gift pairs automatically.
        </h3>
        <h3>
            Every Christmas, people around the world exchange gifts — now your team can do it too!
            Bring the fun, excitement, and festive spirit to your organization.
        </h3>
    </div>
    <img src="static/gift exchange.jpg" alt="Gift exchange illustration">
</div>

<!-- 🎄 ZIG-ZAG SECTION 2 -->
<div class="section" style="flex-direction: row-reverse;">
    <div class="section-content">
        <h2>How does it work?</h2>
        <h3>Create your group, add participants and fun hobbies or rules, then send invites and start gifting!</h3>
        <div>
            <form action="{% url 'register_organization' %}" method="get">
                <button type="submit" class="btn-start">Start Your Group</button>
            </form>
        </div>
    </div>
    <img src="static/santa gif.gif" alt="Santa with gifts">
</div>

<!-- 🎁 CARD SECTION -->
<div class="cards">
    <div class="card">
        <h3>🎄 Step 1</h3>
        <h4>List your participants and create your group.</h4>
    </div>
    <div class="card">
        <h3>🎁 Step 2</h3>
        <h4>Add hobbies or special gifting rules for fun.</h4>
    </div>
    <div class="card">
        <h3>🎅 Step 3</h3>
        <h4>Send invites and enjoy the surprise gift exchange!</h4>
    </div>
</div>
<!-- 🎅 Fun-tastic Secret Santa Section -->
<div class="fun-section" style="
    background: linear-gradient(90deg, #b31217, #e52d27, #ff9800);
    color: white;
    text-align: center;
    padding: 70px 20px;
    margin-top: 100px;
    border-radius: 25px 25px 0 0;
    box-shadow: 0 -5px 25px rgba(0,0,0,0.2);
    font-family: 'Poppins', sans-serif;
">
    <h2 style="
        font-size: 42px;
        font-weight: 800;
        margin-bottom: 15px;
        letter-spacing: 1px;
        text-shadow: 0 2px 8px rgba(0,0,0,0.3);
    ">
        🎄 Join the Fun-tastic Secret Santa!
    </h2>

    <p style="
        font-size: 18px;
        font-weight: 400;
        margin-bottom: 30px;
        line-height: 1.7;
        color: #fffaf5;
        text-shadow: 0 1px 4px rgba(0,0,0,0.2);
    ">
        Make this Christmas magical! Bring joy, laughter, and surprises<br>
        to your friends, family, or team with our Secret Santa celebration.
    </p>

    <a href="{% url 'contact' %}" style="
        display: inline-block;
        background: white;
        color: #d4145a;
        font-weight: 700;
        font-size: 17px;
        padding: 12px 35px;
        border-radius: 50px;
        text-decoration: none;
        transition: all 0.3s ease;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    " 
    onmouseover="this.style.background='#d4145a';this.style.color='white';this.style.transform='scale(1.05)';"
    onmouseout="this.style.background='white';this.style.color='#d4145a';this.style.transform='scale(1)';">
        🎁 Contact Us
    </a>
</div>




{% endblock %}