@extends('layouts.landing')

@section('title', 'MediBook AI — '.__('Built for dental clinics'))

@section('content')
{{-- HERO --}}
<header class="mb-section pt-5">
    <div class="container">
        <div class="row align-items-center g-5">
            <div class="col-lg-6">
                <span class="mb-eyebrow">{{ __('Built for dental clinics') }}</span>
                <h1 class="display-4 fw-bold mt-3">{{ __('Your dental clinic, on autopilot') }}</h1>
                <p class="lead mb-muted mt-3">
                    {{ __('Dental chart, treatment plans, installments, and WhatsApp reminders — in Arabic and English. Fewer no-shows, faster collections.') }}
                </p>
                <div class="d-flex flex-wrap gap-3 mt-4">
                    <a href="{{ route('register') }}" class="btn mb-btn-primary btn-lg">
                        {{ __('Start your 14-day free trial') }}
                    </a>
                    <a href="#how" class="btn mb-btn-ghost btn-lg">{{ __('See how it works') }}</a>
                </div>
                <p class="mb-muted small mt-3">
                    ✓ {{ __('No card required') }} &nbsp; ✓ {{ __('Cancel anytime') }}
                </p>
            </div>

            {{-- Signature element: live FDI chart vignette + WhatsApp reminder --}}
            <div class="col-lg-6">
                <div class="mb-card p-4">
                    <p class="mb-muted small mb-2">FDI · {{ __('Tooth 16 — caries marked on the chart') }}</p>
                    <div class="tooth-arch mb-2" aria-hidden="true">
                        @foreach([18,17,16,15,14,13,12,11] as $n)
                            <div class="tooth {{ $n === 16 ? 'caries' : '' }}">{{ $n }}</div>
                        @endforeach
                    </div>
                    <div class="tooth-arch" aria-hidden="true">
                        @foreach([21,22,23,24,25,26,27,28] as $n)
                            <div class="tooth {{ $n === 26 ? 'crown' : '' }}">{{ $n }}</div>
                        @endforeach
                    </div>
                    <hr style="border-color:var(--mb-line)">
                    <div class="wa-bubble ms-auto">
                        <p class="small fw-semibold mb-1">
                            <span class="wa-dot"></span> WhatsApp · {{ __('Appointment reminder') }}
                        </p>
                        <p class="small mb-2">{{ __('Hi Ali, your appointment with Dr. Ahmed is tomorrow at 10:00 AM. Will you attend?') }}</p>
                        <div class="btns d-flex gap-2">
                            <button type="button">{{ __('Yes') }}</button>
                            <button type="button">{{ __('No') }}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

{{-- FEATURES --}}
<section id="features" class="mb-section" style="background:var(--mb-surface)">
    <div class="container">
        <h2 class="fw-bold">{{ __('Everything a dental clinic needs') }}</h2>
        <p class="mb-muted">{{ __("Nothing it doesn't.") }}</p>
        <div class="row g-4 mt-2">
            @foreach([
                ['🦷', __('Interactive dental chart'), __('FDI 32-tooth chart with per-surface conditions and full history for every patient.')],
                ['📋', __('Treatment plans'), __('Build tooth-linked plans with prices, track every step from proposed to completed.')],
                ['💬', __('WhatsApp reminders'), __('Confirmations, 24-hour and 1-hour reminders with Yes/No buttons that kill no-shows.')],
                ['💳', __('Installment payments'), __('Crowns, implants, ortho — schedule payments and let WhatsApp chase the due dates.')],
                ['🩻', __('Photos & X-rays'), __('Before/after pairs and X-rays attached to teeth and plans, shareable in one tap.')],
                ['📅', __('Online booking'), __('A booking page for your clinic with live availability and a WhatsApp contact button.')],
            ] as [$icon, $title, $text])
                <div class="col-md-6 col-lg-4">
                    <div class="mb-card p-4 h-100">
                        <div class="feature-icon mb-3">{{ $icon }}</div>
                        <h3 class="h5 fw-semibold">{{ $title }}</h3>
                        <p class="mb-muted small mb-0">{{ $text }}</p>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>

{{-- HOW IT WORKS --}}
<section id="how" class="mb-section">
    <div class="container">
        <h2 class="fw-bold mb-4">{{ __('How it works') }}</h2>
        <div class="row g-4">
            @foreach([
                ['1', __('Create your clinic'), __('Sign up, pick your clinic address, add your dentists and working hours.')],
                ['2', __('Patients book and get reminded'), __('Online or at reception — WhatsApp confirms, reminds, and requests reviews automatically.')],
                ['3', __('You chart, plan, and collect'), __('Chart findings become treatment plans, invoices, and installments — all connected.')],
            ] as [$num, $title, $text])
                <div class="col-md-4">
                    <div class="step-num mb-2">{{ $num }}</div>
                    <h3 class="h5 fw-semibold">{{ $title }}</h3>
                    <p class="mb-muted small">{{ $text }}</p>
                </div>
            @endforeach
        </div>
    </div>
</section>

{{-- PRICING --}}
<section id="pricing" class="mb-section" style="background:var(--mb-surface)">
    <div class="container">
        <h2 class="fw-bold">{{ __('Simple pricing') }}</h2>
        <p class="mb-muted">{{ __('One plan. Everything included.') }}</p>
        <div class="row justify-content-center mt-3">
            <div class="col-md-7 col-lg-5">
                <div class="mb-card price-card p-4 text-center">
                    <span class="mb-eyebrow">{{ $plan?->name ?? 'MediBook Dental Pro' }}</span>
                    <div class="price-figure mt-3">{{ $plan?->priceUsdFormatted() ?? '$35' }}</div>
                    <p class="mb-muted">
                        {{ __('per month') }} · {{ __('or') }} {{ $plan?->priceIqdFormatted() ?? '50,000 IQD' }}
                    </p>
                    <ul class="list-unstyled check-list text-start mx-auto" style="max-width:18rem">
                        <li>{{ __('Up to 5 dentists') }}</li>
                        <li>{{ __('Unlimited patients') }}</li>
                        <li>{{ __('1,500 WhatsApp messages / month') }}</li>
                        <li>{{ __('10 GB photo & X-ray storage') }}</li>
                        <li>{{ __('Pay by Paddle, Zain Cash, or SuperQi') }}</li>
                    </ul>
                    <a href="{{ route('register') }}" class="btn mb-btn-primary w-100 mt-2">
                        {{ __('14-day free trial') }}
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- FAQ --}}
<section id="faq" class="mb-section">
    <div class="container" style="max-width:46rem">
        <h2 class="fw-bold mb-4">{{ __('Frequently asked questions') }}</h2>
        <div class="accordion" id="faqAcc">
            @foreach([
                [__('Do my patients need to install anything?'), __('No. Patients book from a link and receive everything on WhatsApp.')],
                [__('Does it work in Arabic?'), __('Yes — the entire platform and all WhatsApp messages are available in Arabic and English.')],
                [__('How do I pay from Iraq?'), __('Zain Cash or SuperQi transfer with in-app receipt upload, or any card via Paddle.')],
                [__('What happens after the trial?'), __('Your data stays safe. Subscribe to continue — there is a 7-day grace period after expiry.')],
            ] as $i => [$q, $a])
                <div class="accordion-item mb-card mb-2">
                    <h3 class="accordion-header">
                        <button class="accordion-button {{ $i ? 'collapsed' : '' }}" type="button"
                                data-bs-toggle="collapse" data-bs-target="#faq{{ $i }}"
                                style="background:transparent;color:var(--mb-ink)">
                            {{ $q }}
                        </button>
                    </h3>
                    <div id="faq{{ $i }}" class="accordion-collapse collapse {{ $i ? '' : 'show' }}" data-bs-parent="#faqAcc">
                        <div class="accordion-body mb-muted">{{ $a }}</div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>

{{-- CTA --}}
<section class="mb-section pt-0" id="login-hint">
    <div class="container">
        <div class="cta-band p-5 text-center">
            <h2 class="fw-bold">{{ __('Stop losing appointments to no-shows') }}</h2>
            <p class="opacity-75">{{ __('Set up your clinic in under 10 minutes.') }}</p>
            <a href="{{ route('register') }}" class="btn mb-btn-primary btn-lg mt-2">
                {{ __('Start your 14-day free trial') }}
            </a>
            <p class="small opacity-75 mt-3 mb-0">
                {{ __('Already have a clinic?') }} {{ __('Log in') }} → <code>your-clinic.{{ config('tenancy.central_domain') }}/login</code>
            </p>
        </div>
    </div>
</section>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
@endpush
@endsection