@extends('public.layout')

@section('title', 'How it works')

@push('styles')
<style>
    .how-hero { text-align: center; padding: 3rem 0 1.5rem; }
    .how-hero .section-lead { margin-left: auto; margin-right: auto; }
    .how-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
        margin-top: 1.5rem;
    }
    .how-card {
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 18px;
        box-shadow: var(--shadow);
        padding: 1.5rem 1.4rem 1.6rem;
        display: flex;
        flex-direction: column;
    }
    .how-card.participant {
        background: linear-gradient(180deg, #F5F3FF 0%, #fff 40%);
        border-color: #DDD6FE;
    }
    .how-card.organiser {
        background: linear-gradient(180deg, #EFF6FF 0%, #fff 40%);
        border-color: #BFDBFE;
    }
    .how-roles {
        display: flex;
        flex-wrap: wrap;
        gap: .35rem;
        margin: .75rem 0 1.15rem;
    }
    .how-role {
        display: inline-block;
        padding: .22rem .55rem;
        border-radius: 999px;
        font-size: .72rem;
        font-weight: 700;
        background: #F1F5F9;
        color: var(--muted);
    }
    .how-card.participant .how-role {
        background: var(--primary-soft);
        color: var(--mexco-primary-dark);
    }
    .how-card.organiser .how-role {
        background: #DBEAFE;
        color: #1D4ED8;
    }
    .how-steps {
        list-style: none;
        margin: 0;
        padding: 0;
        flex: 1;
    }
    .how-steps li {
        display: grid;
        grid-template-columns: 28px 1fr;
        gap: .75rem;
        align-items: start;
        padding: .7rem 0;
        border-bottom: 1px solid #F1F5F9;
        text-align: left;
    }
    .how-steps li:last-child { border-bottom: 0; }
    .how-num {
        width: 28px;
        height: 28px;
        border-radius: 999px;
        display: grid;
        place-items: center;
        font-size: .78rem;
        font-weight: 800;
        background: var(--primary-soft);
        color: var(--mexco-primary-dark);
    }
    .how-card.organiser .how-num {
        background: #DBEAFE;
        color: #1D4ED8;
    }
    .how-steps strong {
        display: block;
        font-size: .9rem;
        margin-bottom: .15rem;
    }
    .how-steps span {
        display: block;
        font-size: .82rem;
        color: var(--muted);
        line-height: 1.45;
    }
    .how-apps {
        margin: 1rem 0 1.15rem;
        font-size: .8rem;
        color: var(--muted);
        text-align: left;
        line-height: 1.5;
    }
    .how-apps strong { color: var(--ink); }
    @media (max-width: 800px) {
        .how-grid { grid-template-columns: 1fr; }
    }
</style>
@endpush

@section('content')
<section class="how-hero">
    <div class="container">
        <div class="section-kicker">Journey</div>
        <h1 class="section-title">How MeXCo works</h1>
        <p class="section-lead">Two paths: one for people attending the event, and one for the team running it.</p>
    </div>
</section>

<section class="section" style="padding-top:0">
    <div class="container">
        <div class="how-grid">
            {{-- Participants --}}
            <article class="how-card participant">
                <div class="section-kicker">For attendees</div>
                <h2 class="section-title" style="font-size:1.35rem">Participant experience</h2>
                <div class="how-roles">
                    <span class="how-role">Visitor</span>
                    <span class="how-role">Exhibitor</span>
                    <span class="how-role">Presenter</span>
                    <span class="how-role">Participant</span>
                </div>
                <p class="how-apps">
                    Primary app: <strong>MeXCo Pass</strong><br>
                    Check-in support: <strong>MeXCo Attend</strong> (committee side)
                </p>
                <ol class="how-steps">
                    <li>
                        <span class="how-num">1</span>
                        <div>
                            <strong>Receive invitation / register</strong>
                            <span>Get your event link or QR from the organiser.</span>
                        </div>
                    </li>
                    <li>
                        <span class="how-num">2</span>
                        <div>
                            <strong>Open MeXCo Pass</strong>
                            <span>Sign in with your registered email and identity details.</span>
                        </div>
                    </li>
                    <li>
                        <span class="how-num">3</span>
                        <div>
                            <strong>Enter your digital pass</strong>
                            <span>Show your QR pass for entry, sessions, and booth visits.</span>
                        </div>
                    </li>
                    <li>
                        <span class="how-num">4</span>
                        <div>
                            <strong>Engage at the event</strong>
                            <span>Join sessions, collect digital stamps, vote at booths, and explore the floor plan where enabled.</span>
                        </div>
                    </li>
                    <li>
                        <span class="how-num">5</span>
                        <div>
                            <strong>Get your certificate</strong>
                            <span>Download or view your digital certificate after requirements are met.</span>
                        </div>
                    </li>
                </ol>
            </article>

            {{-- Organisers / Committee --}}
            <article class="how-card organiser">
                <div class="section-kicker">For event teams</div>
                <h2 class="section-title" style="font-size:1.35rem">Committee &amp; organiser flow</h2>
                <div class="how-roles">
                    <span class="how-role">Event Committee</span>
                    <span class="how-role">Organiser</span>
                    <span class="how-role">Organisation Admin</span>
                </div>
                <p class="how-apps">
                    Account: <strong>My MeXCo</strong><br>
                    Operations: <strong>MeXCo Organizer</strong> · Attendance: <strong>MeXCo Attend</strong>
                </p>
                <ol class="how-steps">
                    <li>
                        <span class="how-num">1</span>
                        <div>
                            <strong>Choose a plan &amp; sign up</strong>
                            <span>Create your organisation account in My MeXCo.</span>
                        </div>
                    </li>
                    <li>
                        <span class="how-num">2</span>
                        <div>
                            <strong>Create the event license</strong>
                            <span>Set event details, capacity, add-ons, and complete checkout.</span>
                        </div>
                    </li>
                    <li>
                        <span class="how-num">3</span>
                        <div>
                            <strong>Configure in MeXCo Organizer</strong>
                            <span>Add participants, sessions, booths, roles, and certificate templates.</span>
                        </div>
                    </li>
                    <li>
                        <span class="how-num">4</span>
                        <div>
                            <strong>Run the event day</strong>
                            <span>Committee uses MeXCo Attend to verify QR passes and manage check-in.</span>
                        </div>
                    </li>
                    <li>
                        <span class="how-num">5</span>
                        <div>
                            <strong>Close &amp; report</strong>
                            <span>Issue certificates, review engagement, and manage usage from My MeXCo.</span>
                        </div>
                    </li>
                </ol>
            </article>
        </div>
    </div>
</section>
@endsection
