@extends('layouts.app')

@section('title', 'How To Order - Shirani Fashion')

@section('content')
    <div class="page-banner">
        <h1>Couture Made<span>Simple</span></h1>
        <p>No physical studio visits required. Discover how our global virtual measurement platform operates.</p>
    </div>

    <section class="container catalog-section">
        <div class="info-intro">
            <h2>Your Seamless Digital Fitting Room</h2>
            <p>We have re-engineered luxury tailoring. By synchronizing remote digital consulting with heritage craftsmanship methods, we build faultless custom outfits tailored precisely to your form.</p>
        </div>

        <div class="timeline-steps">
            <div class="t-step-block">
                <div class="t-pointer"></div>
                <div class="t-content">
                    <span class="t-num">01</span>
                    <h3>Pick Your Silhouette</h3>
                    <p>Browse our digital bridal or festive lookbooks, or share your custom reference imagery directly with our fashion group over WhatsApp.</p>
                </div>
            </div>
            <div class="t-step-block">
                <div class="t-pointer"></div>
                <div class="t-content">
                    <span class="t-num">02</span>
                    <h3>Submit Smart Sizing</h3>
                    <p>Complete our comprehensive digital measurement checklist or set up a guided 1-on-1 video call session where our stylists explain how to take accurate points.</p>
                </div>
            </div>
            <div class="t-step-block">
                <div class="t-pointer"></div>
                <div class="t-content">
                    <span class="t-num">03</span>
                    <h3>Artisanal Handcrafting</h3>
                    <p>Our master tailors build the foundation patterns, execute intricate embroidery sequences, and finish raw seams matching your design constraints.</p>
                </div>
            </div>
            <div class="t-step-block">
                <div class="t-pointer"></div>
                <div class="t-content">
                    <span class="t-num">04</span>
                    <h3>Insured Global Logistics</h3>
                    <p>Your finished garment gets steamed, carefully vacuum-sealed into premium luxury travel packs, and dispatched globally with fully recorded shipping alerts.</p>
                </div>
            </div>
        </div>
    </section>
@endsection