@extends('layouts.app')
@section('title','OneDesignSpot, OneDesign')
@section('content')
@php
  $heroImg = $globalSettings['hero_image_url'] ?? null;
  $heroTitle = $globalSettings['hero_title'] ?? 'Cetak Berkualitas.<br>Website Memukau.';
  $heroSubtitle = $globalSettings['hero_subtitle'] ?? 'OneDesign menggabungkan keahlian digital printing & web design modern untuk mengangkat brand Anda ke level berikutnya. Grid-based, rapi, profesional.';
  $heroBadge = $globalSettings['hero_badge'] ?? 'Solusi Cetak & Digital Terpercaya';
  $heroSec = $globalSettings['theme_secondary'] ?? '#0f172a';
  $heroPri = $globalSettings['theme_primary'] ?? '#2563eb';
  $heroSecR = hexdec(substr($heroSec,1,2)); $heroSecG = hexdec(substr($heroSec,3,2)); $heroSecB = hexdec(substr($heroSec,5,2));
  $heroPriR = hexdec(substr($heroPri,1,2)); $heroPriG = hexdec(substr($heroPri,3,2)); $heroPriB = hexdec(substr($heroPri,5,2));
@endphp
<section class="hero hero-fullscreen" style="min-height:100vh; display:flex; align-items:center; position:relative; overflow:hidden;">
  @if($heroImg)
    <div class="hero-bg" style="background-image:url('{{ $heroImg }}')"></div>
    <div class="hero-overlay" style="background: linear-gradient(rgba({{ $heroSecR }}, {{ $heroSecG }}, {{ $heroSecB }}, 0.82), rgba({{ $heroPriR }}, {{ $heroPriG }}, {{ $heroPriB }}, 0.65));"></div>
  @endif
  <div class="container position-relative" style="z-index:2">
    <div class="row align-items-center g-4 py-5 w-100" style="min-height: 88vh;">
      <div class="col-lg-6">
        <span class="badge bg-white text-primary mb-3 px-3 py-2 rounded-pill"><i class="bi bi-stars me-1"></i> {{ $heroBadge }}</span>
        <h1 class="display-5 fw-bold lh-1 mb-3">{!! nl2br(e($heroTitle)) !!}</h1>
        <p class="lead opacity-75 mb-4">{{ $heroSubtitle }}</p>
        <div class="d-flex gap-2">
          <a href="{{ route('products.index') }}" class="btn btn-light btn-lg px-4 fw-semibold">Lihat Katalog <i class="bi bi-arrow-right ms-1"></i></a>
          <a href="{{ route('contact.index') }}" class="btn btn-outline-light btn-lg px-4">Hubungi Kami</a>
        </div>
        <div class="d-flex gap-4 mt-4 small opacity-75">
          <span><i class="bi bi-check-circle me-1"></i> 1000+ Klien Puas</span><span><i class="bi bi-check-circle me-1"></i> Garansi Kualitas</span><span><i class="bi bi-check-circle me-1"></i> 24 Jam Respon</span>
        </div>
      </div>
      <div class="col-lg-6">
        @php
          $card1Title = $globalSettings['hero_card1_title'] ?? 'Digital Printing';
          $card1Desc = $globalSettings['hero_card1_desc'] ?? 'Banner, brosur, kartu nama, stiker, merchandise premium.';
          $card1Icon = $globalSettings['hero_card1_icon'] ?? 'bi-printer';
          $card2Title = $globalSettings['hero_card2_title'] ?? 'Web Design';
          $card2Desc = $globalSettings['hero_card2_desc'] ?? 'Landing page, company profile, e-commerce, custom app.';
          $card2Icon = $globalSettings['hero_card2_icon'] ?? 'bi-code-slash';
          $promoEnabled = $globalSettings['hero_promo_enabled'] ?? true;
          $promoTitle = $globalSettings['hero_promo_title'] ?? 'Promo Bulan Ini';
          $promoDesc = $globalSettings['hero_promo_desc'] ?? 'Diskon 20% untuk paket printing + website.';
          $promoBadge = $globalSettings['hero_promo_badge'] ?? 'Berlaku s/d 31 Agustus';
          $promoImgUrl = $globalSettings['hero_promo_image_url'] ?? asset('images/placeholder-120x80.svg');
          $cardOpacity = $globalSettings['hero_card_opacity'] ?? '0.88';
        @endphp
        <div class="row g-3">
          <div class="col-6">
            <div class="hero-card rounded-4 p-3 text-dark h-100" style="background: rgba(255,255,255, {{ $cardOpacity }});">
              <div class="bg-primary bg-opacity-10 rounded-3 p-2 d-inline-block mb-2"><i class="bi {{ $card1Icon }} fs-4 text-primary"></i></div>
              <h6 class="fw-bold mb-1">{{ $card1Title }}</h6><p class="small text-muted mb-0">{{ $card1Desc }}</p>
            </div>
          </div>
          <div class="col-6">
            <div class="hero-card rounded-4 p-3 text-dark h-100" style="background: rgba(255,255,255, {{ $cardOpacity }});">
              <div class="bg-warning bg-opacity-10 rounded-3 p-2 d-inline-block mb-2"><i class="bi {{ $card2Icon }} fs-4 text-warning"></i></div>
              <h6 class="fw-bold mb-1">{{ $card2Title }}</h6><p class="small text-muted mb-0">{{ $card2Desc }}</p>
            </div>
          </div>
          @if($promoEnabled)
          <div class="col-12">
            <div class="hero-card rounded-4 p-3 text-dark d-flex align-items-center gap-3" style="background: rgba(255,255,255, {{ $cardOpacity }});">
              <img src="{{ $promoImgUrl }}" class="rounded-3" style="width:80px; height:60px; object-fit:cover;" alt="">
              <div><h6 class="fw-bold mb-1">{{ $promoTitle }}</h6><p class="small text-muted mb-1">{{ $promoDesc }}</p><span class="badge bg-success">{{ $promoBadge }}</span></div>
            </div>
          </div>
          @endif
        </div>
      </div>
    </div>
  </div>
  <div class="position-absolute bottom-0 start-50 translate-middle-x mb-3" style="z-index:2;">
    <a href="#layanan" class="text-white text-decoration-none d-flex flex-column align-items-center small opacity-75" style="animation: heroBounce 2s infinite;">
      <span class="small">Scroll</span><i class="bi bi-chevron-down fs-5"></i>
    </a>
  </div>
</section>

<section id="layanan" class="py-5 bg-light">
  <div class="container">
    <div class="row align-items-end mb-4">
      <div class="col-lg-6"><h2 class="section-title mb-1">Layanan Unggulan</h2><p class="text-muted">Pilih kategori sesuai kebutuhan bisnis Anda.</p></div>
      <div class="col-lg-6 text-lg-end"><a href="{{ route('products.index') }}" class="btn btn-outline-primary">Lihat Semua Produk <i class="bi bi-arrow-right"></i></a></div>
    </div>
    @php
      $layananBg = $globalSettings['theme_primary'] ?? '#2563eb';
      $layananText = \App\Helpers\SettingHelper::contrastColor($layananBg);
    @endphp
    <div class="row g-3">
      @foreach($categories as $cat)
      <div class="col-6 col-lg-3">
        <a href="{{ route('products.index') }}?category={{ $cat->slug }}" class="text-decoration-none">
          <div class="card border-0 shadow-sm h-100 text-center p-3 layanan-card" style="background-color: {{ $layananBg }}; color: {{ $layananText }};">
            @if($cat->image)
              <img src="{{ asset('storage/'.$cat->image) }}" class="mx-auto rounded-3 mb-2" alt="{{ $cat->name }}" style="width:56px;height:56px;object-fit:cover;">
            @else
              <div class="mx-auto rounded-circle d-flex align-items-center justify-content-center" style="width:56px;height:56px; background: {{ $layananText }}18;"><i class="bi {{ $cat->type==='printing'?'bi-printer':'bi-laptop' }} fs-4" style="color: {{ $layananText }};"></i></div>
            @endif
            <h6 class="fw-bold mt-3 mb-1" style="color: {{ $layananText }};">{{ $cat->name }}</h6><span class="badge" style="background: {{ $layananText }}; color: {{ $layananBg }}; border: 1px solid {{ $layananText }}30;">{{ $cat->type==='printing'?'Printing':'Web Design' }}</span>
          </div>
        </a>
      </div>
      @endforeach
    </div>
  </div>
</section>

<section class="py-5">
  <div class="container">
    <h2 class="section-title mb-4">Produk Terbaru</h2>
    <div class="row g-4">
      @forelse($featuredProducts as $p)
      <div class="col-6 col-lg-3">
        <div class="card card-product shadow-sm h-100">
          <img src="{{ $p->image ? asset('storage/'.$p->image) : asset('images/placeholder-400x300.svg') }}" class="card-img-top" alt="{{ $p->name }}">
          <div class="card-body d-flex flex-column">
            <span class="badge bg-primary bg-opacity-10 text-primary badge-category mb-2 align-self-start">{{ $p->category->name ?? '-' }}</span>
            <h6 class="fw-bold mb-1">{{ $p->name }}</h6><p class="small text-muted mb-2">{{ \Illuminate\Support\Str::limit($p->short_description, 70) }}</p>
            <div class="mt-auto d-flex justify-content-between align-items-center">
              <span class="fw-bold text-primary">@if($p->price) Rp {{ number_format($p->effective_price,0,',','.') }} @else Hubungi Kami @endif</span>
              <a href="{{ route('products.show', $p->slug) }}" class="btn btn-sm btn-outline-primary">Detail</a>
            </div>
          </div>
        </div>
      </div>
      @empty
      <div class="col-12"><div class="alert alert-light border text-center">Belum ada produk unggulan.</div></div>
      @endforelse
    </div>
  </div>
</section>

@if($globalSettings['portfolio_enabled'] ?? true)
<section class="py-5 bg-light">
  <div class="container">
    <div class="d-flex justify-content-between align-items-end mb-4"><div><h2 class="section-title mb-1">Portofolio Pilihan</h2><p class="text-muted mb-0">Hasil karya terbaik kami.</p></div><a href="{{ route('portfolio.index') }}" class="btn btn-outline-dark">Lihat Semua</a></div>
    <div class="row g-3">
      @forelse($portfolios as $pf)
      <div class="col-6 col-lg-4">
        <a href="{{ route('portfolio.show', $pf->slug) }}" class="text-decoration-none">
          <div class="card border-0 shadow-sm overflow-hidden portfolio-item">
            <div class="overflow-hidden"><img src="{{ $pf->image ? asset('storage/'.$pf->image) : asset('images/placeholder-400x300.svg') }}" class="w-100" alt=""></div>
            <div class="card-body"><h6 class="fw-bold mb-1">{{ $pf->title }}</h6><small class="text-muted">{{ $pf->category->name ?? 'Umum' }} @if($pf->client_name) • {{ $pf->client_name }} @endif</small></div>
          </div>
        </a>
      </div>
      @empty
      <div class="col-12"><p class="text-muted text-center">Portofolio akan segera tampil.</p></div>
      @endforelse
    </div>
  </div>
</section>
@endif

<section id="testimoni" class="py-5">
  <div class="container">
    <h2 class="section-title text-center mb-4">Apa Kata Klien</h2>
    <div class="row g-3">
      @forelse($testimonials as $t)
      @php $tRating = is_array($t) ? ($t['rating'] ?? 5) : ($t->rating ?? 5); $tContent = is_array($t) ? ($t['content'] ?? '') : ($t->content ?? ''); $tName = is_array($t) ? ($t['name'] ?? '') : ($t->name ?? ''); $tRole = is_array($t) ? ($t['role'] ?? '') : ($t->role ?? ''); @endphp
      <div class="col-md-4">
        <div class="testimonial-card rounded-4 p-4 h-100">
          <div class="text-warning mb-2">@for($i=0;$i<$tRating;$i++)<i class="bi bi-star-fill"></i>@endfor</div>
          <p class="small">"{{ $tContent }}"</p>
          <div class="d-flex align-items-center gap-2 mt-3"><div class="bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center" style="width:40px;height:40px"><i class="bi bi-person text-primary"></i></div><div><div class="fw-semibold small">{{ $tName }}</div><small class="text-muted">{{ $tRole }}</small></div></div>
        </div>
      </div>
      @empty
      <div class="col-12 text-center text-muted">Testimoni menyusul.</div>
      @endforelse
    </div>
  </div>
</section>

<section class="py-5 bg-dark text-white">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-8"><h3 class="fw-bold text-white">Siap Memulai Proyek Anda?</h3><p class="opacity-75 mb-0">Konsultasi gratis, estimasi harga transparan, pengerjaan cepat.</p></div>
      <div class="col-lg-4 text-lg-end mt-3 mt-lg-0">
        @if($globalSettings['online_order_enabled'] ?? true)
        <a href="{{ route('order.create') }}" class="btn btn-primary btn-lg px-4">Pesan Sekarang</a>
        @else
        <a href="https://wa.me/{{ $globalSettings['site_whatsapp'] }}" target="_blank" class="btn btn-success btn-lg px-4"><i class="bi bi-whatsapp me-1"></i> Chat WhatsApp</a>
        @endif
      </div>
    </div>
  </div>
</section>
@endsection