@extends('layouts.landing-product')

@section('title', 'BioVida — Oportunidade de Negócio')
@section('meta_description', 'Seja um consultor de saúde e finanças em sua região. Construa uma carteira recorrente com a BioVida e Você.')

@section('nav_links')
    <a href="#jornada" class="landing-nav-link transition hover:text-primary">Jornada</a>
    <a href="#portfolio" class="landing-nav-link transition hover:text-primary">Portfólio</a>
    <a href="#empreendedores" class="landing-nav-link transition hover:text-primary">Empreendedores</a>
    <a href="#carreira" class="landing-nav-link transition hover:text-primary">Carreira</a>
@endsection

@section('content')
    @php
        $img = fn (string $name): string => asset("images/landing/oportunidade/{$name}.jpg");

        $jornada = [
            ['icon' => 'currency-circle-dollar', 'title' => 'Renda recorrente', 'text' => 'Receba comissões contínuas sobre sua carteira de clientes, garantindo estabilidade e crescimento.'],
            ['icon' => 'map-trifold', 'title' => 'Expansão nacional', 'text' => 'Atue em todo o território brasileiro, alcançando um público vasto e diversificado.'],
            ['icon' => 'chart-line-up', 'title' => 'Mercado bilionário', 'text' => 'Explore setores com alto potencial: saúde, crédito e bem-estar.'],
        ];

        $pilares = [
            [
                'id' => 'cuidado',
                'icon' => 'heartbeat',
                'title' => 'Cuidado completo para seus clientes',
                'subtitle' => 'Ofereça soluções inovadoras que proporcionam tranquilidade e acesso facilitado a serviços essenciais de saúde.',
                'image' => $img('cuidado'),
                'items' => ['Reembolso em medicamentos', 'Reembolso em diárias hospitalares', 'Rede de descontos exclusiva', 'UTI móvel preventiva', 'Auxílio funeral completo'],
            ],
            [
                'id' => 'financeiro',
                'icon' => 'wallet',
                'title' => 'Inovação financeira na saúde',
                'subtitle' => 'Mude a forma como seus clientes acessam serviços de saúde com soluções que facilitam e descomplicam.',
                'image' => $img('financeiro'),
                'items' => ['Crédito para saúde e cirurgia programada', 'Fundo de investimento em saúde', 'Máquina de cartão e antecipação para o segmento saúde', 'Microcrédito emergencial'],
            ],
            [
                'id' => 'bemestar',
                'icon' => 'leaf',
                'title' => 'Vida plena e equilibrada',
                'subtitle' => 'Amplie seu portfólio oferecendo produtos que promovem qualidade de vida e longevidade.',
                'image' => $img('bemestar'),
                'items' => ['Nutracêuticos', 'Medicamentos de alta performance', 'Biomarcadores avançados', 'Equipamentos de ponta para saúde'],
            ],
        ];

        $beneficios = [
            ['icon' => 'package', 'title' => 'Diversifique sua renda', 'text' => 'Expanda suas ofertas com novos produtos e vertentes para clientes empresariais.'],
            ['icon' => 'briefcase', 'title' => 'Carreira sólida', 'text' => 'Uma oportunidade real para alcançar autonomia e crescimento profissional.'],
            ['icon' => 'globe-hemisphere-west', 'title' => 'Atuação em todo o Brasil', 'text' => 'A liberdade de trabalhar de qualquer lugar e expandir sua atuação.'],
            ['icon' => 'trend-up', 'title' => 'Potencial ilimitado', 'text' => 'Sua renda não tem limites, baseada na sua dedicação e desempenho.'],
        ];

        $depoimentos = [
            ['nome' => 'Natasha', 'cargo' => 'Corretora de plano saúde', 'foto' => $img('natasha')],
            ['nome' => 'Joana', 'cargo' => 'Consultora de negócio', 'foto' => $img('joana')],
            ['nome' => 'Peter', 'cargo' => 'Empreendedor', 'foto' => $img('peter')],
        ];

        $carreira = [
            ['num' => 1, 'title' => 'Comissões recorrentes', 'text' => 'Receba pagamentos contínuos sobre a carteira de clientes ativos que você construir.'],
            ['num' => 2, 'title' => 'Potencial de crescimento', 'text' => 'Seu esforço define seus ganhos — quanto mais você dedica, maior é o retorno.'],
            ['num' => 3, 'title' => 'Atuação em todo o Brasil', 'text' => 'Trabalhe de qualquer lugar e expanda sua presença nacional sem barreiras geográficas.'],
        ];
    @endphp

    {{-- Hero --}}
    <section class="lp-oportunidade-hero relative flex min-h-screen items-center overflow-hidden pt-20">
        <div data-parallax="0.4" class="pointer-events-none absolute -left-32 top-16 size-[32rem] rounded-full bg-primary/20 blur-3xl" aria-hidden="true"></div>
        <div data-parallax="0.55" class="pointer-events-none absolute -right-20 top-1/4 size-72 rounded-full bg-emerald-400/10 blur-3xl" aria-hidden="true"></div>

        <div class="relative mx-auto grid max-w-7xl items-center gap-14 px-6 py-20 lg:grid-cols-2 lg:gap-16 lg:px-8 lg:py-28">
            <div>
                <span data-reveal class="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/10 px-4 py-2 text-[10px] font-bold uppercase tracking-[0.28em] text-white/80 backdrop-blur">
                    <span class="size-1.5 animate-pulse rounded-full bg-primary"></span>
                    Oportunidade BioVida
                </span>
                <h1 data-reveal data-reveal-delay="1" class="mt-8 text-4xl font-extrabold leading-[1.08] tracking-tight text-white sm:text-5xl lg:text-[3.5rem]">
                    Junte-se a nós e transforme vidas com
                    <span class="landing-gradient-text block">saúde física e financeira</span>
                </h1>
                <p data-reveal data-reveal-delay="2" class="mt-6 max-w-xl text-base leading-7 text-white/65">
                    Seja um consultor de saúde e finanças em sua região. Você pode construir uma carteira recorrente e ter ganhos crescentes em um mercado que une o que as pessoas mais precisam.
                </p>
                <div data-reveal data-reveal-delay="3" class="mt-10 flex flex-col gap-4 sm:flex-row">
                    <a href="#cadastro" class="inline-flex items-center justify-center gap-2 rounded-full bg-primary px-8 py-4 text-sm font-bold text-white shadow-xl shadow-primary/30 transition hover:-translate-y-0.5">
                        Saiba mais
                        <i class="ph ph-arrow-right text-lg" aria-hidden="true"></i>
                    </a>
                    <a href="#portfolio" class="inline-flex items-center justify-center rounded-full border border-white/20 bg-white/5 px-8 py-4 text-sm font-bold text-white backdrop-blur transition hover:border-white/40 hover:bg-white/10">
                        Ver portfólio
                    </a>
                </div>
            </div>

            <div data-reveal data-reveal-delay="2" class="relative">
                <div data-parallax="0.12" class="landing-float overflow-hidden rounded-[2rem] border border-white/10 shadow-2xl">
                    <img src="{{ $img('hero') }}" alt="Crescimento profissional e oportunidade de carreira" class="h-[22rem] w-full object-cover sm:h-[28rem] lg:h-[32rem]" loading="eager">
                    <div class="absolute inset-0 bg-gradient-to-t from-[#0a1f1c]/70 via-transparent to-transparent"></div>
                </div>
                <div data-parallax="0.45" class="landing-float-delayed absolute -bottom-5 -left-6 rounded-2xl border border-primary/30 bg-primary px-5 py-4 shadow-xl sm:-left-10">
                    <p class="text-2xl font-extrabold text-white">+500</p>
                    <p class="text-xs font-semibold text-white/85">Empreendedores ativos</p>
                </div>
            </div>
        </div>
    </section>

    {{-- Intro --}}
    <section class="px-6 py-16 lg:px-8 lg:py-24">
        <div class="mx-auto max-w-4xl text-center">
            <p data-reveal class="text-lg leading-8 text-[#3d4a42] sm:text-xl">
                Você já pensou em atuar em um mercado que cresce exponencialmente, unindo o que as pessoas mais precisam: <strong class="text-[#006948]">saúde e segurança financeira</strong>?
            </p>
            <p data-reveal data-reveal-delay="1" class="mt-6 text-base leading-7 text-[#68827f]">
                A BioVida e Você te convida a fazer parte de uma revolução, oferecendo uma oportunidade de negócio completa, lucrativa e com impacto real na vida das pessoas.
            </p>
            <div data-reveal data-reveal-delay="2" class="mt-8 flex flex-wrap items-center justify-center gap-3">
                @foreach (['Simples', 'Viável', 'Inclusivo'] as $pill)
                    <span class="rounded-full border border-primary/25 bg-primary/5 px-6 py-2 text-sm font-bold text-[#006948]">{{ $pill }}</span>
                @endforeach
            </div>
        </div>
    </section>

    {{-- Jornada --}}
    <section id="jornada" class="bg-[#eff5ef] px-6 py-16 lg:px-8 lg:py-24">
        <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">Sua jornada de sucesso começa aqui</h2>
                <p class="mx-auto mt-4 max-w-2xl text-[#3d4a42]">
                    A oportunidade BioVida e Você foi desenhada para empreendedores que desejam atuar em um mercado em constante crescimento. Conquiste sua liberdade financeira e alcance reconhecimento nacional.
                </p>
            </div>

            <div class="grid gap-6 md:grid-cols-3">
                @foreach ($jornada as $i => $item)
                    <article data-reveal @if($i) data-reveal-delay="{{ $i }}" @endif class="lp-bento-card rounded-3xl border border-[#bccac0] bg-white p-8 text-center">
                        <span class="mx-auto flex size-14 items-center justify-center rounded-2xl bg-[#006948]/10 text-[#006948]">
                            <i class="ph ph-{{ $item['icon'] }} text-2xl" aria-hidden="true"></i>
                        </span>
                        <h3 class="mt-5 text-lg font-extrabold text-[#171d19]">{{ $item['title'] }}</h3>
                        <p class="mt-3 text-sm leading-6 text-[#3d4a42]">{{ $item['text'] }}</p>
                    </article>
                @endforeach
            </div>

            <div data-reveal class="relative mt-12 overflow-hidden rounded-3xl shadow-xl">
                <img src="{{ $img('jornada') }}" alt="Jornada de sucesso com a BioVida" class="h-56 w-full object-cover sm:h-72" loading="lazy">
                <div class="absolute inset-0 flex items-end bg-gradient-to-t from-[#0a1f1c]/80 to-transparent p-8">
                    <p class="max-w-xl text-sm leading-6 text-white/90 sm:text-base">
                        Ajude pessoas a cuidarem do que mais importa — a própria vida — enquanto constrói uma carreira próspera e com propósito.
                    </p>
                </div>
            </div>
        </div>
    </section>

    {{-- Portfólio (sticky pillars) --}}
    <section id="portfolio" class="px-6 py-16 lg:px-8 lg:py-24">
        <div class="mx-auto max-w-7xl">
            <div data-reveal class="mb-14 max-w-2xl">
                <p class="text-sm font-bold uppercase tracking-[0.24em] text-primary">Portfólio completo</p>
                <h2 class="mt-3 text-3xl font-extrabold text-[#171d19] sm:text-4xl">Tudo o que você pode oferecer aos seus clientes</h2>
            </div>

            <div class="grid gap-12 lg:grid-cols-[260px_1fr] lg:gap-16">
                <nav data-pillar-nav class="hidden lg:sticky lg:top-28 lg:block lg:self-start" aria-label="Pilares do portfólio">
                    @foreach ($pilares as $i => $pilar)
                        <button type="button" data-pillar-target="{{ $pilar['id'] }}" class="lp-oportunidade-pillar-nav-item {{ $i === 0 ? 'is-active' : '' }}">
                            <span class="flex size-10 items-center justify-center rounded-xl bg-primary/10 text-primary">
                                <i class="ph ph-{{ $pilar['icon'] }} text-xl" aria-hidden="true"></i>
                            </span>
                            <span class="text-sm font-bold text-[#171d19]">{{ $pilar['title'] }}</span>
                        </button>
                    @endforeach
                </nav>

                <div class="space-y-10">
                    @foreach ($pilares as $pilar)
                        <article data-pillar-panel="{{ $pilar['id'] }}" data-reveal class="scroll-mt-28 overflow-hidden rounded-[2rem] border border-[#dde4e3] bg-[#f9fafa]">
                            <div class="grid lg:grid-cols-2">
                                <div class="p-8 lg:p-10">
                                    <h3 class="text-2xl font-extrabold text-[#171d19]">{{ $pilar['title'] }}</h3>
                                    <p class="mt-3 text-sm leading-6 text-[#3d4a42]">{{ $pilar['subtitle'] }}</p>
                                    <ul class="mt-8 space-y-3">
                                        @foreach ($pilar['items'] as $item)
                                            <li class="flex items-center gap-3 text-sm font-semibold text-[#171d19]">
                                                <i class="ph ph-check-circle text-primary" aria-hidden="true"></i>
                                                {{ $item }}
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                                <div class="relative min-h-[16rem] lg:min-h-full">
                                    <img src="{{ $pilar['image'] }}" alt="{{ $pilar['title'] }}" class="absolute inset-0 size-full object-cover" loading="lazy">
                                    <div class="absolute inset-0 bg-gradient-to-t from-[#111b1a]/50 to-transparent lg:bg-gradient-to-l lg:from-[#f9fafa] lg:via-transparent lg:to-transparent"></div>
                                </div>
                            </div>
                        </article>
                    @endforeach
                </div>
            </div>
        </div>
    </section>

    {{-- Empreendedores --}}
    <section id="empreendedores" class="relative overflow-hidden bg-[#111b1a] px-6 py-16 text-white lg:px-8 lg:py-24">
        <div data-parallax="0.25" class="pointer-events-none absolute -left-20 top-0 size-80 rounded-full bg-primary/15 blur-3xl" aria-hidden="true"></div>

        <div class="relative mx-auto max-w-7xl">
            <div class="grid gap-12 lg:grid-cols-2 lg:items-center">
                <div data-reveal>
                    <p class="text-sm font-bold uppercase tracking-[0.24em] text-primary">Empreendedores da saúde</p>
                    <h2 class="mt-4 text-3xl font-extrabold sm:text-4xl">Propósito e lucratividade na mesma jornada</h2>
                    <p class="mt-6 leading-7 text-white/65">
                        A BioVida e Você convida todos que buscam fazer a diferença na vida das pessoas. Seja um agente de transformação, atuando em setores que impactam diretamente a qualidade de vida.
                    </p>
                </div>
                <div data-reveal data-reveal-delay="1" data-parallax="0.1" class="overflow-hidden rounded-3xl border border-white/10 shadow-2xl">
                    <img src="{{ $img('empreendedor') }}" alt="Empreendedor da saúde e bem-estar" class="h-72 w-full object-cover lg:h-96" loading="lazy">
                </div>
            </div>

            <div class="mt-14 grid gap-5 sm:grid-cols-2">
                @foreach ($beneficios as $i => $b)
                    <article data-reveal @if($i) data-reveal-delay="{{ min($i, 3) }}" @endif class="lp-oportunidade-stat">
                        <i class="ph ph-{{ $b['icon'] }} text-3xl text-primary" aria-hidden="true"></i>
                        <h3 class="mt-4 font-extrabold">{{ $b['title'] }}</h3>
                        <p class="mt-2 text-sm text-white/65">{{ $b['text'] }}</p>
                    </article>
                @endforeach
            </div>
        </div>
    </section>

    {{-- Depoimentos --}}
    <section class="px-6 py-16 lg:px-8 lg:py-24">
        <div class="mx-auto max-w-7xl">
            <h2 data-reveal class="mb-12 text-center text-3xl font-extrabold text-[#171d19]">Quem já empreende com a BioVida</h2>
            <div class="grid gap-6 md:grid-cols-3">
                @foreach ($depoimentos as $i => $d)
                    <article data-reveal @if($i) data-reveal-delay="{{ $i }}" @endif class="rounded-3xl border border-[#dde4e3] bg-white p-6 text-center shadow-sm transition hover:-translate-y-1 hover:shadow-lg">
                        <img src="{{ $d['foto'] }}" alt="{{ $d['nome'] }}" class="mx-auto size-24 rounded-full object-cover ring-4 ring-primary/20" loading="lazy">
                        <h3 class="mt-5 text-lg font-extrabold text-[#171d19]">{{ $d['nome'] }}</h3>
                        <p class="mt-1 text-sm text-[#006948]">{{ $d['cargo'] }}</p>
                    </article>
                @endforeach
            </div>
        </div>
    </section>

    {{-- Carreira --}}
    <section id="carreira" class="bg-[#eff5ef] px-6 py-16 lg:px-8 lg:py-24">
        <div class="mx-auto max-w-7xl">
            <div class="grid gap-12 lg:grid-cols-[0.9fr_1.1fr]">
                <div data-reveal class="lg:sticky lg:top-28 lg:self-start">
                    <p class="text-sm font-bold uppercase tracking-[0.24em] text-primary">Plano de carreira</p>
                    <h2 class="mt-4 text-3xl font-extrabold text-[#171d19] sm:text-4xl">Comissões recorrentes que crescem com você</h2>
                    <p class="mt-5 text-[#3d4a42]">
                        Na BioVida e Você, seu esforço é recompensado com um plano de carreira transparente e comissões atrativas. Construa um futuro próspero e realize seus sonhos.
                    </p>
                </div>

                <div class="space-y-5">
                    @foreach ($carreira as $i => $item)
                        <article data-reveal @if($i) data-reveal-delay="{{ $i }}" @endif class="flex gap-6 rounded-3xl border border-[#bccac0] bg-white p-7 shadow-sm">
                            <span class="text-4xl font-extrabold text-primary/20" data-counter="{{ $item['num'] }}">0{{ $item['num'] }}</span>
                            <div>
                                <h3 class="text-lg font-extrabold text-[#171d19]">{{ $item['title'] }}</h3>
                                <p class="mt-2 text-sm leading-6 text-[#3d4a42]">{{ $item['text'] }}</p>
                            </div>
                        </article>
                    @endforeach
                </div>
            </div>
        </div>
    </section>

    {{-- CTA cadastro --}}
    <section id="cadastro" class="relative overflow-hidden py-20 lg:py-28">
        <div data-parallax="0.1" class="absolute inset-0">
            <img src="{{ $img('cta') }}" alt="" class="size-full object-cover opacity-30" loading="lazy" aria-hidden="true">
            <div class="absolute inset-0 bg-gradient-to-br from-[#006948] via-[#006948]/95 to-[#0a1f1c]"></div>
        </div>

        <div class="relative mx-auto max-w-4xl px-6 text-center lg:px-8">
            <h2 data-reveal class="text-3xl font-extrabold text-white sm:text-4xl lg:text-5xl">
                Pronto para transformar sua vida?
            </h2>
            <p data-reveal data-reveal-delay="1" class="mx-auto mt-6 max-w-2xl text-base leading-7 text-white/80 sm:text-lg">
                A BioVida e Você é mais que uma oportunidade de negócio — é um convite para você ser o protagonista da sua história de sucesso. O futuro da saúde e do bem-estar te espera.
            </p>
            <div data-reveal data-reveal-delay="2" class="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row">
                @if (Route::has('login'))
                    <a href="{{ route('login') }}" class="inline-flex items-center justify-center gap-2 rounded-full bg-white px-10 py-4 text-base font-extrabold text-[#006948] shadow-2xl transition hover:-translate-y-0.5">
                        Quero começar agora
                        <i class="ph ph-arrow-right text-lg" aria-hidden="true"></i>
                    </a>
                @endif
                <a href="{{ route('home') }}" class="inline-flex items-center justify-center rounded-full border border-white/30 px-8 py-4 text-sm font-bold text-white transition hover:bg-white/10">
                    Voltar ao início
                </a>
            </div>
        </div>
    </section>
@endsection