<!DOCTYPE html>
<html lang="en">

<head>
    <title>Artfolio — Art & Illustration Portfolio</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Artfolio — Art & Illustration Portfolio</title>
    <?php echo $__env->make('website.includes.head', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
</head>

<body>
    <?php echo $__env->make('website.includes.header', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
    <!-- HERO SLIDER -->
    <!-- HERO SLIDER (DYNAMIC) -->
<!-- HERO SLIDER (DYNAMIC) -->
<section class="hero-slider" id="home">
    <div class="float-shape shape-1"></div>
    <div class="float-shape shape-2"></div>

    <?php $__currentLoopData = $banners; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $banner): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
    <div class="slide <?php echo e($index == 0 ? 'active' : ''); ?>">
        <div class="slide-bg" style="background:linear-gradient(135deg,#d4b896 0%,#c49a6c 40%,#8B6F5E 100%);"></div>
        <div class="slide-overlay"></div>
        <div class="container hero-content">
            <div class="row align-items-center" style="min-height:100vh;">
                <div class="col-lg-7">
                    <span class="hero-tag"><?php echo e($banner->short_title ?? 'Featured Collection 2025'); ?></span>
                    <h1 class="hero-title"><?php echo $banner->long_tite ?: 'Where Art <em>Breathes</em><br>& Colour Speaks'; ?></h1>
                    <p class="hero-subtitle"><?php echo e($banner->description ?? 'Discover extraordinary artworks and illustrations from India\'s most celebrated contemporary artists, curated with passion.'); ?></p>
                    <div class="d-flex flex-wrap gap-3">
                        <a href="#illustrations" class="btn-primary-art">Explore Illustrations</a>
                        <a href="#artists" class="btn-outline-art">Meet Artists</a>
                    </div>
                </div>
                <?php if($banner->image_url): ?>
                <div class="col-lg-5 d-none d-lg-flex justify-content-end">
                    <img src="<?php echo e($banner->image_url); ?>" alt="<?php echo e($banner->short_title); ?>" style="width:340px;height:420px;object-fit:cover;border-radius:4px;box-shadow:0 20px 40px rgba(0,0,0,0.2);">
                </div>
                <?php else: ?>
                <div class="col-lg-5 d-none d-lg-flex justify-content-end">
                    <div style="width:340px;height:420px;background:rgba(139,111,94,.3);border-radius:4px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:20px;color:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.15);">
                        Featured Artwork
                    </div>
                </div>
                <?php endif; ?>
            </div>
        </div>
    </div>
    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

    <div class="slider-dots">
        <?php $__currentLoopData = $banners; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $banner): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <button class="dot <?php echo e($index == 0 ? 'active' : ''); ?>" onclick="goSlide(<?php echo e($index); ?>)"></button>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    </div>
    <div class="slider-num" id="slideNum">01</div>
</section>
    <div class="art-divider">✦ ✦ ✦</div>



    <!-- ===== SECTION 2: ART PAINTINGS (category-wise slideshow) ===== -->
    <!-- ===== SECTION 2: ART PAINTINGS (category-wise slideshow) ===== -->
    <section class="section-pad" id="artworks">
        <div class="container">
            <div class="row mb-5">
                <div class="col-lg-6">
                    <span class="section-tag reveal">Original Paintings</span>
                    <h2 class="section-title reveal delay-1">Explore <em>Art</em></h2>
                    <div class="section-line reveal delay-2"></div>
                    <p class="section-subtitle reveal delay-3">Category-wise curated paintings — oil, watercolour,
                        acrylic, abstract and more.</p>
                </div>
            </div>

            <?php $__currentLoopData = $homeCategories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <?php $hasArtworks = $category->arts->isNotEmpty(); ?>

                <!-- Category Header -->
                <div class="mb-3 reveal" id="art-<?php echo e($category->slug); ?>">
                    <span class="section-tag"><?php echo e($category->name_en); ?></span>
                </div>

                <?php if($hasArtworks): ?>
                    <!-- Owl Carousel -->
                    <div class="art-owl-carousel owl-carousel reveal delay-1">
                        <?php $__currentLoopData = $category->arts; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $art): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <div class="item">
                                <div class="art-item">
                                    <div class="art-img-ph">
                                        <img src="<?php echo e($art->thumbnail ?? 'https://via.placeholder.com/300x240?text=No+Image'); ?>"
                                             alt="<?php echo e($art->name_en); ?>"
                                             style="width:100%;height:auto;display:block;">
                                    </div>
                                    <?php if($art->is_sold): ?>
                                        <span class="art-badge sold">Sold</span>
                                    <?php else: ?>
                                        <span class="art-badge">Available</span>
                                    <?php endif; ?>
                                    <div class="art-card-body">
                                        <div class="art-card-title"><?php echo e($art->name_en); ?></div>
                                        <div class="art-card-meta">
                                            <?php echo e($art->medium ?? 'Artwork'); ?> ·
                                            <?php echo e($art->width ? $art->width . '×' . $art->height . '"' : ''); ?>

                                        </div>
                                       <div class="art-card-price">

    <?php if(!empty($art->old_price) && $art->old_price > $art->price): ?>

        <span style="
            text-decoration:line-through;
            color:#999;
            font-size:14px;
            margin-right:8px;
        ">
            $<?php echo e(number_format($art->old_price)); ?>

        </span>

    <?php endif; ?>

    <span>
        $<?php echo e(number_format($art->price)); ?>

    </span>

</div>
                                    </div>
                                    <div class="art-artist-corner">
                                        <?php echo e($art->artist->artist_name ?? 'Unknown Artist'); ?>

                                    </div>
                                </div>
                            </div>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>
                <?php else: ?>
                    <div class="art-item text-center p-4 mb-4">
                        <p>No artworks in this category yet.</p>
                    </div>
                <?php endif; ?>

            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

        </div>
    </section>

    <!-- ===== ART CATEGORY MINI AUTO-SLIDER (Explore Art section) ===== -->
    <section class="art-cat-slider-section">
        <div class="container mb-4">
            <div class="d-flex align-items-center justify-content-between flex-wrap gap-3 mb-4">
                <div>
                    <span class="section-tag" style="margin-bottom:6px;">Explore by Medium</span>
                    <h3 style="font-family:var(--font-display);font-size:28px;color:var(--ink);margin:0;">Explore
                        <em>Art</em> Categories</h3>
                </div>
                <a href="<?php echo e(route('products.index')); ?>" class="btn-outline-art">All Artworks</a>
            </div>
        </div>
        <div class="art-cat-track-wrap">
            <div class="art-cat-track">
                
                <?php $__currentLoopData = $artCategories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $cat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <div class="art-cat-pill">
                        
                        <svg viewBox="0 0 24 24" fill="none" stroke="var(--sepia)" stroke-width="1.5">
                            <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" />
                            <path d="M8 12s1.5 2 4 2 4-2 4-2" />
                            <path d="M9 9h.01M15 9h.01" />
                        </svg>
                        <span><?php echo e($cat->name_en); ?></span>
                        <small><?php echo e($cat->arts_count); ?> works</small>
                    </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                
                <?php $__currentLoopData = $artCategories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $cat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <div class="art-cat-pill">
                        <svg viewBox="0 0 24 24" fill="none" stroke="var(--sepia)" stroke-width="1.5">
                            <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" />
                            <path d="M8 12s1.5 2 4 2 4-2 4-2" />
                            <path d="M9 9h.01M15 9h.01" />
                        </svg>
                        <span><?php echo e($cat->name_en); ?></span>
                        <small><?php echo e($cat->arts_count); ?> works</small>
                    </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
        </div>
    </section>

    <div class="art-divider">✦ ✦ ✦</div>

    <!-- ===== SECTION 3: CATEGORIES ===== -->
    <!-- ===== SECTION 3: ART CATEGORIES GRID ===== -->
    <section class="section-pad" id="categories">
        <div class="container">
            <div class="row mb-5">
                <div class="col-12 text-center">
                    <span class="section-tag reveal">Browse By Style</span>
                    <h2 class="section-title reveal delay-1">Art <em>Categories</em></h2>
                    <div class="section-line mx-auto reveal delay-2"></div>
                </div>
            </div>
            <div class="row g-3">
                <?php $__currentLoopData = $artCategories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $cat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <?php
                        $delayClass = 'delay-' . (($index % 4) + 1);
                        $bgStyle = $cat->image
                            ? "background-image: url('" .
                                $baseImgPath .
                                $cat->image .
                                "'); background-size: cover; background-position: center;"
                            : 'background: linear-gradient(135deg, #8B6F5E, #c49a6c);';
                    ?>
                    <div class="col-6 col-lg-3 reveal <?php echo e($delayClass); ?>">
                        <a href="<?php echo e(route('products.category', $cat->slug)); ?>" class="cat-card"
                            style="display: block; text-decoration: none;">
                            <div class="cat-bg" style="<?php echo e($bgStyle); ?>"></div>
                            <div class="cat-overlay-grad"></div>
                            <div class="cat-body">
                                <span class="cat-icon">
                                    <?php if($cat->image): ?>
                                        <img src="<?php echo e($baseImgPath . $cat->image); ?>" alt="<?php echo e($cat->name_en); ?>"
                                            style="width: 40px; height: 40px; object-fit: cover; border-radius: 50%;">
                                    <?php else: ?>
                                        🎨
                                    <?php endif; ?>
                                </span>
                                <h5><?php echo e($cat->name_en); ?></h5>
                                <small><?php echo e($cat->arts_count); ?> Works</small>
                            </div>
                        </a>
                    </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
        </div>
    </section>

    <div class="art-divider">✦ ✦ ✦</div>

    <!-- ===== SECTION 4: ARTIST GALLERY ===== -->
    <!-- ===== SECTION 4: ARTIST GALLERY ===== -->
    <section class="section-pad" id="artists" style="background:var(--warm);">
        <div class="container">
            <div class="row mb-5">
                <div class="col-lg-6">
                    <span class="section-tag reveal">The Creatives</span>
                    <h2 class="section-title reveal delay-1">Artist <em>Gallery</em></h2>
                    <div class="section-line reveal delay-2"></div>
                    <p class="section-subtitle reveal delay-3">A curated collective of India's most talented painters,
                        illustrators, and visual storytellers.</p>
                </div>
                <div class="col-lg-6 text-lg-end mt-4 mt-lg-0 reveal delay-2">
                    <a href="<?php echo e(route('artist.list')); ?>" class="btn-outline-art">View All Artists</a>
                </div>
            </div>
            <div class="row g-4">
                <?php $__currentLoopData = $artists; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $artist): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <?php
                        $delayClass = 'delay-' . (($index % 4) + 1);
                        $initials = strtoupper(substr($artist->artist_name, 0, 2));
                        $profilePic = $artist->profile_pic_url;
                        $firstTag = !empty($artist->tag_names) ? $artist->tag_names[0] : 'Artist';
                        $tagCount = count($artist->tag_names);
                    ?>
                    <div class="col-12 col-md-4 col-lg-3 reveal <?php echo e($delayClass); ?>">
                        <div class="artist-card">
                            <div class="artist-img-placeholder"
                                style="background:
              <?php if($profilePic): ?> url('<?php echo e($profilePic); ?>') center/cover no-repeat
              <?php else: ?>
                #c49a6c <?php endif; ?>;">
                                <?php if(!$profilePic): ?>
                                    <?php echo e($initials); ?>

                                <?php endif; ?>
                            </div>
                            <div class="artist-body">
                                <div class="artist-name"><?php echo e($artist->artist_name); ?></div>
                                <div class="artist-role"><?php echo e($firstTag); ?></div>
                                <div class="artist-count">
                                    <i class="fas fa-palette me-1" style="color:var(--gold)"></i>
                                    <?php echo e($artist->art_work_count ?? 0); ?> Artworks
                                </div>
                                <?php if($tagCount > 0): ?>
                                    <div class="artist-tags">
                                        <?php $__currentLoopData = $artist->tag_names; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $tag): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                            <span class="artist-tag"><?php echo e($tag); ?></span>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                    </div>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
        </div>
    </section>

<!-- ===== SECTION 1: ILLUSTRATIONS (category-wise) ===== -->
<!-- ===== SECTION 1: ILLUSTRATIONS (OWL CAROUSEL) ===== -->
<section class="section-pad" id="illustrations">
    <div class="container">

        <div class="row mb-5">
            <div class="col-lg-6">
                <span class="section-tag reveal">Creative Visuals</span>
                <h2 class="section-title reveal delay-1">
                    Featured <em>Illustrations</em>
                </h2>
                <div class="section-line reveal delay-2"></div>
                <p class="section-subtitle reveal delay-3">
                    Hand-crafted illustrations spanning folk, editorial,
                    fantasy, and contemporary styles.
                </p>
            </div>

            <div class="col-lg-6 text-lg-end mt-4 mt-lg-0 reveal delay-2 d-flex align-items-end justify-content-lg-end">
                <a href="#illustrations" class="btn-outline-art">
                    View All Illustrations
                </a>
            </div>
        </div>

        <?php $__currentLoopData = $illustrationCategories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>

            <div class="mb-4 reveal">
                <span class="section-tag">
                    <?php echo e($category->name_en); ?>

                </span>
            </div>

            <?php if($category->illustrations->count()): ?>

                <div class="illus-owl-carousel owl-carousel reveal delay-1">

                    <?php $__currentLoopData = $category->illustrations; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $ill): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>

                        <div class="item">
                            <div class="illus-card">

                                <div class="illus-img-ph">
                                    <img
                                        src="<?php echo e($ill->thumbnail ?? 'https://via.placeholder.com/400x300?text=No+Image'); ?>"
                                        alt="<?php echo e($ill->name_en); ?>"
                                    >
                                </div>

                                <span class="illus-artist-corner">
                                    <?php echo e($ill->artist_name); ?>

                                </span>

                                <div class="illus-body">

                                    <div class="illus-title">
                                        <?php echo e($ill->name_en); ?>

                                    </div>

                                    <div class="illus-cat">
                                        <i class="fas fa-tag me-1"></i>
                                        <?php echo e($ill->cat_name); ?>

                                    </div>

                                    <div class="illus-footer">
                                        <span class="illus-price">
                                            <?php echo e($ill->display_price); ?>

                                        </span>

                                        <button class="btn-detail">
                                            View Details
                                        </button>
                                    </div>

                                </div>

                            </div>
                        </div>

                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                </div>

            <?php else: ?>

                <div class="illus-card text-center p-4 mb-5">
                    No illustrations in this category yet.
                </div>

            <?php endif; ?>

        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

    </div>
</section>


   <!-- ===== ILLUSTRATOR ARTISTS SECTION (role 2 or 3) ===== -->
<section class="section-pad" id="illustrator-artists" style="background:var(--warm);">
    <div class="container">
        <div class="row mb-5">
            <div class="col-lg-6">
                <span class="section-tag reveal">Our Illustrators</span>
                <h2 class="section-title reveal delay-1">Illustrator <em>Artists</em></h2>
                <div class="section-line reveal delay-2"></div>
                <p class="section-subtitle reveal delay-3">
                    Discover a curated collection of talented illustrator artists bringing imagination,
                    storytelling, and creativity to life through stunning visual art.
                </p>
            </div>
            <div class="col-lg-6 text-lg-end mt-4 mt-lg-0 reveal delay-2">
                <a href="<?php echo e(route('artist.list')); ?>" class="btn-outline-art">View All Illustrator Artists</a>
            </div>
        </div>
        <div class="row g-4">
            <?php $__currentLoopData = $illustratorArtists; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $artist): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <?php
                    $delayClass = 'delay-' . (($index % 4) + 1);
                    $initials = strtoupper(substr($artist->artist_name, 0, 2));
                    $profilePic = $artist->profile_pic_url ?? null;
                    // Role display: use first tag if available, otherwise a default based on role
                    $primaryRole = !empty($artist->tag_names) ? $artist->tag_names[0] : ($artist->role == 2 ? 'Illustrator' : 'Artist');
                    // Artwork count
                    $artworkCount = $artist->art_work_count ?? $artist->art_work ?? 0;
                ?>
                <div class="col-sm-12 col-md-4 col-lg-3 reveal <?php echo e($delayClass); ?>">
                    <div class="artist-card">
                        <div class="artist-img-placeholder" style="
                            <?php if($profilePic): ?>
                                background: url('<?php echo e($profilePic); ?>') center/cover no-repeat;
                            <?php else: ?>
                                background: #c49a6c;
                            <?php endif; ?>
                        ">
                            <?php if(!$profilePic): ?>
                                <?php echo e($initials); ?>

                            <?php endif; ?>
                        </div>
                        <div class="artist-body">
                            <div class="artist-name"><?php echo e($artist->artist_name); ?></div>
                            <div class="artist-role"><?php echo e($primaryRole); ?></div>
                            <div class="artist-count">
                                <i class="fas fa-palette me-1" style="color:var(--gold)"></i>
                                <?php echo e($artworkCount); ?> Artworks
                            </div>
                            <div class="artist-tags">
                                <?php $__currentLoopData = $artist->tag_names; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $tag): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <span class="artist-tag"><?php echo e($tag); ?></span>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </div>
                        </div>
                    </div>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
    </div>
</section>

    <!-- ===== ILLUSTRATION CATEGORY MINI AUTO-SLIDER ===== -->
    <!-- ===== ILLUSTRATION CATEGORY MINI AUTO-SLIDER ===== -->
<section class="illus-cat-slider-section">
    <div class="container mb-4">
        <div class="d-flex align-items-center justify-content-between flex-wrap gap-3 mb-4">
            <div>
                <span class="test-tag" style="margin-bottom:6px;">Browse by Style</span>
                <h3 style="font-family:var(--font-display);font-size:28px;color:#fff;margin:0;">Illustration <em
                        style="color:var(--gold);">Categories</em></h3>
            </div>
            <a href="#illustrations" class="btn-outline-art"
                style="color:var(--cream);border-color:rgba(250,248,244,.3);">All Illustrations</a>
        </div>
    </div>
    <div class="illus-cat-track-wrap">
        <div class="illus-cat-track">
            
            <?php $__currentLoopData = $allIllustrationCategories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $cat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div class="illus-cat-pill">
                    
                    <svg viewBox="0 0 24 24" fill="none" stroke="var(--gold)" stroke-width="1.5">
                        <path d="M12 2L2 7l10 5 10-5-10-5z" />
                        <path d="M2 17l10 5 10-5" />
                        <path d="M2 12l10 5 10-5" />
                    </svg>
                    <span><?php echo e($cat->name_en); ?></span>
                    <small><?php echo e($cat->illustrations_count); ?> works</small>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            
            <?php $__currentLoopData = $allIllustrationCategories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $cat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div class="illus-cat-pill">
                    <svg viewBox="0 0 24 24" fill="none" stroke="var(--gold)" stroke-width="1.5">
                        <path d="M12 2L2 7l10 5 10-5-10-5z" />
                        <path d="M2 17l10 5 10-5" />
                        <path d="M2 12l10 5 10-5" />
                    </svg>
                    <span><?php echo e($cat->name_en); ?></span>
                    <small><?php echo e($cat->illustrations_count); ?> works</small>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
    </div>
</section>



   <!-- VIDEO GALLERY -->
    <!-- VIDEO GALLERY (DYNAMIC) -->
<section class="section-pad" id="videos">
    <div class="container">
        <div class="row mb-5">
            <div class="col-lg-6">
                <span class="section-tag reveal">Process & Tutorials</span>
                <h2 class="section-title reveal delay-1">Watch <em>Artists</em> Work</h2>
                <div class="section-line reveal delay-2"></div>
            </div>
            <div class="col-lg-6 text-lg-end mt-4 mt-lg-0 reveal delay-2 d-flex align-items-end justify-content-lg-end">
                <a href="https://www.youtube.com" target="_blank" class="btn-yt"><i class="fab fa-youtube me-2"></i>Our YouTube Channel</a>
            </div>
        </div>
        <div class="row g-4">
            <?php $__empty_1 = true; $__currentLoopData = $videos; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $video): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                <?php
                    $delayClass = 'delay-' . (($index % 3) + 1);
                    $bgColors = ['bg-a', 'bg-c', 'bg-e']; // fallback background classes
                    $bgColor = $bgColors[$index % 3];
                ?>
                <div class="col-md-6 col-lg-4 reveal <?php echo e($delayClass); ?>">
                    <div class="video-card">
                        <div class="video-thumb" onclick="playVideo('<?php echo e($video->video_id); ?>')">
                            <div class="video-thumb-ph <?php echo e($bgColor); ?>" style="background-image: url('https://img.youtube.com/vi/<?php echo e($video->video_id); ?>/mqdefault.jpg'); background-size: cover; background-position: center;">
                                <div class="play-btn"><i class="fas fa-play"></i></div>
                            </div>
                            <div class="video-duration">YouTube</div>
                        </div>
                        <div class="video-body">
                            <div class="d-flex align-items-center gap-2 mb-2">
                                <span class="yt-badge"><i class="fab fa-youtube"></i> YouTube</span>
                            </div>
                            <div class="video-title">Video <?php echo e($video->id); ?></div>
                            <div class="video-meta"><i class="fas fa-play-circle me-1"></i>Watch on YouTube</div>
                            <div class="mt-2">
                                <button class="btn-detail w-100" onclick="playVideo('<?php echo e($video->video_id); ?>')">
                                    Watch on YouTube
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                <div class="col-12 text-center">No videos available yet.</div>
            <?php endif; ?>
        </div>
    </div>
</section>

<!-- YouTube Play Modal (embedded player) -->
<div class="modal fade" id="videoPlayModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Watch Video</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="ratio ratio-16x9">
                    <iframe id="youtubePlayer" src="" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function playVideo(videoId) {
        let iframe = document.getElementById('youtubePlayer');
        iframe.src = 'https://www.youtube.com/embed/' + videoId + '?autoplay=1';
        let modal = new bootstrap.Modal(document.getElementById('videoPlayModal'));
        modal.show();
    }

    // Reset iframe when modal closes
    document.getElementById('videoPlayModal').addEventListener('hidden.bs.modal', function() {
        document.getElementById('youtubePlayer').src = '';
    });
</script>

   <!-- ===== TESTIMONIALS — 3 IN A ROW WITH RATING ===== -->
<section class="testi-3-section" id="testimonials">
    <div class="container">
        <div class="row mb-4">
            <div class="col-lg-7">
                <span class="test-tag reveal">Collector Stories</span>
                <h2 class="test-title reveal delay-1">Voices of <em>Collectors</em></h2>
            </div>
        </div>
        <!-- Rating Bar -->
        <div class="testi-rating-bar reveal">
            <div class="testi-bar-item">
                <div class="testi-rating-num"><?php echo e($avgRating); ?></div>
                <div class="testi-rating-stars">
                    <?php for($i=1; $i<=5; $i++): ?>
                        <?php if($i <= round($avgRating)): ?>
                            <i class="fas fa-star" style="color:var(--gold);"></i>
                        <?php elseif($i - 0.5 <= round($avgRating)): ?>
                            <i class="fas fa-star-half-alt" style="color:var(--gold);"></i>
                        <?php else: ?>
                            <i class="far fa-star" style="color:var(--gold);"></i>
                        <?php endif; ?>
                    <?php endfor; ?>
                </div>
                <div class="testi-rating-label">Average Rating</div>
            </div>
            <div class="testi-bar-divider"></div>
            <div class="testi-bar-item">
                <strong><?php echo e($happyCollectors); ?>+</strong>
                <span>Happy Collectors</span>
            </div>
            <div class="testi-bar-divider"></div>
            <div class="testi-bar-item">
                <strong><?php echo e($satisfactionRate); ?>%</strong>
                <span>Satisfaction Rate</span>
            </div>
            <div class="testi-bar-divider"></div>
            <div class="testi-bar-item">
                <strong><?php echo e($yearsTrusted); ?>+</strong>
                <span>Years Trusted</span>
            </div>
        </div>
        <!-- 3 Testimonials in Row (or fewer) -->
        <div class="testi-3-grid">
            <?php $__empty_1 = true; $__currentLoopData = $testimonials; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $testimonial): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                <?php $delayClass = 'delay-' . (($index % 3) + 1); ?>
                <div class="testi-3-card reveal <?php echo e($delayClass); ?>">
                    <div class="testi-3-q">"</div>
                    <p class="testi-3-text"><?php echo e(Str::limit($testimonial->comment, 180)); ?></p>
                    <div class="testi-3-stars">
                        <?php for($i=1; $i<=5; $i++): ?>
                            <?php if($i <= $testimonial->rating): ?>
                                <i class="fas fa-star"></i>
                            <?php else: ?>
                                <i class="far fa-star"></i>
                            <?php endif; ?>
                        <?php endfor; ?>
                    </div>
                    <div class="testi-3-author">
                        <div class="testi-3-av" style="
                            <?php if($testimonial->image_url): ?>
                                background: url('<?php echo e($testimonial->image_url); ?>') center/cover no-repeat;
                            <?php else: ?>
                                background: #c49a6c;
                            <?php endif; ?>
                        ">
                            <?php if(!$testimonial->image_url): ?>
                                <?php echo e($testimonial->initials); ?>

                            <?php endif; ?>
                        </div>
                        <div>
                            <div class="testi-3-name"><?php echo e($testimonial->client_name); ?></div>
                            <div class="testi-3-meta"><?php echo e($testimonial->designation ?: 'Collector'); ?></div>
                        </div>
                    </div>
                    <div class="testi-verified">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="var(--gold)">
                            <path d="M9 12l2 2 4-4M21 12c0 4.97-4.03 9-9 9s-9-4.03-9-9 4.03-9 9-9 9 4.03 9 9z" />
                        </svg>
                    </div>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                <div class="col-12 text-center text-white">No testimonials yet. Be the first to share your story!</div>
            <?php endif; ?>
        </div>
    </div>
</section>

    <div class="art-divider">✦ ✦ ✦</div>

    <!-- ===== FAQ SECTION ===== -->
    <section class="faq-new-section" id="faq">
        <div class="container">
            <div class="row mb-5">
                <div class="col-lg-6">
                    <span class="section-tag reveal">Got Questions?</span>
                    <h2 class="section-title reveal delay-1">Frequently Asked <em>Questions</em></h2>
                    <div class="section-line reveal delay-2"></div>
                    <p class="section-subtitle reveal delay-3">Everything you need to know about purchasing,
                        commissions, and collecting art from Artfolio.</p>
                </div>
            </div>
            <div class="row g-4">
                <div class="col-lg-6 reveal delay-1">
                    <div class="faq-new-item open">
                        <div class="faq-new-q" onclick="toggleFaqNew(this)">
                            How do I purchase original artwork?
                            <div class="faq-new-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="2">
                                    <path d="M12 5v14M5 12h14" />
                                </svg></div>
                        </div>
                        <div class="faq-new-a">Simply browse our collection, select the artwork you love, and click
                            "View Details." From there you can add to cart or contact the artist directly for more
                            information. We accept all major payment methods including UPI, cards, and bank transfer.
                            Each original comes with a Certificate of Authenticity.</div>
                    </div>
                    <div class="faq-new-item">
                        <div class="faq-new-q" onclick="toggleFaqNew(this)">
                            Can I commission a custom artwork?
                            <div class="faq-new-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="2">
                                    <path d="M12 5v14M5 12h14" />
                                </svg></div>
                        </div>
                        <div class="faq-new-a">Yes! All our artists are open to commissions. Visit an artist's profile
                            page and click "Commission Work," or reach out via our Contact form specifying which artist
                            you'd like to work with. Typical commissions take 3–6 weeks depending on size and
                            complexity. A 50% advance is required to begin.</div>
                    </div>
                    <div class="faq-new-item">
                        <div class="faq-new-q" onclick="toggleFaqNew(this)">
                            What is your return & refund policy?
                            <div class="faq-new-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="2">
                                    <path d="M12 5v14M5 12h14" />
                                </svg></div>
                        </div>
                        <div class="faq-new-a">Original artworks are non-returnable as they are one-of-a-kind pieces.
                            However, if your artwork arrives damaged, we will arrange a full replacement or refund
                            within 7 days of delivery. Print editions can be exchanged within 15 days if undamaged.
                            Please photograph any damage on arrival and contact us immediately.</div>
                    </div>
                    <div class="faq-new-item">
                        <div class="faq-new-q" onclick="toggleFaqNew(this)">
                            Do you ship internationally?
                            <div class="faq-new-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="2">
                                    <path d="M12 5v14M5 12h14" />
                                </svg></div>
                        </div>
                        <div class="faq-new-a">Yes, we ship worldwide! All artworks are carefully packaged with
                            archival materials and sent via tracked courier. Domestic shipping within India takes 5–7
                            days. International deliveries take 10–18 business days. Customs and import duties are the
                            buyer's responsibility for international orders.</div>
                    </div>
                </div>
                <div class="col-lg-6 reveal delay-2">
                    <div class="faq-new-item">
                        <div class="faq-new-q" onclick="toggleFaqNew(this)">
                            How are artworks authenticated?
                            <div class="faq-new-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="2">
                                    <path d="M12 5v14M5 12h14" />
                                </svg></div>
                        </div>
                        <div class="faq-new-a">Every original artwork on Artfolio comes with a physical Certificate of
                            Authenticity signed by the artist and countersigned by Artfolio. The certificate includes
                            the artwork title, dimensions, medium, year of creation, and a unique registration number
                            that can be verified on our platform at any time.</div>
                    </div>
                    <div class="faq-new-item">
                        <div class="faq-new-q" onclick="toggleFaqNew(this)">
                            Can I meet the artist or visit the studio?
                            <div class="faq-new-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="2">
                                    <path d="M12 5v14M5 12h14" />
                                </svg></div>
                        </div>
                        <div class="faq-new-a">We host regular studio visits and collector events in Mumbai. Sign up
                            for our newsletter to receive invitations. Some artists also offer virtual studio tours —
                            you can request one by contacting us. We believe in building meaningful connections between
                            collectors and the artists behind the work.</div>
                    </div>
                    <div class="faq-new-item">
                        <div class="faq-new-q" onclick="toggleFaqNew(this)">
                            How do I become a featured artist on Artfolio?
                            <div class="faq-new-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="2">
                                    <path d="M12 5v14M5 12h14" />
                                </svg></div>
                        </div>
                        <div class="faq-new-a">We welcome applications from talented Indian artists in any medium.
                            Submit your portfolio via our Contact form with subject "Join as Artist." Our curatorial
                            team reviews all submissions and responds within 4–6 weeks. We look for originality,
                            technical skill, and a consistent body of work.</div>
                    </div>
                    <div class="faq-new-item">
                        <div class="faq-new-q" onclick="toggleFaqNew(this)">
                            What payment methods are accepted?
                            <div class="faq-new-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="2">
                                    <path d="M12 5v14M5 12h14" />
                                </svg></div>
                        </div>
                        <div class="faq-new-a">We accept UPI (GPay, PhonePe, Paytm), all major credit and debit cards
                            (Visa, Mastercard, RuPay), net banking, and NEFT/RTGS for high-value purchases. EMI options
                            are available on purchases above ₹10,000 via select banks. All transactions are secured with
                            256-bit SSL encryption.</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="art-divider">✦ ✦ ✦</div>

<!-- BLOG (DYNAMIC) -->
<section class="section-pad" id="blog" style="background:var(--warm);">
    <div class="container">
        <div class="row mb-5">
            <div class="col-lg-6">
                <span class="section-tag reveal">Stories & Insights</span>
                <h2 class="section-title reveal delay-1">From the <em>Journal</em></h2>
                <div class="section-line reveal delay-2"></div>
            </div>
            <div class="col-lg-6 text-lg-end mt-4 mt-lg-0 reveal delay-2 d-flex align-items-end justify-content-lg-end">
                <a href="#" class="btn-outline-art">All Articles</a>
            </div>
        </div>
        <div class="row g-4">
            <?php $__empty_1 = true; $__currentLoopData = $blogs; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $blog): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                <?php
                    $delayClass = 'delay-' . (($index % 3) + 1);
                    $bgColors = ['bg-a', 'bg-c', 'bg-e'];
                    $bgColor = $bgColors[$index % 3];
                ?>
                <div class="col-md-6 col-lg-4 reveal <?php echo e($delayClass); ?>">
                    <div class="blog-card">
                        <div class="blog-img-ph <?php echo e($bgColor); ?>"
                             <?php if($blog->thumb_image_url): ?> style="background-image: url('<?php echo e($blog->thumb_image_url); ?>'); background-size: cover; background-position: center;" <?php endif; ?>>
                            <?php if(!$blog->thumb_image_url): ?>
                                <?php echo e(Str::limit($blog->name_en, 15)); ?>

                            <?php endif; ?>
                        </div>
                        <div class="blog-body">
                            <span class="blog-cat">Article</span>
                            <div class="blog-title"><?php echo e($blog->name_en); ?></div>
                            <div class="blog-excerpt"><?php echo e(Str::limit($blog->short_description ?? $blog->long_description, 100)); ?></div>
                            <div class="blog-footer">
                                <div class="blog-author-av" style="
                                    <?php if($blog->author_image_url): ?>
                                        background: url('<?php echo e($blog->author_image_url); ?>') center/cover no-repeat;
                                    <?php else: ?>
                                        background: #c49a6c;
                                    <?php endif; ?>
                                ">
                                    <?php if(!$blog->author_image_url): ?>
                                        <?php echo e(strtoupper(substr($blog->author_name ?? 'A', 0, 1))); ?>

                                    <?php endif; ?>
                                </div>
                                <div>
                                    <div class="blog-author-name"><?php echo e($blog->author_name ?? 'Artfolio'); ?></div>
                                    <div class="blog-date"><?php echo e($blog->formatted_date); ?> · <?php echo e(rand(5, 15)); ?> min read</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                <div class="col-12 text-center">No blog posts yet. Check back soon!</div>
            <?php endif; ?>
        </div>
    </div>
</section>

 <!-- ABOUT (Dynamic with Image) -->
<section class="section-pad about-section" id="about">
    <div class="container">
        <div class="row g-5 align-items-center">
            <div class="col-lg-5 reveal-left">
                <div style="position:relative;">
                    <!-- Stock image from assets -->
                    <img src="<?php echo e(asset('website/assets/images/about.png')); ?>"
                         alt="About Artfolio"
                         style="width:100%; height:auto; border-radius:4px; object-fit:cover;">
                    <div class="about-badge">
                        <strong>12</strong>
                        <span>Years of Art</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-7 reveal-right">
                <span class="section-tag">Our Story</span>
                <h2 class="section-title">India's Premier <em>Art Platform</em></h2>
                <div class="section-line"></div>
                <p style="font-size:15px;color:var(--sepia);line-height:1.8;margin-bottom:28px;">Since 2013,
                    Artfolio has been bridging the gap between extraordinary Indian artists and passionate
                    collectors around the world. We believe that great art deserves to be seen, celebrated, and
                    lived with.</p>
                <div class="row g-4 mb-4">
                    <div class="col-6">
                        <div class="stat-item"><strong>400+</strong><span>Original Artworks</span></div>
                    </div>
                    <div class="col-6">
                        <div class="stat-item"><strong>8</strong><span>Featured Artists</span></div>
                    </div>
                    <div class="col-6">
                        <div class="stat-item"><strong>600+</strong><span>Happy Collectors</span></div>
                    </div>
                    <div class="col-6">
                        <div class="stat-item"><strong>12</strong><span>Years of Curation</span></div>
                    </div>
                </div>
                <a href="#contact" class="btn-primary-art">Get In Touch</a>
            </div>
        </div>
    </div>
</section>

    <!-- CONTACT -->
<!-- CONTACT SECTION (Dynamic) -->
<section class="section-pad contact-section" id="contact">
    <div class="container">
        <div class="row g-5">
            <div class="col-lg-5 reveal-left">
                <span class="section-tag">Get In Touch</span>
                <h2 class="section-title">Let's Talk <em>Art</em></h2>
                <div class="section-line" style="background:var(--gold);"></div>
                <p class="section-subtitle" style="margin-bottom:36px;">
                    Whether you're looking to commission a <strong>custom painting</strong>, order a
                    <strong>bespoke illustration</strong>, or simply enquire about an artwork —
                    we're here to bring your vision to life.
                </p>
                <div class="contact-info-item">
                    <div class="contact-icon"><i class="fas fa-map-marker-alt"></i></div>
                    <div>
                        <h6>Studio Address</h6>
                        <p>
                            <?php echo e($siteSettings->address_1 ?? ''); ?><br>
                            <?php echo e($siteSettings->address_2 ?? ''); ?>

                        </p>
                    </div>
                </div>
                <div class="contact-info-item">
                    <div class="contact-icon"><i class="fas fa-phone"></i></div>
                    <div>
                        <h6>Phone</h6>
                        <p>
                            <?php if($siteSettings->phone_number_1): ?> <?php echo e($siteSettings->phone_number_1); ?> <?php endif; ?>
                            <?php if($siteSettings->phone_number_2): ?> <br><?php echo e($siteSettings->phone_number_2); ?> <?php endif; ?>
                        </p>
                    </div>
                </div>
                <div class="contact-info-item">
                    <div class="contact-icon"><i class="fas fa-envelope"></i></div>
                    <div>
                        <h6>Email</h6>
                        <p>
                            <?php if($siteSettings->email): ?> <?php echo e($siteSettings->email); ?> <?php endif; ?>
                            <?php if($siteSettings->email_2): ?> <br><?php echo e($siteSettings->email_2); ?> <?php endif; ?>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-lg-7 reveal-right">
                <div class="contact-form-wrap">
                    <?php if(session('success')): ?>
                        <div class="alert alert-success"><?php echo e(session('success')); ?></div>
                    <?php endif; ?>
                    <form action="<?php echo e(route('submit.enquiry')); ?>" method="POST">
                        <?php echo csrf_field(); ?>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label>Full Name *</label>
                                <input type="text" name="name" class="form-control" value="<?php echo e(old('name')); ?>" required>
                            </div>
                            <div class="col-md-6">
                                <label>Email *</label>
                                <input type="email" name="email" class="form-control" value="<?php echo e(old('email')); ?>" required>
                            </div>
                            <div class="col-md-6">
                                <label>Phone *</label>
                                <input type="tel" name="phone" class="form-control" value="<?php echo e(old('phone')); ?>" required pattern="[0-9]{10,15}" title="Only numeric digits, 10-15 characters" oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                <small class="text-muted">Only numbers, 10-15 digits</small>
                            </div>
                            <div class="col-md-6">
                                <label>Requirement *</label>
                                <select name="requirement" class="form-select" required>
                                    <option value="">Select...</option>
                                    <option value="illustration" <?php echo e(old('requirement') == 'illustration' ? 'selected' : ''); ?>>🎨 Illustration Commission</option>
                                    <option value="painting" <?php echo e(old('requirement') == 'painting' ? 'selected' : ''); ?>>🖌️ Painting Commission</option>
                                </select>
                            </div>
                            <div class="col-12">
                                <label>Message *</label>
                                <textarea name="message" class="form-control" rows="5" required><?php echo e(old('message')); ?></textarea>
                            </div>
                            <div class="col-12">
                                <button type="submit" class="btn-send">
                                    Send Message <i class="fas fa-paper-plane ms-2"></i>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Toast Notification Container -->
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
    <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="true" data-bs-delay="5000">
        <div class="toast-header">
            <strong class="me-auto" id="toastTitle">Notification</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
        </div>
        <div class="toast-body" id="toastMessage"></div>
    </div>
</div>

<script>
$(document).ready(function() {
    $('#enquiryForm').on('submit', function(e) {
        e.preventDefault();
        let formData = $(this).serialize();
        let sendBtn = $('#sendBtn');
        sendBtn.html('<span class="spinner-border spinner-border-sm me-2"></span>Sending...').prop('disabled', true);

        $.ajax({
            url: "<?php echo e(route('submit.enquiry')); ?>",
            type: "POST",
            data: formData,
            success: function(res) {
                if (res.success) {
                    $('#enquiryForm')[0].reset();
                    showToast('Success', res.message, 'success');
                } else {
                    showToast('Error', res.message, 'danger');
                }
                sendBtn.html('Send Message <i class="fas fa-paper-plane ms-2"></i>').prop('disabled', false);
            },
            error: function(xhr) {
                let errors = xhr.responseJSON.errors;
                let errorMsg = '';
                if (errors) {
                    $.each(errors, function(key, value) {
                        errorMsg += value[0] + '\n';
                    });
                } else {
                    errorMsg = 'Something went wrong. Please try again.';
                }
                showToast('Validation Error', errorMsg, 'danger');
                sendBtn.html('Send Message <i class="fas fa-paper-plane ms-2"></i>').prop('disabled', false);
            }
        });
    });

    function showToast(title, message, type) {
        let toastEl = $('#liveToast');
        let toastHeader = toastEl.find('.toast-header');
        toastHeader.removeClass('bg-success bg-danger bg-warning').addClass('bg-' + (type === 'success' ? 'success' : (type === 'danger' ? 'danger' : 'warning')));
        $('#toastTitle').text(title);
        $('#toastMessage').text(message);
        let toast = new bootstrap.Toast(toastEl);
        toast.show();
    }
});
</script>

    <?php echo $__env->make('website.includes.footer', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>

    <?php echo $__env->make('website.includes.script', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
 
</body>

</html><?php /**PATH /home/creattat/public_html/creativevalley9.website/laravel/resources/views/website/home.blade.php ENDPATH**/ ?>