<?php $__env->startSection('title', 'Pricing - Graphic Design'); ?>

<?php
$theme = [
    'sectionBg' => 'bg-slate-900',
    'sectionBgAlt' => 'bg-slate-950',
    'cardBg' => 'bg-slate-900',
    'cardBorder' => 'border-slate-800',
    'textNormal' => 'text-white',
    'textSecondary' => 'text-slate-400',
    'accent' => 'text-cyan-400',
    'accentBg' => 'bg-cyan-500',
    'inputBg' => 'bg-slate-800',
    'inputBorder' => 'border-slate-700',
];
?>

<?php $__env->startSection('content'); ?>
    <!-- Hero -->
    <section class="relative py-20 md:py-32 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
        <div class="max-w-7xl mx-auto px-6 lg:px-8 text-center">
            <span class="inline-flex items-center px-4 py-2 rounded-full bg-cyan-500/10 text-cyan-400 text-sm font-medium mb-6 border border-cyan-500/20 animate-on-scroll">
                <span class="w-2 h-2 bg-cyan-400 rounded-full mr-2 animate-pulse"></span>
                Services & Pricing
            </span>
            <h1 class="font-display text-4xl md:text-6xl font-bold text-white mb-6 animate-on-scroll" style="transition-delay: 0.1s;">
                Design <span class="text-gradient">Packages</span>
            </h1>
            <p class="text-xl text-slate-400 max-w-3xl mx-auto animate-on-scroll" style="transition-delay: 0.2s;">
                Transparent pricing for professional graphic design services
            </p>
        </div>
    </section>

    <!-- Pricing Packages -->
    <section class="py-20 <?php echo e($theme['sectionBg']); ?>">
        <div class="max-w-7xl mx-auto px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <?php $__currentLoopData = $packages; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $package): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <div
                        class="relative p-8 <?php echo e($theme['cardBg']); ?> rounded-2xl border <?php echo e($theme['cardBorder']); ?> hover:border-cyan-500/50 transition duration-500 design-card animate-on-scroll <?php echo e($package['popular'] ? 'ring-2 ring-cyan-500' : ''); ?>"
                        style="transition-delay: <?php echo e($index * 0.1); ?>s;"
                    >
                        <?php if($package['popular']): ?>
                            <div class="absolute -top-4 left-1/2 transform -translate-x-1/2">
                                <span class="bg-gradient-to-r from-cyan-500 to-fuchsia-500 text-white text-xs font-bold px-4 py-1 rounded-full">Most Popular</span>
                            </div>
                        <?php endif; ?>

                        <div class="text-center mb-6">
                            <h3 class="text-xl font-semibold text-white mb-2"><?php echo e($package['name']); ?></h3>
                            <div class="text-4xl font-bold text-gradient"><?php echo e($package['price']); ?></div>
                            <p class="text-slate-400 text-sm mt-2"><?php echo e($package['description']); ?></p>
                        </div>

                        <ul class="space-y-4 mb-8">
                            <?php $__currentLoopData = $package['features']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $feature): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <li class="flex items-start text-slate-300 text-sm">
                                    <?php echo $__env->make('design.partials.icon', ['name' => 'Check', 'size' => 'w-5 h-5 mr-3 text-cyan-400 flex-shrink-0 mt-0.5'], array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
                                    <?php echo e($feature); ?>

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

                        <a href="/design/process" class="block w-full py-3 text-center rounded-xl font-semibold transition duration-300 <?php echo e($package['popular'] ? 'bg-gradient-to-r from-cyan-500 to-fuchsia-500 hover:opacity-90 text-white' : 'bg-slate-800 hover:bg-slate-700 text-white'); ?>">
                            Get Started
                        </a>
                    </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
        </div>
    </section>

    <!-- Add-ons -->
    <section class="py-20 <?php echo e($theme['sectionBgAlt']); ?> border-t border-slate-800">
        <div class="max-w-4xl mx-auto px-6 lg:px-8">
            <div class="text-center mb-12 animate-on-scroll">
                <h2 class="font-display text-3xl font-bold text-white mb-4">Add-On Services</h2>
                <p class="text-slate-400">Enhance your package with additional services</p>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <?php $__currentLoopData = $addOns; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $name => $price): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <div class="flex items-center justify-between p-4 <?php echo e($theme['cardBg']); ?> rounded-xl border <?php echo e($theme['cardBorder']); ?> animate-on-scroll">
                        <span class="text-slate-300"><?php echo e($name); ?></span>
                        <span class="text-cyan-400 font-medium"><?php echo e($price); ?></span>
                    </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
        </div>
    </section>

    <!-- What's Included -->
    <section class="py-20 <?php echo e($theme['sectionBg']); ?> border-t border-slate-800">
        <div class="max-w-6xl mx-auto px-6 lg:px-8">
            <div class="text-center mb-12 animate-on-scroll">
                <h2 class="font-display text-3xl font-bold text-white mb-4">What's Included</h2>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <?php
                    $inclusions = [
                        ['icon' => 'Layers', 'title' => 'Source Files', 'desc' => 'All original design files in AI, PSD, and EPS formats'],
                        ['icon' => 'Target', 'title' => 'Brand Guidelines', 'desc' => 'Comprehensive document detailing your brand usage'],
                        ['icon' => 'Lightbulb', 'title' => '3 Revisions', 'desc' => 'Round of revisions to perfect your design'],
                        ['icon' => 'TrendingUp', 'title' 'Scalable Files', 'desc' => 'Vector graphics that scale to any size'],
                        ['icon' => 'Image', 'title' => 'Print Ready', 'desc' => 'Files prepared for professional printing'],
                        ['icon' => 'Users', 'title' => 'Lifetime Support', 'desc' => 'Ongoing support for brand questions'],
                    ];
                ?>

                <?php $__currentLoopData = $inclusions; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <div class="flex items-start space-x-4 p-4 animate-on-scroll" style="transition-delay: <?php echo e($index * 0.1); ?>s;">
                        <div class="w-10 h-10 rounded-lg bg-cyan-500/10 flex items-center justify-center flex-shrink-0 text-cyan-400">
                            <?php echo $__env->make('design.partials.icon', ['name' => $item['icon'], 'size' => 'w-5 h-5'], array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
                        </div>
                        <div>
                            <h4 class="text-white font-medium mb-1"><?php echo e($item['title']); ?></h4>
                            <p class="text-slate-400 text-sm"><?php echo e($item['desc']); ?></p>
                        </div>
                    </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
        </div>
    </section>

    <!-- FAQ -->
    <section class="py-20 <?php echo e($theme['sectionBgAlt']); ?> border-t border-slate-800">
        <div class="max-w-4xl mx-auto px-6 lg:px-8">
            <div class="text-center mb-12 animate-on-scroll">
                <h2 class="font-display text-3xl font-bold text-white mb-4">Frequently Asked Questions</h2>
            </div>

            <div class="space-y-4">
                <?php
                    $faqs = [
                        ['q' => 'How long does a typical branding project take?', 'a' => 'Most branding projects take 2-4 weeks depending on complexity. We provide a detailed timeline during our initial consultation.'],
                        ['q' => 'Do you offer payment plans?', 'a' => 'Yes! We offer 50/50 payment split: 50% upfront to begin work, 50% upon project completion.'],
                        ['q' => 'Can I trademark the logo you design?', 'a' => 'Absolutely! All our designs are original and created specifically for you, making them trademark-ready.'],
                        ['q' => 'What if I don\'t like the initial concepts?', 'a' => 'We offer unlimited concepts during the concept phase. If our initial directions miss the mark, we explore new directions until we get it right.'],
                        ['q' => 'Do you provide website design with branding?', 'a' => 'Brand identity includes digital assets, but we can add website design as an add-on or separate service.'],
                    ];
                ?>

                <?php $__currentLoopData = $faqs; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $faq): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <div class="<?php echo e($theme['cardBg']); ?> rounded-xl border <?php echo e($theme['cardBorder']); ?> animate-on-scroll" style="transition-delay: <?php echo e($index * 0.1); ?>s;">
                        <details class="group">
                            <summary class="flex items-center justify-between p-6 cursor-pointer list-none <?php echo e($theme['textNormal']); ?>">
                                <span class="font-medium"><?php echo e($faq['q']); ?></span>
                                <svg class="w-5 h-5 text-slate-400 group-open:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                                </svg>
                            </summary>
                            <div class="px-6 pb-6 text-slate-400">
                                <?php echo e($faq['a']); ?>

                            </div>
                        </details>
                    </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
        </div>
    </section>

    <!-- CTA -->
    <section class="py-20 bg-gradient-to-r from-cyan-900/20 to-fuchsia-900/20 border-t border-slate-800">
        <div class="max-w-4xl mx-auto px-6 lg:px-8 text-center">
            <h2 class="font-display text-3xl font-bold text-white mb-4 animate-on-scroll">Ready to Start Your Project?</h2>
            <p class="text-slate-400 mb-8 animate-on-scroll" style="transition-delay: 0.1s;">Let's create something amazing together</p>
            <div class="animate-on-scroll" style="transition-delay: 0.2s;">
                <a href="/design/process" class="inline-flex items-center px-8 py-4 bg-gradient-to-r from-cyan-500 to-fuchsia-500 text-white font-semibold rounded-full shadow-lg hover:shadow-cyan-500/25 transition duration-300">
                    Start the Process
                </a>
            </div>
        </div>
    </section>
<?php $__env->stopSection(); ?>


<?php echo $__env->make('design.layouts.design', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /Users/olasunkanmiarowolo/oamediakraft.co.uk/oamk/resources/views/design/pricing.blade.php ENDPATH**/ ?>