@extends('layouts.app')
@section('content')
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pt-20 pb-16 text-center lg:pt-32">
        <h1 class="mx-auto max-w-4xl font-display text-5xl font-medium tracking-tight text-slate-900 sm:text-7xl">
            Transcribe <span class="relative whitespace-nowrap text-blue-600"><svg aria-hidden="true"
                                                                                   viewBox="0 0 418 42"
                                                                                   class="absolute top-2/3 left-0 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">and translate</span></span>
            any audio file.
        </h1>
        <p class="mx-auto mt-6 max-w-2xl text-lg tracking-tight text-slate-700">
            Free, fast and accurate transcription of audio files. 100% free to use.
        </p>
        <div class="mt-10 flex justify-center gap-x-6">
            <a
                class="group inline-flex items-center justify-center rounded-full py-2 px-4 text-sm font-semibold focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 bg-slate-900 text-white hover:bg-slate-700 hover:text-slate-100 active:bg-slate-800 active:text-slate-300 focus-visible:outline-slate-900"
                href="/transcribe">Transcribe for free</a>
        </div>
    </div>

    <div class="relative overflow-hidden bg-blue-600 py-32">
        <img src="/img/background-call-to-action.jpg"
             class="absolute top-1/2 left-1/2 max-w-none -translate-x-1/2 -translate-y-1/2"/>
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 relative grid md:grid-cols-2 gap-12">
            <div class="text-center flex flex-col items-center">
                <h2 class="font-display text-3xl tracking-tight text-white sm:text-4xl pb-8">From audio...</h2>

                <audio controls>
                    <source
                        src="{{ Storage::disk('do')->url(\App\Models\Transcript::firstWhere('public', true)->hash) }}"
                        type="audio/mpeg">
                </audio>
            </div>
            <div class="text-center">
                <h2 class="font-display text-3xl tracking-tight text-white sm:text-4xl pb-8">...to transcript</h2>

                <p class="text-white pb-4 text-lg">
                    In more than 10 languages, including Klingon 🤓
                </p>
                <p class="text-white pb-4 text-lg">
                    Take a look at the <a class="font-medium underline" href="{{ action(\App\Http\Controllers\ShowTranscriptController::class, \App\Models\Transcript::firstWhere('public', true)) }}">
                        demo.
                    </a>
                </p>

                <video playsinline autoplay loop muted>
                    <source src="/videos/demo.mp4" type="video/mp4">
                </video>
            </div>
            <div class="flex items-center justify-center w-full md:col-span-2">
                <a class="group inline-flex items-center justify-center rounded-full py-2 px-4 text-sm font-semibold focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 bg-white text-slate-900 hover:bg-blue-50 active:bg-blue-200 active:text-slate-600 focus-visible:outline-white mt-10"
                   href="/transcribe">Transcribe for free</a>
            </div>
        </div>
    </div>
@endsection
