{% extends 'base.html' %}
{% load static %}
<title>{% block title %} {{ title }} {% endblock title %}</title>

{% block content %}
    <!-- Slider Area -->
    <section class="welcome-slider-area owl-carousel rapti-carousel-nav">
        {% for hero_section in hero_sections %}
        <div class="main-banner" data-overlay="4" style="background-image:url({% if hero_section.background_image %}{{ hero_section.background_image.url }}{% else %}{% static 'assets/img/slider/slider-1.jpg' %}{% endif %})">
            <div class="container d-flex align-items-center h-100">
                <div class="main-banner-content">
                    <h1 class="slider-title-one font-weight-500 white text-uppercase">{{ hero_section.title }}</h1>
                    <h2 class="slider-title-two white">{{ hero_section.subtitle }}</h2>
                    <p class="slider-title-p white mb-25">{{ hero_section.description }}</p>
                    <a class="btn btn-color hero-btn" href="{{ hero_section.button_link }}">{{ hero_section.button_text }} <i class="flaticon-right-arrow"></i></a>
                </div>
            </div>
        </div>
        {% endfor %}
    </section>
    <!-- /End Slider Area -->

    <!-- Homepage bottom section -->
    <section class="hero-bottom gray-bg ">
        <div class="container mt-5">
            <div class="row justify-content-center d-flex align-items-stretch">
                {% for section in homepage_bottom_sections %}
                <div class="col-md-6 col-lg-4 d-flex align-items-stretch">
                    <div class="service-single text-center h-100 w-100">
                        <i class="{{ section.icon }} icon theme-color "></i>
                        <h5 class="mt-25">{{ section.title }}</h5>
                        <p class="mt-20 mb-20">{{ section.description }}</p>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </section>
    <!-- /End Service Section -->

    <!-- About Section -->
    <section class="about-section section-padding gray-bg">
        <div class="container">
            <div class="row flex-column-reverse flex-lg-row-reverse">
                <div class="offset-lg-1 col-lg-5">
                    <div class="about-left about-text">
                        <h2 class="title mt-30 mt-lg-0">{{ about.title }}{% if about.subtitle %}<br>{{ about.subtitle }}{% endif %}</h2>
                        {% if about.description %}
                        <p>{{ about.description|linebreaksbr|truncatewords:52}}</p>
                        {% endif %}
                        {% if about.mission %}
                        <div class="about-text-box position-relative">
                            <h5 class="mb-20">Our Mission</h5>
                            <p>{{ about.mission|linebreaksbr }}</p>
                        </div>
                        {% endif %}
                        {% if about.vision %}
                        <div class="about-text-box position-relative border-0 pt-0">
                            <h5 class="mb-20 bd-top pt-30">Our Vision</h5>
                            <p>{{ about.vision|linebreaksbr }}</p>
                        </div>
                        {% endif %}
                        <a href="{% url 'about_link' %}" class="btn btn-color boxed-btn mt-30">Learn More <i class="flaticon-right-arrow"></i></a>
                    </div>
                </div>
                <div class="col-lg-6 position-relative">
                    <div class="about-right about-bg d-flex align-items-end justify-content-center p-0 h-100" style="min-height: 100%;">
                        {% if about.image %}
                        <div class="about-img-bg-stretch" style="background-image: url('{{ about.image.url }}');"></div>
                        {% endif %}
                        {% if about.video_url %}
                        <a class="mfp-iframe video-play-btn position-absolute" style="z-index:2;bottom:30px;left:50%;transform:translateX(-50%);" href="{{ about.video_url }}"><i class="flaticon-play-button"></i></a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- /End About Section -->

    <!-- Counter -->
    <section class="counter-section gray-bg section-padding pt-0" style="background-color: #000757;">
        <div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <div class="counter-box white-bg bd">
                        <h4 class="theme-color"><span class="counter">10</span>+</h4>
                        <p>10+ Years Fields Experiences</p>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="counter-box white-bg bd">
                        <h4 class="theme-color"><span class="counter">2</span>K+</h4>
                        <p>2K+ Our Happy Customers</p>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="counter-box white-bg bd">
                        <h4 class="theme-color"><span class="counter">5</span>K+</h4>
                        <p>5K+ Our Happy Customers</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- /End Counter -->

    <!-- Service Section -->
    <section class="service-section section-padding">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-6">
                    <div class="section-title text-center">
                        <h2 class="title">Our Services</h2>
                        <p>Our services are organized into three integrated pillars. Each can stand independently, yet they are designed to reinforce one another. <span class="theme-color">View all Services</span></p>
                    </div>
                </div>
            </div>
            <div class="row justify-content-center align-items-stretch">
                {% for service in services %}
                <div class="col-md-6 col-lg-4 d-flex align-items-stretch">
                    <div class="service-single w-100 d-flex flex-column">
                        <i class="{{ service.icon }} icon theme-color mb-3"></i>
                        {% if service.category %}
                        <h6 class="text-uppercase theme-color mt-55 mb-30">{{ service.category }}</h6>
                        {% endif %}
                        <h5>{{ service.title }}</h5>
                        <p class="mt-20 mb-25 flex-grow-1">{{ service.short_description|default:service.full_description|truncatewords:25 }}</p>
                        <a href="{% url 'service_details_link' service.slug %}" class="btn btn-readmore mt-auto">Read More <i class="flaticon-right-arrow"></i></a>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </section>
    <!-- /End Service Section -->

    <!-- Why Choice Us -->
    <section class="why-choice-us gray-bg">
        <div class="section section-one position-relative">
            {% if why_choice_us and why_choice_us.image %}
            <div class="img-container" style="background: url('{{ why_choice_us.image.url }}') no-repeat center/cover;"></div>
            {% endif %}
            <div class="container">
                <div class="row pt-115 pb-125">
                    <div class="col-md-6">
                        <h2 class="title mb-45">{{ why_choice_us.title }}{% if why_choice_us.subtitle %}<br class="d-none d-lg-block">{{ why_choice_us.subtitle }}{% endif %}</h2>
                        {% if why_choice_us.highlight %}
                        <h5 class="theme-color mb-20">{{ why_choice_us.highlight }}</h5>
                        {% endif %}
                        {% if why_choice_us.description %}
                        <div class="mb-3" style="white-space:pre-line; text-align:justify;">
                            {{ why_choice_us.description|linebreaksbr }}
                        </div>
                        {% endif %}
                        {% if why_choice_us.extra_info %}
                        <p>{{ why_choice_us.extra_info|linebreaksbr }}</p>
                        {% endif %}
                        {% if why_choice_us.button_text and why_choice_us.button_link %}
                        <a href="{{ why_choice_us.button_link }}" class="btn btn-color boxed-btn mt-25">{{ why_choice_us.button_text }} <i class="fa fa-chevron-right"></i></a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- /End Why Choice Us -->

    <!-- Our Testimonial -->
    <section class="testimonial section-padding">
        <style>
            .glass-card {
                background: rgba(255, 255, 255, 0.15);
                border-radius: 16px;
                box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
                backdrop-filter: blur(8px);
                -webkit-backdrop-filter: blur(8px);
                border: 1px solid rgba(255, 255, 255, 0.3);
                color: #fff;
            }
        </style>
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="section-title">
                        <h2 class="title white">Our Testimonials</h2>
                        <p class="white">What our clients say about us</p>
                    </div>
                </div>
            </div>
            <div class="testimonial-slider owl-carousel customized-slider-dots">
                <div class="row single-testimonials-slider d-flex align-items-stretch">
                    
                    {% for testimonial in testimonials %}             
                        
                    <div class="col-lg-6 d-flex align-items-stretch">
                        <div class="card testimonials mb-30 mb-lg-0 glass-card h-100">
                            <div class="card-body">
                                <div class="testimonials-img mb-3">
                                                        <img src="{{ testimonial.photo.url }}" alt="images here" class="img-fluid rounded-circle" style="width:80px;height:80px;">
                                </div>
                                                    <p class="card-text">{{ testimonial.message }}</p>
                                <h5 class="theme-color mb-1">{{ testimonial.name }}</h5>
                                <p class="mb-0">{{ testimonial.position }}<br>{{ testimonial.company }}</p>
                            </div>
                        </div>
                    </div>
                {% endfor %}
                </div>
              
            </div>
        </div>
    </section>

    <!-- Portfolio -->
  
    <!-- /End Portfolio -->

    <!-- Blog Section -->
    <section class="blog section-padding gray-bg">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-6">
                    <div class="section-title text-center">
                        <h2 class="title">Latest News</h2>
                        <p>Stay updated with our latest blog posts and insights.</p>
                    </div>
                </div>
            </div>
            <div class="row justify-content-center">
                {% for blog in blogs %}
                <div class="col-md-6 col-lg-4">
                    <div class="single-blog {% if not forloop.first %}mt-30{% endif %}">
                        <div class="blog-thum">
                            {% if blog.image %}
                                <img src="{{ blog.image.url }}" alt="{{ blog.title }}" class="img-fluid">
                            {% else %}
                                <img src="{% static 'assets/img/blog/blog1.jpg' %}" alt="Blog" class="img-fluid">
                            {% endif %}
                        </div>
                        <div class="blog-cont">
                            <ul class="d-flex justify-content-between">
                                <li><a href="#">Post: {{ blog.author }}</a></li>
                                <li><a href="#">Date : {{ blog.created_at|date:'d M Y' }}</a></li>
                            </ul>
                            <h5 class="mt-25 mb-25 text-uppercase">
                                <a href="{% url 'blog_detail_link' blog.slug %}">{{ blog.title }}</a>
                            </h5>
                            <p>{{ blog.content|truncatewords:20 }}</p>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </section>
    <!-- /End Blog Section -->
<style>
    .single-blog {
        display: flex;
        flex-direction: column;
        height: 100%;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        overflow: hidden;
        margin-bottom: 30px;
        justify-content: stretch;
    }
    .single-blog .blog-thum img {
        width: 100%;
        height: 220px;
        object-fit: cover;
        object-position: center;
        display: block;
    }
    .single-blog .blog-cont {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 30px 18px 30px 18px;
        height: 100%;
    }
    .single-blog h5 {
        min-height: 60px;
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 15px;
    }
    .single-blog p {
        flex: 1 1 auto;
        margin-bottom: 10px;
    }
    .single-blog .blog-cont ul {
        margin-bottom: 15px;
    }
    @media (max-width: 991px) {
        .single-blog .blog-thum img {
            height: 180px;
        }
        .single-blog .blog-cont {
            padding: 20px 10px 20px 10px;
        }
    }
</style>

    <!-- homepage Form -->
    <section class="form-section gray-bg">
        <div class="form-container section-padding white-bg">
            <div class="container">
                <div class="row">
                    <div class="col-md-7">
                        <div class="section-title">
                            <h2 class="title">Get In Touch</h2>
                            <p>Ready to turn research and data into strategic advantage?
                               Speak with our team to discuss your objectives, timelines, and engagement model.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="rapti-form">
                            <form method="post" class="contact-form">
                                {% csrf_token %}
                                <div class="form-row">
                                    <div class="form-group col-md-6 col-lg-3 mb-30 position-relative">
                                        <label class="sr-only" for="raptiFormName">Name</label>
                                        <input type="text" class="form-control gray-bg" id="raptiFormName" name="name" placeholder="Name">
                                        <p class="position-absolute text-danger"></p>
                                    </div>
                                    <div class="form-group col-md-6 col-lg-3 mb-30">
                                        <label class="sr-only" for="raptiFormEmail">Email</label>
                                        <input type="email" class="form-control gray-bg" id="raptiFormEmail" name="email" placeholder="Email">
                                        <p class="position-absolute text-danger"></p>
                                    </div>
                                    <div class="form-group col-md-6 col-lg-3 mb-30">
                                        <label class="sr-only" for="raptiFormPhone">Phone</label>
                                        <input type="number" class="form-control gray-bg" id="raptiFormPhone" name="phone" placeholder="Phone">
                                    </div>
                                    <div class="form-group col-md-6 col-lg-3 mb-30">
                                        <label class="sr-only" for="raptiFormSubject">Subject</label>
                                        <input type="text" class="form-control gray-bg" id="raptiFormSubject" name="subject" placeholder="Subject">
                                    </div>
                                </div>
                                <div class="form-group mb-30">
                                    <label class="sr-only" for="raptiFormMessage">Message*</label>
                                    <textarea name="message" class="form-control textarea gray-bg" name="message" id="raptiFormMessage" cols="30" rows="5" required="" data-error="Write your message" spellcheck="false" placeholder="Message"></textarea>
                                </div>
                                <div class="form-group text-center text-md-right">
                                    <button name="submit" type="submit" class="btn btn-primary">Message <i class="flaticon-right-arrow"></i></button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- /End homepage Form -->

 {% endblock content %}

<style>
    .glass-card {
        background: rgba(255, 255, 255, 0.15);
        border-radius: 16px;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        color: #fff;
    }
</style>