@extends('emails.layouts.abec')

@section('subject', 'Welcome to ABEC Africa')
@section('preheader', 'You are now a member of the African Biomedical Engineering Consortium.')

@section('content')
<h1 class="email-heading">Welcome to ABEC, {{ $user->name }}.</h1>

<p class="email-body-text">
    You've joined the <strong>African Biomedical Engineering Consortium</strong> — a pan-African network
    of universities, research institutions, and professionals working to advance biomedical engineering
    education and practice across the continent.
</p>

<div class="info-box">
    <p>
        <strong>Membership tier:</strong> {{ $subscription->tier->name ?? 'Member' }}<br>
        <strong>Status:</strong>
        @if($subscription->status === 'active')
            <span style="color:#1b7c3f;font-weight:bold;">Active</span>
        @else
            <span style="color:#d97706;font-weight:bold;">Pending payment</span>
        @endif
        @if($subscription->expires_at)
            <br><strong>Valid until:</strong> {{ $subscription->expires_at->format('j F Y') }}
        @endif
    </p>
</div>

@if($subscription->status !== 'active')
<p class="email-body-text">
    Your membership is currently pending. Please complete your payment to activate your access
    to member resources, the directory, and consortium events.
</p>
@endif

<h2 class="email-subheading">Your next steps</h2>

<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
    @foreach([
        ['Verify your email address', 'Confirm your email to unlock your full member portal.'],
        ['Complete your profile', 'Add your institution, specialisation, and bio to appear in the member directory.'],
        ['Explore the portal', 'Access events, publications, and connect with colleagues across Africa.'],
    ] as $step)
    <tr>
        <td style="padding:10px 0;vertical-align:top;width:28px;">
            <div style="width:22px;height:22px;background-color:#1b265c;border-radius:50%;text-align:center;line-height:22px;">
                <span style="color:#D4A843;font-family:Helvetica,Arial,sans-serif;font-size:11px;font-weight:bold;">{{ $loop->iteration }}</span>
            </div>
        </td>
        <td style="padding:10px 0 10px 10px;vertical-align:top;">
            <p style="font-family:Helvetica,Arial,sans-serif;font-size:14px;font-weight:bold;color:#1b265c;margin:0 0 4px;">{{ $step[0] }}</p>
            <p style="font-family:Helvetica,Arial,sans-serif;font-size:14px;color:#555;margin:0;">{{ $step[1] }}</p>
        </td>
    </tr>
    @endforeach
</table>

<p style="margin-top:28px;text-align:center;">
    <a href="{{ url('/portal') }}" class="btn-primary">Go to My ABEC Portal</a>
</p>

<hr class="email-divider">

<p class="email-muted">
    Questions? Contact us at <a href="mailto:members@abecafrica.org">members@abecafrica.org</a>
    or visit <a href="https://abecafrica.org/contact">abecafrica.org/contact</a>.
</p>
@endsection