@extends('layouts.app')

@section('content')
    {{-- Hero：由后台「首页轮播」管理（富文本 + 双 CTA）；mode=carousel 轮播，mode=single 独立单图 --}}
    <section class="relative overflow-hidden bg-gradient-to-br from-primary to-primary-hover text-white">
        <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8 py-20 lg:py-28">
            @if ($heroSlides->isEmpty())
                <p class="text-white/80">尚未配置首页轮播内容，请到后台「首页轮播」添加。</p>
            @elseif ($heroMode === 'single')
                @include('partials.hero-slide', ['slide' => $heroSlides->first()])
            @else
                <div class="hero-carousel" data-hero>
                    <div class="hero-track">
                        @foreach ($heroSlides as $slide)
                            <div class="hero-slide @if ($loop->first) is-active @endif" data-index="{{ $loop->index }}">
                                @include('partials.hero-slide', ['slide' => $slide])
                            </div>
                        @endforeach
                    </div>

                    @if ($heroSlides->count() > 1)
                        <button type="button" class="hero-arrow hero-prev" aria-label="上一条" data-prev>&#8249;</button>
                        <button type="button" class="hero-arrow hero-next" aria-label="下一条" data-next>&#8250;</button>
                        <div class="hero-dots">
                            @foreach ($heroSlides as $slide)
                                <button type="button" class="hero-dot @if ($loop->first) is-active @endif" data-dot="{{ $loop->index }}" aria-label="第 {{ $loop->index + 1 }} 条"></button>
                            @endforeach
                        </div>
                    @endif
                </div>
            @endif
        </div>
    </section>

    {{-- 核心产品 --}}
    <section class="px-4 sm:px-6 lg:px-8 py-14 lg:py-20">
        <div class="max-w-8xl mx-auto">
            <div class="flex flex-wrap items-end justify-between gap-4">
                <div>
                    <h2 class="text-2xl font-bold tracking-tight text-fg">核心产品</h2>
                    <p class="mt-1 text-sm text-muted">覆盖多口 TypeC 接口、协议转换与同步整流控制芯片</p>
                </div>
                <a href="{{ url('/products') }}" class="text-sm font-medium text-primary hover:underline">查看全部产品 →</a>
            </div>

            <div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
                @forelse ($products as $product)
                    <a href="{{ route('products.show', $product->slug) }}" class="group flex flex-col rounded-xl border border-line bg-surface p-6 shadow-card transition hover:-translate-y-0.5 hover:shadow-lg">
                        <span class="inline-block w-fit rounded bg-primary-soft px-2 py-1 font-mono text-xs font-medium text-primary">{{ $product->model ?: $product->slug }}</span>
                        <h3 class="mt-4 text-lg font-semibold text-fg transition group-hover:text-primary">{{ $product->name }}</h3>
                        <p class="mt-2 line-clamp-3 text-sm text-muted">{{ $product->summary ?: Str::limit(strip_tags($product->description), 90) }}</p>
                        <span class="mt-4 inline-flex items-center gap-1 text-sm font-medium text-primary">
                            查看详情 <x-icon name="arrow" :size="16" />
                        </span>
                    </a>
                @empty
                    <p class="text-sm text-muted">产品正在整理中，敬请期待。</p>
                @endforelse
            </div>
        </div>
    </section>

    {{-- 解决方案 --}}
    <section class="px-4 sm:px-6 lg:px-8 py-14 lg:py-20">
        <div class="max-w-8xl mx-auto">
            <div class="flex flex-wrap items-end justify-between gap-4">
                <div>
                    <h2 class="text-2xl font-bold tracking-tight text-fg">解决方案</h2>
                    <p class="mt-1 text-sm text-muted">覆盖 30W–140W 多功率段与多场景的快充参考设计</p>
                </div>
                <a href="{{ url('/solutions') }}" class="text-sm font-medium text-primary hover:underline">查看全部方案 →</a>
            </div>

            <div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
                @forelse ($solutions as $solution)
                    <a href="{{ route('solutions.show', $solution->slug) }}" class="group flex flex-col rounded-xl border border-line bg-surface p-6 shadow-card transition hover:-translate-y-0.5 hover:shadow-lg">
                        <span class="inline-block w-fit rounded bg-primary-soft px-2 py-1 font-mono text-xs font-medium text-primary">{{ $solution->power }}</span>
                        <h3 class="mt-4 text-lg font-semibold text-fg transition group-hover:text-primary">{{ $solution->name }}</h3>
                        <p class="mt-2 line-clamp-3 text-sm text-muted">{{ $solution->summary }}</p>
                        <span class="mt-4 inline-flex items-center gap-1 text-sm font-medium text-primary">
                            查看详情 <x-icon name="arrow" :size="16" />
                        </span>
                    </a>
                @empty
                    <p class="text-sm text-muted">方案正在整理中，敬请期待。</p>
                @endforelse
            </div>
        </div>
    </section>

    {{-- 技术文章 --}}
    @if ($articles->isNotEmpty())
    <section class="border-t border-line bg-surface px-4 py-14 sm:px-6 lg:py-20">
        <div class="max-w-8xl mx-auto">
            <div class="flex flex-wrap items-center justify-between gap-4">
                <div>
                    <h2 class="text-2xl font-bold tracking-tight text-fg">技术文章</h2>
                    <p class="mt-1 text-sm text-muted">设计指南、应用笔记与行业方案解读</p>
                </div>
                <a href="{{ url('/articles') }}" class="text-sm font-medium text-primary hover:underline">浏览全部文章 →</a>
            </div>

            <div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
                @foreach ($articles as $article)
                    <a href="{{ route('articles.show', $article->slug) }}" class="group flex flex-col rounded-xl border border-line bg-surface p-6 shadow-card transition hover:-translate-y-0.5 hover:shadow-lg">
                        <span class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-primary-soft text-primary">
                            <x-icon name="doc" :size="22" />
                        </span>
                        <h3 class="mt-4 text-lg font-semibold text-fg transition group-hover:text-primary">{{ $article->title }}</h3>
                        <p class="mt-2 line-clamp-3 text-sm text-muted">{{ $article->summary ?: Str::limit(strip_tags($article->body), 90) }}</p>
                        <span class="mt-4 text-xs text-muted">{{ $article->published_at?->format('Y-m-d') }}</span>
                    </a>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    {{-- 新闻动态 --}}
    @if ($news->isNotEmpty())
    <section class="border-t border-line bg-surface px-4 py-14 sm:px-6 lg:py-20">
        <div class="max-w-8xl mx-auto">
            <div class="flex flex-wrap items-center justify-between gap-4">
                <div>
                    <h2 class="text-2xl font-bold tracking-tight text-fg">新闻动态</h2>
                    <p class="mt-1 text-sm text-muted">行业资讯、公司动态与展会活动</p>
                </div>
                <a href="{{ url('/news') }}" class="text-sm font-medium text-primary hover:underline">浏览全部新闻 →</a>
            </div>

            <div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
                @foreach ($news as $item)
                    <a href="{{ route('news.show', $item->slug) }}" class="group flex flex-col rounded-xl border border-line bg-surface p-6 shadow-card transition hover:-translate-y-0.5 hover:shadow-lg">
                        <span class="inline-block w-fit rounded bg-primary-soft px-2 py-1 font-mono text-xs font-medium text-primary">{{ $item->categoryLabel() }}</span>
                        <h3 class="mt-4 text-lg font-semibold text-fg transition group-hover:text-primary">{{ $item->title }}</h3>
                        <p class="mt-2 line-clamp-3 text-sm text-muted">{{ $item->summary }}</p>
                        <span class="mt-4 text-xs text-muted">{{ $item->published_at?->format('Y-m-d') }}</span>
                    </a>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    {{-- 能力与资源 --}}
    <section class="px-4 sm:px-6 lg:px-8 py-14 lg:py-20">
        <div class="max-w-8xl mx-auto">
            <h2 class="text-2xl font-bold tracking-tight text-fg">能力与资源</h2>
            <div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
                <a href="{{ url('/products') }}" class="group rounded-xl border border-line bg-surface p-6 shadow-card transition hover:-translate-y-0.5 hover:shadow-lg">
                    <span class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-primary-soft text-primary"><x-icon name="box" :size="22" /></span>
                    <h3 class="mt-4 font-semibold text-fg">产品中心</h3>
                    <p class="mt-1 text-sm text-muted">多口 TypeC 接口IC 完整选型。</p>
                </a>
                <a href="{{ url('/articles') }}" class="group rounded-xl border border-line bg-surface p-6 shadow-card transition hover:-translate-y-0.5 hover:shadow-lg">
                    <span class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-primary-soft text-primary"><x-icon name="doc" :size="22" /></span>
                    <h3 class="mt-4 font-semibold text-fg">技术文章</h3>
                    <p class="mt-1 text-sm text-muted">设计指南、应用笔记与方案解读。</p>
                </a>
                <a href="{{ url('/glossary') }}" class="group rounded-xl border border-line bg-surface p-6 shadow-card transition hover:-translate-y-0.5 hover:shadow-lg">
                    <span class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-primary-soft text-primary"><x-icon name="book" :size="22" /></span>
                    <h3 class="mt-4 font-semibold text-fg">术语库</h3>
                    <p class="mt-1 text-sm text-muted">PD / PHY / 快充协议关键术语速查。</p>
                </a>
                <a href="{{ url('/forum') }}" class="group rounded-xl border border-line bg-surface p-6 shadow-card transition hover:-translate-y-0.5 hover:shadow-lg">
                    <span class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-primary-soft text-primary"><x-icon name="chat" :size="22" /></span>
                    <h3 class="mt-4 font-semibold text-fg">技术论坛</h3>
                    <p class="mt-1 text-sm text-muted">与工程师交流选型、调试与量产经验。</p>
                </a>
            </div>
        </div>
    </section>

    {{-- CTA 条 --}}
    <section class="px-4 sm:px-6 lg:px-8 pb-16">
        <div class="max-w-8xl mx-auto rounded-2xl bg-surface-2 px-6 py-10 text-center sm:px-10">
            <h2 class="text-xl font-bold tracking-tight text-fg sm:text-2xl">需要选型支持或样品申请？</h2>
            <p class="mt-2 text-sm text-muted">我们的应用工程师可协助您完成方案评估与量产导入。</p>
            <a href="{{ url('/contact') }}" class="mt-6 inline-flex items-center gap-2 rounded-lg bg-primary px-6 py-3 text-sm font-semibold text-white transition hover:bg-primary-hover">
                联系我们 <x-icon name="arrow" :size="18" />
            </a>
        </div>
    </section>

    <script>
        (function () {
            var carousels = document.querySelectorAll('[data-hero]');
            carousels.forEach(function (root) {
                var slides = Array.prototype.slice.call(root.querySelectorAll('.hero-slide'));
                var dots = Array.prototype.slice.call(root.querySelectorAll('.hero-dot'));
                if (slides.length < 2) return;

                var current = 0;
                var timer = null;
                var INTERVAL = 6000;

                function show(index) {
                    current = (index + slides.length) % slides.length;
                    slides.forEach(function (s, i) {
                        s.classList.toggle('is-active', i === current);
                    });
                    dots.forEach(function (d, i) {
                        d.classList.toggle('is-active', i === current);
                    });
                }

                function next() { show(current + 1); }
                function prev() { show(current - 1); }

                function start() {
                    stop();
                    timer = setInterval(next, INTERVAL);
                }
                function stop() {
                    if (timer) { clearInterval(timer); timer = null; }
                }

                root.querySelector('[data-next]').addEventListener('click', function () { next(); start(); });
                root.querySelector('[data-prev]').addEventListener('click', function () { prev(); start(); });
                dots.forEach(function (d) {
                    d.addEventListener('click', function () {
                        show(parseInt(d.getAttribute('data-dot'), 10));
                        start();
                    });
                });

                root.addEventListener('mouseenter', stop);
                root.addEventListener('mouseleave', start);

                show(0);
                start();
            });
        })();
    </script>
@endsection