@php
    $primary = $tenant->primary_color ?: '#155e75';
    $currency = $tenant->settings['currency'] ?? 'NGN';
    $showUrl = route('public.tenant.show', ['tenant' => $tenant->slug]);
    $registerUrl = route('public.tenant.register', ['tenant' => $tenant->slug]);
    $loginUrl = route('public.tenant.login', ['tenant' => $tenant->slug]);
    $phone = $tenant->phone ?: '';
    $whatsappPhone = $tenant->settings['public_whatsapp_number'] ?? $phone;
    $whatsappNumber = \App\Support\PhoneNumber::forWhatsapp($whatsappPhone);
    $whatsappText = urlencode('Hello '.$tenant->name.', I want to open an account.');
@endphp
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ $tenant->name }} Member Portal</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <style>:root{--tenant-primary: {{ $primary }};}</style>
</head>
<body class="tenant-public">
    @if($whatsappNumber)
        <a class="tenant-whatsapp-float" href="https://wa.me/{{ $whatsappNumber }}?text={{ $whatsappText }}" target="_blank" rel="noopener" aria-label="Chat on WhatsApp">
            <i class="bi bi-whatsapp"></i>
        </a>
    @endif

    <header class="tenant-public-nav sticky-top">
        <div class="container d-flex align-items-center justify-content-between py-3">
            <a class="tenant-public-brand" href="{{ $showUrl }}">
                @if($tenant->displayLogoUrl())
                    <img src="{{ $tenant->displayLogoUrl() }}" alt="{{ $tenant->name }}">
                @else
                    <span>{{ strtoupper(substr($tenant->name, 0, 2)) }}</span>
                @endif
                <strong>{{ $tenant->name }}</strong>
            </a>
            <nav class="d-none d-lg-flex align-items-center gap-4 small fw-semibold">
                <a href="#about">About</a>
                <a href="#services">Services</a>
                <a href="#savings">Savings</a>
                <a href="#products">Loans</a>
                <a href="#contact">Contact</a>
            </nav>
            <div class="d-flex gap-2">
                <a class="btn btn-outline-dark btn-sm" href="{{ $loginUrl }}">Login</a>
                <a class="btn btn-primary btn-sm" href="{{ $registerUrl }}">Open account</a>
            </div>
        </div>
    </header>

    <main>
        <section class="tenant-public-hero tenant-public-hero-full">
            <div class="tenant-hero-image"></div>
            <div class="tenant-hero-overlay"></div>
            <div class="container position-relative">
                <div class="tenant-public-hero-inner">
                    <div>
                        <span class="tenant-eyebrow">Savings, loans, and member services</span>
                        <h1>{{ $tenant->name }}</h1>
                        <p>Join our secure member portal to save money, apply for loans, track repayment schedules, and make online repayments from anywhere.</p>
                        <div class="d-flex flex-wrap gap-2">
                            <a class="btn btn-light btn-lg" href="{{ $registerUrl }}"><i class="bi bi-person-plus me-2"></i>Open account</a>
                            <a class="btn btn-outline-light btn-lg" href="{{ $loginUrl }}"><i class="bi bi-box-arrow-in-right me-2"></i>Member login</a>
                        </div>
                    </div>
                    <div class="tenant-public-panel">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <span class="text-muted">Member portal</span>
                            <span class="badge text-bg-success">Online</span>
                        </div>
                        <div class="tenant-service-row"><i class="bi bi-wallet2"></i><span>Savings deposits</span></div>
                        <div class="tenant-service-row"><i class="bi bi-cash-coin"></i><span>Loan applications</span></div>
                        <div class="tenant-service-row"><i class="bi bi-calendar2-check"></i><span>Repayment schedules</span></div>
                        <div class="tenant-service-row"><i class="bi bi-credit-card"></i><span>Online repayments</span></div>
                    </div>
                </div>
            </div>
        </section>

        <section class="container py-5">
            <div class="row g-4">
                <div class="col-md-4"><div class="tenant-stat"><span>Members</span><strong>{{ number_format($stats['customers']) }}</strong></div></div>
                <div class="col-md-4"><div class="tenant-stat"><span>Total savings</span><strong>{{ $currency }} {{ number_format($stats['savings'], 2) }}</strong></div></div>
                <div class="col-md-4"><div class="tenant-stat"><span>Portal link</span><strong>{{ parse_url($showUrl, PHP_URL_PATH) }}</strong></div></div>
            </div>
        </section>

        <section id="about" class="container pb-5">
            <div class="row g-4 align-items-center">
                <div class="col-lg-6">
                    <img class="tenant-wide-image" src="https://images.unsplash.com/photo-1678693361474-d9aa8a7a96cc?auto=format&fit=crop&fm=jpg&q=80&w=1200" alt="Naira notes for community finance">
                </div>
                <div class="col-lg-6">
                    <span class="text-uppercase small fw-bold" style="color: var(--tenant-primary)">About us</span>
                    <h2 class="display-6 fw-bold">{{ $tenant->name }} helps members access simple financial services.</h2>
                    <p class="text-muted fs-5">{{ $tenant->address ?: 'We support everyday savers, traders, workers, and small businesses with structured savings, transparent loans, and convenient repayments.' }}</p>
                    <div class="tenant-about-list">
                        <div><i class="bi bi-shield-lock"></i><span>Secure member records and private member access.</span></div>
                        <div><i class="bi bi-receipt"></i><span>Receipts, statements, and loan repayment schedules.</span></div>
                        <div><i class="bi bi-phone"></i><span>Mobile-friendly signup, savings, loans, and repayments.</span></div>
                    </div>
                </div>
            </div>
        </section>

        <section id="services" class="tenant-public-soft py-5">
            <div class="container">
                <div class="d-flex flex-column flex-lg-row justify-content-between gap-3 align-items-lg-end mb-4">
                    <div>
                        <span class="text-uppercase small fw-bold" style="color: var(--tenant-primary)">Services</span>
                        <h2 class="display-6 fw-bold mb-0">What members can do online</h2>
                    </div>
                    <a href="{{ $registerUrl }}" class="btn btn-outline-primary">Join and start</a>
                </div>
                <div class="row g-3">
                    @foreach([
                        ['bi-person-plus', 'Open an account', 'Register with your details and receive a member account.'],
                        ['bi-wallet2', 'Manage savings', 'Track balances and make savings deposits.'],
                        ['bi-cash-coin', 'Apply for loans', 'Submit requests and review repayment schedules.'],
                        ['bi-credit-card', 'Repay online', 'Use gateway checkout where enabled by the company.'],
                        ['bi-bell', 'Get alerts', 'Receive portal, email, SMS, and WhatsApp updates.'],
                        ['bi-file-earmark-text', 'View statements', 'Keep track of your transactions and balances.'],
                    ] as [$icon, $title, $body])
                        <div class="col-md-6 col-xl-4">
                            <div class="tenant-service-card">
                                <i class="bi {{ $icon }}"></i>
                                <h3>{{ $title }}</h3>
                                <p>{{ $body }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>

        @if(($savingsProducts ?? collect())->isNotEmpty())
            <section id="savings" class="container py-5">
                <div class="d-flex align-items-end justify-content-between gap-3 mb-3">
                    <div>
                        <div class="text-muted small">Savings products</div>
                        <h2 class="h4 mb-0">Save with a plan that fits you</h2>
                    </div>
                    <a href="{{ $registerUrl }}" class="btn btn-outline-primary">Open a savings plan</a>
                </div>
                <div class="row g-3">
                    @foreach($savingsProducts as $product)
                        <div class="col-md-6 col-xl-3">
                            <div class="tenant-product">
                                <h3 class="h5">{{ $product->name }}</h3>
                                <p>{{ $product->description ?: 'Structured savings for members.' }}</p>
                                <div class="small text-muted">{{ $product->typeLabel() }} @if($product->contribution_frequency) &middot; {{ $product->contributionFrequencyLabel() }} @endif</div>
                                <div class="small text-muted mt-1">
                                    Fee:
                                    @if(($product->processing_fee_type ?? 'fixed') === 'contribution_amount')
                                        one contribution amount
                                    @elseif(($product->processing_fee_type ?? 'fixed') === 'percentage')
                                        {{ $product->processing_fee_value }}%
                                    @else
                                        {{ $currency }} {{ number_format((float) $product->processing_fee_value, 2) }}
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </section>
        @endif

        @if($products->isNotEmpty())
            <section id="products" class="container py-5">
                <div class="d-flex align-items-end justify-content-between gap-3 mb-3">
                    <div>
                        <div class="text-muted small">Loan products</div>
                        <h2 class="h4 mb-0">Available to members</h2>
                    </div>
                    <a href="{{ $registerUrl }}" class="btn btn-outline-primary">Apply after signup</a>
                </div>
                <div class="row g-3">
                    @foreach($products as $product)
                        <div class="col-md-4">
                            <div class="tenant-product">
                                <h3 class="h5">{{ $product->name }}</h3>
                                <p>{{ $product->description ?: 'Flexible credit for active members.' }}</p>
                                <div class="small text-muted">{{ $product->interest_method === 'custom' ? 'Custom interest' : $product->interest_rate.'% interest' }} &middot; {{ $product->term_value ?: $product->term_days }} {{ $product->term_unit ?: 'days' }} &middot; {{ ucfirst(str_replace('_', ' ', $product->repayment_frequency)) }}</div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </section>
        @endif

        <section class="tenant-public-soft py-5">
            <div class="container">
                <div class="row g-3">
                    @foreach([
                        ['Our members can now see their savings without visiting the office.', 'Amina, Member'],
                        ['Loan schedules are clearer and repayments are easier to follow.', 'Bola, Trader'],
                        ['The portal makes account opening fast and convenient.', 'Chinedu, Small business owner'],
                    ] as [$quote, $name])
                        <div class="col-md-4">
                            <div class="tenant-product">
                                <div class="site-stars">*****</div>
                                <p>"{{ $quote }}"</p>
                                <strong>{{ $name }}</strong>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>

        <section id="contact" class="tenant-public-contact py-5">
            <div class="container">
                <div class="row g-4 align-items-center">
                    <div class="col-lg-6">
                        <span class="tenant-eyebrow">Contact us</span>
                        <h2 class="display-6 fw-bold">Speak with {{ $tenant->name }}</h2>
                        <p>Have questions about savings, loans, repayments, or account opening? Contact the team directly.</p>
                    </div>
                    <div class="col-lg-6">
                        <div class="tenant-contact-card">
                            <a href="mailto:{{ $tenant->email }}"><i class="bi bi-envelope"></i>{{ $tenant->email }}</a>
                            @if($phone)
                                <a href="tel:{{ preg_replace('/\s+/', '', $phone) }}"><i class="bi bi-telephone"></i>{{ $phone }}</a>
                            @endif
                            @if($whatsappNumber)
                                <a href="https://wa.me/{{ $whatsappNumber }}?text={{ $whatsappText }}" target="_blank" rel="noopener"><i class="bi bi-whatsapp"></i>Chat on WhatsApp</a>
                            @endif
                            @if($tenant->address)
                                <div><i class="bi bi-geo-alt"></i>{{ $tenant->address }}</div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer class="tenant-public-footer py-4">
        <div class="container d-flex flex-column flex-md-row justify-content-between gap-3">
            <strong>{{ $tenant->name }}</strong>
            <div class="d-flex gap-3 small">
                <a href="#about">About</a>
                <a href="#savings">Savings</a>
                <a href="#services">Services</a>
                <a href="#contact">Contact</a>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
