@extends('layouts.app')

@section('title', '联系我们 - 深圳市云创芯电子有限公司')

@section('content')
    {{-- Hero --}}
    <section class="hero-aurora relative">
        <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24">
            <div class="reveal max-w-2xl">
                <span class="eyebrow">联系我们</span>
                <h1 class="mt-4 text-3xl font-extrabold tracking-tight gradient-text sm:text-4xl lg:text-5xl">携手共创 TypeC 快速充电未来</h1>
                <p class="mt-4 text-base leading-relaxed text-muted">无论是方案选型、样品申请还是技术合作，留下联系方式，我们的方案团队将在 1 个工作日内与你对接。</p>
            </div>
        </div>
    </section>

    {{-- 联络方式 + 表单 --}}
    <section class="section px-4 sm:px-6 lg:px-8 -mt-10 lg:-mt-16">
        <div class="mx-auto max-w-6xl">
            <div class="grid gap-8 lg:grid-cols-5">
                <!-- 左栏：联络方式 -->
                <div class="reveal lg:col-span-2 glow-card rounded-2xl p-6 sm:p-8">
                    <h2 class="text-lg font-semibold text-fg">我们的联络方式</h2>
                    <p class="mt-1 text-sm text-muted">深圳市云创芯电子有限公司 · 专注于多口 TypeC 接口 IC。</p>

                    <ul class="mt-6 space-y-5">
                        <li class="flex items-start gap-3">
                            <x-icon name="box" :size="22" class="mt-0.5 shrink-0 text-primary" />
                            <div>
                                <p class="text-sm font-medium text-muted">公司名称</p>
                                <p class="text-base font-semibold text-fg">深圳市云创芯电子有限公司</p>
                            </div>
                        </li>
                        <li class="flex items-start gap-3">
                            <x-icon name="mail" :size="22" class="mt-0.5 shrink-0 text-primary" />
                            <div>
                                <p class="text-sm font-medium text-muted">电子邮箱</p>
                                <a href="mailto:service@51chip.net" class="text-base font-semibold text-fg transition-colors hover:text-primary">service@51chip.net</a>
                            </div>
                        </li>
                        <li class="flex items-start gap-3">
                            <x-icon name="phone" :size="22" class="mt-0.5 shrink-0 text-primary" />
                            <div>
                                <p class="text-sm font-medium text-muted">联系电话</p>
                                <a href="tel:13510116819" class="text-base font-semibold text-fg transition-colors hover:text-primary">13510116819</a>
                            </div>
                        </li>
                        <li class="flex items-start gap-3">
                            <x-icon name="pin" :size="22" class="mt-0.5 shrink-0 text-primary" />
                            <div>
                                <p class="text-sm font-medium text-muted">地址</p>
                                <p class="text-base font-semibold text-fg">深圳市南山区科技园</p>
                            </div>
                        </li>
                    </ul>
                </div>

                <!-- 右栏：留言表单（服务端渲染，无需 JS 即可提交） -->
                <div class="reveal lg:col-span-3 glow-card rounded-2xl p-6 sm:p-8">
                    <h2 class="text-lg font-semibold text-fg">商务合作表单</h2>
                    <p class="mt-1 text-sm text-muted">提交后我们会在 1 个工作日内回复。</p>

                    @if (session('success'))
                        <div class="mt-6 rounded-lg border border-success bg-success-soft px-4 py-3 text-sm text-success">
                            {{ session('success') }}
                        </div>
                    @endif

                    <form method="POST" action="{{ url('/contact') }}" class="mt-6 space-y-4" novalidate>
                        @csrf

                        <div class="grid gap-4 sm:grid-cols-2">
                            <div>
                                <label for="name" class="mb-1.5 block text-sm font-medium text-fg">姓名 <span class="text-danger">*</span></label>
                                <input id="name" name="name" type="text" maxlength="40" value="{{ old('name') }}" required
                                    class="w-full rounded-lg border {{ $errors->has('name') ? 'border-danger' : 'border-line' }} bg-surface-2 px-3 py-2.5 text-sm text-fg placeholder:text-muted focus:border-primary focus:outline-none focus:shadow-[0_0_0_3px_var(--color-primary-soft)]">
                                @error('name')
                                    <p class="mt-1 text-sm text-danger">{{ $message }}</p>
                                @enderror
                            </div>
                            <div>
                                <label for="company" class="mb-1.5 block text-sm font-medium text-fg">公司</label>
                                <input id="company" name="company" type="text" maxlength="120" value="{{ old('company') }}"
                                    class="w-full rounded-lg border {{ $errors->has('company') ? 'border-danger' : 'border-line' }} bg-surface-2 px-3 py-2.5 text-sm text-fg placeholder:text-muted focus:border-primary focus:outline-none focus:shadow-[0_0_0_3px_var(--color-primary-soft)]">
                                @error('company')
                                    <p class="mt-1 text-sm text-danger">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div class="grid gap-4 sm:grid-cols-2">
                            <div>
                                <label for="phone" class="mb-1.5 block text-sm font-medium text-fg">电话</label>
                                <input id="phone" name="phone" type="text" maxlength="20" value="{{ old('phone') }}"
                                    class="w-full rounded-lg border {{ $errors->has('phone') ? 'border-danger' : 'border-line' }} bg-surface-2 px-3 py-2.5 text-sm text-fg placeholder:text-muted focus:border-primary focus:outline-none focus:shadow-[0_0_0_3px_var(--color-primary-soft)]">
                                @error('phone')
                                    <p class="mt-1 text-sm text-danger">{{ $message }}</p>
                                @enderror
                            </div>
                            <div>
                                <label for="email" class="mb-1.5 block text-sm font-medium text-fg">邮箱 <span class="text-danger">*</span></label>
                                <input id="email" name="email" type="email" maxlength="120" value="{{ old('email') }}" required
                                    class="w-full rounded-lg border {{ $errors->has('email') ? 'border-danger' : 'border-line' }} bg-surface-2 px-3 py-2.5 text-sm text-fg placeholder:text-muted focus:border-primary focus:outline-none focus:shadow-[0_0_0_3px_var(--color-primary-soft)]">
                                @error('email')
                                    <p class="mt-1 text-sm text-danger">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div>
                            <label for="subject" class="mb-1.5 block text-sm font-medium text-fg">主题 <span class="text-danger">*</span></label>
                            <input id="subject" name="subject" type="text" maxlength="80" value="{{ old('subject') }}" required
                                class="w-full rounded-lg border {{ $errors->has('subject') ? 'border-danger' : 'border-line' }} bg-surface-2 px-3 py-2.5 text-sm text-fg placeholder:text-muted focus:border-primary focus:outline-none focus:shadow-[0_0_0_3px_var(--color-primary-soft)]">
                            @error('subject')
                                <p class="mt-1 text-sm text-danger">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="message" class="mb-1.5 block text-sm font-medium text-fg">需求描述 <span class="text-danger">*</span></label>
                            <textarea id="message" name="message" maxlength="1000" rows="4" required
                                class="w-full rounded-lg border {{ $errors->has('message') ? 'border-danger' : 'border-line' }} bg-surface-2 px-3 py-2.5 text-sm text-fg placeholder:text-muted focus:border-primary focus:outline-none focus:shadow-[0_0_0_3px_var(--color-primary-soft)]">{{ old('message') }}</textarea>
                            @error('message')
                                <p class="mt-1 text-sm text-danger">{{ $message }}</p>
                            @enderror
                        </div>

                        <button type="submit" class="cta-glow inline-flex w-full items-center justify-center gap-2 rounded-lg px-5 py-3 text-sm font-semibold">
                            提交需求 <x-icon name="send" :size="18" />
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </section>
@endsection