@extends('layouts.auth')

@section('title') Terms @endsection


@section('content')

<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        line-height: 1.6;
        color: #333;
        background-color: #f5f6f5;
    }

    /* Main container styles */
    .iubenda_fluid_policy {
        max-width: 1300px;
        margin: 0 auto;
        padding: 2rem 1.5rem;
        background-color: #fff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        border-radius: 8px;
    }

    /* Header styles */
    .iub_header {
        text-align: center;
        margin-bottom: 3rem;
        padding-bottom: 2rem;
        border-bottom: 1px solid #e5e7eb;
    }

    .iub_header h1 {
        font-size: 2.5rem;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 1rem;
    }

    .iub_header p {
        font-size: 1.1rem;
        color: #4b5563;
        max-width: 800px;
        margin: 0 auto 0.75rem;
    }

    .iub_header a {
        color: #2563eb;
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .iub_header a:hover {
        color: #1e40af;
        text-decoration: underline;
    }

    /* Section headings */
    h2, h3, h4 {
        color: #1f2937;
        margin: 2rem 0 1rem;
    }

    h2 {
        font-size: 1.75rem;
        font-weight: 600;
        border-bottom: 2px solid #e5e7eb;
        padding-bottom: 0.5rem;
    }

    h3 {
        font-size: 1.25rem;
        font-weight: 500;
    }

    h4 {
        font-size: 1.1rem;
        font-weight: 500;
    }

    /* Content container */
    .iub_content {
        padding: 1.5rem;
    }

    .one_line_col {
        margin-bottom: 2rem;
    }

    /* Lists and nested content */
    ul, ol {
        padding-left: 1.5rem;
        margin-bottom: 1rem;
    }

    ul li, ol li {
        margin-bottom: 0.75rem;
    }

    ul.for_boxes {
        list-style: none;
        padding: 0;
    }

    ul.for_boxes li {
        background: #f9fafb;
        padding: 1.5rem;
        margin-bottom: 1rem;
        border-radius: 6px;
        border: 1px solid #e5e7eb;
        transition: background-color 0.2s ease;
    }

    ul.for_boxes li:hover {
        background-color: #f3f4f6;
    }

    /* Iconed sections */
    .iconed {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .iconed::before {
        content: '';
        width: 1.5rem;
        height: 1.5rem;
        background: #2563eb;
        border-radius: 50%;
        flex-shrink: 0;
    }

    /* Expand-click sections (for definitions expand section) */
    .expand-click {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .expand-click::before {
        content: '';
        width: 1.5rem;
        height: 1.5rem;
        background: #2563eb;
        border-radius: 50%;
        flex-shrink: 0;
    }

    /* Details/summary styling */
    details {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        margin-bottom: 1rem;
        overflow: hidden;
    }

    summary {
        padding: 1rem;
        cursor: pointer;
        background: #f9fafb;
        font-weight: 500;
        color: #1f2937;
        transition: background-color 0.2s ease;
    }

    summary:hover {
        background: #f3f4f6;
    }

    .details_body {
        padding: 1.5rem;
        background: #fff;
    }

    /* Footer styles */
    .iub_footer {
        text-align: center;
        padding-top: 2rem;
        border-top: 1px solid #e5e7eb;
        margin-top: 3rem;
        color: #4b5563;
        font-size: 0.9rem;
    }

    /* Links */
    a {
        color: #2563eb;
        text-decoration: none;
        transition: color 0.2s ease;
    }

    a:hover {
        color: #1e40af;
        text-decoration: underline;
    }

    /* Responsive design */
    @media (max-width: 768px) {
        .iubenda_fluid_policy {
            padding: 1.5rem 1rem;
        }

        .iub_header h1 {
            font-size: 2rem;
        }

        h2 {
            font-size: 1.5rem;
        }

        h3 {
            font-size: 1.1rem;
        }

        .iub_content {
            padding: 1rem;
        }

        ul.for_boxes li {
            padding: 1rem;
        }
    }

    @media (max-width: 480px) {
        .iub_header h1 {
            font-size: 1.75rem;
        }

        .iub_header p {
            font-size: 1rem;
        }

        h2 {
            font-size: 1.25rem;
        }

        .iconed, .expand-click {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
    }

    /* Print styles */
    @media print {
        .iubenda_fluid_policy {
            box-shadow: none;
            border: none;
        }

        details {
            border: none;
        }

        summary {
            background: none;
            cursor: default;
        }

        .iub_footer {
            border-top: none;
        }

        a {
            text-decoration: underline;
            color: #000;
        }
    }
</style>
<section class="terms_conditions">
    <div class="container">
        <div id="datail-banner">
            <nav style="--bs-breadcrumb-divider: '>>';" aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{url('/')}}">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Terms & Conditions</li>
                </ol>
            </nav>
        </div>

        <h3 class="mainHeading text-center">{{__("words.Terms & Conditions")}}</h3>
        <h5 class=" lastupdate_ fw-400">Last updated: 25th June 2025</h5>

        {!! $terms !!}

        <h5 class="conditions_subHeading">CONTACT US</h5>
        <ul class="inner_notes">
            <li>
                <img src="{{asset('frontend/img/iconRight.svg')}}" alt="icon" class="img-fluid  rightIcon">
                <span>For more information about our Terms and Conditions, if you have questions, or if you would like to make a complaint, please send your feedback, comments and requests for technical support: by email: </span>
            </li>
            <li>
                <img src="{{asset('frontend/img/iconRight.svg')}}" alt="icon" class="img-fluid  rightIcon">
                <span>By email: <a href="mailto: support@ambayo.com">support@ambayo.com</a></span>
            </li>
        </ul>



    </div>
</section>
@endsection
@push('page_script')

    <script>
         let interval = setInterval(function () {
            if ($(".iub_header h1").length > 0) {
                $(".iub_header h1, .iub_header h2").hide();
                clearInterval(interval);
            }
            let rawText = $(document).find(".iub_footer p").eq(0).text();
            let extractedDate = rawText.match(/Latest update:\s*(.+)/)?.[1].trim();
            if (extractedDate) {
            $(document).find(".lastupdate_").text("Last updated: " + formatWithOrdinal(extractedDate));
            }

            let emailText = $(document).find(".iub_content p").eq(8).text();
            let email = emailText.match(/[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-z]{2,}/i)?.[0];
            if (email) {
            // Find the second <li> inside .inner_notes and update the email link
            $(document).find(".inner_notes li").eq(1).find("a")
                .attr("href", "mailto:" + email)
                .text(email);
            }
        }, 0.5);
        function formatWithOrdinal(dateStr) {
            const date = new Date(dateStr);

            const day = date.getDate();
            const month = date.toLocaleString('default', { month: 'long' }); // e.g. "June"
            const year = date.getFullYear();

            // Get ordinal suffix
            const getOrdinal = (n) => {
                if (n > 3 && n < 21) return 'th';
                switch (n % 10) {
                    case 1: return "st";
                    case 2: return "nd";
                    case 3: return "rd";
                    default: return "th";
                }
            };

            return `${day}${getOrdinal(day)} ${month} ${year}`;
        }
    </script>
@endpush