@extends('layouts.app')

@section('title', 'Home')

@section('content')
    <section class="home-hero">
        <span class="hero-orb one"></span>
        <span class="hero-orb two"></span>

        <div class="container hero-content">
            <div class="hero-chip">EST 2020</div>
            <h1 class="hero-title">
                {{ $hero['title'] ?? 'Home For The' }}
                <span class="text-gradient">{{ $hero['highlight'] ?? 'Best Talent' }}</span>
            </h1>
            <p class="hero-desc">
                {{ $hero['description'] ?? 'A home where exceptional talents collaborate to push beyond the limit, creating innovative consumer health products.' }}
            </p>
            <div class="hero-actions">
                <a class="btn btn-secondary" href="{{ route('careers.index') }}">Join Us</a>
                <a class="btn hero-outline" href="{{ route('products.index') }}">Explore Products</a>
            </div>
            <p style="margin-top:16px; color: rgba(248,250,252,0.8);">Total website visitor: {{ number_format($visitors) }}</p>
        </div>
    </section>

    <section class="section">
        <div class="container grid grid-2 story-shell">
            <div class="story-media">PARA</div>
            <div class="story-body">
                <div class="hero-chip" style="color:#3c2a64; border-color: #ddd6f2; background:#f7f4ff;">EST 2020</div>
                <h3>Our Story</h3>
                <p class="muted">
                    {{ $about['description'] ?? 'We are known as a local digital marketing company. However, we see our company as a digital technology company that is passionate and full of energy.' }}
                </p>
                <a class="btn btn-outline" href="{{ route('about') }}">Read About Us</a>
            </div>
        </div>
    </section>

    <section class="section section-alt" id="products">
        <div class="container">
            <div class="section-head">
                <h2 class="section-title">Our Products</h2>
                <p class="section-subtitle">Our product portfolio in Consumer Health offers supplements and preventive products along with healthy ready-to-drink products.</p>
            </div>

            <div class="grid grid-3">
                @foreach ($featuredProducts as $product)
                    <article class="card product-card">
                        <div class="product-image" style="background-image:url('{{ $product->image_url }}');"></div>
                        <div class="product-content">
                            <span class="badge badge-soft">{{ $product->category }}</span>
                            <h3 style="margin:10px 0 8px;">{{ $product->name }}</h3>
                            <p class="muted">{{ \Illuminate\Support\Str::limit($product->description, 110) }}</p>
                            <a class="btn btn-outline" href="{{ route('products.show', $product->slug) }}">Learn More</a>
                        </div>
                    </article>
                @endforeach
            </div>

            <div style="text-align:center; margin-top: 24px;">
                <a class="btn btn-secondary" href="{{ route('products.index') }}">View All Products</a>
            </div>
        </div>
    </section>

    <section class="section">
        <div class="container">
            <div class="section-head">
                <h2 class="section-title">Trusted by <span class="text-gradient">20.5 Million</span> Customers</h2>
                <p class="section-subtitle">Experience the Power of Our Products</p>
            </div>

            <div class="grid grid-4 brand-grid">
                @foreach ($allProducts as $product)
                    <article class="card">
                        <div class="brand-icon">{{ strtoupper(substr($product->name, 0, 2)) }}</div>
                        <h4 style="margin: 0 0 6px;">{{ $product->name }}</h4>
                        <p class="muted" style="margin: 0;">{{ $product->category }}</p>
                    </article>
                @endforeach
            </div>
        </div>
    </section>

    <section class="section section-alt">
        <div class="container">
            <div class="section-head">
                <h2 class="section-title">Our Culture in Work</h2>
                <p class="section-subtitle">At ParadigmaDigital, we believe that innovation begins with people.</p>
            </div>

            <div class="grid grid-2">
                @php
                    $defaultCulture = [
                        ['title' => 'Empowerment', 'content' => 'Giving employees trust, responsibility, and autonomy.'],
                        ['title' => 'Religious', 'content' => 'The importance of ethics, morals, and spiritual values in business operations.'],
                        ['title' => 'Human Oriented', 'content' => 'Focus on well-being, development, and happiness of employees.'],
                        ['title' => 'Agile', 'content' => 'Open attitude towards change, experimentation, and adaptive work.'],
                    ];
                    $cultureItems = !empty($culture) ? $culture : $defaultCulture;
                @endphp

                @foreach ($cultureItems as $index => $item)
                    <article class="card">
                        <div style="display:flex; gap:14px;">
                            <div style="width:42px;height:42px;border-radius:12px;background:rgba(95,45,191,.12);display:grid;place-items:center;font-weight:800;color:var(--primary);">{{ $index + 1 }}</div>
                            <div>
                                <h3 style="margin:0 0 8px;">{{ data_get($item, 'title') }}</h3>
                                <p class="muted" style="margin:0;">{{ data_get($item, 'content') }}</p>
                            </div>
                        </div>
                    </article>
                @endforeach
            </div>
        </div>
    </section>

    <section class="section">
        <div class="container">
            <div class="section-head">
                <h2 class="section-title">Certifications & Compliance</h2>
                <p class="section-subtitle">Ensuring every product meets the highest standards of safety, quality, and integrity.</p>
            </div>

            @php
                $defaultCerts = [
                    ['title' => 'BPOM', 'content' => 'Certified by the Indonesian National Agency of Drug and Food Control'],
                    ['title' => 'Halal', 'content' => 'Halal certified for consumer trust and compliance'],
                    ['title' => 'GMP/HACCP', 'content' => 'Good Manufacturing Practice & food safety certified'],
                ];
                $certItems = !empty($certifications) ? $certifications : $defaultCerts;
            @endphp

            <div class="grid grid-3">
                @foreach ($certItems as $item)
                    <article class="card" style="text-align:center;">
                        <div class="brand-icon" style="margin-bottom:10px;">OK</div>
                        <h3 style="margin:0 0 6px;">{{ data_get($item, 'title') }}</h3>
                        <p class="muted" style="margin:0;">{{ data_get($item, 'content') }}</p>
                    </article>
                @endforeach
            </div>

            <div class="kpi-banner" style="margin-top: 26px;">
                <h3 style="margin:0 0 8px; font-size:clamp(24px,3.5vw,38px);">Trusted by 20.5 Million Customers in Indonesia</h3>
                <p style="margin:0; color: rgba(248,250,252,.78);">Experience the Power of Our Products</p>
            </div>
        </div>
    </section>

    <section class="section-sm">
        <div class="container">
            <div class="cta-box">
                <h2 class="cta-title">Siap Bermitra Bersama Kami?</h2>
                <p class="cta-subtitle">Hubungi kami sekarang untuk konsultasi gratis dan temukan solusi terbaik untuk pertumbuhan bisnis Anda.</p>
                <div class="hero-actions" style="justify-content:center; position:relative; z-index:2;">
                    <a class="btn btn-secondary" href="{{ route('contact.index') }}">Hubungi Kami</a>
                    <a class="btn hero-outline" href="https://wa.me/6281234567890" target="_blank" rel="noreferrer">WhatsApp</a>
                </div>
            </div>
        </div>
    </section>
@endsection