@extends('web.signup.layout')

@section('title', __('web.signup.account_access.profile_heading'))
@section('body_class', 'account-profile-page')
@section('page_title', __('web.signup.account_access.profile_heading'))
@section('page_subtitle', __('web.signup.account_access.profile_description'))

@section('content')
<section class="signup-card account-profile" aria-labelledby="account-profile-title">
    <div class="account-profile__icon" aria-hidden="true">✓</div>
    <div class="account-profile__content">
        <p class="account-profile__eyebrow">{{ $audience === 'investor' ? __('web.signup.account_access.investor') : __('web.signup.account_access.startup') }}</p>
        <h2 id="account-profile-title">{{ __('web.signup.account_access.welcome', ['name' => $audience === 'investor' ? ($account->full_name_ar ?: $account->full_name_en ?: $account->first_name) : ($account->name_ar ?: $account->name_en ?: $account->name)]) }}</h2>
        <p>{{ __('web.signup.account_access.profile_safe_notice') }}</p>
    </div>
    <a class="btn btn--primary account-profile__action" href="{{ $audience === 'investor' ? route('investor-signup') : route('startup-signup') }}">{{ __('web.signup.account_access.profile_continue') }}</a>
</section>
@endsection

@push('styles')
<style>
.account-profile{width:min(100%,560px);margin:0 auto;padding:34px;display:grid;gap:18px;text-align:center}.account-profile__icon{width:56px;height:56px;margin:0 auto;display:grid;place-items:center;border-radius:18px;color:var(--success-700);background:var(--success-50);font-size:30px;font-weight:800}.account-profile__eyebrow{margin:0 0 5px;color:var(--primary-700);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.account-profile h2{margin:0;color:var(--slate-900);font-size:24px}.account-profile__content>p:last-child{margin:9px 0 0;color:var(--slate-600)}.account-profile__action{justify-self:center;min-height:46px;padding-inline:24px}@media(max-width:540px){.account-profile{margin-inline:2px;padding:26px 20px}.account-profile h2{font-size:21px}}
</style>
@endpush