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

{% block title %}{{ 'woo.meta_title'|trans }} | Saúl Morales Pacheco{% endblock %}

{% block meta_description %}{{ 'woo.meta_description'|trans }}{% endblock %}

{% block body %}
    {# Navigation with language switcher #}
    {% include 'partials/_nav.html.twig' %}

    {# Hero Section #}
    <section class="woo-hero" id="hero">
        <div class="wrap">
            <h1 class="woo-hero__title">
                {{ 'woo.hero.title'|trans }}
            </h1>
            <p class="woo-hero__subtitle">
                {{ 'woo.hero.subtitle'|trans }}
            </p>
            <div class="woo-hero__cta">
                <a href="#form" class="btn btn--primary">
                    {{ 'woo.hero.cta'|trans }}
                </a>
            </div>
        </div>
    </section>

    {# Problems Section #}
    <section class="woo-problems" id="problems">
        <div class="wrap">
            <h2 class="woo-problems__title">
                {{ 'woo.problems.title'|trans }}
            </h2>
            <div class="woo-problems__grid">
                <div class="woo-problems__item">
                    <h3>☕ {{ 'woo.problems.billing'|trans }}</h3>
                    <p>{{ 'woo.problems.billing_desc'|trans }}</p>
                </div>
                <div class="woo-problems__item">
                    <h3>📦 {{ 'woo.problems.shipping'|trans }}</h3>
                    <p>{{ 'woo.problems.shipping_desc'|trans }}</p>
                </div>
                <div class="woo-problems__item">
                    <h3>💳 {{ 'woo.problems.payments'|trans }}</h3>
                    <p>{{ 'woo.problems.payments_desc'|trans }}</p>
                </div>
            </div>
        </div>
    </section>

    {# Solution Section #}
    <section class="woo-solution" id="solution">
        <div class="wrap">
            <h2 class="woo-solution__title">
                {{ 'woo.solution.title'|trans }}
            </h2>
            <p class="woo-solution__text">
                {{ 'woo.solution.text'|trans }}
            </p>
        </div>
    </section>

    {# Services Section #}
    <section class="woo-services" id="services">
        <div class="wrap">
            <h2 class="woo-services__title">
                {{ 'woo.services.title'|trans }}
            </h2>
            <div class="woo-services__grid">
                <div class="woo-services__item">
                    <h3>{{ 'woo.services.billing_title'|trans }}</h3>
                    <p>{{ 'woo.services.billing_desc'|trans }}</p>
                </div>
                <div class="woo-services__item">
                    <h3>{{ 'woo.services.shipping_title'|trans }}</h3>
                    <p>{{ 'woo.services.shipping_desc'|trans }}</p>
                </div>
                <div class="woo-services__item">
                    <h3>{{ 'woo.services.payments_title'|trans }}</h3>
                    <p>{{ 'woo.services.payments_desc'|trans }}</p>
                </div>
                <div class="woo-services__item">
                    <h3>{{ 'woo.services.custom_title'|trans }}</h3>
                    <p>{{ 'woo.services.custom_desc'|trans }}</p>
                </div>
            </div>
        </div>
    </section>

    {# Social Proof #}
    <section class="woo-proof" id="proof">
        <div class="wrap">
            <p class="woo-proof__text">
                🇨🇴 {{ 'woo.proof.text'|trans }}
            </p>
        </div>
    </section>

    {# Form Section #}
    <section class="woo-form-section" id="form">
        <div class="wrap">
            <h2 class="woo-form-section__title">
                {{ 'woo.form.title'|trans }}
            </h2>

            {# Form #}
            {{ form_start(woo_form, {
                'action': path('woocommerce_colombia_submit'),
                'attr': {
                    'id': 'woo-form',
                    'class': 'woo-form',
                    'novalidate': 'novalidate',
                    'data-error-validation': 'woo.form.error_validation'|trans,
                    'data-error-network': 'woo.form.error_generic'|trans
                }
            }) }}

            <div class="woo-form__grid">
                <div class="woo-form__group">
                    {{ form_label(woo_form.name, 'woo.form.name'|trans, {'attr': {'class': 'woo-form__label'}}) }}
                    {{ form_widget(woo_form.name, {'attr': {'class': 'woo-form__input', 'placeholder': 'woo.form.name_placeholder'|trans}}) }}
                </div>

                <div class="woo-form__group">
                    {{ form_label(woo_form.email, 'woo.form.email'|trans, {'attr': {'class': 'woo-form__label'}}) }}
                    {{ form_widget(woo_form.email, {'attr': {'class': 'woo-form__input', 'placeholder': 'woo.form.email_placeholder'|trans}}) }}
                </div>
            </div>

            <div class="woo-form__group">
                {{ form_label(woo_form.website, 'woo.form.website'|trans, {'attr': {'class': 'woo-form__label'}}) }}
                {{ form_widget(woo_form.website, {'attr': {'class': 'woo-form__input', 'placeholder': 'woo.form.website_placeholder'|trans}}) }}
            </div>

            <div class="woo-form__group">
                {{ form_label(woo_form.need, 'woo.form.need'|trans, {'attr': {'class': 'woo-form__label'}}) }}
                {{ form_widget(woo_form.need, {'attr': {'class': 'woo-form__select'}}) }}
            </div>

            {# Hidden reCAPTCHA token #}
            <input type="hidden" id="recaptcha-token-woo" name="token_recaptcha" value="">

            {# CSRF Token #}
            {{ form_row(woo_form._token) }}

            {# Message container #}
            <div id="woo-message" class="woo-form__message" style="display: none;"></div>

            {# Submit button #}
            <button type="submit" class="woo-form__submit btn btn--primary" id="woo-submit">
                <span class="woo-form__submit-text">{{ 'woo.form.submit'|trans }}</span>
                <span class="woo-form__submit-loader" style="display: none;">
                    {{ 'woo.form.sending'|trans }}
                </span>
            </button>

            {{ form_end(woo_form, {'render_rest': false}) }}
        </div>
    </section>

    {# Bottom CTA #}
    <section class="woo-cta-bottom" id="cta-bottom">
        <div class="wrap">
            <h2 class="woo-cta-bottom__title">
                {{ 'woo.cta_bottom.title'|trans }}
            </h2>
            <a href="#form" class="btn btn--primary">
                {{ 'woo.cta_bottom.button'|trans }}
            </a>
        </div>
    </section>

    {# Footer #}
    {% include 'partials/_footer.html.twig' %}
{% endblock %}