@extends('layouts.landing-product')

@section('title', 'BioVida — Planos Individuais e Familiares')
@section('meta_description', 'Planos de saúde individuais e familiares BioVida. Sem carência, ativação imediata, telemedicina 24h e atendimento humanizado.')

@section('nav_links')
    <a href="#planos" class="text-[#006948]">Planos</a>
    <a href="#diferenciais" class="text-[#3d4a42] transition hover:text-[#006948]">Diferenciais</a>
    <a href="#faq" class="text-[#3d4a42] transition hover:text-[#006948]">Dúvidas</a>
@endsection

@section('content')
    @php
        $images = [
            'hero' => asset('images/landing/saude.jpg'),
            'telemedicina' => asset('images/landing/bemestar.jpg'),
            'acolhimento' => asset('images/landing/pessoa.jpg'),
            'familia' => asset('images/landing/saude.jpg'),
            'pricing' => asset('images/landing/pessoa.jpg'),
        ];
    @endphp

    {{-- Hero --}}
    <section class="relative overflow-hidden px-6 pb-16 pt-10 lg:px-8 lg:pb-20 lg:pt-14">
        <div data-parallax="0.35" class="pointer-events-none absolute -right-24 top-0 size-80 rounded-full bg-[#006948]/10 blur-3xl" aria-hidden="true"></div>
        <div data-parallax="0.2" class="pointer-events-none absolute -left-20 bottom-0 size-64 rounded-full bg-[#0051d5]/8 blur-3xl" aria-hidden="true"></div>

        <div class="relative mx-auto grid max-w-7xl items-center gap-12 lg:grid-cols-2 lg:gap-16">
            <div>
                <span data-reveal class="inline-block rounded-full bg-[#00855d] px-4 py-1.5 text-[10px] font-bold uppercase tracking-widest text-white">
                    Sem carência · Ativação imediata
                </span>
                <h1 data-reveal data-reveal-delay="1" class="mt-6 text-4xl font-extrabold leading-tight tracking-tight text-[#006948] sm:text-5xl lg:text-[3.25rem]">
                    A saúde que sua família merece, ativada agora.
                </h1>
                <p data-reveal data-reveal-delay="2" class="mt-6 max-w-xl text-base leading-7 text-[#3d4a42]">
                    A BioVida remove as barreiras entre você e o cuidado médico de excelência. Planos individuais e familiares com contratação 100% digital e atendimento humanizado.
                </p>
                <div data-reveal data-reveal-delay="3" class="mt-8 flex flex-col gap-4 sm:flex-row">
                    <a href="#planos" class="inline-flex items-center justify-center gap-2 rounded-xl bg-[#006948] px-8 py-4 text-sm font-bold text-white shadow-xl shadow-[#006948]/25 transition hover:-translate-y-0.5">
                        Contratar agora
                        <i class="ph ph-arrow-right text-lg" aria-hidden="true"></i>
                    </a>
                    <a href="{{ route('landing.pj') }}" class="inline-flex items-center justify-center rounded-xl border-2 border-[#006948] px-8 py-4 text-sm font-bold text-[#006948] transition hover:bg-[#006948]/5">
                        Sou empresa
                    </a>
                </div>
                <p data-reveal data-reveal-delay="4" class="mt-8 text-sm font-medium text-[#3d4a42]">
                    +15.000 famílias protegidas em Brasília
                </p>
            </div>

            <div data-reveal data-reveal-delay="2" class="relative">
                <div data-parallax="0.12" class="landing-float relative overflow-hidden rounded-3xl shadow-2xl">
                    <img src="{{ $images['hero'] }}" alt="Casal acessando serviços de saúde com tranquilidade" class="h-[28rem] w-full object-cover sm:h-[32rem] lg:h-[500px]" loading="eager">
                    <div class="absolute inset-0 bg-gradient-to-t from-[#171d19]/50 via-transparent to-transparent"></div>
                </div>
                <div data-parallax="0.4" class="landing-float-delayed lp-glass absolute -bottom-5 -left-5 rounded-2xl p-5 shadow-xl sm:-left-8">
                    <div class="flex items-center gap-3">
                        <span class="flex size-11 items-center justify-center rounded-xl bg-[#00855d] text-white">
                            <i class="ph ph-first-aid-kit text-xl" aria-hidden="true"></i>
                        </span>
                        <div>
                            <p class="text-xs text-[#3d4a42]">Pronto atendimento</p>
                            <p class="font-bold text-[#006948]">24 horas por dia</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Produtos --}}
    <section class="px-6 py-16 lg:px-8 lg:py-20">
        <div class="mx-auto max-w-7xl">
            <div data-reveal class="mb-12 text-center">
                <h2 class="text-3xl font-extrabold text-[#171d19] sm:text-4xl">Saúde digital e humana</h2>
                <p class="mt-3 text-[#3d4a42]">Tecnologia de ponta com o acolhimento que você precisa.</p>
            </div>

            <div class="space-y-16">
                {{-- Bio Conect --}}
                <div class="grid items-center gap-8 md:grid-cols-2 lg:gap-12">
                    <div data-reveal class="lp-glass order-2 rounded-3xl p-8 md:order-1">
                        <span class="inline-block rounded-full bg-[#00855d] px-3 py-1 text-[10px] font-bold uppercase tracking-wider text-white">Conectividade</span>
                        <h3 class="mt-4 text-2xl font-extrabold text-[#006948]">Bio Conect</h3>
                        <p class="mt-3 text-sm leading-6 text-[#3d4a42]">Acesso imediato a clínica médica e especialidades. A evolução do atendimento na palma da sua mão com diagnósticos precisos.</p>
                        <div class="mt-6 grid grid-cols-2 gap-4">
                            <div class="rounded-xl bg-[#e9efe9] p-4">
                                <p class="text-xs text-[#3d4a42]">Individual</p>
                                <p class="text-xl font-extrabold text-[#006948]">R$ 34,90</p>
                            </div>
                            <div class="rounded-xl bg-[#00855d] p-4 text-white">
                                <p class="text-xs opacity-80">Familiar</p>
                                <p class="text-xl font-extrabold">R$ 19,90</p>
                            </div>
                        </div>
                    </div>
                    <div data-reveal data-reveal-delay="1" class="order-1 overflow-hidden rounded-3xl shadow-lg md:order-2">
                        <img src="{{ $images['telemedicina'] }}" alt="Atendimento médico online humanizado" class="h-80 w-full object-cover md:h-[400px]" loading="lazy">
                    </div>
                </div>

                {{-- PlenaMENTE --}}
                <div class="grid items-center gap-8 md:grid-cols-2 lg:gap-12">
                    <div data-reveal class="overflow-hidden rounded-3xl shadow-lg">
                        <img src="{{ $images['acolhimento'] }}" alt="Atendimento humanizado para toda a família" class="h-80 w-full object-cover md:h-[400px]" loading="lazy">
                    </div>
                    <div data-reveal data-reveal-delay="1" class="lp-glass rounded-3xl p-8">
                        <span class="inline-block rounded-full bg-[#316bf3] px-3 py-1 text-[10px] font-bold uppercase tracking-wider text-white">Acolhimento</span>
                        <h3 class="mt-4 text-2xl font-extrabold text-[#0051d5]">PlenaMENTE</h3>
                        <p class="mt-3 text-sm leading-6 text-[#3d4a42]">Foco no bem-estar integral. Consultas humanizadas e suporte contínuo para quem você mais ama, com carinho e dedicação.</p>
                        <div class="mt-6 grid grid-cols-2 gap-4">
                            <div class="rounded-xl bg-[#e9efe9] p-4">
                                <p class="text-xs text-[#3d4a42]">Individual</p>
                                <p class="text-xl font-extrabold text-[#0051d5]">R$ 59,90</p>
                            </div>
                            <div class="rounded-xl bg-[#316bf3] p-4 text-white">
                                <p class="text-xs opacity-80">Familiar</p>
                                <p class="text-xl font-extrabold">R$ 39,90</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Diferenciais --}}
    <section id="diferenciais" class="bg-[#eff5ef] px-6 py-16 lg:px-8 lg:py-20">
        <div class="mx-auto max-w-7xl">
            <div data-reveal class="mb-12 text-center">
                <h2 class="text-3xl font-extrabold text-[#171d19]">Diferenciais BioVida</h2>
                <p class="mt-3 text-[#3d4a42]">Muito mais que um plano, um ecossistema de cuidado.</p>
            </div>

            <div class="grid gap-6 md:grid-cols-3">
                <article data-reveal class="lp-glass group relative overflow-hidden rounded-3xl p-8 md:col-span-2">
                    <i class="ph ph-video-camera text-5xl text-[#006948]" aria-hidden="true"></i>
                    <h3 class="mt-4 text-2xl font-extrabold text-[#006948]">Telemedicina 24h</h3>
                    <p class="mt-2 max-w-md text-sm text-[#3d4a42]">Médicos especialistas disponíveis a qualquer hora, direto pelo celular. Sem filas, sem espera.</p>
                </article>
                <article data-reveal data-reveal-delay="1" class="flex flex-col rounded-3xl bg-[#006948] p-8 text-white shadow-xl">
                    <i class="ph ph-headset text-4xl" aria-hidden="true"></i>
                    <h3 class="mt-4 text-lg font-extrabold">Bio Concierge</h3>
                    <p class="mt-2 text-sm text-[#85f8c4]/90">Assistente pessoal de saúde para agendar exames, tirar dúvidas e guiar sua jornada de cuidado.</p>
                </article>
                <article data-reveal class="rounded-3xl border border-[#bccac0] bg-white p-8 transition hover:border-[#006948]">
                    <i class="ph ph-map-pin text-4xl text-[#006948]" aria-hidden="true"></i>
                    <h3 class="mt-4 text-lg font-extrabold">Rede Bio Prime</h3>
                    <p class="mt-2 text-sm text-[#3d4a42]">Acesso aos melhores hospitais e clínicas de Brasília, com prioridade de agendamento.</p>
                </article>
                <article data-reveal data-reveal-delay="1" class="flex items-center gap-6 rounded-3xl bg-[#316bf3] p-8 text-white md:col-span-2">
                    <img src="{{ $images['familia'] }}" alt="Cuidado familiar integrado" class="hidden h-32 w-32 shrink-0 rounded-2xl object-cover sm:block" loading="lazy">
                    <div>
                        <h3 class="text-lg font-extrabold">Cuidado familiar integrado</h3>
                        <p class="mt-2 text-sm opacity-90">Inclusão de dependentes com valores reduzidos e acompanhamento preventivo para todas as idades.</p>
                    </div>
                </article>
            </div>
        </div>
    </section>

    {{-- Pricing --}}
    <section id="planos" class="relative flex min-h-[36rem] items-center overflow-hidden py-20">
        <div data-parallax="0.15" class="absolute inset-0">
            <img src="{{ $images['pricing'] }}" alt="" class="size-full object-cover" loading="lazy" aria-hidden="true">
            <div class="absolute inset-0 bg-gradient-to-r from-[#006948]/95 via-[#006948]/60 to-[#006948]/30"></div>
        </div>
        <div class="relative mx-auto w-full max-w-7xl px-6 lg:px-8">
            <div data-reveal class="lp-glass max-w-xl rounded-[2rem] border-white/20 p-8 shadow-2xl sm:p-10">
                <span class="inline-block rounded-full bg-[#006948] px-4 py-1.5 text-[10px] font-bold uppercase tracking-widest text-white">Plano Bio Prime Individual</span>
                <h2 class="mt-6 text-2xl font-extrabold text-[#006948] sm:text-3xl">Escolha sua proteção</h2>
                <p class="mt-2 text-sm text-[#3d4a42]">A melhor escolha para sua saúde e tranquilidade.</p>
                <div class="mt-8 flex flex-wrap items-end justify-between gap-4">
                    <div>
                        <p class="text-4xl font-extrabold text-[#006948] sm:text-5xl">R$ 197,00</p>
                        <p class="text-sm text-[#3d4a42]">Mensalidade fixa /mês</p>
                    </div>
                    <span class="rounded-xl border border-[#006948]/20 bg-[#006948]/10 px-4 py-2 text-center text-[10px] font-bold uppercase text-[#006948]">Ativação<br>digital</span>
                </div>
                <ul class="mt-8 grid gap-4 sm:grid-cols-2">
                    @foreach (['Atendimento presencial premium', 'Sem sinistralidade', 'Sem limite de idade', 'Bio Concierge 24h'] as $benefit)
                        <li class="flex items-start gap-2 text-sm">
                            <i class="ph ph-check-circle mt-0.5 text-[#006948]" aria-hidden="true"></i>
                            <span class="font-semibold text-[#171d19]">{{ $benefit }}</span>
                        </li>
                    @endforeach
                </ul>
                @if (Route::has('login'))
                    <a href="{{ route('login') }}" class="mt-8 flex w-full items-center justify-center gap-2 rounded-2xl bg-[#006948] py-4 text-base font-bold text-white shadow-lg transition hover:-translate-y-0.5">
                        Garantir minha proteção
                        <i class="ph ph-arrow-right" aria-hidden="true"></i>
                    </a>
                @endif
            </div>
        </div>
    </section>

    {{-- FAQ --}}
    <section id="faq" class="px-6 py-16 lg:px-8 lg:py-20">
        <div class="mx-auto max-w-3xl">
            <h2 data-reveal class="mb-10 text-center text-3xl font-extrabold text-[#171d19]">Dúvidas frequentes</h2>
            <div class="space-y-4">
                @foreach ([
                    ['q' => 'Como funciona a carência zero?', 'a' => 'Para o plano Bio Prime contratado agora, liberamos consultas e exames básicos imediatamente após o primeiro pagamento.'],
                    ['q' => 'O valor da mensalidade é fixo?', 'a' => 'Sim! O Bio Prime possui mensalidade fixa sem surpresas de sinistralidade, garantindo previsibilidade financeira para você e sua família.'],
                    ['q' => 'A BioVida atende em todo o DF?', 'a' => 'Nossa rede física Bio Prime é estrategicamente distribuída pelas principais regiões de Brasília para garantir agilidade no seu atendimento presencial.'],
                ] as $i => $faq)
                    <details data-reveal @if($i) data-reveal-delay="{{ $i }}" @endif class="group rounded-2xl border border-[#bccac0] bg-white p-5 open:border-[#006948]">
                        <summary class="flex cursor-pointer list-none items-center justify-between font-bold text-[#006948]">
                            {{ $faq['q'] }}
                            <i class="ph ph-caret-down transition group-open:rotate-180" aria-hidden="true"></i>
                        </summary>
                        <p class="mt-4 text-sm leading-6 text-[#3d4a42]">{{ $faq['a'] }}</p>
                    </details>
                @endforeach
            </div>
        </div>
    </section>

    {{-- CTA --}}
    <section class="px-6 pb-20 lg:px-8">
        <div data-reveal class="relative mx-auto max-w-7xl overflow-hidden rounded-[2.5rem] bg-[#006948] px-8 py-14 text-center text-white sm:px-12">
            <div data-parallax="0.25" class="pointer-events-none absolute -left-20 -top-20 size-64 rounded-full bg-[#85f8c4]/15 blur-2xl" aria-hidden="true"></div>
            <h2 class="relative text-3xl font-extrabold sm:text-4xl">Sua família não pode esperar.</h2>
            <p class="relative mx-auto mt-4 max-w-2xl text-[#85f8c4]/90">Junte-se a milhares de brasileiros que escolheram a excelência do Bio Prime.</p>
            <a href="#planos" class="relative mt-8 inline-flex rounded-xl bg-white px-10 py-4 text-base font-bold text-[#006948] shadow-2xl transition hover:-translate-y-0.5">
                Começar contratação agora
            </a>
        </div>
    </section>
@endsection