@extends('layouts.auth')

@section('title') privacyPolicy @endsection

@section('content')
<style>
    /* Reset default styles */
    * {
        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: 1rem 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;
    }

    /* 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: 0.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 {
        align-items: center;
        gap: 0.75rem;
    }

    .iconed::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 {
        display: flex;
        padding: 1rem;
        cursor: pointer;
        background: #f9fafb;
        font-weight: 500;
        color: #1f2937;
        transition: background-color 0.2s ease;
    }

    ::marker {
        display: block !important;
        unicode-bidi: isolate;
        font-variant-numeric: tabular-nums;
        text-transform: none;
        text-indent: 0px !important;
        text-align: start !important;
        text-align-last: auto !important;
    }

    summary h3 {
        position: relative;
        bottom: 0px;
        left: 40px;
        background: #f3f4f6;
        display: flex;
        flex-wrap: wrap;
        max-width: 250px;
    }

    summary h3::before {
        position: absolute;
        margin-top: 1px;
        top: 0px;
        left: -33px;
        content: "▶";
        height: 10px;
        width: 10px;
        display: block;
    }

    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: 1rem 0.75rem;
            margin: 0 0.5rem;
            border-radius: 6px;
        }

        .iub_header {
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
        }

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

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

        h2 {
            font-size: 1.4rem;
            padding-bottom: 0.3rem;
        }

        h3 {
            font-size: 1.1rem;
        }

        h4 {
            font-size: 1rem;
        }

        .iub_content {
            padding: 0.75rem;
        }

        ul,
        ol {
            padding-left: 1rem;
        }

        ul.for_boxes li {
            padding: 0.5rem;
            margin-bottom: 0.5rem;
        }

        .iconed::before {
            width: 1rem;
            height: 1rem;
        }

        details {
            margin-bottom: 0.5rem;
        }

        summary {
            padding: 0.75rem;
        }

        .details_body {
            padding: 0.75rem;
        }

        .iub_footer {
            margin-top: 1.5rem;
            padding-top: 1rem;
            font-size: 0.85rem;
        }
    }

    @media (max-width: 480px) {
        .iubenda_fluid_policy {
            padding: 0.75rem 0.5rem;
            margin: 0 0.25rem;
        }

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

        .iub_header p {
            font-size: 0.9rem;
            padding: 0 0.25rem;
        }

        h2 {
            font-size: 1.2rem;
        }

        h3 {
            font-size: 1rem;
        }

        h4 {
            font-size: 0.9rem;
        }

        .iub_content {
            padding: 0.5rem;
        }

        ul,
        ol {
            padding-left: 0.75rem;
        }

        ul.for_boxes li {
            padding: 0.4rem;
        }

        .iconed {
            padding-left: 0;
        }

        .iconed::before {
            display: none;
        }

        summary {
            padding: 0.5rem;
        }

        .details_body {
            padding: 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">Privacy Policy</li>
                </ol>
            </nav>
        </div>
        <h3 class="mainHeading text-center">Privacy Policy</h3>
        <span class="privacy_date_time_text">Effective date: 26th April 2023 </span>
        <h3 class="main_welcome_heading">Welcome to Ambayo!</h3>

        {!! $privacy_and_policy !!}


            <h3 class="main_welcome_heading text-center mt-4">CONTACT US</h3>
            <ul class="inner_notes">
                <li>
                    <img src="{{asset('frontend/img/iconRight.svg')}}" alt="icon" class="img-fluid  rightIcon">
                    <span>If you have any questions about this Privacy Policy, please contact us:</span>
                </li>

                <li>
                    <img src="{{asset('frontend/img/iconRight.svg')}}" alt="icon" class="img-fluid  rightIcon">
                    <span>By email: <a href="#" class="privacy_link"> info@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(".privacy_date_time_text").text("Effective date: " + formatWithOrdinal(extractedDate));
            }

            let emailText = $(document).find(".icon_owner p").eq(1).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