<?php
/**
 * Plugin Name: Coco Beauty Bar Custom Styles
 * Description: Custom CSS for the luxury feminine aesthetic.
 */

add_action('wp_head', function() {
    ?>
    <style>
        :root {
            --coco-beige: #F5F5DC;
            --coco-pink: #FFD1DC;
            --coco-gold: #D4AF37;
            --coco-white: #FFFFFF;
            --coco-text: #4A4A4A;
        }

        body {
            background-color: var(--coco-beige);
            color: var(--coco-text);
            font-family: 'Montserrat', sans-serif;
        }

        h1, h2, h3, h4 {
            font-family: 'Playfair Display', serif;
            color: var(--coco-text);
        }

        .wp-block-button__link {
            border-radius: 25px !important;
            background-color: var(--coco-pink) !important;
            color: var(--coco-text) !important;
            border: none !important;
            padding: 12px 30px !important;
            font-weight: 600;
            transition: transform 0.3s ease;
        }

        .wp-block-button__link:hover {
            transform: scale(1.05);
            background-color: var(--coco-gold) !important;
            color: white !important;
        }

        .coco-hero {
            position: relative;
            padding: 150px 20px;
            text-align: center;
            overflow: hidden;
            background: var(--coco-beige);
        }

        .coco-hero video {
            position: absolute;
            top: 50%;
            left: 50%;
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            transform: translate(-50%, -50%);
            z-index: 0;
            opacity: 0.4;
            filter: blur(2px);
        }

        .coco-hero-content {
            position: relative;
            z-index: 2;
        }

        .coco-section {
            padding: 80px 20px;
            max-width: 1200px;
            margin: 0 auto;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.8s ease-out;
        }

        .coco-section.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        .coco-card {
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            text-align: center;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .coco-card:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }

        .whatsapp-float {
            position: fixed;
            bottom: 40px;
            right: 40px;
            background-color: #25d366;
            color: white;
            width: 60px;
            height: 60px;
            border-radius: 50px;
            text-align: center;
            font-size: 30px;
            box-shadow: 2px 2px 3px #999;
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
        }

        .booking-bar {
            position: fixed;
            bottom: 0;
            width: 100%;
            background: white;
            padding: 15px;
            text-align: center;
            box-shadow: 0 -5px 15px rgba(0,0,0,0.1);
            z-index: 99;
            display: none;
        }

        @media (max-width: 768px) {
            .booking-bar { display: block; }
        }
    </style>
    <!-- Add Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Montserrat:wght@400;600&display=swap" rel="stylesheet">
    <?php
});

add_action('wp_footer', function() {
    ?>
    <a href="https://wa.me/212000000000?text=Hello%20%F0%9F%92%96%20Welcome%20to%20Coco%20Beauty%20Bar!%20How%20can%20we%20help%20you%20today?" class="whatsapp-float" target="_blank">
        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 16 16">
            <path d="M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z"/>
        </svg>
    </a>
    <div class="booking-bar">
        <a href="/contact" class="wp-block-button__link"><?php echo coco_i18n()->t('book_now'); ?></a>
    </div>
    <script>
        // Intersection Observer for scroll animations
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('is-visible');
                }
            });
        }, { threshold: 0.1 });

        document.querySelectorAll('.coco-section').forEach(section => {
            observer.observe(section);
        });
    </script>
    <?php
});
