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

{% block canonical %}
  {% set canonicalRoute = app.request.locale == 'en' ? 'app_home_en' : 'app_home' %}
  <link rel="canonical" href="{{ url(canonicalRoute) }}">
  <link rel="alternate" hreflang="fr" href="{{ url('app_home') }}">
  <link rel="alternate" hreflang="en" href="{{ url('app_home_en') }}">
  <link rel="alternate" hreflang="x-default" href="{{ url('app_home') }}">
{% endblock %}

{% block body %}
  {% set contactSuccessMessages = app.flashes('contact_success') %}
  {% set isEnglish = app.request.locale == 'en' %}
  {% set homeRoute = isEnglish ? 'app_home_en' : 'app_home' %}
  {% set contactRoute = isEnglish ? 'app_contact_submit_en' : 'app_contact_submit' %}
  {% set privacyRoute = isEnglish ? 'app_privacy_policy_en' : 'app_privacy_policy' %}

  <header class="site-header" id="top">
    <nav class="nav-wrap" aria-label="{{ 'navigation.main'|trans }}">
      <a class="nav-brand" href="#accueil" aria-label="{{ 'navigation.home_label'|trans }}">
        <img src="{{ asset('assets/images/tomonia-logo-vecto_line.png') }}" alt="">
      </a>
      <button class="nav-toggle" type="button" aria-expanded="false" aria-controls="main-menu" aria-label="{{ 'navigation.open_menu'|trans }}" data-open-label="{{ 'navigation.open_menu'|trans }}" data-close-label="{{ 'navigation.close_menu'|trans }}">
        <span></span><span></span><span></span>
      </button>
      <div class="nav-links" id="main-menu">
        <a href="#constat">{{ 'navigation.observation'|trans }}</a>
        <a href="#approche">{{ 'navigation.approach'|trans }}</a>
        <a href="#equipe">{{ 'navigation.team'|trans }}</a>
        <a href="#processus">{{ 'navigation.process'|trans }}</a>
        <a href="#parcours">{{ 'navigation.paths'|trans }}</a>
        <a href="#ateliers">{{ 'navigation.workshops'|trans }}</a>
        <a class="nav-language" href="{{ path(isEnglish ? 'app_home' : 'app_home_en') }}" hreflang="{{ isEnglish ? 'fr' : 'en' }}" lang="{{ isEnglish ? 'fr' : 'en' }}">{{ isEnglish ? 'FR' : 'EN' }}<span class="visually-hidden"> — {{ 'navigation.language_switch'|trans }}</span></a>
        <a class="nav-cta" href="#contact">{{ 'navigation.contact'|trans }}</a>
      </div>
    </nav>
  </header>

  {% if contactSuccessMessages is not empty %}
    <aside class="toast-region" aria-label="{{ 'toast.confirmation_label'|trans }}">
      {% for message in contactSuccessMessages %}
        <div class="success-toast" data-toast>
          <span class="success-toast-icon" aria-hidden="true">✓</span>
          <p>{{ message|trans }}</p>
          <button
            class="success-toast-close"
            type="button"
            data-toast-close
            aria-label="{{ 'toast.close'|trans }}"
          >×</button>
        </div>
      {% endfor %}
    </aside>
  {% endif %}

  <main id="main-content" tabindex="-1">
    <!-- 01 — Accueil -->
    <section class="section section-cream hero" id="accueil">
      <div class="section-inner hero-grid">
        <div class="hero-copy">
          <img class="hero-logo" src="{{ asset('assets/images/tomonia-logo-vecto_line.png') }}" alt="TomonIA Experience">
          <h1>{{ 'home.hero.title_1'|trans }}<br><span>{{ 'home.hero.title_2'|trans }}</span></h1>
          <div class="hero-body">
            <p>{{ 'home.hero.lead'|trans }}</p>
            <p>{{ 'home.hero.body'|trans }}</p>
          </div>
          <a class="button button-solid" href="#contact">{{ 'navigation.contact'|trans }}</a>
        </div>
        <div class="hero-art" aria-hidden="true">
          <img src="{{ asset('assets/images/oiseau.svg') }}" alt="">
        </div>
      </div>
    </section>

    <!-- 02 — Constat -->
    <section class="section section-navy" id="constat">
      <div class="section-inner">
        <img class="corner-logo" src="{{ asset('assets/images/tomonia-logo-vecto-lueurext.png') }}" alt="" aria-hidden="true">
        <div class="section-heading heading-light">
          <h2>{{ 'home.observation.title'|trans }}</h2>
          <span class="accent-line"></span>
        </div>
        <div class="constat-grid">
          <img class="constat-image" src="{{ asset('assets/images/temps.jpg') }}" alt="{{ 'home.observation.image_alt'|trans }}">
          <div class="constat-copy">
            <p>{{ 'home.observation.p1'|trans }}<br>{{ 'home.observation.p2'|trans }}</p>
            <p>{{ 'home.observation.p3'|trans }}</p>
            <p class="statement">{{ 'home.observation.statement'|trans }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 03 — Deux IA -->
    <section class="section section-cream" id="deux-ia">
      <div class="section-inner">
        <img class="corner-logo" src="{{ asset('assets/images/tomonia-logo-vecto_line.png') }}" alt="" aria-hidden="true">
        <div class="section-heading">
          <h2>{{ 'home.two_ai.title'|trans }}</h2>
          <p class="kicker">{{ 'home.two_ai.kicker'|trans }}</p>
          <span class="accent-line"></span>
        </div>
        <div class="comparison-grid">
          <article class="comparison-card comparison-light">
            <h3>{{ 'home.two_ai.used.title'|trans }}</h3>
            <p>{{ 'home.two_ai.used.intro'|trans }}</p>
            <ul class="diamond-list">
              <li>{{ 'home.two_ai.used.item1'|trans }}</li>
              <li>{{ 'home.two_ai.used.item2'|trans }}</li>
              <li>{{ 'home.two_ai.used.item3'|trans }}</li>
            </ul>
            <p class="card-conclusion">{{ 'home.two_ai.used.conclusion1'|trans }}<br>{{ 'home.two_ai.used.conclusion2'|trans }}</p>
          </article>
          <article class="comparison-card comparison-dark">
            <h3>{{ 'home.two_ai.working.title'|trans }}</h3>
            <p>{{ 'home.two_ai.working.intro'|trans }}</p>
            <ul class="diamond-list">
              <li>{{ 'home.two_ai.working.item1'|trans }}</li>
              <li>{{ 'home.two_ai.working.item2'|trans }}</li>
              <li>{{ 'home.two_ai.working.item3'|trans }}</li>
            </ul>
            <p class="card-conclusion mint">{{ 'home.two_ai.working.conclusion1'|trans }}<br>{{ 'home.two_ai.working.conclusion2'|trans }}</p>
          </article>
        </div>
      </div>
    </section>

    <!-- 04 — Notre approche -->
    <section class="section section-cream" id="approche">
      <div class="section-inner">
        <img class="corner-logo" src="{{ asset('assets/images/tomonia-logo-vecto_line.png') }}" alt="" aria-hidden="true">
        <div class="section-heading compact">
          <h2>{{ 'home.approach.title'|trans }}</h2>
          <p class="kicker">{{ 'home.approach.kicker'|trans }}</p>
          <span class="accent-line"></span>
        </div>
        <div class="beliefs-grid">
          {% for belief in ['task', 'collective', 'framework', 'choose', 'independence', 'people'] %}
            <article class="belief"><span class="mini-line"></span><h3>{{ ('home.approach.' ~ belief ~ '.title')|trans }}</h3><p>{{ ('home.approach.' ~ belief ~ '.text')|trans }}</p></article>
          {% endfor %}
        </div>
      </div>
    </section>

    <!-- 05 — Qui nous sommes -->
    <section class="section section-cream" id="equipe">
      <div class="section-inner">
        <img class="corner-logo" src="{{ asset('assets/images/tomonia-logo-vecto_line.png') }}" alt="" aria-hidden="true">
        <div class="section-heading compact">
          <p class="kicker">{{ 'home.team.kicker'|trans }}</p>
          <h2>{{ 'home.team.title'|trans }}</h2>
          <span class="accent-line"></span>
        </div>
        <div class="team-grid">
          <article class="team-card">
            <div class="team-head"><img src="{{ asset('assets/images/florie.png') }}" alt="{{ 'home.team.florie.portrait_alt'|trans }}"><div><h3>Florie LODDO</h3><p>{{ 'home.team.florie.role'|trans }}</p></div></div>
            <div class="team-copy"><p><strong>{{ 'home.team.florie.p1'|trans }}</strong></p><p>{{ 'home.team.florie.p2'|trans }}</p><p>{{ 'home.team.florie.p3'|trans }}</p></div>
          </article>
          <article class="team-card">
            <div class="team-head"><img src="{{ asset('assets/images/audrey.png') }}" alt="{{ 'home.team.audrey.portrait_alt'|trans }}"><div><h3>Audrey MALEYRIE</h3><p>{{ 'home.team.audrey.role'|trans }}</p></div></div>
            <div class="team-copy"><p><strong>{{ 'home.team.audrey.p1_strong'|trans }}</strong><br>{{ 'home.team.audrey.p1'|trans }}</p><p>{{ 'home.team.audrey.p2'|trans }}</p></div>
          </article>
          <article class="team-card duo-card">
            <div class="duo-title"><img src="{{ asset('assets/images/oiseau.svg') }}" alt="" aria-hidden="true"><h3>{{ 'home.team.duo.title'|trans }}</h3></div>
            <div class="team-copy"><p>{{ 'home.team.duo.p1'|trans }}</p><p>{{ 'home.team.duo.p2'|trans }}</p></div>
          </article>
        </div>
      </div>
    </section>

    <!-- 06 — Processus -->
    <section class="section section-navy" id="processus">
      <div class="section-inner">
        <img class="corner-logo" src="{{ asset('assets/images/tomonia-logo-vecto-lueurext.png') }}" alt="" aria-hidden="true">
        <div class="section-heading heading-light process-heading">
          <p class="kicker kicker-light">{{ 'home.process.kicker'|trans }}</p>
          <h2>{{ 'home.process.title'|trans }}</h2>
          <span class="accent-line"></span>
        </div>
        <ol class="steps-list">
          {% for step in 1..5 %}<li><span class="step-num">0{{ step }}</span><p>{{ ('home.process.step' ~ step)|trans }}</p></li>{% endfor %}
        </ol>
      </div>
    </section>

    <!-- 07 — Parcours -->
    <section class="section section-navy" id="parcours">
      <div class="section-inner">
        <img class="corner-logo" src="{{ asset('assets/images/tomonia-logo-vecto-lueurext.png') }}" alt="" aria-hidden="true">
        <div class="section-heading heading-light compact parcours-heading">
          <h2><span>{{ 'home.paths.title'|trans }}</span></h2>
          <p>{{ 'home.paths.intro'|trans }}</p>
          <span class="accent-line"></span>
        </div>
        <div class="paths-grid">
          <article class="path-card"><h3>▶ <em>Press Start</em></h3><h4>{{ 'home.paths.press.subtitle'|trans }}</h4><p>{{ 'home.paths.press.intro'|trans }}</p><ul><li>{{ 'home.paths.press.item1'|trans }}</li><li>{{ 'home.paths.press.item2'|trans }}</li><li>{{ 'home.paths.press.item3'|trans }}</li></ul><p class="duration">{{ 'home.paths.press.duration'|trans }}</p><img src="{{ asset('assets/images/parcours-press-start.png') }}" alt="{{ 'home.paths.press.image_alt'|trans }}"></article>
          <article class="path-card"><h3>▶ <em>Level Up</em></h3><h4>{{ 'home.paths.level.subtitle'|trans }}</h4><p>{{ 'home.paths.level.intro'|trans }}</p><ul><li>{{ 'home.paths.level.item1'|trans }}</li><li>{{ 'home.paths.level.item2'|trans }}</li><li>{{ 'home.paths.level.item3'|trans }}</li></ul><p class="duration">{{ 'home.paths.level.duration'|trans }}</p><img src="{{ asset('assets/images/parcours-level-up.png') }}" alt="{{ 'home.paths.level.image_alt'|trans }}"></article>
          <article class="path-card"><h3>▶ <em>Full Combo</em></h3><h4>{{ 'home.paths.full.subtitle'|trans }}</h4><p>{{ 'home.paths.full.intro'|trans }}</p><ul><li>{{ 'home.paths.full.item1'|trans }}</li><li>{{ 'home.paths.full.item2'|trans }}</li><li>{{ 'home.paths.full.item3'|trans }}</li></ul><p class="duration">{{ 'home.paths.full.duration'|trans }}</p><img src="{{ asset('assets/images/parcours-full-combo.png') }}" alt="{{ 'home.paths.full.image_alt'|trans }}"></article>
        </div>
      </div>
    </section>

    <!-- 08 — Ateliers -->
    <section class="section section-cream" id="ateliers">
      <div class="section-inner">
        <img class="corner-logo" src="{{ asset('assets/images/tomonia-logo-vecto_line.png') }}" alt="" aria-hidden="true">
        <div class="section-heading compact workshops-heading">
          <h2>{{ 'home.workshops.title'|trans }}</h2>
          <p class="kicker normal-case">{{ 'home.workshops.kicker'|trans }}</p>
          <span class="accent-line"></span>
        </div>
        <div class="workshops-grid">
          {% for workshop in 1..6 %}
            <article class="workshop-card"><div class="workshop-title"><span>0{{ workshop }} ·</span><h3>{{ ('home.workshops.' ~ workshop ~ '.title')|trans }}</h3></div><ul>{% for item in (('home.workshops.' ~ workshop ~ '.items')|trans)|split('|') %}<li>{{ item }}</li>{% endfor %}</ul></article>
          {% endfor %}
        </div>
      </div>
    </section>

    <!-- 09 — Contact -->
    <section class="section section-cream contact-section" id="contact">
      <div class="section-inner">
        <img class="corner-logo" src="{{ asset('assets/images/tomonia-logo-vecto_line.png') }}" alt="" aria-hidden="true">
        <div class="section-heading compact contact-heading">
          <h2>{{ 'home.contact.title'|trans }}</h2>
          <p class="kicker">{{ 'home.contact.kicker'|trans }}</p>
          <span class="accent-line"></span>
        </div>
        <div class="contact-grid">
          <div class="contact-intro">
            <div>
              <h3>{{ 'home.contact.intro_title'|trans }}</h3>
              <p>{{ 'home.contact.intro_1'|trans }}<br>{{ 'home.contact.intro_2'|trans }}</p>
            </div>
            <img src="{{ asset('assets/images/oiseau.svg') }}" alt="" aria-hidden="true">
          </div>
          {{ form_start(contactForm, {
            action: path(contactRoute) ~ '#contact',
            attr: {class: 'contact-form', id: 'contact-form', novalidate: 'novalidate'}
          }) }}
            {% if contactForm.vars.submitted and not contactForm.vars.valid %}
              <div class="form-alert" data-form-alert role="alert" tabindex="-1">
                <p>{{ 'home.contact.form_error'|trans }}</p>
                {{ form_errors(contactForm) }}
              </div>
            {% endif %}
            <div class="form-grid">
              <div class="form-field">
                {{ form_label(contactForm.name) }}
                {{ form_widget(contactForm.name, {attr: contactForm.name.vars.attr|merge({
                  'aria-describedby': 'contact_name_errors',
                  'aria-invalid': contactForm.name.vars.errors|length ? 'true' : 'false'
                })}) }}
                <div class="form-errors" id="contact_name_errors">{{ form_errors(contactForm.name) }}</div>
              </div>
              <div class="form-field">
                {{ form_label(contactForm.company) }}
                {{ form_widget(contactForm.company, {attr: contactForm.company.vars.attr|merge({
                  'aria-describedby': 'contact_company_errors',
                  'aria-invalid': contactForm.company.vars.errors|length ? 'true' : 'false'
                })}) }}
                <div class="form-errors" id="contact_company_errors">{{ form_errors(contactForm.company) }}</div>
              </div>
              <div class="form-field">
                {{ form_label(contactForm.email) }}
                {{ form_widget(contactForm.email, {attr: contactForm.email.vars.attr|merge({
                  'aria-describedby': 'contact_email_errors',
                  'aria-invalid': contactForm.email.vars.errors|length ? 'true' : 'false'
                })}) }}
                <div class="form-errors" id="contact_email_errors">{{ form_errors(contactForm.email) }}</div>
              </div>
              <div class="form-field">
                {{ form_label(contactForm.phone) }}
                {{ form_widget(contactForm.phone, {attr: contactForm.phone.vars.attr|merge({
                  'aria-describedby': 'contact_phone_errors',
                  'aria-invalid': contactForm.phone.vars.errors|length ? 'true' : 'false'
                })}) }}
                <div class="form-errors" id="contact_phone_errors">{{ form_errors(contactForm.phone) }}</div>
              </div>
              <div class="form-field full">
                {{ form_label(contactForm.message) }}
                {{ form_widget(contactForm.message, {attr: contactForm.message.vars.attr|merge({
                  'aria-describedby': 'contact_message_errors',
                  'aria-invalid': contactForm.message.vars.errors|length ? 'true' : 'false'
                })}) }}
                <div class="form-errors" id="contact_message_errors">{{ form_errors(contactForm.message) }}</div>
              </div>
              <div class="form-field consent full">
                {{ form_widget(contactForm.consent, {attr: contactForm.consent.vars.attr|merge({
                  'aria-describedby': 'contact_consent_errors',
                  'aria-invalid': contactForm.consent.vars.errors|length ? 'true' : 'false'
                })}) }}
                <div class="consent-copy">
                  {{ form_label(contactForm.consent) }}
                  <p class="privacy-hint">{{ 'home.contact.privacy_prefix'|trans }} <a href="{{ path(privacyRoute) }}">{{ 'home.contact.privacy_link'|trans }}</a> {{ 'home.contact.privacy_suffix'|trans }}</p>
                  <div class="form-errors" id="contact_consent_errors">{{ form_errors(contactForm.consent) }}</div>
                </div>
              </div>
              <div class="turnstile-field full">
                <div
                  class="cf-turnstile"
                  aria-label="{{ 'home.contact.turnstile'|trans }}"
                  data-sitekey="{{ turnstileSiteKey }}"
                  data-theme="light"
                  data-language="fr"
                ></div>
                <noscript>{{ 'home.contact.noscript'|trans }}</noscript>
              </div>
            </div>
            <div class="form-actions"><button class="button button-solid" type="submit">{{ 'home.contact.submit'|trans }}</button><span>{{ 'home.contact.required'|trans }}</span></div>
            {% for message in contactSuccessMessages %}
              <p class="form-status" id="form-status" data-form-status role="status" tabindex="-1">{{ message|trans }}</p>
            {% else %}
              <p class="form-status" id="form-status" aria-live="polite"></p>
            {% endfor %}
          {{ form_end(contactForm) }}
        </div>
      </div>
    </section>
  </main>

  {% include '_public_footer.html.twig' with {backToTop: true} %}

{% endblock %}

{% block javascripts %}
  {{ parent() }}
  <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
{% endblock %}