@extends('layouts.app')

@section('title', 'Próximamente — Fermenty')

@push('head')
    <meta name="description" content="Déjanos tu email y te avisamos cuando lancemos Fermenty en móvil.">
@endpush

@section('content')

<div class="row justify-content-center">
    <div class="col-12 col-md-8 col-lg-6">

        <div class="newsletter-page text-center py-5">

            {{-- Logo grande --}}
            <div class="newsletter-logo mb-4">
                <svg width="72" height="72" viewBox="0 0 72 72" fill="none">
                    <rect x="16" y="22" width="40" height="38" rx="12" fill="#E8621A" opacity="0.9"/>
                    <rect x="20" y="14" width="32" height="12" rx="6" fill="#fff" opacity="0.85"/>
                    <ellipse cx="36" cy="40" rx="12" ry="9" fill="#4A9B2F" opacity="0.9"/>
                    <path d="M28 22 Q36 10 44 22" stroke="#4A9B2F" stroke-width="3" fill="none" stroke-linecap="round"/>
                </svg>
            </div>

            <h1 class="newsletter-page-title">Fermenty</h1>
            <p class="newsletter-page-subtitle">Guía de fermentos caseros</p>

            <div class="newsletter-coming-badge mb-4">
                🚀 Próximamente en móvil
            </div>

            <p class="newsletter-page-text">
                Estamos preparando la app para iOS y Android.<br>
                Déjanos tu email y serás el primero en saberlo —<br>
                con un <strong>precio especial de lanzamiento</strong>.
            </p>

            {{-- Formulario --}}
            @if(session('newsletter_success'))
                <div class="newsletter-success-box">
                    <div style="font-size: 2rem; margin-bottom: 0.5rem;">🎉</div>
                    <div class="newsletter-success-title">¡Apuntado!</div>
                    <div class="newsletter-success-text">
                        Revisa tu email para confirmar la suscripción.<br>
                        Te avisaremos en cuanto lancemos.
                    </div>
                </div>
            @else
                <form method="POST" action="{{ route('newsletter.subscribe') }}"
                      class="fermenty-form newsletter-form-page">
                    @csrf

                    <div class="mb-3">
                        <input type="text"
                               name="name"
                               class="form-control text-center @error('name') is-invalid @enderror"
                               placeholder="Tu nombre (opcional)"
                               value="{{ old('name') }}">
                        @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <input type="email"
                               name="email"
                               class="form-control text-center @error('email') is-invalid @enderror"
                               placeholder="tu@email.com"
                               value="{{ old('email') }}"
                               required>
                        @error('email')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <button type="submit" class="btn btn-fermenty-orange w-100">
                        Avisarme del lanzamiento
                    </button>

                    <p class="newsletter-form-legal mt-3">
                        Sin spam. Solo te avisamos cuando lancemos.<br>
                        Puedes darte de baja en cualquier momento.
                        <a href="{{ route('privacidad') }}" class="auth-link">Privacidad</a>
                    </p>

                </form>
            @endif

            {{-- Features preview --}}
            <div class="newsletter-features mt-5">
                <div class="newsletter-feature">
                    <span class="newsletter-feature-icon">📋</span>
                    <span>Guías paso a paso</span>
                </div>
                <div class="newsletter-feature">
                    <span class="newsletter-feature-icon">⏰</span>
                    <span>Recordatorios</span>
                </div>
                <div class="newsletter-feature">
                    <span class="newsletter-feature-icon">📊</span>
                    <span>Seguimiento diario</span>
                </div>
                <div class="newsletter-feature">
                    <span class="newsletter-feature-icon">👥</span>
                    <span>Comunidad</span>
                </div>
            </div>

            <div class="mt-5">
                <a href="{{ route('home') }}" class="btn-back">
                    ← Volver al inicio
                </a>
            </div>

        </div>
    </div>
</div>

@endsection