@extends('layouts.app')

@section('content')

<section class="page-hero">
    <div class="container-site">
        <p class="page-hero-label">Book a Demo</p>
        <h1 class="page-hero-title">See PhyloPOS built for your operation.</h1>
        <p class="page-hero-subtitle">
            Tell us your business type, outlet count, and current setup. We will show you the features and workflows that matter most to you — not a generic slideshow.
        </p>
    </div>
</section>

<section class="section bg-surface">
    <div class="container-site">
        <div class="grid lg:grid-cols-5 gap-12">

            {{-- Left — what to expect --}}
            <div class="lg:col-span-2 space-y-8">
                <div>
                    <h2 class="font-bold text-graphite-900 text-xl mb-5">What happens after you submit</h2>
                    <div class="space-y-4">
                        @foreach([
                            ['We review your submission', 'Our team reads your business type, outlet count, and current setup to prepare a relevant demo.'],
                            ['We contact you within 24 hours', 'A sales or solutions consultant reaches out to schedule a time that works for you.'],
                            ['Tailored 45-minute session', 'We walk through PhyloPOS focused on your specific workflows — not a generic product tour.'],
                            ['No pressure', 'We will tell you honestly if PhyloPOS is a good fit. If not, we will say so.'],
                        ] as [$step, $desc])
                        <div class="flex gap-4">
                            <div class="number-pill flex-shrink-0 self-start">{{ $loop->iteration }}</div>
                            <div>
                                <h4 class="font-semibold text-graphite-900 mb-1 text-sm">{{ $step }}</h4>
                                <p class="text-xs text-graphite-500 leading-relaxed">{{ $desc }}</p>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>

                <div class="card p-6 bg-emerald-50 border-emerald-100">
                    <h3 class="font-bold text-emerald-900 mb-4 text-sm">Who the demo is built for</h3>
                    <ul class="space-y-2">
                        @foreach([
                            'Restaurant and café owners',
                            'Bar and club operators',
                            'Cloud kitchen founders',
                            'Retail store and chain owners',
                            'Franchise operators',
                            'Heads of operations for multi-outlet groups',
                        ] as $who)
                        <li class="feature-check text-sm text-emerald-800">
                            <div class="feature-check-icon bg-emerald-100 text-emerald-700">
                                <svg class="w-3 h-3" viewBox="0 0 12 12" fill="currentColor">
                                    <path d="M10.28 2.28L3.89 8.67l-2.17-2.17-1.06 1.06L3.89 10.8 11.34 3.34z"/>
                                </svg>
                            </div>
                            {{ $who }}
                        </li>
                        @endforeach
                    </ul>
                </div>

                <div class="card p-6 border-graphite-100">
                    <div class="flex items-center gap-3 mb-3">
                        <svg class="w-5 h-5 text-teal-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            @include('components.icons.phone')
                        </svg>
                        <span class="font-semibold text-graphite-900 text-sm">Rather talk now?</span>
                    </div>
                    <a href="tel:{{ str_replace(' ', '', config('phylopos.company.phone')) }}"
                       class="text-teal-600 font-semibold hover:text-teal-700 transition-colors">
                        {{ config('phylopos.company.phone') }}
                    </a>
                    <p class="text-xs text-graphite-400 mt-1">Mon–Sat, 9AM–7PM IST</p>
                </div>
            </div>

            {{-- Right — form --}}
            <div class="lg:col-span-3">
                <div class="card p-8 md:p-10">
                    <h2 class="font-bold text-graphite-900 text-xl mb-2">Request your demo</h2>
                    <p class="text-graphite-500 text-sm mb-8">Fields marked <span class="text-red-500">*</span> are required.</p>
                    <x-demo-form />
                </div>
            </div>
        </div>
    </div>
</section>

@endsection