@extends('layouts.public')

@section('title', config('brand.name').' · '.config('brand.tagline'))

@section('content')
    @php
        $heroSlides = [
            [
                'image' => 'images/home/hero-live-class.png',
                'alt' => 'Ghanaian students joining a live MyEdCamp lesson from home',
                'kicker' => config('brand.name').' · Live tutoring · Primary · JHS · SHS',
                'title' => config('brand.tagline'),
                'body' => 'Live tutoring, homework support and exam preparation for Ghanaian families. Parents create the account, add each child, and stay connected to their progress.',
                'primary' => ['href' => route('register', ['role' => 'parent']), 'label' => 'Create a parent account'],
                'secondary' => ['href' => route('become-teacher'), 'label' => 'Become a Tutor'],
                'links' => true,
            ],
            [
                'image' => 'images/home/hero-family.png',
                'alt' => 'A Ghanaian parent reviewing a child’s MyEdCamp learning with them',
                'kicker' => 'For families',
                'title' => 'Parents enrol. Children learn.',
                'body' => 'You own the household. Add each child, choose Super Admin class times, and see attendance, homework and improvement in one place.',
                'primary' => ['href' => route('register', ['role' => 'parent']), 'label' => 'Create a parent account'],
                'secondary' => ['href' => '#how-families-start', 'label' => 'How families start'],
                'links' => true,
            ],
            [
                'image' => 'images/home/hero-exam-prep.png',
                'alt' => 'A Ghanaian student practising BECE and WASSCE papers',
                'kicker' => 'BECE · WASSCE',
                'title' => 'Practise until it sticks.',
                'body' => 'Exam bank, homework and mocks sit in the same weekly cycle as live lessons. Start from GH₵10, then add tutoring when you are ready.',
                'primary' => ['href' => route('exam-bank'), 'label' => 'Open the exam bank'],
                'secondary' => ['href' => route('register', ['role' => 'parent']), 'label' => 'Create a parent account'],
                'links' => false,
            ],
            [
                'image' => 'images/home/hero-teacher.png',
                'alt' => 'A MyEdCamp tutor delivering a live subject lesson',
                'kicker' => 'Tutors',
                'title' => 'Deliver MyEdCamp lessons.',
                'body' => 'Super Admin assigns you to a subject and sets class times. You teach, mark homework and keep students accountable — you do not sell your own courses.',
                'primary' => ['href' => route('become-teacher'), 'label' => 'Become a Tutor'],
                'secondary' => ['href' => route('login', ['as' => 'tutor']), 'label' => 'Tutor sign in'],
                'links' => false,
            ],
        ];
        $familySteps = [
            ['title' => 'Create a parent account', 'body' => 'You own the household. Students do not register themselves.'],
            ['title' => 'Add your children', 'body' => 'Create a linked login for each child from your parent dashboard.'],
            ['title' => 'They learn. You watch progress.', 'body' => 'Live tutoring, homework, exam prep and attendance stay in one place, from GH₵10.'],
        ];
        $positioning = [
            ['title' => 'Structured online tutoring', 'body' => 'Live and recorded lessons inside a planned learning path, not one-off videos.', 'icon' => 'tutoring'],
            ['title' => 'Personalised learning', 'body' => 'Practice and support follow what each student still needs to master.', 'icon' => 'personalised'],
            ['title' => 'Homework accountability', 'body' => 'Work is assigned, submitted, marked and followed up. Homework is not optional.', 'icon' => 'homework'],
            ['title' => 'Exam preparation', 'body' => 'BECE and WASSCE practice sits inside the same weekly learning cycle.', 'icon' => 'exam-prep'],
            ['title' => 'Parental visibility', 'body' => 'Parents create the family account, add each child, and see whether they are keeping up.', 'icon' => 'parental'],
            ['title' => 'Student accountability', 'body' => 'Attendance, submission and improvement are visible to the student, teacher and parent.', 'icon' => 'accountability'],
            ['title' => 'Exam bank', 'body' => 'Past questions and structured practice, organised by subject, topic and exam.', 'icon' => 'exam-bank'],
            ['title' => 'Progress & performance tracking', 'body' => 'See how a student is doing over time: attendance, homework, assessments and improvement.', 'icon' => 'progress'],
            ['title' => 'Mentorship & academic guidance', 'body' => 'Mentors support learners with structured guidance, inside clear safeguarding boundaries.', 'icon' => 'mentorship'],
        ];
    @endphp

    <main>
        <section class="hero-slider" data-hero-slider aria-roledescription="carousel" aria-label="{{ config('brand.name') }} highlights">
            <div class="hero-slider-bars" aria-hidden="true">
                @foreach ($heroSlides as $slide)
                    <div class="hero-slider-bar"><span></span></div>
                @endforeach
            </div>
            <div class="hero-slider-viewport">
                @foreach ($heroSlides as $index => $slide)
                    <article
                        class="hero-slide{{ $index === 0 ? ' is-active' : '' }}"
                        data-hero-slide
                        aria-hidden="{{ $index === 0 ? 'false' : 'true' }}"
                        aria-label="Slide {{ $index + 1 }} of {{ count($heroSlides) }}"
                    >
                        <img
                            class="hero-slide-image"
                            src="{{ asset($slide['image']) }}"
                            alt="{{ $slide['alt'] }}"
                            @if ($index === 0) fetchpriority="high" @else loading="lazy" @endif
                        >
                        <div class="hero-slide-shade"></div>
                        <div class="wrap">
                            <div class="hero-slide-copy">
                                <p class="eyebrow gold">{{ $slide['kicker'] }}</p>
                                @if ($index === 0)
                                    <h1 class="type-page">{{ $slide['title'] }}</h1>
                                @else
                                    <h2 class="type-page">{{ $slide['title'] }}</h2>
                                @endif
                                <p class="lede">{{ $slide['body'] }}</p>
                                <div class="hero-actions">
                                    <a class="btn btn-primary" href="{{ $slide['primary']['href'] }}">{{ $slide['primary']['label'] }}</a>
                                    <a class="btn btn-outline" href="{{ $slide['secondary']['href'] }}">{{ $slide['secondary']['label'] }}</a>
                                </div>
                                @if ($slide['links'])
                                    <p class="hero-links">
                                        <a href="{{ route('login', ['as' => 'parent']) }}">Parent sign in</a>
                                        <span aria-hidden="true"> · </span>
                                        <a href="{{ route('login', ['as' => 'student']) }}">Student sign in</a>
                                    </p>
                                @endif
                            </div>
                        </div>
                    </article>
                @endforeach
            </div>
            <div class="wrap hero-slider-controls">
                <p class="hero-slider-count" data-hero-count>01 / {{ str_pad((string) count($heroSlides), 2, '0', STR_PAD_LEFT) }}</p>
                <div class="hero-slider-dots" role="tablist" aria-label="Choose a slide">
                    @foreach ($heroSlides as $index => $slide)
                        <button
                            type="button"
                            class="hero-slider-dot{{ $index === 0 ? ' is-active' : '' }}"
                            data-hero-dot
                            role="tab"
                            aria-label="{{ $slide['title'] }}"
                            aria-selected="{{ $index === 0 ? 'true' : 'false' }}"
                        ></button>
                    @endforeach
                </div>
                <div class="hero-slider-arrows">
                    <button type="button" class="hero-slider-arrow" data-hero-prev aria-label="Previous slide">
                        <svg viewBox="0 0 20 20" width="18" height="18" fill="none" aria-hidden="true"><path d="M12.25 4.75 6.75 10l5.5 5.25" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </button>
                    <button type="button" class="hero-slider-arrow" data-hero-next aria-label="Next slide">
                        <svg viewBox="0 0 20 20" width="18" height="18" fill="none" aria-hidden="true"><path d="M7.75 4.75 13.25 10l-5.5 5.25" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </button>
                </div>
            </div>
        </section>

        {{-- Kept for later. Hidden from homepage for now.
        <section class="band band-cycle">
            <div class="wrap cycle-split">
                <div class="cycle-intro">
                    <p class="eyebrow">How learning works</p>
                    <h2 class="type-major">A loop, not a one-off lesson.</h2>
                    <p class="copy">Students learn live, practise, submit homework, get feedback and improve — then the cycle starts again.</p>
                </div>
                @include('partials.learning-cycle')
            </div>
        </section>
        --}}

        <section id="how-families-start" class="band">
            <div class="wrap">
                <p class="eyebrow">How families start</p>
                <h2 class="type-major">MyEdCamp is a family service. Parents enrol. Children learn. Tutors deliver MyEdCamp lessons.</h2>
                <div class="cards-3">
                    @foreach ($familySteps as $index => $step)
                        <article class="card card-soft">
                            <p class="eyebrow">Step {{ $index + 1 }}</p>
                            <h3>{{ $step['title'] }}</h3>
                            <p>{{ $step['body'] }}</p>
                        </article>
                    @endforeach
                </div>
            </div>
        </section>

        <section class="band band-tight">
            <div class="wrap">
                <p class="eyebrow">What we sell</p>
                <h2 class="type-major">
                    Structured online tutoring, personalised learning, homework accountability, exam preparation, parental
                    visibility, student accountability, an exam bank, progress tracking and mentorship.
                </h2>
                <div class="cards-3">
                    @foreach ($positioning as $item)
                        <article class="card">
                            <span class="icon-wrap">
                                <x-marketing-icon :name="$item['icon']" class="icon" />
                            </span>
                            <h3 class="card-title-brand">{{ $item['title'] }}</h3>
                            <p>{{ $item['body'] }}</p>
                        </article>
                    @endforeach
                </div>
            </div>
        </section>

        <section id="exam-preparation" class="band">
            <div class="wrap split">
                <div>
                    <p class="eyebrow">Exam preparation</p>
                    <h2 class="type-major">Structured BECE and WASSCE preparation</h2>
                    <p class="copy">
                        Ghana's two national exams sit inside the same weekly cycle as live lessons and homework. Students
                        practise by subject and topic, not in a last-minute crash course.
                    </p>
                    <div class="cards-2">
                        <article class="card">
                            <p class="muted-label">Junior High</p>
                            <h3>BECE</h3>
                            <p>Topic practice, mocks and past questions for Mathematics, English Language, Integrated Science and Social Studies.</p>
                            <a class="text-link" href="{{ route('exam-preparation') }}#bece">View BECE pathway</a>
                        </article>
                        <article class="card">
                            <p class="muted-label">Senior High</p>
                            <h3>WASSCE</h3>
                            <p>Core and elective papers with timed practice for Core Mathematics, English, Science and Social Studies.</p>
                            <a class="text-link" href="{{ route('exam-preparation') }}#wassce">View WASSCE pathway</a>
                        </article>
                    </div>
                </div>
                <div class="exam-photo">
                    <img src="{{ asset('images/exam-prep-ghana-edtech-books.png') }}" alt="A Ghanaian student preparing for {{ config('brand.name') }} BECE and WASSCE exams">
                </div>
            </div>
        </section>

        <section class="cta-band">
            <div class="wrap cta-grid">
                <div>
                    <p class="eyebrow gold">Start small. Stay consistent.</p>
                    <h2 class="type-page">You can study with as little as GH₵10.</h2>
                    <p>
                        Exam bank practice, topic drills and recorded lessons should not wait on a large payment. Begin from ten
                        Ghana cedis, then add live tutoring when you are ready.
                    </p>
                </div>
                <a class="btn btn-white" href="{{ route('register', ['role' => 'parent']) }}">Create a parent account</a>
            </div>
        </section>

        <section id="exam-bank" class="band">
            <div class="wrap">
                <div class="teaser">
                    <div>
                        <span class="icon-wrap icon-wrap-white">
                            <x-marketing-icon name="exam-bank" class="icon" />
                        </span>
                        <h2 class="type-major">Exam bank by subject, topic and paper.</h2>
                        <p class="copy">
                            Past questions and structured drills for BECE and WASSCE, organised the way Super Admin will store the
                            official curriculum — class, subject, then topic.
                        </p>
                    </div>
                    <a class="btn btn-primary" href="{{ route('exam-bank') }}">Open the exam bank</a>
                </div>
            </div>
        </section>

        <section id="apps" class="hero-band">
            <div class="wrap">
                <p class="eyebrow">Mobile apps</p>
                <h2 class="type-major">The same {{ config('brand.name') }} classroom on iOS and Android.</h2>
                <p class="copy">
                    Join live lessons, submit homework and practise BECE or WASSCE papers on your phone. One account, Africa/Accra
                    times, on the App Store and Google Play.
                </p>
                <div class="store-row">
                    <a class="store-badge" href="{{ route('register', ['role' => 'parent']) }}" aria-label="Download on the App Store">
                        <svg viewBox="0 0 168 52" role="img"><title>Download on the App Store</title><path fill="currentColor" d="M28.9 15.7c1.4-1.7 2.3-4 2-6.3-2 .1-4.4 1.3-5.8 3-1.3 1.5-2.5 3.9-2.2 6.2 2.2.2 4.5-1.2 6-2.9zm.3 1.4c-3.5-.2-6.4 2-8.1 2-1.6 0-4.1-1.9-6.8-1.8-3.5.1-6.7 2-8.5 5.2-3.6 6.3-.9 15.6 2.6 20.7 1.7 2.5 3.7 5.3 6.4 5.2 2.6-.1 3.5-1.7 6.6-1.7 3.1 0 3.9 1.7 6.7 1.6 2.8 0 4.5-2.5 6.2-5 2-3.4 2.8-6.8 2.8-6.9-.1 0-5.3-2-5.4-8.1-.1-5.1 4.2-7.6 4.3-7.7-2.4-3.5-6.1-3.9-7.3-4z"/><text x="48" y="21" fill="currentColor" font-size="9" font-family="ui-sans-serif, system-ui, sans-serif">Download on the</text><text x="48" y="38" fill="currentColor" font-size="16" font-family="ui-sans-serif, system-ui, sans-serif" font-weight="600">App Store</text></svg>
                    </a>
                    <a class="store-badge" href="{{ route('register', ['role' => 'parent']) }}" aria-label="Get it on Google Play">
                        <svg viewBox="0 0 186 52" role="img"><title>Get it on Google Play</title><path fill="#4285F4" d="M16.2 14.4v23.2L28.8 26 16.2 14.4Z"/><path fill="#34A853" d="M28.8 26 16.2 37.6c.9.9 2.2.8 3.3.2L32 30.4c1.3-.7 1.3-2.1 0-2.8L28.8 26Z"/><path fill="#FBBC04" d="M16.2 14.4 28.8 26l3.2-1.6c1.3-.7 1.3-2.1 0-2.8l-12.5-7.4c-1.1-.6-2.4-.7-3.3.2Z"/><path fill="#EA4335" d="M16.2 26v11.6L28.8 26 16.2 14.4V26Z" opacity=".35"/><text x="42" y="21" fill="currentColor" font-size="9" font-family="ui-sans-serif, system-ui, sans-serif" letter-spacing=".14em">GET IT ON</text><text x="42" y="38" fill="currentColor" font-size="16" font-family="ui-sans-serif, system-ui, sans-serif" font-weight="600">Google Play</text></svg>
                    </a>
                </div>
                @include('partials.phone-mockups')
            </div>
        </section>
    </main>
@endsection