@extends('layouts.frontend')

@section('title', "Principal's Message - Kidscholl Academy")

@section('content')
    <!-- Page Header -->
    <section class="page-header text-center">
        <div class="container">
            <h1 class="page-header-title">Principal's Message</h1>
            <p class="lead text-muted">A welcome note from the desk of Dr. Amanda Richardson.</p>
        </div>
    </section>

    <!-- Content -->
    <section class="section-padding bg-white pt-0">
        <div class="container">
            <div class="row align-items-start">
                <div class="col-lg-4 text-center mb-5 mb-lg-0">
                    <div class="card border-0 shadow-sm p-4 bg-light rounded-4">
                        <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&q=80&w=300" alt="Principal Amanda" class="img-fluid rounded-4 shadow border border-5 border-white mb-3" style="max-height: 320px; object-fit: cover;">
                        <h4 class="text-primary mb-1">Dr. Amanda Richardson</h4>
                        <p class="text-muted fw-bold mb-3">Principal, Kidscholl Academy</p>
                        <p class="small text-secondary mb-0"><i class="bi bi-mortarboard-fill me-1 text-danger"></i> Ph.D. in Child Development & Early Pedagogy (Stanford University)</p>
                        <p class="small text-secondary mt-1"><i class="bi bi-clock-history me-1 text-success"></i> 18+ Years in Academic Administration</p>
                    </div>
                </div>
                <div class="col-lg-8">
                    <div class="ps-lg-4">
                        <span class="badge bg-danger kids-badge mb-2">Welcome Note</span>
                        <h2 class="text-primary mb-4">Bridging Education with Parental Love</h2>
                        <p class="lead">"We welcome you and your family to Kidscholl. Our main mission is to collaborate and spark the fire of learning within your child."</p>
                        <p>Dear Parents and Guardians,</p>
                        <p>At Kidscholl, we view education not as the mechanical accumulation of facts, but as the active development of curiosity, kindness, and intellectual resilience. Each child is a unique star, and our role is to provide the perfect sky for them to shine.</p>
                        <p>In this digital age, we understand that parent participation is vital for student growth. That is why we have designed this unified communication portal. Whether it is tracking daily attendance, checking exam timetables, downloading academic worksheets, or contributing responses to feedback surveys, this portal integrates you into your child's learning circle.</p>
                        <p>I invite you to review our curriculum, check the upcoming events timeline, and collaborate with our qualified staff. Together, we can make your child's foundation strong, creative, and joyful.</p>
                        
                        <div class="border-top pt-4 mt-5">
                            <h4 class="text-secondary mb-3">Our Educational Philosophy</h4>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <div class="p-3 bg-light rounded border-start border-3 border-danger">
                                        <h6 class="fw-bold"><i class="bi bi-balloon-fill text-danger me-1"></i> Experiential Pedagogy</h6>
                                        <p class="small text-muted mb-0">Children learn best by seeing, doing, playing, and sharing, rather than just reading.</p>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="p-3 bg-light rounded border-start border-3 border-success">
                                        <h6 class="fw-bold"><i class="bi bi-people-fill text-success me-1"></i> Continuous Interaction</h6>
                                        <p class="small text-muted mb-0">Daily alerts and read feedback loop keep parent and school in perfect alignment.</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="mt-4">
                            <p class="mb-1">Warm regards,</p>
                            <p class="fw-bold text-primary fs-5 mb-0">Dr. Amanda Richardson</p>
                            <p class="text-muted small">Principal, Kidscholl Academy</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection