@extends('layouts.app')

@php $siteName = App\Models\Setting::get('site_name', '深圳市云创芯电子有限公司'); @endphp
@section('title', $solution->seoTitle() . ' - ' . $siteName)
@section('description', $solution->seoDescription())

@section('content')
    <section class="hero-aurora">
        <div class="hero-grid"></div>
        <div class="relative max-w-8xl mx-auto px-4 sm:px-6 lg:px-8 py-14 lg:py-20">
            <nav class="mb-5 flex items-center gap-1.5 text-sm text-muted">
                <a href="{{ url('/') }}" class="hover:text-primary">首页</a><span>/</span>
                <a href="{{ route('solutions.index') }}" class="hover:text-primary">解决方案</a><span>/</span>
                <span class="text-fg">{{ $solution->name }}</span>
            </nav>
            <div class="flex flex-wrap items-center gap-3">
                @if ($solution->power)<span class="badge badge-primary">{{ $solution->power }}</span>@endif
                <span class="badge">{{ $solution->powerSegmentLabel() }}</span>
                <span class="badge">{{ $solution->applicationLabel() }}</span>
                <span class="badge">{{ $solution->chipPlatformLabel() }}</span>
            </div>
            <h1 class="mt-4 max-w-3xl text-3xl font-bold tracking-tight text-fg sm:text-4xl gradient-text">{{ $solution->name }}</h1>
            <p class="mt-4 max-w-2xl text-base text-muted">{{ $solution->summary }}</p>
        </div>
    </section>

    <section class="px-4 sm:px-6 lg:px-8 py-12 lg:py-16">
        <div class="max-w-8xl mx-auto grid gap-10 lg:grid-cols-3">
            <div class="lg:col-span-2 space-y-6">
                @if ($solution->description)
                    <div class="prose text-fg">{!! nl2br(e($solution->description)) !!}</div>
                @endif

                @if ($solution->advantagesList())
                    <h2 class="text-xl font-bold text-fg">方案优势</h2>
                    <div class="grid gap-4 sm:grid-cols-2">
                        @foreach ($solution->advantagesList() as $a)
                            <div class="flex items-start gap-3 rounded-lg border border-line bg-surface p-4">
                                <x-icon name="check" :size="20" class="mt-0.5 shrink-0 text-primary" />
                                <span class="text-sm text-fg">{{ $a }}</span>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>

            <aside class="lg:col-span-1">
                <div class="glass rounded-2xl p-6 lg:sticky lg:top-24">
                    <h3 class="text-lg font-semibold text-fg">获取方案详情</h3>
                    <p class="mt-2 text-sm text-muted">留下需求，我们的应用工程师将为您提供完整参考设计与选型支持。</p>
                    <a href="{{ url('/contact') }}?subject={{ urlencode($solution->name) }}" class="cta-glow mt-5 w-full justify-center rounded-lg px-5 py-3 text-sm font-semibold">联系获取方案 <x-icon name="arrow" :size="18" /></a>
                </div>
            </aside>
        </div>
    </section>
@endsection