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

{% block title %}{{ 'marketing.review.form.page_title'|trans }}{% endblock %}

{% block meta %}
    <meta name="robots" content="noindex,nofollow,noarchive">
    <meta name="referrer" content="no-referrer">
{% endblock %}

{% block main %}
    <section data-review-invitation-page class="relative min-h-screen overflow-hidden bg-background pt-32 pb-16 md:pt-36 md:pb-20">
        <div class="absolute inset-x-0 top-0 h-28 bg-primary md:h-32"></div>
        <div class="pointer-events-none absolute inset-x-0 top-0 h-[30rem] bg-[radial-gradient(circle_at_top,rgba(173,156,118,0.12),transparent_64%)]"></div>

        <div class="relative z-10 mx-auto max-w-[1440px] px-4 md:px-16">
            <header class="mx-auto max-w-3xl text-center">
                <span class="font-label text-[11px] font-semibold uppercase tracking-[0.22em] text-secondary">
                    {{ 'marketing.review.form.verified_purchase'|trans }}
                </span>
                <h1 class="mt-4 font-display text-[34px] leading-[1.02] font-semibold [font-optical-sizing:auto] text-primary md:text-[48px]">
                    {{ 'marketing.review.form.heading'|trans }}
                </h1>
                <p class="mx-auto mt-4 max-w-2xl text-[15px] leading-7 text-primary/72">
                    {{ 'marketing.review.form.intro'|trans }}
                </p>
            </header>

            <div class="mx-auto mt-10 max-w-3xl border border-primary/10 bg-surface-container-low p-5 shadow-[0_20px_60px_rgba(51,38,28,0.06)] md:p-7">
                <div class="border border-primary/8 bg-white/70 p-5 md:p-7">
                    <twig:marketing:ProductReviewForm :token="token" />
                </div>
            </div>

            <p class="mt-8 text-center text-[13px]">
                <a
                    class="font-semibold text-primary/65 underline decoration-primary/25 underline-offset-4 transition hover:text-primary hover:decoration-primary"
                    href="{{ path('shop_review_policy') }}"
                >
                    {{ 'marketing.review.policy.link'|trans }}
                </a>
            </p>
        </div>
    </section>
{% endblock %}
