@extends('frontend.layouts.app')

@section('title', 'About Us')

@section('content')

{{-- ================= PAGE HEADER ================= --}}
<section class="py-5 bg-dark text-white">
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <h1 class="fw-bold">About HASA Constructions Limited</h1>
                <p class="lead mb-0">
                    Building reliable infrastructure through quality, safety, and innovation.
                </p>
            </div>
        </div>
    </div>
</section>

{{-- ================= ABOUT COMPANY ================= --}}
<section class="py-5">
    <div class="container">
        <div class="row align-items-center g-5">

            <div class="col-md-6">
                <h6 class="text-warning fw-bold mb-2">Who We Are</h6>
                <h2 class="fw-bold mb-3">Trusted Construction & Engineering Experts</h2>

                <p class="text-muted">
                    HASA Constructions Limited is a Tanzanian-owned construction and engineering
                    company incorporated under the Companies Act No. 12 of 2002.
                    We specialize in delivering high-quality civil, electrical, and infrastructure
                    projects across Tanzania.
                </p>

                <p class="text-muted">
                    Our expertise covers design, planning, execution, and maintenance of
                    construction works including roads, bridges, buildings, electrical systems,
                    and public infrastructure. We are driven by professionalism, integrity,
                    and a strong commitment to client satisfaction.
                </p>
            </div>

            <div class="col-md-6">
                <img src="{{ asset('images/hasalogo.jpg') }}"
                     class="img-fluid rounded shadow"
                     alt="HASA Constructions">
            </div>

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

{{-- ================= MISSION & VISION ================= --}}
<section class="py-5 bg-light">
    <div class="container">
        <div class="row g-4">

            <div class="col-md-6">
                <div class="card h-100 shadow-sm border-0">
                    <div class="card-body">
                        <h4 class="fw-bold text-success">Our Mission</h4>
                        <p class="text-muted mb-0">
                            To deliver high-quality, safe, and sustainable construction
                            and engineering solutions that meet international standards,
                            exceed client expectations, and contribute to national
                            development.
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="card h-100 shadow-sm border-0">
                    <div class="card-body">
                        <h4 class="fw-bold text-success">Our Vision</h4>
                        <p class="text-muted mb-0">
                            To become a leading construction and infrastructure development
                            company in Tanzania and beyond, recognized for excellence,
                            innovation, and ethical business practices.
                        </p>
                    </div>
                </div>
            </div>

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

{{-- ================= CORE VALUES ================= --}}
<section class="py-5">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="fw-bold">Our Core Values</h2>
            <p class="text-muted">The principles that guide everything we do</p>
        </div>

        <div class="row g-4">
            <div class="col-md-3">
                <div class="card h-100 text-center shadow-sm">
                    <div class="card-body">
                        <h5 class="fw-bold">Quality</h5>
                        <p class="text-muted small">
                            We deliver durable, reliable, and high-standard construction solutions.
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="card h-100 text-center shadow-sm">
                    <div class="card-body">
                        <h5 class="fw-bold">Safety</h5>
                        <p class="text-muted small">
                            Safety is our top priority on every site and for every stakeholder.
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="card h-100 text-center shadow-sm">
                    <div class="card-body">
                        <h5 class="fw-bold">Integrity</h5>
                        <p class="text-muted small">
                            We operate transparently, ethically, and in full legal compliance.
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="card h-100 text-center shadow-sm">
                    <div class="card-body">
                        <h5 class="fw-bold">Innovation</h5>
                        <p class="text-muted small">
                            We embrace modern technology and sustainable construction methods.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- ================= WHY CHOOSE US ================= --}}
<section class="py-5 bg-dark text-white">
    <div class="container">
        <div class="row align-items-center g-4">

            <div class="col-md-6">
                <h2 class="fw-bold mb-4">Why Choose HASA Constructions?</h2>

                <ul class="list-unstyled">
                    <li class="mb-3">✔ Experienced engineers and technicians</li>
                    <li class="mb-3">✔ Strong safety and quality control systems</li>
                    <li class="mb-3">✔ Timely project delivery within budget</li>
                    <li class="mb-3">✔ Commitment to sustainability and innovation</li>
                    <li class="mb-3">✔ Trusted by clients and partners</li>
                </ul>
            </div>

            <div class="col-md-6 text-center">
                <a href="{{ route('frontend.contact') }}" class="btn btn-warning btn-lg">
                    Contact Us Today
                </a>
            </div>

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

@endsection
