@extends('web.signup.layout')

@section('title', __('web.signup.startup.page_title'))
@section('page_title', __('web.signup.startup.page_title'))
@section('page_subtitle', __('web.signup.startup.page_subtitle'))

@push('styles')
<style>
    /* Team block (header + list + add button) */
    .team-block { margin-top: 4px; }
    .team-block__head {
        display: flex; align-items: center; justify-content: space-between;
        gap: 12px; margin-bottom: 12px;
    }
    .btn-add {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 9px 16px;
        background: #fff;
        border: 1px dashed var(--primary-500, #6366f1);
        border-radius: 999px;
        color: var(--primary-700, #4338ca);
        font-weight: 600;
        cursor: pointer;
        transition: background-color .15s ease, border-color .15s ease;
    }
    .btn-add:hover { background: var(--primary-50, #eef2ff); border-style: solid; }

    /* Empty state */
    .team-empty {
        display: flex; align-items: center; justify-content: center; gap: 10px;
        padding: 20px;
        background: var(--slate-50, #f8fafc);
        border: 1px dashed var(--slate-200, #e2e8f0);
        border-radius: var(--radius-md, 10px);
        font-size: 13px;
        color: var(--slate-500, #64748b);
    }
    .team-empty span:first-child { font-size: 22px; }

    /* List of compact member cards */
    .team-list {
        list-style: none; margin: 0; padding: 0;
        display: grid; gap: 10px;
    }
    .team-card {
        display: flex; align-items: center; gap: 12px;
        padding: 12px 14px;
        background: #fff;
        border: 1px solid var(--slate-200, #e2e8f0);
        border-radius: var(--radius-md, 10px);
        transition: border-color .15s ease, box-shadow .15s ease;
    }
    .team-card:hover {
        border-color: var(--primary-200, #c7d2fe);
        box-shadow: 0 4px 10px -4px rgba(99, 102, 241, .15);
    }
    .team-card__avatar {
        flex-shrink: 0;
        width: 38px; height: 38px;
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 13px; font-weight: 700;
        color: #fff;
        background: linear-gradient(135deg, var(--primary-600, #4f46e5), var(--primary-700, #4338ca));
        border-radius: 50%;
        letter-spacing: .02em;
    }
    .team-card__body { flex: 1; min-width: 0; }
    .team-card__name {
        display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
        font-size: 14px; font-weight: 600; color: var(--slate-900, #0f172a);
    }
    .team-card__founder {
        font-size: 10px; font-weight: 700; letter-spacing: .04em;
        padding: 2px 8px;
        background: rgba(244, 209, 126, .25);
        color: #8a5a00;
        border-radius: 999px;
    }
    .team-card__meta {
        margin-top: 2px;
        font-size: 12px; color: var(--slate-500, #64748b);
        display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    }
    .team-card__meta .dot-sep { color: var(--slate-300, #cbd5e1); }
    .team-card__actions { flex-shrink: 0; display: inline-flex; gap: 4px; }

    .icon-btn {
        display: inline-flex; align-items: center; justify-content: center;
        width: 32px; height: 32px;
        border-radius: 8px;
        background: transparent;
        border: 1px solid transparent;
        color: var(--slate-500, #64748b);
        cursor: pointer;
        transition: all .15s ease;
    }
    .icon-btn:hover {
        background: var(--slate-100, #f1f5f9);
        color: var(--slate-800, #1e293b);
        border-color: var(--slate-200, #e2e8f0);
    }
    .icon-btn--danger:hover {
        background: var(--error-50, #fef2f2);
        color: var(--error-600, #dc2626);
        border-color: var(--error-300, #fca5a5);
    }

    /* ── Modal ─────────────────────────────────────────────────────── */
    .modal-backdrop {
        position: fixed; inset: 0; z-index: 80;
        background: rgba(15, 23, 42, .55);
        backdrop-filter: blur(2px);
        display: flex; align-items: center; justify-content: center;
        padding: 20px;
    }
    .modal {
        width: min(100%, 560px);
        max-height: calc(100vh - 40px);
        overflow: auto;
        background: #fff;
        border-radius: var(--radius-xl, 20px);
        box-shadow: 0 30px 60px -20px rgba(15, 23, 42, .35), 0 12px 28px -8px rgba(15, 23, 42, .15);
        animation: modalIn .18s ease-out;
    }
    @keyframes modalIn {
        from { opacity: 0; transform: translateY(8px) scale(.98); }
        to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    .modal__head {
        display: flex; align-items: center; justify-content: space-between;
        gap: 12px;
        padding: 18px 22px;
        border-bottom: 1px solid var(--slate-100, #f1f5f9);
    }
    .modal__head h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        color: var(--slate-900, #0f172a);
    }
    .modal__body { padding: 18px 22px; }
    .modal__foot {
        display: flex; align-items: center; justify-content: flex-end;
        gap: 10px;
        padding: 14px 22px 20px;
        border-top: 1px solid var(--slate-100, #f1f5f9);
        background: var(--slate-50, #f8fafc);
        border-radius: 0 0 var(--radius-xl, 20px) var(--radius-xl, 20px);
    }
    .btn--ghost {
        background: transparent;
        color: var(--slate-700, #334155);
        border: 1px solid var(--slate-300, #cbd5e1);
    }
    .btn--ghost:hover:not(:disabled) {
        background: var(--slate-100, #f1f5f9);
        border-color: var(--slate-400, #94a3b8);
    }

    @media (max-width: 720px) {
        .team-block__head { flex-direction: column; align-items: stretch; }
        .modal__head { padding: 14px 16px; }
        .modal__body { padding: 14px 16px; }
        .modal__foot { padding: 12px 16px 16px; flex-direction: column-reverse; }
        .modal__foot .btn { width: 100%; }
    }

    /* ── Segmented-pill radio group ──────────────────────────────────────
       Used inside the team-member modal for "نوع التفرغ". The previous
       version rendered each option as a row with the native radio dot
       visible on the leading edge — operator feedback (2026-06-15)
       was that it read like an unstyled form, not a polished control.
       Reworked into a true segmented control: the two options sit
       inside a shared rounded track, the native radio is visually
       hidden (still keyboard- + screen-reader-accessible via the
       absolute-positioned input), and the selected pill fills with
       the brand color. Single CSS selector — `.radio-row:has(:checked)`
       — drives the visual state, no JS state needed. */
    .radio-group {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        padding: 4px;
        background: #f1f5f9;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
    }
    @media (max-width: 480px) {
        .radio-group { grid-template-columns: 1fr; }
    }
    .radio-row {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 40px;
        padding: 8px 14px;
        font-size: 13.5px;
        font-weight: 600;
        color: #475569;
        background: transparent;
        border-radius: 8px;
        cursor: pointer;
        transition: background-color .15s, color .15s, box-shadow .15s;
        user-select: none;
    }
    /* Hide the native radio without removing it from the a11y tree.
       The clickable surface is the entire `.radio-row` label. */
    .radio-row input[type="radio"] {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
        margin: 0;
    }
    .radio-row__label {
        line-height: 1.3;
        position: relative;
        z-index: 1;
    }
    .radio-row:hover { color: var(--primary-700, #5b21b6); }
    .radio-row:has(:checked) {
        background: #ffffff;
        color: var(--primary-700, #5b21b6);
        box-shadow: 0 1px 2px rgba(15, 23, 42, .06),
                    0 0 0 1px rgba(124, 58, 237, .35);
    }
    .radio-row:has(:focus-visible) {
        outline: 2px solid var(--primary-500, #8b5cf6);
        outline-offset: 2px;
    }
</style>
@endpush

@push('scripts')
<script>
    document.addEventListener('alpine:init', () => {
        // Local helper — used for default draft and reset. Defining it
        // *outside* the returned object avoids the classic "this isn't
        // bound during literal construction" trap that crashed init().
        // Shape after 2026-06-15 — 6 fields:
        //   name, position_option_id, commitment, country_id, linkedin,
        //   is_founder. (`is_founder` was removed on 2026-06-14 and
        //   restored 2026-06-15 per ops spec; the DB column was
        //   preserved throughout so old rows didn't need a backfill.)
        const blankMember = () => ({
            name: '',
            // `position` is a free-text string since 2026-06-17. The
            // legacy `position_option_id` slot is left out of the new
            // blank row; old rows from `old()` still get re-hydrated
            // below so a failed submission doesn't lose data.
            position: '',
            commitment: '',
            country_id: null,
            linkedin: '',
            is_founder: false,
        });

        Alpine.data('memberManager', (initial = [], commitmentLabels = {}, positionLabels = {}) => ({
            rows: Array.isArray(initial)
                ? initial.filter(r => r && (r.name || '').trim() !== '').map(r => ({
                    name: r.name ?? '',
                    // Re-hydrate position from the free-text column.
                    // Falls back to the old `position_label` field that
                    // pre-2026-06-17 rows might emit, so an `old()` payload
                    // from a half-broken legacy form doesn't lose data.
                    position: (r.position ?? r.position_label ?? '').toString(),
                    commitment: r.commitment ?? '',
                    country_id: r.country_id ? Number(r.country_id) : null,
                    linkedin: r.linkedin ?? '',
                    is_founder: !!r.is_founder,
                }))
                : [],
            // Server-supplied {code: localized_name} map for commitment chips.
            // Keeps Arabic strings out of this JS file and lets admins rename
            // commitment types from the dashboard without a deploy.
            commitmentLabels: commitmentLabels || {},
            // `positionLabels` parameter is kept on the signature so
            // existing callers don't need a deploy in lockstep, but it's
            // no longer consulted — `position` is rendered as free text
            // since 2026-06-17.
            positionLabels: positionLabels || {},
            commitmentLabel(code) {
                return code ? (this.commitmentLabels[code] ?? '') : '';
            },
            open: false,
            editingIdx: null,
            draft: blankMember(),
            // Track whether the LinkedIn field has been blurred / submitted
            // so we don't shout at the user the moment they open the modal.
            linkedinTouched: false,

            openAdd() {
                this.editingIdx = null;
                // 2026-06-15 (operator request): `is_founder` no
                // longer auto-checks for the first row. The user
                // explicitly ticks it for actual founders so the
                // flag carries real signal — previous auto-check
                // produced false positives where the entire first
                // row of staff got flagged as founders.
                this.draft = { ...blankMember(), is_founder: false };
                this.linkedinTouched = false;
                this.open = true;
                this.lockScroll(true);
            },

            openEdit(idx) {
                this.editingIdx = idx;
                this.draft = { ...this.rows[idx] };
                // When editing an existing row treat the LinkedIn value as
                // already-touched so any invalid stored URL surfaces an
                // error right away.
                this.linkedinTouched = true;
                this.open = true;
                this.lockScroll(true);
            },

            cancel() {
                this.open = false;
                this.editingIdx = null;
                this.draft = blankMember();
                this.linkedinTouched = false;
                this.lockScroll(false);
            },

            // Mirror of StartupSignupRequest::members.*.linkedin regex —
            // accepts https?:// + any linkedin.com subdomain + a non-empty
            // path. Keeps the client message in sync with the server one.
            // LinkedIn is required (server enforces); we ALSO disable Save
            // when empty so the user can't submit a half-typed URL.
            isLinkedinValid() {
                const v = (this.draft.linkedin || '').trim();
                if (v === '') return false;
                return /^https?:\/\/([a-z0-9-]+\.)?linkedin\.com\/.+/i.test(v);
            },

            canSave() {
                const name = (this.draft.name || '').trim();
                if (name === '') return false;
                if ((this.draft.position || '').trim() === '') return false;
                if (!this.draft.commitment) return false;
                if (!this.draft.country_id) return false;
                if (!this.isLinkedinValid()) return false;
                return true;
            },

            save() {
                if (!this.canSave()) return;
                const row = {
                    name: (this.draft.name || '').trim(),
                    position: (this.draft.position || '').trim(),
                    commitment: this.draft.commitment || '',
                    country_id: this.draft.country_id || null,
                    linkedin: (this.draft.linkedin || '').trim(),
                    is_founder: !!this.draft.is_founder,
                };
                if (this.editingIdx === null) {
                    this.rows.push(row);
                } else {
                    this.rows.splice(this.editingIdx, 1, row);
                }
                this.cancel();
            },

            remove(idx) {
                // Confirmation prompt is localized through a data attribute on
                // the containing team-block element so this script remains
                // string-free and bilingual without an extra Blade roundtrip.
                const root = document.querySelector('[data-team-confirm-delete]');
                const msg  = root ? root.getAttribute('data-team-confirm-delete') : '';
                if (msg && !confirm(msg)) return;
                this.rows.splice(idx, 1);
            },

            initialsOf(name) {
                const parts = (name || '').trim().split(/\s+/).filter(Boolean).slice(0, 2);
                if (parts.length === 0) return '—';
                return parts.map(p => p.charAt(0).toUpperCase()).join('');
            },

            lockScroll(on) {
                document.documentElement.style.overflow = on ? 'hidden' : '';
            },
        }));
    });
</script>
@endpush

@section('content')

@php
    // Completion tracking — drives the section-state pills only (does
    // not gate submission). Only LIST fields that are required, so an
    // optional section like 'round' (every field nullable since
    // 2026-06-17) has an empty list and instantly reads as "complete".
    //
    // 2026-06-17 section refactor (ops spec):
    //   • Contact moved UP — now sits directly under Company so the
    //     founder fills personal/contact info early.
    //   • `applicant_full_name` added to Contact tracking (it's the
    //     first input inside the section per spec).
    //   • Files split out of the old "introduce" block into its OWN
    //     dedicated section (logo / pitch deck / other files only),
    //     to declutter the Founding Team section.
    //   • Founding Team is now a pure team section (the modal-driven
    //     team-block) with no file inputs mixed in.
    $sections = [
        ['id' => 'company', 'fields' => ['name']],
        ['id' => 'contact', 'fields' => ['applicant_full_name', 'email', 'phone_number']],
        ['id' => 'files',   'fields' => []], // file inputs are required on the input itself; tracker stays empty
        ['id' => 'team',    'fields' => []], // member rows tracked client-side
        ['id' => 'idea',    'fields' => ['company_brief', 'problem', 'solution']],
        ['id' => 'sector',  'fields' => ['sector_option_id', 'product_stage_option_id', 'traction_option_id', 'revenue_model_option_id']],
        ['id' => 'round',   'fields' => []], // optional — see Section 5 comment block
        ['id' => 'extra',   'fields' => ['heard_about_option_id', 'accepted_privacy_policy']],
    ];
@endphp

<div
    x-data='signupForm(@json(["sections" => $sections]))'
    x-cloak
    class="signup-card"
>
    @if (session('status'))
        <div class="alert alert--success" role="status">
            <svg width="20" height="20"><use href="#icon-check-circle"/></svg>
            <div>{{ session('status') }}</div>
        </div>
    @endif

    @if ($errors->any())
        <div class="alert alert--error" role="alert">
            <svg width="20" height="20"><use href="#icon-alert"/></svg>
            <div>
                <strong>{{ __('web.signup.common.errors_heading') }}</strong>
                <ul>
                    @foreach ($errors->all() as $err)
                        <li>{{ $err }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    @endif

    <form method="post" action="{{ route('startup-signup.submit') }}" enctype="multipart/form-data" class="signup-card__body" novalidate x-ref="form">
        @csrf

        {{-- ════════════════════════════════════════════════════════ --}}
        {{-- Section 1 — Company info                                  --}}
        {{-- ════════════════════════════════════════════════════════ --}}
        <section class="section" :data-open="isOpen('company')" :data-active="isActive('company')" :data-state="isComplete('company') ? 'complete' : 'idle'">
            <button type="button" class="section__header" @click="toggle('company')" :aria-expanded="isOpen('company')">
                <span class="section__icon"><svg width="22" height="22"><use href="#icon-building"/></svg></span>
                <span class="section__heading">
                    <h2 class="section__title">{{ __('web.signup.startup.sections.company') }}</h2>
                    <p class="section__subtitle">{{ __('web.signup.startup.subtitles.company') }}</p>
                </span>
                <span class="section__chevron"><svg width="20" height="20"><use href="#icon-chevron-down"/></svg></span>
            </button>
            <div class="collapse"><div>
                <div class="section__body">
                    <div class="grid-2">
                        <div class="field">
                            <label class="label" for="name">{{ __('web.signup.startup.fields.name') }} <span class="required">*</span></label>
                            <input id="name" name="name" type="text" required maxlength="255"
                                   class="input @error('name') input--error @enderror"
                                   value="{{ old('name') }}" placeholder="{{ __('web.signup.startup.placeholders.name') }}">
                            @error('name')
                                <p class="help--error"><svg width="14" height="14"><use href="#icon-alert"/></svg>{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- 2026-06-17 column rename: form input + label
                             now refer to `name_en` (the company's
                             English-script name). The display label
                             pulls from web.signup.startup.fields.name_en
                             which renders "اسم الشركة بالإنجليزية" in
                             AR and "Company Name (English)" in EN.
                             The validation rule lives on `name_en` in
                             StartupSignupRequest; old('name_en') is
                             repopulated on a 422 redirect. --}}
                        <div class="field">
                            <label class="label" for="name_en">{{ __('web.signup.startup.fields.name_en') }}</label>
                            <input id="name_en" name="name_en" type="text" maxlength="255"
                                   class="input @error('name_en') input--error @enderror"
                                   value="{{ old('name_en') }}" placeholder="{{ __('web.signup.startup.placeholders.name_en') }}">
                            @error('name_en')
                                <p class="help--error"><svg width="14" height="14"><use href="#icon-alert"/></svg>{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div class="grid-2">
                        <div class="field">
                            <label class="label" for="website">{{ __('web.signup.startup.fields.website') }}</label>
                            <input id="website" name="website" type="url" inputmode="url" placeholder="{{ __('web.signup.startup.placeholders.website') }}"
                                   class="input @error('website') input--error @enderror"
                                   value="{{ old('website') }}">
                            @error('website')
                                <p class="help--error"><svg width="14" height="14"><use href="#icon-alert"/></svg>{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="field">
                            <label class="label" for="linkedin_url">{{ __('web.signup.startup.fields.linkedin_url') }} <span class="required">*</span></label>
                            <input id="linkedin_url" name="linkedin_url" type="url" inputmode="url" required
                                   placeholder="{{ __('web.signup.startup.placeholders.linkedin_url') }}"
                                   class="input @error('linkedin_url') input--error @enderror"
                                   value="{{ old('linkedin_url') }}">
                            @error('linkedin_url')
                                <p class="help--error"><svg width="14" height="14"><use href="#icon-alert"/></svg>{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div class="field">
                        <label class="label" for="country_id">{{ __('web.signup.startup.fields.country_id') }} <span class="required">*</span></label>
                        <select id="country_id" name="country_id" required
                                class="select @error('country_id') select--error @enderror">
                            <option value="">{{ __('web.signup.startup.placeholders.country_id') }}</option>
                            @foreach ($countryOptions as $id => $label)
                                <option value="{{ $id }}" @selected((string) old('country_id') === (string) $id)>{{ $label }}</option>
                            @endforeach
                        </select>
                        @error('country_id')
                            <p class="help--error"><svg width="14" height="14"><use href="#icon-alert"/></svg>{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div></div>
        </section>

        {{-- ════════════════════════════════════════════════════════ --}}
        {{-- Section 2 — Contact info (moved up 2026-06-17 per ops spec) --}}
        {{-- The Contact section now sits BEFORE the Files + Founding   --}}
        {{-- Team sections so the founder fills identity/contact early. --}}
        {{-- A new `applicant_full_name` input was added at the top of  --}}
        {{-- this section — it's the SOURCE of the first-name extraction--}}
        {{-- + Claude transliteration that fills first_name_en /        --}}
        {{-- first_name_ar via the queued LocalizeFirstNameJob.         --}}
        {{-- ════════════════════════════════════════════════════════ --}}
        <section class="section" :data-open="isOpen('contact')" :data-active="isActive('contact')" :data-state="isComplete('contact') ? 'complete' : 'idle'">
            <button type="button" class="section__header" @click="toggle('contact')" :aria-expanded="isOpen('contact')">
                <span class="section__icon"><svg width="22" height="22"><use href="#icon-phone"/></svg></span>
                <span class="section__heading">
                    <h2 class="section__title">{{ __('web.signup.startup.sections.contact') }}</h2>
                    <p class="section__subtitle">{{ __('web.signup.startup.subtitles.contact') }}</p>
                </span>
                <span class="section__chevron"><svg width="20" height="20"><use href="#icon-chevron-down"/></svg></span>
            </button>
            <div class="collapse"><div>
                <div class="section__body">
                    {{-- Applicant Full Name — REQUIRED. First input in
                         this section per spec. The signup controller
                         writes this verbatim to `startups.applicant_full_name`;
                         the FirstNameLocalizationObserver fires after
                         create() and queues a job that extracts the
                         first token and transliterates it into the
                         opposite script via Claude (NameTransliterator). --}}
                    <div class="field">
                        <label class="label" for="applicant_full_name">{{ __('web.signup.startup.fields.applicant_full_name') }} <span class="required">*</span></label>
                        <input id="applicant_full_name" name="applicant_full_name" type="text" required maxlength="255" autocomplete="name"
                               class="input @error('applicant_full_name') input--error @enderror"
                               value="{{ old('applicant_full_name') }}" placeholder="{{ __('web.signup.startup.placeholders.applicant_full_name') }}">
                        @error('applicant_full_name')
                            <p class="help--error"><svg width="14" height="14"><use href="#icon-alert"/></svg>{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="field">
                        <label class="label" for="email">{{ __('web.signup.startup.fields.email') }} <span class="required">*</span></label>
                        <input id="email" name="email" type="email" required autocomplete="email" maxlength="255"
                               class="input @error('email') input--error @enderror"
                               value="{{ old('email') }}" placeholder="{{ __('web.signup.startup.placeholders.email') }}">
                        @error('email')
                            <p class="help--error"><svg width="14" height="14"><use href="#icon-alert"/></svg>{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="field">
                        <label class="label" for="phone_number">{{ __('web.signup.startup.fields.phone_number') }} <span class="required">*</span></label>
                        <div class="phone-row">
                            @php
                                // Default to the first DB-seeded country.
                                $defaultCode = $countries[0]['code'] ?? '';
                                $oldCode     = old('country_code', $defaultCode);
                            @endphp
                            <select id="country_code" name="country_code" aria-label="{{ __('web.signup.common.phone.country_aria') }}" class="select">
                                @foreach ($countries as $c)
                                    <option value="{{ $c['code'] }}" @selected($oldCode === $c['code'])>{{ $c['code'] }}</option>
                                @endforeach
                            </select>
                            <input id="phone_number" name="phone_number" type="tel" required autocomplete="tel" inputmode="tel" maxlength="32"
                                   class="input @error('phone_number') input--error @enderror"
                                   value="{{ old('phone_number') }}" placeholder="{{ __('web.signup.startup.placeholders.phone_number') }}">
                        </div>
                        @error('phone_number')
                            <p class="help--error"><svg width="14" height="14"><use href="#icon-alert"/></svg>{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div></div>
        </section>

        {{-- ════════════════════════════════════════════════════════ --}}
        {{-- Section 3 — Files (NEW dedicated section, 2026-06-17)     --}}
        {{-- Logo + Pitch Deck + Other Files were moved here OUT of    --}}
        {{-- the Founding Team section so file management has its own  --}}
        {{-- clean, professional surface and doesn't get visually      --}}
        {{-- entangled with team CRUD operations.                      --}}
        {{-- ════════════════════════════════════════════════════════ --}}
        <section class="section" :data-open="isOpen('files')" :data-active="isActive('files')" :data-state="isComplete('files') ? 'complete' : 'idle'">
            <button type="button" class="section__header" @click="toggle('files')" :aria-expanded="isOpen('files')">
                <span class="section__icon"><svg width="22" height="22"><use href="#icon-folder"/></svg></span>
                <span class="section__heading">
                    <h2 class="section__title">{{ __('web.signup.startup.sections.files') }}</h2>
                    <p class="section__subtitle">{{ __('web.signup.startup.subtitles.files') }}</p>
                </span>
                <span class="section__chevron"><svg width="20" height="20"><use href="#icon-chevron-down"/></svg></span>
            </button>
            <div class="collapse"><div>
                <div class="section__body">
                    <div class="grid-2">
                        @php $bufferedFiles = $bufferedFiles ?? []; @endphp

                        <div class="field">
                            <label class="label" for="logo">{{ __('web.signup.startup.fields.logo') }} <span class="required">*</span></label>
                            {{-- When a previous submit buffered a logo, the input becomes
                                 optional client-side — the server will re-use the buffered
                                 file if the user leaves it blank. --}}
                            <input id="logo" name="logo" type="file"
                                   @if (!isset($bufferedFiles['logo'])) required @endif
                                   accept=".jpg,.jpeg,.png,.webp,.svg"
                                   class="input @error('logo') input--error @enderror">
                            <span class="hint">{{ __('web.signup.startup.hints.logo') }}</span>
                            @isset($bufferedFiles['logo'])
                                <p class="hint" style="color:var(--success-700);font-weight:600;margin:6px 0 2px;">
                                    <svg width="14" height="14" style="vertical-align:-2px;margin-inline-end:6px;"><use href="#icon-check-circle"/></svg>
                                    {{ __('web.signup.startup.hints.buffered_saved') }} <strong>{{ $bufferedFiles['logo']['original_name'] }}</strong>
                                </p>
                                <p class="hint" style="color:var(--slate-500);font-weight:400;margin:0;">
                                    {{ __('web.signup.startup.hints.buffered_replace') }}
                                </p>
                            @endisset
                            @error('logo')<p class="help--error"><svg width="14" height="14"><use href="#icon-alert"/></svg>{{ $message }}</p>@enderror
                        </div>

                        <div class="field">
                            <label class="label" for="pitch_deck">{{ __('web.signup.startup.fields.pitch_deck') }} <span class="required">*</span></label>
                            <input id="pitch_deck" name="pitch_deck" type="file"
                                   @if (!isset($bufferedFiles['pitch_deck'])) required @endif
                                   accept=".pdf,.ppt,.pptx"
                                   class="input @error('pitch_deck') input--error @enderror">
                            <span class="hint">{{ __('web.signup.startup.hints.pitch_deck') }}</span>
                            @isset($bufferedFiles['pitch_deck'])
                                <p class="hint" style="color:var(--success-700);font-weight:600;margin:6px 0 2px;">
                                    <svg width="14" height="14" style="vertical-align:-2px;margin-inline-end:6px;"><use href="#icon-check-circle"/></svg>
                                    {{ __('web.signup.startup.hints.buffered_saved') }} <strong>{{ $bufferedFiles['pitch_deck']['original_name'] }}</strong>
                                </p>
                                <p class="hint" style="color:var(--slate-500);font-weight:400;margin:0;">
                                    {{ __('web.signup.startup.hints.buffered_replace') }}
                                </p>
                            @endisset
                            @error('pitch_deck')<p class="help--error"><svg width="14" height="14"><use href="#icon-alert"/></svg>{{ $message }}</p>@enderror
                        </div>
                    </div>

                    <div class="field">
                        <label class="label" for="other_files">{{ __('web.signup.startup.fields.other_files') }}</label>
                        <input id="other_files" name="other_files[]" type="file" multiple
                               accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png"
                               class="input @error('other_files.*') input--error @enderror">
                        <span class="hint">{{ __('web.signup.startup.hints.other_files') }}</span>
                        @error('other_files.*')<p class="help--error"><svg width="14" height="14"><use href="#icon-alert"/></svg>{{ $message }}</p>@enderror
                    </div>
                </div>
            </div></div>
        </section>

        {{-- ════════════════════════════════════════════════════════ --}}
        {{-- Section 4 — Founding Team (slimmed 2026-06-17)            --}}
        {{-- File uploads were moved into the new Files section above; --}}
        {{-- this section now contains ONLY the team-member modal +    --}}
        {{-- chip list. id changed from 'introduce' to 'team' to match --}}
        {{-- its new single responsibility.                            --}}
        {{-- ════════════════════════════════════════════════════════ --}}
        <section class="section" :data-open="isOpen('team')" :data-active="isActive('team')" :data-state="isComplete('team') ? 'complete' : 'idle'">
            <button type="button" class="section__header" @click="toggle('team')" :aria-expanded="isOpen('team')">
                <span class="section__icon"><svg width="22" height="22"><use href="#icon-user"/></svg></span>
                <span class="section__heading">
                    <h2 class="section__title">{{ __('web.signup.startup.sections.team') }}</h2>
                    <p class="section__subtitle">{{ __('web.signup.startup.subtitles.team') }}</p>
                </span>
                <span class="section__chevron"><svg width="20" height="20"><use href="#icon-chevron-down"/></svg></span>
            </button>
            <div class="collapse"><div>
                <div class="section__body">
                    {{-- Team members — popup-driven (saves screen space) --}}
                    @php
                        // [code => name] map for the JS layer to render
                        // commitment labels on saved team-cards without
                        // hardcoded translations.
                        $commitmentLabels = collect($commitmentTypes)
                            ->mapWithKeys(fn ($c) => [$c['code'] => $c['name']])
                            ->all();
                        // {position_id => name} for the team-card "position" line.
                        $positionLabels = $memberPositions ?? [];
                    @endphp
                    <div class="team-block"
                         data-team-confirm-delete="{{ __('web.signup.startup.team.delete_confirm') }}"
                         x-data="memberManager(@js(old('members', [])), @js($commitmentLabels), @js($positionLabels))">
                        <div class="team-block__head">
                            <div>
                                <div class="label" style="margin:0;">{{ __('web.signup.startup.fields.team_members') }}</div>
                                <p class="hint" style="margin:2px 0 0;">{{ __('web.signup.startup.hints.team') }}</p>
                            </div>
                            <button type="button" class="btn-add" @click="openAdd()">
                                <span aria-hidden="true">＋</span> {{ __('web.signup.startup.buttons.add_member') }}
                            </button>
                        </div>

                        {{-- Empty state --}}
                        <div class="team-empty" x-show="rows.length === 0">
                            <span aria-hidden="true">👥</span>
                            <span>{{ __('web.signup.startup.team.empty') }}</span>
                        </div>

                        {{-- Member chips list --}}
                        <ul class="team-list" x-show="rows.length > 0" role="list">
                            <template x-for="(m, idx) in rows" :key="idx">
                                <li class="team-card">
                                    <div class="team-card__avatar" x-text="initialsOf(m.name)"></div>
                                    <div class="team-card__body">
                                        <div class="team-card__name">
                                            <span x-text="m.name || @js(__('web.signup.startup.team.no_name'))"></span>
                                            <span class="team-card__founder" x-show="m.is_founder" x-text="@js(__('web.signup.startup.team.founder_badge'))"></span>
                                        </div>
                                        <div class="team-card__meta">
                                            <span x-show="m.position" x-text="m.position"></span>
                                            <span class="dot-sep" x-show="m.position && m.commitment">·</span>
                                            <span x-show="m.commitment" x-text="commitmentLabel(m.commitment)"></span>
                                        </div>
                                    </div>
                                    <div class="team-card__actions">
                                        <button type="button" class="icon-btn" :title="@js(__('web.signup.startup.team.edit_aria'))" aria-label="{{ __('web.signup.startup.team.edit_aria') }}" @click="openEdit(idx)">
                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
                                                <path d="M12 20h9"></path>
                                                <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4z"></path>
                                            </svg>
                                        </button>
                                        <button type="button" class="icon-btn icon-btn--danger" :title="@js(__('web.signup.startup.team.delete_aria'))" aria-label="{{ __('web.signup.startup.team.delete_aria') }}" @click="remove(idx)">
                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
                                                <polyline points="3 6 5 6 21 6"></polyline>
                                                <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path>
                                                <path d="M10 11v6"></path>
                                                <path d="M14 11v6"></path>
                                                <path d="M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"></path>
                                            </svg>
                                        </button>
                                    </div>
                                </li>
                            </template>
                        </ul>

                        {{-- Hidden inputs that submit with the form.
                             `position` is now a free-text string (the
                             legacy `position_option_id` hidden input was
                             retired on 2026-06-17). --}}
                        <template x-for="(m, idx) in rows" :key="'h-'+idx">
                            <span>
                                <input type="hidden" :name="'members['+idx+'][name]'"        :value="m.name">
                                <input type="hidden" :name="'members['+idx+'][position]'"    :value="m.position">
                                <input type="hidden" :name="'members['+idx+'][commitment]'"  :value="m.commitment">
                                <input type="hidden" :name="'members['+idx+'][country_id]'"  :value="m.country_id">
                                <input type="hidden" :name="'members['+idx+'][linkedin]'"    :value="m.linkedin">
                                <input type="hidden" :name="'members['+idx+'][is_founder]'"  :value="m.is_founder ? 1 : 0">
                            </span>
                        </template>

                        {{-- ───── Modal ───── --}}
                        <div class="modal-backdrop" x-show="open" x-transition.opacity @keydown.escape.window="cancel()" x-cloak>
                            <div class="modal" role="dialog" aria-modal="true" aria-labelledby="member-modal-title" @click.outside="cancel()">
                                <div class="modal__head">
                                    <h3 id="member-modal-title" x-text="editingIdx === null ? @js(__('web.signup.startup.team.modal_add_title')) : @js(__('web.signup.startup.team.modal_edit_title'))"></h3>
                                    <button type="button" class="icon-btn" @click="cancel()" aria-label="{{ __('web.signup.startup.team.close_aria') }}">
                                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
                                            <line x1="18" y1="6" x2="6" y2="18"></line>
                                            <line x1="6" y1="6" x2="18" y2="18"></line>
                                        </svg>
                                    </button>
                                </div>
                                {{-- Modal body — 5 fields only per Item 3
                                     ops spec (2026-06-14). Short Bio +
                                     Founder flag were removed; Position
                                     became a `position` label dropdown;
                                     Nationality was added. --}}
                                <div class="modal__body">
                                    <div class="grid-2">
                                        <div class="field">
                                            <label class="label">{{ __('web.signup.startup.team.fields.name') }} <span class="required">*</span></label>
                                            <input type="text" class="input" x-model="draft.name" placeholder="{{ __('web.signup.startup.team.placeholders.name') }}">
                                        </div>
                                        <div class="field">
                                            {{-- Position — free-text input since 2026-06-17.
                                                 Founders type their actual title (e.g.
                                                 "Co-founder & Head of Growth", "Lead
                                                 Engineer") instead of picking from a
                                                 fixed catalog. The legacy select is gone;
                                                 same translation key carries the field
                                                 label. --}}
                                            <label class="label">{{ __('web.signup.startup.team.fields.position_option_id') }} <span class="required">*</span></label>
                                            <input type="text" class="input"
                                                   x-model="draft.position"
                                                   placeholder="{{ __('web.signup.startup.team.placeholders.position') }}"
                                                   maxlength="255">
                                        </div>
                                    </div>
                                    <div class="grid-2">
                                        <div class="field">
                                            <label class="label">{{ __('web.signup.startup.team.fields.commitment') }} <span class="required">*</span></label>
                                            {{-- Classic radio group — vertical-stacking
                                                 visible radios. The label wraps the input
                                                 so the whole row is clickable; the radio
                                                 dot uses the browser's native control with
                                                 brand-tinted accent-color. --}}
                                            <div class="radio-group" role="radiogroup" aria-label="{{ __('web.signup.startup.team.commitment_aria') }}">
                                                @foreach ($commitmentTypes as $ct)
                                                    <label class="radio-row">
                                                        <input type="radio" name="modal_commitment" value="{{ $ct['code'] }}" x-model="draft.commitment">
                                                        <span class="radio-row__label">{{ $ct['name'] }}</span>
                                                    </label>
                                                @endforeach
                                            </div>
                                        </div>
                                        <div class="field">
                                            <label class="label">{{ __('web.signup.startup.team.fields.country_id') }} <span class="required">*</span></label>
                                            <select class="select" x-model.number="draft.country_id">
                                                <option value="">{{ __('web.signup.startup.team.placeholders.country_id') }}</option>
                                                @foreach ($countryOptions as $id => $name)
                                                    <option value="{{ $id }}">{{ $name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    {{-- LinkedIn — client-side validation must match the
                                         server regex (StartupSignupRequest.php). Empty is
                                         allowed by the client (server rejects), but ANY
                                         filled value must be a linkedin.com URL. Error
                                         message + invalid input border show inline; the
                                         save button is disabled while invalid. --}}
                                    <div class="field">
                                        <label class="label">{{ __('web.signup.startup.team.fields.linkedin') }} <span class="required">*</span></label>
                                        <input type="url" class="input"
                                               :class="{ 'input--error': linkedinTouched && !isLinkedinValid() }"
                                               x-model="draft.linkedin"
                                               @blur="linkedinTouched = true"
                                               placeholder="{{ __('web.signup.startup.team.placeholders.linkedin') }}">
                                        <template x-if="linkedinTouched && !isLinkedinValid()">
                                            <p class="help--error">
                                                <svg width="14" height="14"><use href="#icon-alert"/></svg>
                                                {{ __('web.signup.startup.team.linkedin_error') }}
                                            </p>
                                        </template>
                                        <p class="hint" x-show="!linkedinTouched || isLinkedinValid()">
                                            {{ __('web.signup.startup.team.linkedin_hint') }}
                                        </p>
                                    </div>

                                    {{-- Founder toggle — restored 2026-06-15
                                         per ops spec. The DB column
                                         (startup_members.is_founder) and the
                                         admin Team table were always there;
                                         this re-exposes the field on the
                                         public signup modal so the founder
                                         flag is captured at submit time
                                         again. Defaults to true for the very
                                         first row (a startup must have at
                                         least one founder). --}}
                                    <div class="field field--toggle">
                                        <label class="choice">
                                            <input type="checkbox" x-model="draft.is_founder">
                                            <span class="choice__indicator"></span>
                                            <span class="choice__label">{{ __('web.signup.startup.team.fields.is_founder') }}</span>
                                        </label>
                                    </div>
                                </div>
                                <div class="modal__foot">
                                    <button type="button" class="btn btn--ghost" @click="cancel()">{{ __('web.signup.startup.team.modal_cancel') }}</button>
                                    <button type="button" class="btn btn--primary" @click="save()" :disabled="!canSave()">
                                        <span x-text="editingIdx === null ? @js(__('web.signup.startup.team.modal_save_add')) : @js(__('web.signup.startup.team.modal_save_edit'))"></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div></div>
        </section>

        {{-- ════════════════════════════════════════════════════════ --}}
        {{-- Section 5 — Idea / product                                --}}
        {{-- (Old Contact block at this position was moved up to       --}}
        {{-- Section 2 on 2026-06-17 per ops spec.)                    --}}
        {{-- ════════════════════════════════════════════════════════ --}}
        <section class="section" :data-open="isOpen('idea')" :data-active="isActive('idea')" :data-state="isComplete('idea') ? 'complete' : 'idle'">
            <button type="button" class="section__header" @click="toggle('idea')" :aria-expanded="isOpen('idea')">
                <span class="section__icon"><svg width="22" height="22"><use href="#icon-bulb"/></svg></span>
                <span class="section__heading">
                    <h2 class="section__title">{{ __('web.signup.startup.sections.idea') }}</h2>
                    <p class="section__subtitle">{{ __('web.signup.startup.subtitles.idea') }}</p>
                </span>
                <span class="section__chevron"><svg width="20" height="20"><use href="#icon-chevron-down"/></svg></span>
            </button>
            <div class="collapse"><div>
                <div class="section__body">
                    <div class="field">
                        <label class="label" for="company_brief">{{ __('web.signup.startup.fields.company_brief') }} <span class="required">*</span></label>
                        <textarea id="company_brief" name="company_brief" required maxlength="4000"
                                  class="textarea @error('company_brief') textarea--error @enderror"
                                  placeholder="{{ __('web.signup.startup.placeholders.company_brief') }}">{{ old('company_brief') }}</textarea>
                        @error('company_brief')
                            <p class="help--error"><svg width="14" height="14"><use href="#icon-alert"/></svg>{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="field">
                        <label class="label" for="problem">{{ __('web.signup.startup.fields.problem') }} <span class="required">*</span></label>
                        <textarea id="problem" name="problem" required maxlength="4000"
                                  class="textarea @error('problem') textarea--error @enderror"
                                  placeholder="{{ __('web.signup.startup.placeholders.problem') }}">{{ old('problem') }}</textarea>
                        @error('problem')
                            <p class="help--error"><svg width="14" height="14"><use href="#icon-alert"/></svg>{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="field">
                        <label class="label" for="solution">{{ __('web.signup.startup.fields.solution') }} <span class="required">*</span></label>
                        <textarea id="solution" name="solution" required maxlength="4000"
                                  class="textarea @error('solution') textarea--error @enderror"
                                  placeholder="{{ __('web.signup.startup.placeholders.solution') }}">{{ old('solution') }}</textarea>
                        @error('solution')
                            <p class="help--error"><svg width="14" height="14"><use href="#icon-alert"/></svg>{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="field">
                        <label class="label" for="compelling_factors">{{ __('web.signup.startup.fields.compelling_factors') }}</label>
                        <textarea id="compelling_factors" name="compelling_factors" maxlength="4000"
                                  class="textarea @error('compelling_factors') textarea--error @enderror"
                                  placeholder="{{ __('web.signup.startup.placeholders.compelling_factors') }}">{{ old('compelling_factors') }}</textarea>
                        @error('compelling_factors')
                            <p class="help--error"><svg width="14" height="14"><use href="#icon-alert"/></svg>{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div></div>
        </section>

        {{-- ════════════════════════════════════════════════════════ --}}
        {{-- Section 4 — Sector & stage                                --}}
        {{-- ════════════════════════════════════════════════════════ --}}
        <section class="section" :data-open="isOpen('sector')" :data-active="isActive('sector')" :data-state="isComplete('sector') ? 'complete' : 'idle'">
            <button type="button" class="section__header" @click="toggle('sector')" :aria-expanded="isOpen('sector')">
                <span class="section__icon"><svg width="22" height="22"><use href="#icon-tag"/></svg></span>
                <span class="section__heading">
                    <h2 class="section__title">{{ __('web.signup.startup.sections.sector') }}</h2>
                    <p class="section__subtitle">{{ __('web.signup.startup.subtitles.sector') }}</p>
                </span>
                <span class="section__chevron"><svg width="20" height="20"><use href="#icon-chevron-down"/></svg></span>
            </button>
            {{-- Field order locked 2026-06-14 per ops spec:
                 1. Sector
                 2. Product Stage
                 3. Traction
                 4. Revenue Model
                 5. Customer Focus
                 Round Type + Investment Stage live in the next section
                 (Investment Round Details). --}}
            <div class="collapse"><div>
                <div class="section__body">
                    <div class="grid-2">
                        <div class="field">
                            <label class="label" for="sector_option_id">{{ __('web.signup.startup.fields.sector_option_id') }} <span class="required">*</span></label>
                            <select id="sector_option_id" name="sector_option_id" required
                                    class="select @error('sector_option_id') select--error @enderror">
                                <option value="">{{ __('web.signup.startup.placeholders.sector_option_id') }}</option>
                                @foreach ($sectorOptions as $id => $label)
                                    <option value="{{ $id }}" @selected((string) old('sector_option_id') === (string) $id)>{{ $label }}</option>
                                @endforeach
                            </select>
                            @error('sector_option_id')
                                <p class="help--error"><svg width="14" height="14"><use href="#icon-alert"/></svg>{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="field">
                            <label class="label" for="product_stage_option_id">{{ __('web.signup.startup.fields.product_stage_option_id') }} <span class="required">*</span></label>
                            <select id="product_stage_option_id" name="product_stage_option_id" required
                                    class="select @error('product_stage_option_id') select--error @enderror">
                                <option value="">{{ __('web.signup.startup.placeholders.product_stage_option_id') }}</option>
                                @foreach ($productStages as $id => $label)
                                    <option value="{{ $id }}" @selected((string) old('product_stage_option_id') === (string) $id)>{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="grid-2">
                        <div class="field">
                            <label class="label" for="traction_option_id">{{ __('web.signup.startup.fields.traction_option_id') }} <span class="required">*</span></label>
                            <select id="traction_option_id" name="traction_option_id" required
                                    class="select @error('traction_option_id') select--error @enderror">
                                <option value="">{{ __('web.signup.startup.placeholders.traction_option_id') }}</option>
                                @foreach ($tractions as $id => $label)
                                    <option value="{{ $id }}" @selected((string) old('traction_option_id') === (string) $id)>{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="field">
                            <label class="label" for="revenue_model_option_id">{{ __('web.signup.startup.fields.revenue_model_option_id') }} <span class="required">*</span></label>
                            <select id="revenue_model_option_id" name="revenue_model_option_id" required
                                    class="select @error('revenue_model_option_id') select--error @enderror">
                                <option value="">{{ __('web.signup.startup.placeholders.revenue_model_option_id') }}</option>
                                @foreach ($revenueModels as $id => $label)
                                    <option value="{{ $id }}" @selected((string) old('revenue_model_option_id') === (string) $id)>{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="grid-2">
                        {{-- Customer Focus — added 2026-06-14. Optional on
                             the public form; admin can fill it later from
                             the inline section editor. --}}
                        <div class="field">
                            <label class="label" for="customer_focus_option_id">{{ __('web.signup.startup.fields.customer_focus_option_id') }}</label>
                            <select id="customer_focus_option_id" name="customer_focus_option_id"
                                    class="select @error('customer_focus_option_id') select--error @enderror">
                                <option value="">{{ __('web.signup.startup.placeholders.customer_focus_option_id') }}</option>
                                @foreach ($customerFocuses ?? [] as $id => $label)
                                    <option value="{{ $id }}" @selected((string) old('customer_focus_option_id') === (string) $id)>{{ $label }}</option>
                                @endforeach
                            </select>
                            @error('customer_focus_option_id')<p class="error-msg">{{ $message }}</p>@enderror
                        </div>
                    </div>
                </div>
            </div></div>
        </section>

        {{-- ════════════════════════════════════════════════════════ --}}
        {{-- Section 5 — Round numerics (optional)                     --}}
        {{-- ════════════════════════════════════════════════════════ --}}
        <section class="section" :data-open="isOpen('round')" :data-active="isActive('round')" :data-state="isComplete('round') ? 'complete' : 'idle'">
            <button type="button" class="section__header" @click="toggle('round')" :aria-expanded="isOpen('round')">
                <span class="section__icon"><svg width="22" height="22"><use href="#icon-trending"/></svg></span>
                <span class="section__heading">
                    <h2 class="section__title">{{ __('web.signup.startup.sections.round') }}</h2>
                    <p class="section__subtitle">{{ __('web.signup.startup.subtitles.round') }}</p>
                </span>
                <span class="section__chevron"><svg width="20" height="20"><use href="#icon-chevron-down"/></svg></span>
            </button>
            {{-- Field order locked 2026-06-14 per ops spec:
                 1. Round Type
                 2. Investment Stage
                 3. Asking Fund (SAR)
                 4. Minimum Ticket (SAR)
                 5. Offered Equity %
                 6. Total Raised (SAR)
                 7. Runway Months

                 2026-06-17: per ops spec — the whole section is now
                 OPTIONAL. The required asterisks + `required` HTML
                 attributes + backend `required` validation rules were
                 stripped from every field in this section so a founder
                 can submit a complete profile without filling any of
                 these numerics. The deal team fills them during DD.

                 Removed permanently (NOT just from this section):
                   • Current Valuation (SAR)        — `valuation_sar`
                   • Number of Previous Rounds      — `previous_round_count`
                 Both DB columns are already gone (2026-05-12 drop
                 migration). Post-money valuation is computed
                 server-side on save (see Startup::booted()).
                 `total_raised_sar` is the sole "what was raised"
                 signal kept on the form. --}}
            <div class="collapse"><div>
                <div class="section__body">
                    <div class="grid-2">
                        <div class="field">
                            <label class="label" for="round_type_option_id">{{ __('web.signup.startup.fields.round_type_option_id') }}</label>
                            <select id="round_type_option_id" name="round_type_option_id"
                                    class="select @error('round_type_option_id') select--error @enderror">
                                <option value="">{{ __('web.signup.startup.placeholders.round_type_option_id') }}</option>
                                @foreach ($roundTypes as $id => $label)
                                    <option value="{{ $id }}" @selected((string) old('round_type_option_id') === (string) $id)>{{ $label }}</option>
                                @endforeach
                            </select>
                            @error('round_type_option_id')
                                <p class="help--error"><svg width="14" height="14"><use href="#icon-alert"/></svg>{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="field">
                            <label class="label" for="investment_stage_option_id">{{ __('web.signup.startup.fields.investment_stage_option_id') }}</label>
                            <select id="investment_stage_option_id" name="investment_stage_option_id"
                                    class="select @error('investment_stage_option_id') select--error @enderror">
                                <option value="">{{ __('web.signup.startup.placeholders.investment_stage_option_id') }}</option>
                                @foreach ($investmentStages as $id => $label)
                                    <option value="{{ $id }}" @selected((string) old('investment_stage_option_id') === (string) $id)>{{ $label }}</option>
                                @endforeach
                            </select>
                            @error('investment_stage_option_id')
                                <p class="help--error"><svg width="14" height="14"><use href="#icon-alert"/></svg>{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div class="grid-2">
                        <div class="field">
                            <label class="label" for="asking_fund_sar">{{ __('web.signup.startup.fields.asking_fund_sar') }}</label>
                            <input id="asking_fund_sar" name="asking_fund_sar" type="number" min="0" step="0.01"
                                   class="input @error('asking_fund_sar') input--error @enderror"
                                   value="{{ old('asking_fund_sar') }}" placeholder="{{ __('web.signup.startup.placeholders.asking_fund_sar') }}">
                            @error('asking_fund_sar')
                                <p class="help--error"><svg width="14" height="14"><use href="#icon-alert"/></svg>{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="field">
                            <label class="label" for="min_ticket_size_sar">{{ __('web.signup.startup.fields.min_ticket_size_sar') }}</label>
                            <input id="min_ticket_size_sar" name="min_ticket_size_sar" type="number" min="0" step="0.01"
                                   class="input @error('min_ticket_size_sar') input--error @enderror"
                                   value="{{ old('min_ticket_size_sar') }}" placeholder="{{ __('web.signup.startup.placeholders.min_ticket_size_sar') }}">
                            @error('min_ticket_size_sar')
                                <p class="help--error"><svg width="14" height="14"><use href="#icon-alert"/></svg>{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div class="grid-2">
                        <div class="field">
                            <label class="label" for="offered_equity_pct">{{ __('web.signup.startup.fields.offered_equity_pct') }}</label>
                            <input id="offered_equity_pct" name="offered_equity_pct" type="number" min="0" max="100" step="0.01"
                                   class="input @error('offered_equity_pct') input--error @enderror"
                                   value="{{ old('offered_equity_pct') }}" placeholder="{{ __('web.signup.startup.placeholders.offered_equity_pct') }}">
                            @error('offered_equity_pct')
                                <p class="help--error"><svg width="14" height="14"><use href="#icon-alert"/></svg>{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="field">
                            <label class="label" for="total_raised_sar">{{ __('web.signup.startup.fields.total_raised_sar') }}</label>
                            <input id="total_raised_sar" name="total_raised_sar" type="number" min="0" step="0.01"
                                   class="input @error('total_raised_sar') input--error @enderror"
                                   value="{{ old('total_raised_sar') }}" placeholder="{{ __('web.signup.startup.placeholders.total_raised_sar') }}">
                            @error('total_raised_sar')
                                <p class="help--error"><svg width="14" height="14"><use href="#icon-alert"/></svg>{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div class="grid-2">
                        <div class="field">
                            <label class="label" for="runway_months">{{ __('web.signup.startup.fields.runway_months') }}</label>
                            <input id="runway_months" name="runway_months" type="number" min="0" max="240" step="1"
                                   class="input @error('runway_months') input--error @enderror"
                                   value="{{ old('runway_months') }}">
                        </div>
                    </div>
                </div>
            </div></div>
        </section>

        {{-- ════════════════════════════════════════════════════════ --}}
        {{-- Section 6 — Extra & consent                               --}}
        {{-- ════════════════════════════════════════════════════════ --}}
        <section class="section" :data-open="isOpen('extra')" :data-active="isActive('extra')" :data-state="isComplete('extra') ? 'complete' : 'idle'">
            <button type="button" class="section__header" @click="toggle('extra')" :aria-expanded="isOpen('extra')">
                <span class="section__icon"><svg width="22" height="22"><use href="#icon-info"/></svg></span>
                <span class="section__heading">
                    <h2 class="section__title">{{ __('web.signup.startup.sections.extra') }}</h2>
                    <p class="section__subtitle">{{ __('web.signup.startup.subtitles.extra') }}</p>
                </span>
                <span class="section__chevron"><svg width="20" height="20"><use href="#icon-chevron-down"/></svg></span>
            </button>
            <div class="collapse"><div>
                <div class="section__body">
                    <div class="field">
                        <label class="label" for="heard_about_option_id">{{ __('web.signup.startup.fields.heard_about_option_id') }} <span class="required">*</span></label>
                        <select id="heard_about_option_id" name="heard_about_option_id" required
                                class="select @error('heard_about_option_id') select--error @enderror">
                            <option value="">{{ __('web.signup.startup.placeholders.heard_about_option_id') }}</option>
                            @foreach ($heardAboutOptions as $id => $label)
                                <option value="{{ $id }}" @selected((string) old('heard_about_option_id') === (string) $id)>{{ $label }}</option>
                            @endforeach
                        </select>
                        @error('heard_about_option_id')
                            <p class="help--error"><svg width="14" height="14"><use href="#icon-alert"/></svg>{{ $message }}</p>
                        @enderror
                    </div>

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

        {{-- Privacy-policy consent --}}
        <div style="padding: 0 8px;">
            @include('web.signup.partials.privacy-consent')
        </div>

        {{-- Submit --}}
        <div class="actions">
            <span class="actions__hint">
                <svg width="16" height="16"><use href="#icon-shield"/></svg>
                {{ __('web.signup.common.secure_data') }}
            </span>
            <button type="submit" class="btn btn--primary" :disabled="submitting">
                <template x-if="!submitting"><span>{{ __('web.signup.startup.buttons.submit') }}</span></template>
                <template x-if="submitting">
                    <span style="display:inline-flex;align-items:center;gap:8px">
                        <span class="spinner"></span> {{ __('web.signup.startup.buttons.submitting') }}
                    </span>
                </template>
            </button>
        </div>
    </form>
</div>

@endsection