@extends('layouts.public')

@section('title', $title)

@section('meta')
    <meta name="description" content="{{ $description }}">
    <link rel="canonical" href="{{ $url }}">
    <meta name="robots" content="index, follow, max-image-preview:large">

    <meta property="og:type" content="article">
    <meta property="og:site_name" content="Credify GO!">
    <meta property="og:title" content="{{ $title }}">
    <meta property="og:description" content="{{ $description }}">
    <meta property="og:url" content="{{ $url }}">
    <meta property="og:image" content="https://credifygo.com/og-image.png">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{{ $title }}">
    <meta name="twitter:description" content="{{ $description }}">
    <meta name="twitter:image" content="https://credifygo.com/og-image.png">
@endsection

@push('jsonld')
    <script type="application/ld+json">{!! json_encode($schema, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}</script>
@endpush

@section('content')
    <main class="max-w-3xl mx-auto px-4 pt-28 pb-20">
        <nav aria-label="Ruta de navegación" class="text-sm text-slate-400 mb-8">
            <a href="/" class="hover:text-emerald-400">Inicio</a>
            <span class="mx-2 text-slate-600">›</span>
            <span class="text-slate-300">{{ $heading }}</span>
        </nav>

        <article class="prose-invert">
            <h1 class="text-4xl md:text-5xl font-extrabold tracking-tight text-white leading-tight mb-6">{{ $heading }}</h1>
            @yield('article')
        </article>

        <section class="mt-16">
            <h2 class="text-2xl md:text-3xl font-extrabold tracking-tight text-white mb-6">Preguntas frecuentes</h2>
            <div class="space-y-4">
                @foreach ($faqs as $faq)
                    <div class="bg-white/[0.04] border border-white/10 rounded-2xl p-5">
                        <h3 class="font-semibold text-white mb-2">{{ $faq['q'] }}</h3>
                        <p class="text-slate-300 leading-relaxed">{{ $faq['a'] }}</p>
                    </div>
                @endforeach
            </div>
        </section>

        <section class="mt-16 text-center bg-gradient-to-br from-emerald-600 to-emerald-800 rounded-3xl p-10">
            <h2 class="text-2xl md:text-3xl font-extrabold text-white mb-3">Pon en cintura tu negocio de préstamos</h2>
            <p class="text-emerald-50 mb-6">Pruébalo gratis en la demo. Sin tarjeta, sin instalar nada.</p>
            <a href="/demo" class="inline-block bg-white text-emerald-800 font-bold px-8 py-4 rounded-xl hover:bg-emerald-50 transition-colors">Probar la demo</a>
        </section>
    </main>
@endsection