@extends('layouts.app')
@section('head')
        <x-meta
            title="B2B SaaS Companies: Metrics & Market Analysis | B2BSaaS.com"
            description="B2BSaaS.com provides a comprehensive analysis platform for B2B SaaS companies. Explore traffic, keywords, and landing pages, and gain a competitive edge in your market."
            image="{{asset('b2bsaas.png')}}"
            url="{{route('home')}}"
        />
@endsection
@section('content')
    <div class="max-w-7xl mx-auto pb-24  px-4 sm:px-6 lg:px-8 2xl:px-0">
        @if($page == 'home')
            <div class="mx-auto max-w-7xl pb-16 pt-20 text-center lg:pt-20">
                <div class="flex flex-col justify-start items-center space-y-10">
                    <h1 class="mx-auto max-w-4xl font-display text-4xl font-bold tracking-tight text-slate-900 sm:text-6xl">
                        Benchmark and Analyze <br>
                        <span class="relative whitespace-nowrap text-blue-600">
                            <svg class="absolute left-0 translate-y-1/2 top-2/3 h-[0.58em] w-full fill-blue-300/70" viewBox="0 0 1418 125" ><path d="M1412.29 72.17c-11.04-5.78-20.07-14.33-85.46-25.24-22.37-3.63-44.69-7.56-67.07-11.04-167.11-22.06-181.65-21.24-304.94-30.56C888.78 1.39 822.57 1.1 756.44 0c-46.63-.11-93.27 1.56-139.89 2.5C365.5 13.55 452.86 7.68 277.94 23.15 202.57 33.32 127.38 45.01 52.07 55.69c-11.23 2.41-22.63 4.17-33.71 7.22C6.1 66.33 5.64 66.19 3.89 67.79c-7.99 5.78-2.98 20.14 8.72 17.5 33.99-9.47 32.28-8.57 178.06-29.66 4.26 4.48 7.29 3.38 18.42 3.11 13.19-.32 26.38-.53 39.56-1.12 53.51-3.81 106.88-9.62 160.36-13.95 18.41-1.3 36.8-3.12 55.21-4.7 23.21-1.16 46.43-2.29 69.65-3.4 120.28-2.16 85.46-3.13 234.65-1.52 23.42.99 1.57-.18 125.72 6.9 96.61 8.88 200.92 27.94 295.42 46.12 40.87 7.91 116.67 23.2 156.31 36.78 3.81 1.05 8.28-.27 10.51-3.58 3.17-3.72 2.66-9.7-.78-13.13-3.25-3.12-8.14-3.44-12.18-5.08-17.89-5.85-44.19-12.09-63.67-16.56l26.16 3.28c23.02 3.13 46.28 3.92 69.34 6.75 10.8.96 25.43 1.81 34.34-4.39 2.26-1.54 4.86-2.75 6.21-5.27 2.76-4.59 1.13-11.06-3.59-13.68ZM925.4 23.77c37.64 1.4 153.99 10.85 196.64 14.94 45.95 5.51 91.89 11.03 137.76 17.19 24.25 4.77 74.13 11.21 101.72 18.14-11.87-1.15-23.77-1.97-35.65-3.06-133.46-15.9-266.8-33.02-400.47-47.21Z"></path></svg>
                            {{--<svg aria-hidden="true"
                                 viewBox="0 0 418 42"
                                 class="absolute left-0 top-2/3 h-[0.58em] w-full fill-blue-300/70"
                                 preserveAspectRatio="none">
                                <path
                                    d="M203.371.916c-26.013-2.078-76.686 1.963-124.73 9.946L67.3 12.749C35.421 18.062 18.2 21.766 6.004 25.934 1.244 27.561.828 27.778.874 28.61c.07 1.214.828 1.121 9.595-1.176 9.072-2.377 17.15-3.92 39.246-7.496C123.565 7.986 157.869 4.492 195.942 5.046c7.461.108 19.25 1.696 19.17 2.582-.107 1.183-7.874 4.31-25.75 10.366-21.992 7.45-35.43 12.534-36.701 13.884-2.173 2.308-.202 4.407 4.442 4.734 2.654.187 3.263.157 15.593-.78 35.401-2.686 57.944-3.488 88.365-3.143 46.327.526 75.721 2.23 130.788 7.584 19.787 1.924 20.814 1.98 24.557 1.332l.066-.011c1.201-.203 1.53-1.825.399-2.335-2.911-1.31-4.893-1.604-22.048-3.261-57.509-5.556-87.871-7.36-132.059-7.842-23.239-.254-33.617-.116-50.627.674-11.629.54-42.371 2.494-46.696 2.967-2.359.259 8.133-3.625 26.504-9.81 23.239-7.825 27.934-10.149 28.304-14.005.417-4.348-3.529-6-16.878-7.066Z">
                                </path>
                            </svg>--}}
                            <span class="relative">B2B SaaS</span>
                        </span>
                        Companies
                    </h1>
                    <p class="mt-10 text-xl font-light max-w-4xl">Analyze traffic, top landing pages, keywords, and more for competitive market analysis with B2BSaaS.com. Gain more industry knowledge and a competitive edge.
                    </p>
                    <div>
                        <a href="{{route('companies')}}" class=" bg-blue-600 rounded-full px-4 py-2 text-white text-sm">View All B2B SaaS Companies</a>
                    </div>
                </div>

            </div>
        @endif

        <div class="relative overflow-x-auto mt-20">
            <div class="flex flex-col sm:flex-row justify-start gap-5 items-center px-4 mb-10 text-center sm:text-left">
                <h2 class="font-display text-2xl font-medium tracking-tight text-slate-900 sm:text-3xl">
                    Top B2B SaaS Companies by Organic Traffic
                </h2>
            </div>

            <div class="border-8 border-blue-50 rounded-xl overflow-hidden">
                <table class="w-full text-sm text-left text-gray-500">
                    <thead class="text-xs text-gray-700 uppercase bg-gray-50">
                    <tr>
                        <th role="columnheader" id="headerName" scope="col" class="px-6 py-3">Name</th>
                        <th role="columnheader" id="headerWebsite" scope="col" class="px-6 py-3">Website</th>
                        <th role="columnheader" id="headerCategory" scope="col" class="px-6 py-3">Category</th>
                        <th role="columnheader" id="headerAuthority" scope="col" class="px-6 py-3">Authority Score</th>
                        <th role="columnheader" id="headerTraffic" scope="col" class="px-6 py-3">Est. Organic Traffic</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach ($companies as $index => $item)
                        @if ($index >= 3)
                            <tr class="bg-white border-b cursor-pointer hover:bg-slate-100" onmousedown="goToUrl('/{{$item->slug}}', event);">
                                <td headers="headerName" class="px-6 py-4 font-semibold relative h-16 w-80">
                                    <div class="absolute top-0 right-0 left-4 bottom-0 flex items-center">
                                        {{ $item->name }}
                                    </div>
                                </td>

                                <td headers="headerWebsite" class="px-6 py-4 whitespace-normal break-all max-w-xs relative h-16 w-40">
                                    <div class="absolute top-0 right-0 left-4 bottom-0 flex items-center">
                                        {{ strip_url_prefix($item->website) }}
                                    </div>
                                </td>

                                <td headers="headerCategory" class="px-6 py-4 relative h-16 w-40 max-w-min">
                                    <div class="absolute top-0 right-0 left-4 bottom-0 flex items-center">
                                        {{ @$item->category->name??'' }}
                                    </div>
                                </td>

                                <td headers="headerAuthority" class="px-6 py-4 relative h-16 w-40 max-w-min">
                                    <div class="absolute top-0 right-0 left-4 bottom-0 flex items-center">
                                        {{ @$item->trafficMetric->authority_score }}
                                    </div>
                                </td>
                                <td headers="headerTraffic" class="px-6 py-4 relative h-16 w-40 max-w-min">
                                    <div class="absolute top-0 right-0 left-4 bottom-0 flex items-center">
                                        {{ number_format(@$item->trafficMetric->organic_traffic) }}
                                    </div>
                                </td>
                            </tr>
                        @endif
                    @endforeach
                    <script>
                        function goToUrl(url, event) {
                            if (event.button === 0) {
                                window.location.href = url;
                            } else if (event.button === 1) {
                                window.open(url, '_blank');
                            }
                        }
                    </script>

                    </tbody>
                </table>
            </div>

        </div>

            <div class="mt-20">
                <h2 class="font-display text-2xl font-medium tracking-tight text-slate-900 sm:text-3xl mb-5" >B2B SaaS Startups by Categories </h2>
                <div class="px-4 py-2 text-sm font-light bg-gray-50 border border-b-0 border-gray-200 rounded-t-lg">TOP CATEGORIES</div>
            </div>
            <div class="divide-y divide-gray-200 overflow-hidden rounded-b-lg bg-gray-200 sm:grid sm:grid-cols-2 sm:gap-px sm:divide-y-0 border border-gray-200">

                @foreach ($topCategories as $item)
                    <div class="group relative bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500">
                        <div class="mt-2">
                            <h3 class="text-base font-semibold leading-6 text-gray-900">
                                <a href="{{ route('category', $item->slug) }}" class="focus:outline-none">
                                    <!-- Extend touch target to entire panel -->
                                    <span class="absolute inset-0" aria-hidden="true"></span>
                                    {{ $item->name }}
                                </a>
                            </h3>
                            <p class="mt-2 text-sm text-gray-500">
                                {{$item->companies_count}} {{ $item->top_descr }}
                            </p>
                        </div>
                        <span class="pointer-events-none absolute right-6 top-6 text-gray-300 group-hover:text-gray-400" aria-hidden="true">
                            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M20 4h1a1 1 0 00-1-1v1zm-1 12a1 1 0 102 0h-2zM8 3a1 1 0 000 2V3zM3.293 19.293a1 1 0 101.414 1.414l-1.414-1.414zM19 4v12h2V4h-2zm1-1H8v2h12V3zm-.707.293l-16 16 1.414 1.414 16-16-1.414-1.414z" />
                            </svg>
                        </span>
                    </div>
                @endforeach
            </div>
            <ul role="list" class="grid grid-cols-1 mb-12 gap-x-6 gap-y-8 lg:grid-cols-3 xl:gap-x-8 mt-20">
                @foreach ($companies as $key => $item)
                    @if ($key < 3)

                            <li class="overflow-hidden rounded-xl border border-gray-200">
                                <a href="/{{$item->slug}}">
                                <div class="flex items-center gap-x-4 border-b border-gray-900/5 bg-gray-50 p-6">
                                                                            <div class="text-sm font-medium leading-6 text-gray-900">{{ $item->name }}</div>

                                </div>
                                <dl class="-my-3 divide-y divide-gray-100 px-6 py-4 text-sm leading-6">
                                    <div class="flex justify-between gap-x-4 py-3">
                                        <dt class="text-gray-500">Authority Score</dt>
                                        <dd class="text-gray-700">{{ @$item->trafficMetric->authority_score }}</dd>
                                    </div>
                                    <div class="flex justify-between gap-x-4 py-3">
                                        <dt class="text-gray-500">Est. Organic Traffic</dt>
                                        <dd class="flex items-start gap-x-2">
                                            <div class="font-medium text-gray-900">{{number_format(@$item->trafficMetric->organic_traffic)}}</div>
                                        </dd>
                                    </div>
                                </dl>
                                </a>
                            </li>

                    @endif
                @endforeach
            </ul>
    </div>
@endsection