@extends('layouts.master')
@section('content')
    <section class="section">
        <div class="container">
            <div class="section-main-heading" style="--top-bar-background:#00848e; --top-bar-color:#f9fafb; --top-bar-background-lighter:#1d9ba4;">
                <h4>Guide to Twilio Tools</h4>
            </div>
            <div class="container mb-4">
                <div class="row">
                    <div class="col-6">
                    <div class="card text-center">
                        <div class="card-header custom-header"> Video 1: How to create Twilio Account</div>
                        <div class="card-body custom-card-body">
                            <iframe width="500" height="315" src="https://www.youtube.com/embed/gmONYJBAp44" title="How to create Twilio Account &amp; get Credentials" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
                        </div>
                    </div>
                    </div>
                    <div class="col-6">
                        <div class="card text-center">
                            <div class="card-header custom-header"> Video 2: How to Automate SMS for every order</div>
                            <div class="card-body custom-card-body">
                                <iframe width="500" height="315" src="https://www.youtube.com/embed/AO56Lh1luv0" title="How to automate SMS for every order on Shopify" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mt-4">
                    <div class="col-6">
                        <div class="card text-center">
                            <div class="card-header custom-header"> Video 3: How to send bulk marketing SMS</div>
                            <div class="card-body custom-card-body">
                                <iframe width="500" height="315" src="https://www.youtube.com/embed/J2FkrIf6Uz0" title="How to send bulk marketing SMS"  frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
                            </div>
                        </div>
                    </div>
{{--                    <div class="col-6">--}}
{{--                        <div class="card text-center">--}}
{{--                            <div class="card-header custom-header"> Video 4: How to enable phone as required field in checkout</div>--}}
{{--                            <div class="card-body custom-card-body">--}}
{{--                                <iframe width="500" height="315" src="https://www.youtube.com/embed/K87aFjB7Ff0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div>--}}
                </div>
            </div>
        </div>
    </section>
    <style>
        .custom-header {
            background-color: #d3efe2;
            color: #000;
            padding: 10px;
            font-weight: bold;
        }
        .custom-card-body {
            background-color: #f5f5f5;
            padding: 20px;
        }

    </style>
@endsection