@extends('layouts.app')

@section('content')

{{-- ======================= HERO + DOWNLOAD BOX ======================= --}}
<section class="hero" id="downloader">
    <div class="container position-relative">
        <div class="row justify-content-center text-center">
            <div class="col-lg-9">
                <p class="hero-eyebrow">Videos &middot; Reels &middot; Photos &middot; Carousels</p>
                <h1 class="hero-title">Instagram Video <span class="grad-text">Downloader</span></h1>
                <p class="lead text-body-secondary mx-auto hero-sub">
                    Paste any public Instagram link and save the video, Reel, photo or full carousel
                    in the highest quality Instagram serves. No app. No login. Free.
                </p>

                {{-- Download box: form is progressive-enhancement friendly --}}
                <form id="downloadForm" class="download-box mx-auto" action="{{ route('download.resolve') }}"
                      method="post" novalidate>
                    @csrf
                    <div class="download-ring">
                        <div class="download-inner d-flex flex-column flex-sm-row align-items-stretch gap-2">
                            <label class="visually-hidden" for="igUrl">Instagram post URL</label>
                            <input type="url" id="igUrl" name="url" class="form-control download-input"
                                   inputmode="url" autocomplete="off" spellcheck="false" maxlength="500"
                                   placeholder="https://www.instagram.com/reel/..." required
                                   aria-describedby="urlHelp">
                            <button type="button" id="pasteBtn" class="btn btn-paste flex-shrink-0"
                                    aria-label="Paste link from clipboard">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M9 5h6M9 5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
                                <span>Paste</span>
                            </button>
                            <button type="submit" id="downloadBtn" class="btn btn-gradient flex-shrink-0 px-4">
                                <span class="btn-label">Download</span>
                                <span class="btn-spinner spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                            </button>
                        </div>
                    </div>
                    <p id="urlHelp" class="small text-body-secondary mt-2 mb-0">
                        Works with instagram.com/p/&hellip;, /reel/&hellip; and /tv/&hellip; links to public posts.
                    </p>
                </form>

                {{-- Live status region: errors + success announcements --}}
                <div id="statusArea" class="mx-auto mt-3" aria-live="polite"></div>
            </div>
        </div>

        {{-- Results / preview grid, filled by JS --}}
        <div id="results" class="row g-3 justify-content-center mt-1 d-none"></div>
    </div>
</section>

{{-- ======================= FEATURES ======================= --}}
<section class="section" id="features" aria-labelledby="featuresHeading">
    <div class="container">
        <div class="text-center mb-5">
            <h2 id="featuresHeading" class="section-title">Built for one job, done well</h2>
            <p class="text-body-secondary">Everything you need to save Instagram media - nothing you don't.</p>
        </div>
        <div class="row g-4">
            <x-feature-card title="Every post type"
                icon='<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><rect x="3" y="3" width="18" height="18" rx="5" stroke="currentColor" stroke-width="1.8"/><path d="m10 9 5 3-5 3V9Z" fill="currentColor"/></svg>'>
                Videos, Reels, photos and full carousel posts - up to 20 slides - all resolve from a single link.
            </x-feature-card>
            <x-feature-card title="Highest quality"
                icon='<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="m12 3 2.4 5.3 5.6.6-4.2 3.9 1.2 5.6L12 15.6 7 18.4l1.2-5.6L4 8.9l5.6-.6L12 3Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>'>
                We always request the top rendition Instagram serves - typically 1080p video and full-resolution photos.
            </x-feature-card>
            <x-feature-card title="No login, ever"
                icon='<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><rect x="4" y="10" width="16" height="10" rx="2" stroke="currentColor" stroke-width="1.8"/><path d="M8 10V7a4 4 0 1 1 8 0v3" stroke="currentColor" stroke-width="1.8"/></svg>'>
                Your Instagram account is never involved. We only read the public post behind the link you paste.
            </x-feature-card>
            <x-feature-card title="Works everywhere"
                icon='<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><rect x="6" y="3" width="12" height="18" rx="2.5" stroke="currentColor" stroke-width="1.8"/><path d="M11 18h2" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>'>
                iPhone, Android, Windows, macOS, Linux - if it runs a browser, it runs InstaGrab. Nothing to install.
            </x-feature-card>
            <x-feature-card title="Private by design"
                icon='<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M12 3 5 6v5c0 4.5 3 8.4 7 10 4-1.6 7-5.5 7-10V6l-7-3Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="m9.5 12 2 2 3.5-4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>'>
                Files stream straight to your device. We store no downloads and never see your Instagram identity.
            </x-feature-card>
            <x-feature-card title="Fast by default"
                icon='<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M13 3 5 14h6l-1 7 8-11h-6l1-7Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>'>
                Resolved posts are cached briefly, so popular links come back instantly instead of re-fetching.
            </x-feature-card>
        </div>
    </div>
</section>

{{-- ======================= HOW IT WORKS ======================= --}}
<section class="section section-tint" id="how-it-works" aria-labelledby="howHeading">
    <div class="container">
        <div class="text-center mb-5">
            <h2 id="howHeading" class="section-title">How it works</h2>
            <p class="text-body-secondary">Three steps. About ten seconds.</p>
        </div>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="step-card">
                    <span class="step-num" aria-hidden="true">1</span>
                    <h3 class="h6 fw-semibold">Copy the link</h3>
                    <p class="small text-body-secondary mb-0">In Instagram, tap the share icon on any public post and choose <strong>Copy Link</strong>.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="step-card">
                    <span class="step-num" aria-hidden="true">2</span>
                    <h3 class="h6 fw-semibold">Paste it above</h3>
                    <p class="small text-body-secondary mb-0">Use the <strong>Paste</strong> button (or press the field) and hit Download. We fetch the media instantly.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="step-card">
                    <span class="step-num" aria-hidden="true">3</span>
                    <h3 class="h6 fw-semibold">Save your files</h3>
                    <p class="small text-body-secondary mb-0">Preview each video or photo, then tap its download button. Carousels list every slide.</p>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- ======================= FAQ ======================= --}}
<section class="section" id="faq" aria-labelledby="faqHeading">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="text-center mb-5">
                    <h2 id="faqHeading" class="section-title">Frequently asked questions</h2>
                </div>
                <div class="accordion accordion-flush" id="faqAccordion">
                    @foreach($faqs as $i => $faq)
                        <x-faq-item :question="$faq['q']" :id="'faq'.$i">{{ $faq['a'] }}</x-faq-item>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>

{{-- ======================= BLOG PREVIEW ======================= --}}
@if($latestPosts->isNotEmpty())
<section class="section section-tint" aria-labelledby="blogHeading">
    <div class="container">
        <div class="d-flex align-items-end justify-content-between mb-4">
            <h2 id="blogHeading" class="section-title mb-0">From the blog</h2>
            <a href="{{ route('blog.index') }}" class="small fw-semibold text-decoration-none">All articles &rarr;</a>
        </div>
        <div class="row g-4">
            @foreach($latestPosts as $post)
                <div class="col-md-4">
                    <x-blog-card :post="$post" />
                </div>
            @endforeach
        </div>
    </div>
</section>
@endif

@endsection

{{-- FAQPage schema built from the same $faqs array rendered above --}}
@push('schema')
<script type="application/ld+json">{!! json_encode([
    '@context' => 'https://schema.org',
    '@type' => 'FAQPage',
    'mainEntity' => collect($faqs)->map(fn ($f) => [
        '@type' => 'Question',
        'name' => $f['q'],
        'acceptedAnswer' => ['@type' => 'Answer', 'text' => $f['a']],
    ])->all(),
], JSON_UNESCAPED_SLASHES) !!}</script>
<script type="application/ld+json">{!! json_encode([
    '@context' => 'https://schema.org',
    '@type' => 'SoftwareApplication',
    'name' => setting('site_name', 'InstaGrab'),
    'applicationCategory' => 'UtilityApplication',
    'operatingSystem' => 'Web',
    'offers' => ['@type' => 'Offer', 'price' => '0', 'priceCurrency' => 'USD'],
    'url' => route('home'),
], JSON_UNESCAPED_SLASHES) !!}</script>
@endpush