@extends('layouts.app')

@section('content')
<div class="container py-5">
    {{-- Hero Section --}}
    <div class="row align-items-center mb-5">
        <div class="col-md-6">
            <h1 class="display-4 fw-bold mb-3">
                <span id="typed-text"></span>
            </h1>
            <p class="lead mb-4">Cetak banner, stiker, undangan, dan produk digital printing lainnya dengan harga terjangkau dan proses cepat. Upload desain, pesan online, dan pantau status pesanan Anda!</p>
            <a href="{{ route('order.create') }}" class="btn btn-primary btn-lg me-2">Pesan Sekarang</a>
            <a href="https://wa.me/6281234567890" class="btn btn-success btn-lg"><i class="bi bi-whatsapp"></i> Chat WhatsApp</a>
        </div>
        <div class="col-md-6">
            <div id="mainCarousel" class="carousel slide shadow" data-bs-ride="carousel" data-bs-interval="3000">
                <div class="carousel-inner rounded-4">
                    <div class="carousel-item active">
                        <img src="https://images.unsplash.com/photo-1515378791036-0648a3ef77b2?auto=format&fit=crop&w=600&q=80" class="d-block w-100" alt="Banner Printing">
                    </div>
                    <div class="carousel-item">
                        <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=600&q=80" class="d-block w-100" alt="Stiker Printing">
                    </div>
                    <div class="carousel-item">
                        <img src="https://images.unsplash.com/photo-1465101046530-73398c7f28ca?auto=format&fit=crop&w=600&q=80" class="d-block w-100" alt="Undangan Printing">
                    </div>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#mainCarousel" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#mainCarousel" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>
        </div>
    </div>

    {{-- Produk & Layanan --}}
    <div class="text-center mb-5">
        <h2 class="fw-bold mb-4">Produk & Layanan</h2>
        <div class="row">
            @forelse($products as $product)
                <div class="col-md-4 mb-4">
                    <div class="card h-100 shadow-sm">
                        @if($product->gambar)
                            <img src="{{ asset('storage/'.$product->gambar) }}" class="card-img-top" alt="{{ $product->nama_produk }}" style="object-fit:cover;max-height:180px;">
                        @endif
                        <div class="card-body text-center">
                            <h5 class="card-title fw-bold">{{ $product->nama_produk }}</h5>
                            @if($product->harga)
                                <div class="mb-2 text-primary">Rp{{ number_format($product->harga,0,',','.') }}</div>
                            @endif
                            <p class="card-text">{{ $product->deskripsi }}</p>
                            <a href="{{ route('order.create', ['produk' => $product->id]) }}" class="btn btn-outline-primary mt-2">
                                <i class="bi bi-cart"></i> Pesan Produk
                            </a>
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-12 text-muted">Belum ada produk tersedia.</div>
            @endforelse
        </div>
    </div>

    {{-- Cara Pemesanan --}}
    <div class="text-center mb-5">
        <h2 class="fw-bold mb-4">Cara Pemesanan</h2>
        <div class="row">
            @php
                $steps = [
                    ['icon' => 'bi-cart', 'title' => 'Pilih Produk', 'desc' => 'Pilih produk yang ingin dipesan dan klik tombol "Pesan Sekarang".'],
                    ['icon' => 'bi-upload', 'title' => 'Isi Detail & Upload Desain', 'desc' => 'Isi data diri, detail pesanan, dan upload file desain Anda.'],
                    ['icon' => 'bi-gear', 'title' => 'Pesanan Diproses', 'desc' => 'Pesanan Anda akan diproses, dan status bisa dipantau di halaman status pesanan.'],
                ];
            @endphp
            @foreach($steps as $step)
                <div class="col-md-4 mb-4">
                    <div class="p-4 border rounded shadow-sm h-100">
                        <div class="mb-3 display-5 text-primary">
                            <i class="bi {{ $step['icon'] }}"></i>
                        </div>
                        <h5 class="fw-bold">{{ $step['title'] }}</h5>
                        <p>{{ $step['desc'] }}</p>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    {{-- Kontak --}}
    <div class="text-center mb-5">
    <h2 class="fw-bold mb-4">Kontak Kami</h2>
    <div class="row justify-content-center">
        <div class="col-md-10" style="max-width:1200px;">
            <div class="card shadow-lg border-0 rounded-4">
                <div class="card-body py-4">
                    <div class="row g-4 align-items-center">
                        <div class="col-md-4">
                            <div class="d-flex flex-column align-items-center">
                                <div class="bg-success bg-opacity-10 rounded-circle p-3 mb-2">
                                    <i class="bi bi-whatsapp text-success" style="font-size:2rem"></i>
                                </div>
                                <div class="fw-bold">WhatsApp</div>
                                <a href="https://wa.me/6281234567890" target="_blank" class="text-decoration-none text-success">0812-3456-7890</a>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="d-flex flex-column align-items-center">
                                <div class="bg-primary bg-opacity-10 rounded-circle p-3 mb-2">
                                    <i class="bi bi-envelope text-primary" style="font-size:2rem"></i>
                                </div>
                                <div class="fw-bold">Email</div>
                                <a href="mailto:info@digitalprinting.com" class="text-decoration-none text-primary">info@digitalprinting.com</a>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="d-flex flex-column align-items-center">
                                <div class="bg-warning bg-opacity-10 rounded-circle p-3 mb-2">
                                    <i class="bi bi-geo-alt text-warning" style="font-size:2rem"></i>
                                </div>
                                <div class="fw-bold">Alamat</div>
                                <div class="text-dark">Jl. Contoh No. 123, Kota Anda</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Typed.js -->
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<script>
  var typed = new Typed('#typed-text', {
    strings: [
      'Digital Printing Mudah & Cepat',
      'Cetak Banner, Stiker, Undangan',
      'Proses Cepat & Harga Terjangkau',
      'Upload Desain, Pantau Status Online'
    ],
    typeSpeed: 50,
    backSpeed: 30,
    loop: true
  });
</script>

<style>
.typed-cursor {
  color: #20c997;
}
#typed-text {
  font-weight: bold;
  background: linear-gradient(90deg, #23395d, #20c997, #ffc107, #dc3545, #23395d);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbow-text 3s linear infinite;
}
@keyframes rainbow-text {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.card, .border, .shadow-sm {
  border-radius: 1rem !important;
  border-color: #e3f0ff !important;
}
.card-title, .fw-bold, h2, h5, h1 {
  color: #23395d !important;
}
.btn-outline-primary {
  color: #20c997 !important;
  border-color: #20c997 !important;
}
.btn-outline-primary:hover {
  background: #20c997 !important;
  color: #fff !important;
  border-color: #20c997 !important;
}
.text-primary {
  color: #20c997 !important;
}
.display-5.text-primary i, .bi-cart, .bi-upload, .bi-gear {
  color: #20c997 !important;
}
</style>
@endsection