<x-layouts.app title="M Ghaffar Graphics">
    <section class="landing-hero">
        <div class="hero-copy">
            <p class="eyebrow hero-kicker">Creative Design Agency & Management System</p>
            <h1>Creative Design Solutions for Your <span>Brand Success</span></h1>
            <p class="lead">M Ghaffar Graphics provides premium graphic design services and a complete agency management system to organize clients, projects, payments, approvals, and final delivery.</p>
            <div class="hero-pills" aria-label="Service options">
                <span>One-time service orders</span>
                <span>Monthly agency plans</span>
                <span>GTS seller services</span>
            </div>
            <div class="actions">
                <a class="btn" href="{{ route('service.order') }}">Get Started Now</a>
                <a class="ghost" href="{{ route('portfolio') }}">View Our Work</a>
            </div>
            <div class="hero-trust">
                <span><b>120+</b> Happy Clients</span>
                <span><b>500+</b> Projects Completed</span>
                <span><b>99%</b> Client Satisfaction</span>
            </div>
        </div>
        <div class="dashboard-stage" aria-label="Dashboard preview">
            <div class="hero-glow one"></div>
            <div class="hero-glow two"></div>
            <div class="mockup-window">
                <div class="mockup-head"><i></i><i></i><i></i><span>Agency Dashboard</span></div>
                <div class="mockup-body">
                    <aside><b>MGG</b><span>Clients</span><span>Tasks</span><span>Payments</span><span>Reports</span></aside>
                    <div>
                        <div class="mockup-stats"><b>128 Clients</b><b>34 Tasks</b><b>Rs. 324,500</b></div>
                        <div class="mockup-chart"><i></i><i></i><i></i><i></i><i></i></div>
                        <div class="mockup-list"><span>Real Estate Banner <b>Assigned</b></span><span>Restaurant Social Post <b>In Progress</b></span><span>Brand kit files <b>Delivered</b></span></div>
                    </div>
                </div>
                <div class="mockup-pipeline"><span>Order</span><i></i><span>Assign</span><i></i><span>Deliver</span></div>
            </div>
            <article class="float-card request-card"><strong>Creative Brief</strong><span>New design request</span></article>
            <article class="float-card payment-card"><strong>Payment Proof</strong><span>Admin review ready</span></article>
            <article class="float-card delivery-card"><strong>Final Delivery</strong><span>PNG and source files</span></article>
        </div>
    </section>

    <section class="quick-order-band">
        <article>
            <span>01</span>
            <h3>Random Client Order</h3>
            <p>Visitors can order a single service, create password, and get a portal without monthly plan.</p>
            <a href="{{ route('service.order') }}">Start Order</a>
        </article>
        <article>
            <span>02</span>
            <h3>Agency Plan Client</h3>
            <p>Long-term clients select packages, upload payment proof, and track monthly usage.</p>
            <a href="{{ route('pricing') }}">View Plans</a>
        </article>
        <article>
            <span>03</span>
            <h3>Delivery Tracking</h3>
            <p>Admin assigns work, designers upload files, and clients follow every status update.</p>
            <a href="{{ route('login') }}">Open Portal</a>
        </article>
    </section>

    <section class="brand-band" aria-label="Trusted brands">
        <div class="section-intro"><p class="eyebrow">Trusted Brands</p><h2>Built for busy visual brands and delivery partners</h2></div>
        <div class="brand-marquee">
            <div>
                @foreach (['Realty Launch Co','Quran Academy','Cafe Story','Meta Campaigns','Growth Partners','Brand Studio','Web Projects','Realty Launch Co','Quran Academy','Cafe Story'] as $brand)
                    <span>{{ $brand }}</span>
                @endforeach
            </div>
        </div>
    </section>

    <section class="section landing-section services-premium" id="services">
        <div class="section-intro"><p class="eyebrow">Services</p><h2>Premium creative services for every brand touchpoint</h2></div>
        <div class="service-grid">
            @foreach ($services as $service)
                <article class="card service-card" style="--delay: {{ $loop->index * 70 }}ms"><span class="service-mark">{{ strtoupper(substr($service->name, 0, 2)) }}</span><h3>{{ $service->name }}</h3><p class="muted">{{ $service->description }}</p><a class="ghost small" href="{{ route('service.order', $service) }}">Order Now</a></article>
            @endforeach
        </div>
    </section>

    <section class="section landing-section live-order-section">
        <div class="section-intro split-intro">
            <div><p class="eyebrow">Live Order Flow</p><h2>One-time orders and plan work stay separated</h2></div>
            <a class="ghost" href="{{ route('service.order') }}">Create New Order</a>
        </div>
        <div class="live-order-grid">
            <article class="live-order-card"><b>Single Service</b><strong>Logo, poster, website, reel cover</strong><span class="progress"><i style="width:72%"></i></span><small>No monthly package required</small></article>
            <article class="live-order-card"><b>Monthly Client</b><strong>Plan usage, requests, payment proofs</strong><span class="progress"><i style="width:58%"></i></span><small>Best for long-term work</small></article>
            <article class="live-order-card"><b>Admin Queue</b><strong>Review, assign, approve, deliver</strong><span class="progress"><i style="width:86%"></i></span><small>All work visible in portal</small></article>
        </div>
    </section>

    <section class="section landing-section soft-band why-premium">
        <div class="section-intro"><p class="eyebrow">Why Choose Us</p><h2>Premium output without losing the work trail</h2></div>
        <div class="why-layout">
            <div class="feature-grid">
                @foreach ([
                    ['Fast Delivery', 'Deadlines, today work, and overdue tasks stay visible.'],
                    ['Professional Team', 'Admin and designer roles keep ownership clear.'],
                    ['Creative Designs', 'Campaign visuals are shaped for the right channel.'],
                    ['Monthly Plans', 'Work limits and plan usage help teams plan capacity.'],
                    ['Dedicated Support', 'Messages and client requests stay attached to work.'],
                    ['Quality Assurance', 'Approval, revision, and completed statuses protect delivery.'],
                ] as [$title, $copy])
                    <article class="card"><span class="check-dot">✓</span><h3>{{ $title }}</h3><p>{{ $copy }}</p></article>
                @endforeach
            </div>
            <aside class="target-illustration card" aria-label="Agency achievements"><div><b>99%</b><span>Client Satisfaction</span></div><i></i><strong>Quality, clarity, and delivery in one system.</strong></aside>
        </div>
    </section>

    <section class="section landing-section">
        <div class="section-intro"><p class="eyebrow">Workflow</p><h2>From selected service to final delivery</h2></div>
        <ol class="workflow-track">
            @foreach (['Discuss Project','Plan & Research','Design & Development','Review & Feedback','Final Delivery'] as $step)
                <li>{{ $step }}</li>
            @endforeach
        </ol>
    </section>

    <section class="section landing-section" id="portfolio">
        <div class="section-intro split-intro"><div><p class="eyebrow">Portfolio Preview</p><h2>Work categories clients ask for every month</h2></div><a class="ghost" href="{{ route('portfolio') }}">All Projects</a></div>
        <div class="portfolio-board">
            @forelse ($projects as $project)
                <article class="portfolio-preview">
                    <div class="portfolio-art">@if($project->image_path)<img src="{{ asset('storage/'.$project->image_path) }}" alt="{{ $project->title }}">@else{{ strtoupper(substr($project->category ?: $project->title, 0, 2)) }}@endif</div>
                    <span class="badge">{{ $project->category ?: 'Design Project' }}</span>
                    <h3>{{ $project->title }}</h3>
                    <p>{{ $project->description }}</p>
                    <a class="ghost small" href="{{ $project->project_url ?: route('portfolio') }}">View Project</a>
                </article>
            @empty
                @foreach (['Real Estate Designs','Restaurant Designs','Social Media Designs','Branding Projects','Video Projects','Website Projects'] as $category)
                    <article class="portfolio-preview"><div class="portfolio-art">{{ strtoupper(substr($category, 0, 2)) }}</div><span class="badge">Portfolio</span><h3>{{ $category }}</h3><p>Published projects from admin portfolio appear here.</p></article>
                @endforeach
            @endforelse
        </div>
    </section>

    <section class="section landing-section portal-band">
        <div class="section-intro"><p class="eyebrow">Dashboard Preview</p><h2>One system, tailored portals</h2></div>
        <div class="portal-previews">
            <article class="portal-preview admin-preview"><span>Admin Dashboard</span><h3>Clients, plans, payments</h3><div><i style="width:88%"></i><i style="width:64%"></i><i style="width:76%"></i></div></article>
            <article class="portal-preview"><span>Client Portal</span><h3>Requests and downloads</h3><div><i style="width:58%"></i><i style="width:82%"></i><i style="width:45%"></i></div></article>
            <article class="portal-preview"><span>Designer Portal</span><h3>Assigned and submitted</h3><div><i style="width:74%"></i><i style="width:53%"></i><i style="width:91%"></i></div></article>
            <article class="portal-preview wide-preview"><span>Progress Tracker</span><h3>Plan usage, client progress, task load</h3><div><i style="width:92%"></i><i style="width:68%"></i><i style="width:79%"></i></div></article>
            <article class="portal-preview"><span>Analytics</span><h3>Revenue and performance</h3><div><i style="width:84%"></i><i style="width:61%"></i><i style="width:72%"></i></div></article>
        </div>
    </section>

    <section class="section landing-section" id="pricing">
        <div class="section-intro"><p class="eyebrow">Pricing</p><h2>Monthly design plans with portal visibility</h2></div>
        <div class="pricing-grid">
            @forelse ($plans as $plan)
                <article class="card price-card @if($loop->index === 1) featured-plan @endif">
                    <span class="badge">{{ ['Starter Plan','Standard Plan','Premium Plan'][$loop->index] ?? 'Plan' }}</span>
                    <h3>{{ $plan->name }}</h3>
                    <div class="price">{{ number_format($plan->price) }}</div>
                    <p class="muted">{{ $plan->work_limit }} work items / {{ $plan->billing_cycle }}</p>
                    <ul>
                        @foreach (($plan->features ?: ['Plan tracking', 'Requests and status', 'Manual payment review']) as $feature)
                            <li>{{ $feature }}</li>
                        @endforeach
                    </ul>
                    @auth
                        <a class="btn" href="{{ auth()->user()->role === 'client' ? route('client.plan') : route(auth()->user()->portalRole().'.dashboard') }}">Choose Plan</a>
                    @else
                        <a class="btn" href="{{ route('login') }}">Choose Plan</a>
                    @endauth
                </article>
            @empty
                <div class="empty-state">Pricing cards appear after admin creates active plans.</div>
            @endforelse
        </div>
        <div class="comparison-strip"><b>Features Comparison</b><span>Requests</span><span>Plan Usage</span><span>Payment Proofs</span><span>Task Delivery</span><a href="{{ route('pricing') }}">Compare Plans</a></div>
    </section>

    @if($gtsEnabled)
        <section class="section landing-section gts-home-preview">
            <div class="section-intro split-intro">
                <div><p class="eyebrow">GTS System</p><h2>Ghaffar Trusted Seller social service lane</h2></div>
                <a class="ghost" href="{{ route('gts') }}">Open GTS</a>
            </div>
            <div class="gts-home-grid">
                @foreach([
                    ['TikTok', 'Likes, followers, views, and comments'],
                    ['Instagram', 'Followers, post likes, views, comments'],
                    ['Facebook', 'Page followers and reactions'],
                    ['WhatsApp', 'Poll vote delivery points'],
                ] as [$platform, $services])
                    <article class="card"><span>{{ $platform }}</span><h3>{{ $services }}</h3><p>Choose quantity, confirm price, share payment proof, and follow delivery.</p></article>
                @endforeach
            </div>
        </section>
    @endif

    <section class="section landing-section stats-band">
        <div class="stats-grid">
            @foreach ([['120+','Happy Clients'],['500+','Projects Completed'],['50+','Active Designers'],['99%','Client Satisfaction']] as [$number, $label])
                <article class="card stat-tile"><b>{{ $number }}</b><span>{{ $label }}</span></article>
            @endforeach
        </div>
    </section>

    <section class="section landing-section testimonial-band">
        <div class="section-intro"><p class="eyebrow">Testimonials</p><h2>Success stories from a calmer creative workflow</h2></div>
        <div class="testimonial-grid">
            <blockquote class="card"><div class="review-head"><i>AK</i><span>★★★★★</span></div><p>M Ghaffar Graphics provided outstanding designs and their system helps us manage everything very easily.</p><b>Ahmed Khan</b><small>CEO, Real Estate Group</small></blockquote>
            <blockquote class="card"><div class="review-head"><i>CL</i><span>★★★★★</span></div><p>I can see the plan, pending work, and files without chasing updates. The workflow feels professional.</p><b>Client Portal</b><small>Monthly Design Client</small></blockquote>
            <blockquote class="card"><div class="review-head"><i>DS</i><span>★★★★★</span></div><p>Deadlines, revisions, and submissions are clear before delivery. It keeps every task organized.</p><b>Designer Portal</b><small>Creative Team</small></blockquote>
        </div>
    </section>

    <section class="section landing-section faq-band">
        <div class="section-intro"><p class="eyebrow">FAQ</p><h2>Questions before you start a project</h2></div>
        <div class="faq-grid">
            <details open><summary>Which services can I request?</summary><p>Social media posts, advertisement posters, logos, branding, Meta ads, videos, real estate designs, and websites.</p></details>
            <details><summary>How do pricing plans work?</summary><p>Plans define monthly work limits and features. Custom work can be scoped through contact and admin plan setup.</p></details>
            <details><summary>How is delivery tracked?</summary><p>Clients submit requests, admins assign tasks, designers upload work, and statuses show approval or revision progress.</p></details>
            <details><summary>How do manual payments work?</summary><p>Clients select a payment method, add transaction details, upload proof, and wait for admin review.</p></details>
        </div>
    </section>

    <section class="section final-project-cta">
        <div>
            <p class="eyebrow">Start Your Project</p>
            <h2>Ready To Grow Your Business?</h2>
            <p>Let's work together and build something amazing for your brand.</p>
        </div>
        <div class="cta-stack">
            <a class="btn" href="{{ route('service.order') }}">Start Your Project Now</a>
            <a class="ghost" href="https://wa.me/923000000000">WhatsApp</a>
            <span>{{ \App\Models\WebsiteSetting::current()->email ?: 'hello@mghaffargraphics.com' }}</span>
        </div>
    </section>
</x-layouts.app>
