{% extends 'base.html' %}

{% block content %}
    <style>
        /* General Styles */
        body {
            margin: 0;
            font-family: 'Helvetica Neue', sans-serif;
            background-color:rgba(207, 207, 207, 0.44);
            color: #333;
        }

        h1, h2 {
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 30px;
        }

        h1 {
            font-size: 36px;
        }

        h2 {
            font-size: 28px;
        }

        /* Edge-like Container Styles */
        .edge-container {
            padding: 50px 20px;
            background-color: #ffffff;
            border: 1px solid #ccc;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            margin: 30px auto;
            width: 80%;
            max-width: 1200px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .edge-container:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
        }

        /* Service Section */
        .service-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
        }

        /* Left-aligned Text */
        .service-text {
            flex: 1;
            font-size: 24px;
            line-height: 1.6;
            color: #555;
            text-align: left;
        }

        .service-text h2 {
            font-size: 50px;
        }

        /* Vertical Line Between Text and Images */
        .service-images {
            display: flex;
            flex-direction: column;
            gap: 15px;
            border-left: 3px solid #ccc;
            padding-left: 20px;
            margin-left: 20px;
        }

        .service-content img {
            width: 100%;
            max-width: 350px;
            height:200px;
            border-radius: 12px;
            object-fit: cover;
        }

        /* Features Section */
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }

        .grid-item {
            background-color: #fff;
            padding: 30px;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            opacity: 0;
            transform: translateY(100px);
            transition: all 0.8s ease-in-out;
        }

        .grid-item.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .grid-item img {
            width: 200px;
            height: 200px;
            margin-bottom: 20px;
            border-radius: 10px;
        }

        .grid-item h3 {
            margin: 10px 0;
            font-size: 22px;
            color: #34495e;
        }

        .grid-item p {
            font-size: 16px;
            color: #7f8c8d;
        }



        /* Responsive Improvements */
        @media (max-width: 768px) {
            .service-content {
                flex-direction: column;
                align-items: center;
            }

            .service-text {
                text-align: center;
            }

            .service-images {
                border-left: none;
                padding-left: 0;
                margin-left: 0;
                display: flex;
                justify-content: center;
                gap: 20px;
            }

            .grid-item {
                padding: 20px;
            }
        }
    </style>

    <!-- Service Section -->
    <section class="edge-container" id="service-1">
        <div class="service-content">
            <div class="service-text">
                <h2>Our Services</h2>
                <p>We offer tech support, easy-to-use mobile apps, and dedicated services to help elderly individuals live independently with confidence.</p>
                <p>Our team ensures continuous support for various medical, emergency, and lifestyle needs tailored to the elderly community.</p>
            </div>
            <div class="service-images">
                <img src="https://images.pexels.com/photos/3768131/pexels-photo-3768131.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Service Image 1">
                <img src="https://images.pexels.com/photos/33786/hands-walking-stick-elderly-old-person.jpg?auto=compress&cs=tinysrgb&w=600" alt="Service Image 2">
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="edge-container" id="services-grid">
        <h2>Features of Our Web App</h2>
        <div class="features-grid">
            <div class="grid-item">
                <img src="https://images.pexels.com/photos/3768140/pexels-photo-3768140.jpeg" alt="Feature 1">
                <h3>Easy Communication</h3>
                <p>Connect with family, friends, and healthcare providers instantly through easy-to-use messaging and calling features.</p>
            </div>
            <div class="grid-item">
                <img src="https://images.pexels.com/photos/7551646/pexels-photo-7551646.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Feature 2">
                <h3>Health Monitoring</h3>
                <p>Track your health and medical information with our built-in tools, including medication reminders and emergency alerts.</p>
            </div>
            <div class="grid-item">
                <img src="https://images.pexels.com/photos/6646919/pexels-photo-6646919.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Feature 3">
                <h3>Emergency Support</h3>
                <p>Quickly access emergency services and loved ones with one-touch buttons in case of an urgent situation.</p>
            </div>
            <div class="grid-item">
                <img src="https://images.pexels.com/photos/7551646/pexels-photo-7551646.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Feature 4">
                <h3>Friendly Interface</h3>
                <p>Our app is designed with large, easy-to-read buttons, icons, and clear text for a user-friendly experience.</p>
            </div>
        </div>
    </section>


    <script>
        // Function to check if element is in viewport
        function isInViewport(element) {
            const rect = element.getBoundingClientRect();
            return (
                rect.top >= 0 &&
                rect.left >= 0 &&
                rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
                rect.right <= (window.innerWidth || document.documentElement.clientWidth)
            );
        }

        // Function to add "visible" class to sections
        function handleScroll() {
            const sections = document.querySelectorAll('.section, .grid-item');
            sections.forEach(section => {
                if (isInViewport(section)) {
                    section.classList.add('visible');
                }
            });
        }

        // Listen for scroll event
        window.addEventListener('scroll', handleScroll);

        // Trigger scroll event on load to show elements already in view
        window.addEventListener('load', handleScroll);
    </script>
{% endblock %}
