@extends('web.signup.layout')

@section('title', __('web.demo_attendance.title') . ' — ' . $startup->display_name)
@section('page_title', $startup->display_name)
@section('page_subtitle', '')
@section('body_class', 'has-sticky-logo')

@php
    // Tiny locale-aware label resolver. The label_options carry both
    // `name_ar` and `name_en`; pick the one that matches the page locale
    // and fall back to whichever is non-empty.
    $optLabel = function ($opt) {
        if (! $opt) return null;
        $ar = (string) ($opt->name_ar ?? '');
        $en = (string) ($opt->name_en ?? '');
        return app()->getLocale() === 'ar'
            ? ($ar !== '' ? $ar : ($en !== '' ? $en : null))
            : ($en !== '' ? $en : ($ar !== '' ? $ar : null));
    };

    // Format numbers Saudi-style with thousand separators. Returns null
    // for empty/zero so the section can skip. The currency suffix is
    // pulled from the active locale so the EN render reads "12,500,000 SAR".
    $sar = function ($v) {
        if ($v === null || $v === '' || (float) $v <= 0) return null;
        return number_format((float) $v) . ' ' . __('web.demo_attendance.startup_detail.funding.currency');
    };
    $pct = function ($v) {
        if ($v === null || $v === '') return null;
        $f = (float) $v;
        if ($f <= 0) return null;
        return rtrim(rtrim(number_format($f, 2), '0'), '.') . '%';
    };

    $initial   = mb_strtoupper(mb_substr(trim($startup->display_name ?? '?'), 0, 1));
    $logoFile  = $startup->files->firstWhere('slot', 'logo');
    // File::url() returns a host-agnostic /storage/... path (public disk) or
    // the disk's configured URL — robust vs a hardcoded asset('storage/..').
    $logoUrl   = $logoFile ? $logoFile->url() : null;
    $pitch     = $application->files->firstWhere('slot', 'pitch_deck');
    // Demo attendance only ever exposes logo + pitch deck. The
    // previous `$otherFiles` collection (CV, signed docs, initial DD
    // attachments, etc.) is deliberately not derived anymore — the
    // file section below renders ONLY the pitch deck, gated solely on
    // `$pitch`.

    // Section visibility flags — used to decide whether to render an
    // empty wrapper or skip it entirely. Keeps the page short on a
    // half-completed startup record.
    $hasMarket    = filled($startup->market_size_tam) || filled($startup->market_size_sam) || filled($startup->market_size_som);
    $hasFunding   = $startup->asking_fund_sar || $startup->min_ticket_size_sar || $startup->offered_equity_pct
                   || $startup->runway_months || $startup->total_raised_sar || $startup->previous_funding_amount_sar
                   || $startup->valuation || $startup->cap_and_floor;
    $hasBusinessMeta = $startup->sector || $startup->traction || $startup->customerFocus
                   || $startup->revenueModel || $startup->productStage || $startup->investmentStage
                   || $startup->roundType || $startup->noteType || $startup->previouslyReceivedFunding;
    $hasGeo       = $startup->geographicFocuses->isNotEmpty();
    // `$hasContact` removed 2026-06-14 — per ops spec the demo
    // attendance page must not surface startup-level email or phone.
    // No render path currently references this derived flag; the
    // rendering it once gated was deleted earlier. Member-level
    // contacts in the team cards stay (those belong to individuals,
    // not the company).
@endphp

@push('styles')
<style>
    .signup-shell .signup-content { max-width: 920px; }

    /* Keep the layout's sticky Numu logo — hide ONLY the duplicated h1+p
       (the page-title + subtitle). The card below has its own logo and
       company-name heading, so the layout's would be redundant. */
    .signup-shell .signup-header h1,
    .signup-shell .signup-header p { display: none; }

    /* Top-bar (back link + logout). Stays out of the sticky logo's way. */
    .cmt-su-back {
        max-width: 920px; margin: 0 auto 14px;
        display:flex; justify-content:space-between; align-items:center;
        font-size:13px; flex-wrap: wrap; gap: 8px;
    }
    .cmt-su-back a {
        display:inline-flex; align-items:center; gap:6px;
        color: var(--slate-600); text-decoration:none; font-weight:700;
    }
    .cmt-su-back a:hover { color: var(--primary-700); }
    .cmt-su-back form { margin: 0; }
    .cmt-su-back form button { background:0; border:0; color: var(--slate-500); cursor:pointer; font: inherit; }
    .cmt-su-back form button:hover { color: var(--error-600); }

    /* ── Hero card with company identity ──────────────────────────── */
    .cmt-su-card {
        background:#fff; border:1px solid var(--slate-200); border-radius:20px;
        padding: 28px; max-width: 920px; margin: 0 auto 18px;
        box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 32px -16px rgba(15,23,42,.08);
    }
    .cmt-su-head {
        display:flex; gap:18px; align-items:flex-start;
        padding-bottom:22px; border-bottom: 1px solid var(--slate-100); margin-bottom: 4px;
    }
    .cmt-su-logo {
        width:80px; height:80px; border-radius:18px;
        background: linear-gradient(135deg, var(--primary-50) 0%, #fff 100%);
        color: var(--primary-700);
        display:flex; align-items:center; justify-content:center;
        font-weight:800; font-size:28px; flex-shrink:0;
        border:1px solid var(--primary-100); overflow:hidden;
        box-shadow: 0 4px 12px -6px rgba(79,70,229,.25);
    }
    .cmt-su-logo img { width:100%; height:100%; object-fit:cover; }
    .cmt-su-title { margin:0 0 6px; font-size:24px; font-weight:800; color: var(--slate-900); letter-spacing:-.02em; }
    .cmt-su-sub { margin:0; color: var(--slate-500); font-size:13.5px; }

    /* External-link chips — Website / LinkedIn / iOS / Android. */
    .cmt-su-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
    .cmt-su-link {
        display:inline-flex; align-items:center; gap:6px;
        padding: 6px 12px;
        font-size:12px; font-weight:700;
        background: var(--primary-50); color: var(--primary-700);
        border:1px solid var(--primary-100); border-radius:999px;
        text-decoration:none; transition: background-color .15s, border-color .15s, transform .12s;
    }
    .cmt-su-link:hover { background: var(--primary-100); border-color: var(--primary-300); transform: translateY(-1px); }
    .cmt-su-link svg { width: 12px; height: 12px; }

    /* ── Hero stat strip (asking / equity / runway / valuation) ──── */
    .cmt-su-stats {
        display: grid; gap: 12px;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        margin: 18px 0 4px;
    }
    .cmt-su-stat {
        background: linear-gradient(180deg, var(--primary-50) 0%, #fff 100%);
        border: 1px solid var(--primary-100); border-radius: 14px;
        padding: 14px 16px;
        transition: transform .12s, box-shadow .15s;
    }
    .cmt-su-stat:hover { transform: translateY(-1px); box-shadow: 0 4px 16px -8px rgba(79,70,229,.25); }
    .cmt-su-stat dt { font-size: 11px; font-weight: 700; color: var(--slate-500); letter-spacing: .05em; text-transform: uppercase; }
    .cmt-su-stat dd { margin: 6px 0 0; font-size: 17px; font-weight: 800; color: var(--slate-900); letter-spacing: -.01em; }

    /* ── Body sections ───────────────────────────────────────────── */
    .cmt-su-section { padding: 20px 0; border-bottom: 1px solid var(--slate-100); }
    .cmt-su-section:last-child { border-bottom: 0; padding-bottom: 4px; }
    .cmt-su-section h3 {
        margin:0 0 14px; font-size:13px; font-weight:800;
        color: var(--primary-700); text-transform: uppercase; letter-spacing:.08em;
        display: flex; align-items: center; gap: 8px;
        padding-inline-start: 12px;
        border-inline-start: 3px solid var(--primary-500);
        line-height: 1.2;
    }
    .cmt-su-section h3 svg { width: 14px; height: 14px; }
    .cmt-su-section p {
        margin:0; color: var(--slate-700); font-size:14.5px; line-height:1.85;
        white-space: pre-wrap; word-wrap: break-word;
    }
    /* "About the company" reads as the page lede — softer card framing,
       slightly larger body text. */
    .cmt-su-section--brief {
        background: var(--slate-50);
        border: 1px solid var(--slate-100); border-radius: 14px;
        padding: 18px 20px;
        margin: 18px 0;
    }
    .cmt-su-section--brief p { font-size: 15px; color: var(--slate-800); }

    /* Label-pill grid (sector, traction, customer focus, revenue, etc). */
    .cmt-su-pills { display: flex; flex-wrap: wrap; gap: 8px; }
    .cmt-su-pill {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 7px 13px;
        background: #fff; color: var(--slate-800);
        border: 1px solid var(--slate-200); border-radius: 999px;
        font-size: 13px; font-weight: 700;
        transition: border-color .12s, background-color .12s;
    }
    .cmt-su-pill:hover { border-color: var(--primary-200); background: var(--primary-50); }
    .cmt-su-pill__label {
        font-size: 10.5px; font-weight: 800; color: var(--primary-700);
        text-transform: uppercase; letter-spacing: .05em;
        padding-inline-end: 8px;
        border-inline-end: 1px solid var(--slate-200);
    }

    /* Two-column key-value grid (used for funding + market). */
    .cmt-su-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
    .cmt-su-kvp {
        background: var(--slate-50);
        border: 1px solid var(--slate-100);
        border-radius: 12px; padding: 12px 16px;
        transition: border-color .12s, background-color .12s;
    }
    .cmt-su-kvp:hover { border-color: var(--primary-200); background: #fff; }
    .cmt-su-kvp dt { color: var(--slate-500); font-size: 11.5px; font-weight: 700; margin: 0 0 4px; letter-spacing: .03em; text-transform: uppercase; }
    .cmt-su-kvp dd { color: var(--slate-900); font-size: 14.5px; font-weight: 800; margin: 0; word-break: break-word; letter-spacing: -.01em; }

    /* ── Team — structured, balanced cards ─────────────────────────
       Layout per card:
         ┌─ header strip ───────────────────────┐
         │  [56px avatar]   Name (bold)         │
         │                  Role · Country      │
         │                  [Founder][Position] │
         ├─ brief (optional, line-clamped) ─────┤
         ├─ footer (phone + socials) ───────────┘
       Footer is pinned to the bottom (mt-auto) so cards align in a
       grid even when briefs differ in length. */
    .cmt-su-members {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 14px;
    }
    .cmt-su-member {
        background: #fff;
        border: 1px solid var(--slate-200);
        border-radius: 16px;
        padding: 0;
        display: flex; flex-direction: column;
        overflow: hidden;
        transition: border-color .15s, box-shadow .15s, transform .12s;
    }
    .cmt-su-member:hover {
        border-color: var(--primary-200);
        box-shadow: 0 8px 24px -12px rgba(79,70,229,.22);
        transform: translateY(-2px);
    }

    .cmt-su-member__top {
        display: flex; align-items: flex-start; gap: 12px;
        padding: 16px 16px 12px;
        background: linear-gradient(180deg, var(--primary-50) 0%, #fff 100%);
        border-bottom: 1px solid var(--slate-100);
    }
    .cmt-su-member__avatar {
        flex-shrink: 0;
        width: 56px; height: 56px;
        border-radius: 999px;
        background: #fff; color: var(--primary-700);
        display: flex; align-items: center; justify-content: center;
        font-weight: 800; font-size: 18px;
        border: 2px solid var(--primary-200);
        box-shadow: 0 2px 8px -3px rgba(79,70,229,.25);
    }
    .cmt-su-member__title { flex: 1; min-width: 0; }
    .cmt-su-member__name {
        margin: 0; font-weight: 800; color: var(--slate-900);
        font-size: 15.5px; line-height: 1.3; letter-spacing: -.01em;
    }
    .cmt-su-member__role {
        margin: 4px 0 0; font-size: 12.5px; color: var(--slate-600);
        display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
    }
    .cmt-su-member__role .dot {
        display: inline-block; width: 3px; height: 3px; border-radius: 999px;
        background: var(--slate-300);
    }
    .cmt-su-member__badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
    .cmt-su-member__badge {
        padding: 3px 9px; border-radius: 999px;
        font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
        text-transform: uppercase;
    }
    .cmt-su-member__badge--founder {
        background: #fef3c7; color: #92400e;
        border: 1px solid #fde68a;
    }
    .cmt-su-member__badge--role {
        background: #fff; color: var(--slate-700);
        border: 1px solid var(--slate-200);
    }

    .cmt-su-member__brief {
        font-size: 13px; color: var(--slate-700);
        margin: 0;
        padding: 12px 16px;
        line-height: 1.65;
        white-space: pre-wrap;
        border-bottom: 1px solid var(--slate-100);
    }

    .cmt-su-member__foot {
        margin-top: auto;
        padding: 10px 16px 12px;
        display: flex; align-items: center; justify-content: space-between;
        gap: 10px;
        background: var(--slate-50);
    }
    .cmt-su-member__phone {
        display: inline-flex; align-items: center; gap: 6px;
        font-size: 12.5px; font-weight: 700;
        color: var(--slate-700); text-decoration: none;
        direction: ltr;
        min-width: 0; flex: 1;
    }
    .cmt-su-member__phone:hover { color: var(--primary-700); }
    .cmt-su-member__phone svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--slate-400); }
    .cmt-su-member__phone span {
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }

    .cmt-su-member__socials { display: flex; gap: 6px; flex-shrink: 0; }
    .cmt-su-member__socials a {
        display: inline-flex; align-items: center; justify-content: center;
        width: 32px; height: 32px;
        background: #fff; color: var(--slate-600);
        border: 1px solid var(--slate-200); border-radius: 9px;
        text-decoration: none;
        transition: background-color .15s, color .15s, border-color .15s, transform .12s;
    }
    .cmt-su-member__socials a:hover {
        background: var(--primary-50); color: var(--primary-700);
        border-color: var(--primary-200); transform: translateY(-1px);
    }
    .cmt-su-member__socials svg { width: 14px; height: 14px; }

    /* ── Pitch-deck button + other attachments ───────────────────── */
    .cmt-su-files { display: flex; flex-direction: column; gap: 8px; }
    .cmt-su-file {
        display: inline-flex; align-items: center; gap: 10px;
        max-width: 100%;
        padding: 12px 16px;
        background: var(--primary-50);
        color: var(--primary-800);
        border: 1px solid var(--primary-200);
        border-radius: 12px;
        text-decoration: none;
        font-weight: 700; font-size: 14px;
        transition: background-color .14s, border-color .14s, transform .08s, box-shadow .14s;
    }
    .cmt-su-file:hover {
        background: var(--primary-100);
        border-color: var(--primary-300);
        box-shadow: 0 4px 12px -6px rgba(79,70,229,.32);
    }
    /* `.cmt-su-file--secondary` rules removed 2026-06-11 — they
       styled the now-deleted non-pitch attachments loop. The pitch
       deck row uses the primary `.cmt-su-file` styling. */
    .cmt-su-file:active { transform: translateY(1px); }
    .cmt-su-file__icon {
        flex-shrink: 0;
        width: 38px; height: 38px;
        display: inline-flex; align-items: center; justify-content: center;
        background: #fff; border: 1px solid currentColor;
        border-radius: 9px;
    }
    .cmt-su-file__icon svg { width: 18px; height: 18px; }
    .cmt-su-file__body { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
    .cmt-su-file__name {
        font-weight: 700;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .cmt-su-file__meta {
        font-size: 11px; font-weight: 700;
        letter-spacing: .03em; text-transform: uppercase;
        opacity: .75;
    }
    .cmt-su-file__chev { flex-shrink: 0; }

    /* ── Mobile layout polish ─────────────────────────────────────── */
    @media (max-width: 640px) {
        .cmt-su-card { padding: 18px; border-radius: 16px; }
        .cmt-su-head { gap: 12px; padding-bottom: 16px; }
        .cmt-su-logo { width: 60px; height: 60px; font-size: 22px; border-radius: 14px; }
        .cmt-su-title { font-size: 19px; }
        .cmt-su-stats { gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .cmt-su-stat { padding: 10px 12px; }
        .cmt-su-stat dd { font-size: 14.5px; }
        .cmt-su-section { padding: 16px 0; }
        .cmt-su-section h3 { font-size: 12px; padding-inline-start: 10px; }
        .cmt-su-section p { font-size: 14px; line-height: 1.75; }
        .cmt-su-section--brief { padding: 14px 16px; margin: 14px 0; }
        .cmt-su-members { grid-template-columns: 1fr; }
        .cmt-su-member__top { padding: 14px 14px 10px; }
        .cmt-su-member__brief { padding: 10px 14px; }
        .cmt-su-member__foot { padding: 10px 14px; }
        .cmt-su-file__name { font-size: 13px; }
    }
    @media (max-width: 360px) {
        .cmt-su-stats { grid-template-columns: 1fr; }
    }

    /* The bottom-spacer rule is owned by the sticky-bar partial. */
</style>
@endpush

@section('content')
<div class="cmt-su-back">
    <a href="{{ route('demo-attendance.portal') }}">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
        {{ __('web.demo_attendance.startup_detail.back') }}
    </a>
    <form method="POST" action="{{ route('demo-attendance.logout') }}">
        @csrf
        <button type="submit">{{ __('web.demo_attendance.portal.logout') }}</button>
    </form>
</div>

<div class="cmt-su-card">
    {{-- ─── Identity ─── --}}
    <div class="cmt-su-head">
        <div class="cmt-su-logo">
            @if ($logoUrl)<img src="{{ $logoUrl }}" alt="">@else{{ $initial ?: '?' }}@endif
        </div>
        <div style="flex:1; min-width:0;">
            {{-- 2026-06-17: locale-aware. display_name picks the locale
                 primary; the OTHER locale's name surfaces as a subtitle
                 only when different. --}}
            @php $secondaryName = app()->getLocale() === 'ar' ? $startup->name_en : $startup->name; @endphp
            <h1 class="cmt-su-title">{{ $startup->display_name }}</h1>
            @if ($secondaryName && $secondaryName !== $startup->display_name)
                <p class="cmt-su-sub">{{ $secondaryName }}</p>
            @endif
            @if ($startup->country || $startup->city)
                <p class="cmt-su-sub" style="margin-top:4px;">
                    📍
                    @if ($startup->city){{ $optLabel($startup->city) }}@endif
                    @if ($startup->city && $startup->country) · @endif
                    @if ($startup->country){{ $optLabel($startup->country) }}@endif
                </p>
            @endif

            <div class="cmt-su-links">
                @if ($startup->website)
                    <a href="{{ $startup->website }}" target="_blank" rel="noopener" class="cmt-su-link">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
                        {{ __('web.demo_attendance.startup_detail.website') }}
                    </a>
                @endif
                @if ($startup->linkedin_url)
                    <a href="{{ $startup->linkedin_url }}" target="_blank" rel="noopener" class="cmt-su-link">
                        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 0h-14a5 5 0 0 0-5 5v14a5 5 0 0 0 5 5h14a5 5 0 0 0 5-5v-14a5 5 0 0 0-5-5zm-11 19h-3v-11h3v11zm-1.5-12.3a1.7 1.7 0 1 1 0-3.5 1.7 1.7 0 0 1 0 3.5zm13.5 12.3h-3v-5.6c0-3.4-4-3.1-4 0v5.6h-3v-11h3v1.8c1.4-2.6 7-2.8 7 2.5v6.7z"/></svg>
                        LinkedIn
                    </a>
                @endif
                @if ($startup->ios_url)
                    <a href="{{ $startup->ios_url }}" target="_blank" rel="noopener" class="cmt-su-link">🍎 iOS</a>
                @endif
                @if ($startup->android_url)
                    <a href="{{ $startup->android_url }}" target="_blank" rel="noopener" class="cmt-su-link">🤖 Android</a>
                @endif
            </div>
        </div>
    </div>

    {{-- "About the company" runs BEFORE the funding strip so a reader's
         first scroll is context, not numbers — the funding asks make
         more sense after the value proposition lands. --}}
    @if (filled($startup->startup_brief))
        <div class="cmt-su-section cmt-su-section--brief">
            <h3>
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
                {{ __('web.demo_attendance.startup_detail.sections.brief') }}
            </h3>
            <p>{{ $startup->startup_brief }}</p>
        </div>
    @endif

    {{-- ─── Hero stats strip ─── --}}
    @if ($hasFunding)
        <dl class="cmt-su-stats">
            @if ($asking = $sar($startup->asking_fund_sar))
                <div class="cmt-su-stat"><dt>{{ __('web.demo_attendance.startup_detail.funding.asking') }}</dt><dd>{{ $asking }}</dd></div>
            @endif
            @if ($equity = $pct($startup->offered_equity_pct))
                <div class="cmt-su-stat"><dt>{{ __('web.demo_attendance.startup_detail.funding.offered_eq') }}</dt><dd>{{ $equity }}</dd></div>
            @endif
            @if ($startup->runway_months)
                <div class="cmt-su-stat"><dt>{{ __('web.demo_attendance.startup_detail.funding.runway') }}</dt><dd>{{ __('web.demo_attendance.startup_detail.funding.months', ['count' => (int) $startup->runway_months]) }}</dd></div>
            @endif
            @if ($valLabel = $optLabel($startup->investmentStage))
                <div class="cmt-su-stat"><dt>{{ __('web.demo_attendance.startup_detail.business_meta.investment_stage') }}</dt><dd>{{ $valLabel }}</dd></div>
            @endif
        </dl>
    @endif

    @if (filled($startup->problem))
        <div class="cmt-su-section">
            <h3>
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                {{ __('web.demo_attendance.startup_detail.sections.problem') }}
            </h3>
            <p>{{ $startup->problem }}</p>
        </div>
    @endif

    @if (filled($startup->solution))
        <div class="cmt-su-section">
            <h3>
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                {{ __('web.demo_attendance.startup_detail.sections.solution') }}
            </h3>
            <p>{{ $startup->solution }}</p>
        </div>
    @endif

    @if (filled($startup->investment_opportunity))
        <div class="cmt-su-section">
            <h3>
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
                {{ __('web.demo_attendance.startup_detail.sections.opportunity') }}
            </h3>
            <p>{{ $startup->investment_opportunity }}</p>
        </div>
    @endif

    @if (filled($startup->business_model))
        <div class="cmt-su-section">
            <h3>{{ __('web.demo_attendance.startup_detail.sections.business_model') }}</h3>
            <p>{{ $startup->business_model }}</p>
        </div>
    @endif

    @if (filled($startup->kpi_targets))
        <div class="cmt-su-section">
            <h3>{{ __('web.demo_attendance.startup_detail.sections.kpi_targets') }}</h3>
            <p>{{ $startup->kpi_targets }}</p>
        </div>
    @endif

    {{-- ─── Business meta — sector / traction / customer / revenue ─── --}}
    @if ($hasBusinessMeta)
        <div class="cmt-su-section">
            <h3>{{ __('web.demo_attendance.startup_detail.sections.business_meta') }}</h3>
            <div class="cmt-su-pills">
                @php $pair = function ($label, $value) {
                    return $value === null ? null : ['label' => $label, 'value' => $value];
                }; @endphp
                @foreach (array_filter([
                    $pair(__('web.demo_attendance.startup_detail.business_meta.sector'),                $optLabel($startup->sector)),
                    $pair(__('web.demo_attendance.startup_detail.business_meta.product_stage'),         $optLabel($startup->productStage)),
                    $pair(__('web.demo_attendance.startup_detail.business_meta.investment_stage'),      $optLabel($startup->investmentStage)),
                    $pair(__('web.demo_attendance.startup_detail.business_meta.round_type'),            $optLabel($startup->roundType)),
                    // note_type row removed 2026-06-11 — the demo
                    // attendance portal must not surface any notes-
                    // or source-flavored row. Re-adding requires an
                    // ops decision.
                    $pair(__('web.demo_attendance.startup_detail.business_meta.traction'),              $optLabel($startup->traction)),
                    $pair(__('web.demo_attendance.startup_detail.business_meta.customer_focus'),        $optLabel($startup->customerFocus)),
                    $pair(__('web.demo_attendance.startup_detail.business_meta.revenue_model'),         $optLabel($startup->revenueModel)),
                    $pair(__('web.demo_attendance.startup_detail.business_meta.previous_funding'),      $optLabel($startup->previouslyReceivedFunding)),
                ]) as $row)
                    <span class="cmt-su-pill">
                        <span class="cmt-su-pill__label">{{ $row['label'] }}</span>
                        {{ $row['value'] }}
                    </span>
                @endforeach
            </div>
        </div>
    @endif

    {{-- ─── Geographic focuses ─── --}}
    @if ($hasGeo)
        <div class="cmt-su-section">
            <h3>{{ __('web.demo_attendance.startup_detail.sections.geographic_focus') }}</h3>
            <div class="cmt-su-pills">
                @foreach ($startup->geographicFocuses as $loc)
                    @if ($geoLabel = $optLabel($loc->option))
                        <span class="cmt-su-pill">📍 {{ $geoLabel }}</span>
                    @endif
                @endforeach
            </div>
        </div>
    @endif

    {{-- ─── Market size ─── --}}
    @if ($hasMarket)
        <div class="cmt-su-section">
            <h3>{{ __('web.demo_attendance.startup_detail.sections.market_size') }}</h3>
            <div class="cmt-su-grid">
                @if (filled($startup->market_size_tam))
                    <dl class="cmt-su-kvp"><dt>{{ __('web.demo_attendance.startup_detail.market.tam') }}</dt><dd>{{ $startup->market_size_tam }}</dd></dl>
                @endif
                @if (filled($startup->market_size_sam))
                    <dl class="cmt-su-kvp"><dt>{{ __('web.demo_attendance.startup_detail.market.sam') }}</dt><dd>{{ $startup->market_size_sam }}</dd></dl>
                @endif
                @if (filled($startup->market_size_som))
                    <dl class="cmt-su-kvp"><dt>{{ __('web.demo_attendance.startup_detail.market.som') }}</dt><dd>{{ $startup->market_size_som }}</dd></dl>
                @endif
            </div>
        </div>
    @endif

    {{-- ─── Funding details (full breakdown beyond the hero strip) ─── --}}
    @if ($hasFunding)
        <div class="cmt-su-section">
            <h3>{{ __('web.demo_attendance.startup_detail.sections.funding') }}</h3>
            <div class="cmt-su-grid">
                @if ($v = $sar($startup->asking_fund_sar))
                    <dl class="cmt-su-kvp"><dt>{{ __('web.demo_attendance.startup_detail.funding.asking') }}</dt><dd>{{ $v }}</dd></dl>
                @endif
                @if ($v = $sar($startup->min_ticket_size_sar))
                    <dl class="cmt-su-kvp"><dt>{{ __('web.demo_attendance.startup_detail.funding.min_ticket') }}</dt><dd>{{ $v }}</dd></dl>
                @endif
                @if ($v = $pct($startup->offered_equity_pct))
                    <dl class="cmt-su-kvp"><dt>{{ __('web.demo_attendance.startup_detail.funding.offered_eq') }}</dt><dd>{{ $v }}</dd></dl>
                @endif
                @if (filled($startup->valuation))
                    <dl class="cmt-su-kvp"><dt>{{ __('web.demo_attendance.startup_detail.funding.valuation') }}</dt><dd>{{ $startup->valuation }}</dd></dl>
                @endif
                @if ($startup->runway_months)
                    <dl class="cmt-su-kvp"><dt>{{ __('web.demo_attendance.startup_detail.funding.runway') }}</dt><dd>{{ __('web.demo_attendance.startup_detail.funding.months', ['count' => (int) $startup->runway_months]) }}</dd></dl>
                @endif
                @if ($v = $sar($startup->total_raised_sar))
                    <dl class="cmt-su-kvp"><dt>{{ __('web.demo_attendance.startup_detail.funding.total_raised') }}</dt><dd>{{ $v }}</dd></dl>
                @endif
                @if ($v = $sar($startup->previous_funding_amount_sar))
                    <dl class="cmt-su-kvp"><dt>{{ __('web.demo_attendance.startup_detail.funding.previous_funding') }}</dt><dd>{{ $v }}</dd></dl>
                @endif
                @if (filled($startup->cap_and_floor))
                    <dl class="cmt-su-kvp"><dt>{{ __('web.demo_attendance.startup_detail.funding.cap_floor') }}</dt><dd>{{ $startup->cap_and_floor }}</dd></dl>
                @endif
            </div>
        </div>
    @endif

    {{-- ─── Use of funds (breakdown) ─── --}}
    @php
        $fundUses = array_filter([
            __('web.demo_attendance.startup_detail.fund_use.operations')  => $sar($startup->fund_use_operation_sar ?? null),
            __('web.demo_attendance.startup_detail.fund_use.marketing')   => $sar($startup->fund_use_marketing_sar ?? null),
            __('web.demo_attendance.startup_detail.fund_use.development') => $sar($startup->fund_use_development_sar ?? null),
            __('web.demo_attendance.startup_detail.fund_use.salaries')    => $sar($startup->fund_use_salaries_sar ?? null),
        ]);
    @endphp
    @if (! empty($fundUses))
        <div class="cmt-su-section">
            <h3>{{ __('web.demo_attendance.startup_detail.sections.fund_use') }}</h3>
            <div class="cmt-su-grid">
                @foreach ($fundUses as $label => $value)
                    <dl class="cmt-su-kvp"><dt>{{ $label }}</dt><dd>{{ $value }}</dd></dl>
                @endforeach
            </div>
        </div>
    @endif

    {{-- ─── Team — full data per member ─── --}}
    @if ($startup->members->isNotEmpty())
        <div class="cmt-su-section">
            <h3>{{ __('web.demo_attendance.startup_detail.sections.team') }} <span style="color:#94a3b8; font-weight:600; text-transform:none; letter-spacing:0;">({{ $startup->members->count() }})</span></h3>
            <div class="cmt-su-members">
                @foreach ($startup->members as $member)
                    @php
                        $mInit = mb_strtoupper(mb_substr(trim((string) $member->name), 0, 1)) ?: '?';
                        $jobName  = $optLabel($member->jobType);
                        $country  = $optLabel($member->country);
                        $positions = $member->positions
                            ->map(fn ($p) => $optLabel($p->option))
                            ->filter()
                            ->values();
                        $roleLine = trim(implode(' · ', array_filter([$jobName, $country])));
                    @endphp
                    <article class="cmt-su-member">
                        {{-- ── Header: avatar + identity + badges ── --}}
                        <header class="cmt-su-member__top">
                            <div class="cmt-su-member__avatar">{{ $mInit }}</div>
                            <div class="cmt-su-member__title">
                                <h4 class="cmt-su-member__name">{{ $member->name }}</h4>
                                @if ($jobName || $country)
                                    <p class="cmt-su-member__role">
                                        @if ($jobName)<span>{{ $jobName }}</span>@endif
                                        @if ($jobName && $country)<span class="dot"></span>@endif
                                        @if ($country)<span>{{ $country }}</span>@endif
                                    </p>
                                @endif
                                @if ($member->is_founder || $positions->isNotEmpty())
                                    <div class="cmt-su-member__badges">
                                        @if ($member->is_founder)
                                            <span class="cmt-su-member__badge cmt-su-member__badge--founder">{{ __('web.demo_attendance.startup_detail.team.founder') }}</span>
                                        @endif
                                        @foreach ($positions as $pos)
                                            <span class="cmt-su-member__badge cmt-su-member__badge--role">{{ $pos }}</span>
                                        @endforeach
                                    </div>
                                @endif
                            </div>
                        </header>

                        {{-- ── Optional brief paragraph ── --}}
                        @if (filled($member->short_brief))
                            <p class="cmt-su-member__brief">{{ $member->short_brief }}</p>
                        @endif

                        {{-- ── Footer: phone left, socials right (or just socials) ── --}}
                        @if (filled($member->phone_number) || filled($member->linkedin_url) || filled($member->twitter_url))
                            <footer class="cmt-su-member__foot">
                                @if (filled($member->phone_number))
                                    <a class="cmt-su-member__phone"
                                       href="tel:{{ preg_replace('/[^\d+]/', '', $member->phone_number) }}">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
                                        <span>{{ $member->phone_number }}</span>
                                    </a>
                                @else
                                    <span class="cmt-su-member__phone" style="color: var(--slate-400); cursor: default;">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/></svg>
                                        <span>—</span>
                                    </span>
                                @endif

                                @if (filled($member->linkedin_url) || filled($member->twitter_url))
                                    <div class="cmt-su-member__socials">
                                        @if (filled($member->linkedin_url))
                                            <a href="{{ $member->linkedin_url }}" target="_blank" rel="noopener" aria-label="LinkedIn">
                                                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 0h-14a5 5 0 0 0-5 5v14a5 5 0 0 0 5 5h14a5 5 0 0 0 5-5v-14a5 5 0 0 0-5-5zm-11 19h-3v-11h3v11zm-1.5-12.3a1.7 1.7 0 1 1 0-3.5 1.7 1.7 0 0 1 0 3.5zm13.5 12.3h-3v-5.6c0-3.4-4-3.1-4 0v5.6h-3v-11h3v1.8c1.4-2.6 7-2.8 7 2.5v6.7z"/></svg>
                                            </a>
                                        @endif
                                        @if (filled($member->twitter_url))
                                            <a href="{{ $member->twitter_url }}" target="_blank" rel="noopener" aria-label="X / Twitter">
                                                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
                                            </a>
                                        @endif
                                    </div>
                                @endif
                            </footer>
                        @endif
                    </article>
                @endforeach
            </div>
        </div>
    @endif

    {{-- ─── Pitch deck (ONLY) ─── --}}
    {{-- All other attachments (CV, financials, initial DD, etc.) are
         deliberately hidden on the demo attendance public page. The
         section renders strictly when a pitch deck is present. --}}
    @if ($pitch && ($pitch->isAvailable() || $pitch->monday_asset_id))
        <div class="cmt-su-section">
            <h3>{{ __('web.demo_attendance.startup_detail.sections.pitch_deck') }}</h3>
            <div class="cmt-su-files">
                {{-- Stream through the app (symlink-independent, disk-agnostic,
                     scoped to this demo) — never a raw /storage link. --}}
                <a href="{{ route('demo-attendance.startups.pitch-deck', [$startup, 'startup_investment_round_id' => $application->id]) }}" target="_blank" rel="noopener" class="cmt-su-file">
                    <span class="cmt-su-file__icon" aria-hidden="true">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                            <polyline points="14 2 14 8 20 8"/>
                            <line x1="16" y1="13" x2="8" y2="13"/>
                            <line x1="16" y1="17" x2="8" y2="17"/>
                        </svg>
                    </span>
                    <span class="cmt-su-file__body">
                        <span class="cmt-su-file__name">{{ $pitch->file_name }}</span>
                        <span class="cmt-su-file__meta">{{ __('web.demo_attendance.startup_detail.pitch_deck_meta') }}</span>
                    </span>
                    <svg class="cmt-su-file__chev" 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="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>
                </a>
            </div>
        </div>
    @endif
</div>

<div class="cmt-bottom-spacer"></div>

@include('web.demo-attendance.partials.sticky-bar', [
    'investor'   => $investor,
    'demo'       => $demo,
    'attendance' => $attendance,
])
@endsection