{{-- @extends('layouts.app')

@section('content')
    <div class="container py-5">
        @include('partials.navbar')
        <p class="lead" style="width:80%; margin: auto; color: #28396C; font-size:24px">
            This section combines both AI-generated insights and human editorial perspectives to deliver a
            deeper,more meaningful understanding of modern applications. Whether it's a startup platform, marketplace,
            or service-based app, each analysis aims to uncover the thinking, strategy, and technical execution
            behind the product.
        </p>
        <div class="row mt-4 g-1">
            @foreach ($items as $item)
                <div class="col-md-3 mb-4">
                    <div class="card h-100" style="background: whitesmoke">
                        <div class="card-body">
                            <h5 class="fw-bold"
                                style="font-family:Escrow Condensed, Times New Roman, serif;font-size: 28px;line-height: 26px; ">
                                {{ $item->title }}</h5>
                            <p class="text-muted">
                                {{ \Illuminate\Support\Str::limit($item->intro, 240) }}
                            </p>
                            <div class="card-footer">
                            <div class="d-flex align-items-center gap-2 mb-1">
                                <a href="{{ route('analysis.show', $item->id) }}" class="btn btn-primary btn-sm">
                                    Read More Here
                                </a>
                                @if ($item->logo)
                                    <img src="{{ Str::startsWith($item->logo, 'http') ? $item->logo : asset($item->logo) }}"
                                        class="img-fluid ms-auto" style="max-width:50px; height:40px;">
                                @endif
                            </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
@endsection --}}


@extends('layouts.app')

@section('content')


    @include('partials.navbar')
    <div class="container py-5" style="background: whitesmoke">
        <!-- INTRO -->
        <p class="lead text-center mb-5" style="max-width:900px; margin:auto; color:#28396C; font-size:22px;">
            This section combines both AI-generated insights and human editorial perspectives to deliver a
            deeper, more meaningful understanding of modern applications.
        </p>

        @php
            $featured = $items->first();
            $sideItems = $items->skip(1)->take(2);
            $rest = $items->skip(3);
        @endphp


        <div class="row g-3 mb-5">
            @if ($featured)
                <div class="col-lg-5">
                    <div class="card h-100 shadow-sm border-0 p-4" style="border-radius:16px; ">
                        @if ($featured->topic_image)
                            <img src="{{ $featured->topic_image }}" class="img-fluid shadow-sm mb-3"
                                style="width: 100%; max-width: 700px; max-height: 400px; object-fit: cover;">
                        @endif
                        <h2 class="fw-bold mb-3" style="font-family: Escrow Condensed, serif; font-size:33px;">
                            {{ $featured->title }}
                        </h2>
                        <p class="text-muted mb-4" style="font-size:20px">
                            {{ \Illuminate\Support\Str::limit($featured->intro, 420) }}
                        </p>
                        <div class="d-flex align-items-center">
                            <a href="{{ route('analysis.show', $featured->id) }}" class="btn btn-dark btn-sm">
                                Read Analysis →
                            </a>
                            {{-- @if ($featured->logo)
                                <img src="{{ Str::startsWith($featured->logo, 'http') ? $featured->logo : asset($featured->logo) }}"
                                    class="ms-auto" style="max-width:60px; height:45px;">
                            @endif --}}
                        </div>
                        @if ($rest->count())
                            <div class="row mt-4 1-3">
                                @foreach ($rest->skip(2)->take(3) as $item)
                                    <div class="col-6">
                                        <div class="card h-100 shadow-sm border-0 p-2" style="border-radius:12px;">
                                            {{-- @if ($item->topic_image)
                                                <img src="{{ $item->topic_image }}" class="img-fluid mb-2"
                                                    style="height:120px; width:100%; object-fit:cover; border-radius:10px;">
                                            @endif --}}
                                            <img src="{{ asset($item->topic_image) }}" class="img-fluid">
                                            <h6 class="fw-bold" style="font-size:14px;">
                                                {{ \Illuminate\Support\Str::limit($item->title, 60) }}
                                            </h6>
                                            <a href="{{ route('analysis.show', $item->id) }}"
                                                class="btn btn-sm btn-outline-dark mt-auto shadow-none">
                                                Read →
                                            </a>

                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>
            @endif
        </div>
        <!-- SIDE CARDS -->
        <div class="col-lg-3 d-flex flex-column gap-4">
            @foreach ($sideItems as $item)
                <div class="card shadow-sm border-0 p-3" style="border-radius:16px;">
                    @if ($item->topic_image)
                        <img src="{{ $item->topic_image }}" class="img-fluid shadow-sm mb-3"
                            style="width: 100%; max-width: 700px; max-height: 400px; object-fit: cover;">
                    @endif
                    <h5 class="fw-bold mb-2" style="font-family: Escrow Condensed, serif; font-size:20px;">
                        {{ $item->title }}
                    </h5>
                    <p class="text-muted small">
                        {{ \Illuminate\Support\Str::limit($item->intro, 120) }}
                    </p>
                    <div class="d-flex align-items-center">
                        <a href="{{ route('analysis.show', $item->id) }}" class="btn btn-outline-dark btn-sm shadow-none">
                            Read More Here →
                        </a>
                        {{-- @if ($item->logo)
                            <img src="{{ Str::startsWith($item->logo, 'http') ? $item->logo : asset($item->logo) }}"
                                class="ms-auto" style="max-width:100px; height:35px;">
                        @endif --}}
                    </div>
                </div>

            @endforeach

        </div>
      
        <div class="col-lg-4 d-flex flex-column gap-1">
            <h4 style="lead" style="font-weight:100;text-transform:uppercase !important">Related Content</h4>
            @foreach ($items as $item)
                <div class="mt-1">
                    <span style="color: #3653ab">{{ $item->created_at->format('F j, Y') }}</span><br>
                    @if ($item->news_url)
                        <a href="{{ $item->news_url }}" target="_blank" class="poa" style="text-decoration: none;">
                            {{ $item->news_title }} - <span style="color: green ">{{ $item->origin }} </span>
                        </a>
                    @else
                    @endif
                </div>
                <span
                    style="text-align: center; font-weight:100; color:gray">......................................................................................................................</span>
            @endforeach
        </div>
    </div>
      
    <!-- REST GRID -->
    <div class="row g-4">
        @foreach ($rest as $item)
            <div class="col-md-4">

                <div class="card h-100 shadow-sm border-0 p-3" style=" background:#f9fafc;">
                    @if ($item->topic_image)
                        <img src="{{ $item->topic_image }}" class="img-fluid shadow-sm mb-3"
                            style="width: 100%; max-width: 700px; max-height: 400px; object-fit: cover;">
                    @endif
                    <h6 class="fw-bold mb-2" style="font-family: Escrow Condensed, serif;">
                        {{ $item->title }}
                    </h6>

                    <p class="text-muted small">
                        {{ \Illuminate\Support\Str::limit($item->intro, 100) }}
                    </p>

                    <div class="d-flex align-items-center mt-auto">
                        <a href="{{ route('analysis.show', $item->id) }}" class="btn btn-dark btn-sm shadow_none">
                            Read More Here →
                        </a>

                        {{-- @if ($item->logo)
                            <img src="{{ Str::startsWith($item->logo, 'http') ? $item->logo : asset($item->logo) }}"
                                class="ms-auto" style="max-width:40px;">
                        @endif --}}
                    </div>

                </div>

            </div>
        @endforeach
    </div>

    </div>
    <br>
@endsection