{% extends "website/base.html" %}
{% load static wagtailimages_tags wagtailcore_tags %}
{% block content %}

<div class="breadcumb-wrapper" data-bg-src="{% static 'img/breadcumb/breadcumb-bg.jpg' %}"><div class="container"><div class="breadcumb-content"><h1 class="breadcumb-title">About Us</h1><div class="breadcumb-menu-wrapper"><ul class="breadcumb-menu"><li><a href="/">Home</a></li><li>About Us</li></ul></div></div></div></div>

<div class="about-sec space" id="about-sec" data-pos-for=".feature-sec" data-sec-pos="bottom-half"><div class="container"><div class="row align-items-center">

<div class="col-xl-6">
<div class="title-area mb-25"><span class="sub-title"><img src="{% static 'img/shape/title_left.svg' %}" alt="shape">About Us</span><h2 class="sec-title">{{ page.section_title }}</h2></div>
<div class="img-box3 pe-xl-5"><div class="img1">
{% if page.intro_image %}{% image page.intro_image width-600 as ai %}<img src="{{ ai.url }}" alt="About Frimps Logistics">{% else %}<img src="{% static 'img/normal/about_3.jpg' %}" alt="About">{% endif %}
</div></div>
</div>

<div class="col-xl-6">
<div class="mt-35 mb-30">{{ page.intro_body|richtext }}</div>
<div class="profile-wrap">
<div class="about-profile style2">
<div class="avater">
{% if page.ceo_photo %}{% image page.ceo_photo fill-80x80 as cp %}<img src="{{ cp.url }}" alt="{{ page.ceo_name }}">{% else %}<img src="{% static 'img/normal/about_avater.jpg' %}" alt="{{ page.ceo_name }}">{% endif %}
</div>
<div class="media-body"><h6 class="title">{{ page.ceo_name }}</h6><span class="desig">{{ page.ceo_role }}</span></div>
</div>
<div class="signature"><img src="{% static 'img/shape/signature.png' %}" alt="signature"></div>
</div>
<div class="about-counter-wrap">
<div class="about-counter"><div class="border-line" data-bg-src="{% static 'img/shape/line-2.svg' %}"></div><div class="achive-about_icon"><img src="{% static 'img/icon/shipping.svg' %}" alt="icon"></div><div class="about-counter-content"><h2 class="counter-card_number"><span class="counter-number">{{ page.counter1_num }}</span></h2><p class="counter-card_text">{{ page.counter1_label }}</p></div></div>
<div class="about-counter"><div class="achive-about_icon"><img src="{% static 'img/icon/location.svg' %}" alt="icon"></div><div class="about-counter-content"><h2 class="counter-card_number"><span class="counter-number">{{ page.counter2_num }}</span></h2><p class="counter-card_text">{{ page.counter2_label }}</p></div></div>
</div>
<div class="checklist"><ul><li><strong>{{ page.checklist_title }}</strong></li><li>{{ page.checklist_body }}</li></ul></div>
</div>

</div></div></div>

<section class="feature-sec bg-smoke"><div class="container"><div class="col-lg-8 offset-lg-2"><div class="title-area text-center"><span class="sub-title"><img src="{% static 'img/shape/title_left.svg' %}" alt="shape">Our Core Services</span><h2 class="sec-title">What We Offer</h2></div></div><div class="feature-grid-wrap"><div class="feature-grid"><div class="feature-grid_icon"><img src="{% static 'img/icon/feature_2_1.svg' %}" alt="icon"></div><div><h3 class="feature-grid_title">Air &amp; Ocean Freight</h3><p class="feature-grid_text">We handle FCL and LCL ocean shipments and time-critical air cargo through our global carrier network.</p></div></div><div class="feature-grid"><div class="feature-grid_icon"><img src="{% static 'img/icon/feature_2_2.svg' %}" alt="icon"></div><div><h3 class="feature-grid_title">Customs Clearance</h3><p class="feature-grid_text">Our GRA-licensed brokers ensure fast, accurate clearance at Port of Tema and Kotoka Airport with zero compliance issues.</p></div></div><div class="feature-grid"><div class="feature-grid_icon"><img src="{% static 'img/icon/feature_2_3.svg' %}" alt="icon"></div><div><h3 class="feature-grid_title">Warehousing &amp; Distribution</h3><p class="feature-grid_text">Secure, modern warehouse facilities near major commercial zones with full inventory management and distribution.</p></div></div><div class="feature-grid"><div class="feature-grid_icon"><img src="{% static 'img/icon/feature_2_4.svg' %}" alt="icon"></div><div><h3 class="feature-grid_title">Last-Mile Delivery</h3><p class="feature-grid_text">Same-day and next-day courier services across Accra and Ghana with real-time tracking and proof of delivery.</p></div></div></div></div></section>

<div class="about-img-banner">
{% if page.banner_image %}{% image page.banner_image width-1920 as bi %}<img src="{{ bi.url }}" alt="Frimps Logistics" style="width:100%;max-height:480px;object-fit:cover;display:block;">{% else %}<img src="{% static 'img/bg/video_bg_3.jpg' %}" alt="Frimps Logistics" style="width:100%;max-height:480px;object-fit:cover;display:block;">{% endif %}
</div>

<div class="choose-sec-2"><div class="container"><div class="row gy-4">
<div class="col-xl-5"><div class="service-form-wrap"><form action="/contact/submit/" method="post">{% csrf_token %}<input type="hidden" name="source" value="about"><h3 class="fs-24 mb-30 mt-n1 text-white">Contact Us</h3>{% if request.GET.sent %}<div style="background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:6px;padding:10px;margin-bottom:14px;">✓ Message sent!</div>{% endif %}<div class="row">
<div class="form-group col-12"><input type="text" class="form-control" name="name" placeholder="Your Full Name"> <i class="fal fa-user"></i></div>
<div class="form-group col-12"><input type="email" class="form-control" name="email" placeholder="Email Address"> <i class="fal fa-envelope"></i></div>
<div class="form-group col-12"><input type="text" class="form-control" name="subject" placeholder="Subject"> <i class="fal fa-tag"></i></div>
<div class="form-group col-12"><input type="tel" class="form-control" name="phone" placeholder="Contact Number"> <i class="fal fa-phone"></i></div>
<div class="form-group col-12"><textarea class="form-control" name="message" placeholder="Your Message" rows="4"></textarea></div>
<div class="btn-group justify-content-center col-12 mt-2"><button type="submit" class="themeholy-btn blue-btn btn-fw justify-content-center">Send Message<span class="icon"><i class="fa-sharp fa-regular fa-paper-plane"></i></span></button></div>
</div></form></div></div>

<div class="col-xl-7"><div class="overflow-hidden faq-sec bg-smoke"><div class="container"><div class="row"><div class="col-12"><div class="accordion-area accordion" id="faqAccordion">

<div class="accordion-card active"><div class="accordion-header" id="collapse-item-1"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-1" aria-expanded="true" aria-controls="collapse-1"><span class="text-theme"></span> {{ page.faq1_q }}</button></div><div id="collapse-1" class="accordion-collapse collapse show" aria-labelledby="collapse-item-1" data-bs-parent="#faqAccordion"><div class="accordion-body"><p class="faq-text">{{ page.faq1_a }}</p></div></div></div>

<div class="accordion-card"><div class="accordion-header" id="collapse-item-2"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-2" aria-expanded="false" aria-controls="collapse-2"><span class="text-theme"></span> {{ page.faq2_q }}</button></div><div id="collapse-2" class="accordion-collapse collapse" aria-labelledby="collapse-item-2" data-bs-parent="#faqAccordion"><div class="accordion-body"><p class="faq-text">{{ page.faq2_a }}</p></div></div></div>

<div class="accordion-card"><div class="accordion-header" id="collapse-item-3"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-3" aria-expanded="false" aria-controls="collapse-3"><span class="text-theme"></span> {{ page.faq3_q }}</button></div><div id="collapse-3" class="accordion-collapse collapse" aria-labelledby="collapse-item-3" data-bs-parent="#faqAccordion"><div class="accordion-body"><p class="faq-text">{{ page.faq3_a }}</p></div></div></div>

<div class="accordion-card"><div class="accordion-header" id="collapse-item-4"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-4" aria-expanded="false" aria-controls="collapse-4"><span class="text-theme"></span> {{ page.faq4_q }}</button></div><div id="collapse-4" class="accordion-collapse collapse" aria-labelledby="collapse-item-4" data-bs-parent="#faqAccordion"><div class="accordion-body"><p class="faq-text">{{ page.faq4_a }}</p></div></div></div>

</div></div></div></div></div></div>
</div></div></div>

{% if page.team_members.count %}
<section class="overflow-hidden space"><div class="container">
<div class="title-area text-center"><span class="sub-title"><img src="{% static 'img/shape/title_left.svg' %}" alt="shape">Experience Team</span><h2 class="sec-title">Meet Our Amazing Team</h2></div>
<div class="row slider-shadow themeholy-carousel" data-slide-show="4" data-lg-slide-show="3" data-md-slide-show="2" data-sm-slide-show="2" data-xs-slide-show="1" data-arrows="true">
{% for member in page.team_members.all %}
<div class="col-sm-6 col-lg-4 col-xxl-3"><div class="themeholy-team team-card">
<div class="team-img">
{% if member.photo %}{% image member.photo fill-350x400 as mp %}<img src="{{ mp.url }}" alt="{{ member.name }}">{% else %}<img src="{% static 'img/team/team_1_1.jpg' %}" alt="{{ member.name }}">{% endif %}
</div>
<div class="team-card-content" data-bg-src="{% static 'img/team/team_card_shape.png' %}">
<div class="team-social"><div class="icon-btn"><i class="fa-light fa-plus"></i></div>
<div class="themeholy-social">
{% if member.instagram %}<a target="_blank" href="{{ member.instagram }}"><i class="fab fa-instagram"></i></a>{% endif %}
{% if member.twitter %}<a target="_blank" href="{{ member.twitter }}"><i class="fab fa-twitter"></i></a>{% endif %}
{% if member.linkedin %}<a target="_blank" href="{{ member.linkedin }}"><i class="fab fa-linkedin-in"></i></a>{% endif %}
{% if member.facebook %}<a target="_blank" href="{{ member.facebook }}"><i class="fab fa-facebook-f"></i></a>{% endif %}
</div></div>
<div class="team-content"><h3 class="team-title box-title">{{ member.name }}</h3><span class="team-desig">{{ member.role }}</span></div>
</div></div></div>
{% endfor %}
</div>
</div></section>
{% endif %}

{% endblock %}