@php
  $benefits = [
      ['badge-percent', 'Tiered trade pricing', 'Base tier discount plus volume breaks on order quantity and order value — stacked automatically.'],
      ['landmark', 'Pay on account', 'Approved partners get net payment terms and a credit line. No card needed at checkout.'],
      ['zap', 'A trade desk built for speed', 'Quick-order grid, paste SKUs from a spreadsheet, saved lists and one-tap reorders.'],
      ['users-round', 'Your whole team', 'Invite buyers with spending limits, approvers and view-only staff.'],
      ['file-pen-line', 'Custom & branded work', 'Request quotes for branded canvas, custom sizes and full ring builds.'],
      ['headset', 'A dedicated account manager', 'One person who knows your gym, your events and your timelines.'],
  ];
@endphp
<x-layouts.website :seo="$seo" theme="ink">
<section class="relative overflow-hidden">
  <div class="pointer-events-none absolute inset-0 bg-[radial-gradient(60rem_30rem_at_85%_-10%,rgba(218,175,55,.18),transparent_60%),radial-gradient(40rem_24rem_at_-10%_30%,rgba(218,175,55,.08),transparent_60%)]"></div>
  <div class="home-shell relative grid gap-12 py-16 lg:grid-cols-[minmax(0,1fr)_520px] lg:py-24">
    {{-- Pitch --}}
    <div>
      <p class="home-eyebrow">TRA Trade Program</p>
      <h1 class="mt-4 text-4xl font-semibold leading-[1.05] tracking-tight sm:text-5xl lg:text-6xl">Equip more rings.<br><span class="text-[var(--color-gold)]">Pay trade prices.</span></h1>
      <p class="mt-5 max-w-xl text-lg text-white/65">Gyms, distributors, promoters and federations get partner pricing, account terms and a private trade desk to order in seconds.</p>
      <div class="mt-6 flex flex-wrap items-center gap-4 text-sm text-white/55">
        <span class="inline-flex items-center gap-2"><i data-lucide="clock" class="h-4 w-4 text-[var(--color-gold)]"></i> Reviewed within 1–2 business days</span>
        <a href="{{ route('account.login') }}" class="inline-flex items-center gap-1.5 font-medium text-white hover:text-[var(--color-gold)]">Already a partner? Sign in <i data-lucide="arrow-right" class="h-4 w-4"></i></a>
      </div>

      <div class="mt-10 grid gap-4 sm:grid-cols-2">
        @foreach($benefits as [$icon, $title, $body])
          <div class="rounded-2xl border border-white/10 bg-white/[0.03] p-5 transition hover:border-[var(--color-gold)]/40 hover:bg-white/[0.05]">
            <span class="flex h-10 w-10 items-center justify-center rounded-xl bg-[var(--color-gold)]/15 text-[var(--color-gold)]"><i data-lucide="{{ $icon }}" class="h-5 w-5"></i></span>
            <p class="mt-4 font-semibold">{{ $title }}</p>
            <p class="mt-1 text-sm text-white/55">{{ $body }}</p>
          </div>
        @endforeach
      </div>

      @if($tiers->isNotEmpty())
        <div class="mt-12">
          <p class="home-eyebrow">Partner tiers</p>
          <div class="mt-4 grid gap-3 {{ [1 => 'sm:grid-cols-1', 2 => 'sm:grid-cols-2'][$tiers->count()] ?? 'sm:grid-cols-3' }}">
            @foreach($tiers as $tier)
              <div class="relative overflow-hidden rounded-2xl border border-white/10 bg-gradient-to-br from-white/[0.07] to-transparent p-5">
                <span class="absolute inset-x-0 top-0 h-0.5" style="background: {{ $tier->color }}"></span>
                <p class="text-xs font-semibold uppercase tracking-[0.2em]" style="color: {{ $tier->color }}">{{ $tier->name }}</p>
                <p class="mt-2 text-3xl font-semibold">{{ $tier->discountLabel() }}<span class="text-sm font-normal text-white/45"> off</span></p>
                <p class="mt-1 text-xs text-white/45">{{ $tier->annual_spend_threshold_cents ? 'From AUD '.number_format($tier->annual_spend_threshold_cents / 100).' / year' : 'Starting tier' }}</p>
              </div>
            @endforeach
          </div>
          <p class="mt-3 text-xs text-white/40">Plus volume breaks on top. Tiers are reviewed on your trailing 12-month spend.</p>
        </div>
      @endif
    </div>

    {{-- Application --}}
    <div class="lg:sticky lg:top-24 lg:self-start">
      @if(! $applicationsOpen)
        <div class="tra-form">
          <span class="tra-form-glow" aria-hidden="true"></span>
          <span class="tra-form-badge"><i data-lucide="clock-3"></i></span>
          <h2 class="mt-4 text-xl font-semibold">Applications are paused</h2>
          <p class="tra-form-sub">{{ $closedMessage }}</p>
          <a href="/pages/contact" class="tra-form-next mt-5 w-full">Contact us <i data-lucide="arrow-right" class="h-4 w-4"></i></a>
        </div>
      @else
      <form method="post" action="{{ route('wholesale.apply.store') }}" class="tra-form" data-tra-apply>
        <span class="tra-form-glow" aria-hidden="true"></span>
        @csrf
        <header class="tra-form-head">
          <span class="tra-form-badge" aria-hidden="true"><i data-lucide="briefcase-business"></i></span>
          <div>
            <p class="tra-form-eyebrow">Trade account</p>
            <h2 class="tra-form-title">Apply for a trade account</h2>
            <p class="tra-form-sub">Takes about two minutes. Three short sections.</p>
          </div>
        </header>

        @if($errors->any())
          <div class="tra-form-alert" role="alert">
            <i data-lucide="circle-alert"></i>
            <div><strong>Please check the highlighted fields.</strong><ul class="mt-1 list-disc pl-5">@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div>
          </div>
        @endif

        <fieldset class="tra-apply-section">
          <legend class="tra-apply-legend"><span>1</span> Business</legend>
          <div class="grid gap-3 sm:grid-cols-2">
            <label class="block sm:col-span-2"><span class="tra-label">Registered company name *</span><input name="company_name" required maxlength="160" value="{{ old('company_name') }}" class="tra-input" autocomplete="organization"></label>
            <label class="block"><span class="tra-label">Trading name</span><input name="trading_name" maxlength="160" value="{{ old('trading_name') }}" class="tra-input"></label>
            <label class="block"><span class="tra-label">ABN / tax ID</span><input name="tax_id" maxlength="40" value="{{ old('tax_id') }}" class="tra-input"></label>
            <label class="block"><span class="tra-label">Business type *</span>
              <select name="business_type" required class="tra-input">
                <option value="">Choose…</option>
                @foreach($businessTypes as $value => $label)<option value="{{ $value }}" @selected(old('business_type') === $value)>{{ $label }}</option>@endforeach
              </select>
            </label>
            <label class="block"><span class="tra-label">Website</span><input name="website" type="url" maxlength="190" value="{{ old('website') }}" class="tra-input" placeholder="https://"></label>
          </div>
        </fieldset>

        <fieldset class="tra-apply-section">
          <legend class="tra-apply-legend"><span>2</span> Contact &amp; address</legend>
          <div class="grid gap-3 sm:grid-cols-2">
            <label class="block"><span class="tra-label">Your name *</span><input name="contact_name" required maxlength="120" value="{{ old('contact_name', $customer?->name) }}" class="tra-input" autocomplete="name"></label>
            <label class="block"><span class="tra-label">Phone *</span><input name="phone" required maxlength="40" value="{{ old('phone', $customer?->phone) }}" class="tra-input" autocomplete="tel"></label>
            <label class="block sm:col-span-2"><span class="tra-label">Work email *</span><input name="email" type="email" required maxlength="190" value="{{ old('email', $customer?->email) }}" class="tra-input" autocomplete="email"><span class="tra-field-help block">You'll use this email to sign in to the trade desk.</span></label>
            <label class="block sm:col-span-2"><span class="tra-label">Street address *</span><input name="address_line1" required maxlength="180" value="{{ old('address_line1') }}" class="tra-input" autocomplete="address-line1"></label>
            <label class="block sm:col-span-2"><span class="tra-label">Unit / building</span><input name="address_line2" maxlength="180" value="{{ old('address_line2') }}" class="tra-input" autocomplete="address-line2"></label>
            <label class="block"><span class="tra-label">City *</span><input name="city" required maxlength="120" value="{{ old('city') }}" class="tra-input" autocomplete="address-level2"></label>
            <label class="block"><span class="tra-label">State</span><input name="region" maxlength="120" value="{{ old('region') }}" class="tra-input" autocomplete="address-level1"></label>
            <label class="block"><span class="tra-label">Postcode *</span><input name="postal_code" required maxlength="20" value="{{ old('postal_code') }}" class="tra-input" autocomplete="postal-code"></label>
            <label class="block"><span class="tra-label">Country *</span><input name="country" required maxlength="2" value="{{ old('country', 'AU') }}" class="tra-input uppercase" autocomplete="country"></label>
          </div>
        </fieldset>

        <fieldset class="tra-apply-section">
          <legend class="tra-apply-legend"><span>3</span> What you need</legend>
          <label class="block"><span class="tra-label">Expected annual purchasing *</span>
            <select name="expected_volume" required class="tra-input">
              <option value="">Choose…</option>
              @foreach($volumes as $value => $label)<option value="{{ $value }}" @selected(old('expected_volume') === $value)>{{ $label }}</option>@endforeach
            </select>
          </label>
          <p class="tra-label mt-4">Interested in</p>
          <div class="tra-choices">
            @foreach($interests as $value => $label)
              <label class="tra-choice">
                <input type="checkbox" name="interests[]" value="{{ $value }}" @checked(in_array($value, old('interests', []), true))>
                <span><i data-lucide="check" aria-hidden="true"></i>{{ $label }}</span>
              </label>
            @endforeach
          </div>
          <label class="mt-3 block"><span class="tra-label">Anything else?</span><textarea name="message" rows="3" maxlength="2000" class="tra-input" placeholder="Number of locations, upcoming events, products you're after…">{{ old('message') }}</textarea></label>
        </fieldset>

        <label class="tra-check mt-6">
          <input type="checkbox" name="terms" value="1" required @checked(old('terms'))>
          <span class="tra-check-box" aria-hidden="true"><i data-lucide="check"></i></span>
          <span>I'm authorised to apply for this business and agree to the TRA trade terms, including credit checks for pay-on-account.</span>
        </label>

        <div class="tra-form-actions">
          <button class="tra-form-submit">
            <span class="tra-form-submit-label">Submit application</span>
            <i data-lucide="arrow-right" class="tra-form-submit-icon"></i>
          </button>
        </div>
        <ul class="tra-form-trust">
          <li><i data-lucide="lock-keyhole"></i> Private &amp; secure</li>
          <li><i data-lucide="clock-3"></i> Reviewed in 1–2 business days</li>
        </ul>
      </form>
      @endif
    </div>
  </div>
</section>

<section class="border-t border-white/10">
  <div class="home-shell grid gap-8 py-16 sm:grid-cols-3">
    @foreach([
      ['1', 'Apply', 'Tell us about your business. It takes two minutes.'],
      ['2', 'Get approved', 'We review within 1–2 business days and set your tier, terms and credit.'],
      ['3', 'Order on the trade desk', 'Sign in with your email and start ordering at partner prices.'],
    ] as [$step, $title, $body])
      <div>
        <span class="text-5xl font-semibold text-[var(--color-gold)]/30">0{{ $step }}</span>
        <p class="mt-2 text-lg font-semibold">{{ $title }}</p>
        <p class="mt-1 text-sm text-white/55">{{ $body }}</p>
      </div>
    @endforeach
  </div>
</section>
</x-layouts.website>