@php
    $aboutUsMessage = \App\Models\AboutUsMessage::all();
@endphp
@if($aboutUsMessage && $aboutUsMessage->count() > 0)
<div class="message-container">
    @foreach ($aboutUsMessage as $message)
    <div class="content-wrapper">

        <h2 class="message-title">{{ $message->messages_tittle ?? 'Message' }}</h2>

        <div class="message-content">
            <div class="principle-image">
                <img src="{{ asset('storage/' . $message->messages_photo) }}" alt="Principle">
            </div>

            <div class="message-text">
                <div class="quote-marks">
                    <span class="quote-left">“</span>
                    <p class="testimonial-text">
                        {!! $message->messages_text ?? 'Message' !!}
                        <span class="quote-right">”</span>
                    </p>
                </div>
                <div class="principle-info">
                    <h3 class="principle-name">{{ $message->messages_name ?? 'Message' }}</h3>
                    <p class="college-name">SOUTHWESTERN BUSINESS COLLEGE</p>
                    <p class="designation">{{ $message->messages_position ?? 'Message' }}</p>
                </div>
            </div>
        </div>

    </div>
    @endforeach
</div>
@endif


<style>
/* Responsive styles for message section */
@media (max-width: 1200px) {
    .message-container {
        padding: 40px 30px;
    }
    .content-wrapper {
        max-width: 1000px;
    }
    .message-content {
        gap: 40px;
    }
    .principle-image {
        flex: 0 0 300px;
    }
    .message-text {
        flex: 1;
    }
}

@media (max-width: 900px) {
    .message-container {
        padding: 30px 24px;
    }
    .message-title {
        font-size: 1.8rem;
        margin-bottom: 24px;
    }
    .message-content {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }
    .principle-image {
        flex: 0 0 auto;
        max-width: 280px;
        margin: 0 auto;
    }
    .message-text {
        flex: 1;
    }
    .principle-info {
        text-align: center;
    }
}

@media (max-width: 700px) {
    .message-container {
        padding: 24px 20px;
    }
    .message-title {
        font-size: 1.6rem;
        margin-bottom: 20px;
    }
    .message-content {
        gap: 24px;
    }
    .principle-image {
        max-width: 240px;
    }
    .principle-image img {
        width: 240px;
        height: 240px;
    }
    .testimonial-text {
        font-size: 0.95rem;
        line-height: 1.6;
    }
    .principle-name {
        font-size: 1.1rem;
    }
    .college-name {
        font-size: 0.9rem;
    }
    .designation {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .message-container {
        padding: 20px 16px;
    }
    .message-title {
        font-size: 1.4rem;
        margin-bottom: 18px;
    }
    .message-content {
        gap: 20px;
    }
    .principle-image {
        max-width: 200px;
    }
    .principle-image img {
        width: 200px;
        height: 200px;
    }
    .testimonial-text {
        font-size: 0.9rem;
        line-height: 1.5;
    }
    .principle-name {
        font-size: 1rem;
        margin-bottom: 6px;
    }
    .college-name {
        font-size: 0.8rem;
        margin-bottom: 4px;
    }
    .designation {
        font-size: 0.8rem;
    }
    .quote-left,
    .quote-right {
        font-size: 1.5rem;
    }
}

@media (max-width: 360px) {
    .message-container {
        padding: 16px 12px;
    }
    .message-title {
        font-size: 1.2rem;
        margin-bottom: 16px;
    }
    .message-content {
        gap: 16px;
    }
    .principle-image {
        max-width: 180px;
    }
    .principle-image img {
        width: 180px;
        height: 180px;
    }
    .testimonial-text {
        font-size: 0.85rem;
        line-height: 1.4;
    }
    .principle-name {
        font-size: 0.95rem;
        margin-bottom: 5px;
    }
    .college-name {
        font-size: 0.75rem;
        margin-bottom: 3px;
    }
    .designation {
        font-size: 0.75rem;
    }
    .quote-left,
    .quote-right {
        font-size: 1.3rem;
    }
}

/* Ensure proper spacing for quote marks */
@media (max-width: 480px) {
    .quote-marks {
        padding: 0 8px;
    }
}

@media (max-width: 360px) {
    .quote-marks {
        padding: 0 6px;
    }
}
</style>