@extends('layouts.web')

@section('seo')
<x-seo title="Contacto" description="Escríbenos: dudas, sugerencias o colaboraciones. Te respondemos desde la bodega de Fermenty." />
@endsection

@push('head')
<link rel="stylesheet" href="{{ asset_v('landing/pages/contacto.css') }}">
@endpush

@php($esScale = request()->query('plan') === 'scale')

@section('content')
<section class="section--tight" style="padding-top:48px;padding-bottom:0">
  <div class="wrap">
    {{-- Quien llega desde el bloque de obradores no viene con una duda
         genérica: viene a hablar de producción (bloque H del briefing). El
         texto no promete nada nuevo — es el mismo que ya dice /pro. --}}
    @if($esScale)
      <div class="section-head reveal">
        <p class="eyebrow">Obradores pequeños</p>
        <h1>Hablemos de tu obrador</h1>
        <p class="lede">Trazabilidad con mediciones de verdad, stock y lotes de compra, y tus recetas protegidas. Se está construyendo con los primeros obradores que lo usen, así que lo primero es escucharte: cuéntanos qué haces y cómo lo llevas hoy.</p>
      </div>
    @else
      <div class="section-head reveal">
        <p class="eyebrow">Contacto</p>
        <h1>Hablemos de fermentación</h1>
        <p class="lede">¿Dudas, ideas o colaboraciones? Escríbenos y te respondemos desde la bodega.</p>
      </div>
    @endif
  </div>
</section>

<section class="section" id="form" style="padding-top:22px;">
  <div class="wrap">
    <div class="contact-grid">
      {{-- Info / brand side --}}
      <div class="contact-info">
        <h2 style="font-family:'Comfortaa',sans-serif;margin:0 0 10px;">{{ config('legal.trademark.name') }}</h2>
        <p style="color:var(--ink-500);">Cuéntanos en qué andas fermentando. Leemos cada mensaje.</p>
        <p style="margin-top:18px;">
          <strong>Correo:</strong><br>
          <a href="mailto:{{ config('legal.emails.contact') }}">{{ config('legal.emails.contact') }}</a>
        </p>
        <p style="margin-top:12px;color:var(--ink-400);font-size:14px;">
          {{ config('legal.company') }}<br>
          Soporte: <a href="mailto:{{ config('legal.emails.support') }}">{{ config('legal.emails.support') }}</a>
        </p>
      </div>

      {{-- Form side --}}
      <div>
        @if(session('contact_sent'))
          <div class="contact-ok">¡Gracias! Hemos recibido tu mensaje y te responderemos lo antes posible. 🫧</div>
        @endif

        @if($errors->any())
          <div class="contact-err">
            <ul style="margin:0;padding-left:18px;">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
          </div>
        @endif

        <form method="POST" action="{{ ruta('contacto.store') }}">
          @csrf
          {{-- Honeypot anti-spam (oculto) --}}
          <div style="position:absolute;left:-9999px;" aria-hidden="true">
            <label>No rellenar<input type="text" name="website" tabindex="-1" autocomplete="off"></label>
          </div>

          <div class="contact-field">
            <label for="c-name">Tu nombre</label>
            <input type="text" id="c-name" name="name" maxlength="120" required value="{{ old('name') }}">
          </div>
          <div class="contact-field">
            <label for="c-email">Tu correo</label>
            <input type="email" id="c-email" name="email" maxlength="255" required value="{{ old('email') }}">
          </div>
          <div class="contact-field">
            <label for="c-subject">Asunto (opcional)</label>
            <input type="text" id="c-subject" name="subject" maxlength="160" value="{{ old('subject', $esScale ? 'Obradores — quiero saber más' : '') }}">
          </div>
          <div class="contact-field">
            <label for="c-message">Mensaje</label>
            @if($esScale)
              <p style="font-size:13px;color:var(--ink-400);margin:-2px 0 6px">Qué fermentas, qué volumen mueves al mes y cómo llevas hoy la trazabilidad. Con eso podemos responderte algo útil y no un folleto.</p>
            @endif
            <textarea id="c-message" name="message" rows="6" maxlength="4000" required>{{ old('message') }}</textarea>
          </div>
          <button type="submit" class="btn btn--primary">Enviar mensaje</button>
          <p style="font-size:12.5px;color:var(--ink-400);margin-top:12px;">
            Al enviar aceptas nuestra <a href="{{ ruta('privacidad') }}">Política de Privacidad</a>.
          </p>
        </form>
      </div>
    </div>
  </div>
</section>
@endsection