{% extends 'email/base.html.twig' %}

{% block title %}{{ 'member.welcome.subject'|trans({}, 'emails') }}{% endblock %}

{% block header_title %}{{ 'member.welcome.header.title'|trans({}, 'emails') }} 🎉{% endblock %}
{% block header_subtitle %}{{ 'member.welcome.header.subtitle'|trans({}, 'emails') }}{% endblock %}

{% block content %}
    <h2>{{ 'member.welcome.greeting'|trans({'%firstName%': member.firstName}, 'emails') }} 👋</h2>
    
    <p>{{ 'member.welcome.intro'|trans({}, 'emails') }}</p>
    
    <div class="alert alert-success">
        <strong>🎊 {{ 'member.welcome.congratulations'|trans({}, 'emails') }}</strong> {{ 'member.welcome.account_created'|trans({}, 'emails') }}
    </div>
    
    <h3>🚀 {{ 'member.welcome.next_steps.title'|trans({}, 'emails') }}</h3>
    
    <div class="highlight-box">
        <h4>1. {{ 'member.welcome.next_steps.complete_profile.title'|trans({}, 'emails') }}</h4>
        <p>{{ 'member.welcome.next_steps.complete_profile.description'|trans({}, 'emails') }}</p>
        <a href="{{ dashboardUrl }}" class="btn btn-primary">{{ 'member.welcome.next_steps.complete_profile.button'|trans({}, 'emails') }}</a>
    </div>
    
    <div class="highlight-box">
        <h4>2. {{ 'member.welcome.next_steps.publish_items.title'|trans({}, 'emails') }}</h4>
        <p>{{ 'member.welcome.next_steps.publish_items.description'|trans({}, 'emails') }}</p>
        <a href="{{ catalogUrl }}" class="btn">{{ 'member.welcome.next_steps.publish_items.button'|trans({}, 'emails') }}</a>
    </div>
    
    <div class="highlight-box">
        <h4>3. {{ 'member.welcome.next_steps.explore_directory.title'|trans({}, 'emails') }}</h4>
        <p>{{ 'member.welcome.next_steps.explore_directory.description'|trans({}, 'emails') }}</p>
        <a href="{{ directoryUrl }}" class="btn btn-success">{{ 'member.welcome.next_steps.explore_directory.button'|trans({}, 'emails') }}</a>
    </div>
    
    <h3>🎯 {{ 'member.welcome.benefits.title'|trans({}, 'emails') }}</h3>
    <ul>
        <li><strong>{{ 'member.welcome.benefits.visibility.title'|trans({}, 'emails') }}</strong> : {{ 'member.welcome.benefits.visibility.description'|trans({}, 'emails') }}</li>
        <li><strong>{{ 'member.welcome.benefits.catalog.title'|trans({}, 'emails') }}</strong> : {{ 'member.welcome.benefits.catalog.description'|trans({}, 'emails') }}</li>
        <li><strong>{{ 'member.welcome.benefits.network.title'|trans({}, 'emails') }}</strong> : {{ 'member.welcome.benefits.network.description'|trans({}, 'emails') }}</li>
        <li><strong>{{ 'member.welcome.benefits.tools.title'|trans({}, 'emails') }}</strong> : {{ 'member.welcome.benefits.tools.description'|trans({}, 'emails') }}</li>
        <li><strong>{{ 'member.welcome.benefits.support.title'|trans({}, 'emails') }}</strong> : {{ 'member.welcome.benefits.support.description'|trans({}, 'emails') }}</li>
    </ul>
    
    <div class="alert alert-info">
        <strong>💡 {{ 'member.welcome.tip.title'|trans({}, 'emails') }}</strong> {{ 'member.welcome.tip.description'|trans({}, 'emails') }}
    </div>
    
    <p>{{ 'member.welcome.support_text'|trans({}, 'emails') }}</p>
    
    <p>{{ 'member.welcome.closing'|trans({}, 'emails') }}</p>
    
    <p><strong>{{ 'email.base.team_signature'|trans({}, 'emails') }}</strong><br>
    <em>{{ 'member.welcome.tagline'|trans({}, 'emails') }}</em></p>
{% endblock %}