@extends('layouts.frontend')

@section('title', 'Management Messages - Kidscholl Academy')

@section('content')
    <!-- Page Header -->
    <section class="page-header text-center">
        <div class="container">
            <h1 class="page-header-title">Management Message</h1>
            <p class="lead text-muted">Words from our governing council and directors.</p>
        </div>
    </section>

    <!-- Messages -->
    <section class="section-padding bg-white pt-0">
        <div class="container">
            <!-- Chairman Message -->
            <div class="row align-items-center mb-5 pb-5 border-bottom">
                <div class="col-lg-8 order-lg-2">
                    <span class="badge bg-primary kids-badge mb-2">Chairman Desk</span>
                    <h2 class="text-primary mb-3">Our Long-term Vision for Quality Education</h2>
                    <p class="lead">"Building educational platforms that align child interest with state-of-the-art infrastructure."</p>
                    <p>Welcome to Kidscholl Academy. When we founded this school group, our commitment was clear: to create an institution that does not compromise on safety, teaching talent, or learning assets. We wanted to build an ecosystem where child intelligence can bloom naturally.</p>
                    <p>Every facility, from class layouts to smart portal integrations, is designed to bring safety and high-fidelity reporting to parents. We thank you for choosing Kidscholl and look forward to continuous collaboration.</p>
                    <div class="mt-4">
                        <h5 class="fw-bold text-dark mb-0">Mr. Henry Harrison</h5>
                        <p class="text-muted small">Chairman, Kidscholl Governing Council</p>
                    </div>
                </div>
                <div class="col-lg-4 text-center order-lg-1 mb-4 mb-lg-0">
                    <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&q=80&w=300" alt="Chairman" class="img-fluid rounded-4 shadow border border-5 border-white" style="width: 250px; height: 250px; object-fit: cover;">
                </div>
            </div>

            <!-- Director Message -->
            <div class="row align-items-center">
                <div class="col-lg-8">
                    <span class="badge bg-success kids-badge mb-2">Director Desk</span>
                    <h2 class="text-success mb-3">Empowering Parents via Connected Systems</h2>
                    <p class="lead">"Our focus is child safety and transparent information delivery."</p>
                    <p>At Kidscholl, we recognize that parent-teacher collaboration is the cornerstone of academic success. Our smart portal acts as a transparent window, giving you immediate alerts on announcements, holiday schedules, worksheets, and PTM slots.</p>
                    <p>By investing in digital security (like audit logs and OTP verification systems), we ensure that your ward's metrics remain highly confidential yet accessible to you anywhere. We pledge to maintain this standard of excellence.</p>
                    <div class="mt-4">
                        <h5 class="fw-bold text-dark mb-0">Mrs. Beatrice Vance</h5>
                        <p class="text-muted small">Managing Director, Kidscholl Group</p>
                    </div>
                </div>
                <div class="col-lg-4 text-center mb-4 mb-lg-0">
                    <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?auto=format&fit=crop&q=80&w=300" alt="Director" class="img-fluid rounded-4 shadow border border-5 border-white" style="width: 250px; height: 250px; object-fit: cover;">
                </div>
            </div>

            <!-- Management Details -->
            <div class="row mt-5 pt-5 text-center">
                <h3 class="text-primary mb-4">Kidscholl Advisory Board</h3>
                <div class="col-md-4 mb-4">
                    <div class="p-3 bg-light rounded shadow-sm">
                        <h5 class="text-danger">Dr. Alan Turing</h5>
                        <p class="text-muted small mb-0">Advisory Member - Technology & Labs</p>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="p-3 bg-light rounded shadow-sm">
                        <h5 class="text-success">Prof. Maria Montessori</h5>
                        <p class="text-muted small mb-0">Pedagogy Design Specialist</p>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="p-3 bg-light rounded shadow-sm">
                        <h5 class="text-warning">Mr. Alexander Bell</h5>
                        <p class="text-muted small mb-0">Communications & Safety Inspector</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection