<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>Information - Muthu Jewellers</title>

    <style>

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

        body {
            font-family: Arial, sans-serif;
            background: #f5f5f5;
            color: #111;
        }

        /* ================= HEADER ================= */

        header {
            background: #111;
            color: white;
            padding: 25px 45px;

            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        header h1 {
            font-size: 32px;
        }

        nav a {
            color: white;
            text-decoration: none;
            margin-left: 25px;
            font-size: 18px;
        }

        nav a:hover {
            color: #d4af37;
        }

        /* ================= MAIN CONTAINER ================= */

        .container {
            max-width: 1000px;
            margin: 40px auto;
            padding: 20px;
        }

        /* ================= PAGE TITLE ================= */

        .page-title {
            text-align: center;
            font-size: 42px;
            margin-bottom: 10px;
        }

        .subtitle {
            text-align: center;
            color: #666;
            font-size: 19px;
            margin-bottom: 35px;
        }

        /* ================= LANGUAGE BUTTONS ================= */

        .language-tabs {
            display: flex;
            justify-content: center;
            gap: 18px;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }

        .language-tabs button {
            background: #111;
            color: white;

            border: 2px solid #d4af37;
            border-radius: 10px;

            padding: 14px 40px;

            font-size: 17px;
            font-weight: bold;

            cursor: pointer;

            transition: 0.3s;
        }

        .language-tabs button:hover {
            background: #d4af37;
            color: #111;

            transform: translateY(-2px);
        }

        /* ================= LANGUAGE CARD ================= */

        .language-content {
            display: none;

            background: white;

            border-radius: 15px;

            padding: 30px;

            margin-bottom: 25px;

            box-shadow: 0 4px 15px rgba(0,0,0,0.08);
        }

        .language-content.active {
            display: block;
        }

        .language-content > h2 {
            font-size: 30px;
            margin-bottom: 25px;

            border-bottom: 2px solid #d4af37;

            padding-bottom: 12px;
        }

        /* ================= INFORMATION MENU ================= */

        .info-menu {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .info-menu button {
            width: 100%;

            min-height: 58px;

            padding: 15px 20px;

            background: #111;
            color: white;

            border: 1px solid #d4af37;
            border-radius: 10px;

            font-size: 17px;
            font-weight: bold;

            text-align: left;

            cursor: pointer;

            transition: all 0.3s ease;
        }

        .info-menu button:hover {
            background: #d4af37;
            color: #111;

            transform: translateX(5px);

            box-shadow:
                0 5px 15px rgba(212,175,55,0.25);
        }

        /* ================= INFO SECTIONS ================= */

        .info-section {
            display: none;

            margin-top: 25px;

            padding-top: 25px;

            border-top: 2px solid #d4af37;
        }

        .info-section.active {
            display: block;
        }

        .info-section h3 {
            font-size: 24px;
            margin-bottom: 15px;
        }

        .info-section h4 {
            font-size: 20px;
            margin-top: 25px;
            margin-bottom: 10px;
        }

        .info-section p,
        .info-section li {
            font-size: 17px;
            line-height: 1.7;
        }

        .info-section ul,
        .info-section ol {
            margin-left: 25px;
            margin-top: 10px;
        }

        /* ================= EXAMPLE BOX ================= */

        .example {
            background: #f7f7f7;

            padding: 15px;

            border-radius: 8px;

            margin-top: 15px;

            line-height: 1.7;
        }

        /* ================= IMPORTANT BOX ================= */

        .important {
            background: #fff4d6;

            border-left: 5px solid #b8860b;

            padding: 15px;

            margin-top: 18px;

            border-radius: 6px;

            line-height: 1.7;
        }

        /* ================= BANK BOX ================= */

        .bank {
            background: #f7f7f7;

            padding: 18px;

            border-radius: 8px;

            line-height: 1.8;

            margin-top: 10px;
        }

        /* ================= BACK BUTTON ================= */

        .back-menu {
            display: inline-block;

            margin-top: 25px;

            padding: 12px 20px;

            background: #b8860b;

            color: white;

            border: none;

            border-radius: 8px;

            font-size: 15px;

            font-weight: bold;

            cursor: pointer;

            text-decoration: none;
        }

        .back-menu:hover {
            background: #d4af37;
            color: #111;
        }

        /* ================= TRACK BUTTON ================= */

        .track-link {
            display: inline-block;

            margin-top: 15px;

            padding: 14px 22px;

            background: #111;

            color: white;

            border: 2px solid #d4af37;

            border-radius: 8px;

            text-decoration: none;

            font-weight: bold;
        }

        .track-link:hover {
            background: #d4af37;
            color: #111;
        }

        /* ================= FOOTER ================= */

        footer {
            background: #111;

            color: white;

            text-align: center;

            padding: 18px;

            margin-top: 40px;

            font-size: 14px;
        }

        footer span {
            color: #d4af37;
            font-weight: bold;
        }

        /* ================= MOBILE ================= */

        @media (max-width: 700px) {

            header {
                flex-direction: column;

                gap: 15px;

                text-align: center;
            }

            nav a {
                margin: 0 8px;

                font-size: 16px;
            }

            .page-title {
                font-size: 32px;
            }

            .subtitle {
                font-size: 16px;
            }

            .language-tabs {
                gap: 10px;
            }

            .language-tabs button {
                padding: 12px 25px;
            }

            .language-content {
                padding: 20px;
            }

            .info-section h3 {
                font-size: 21px;
            }

        }

    </style>

</head>


<body>


<!-- ================= HEADER ================= -->

<header>

    <h1>
        MUTHU JEWELLERS 💎
    </h1>

    <nav>

        <a href="index.php">
            Home
        </a>

        <a href="shop.php">
            Shop
        </a>

        <a href="cart.php">
            Cart 🛒
        </a>

    </nav>

</header>


<!-- ================= MAIN ================= -->

<div class="container">


    <h1 class="page-title">
        📦 Information
    </h1>

    <p class="subtitle">
        Choose your language and select the information you need.
    </p>


    <!-- ================= LANGUAGE BUTTONS ================= -->

    <div class="language-tabs">

        <button
            type="button"
            onclick="showLanguage('sinhala')"
        >
            සිංහල
        </button>


        <button
            type="button"
            onclick="showLanguage('tamil')"
        >
            தமிழ்
        </button>


        <button
            type="button"
            onclick="showLanguage('english')"
        >
            English
        </button>

    </div>


    <!-- ================================================= -->
    <!-- ================= SINHALA ======================= -->
    <!-- ================================================= -->

    <div
        class="language-content active"
        id="sinhala"
    >

        <h2>
            සිංහල
        </h2>


        <!-- MENU -->

        <div class="info-menu">

            <button
                type="button"
                onclick="showInfo('sinhala-how-order')"
            >
                🛍️ ඇණවුම් කරන ආකාරය
            </button>


            <button
                type="button"
                onclick="showInfo('sinhala-order-info')"
            >
                📋 Order තොරතුරු
            </button>


            <button
                type="button"
                onclick="showInfo('sinhala-payment')"
            >
                💳 Payment Information
            </button>


            <button
                type="button"
                onclick="showInfo('sinhala-delivery')"
            >
                🚚 Delivery Information
            </button>


            <button
                type="button"
                onclick="showInfo('sinhala-track')"
            >
                📦 Order එක Track කරන ආකාරය
            </button>

        </div>


        <!-- HOW TO ORDER -->

        <div
            class="info-section"
            id="sinhala-how-order"
        >

            <h3>
                🛍️ ඇණවුමක් කරන ආකාරය
            </h3>

            <p>
                Muthu Jewellers website එකෙන් පහසුවෙන් jewellery items
                ඇණවුම් කළ හැක.
            </p>

            <ol>

                <li>
                    🛍️ <strong>Shop</strong> වෙත ගොස් අවශ්‍ය jewellery item එක තෝරන්න.
                </li>

                <li>
                    💎 Product එකේ available colour / variation එක තෝරන්න.
                </li>

                <li>
                    🛒 <strong>Add to Cart</strong> button එක click කරලා product එක cart එකට දාන්න.
                </li>

                <li>
                    🧾 Cart එක open කරලා items සහ total amount එක check කරන්න.
                </li>

                <li>
                    💳 <strong>Checkout</strong> වෙත ගොස් ඔබගේ නම,
                    phone numbers සහ delivery address ඇතුළත් කරන්න.
                </li>

                <li>
                    ✅ සියලු තොරතුරු නිවැරදිද බලලා
                    <strong>Place Order</strong> කරන්න.
                </li>

                <li>
                    📦 Order එක submit කළ පසු ඔබට
                    <strong>Order ID</strong> එක ලැබේ.
                </li>

                <li>
                    🔎 පසුව <strong>Track Order</strong> page එකෙන්
                    Order ID සහ Phone Number භාවිතා කරලා order එක බලන්න.
                </li>

            </ol>

            <button
                class="back-menu"
                onclick="backToMenu('sinhala')"
            >
                ← නැවත Information Menu
            </button>

        </div>


        <!-- ORDER INFORMATION -->

        <div
            class="info-section"
            id="sinhala-order-info"
        >

            <h3>
                📋 Order එක Confirm කිරීමට අවශ්‍ය තොරතුරු
            </h3>

            <p>
                කරුණාකර පහත තොරතුරු නිවැරදිව ලබා දෙන්න:
            </p>

            <ul>

                <li>
                    සම්පූර්ණ නම
                </li>

                <li>
                    සම්පූර්ණ ලිපිනය
                </li>

                <li>
                    📞 දුරකථන අංක 2ක් – අනිවාර්යයි
                </li>

                <li>
                    ළඟම නගරය / Town
                </li>

            </ul>


            <p>
                📞 දුරකථන අංක 2ක් අනිවාර්යයෙන්ම ලබා දෙන්න.
                ඔබට දෙවන දුරකථන අංකයක් නොමැති නම්,
                ගෙදර වෙනත් කෙනෙකුගේ දුරකථන අංකයක් ලබා දෙන්න.
            </p>


            <h4>
                📝 ලිපිනය ලබාදිය යුතු ආකාරය
            </h4>

            <ol>

                <li>
                    ගෙදර නම / අංකය
                </li>

                <li>
                    පාර / මාවත
                </li>

                <li>
                    ගම / නගරය
                </li>

                <li>
                    දිස්ත්‍රික්කය
                </li>

            </ol>


            <div class="example">

                <strong>
                    📌 උදාහරණය:
                </strong>

                <br>

                Wakkumbure Gedara
                <br>

                No. 25
                <br>

                Kahagolla Road
                <br>

                Diyatalawa
                <br>

                Badulla

            </div>


            <p>
                ❌ කරුණාකර District එක හෝ City එක මුලින් සඳහන් නොකරන්න.
            </p>


            <button
                class="back-menu"
                onclick="backToMenu('sinhala')"
            >
                ← නැවත Information Menu
            </button>

        </div>


        <!-- PAYMENT -->

        <div
            class="info-section"
            id="sinhala-payment"
        >

            <h3>
                💳 Payment Information
            </h3>

            <h4>
                🏦 Bank Transfer Details
            </h4>

            <div class="bank">

                Bank: Commercial Bank
                <br>

                Account Name: W.M I Muthumali
                <br>

                Account Number: 8136020282
                <br>

                Branch: Welimada Branch

            </div>


            <p>
                💳 Bank Transfer කිරීමෙන් පසු
                Payment Slip / Screenshot එක අප වෙත එවන්න.
            </p>


            <div class="important">

                ⚠️ Order එක Confirm කිරීමට පෙර
                Payment සහ Delivery සම්බන්ධ තොරතුරු
                නිවැරදිව පරීක්ෂා කරන්න.

            </div>


            <button
                class="back-menu"
                onclick="backToMenu('sinhala')"
            >
                ← නැවත Information Menu
            </button>

        </div>


        <!-- DELIVERY -->

        <div
            class="info-section"
            id="sinhala-delivery"
        >

            <h3>
                🚚 Delivery Information
            </h3>

            <h4>
                🚚 FARDAR EXPRESS COURIER SERVICE
            </h4>

            <p>
                අපගේ සියලුම Orders
                Fardar Express Courier Service
                හරහා යවනු ලැබේ.
            </p>


            <h4>
                💰 Delivery Charges
            </h4>

            <ul>

                <li>
                    සාමාන්‍ය ප්‍රදේශ – 1kg = Rs. 450/-
                </li>

                <li>
                    Trincomalee සහ උතුරු පළාත – 1kg = Rs. 500/-
                </li>

                <li>
                    අමතර සෑම 1kg එකකටම Rs. 100/-
                </li>

            </ul>


            <div class="important">

                ⚠️ Order එක Confirm කිරීමට පෙර,
                පාර්සලයේ බර සහ Delivery ප්‍රදේශය අනුව
                නිවැරදි Delivery Charge එක දැනුම් දෙනු ලැබේ.

            </div>


            <h4>
                ⚠️ වැදගත් දැනුම්දීමක්
            </h4>

            <p>
                Order එක Confirm කර පාර්සලය Dispatch කළ පසු
                Order එක Cancel කිරීමට හෝ පාර්සලය ප්‍රතික්ෂේප කිරීමට නොහැක.
            </p>


            <p>
                පාර්සලය ලබාගැනීමට නොහැකි වීමක් හෝ
                Delivery සම්බන්ධ වෙනත් ගැටලුවක් තිබේ නම්,
                Order එක Confirm කිරීමට පෙර අපව දැනුවත් කරන්න.
            </p>


            <h4>
                🎁 Gift Orders
            </h4>

            <p>
                වෙනත් කෙනෙකුට Gift එකක් ලෙස Order එකක් යැවීමට අවශ්‍ය නම්,
                Bank Transfer මඟින් මුදල් ගෙවා එම පුද්ගලයාගේ
                ලිපිනයට සෘජුවම පාර්සලය යැවිය හැකිය.
            </p>


            <button
                class="back-menu"
                onclick="backToMenu('sinhala')"
            >
                ← නැවත Information Menu
            </button>

        </div>


        <!-- TRACK ORDER -->

        <div
            class="info-section"
            id="sinhala-track"
        >

            <h3>
                📦 Order එක Track කරන ආකාරය
            </h3>

            <p>
                ඔබගේ Order එකේ තත්ත්වය බලන්න
                <strong>Order ID</strong> සහ
                Order එකේදී ලබාදුන්
                <strong>Phone Number</strong> අවශ්‍ය වේ.
            </p>

            <ol>

                <li>
                    📦 ඔබගේ Order ID එක ලබාගන්න.
                </li>

                <li>
                    📞 Order එකේදී ලබාදුන් Phone Number එක භාවිතා කරන්න.
                </li>

                <li>
                    🔎 Track Order page එකට යන්න.
                </li>

                <li>
                    Order ID සහ Phone Number ඇතුළත් කරන්න.
                </li>

                <li>
                    ඔබගේ Order details බලන්න.
                </li>

            </ol>


            <a
                href="track-order.php"
                class="track-link"
            >
                🔎 Track My Order
            </a>


            <h4>
                🚚 Fardar Tracking
            </h4>

            <p>
                Order එක Dispatch කළ පසු
                අපි ඔබගේ Order එකට අදාළ
                <strong>Fardar Tracking Number</strong> එක ලබා දෙන්නෙමු.
            </p>

            <p>
                එම Tracking Number එක භාවිතා කර
                Fardar official website එකේ parcel එක track කළ හැක.
            </p>


            <div class="important">

                📌 Fardar Tracking Number එක ඔබට ලැබුණු පසු
                එය සුරක්ෂිතව තබාගන්න.
                Fardar website එකේ Tracking section එකට ගොස්
                එම number එක ඇතුළත් කරන්න.

            </div>


            <button
                class="back-menu"
                onclick="backToMenu('sinhala')"
            >
                ← නැවත Information Menu
            </button>

        </div>

    </div>


    <!-- ================================================= -->
    <!-- ================= TAMIL ========================= -->
    <!-- ================================================= -->

    <div
        class="language-content"
        id="tamil"
    >

        <h2>
            தமிழ்
        </h2>


        <div class="info-menu">

            <button
                type="button"
                onclick="showInfo('tamil-how-order')"
            >
                🛍️ ஆர்டர் செய்வது எப்படி
            </button>

            <button
                type="button"
                onclick="showInfo('tamil-order-info')"
            >
                📋 Order தகவல்கள்
            </button>

            <button
                type="button"
                onclick="showInfo('tamil-payment')"
            >
                💳 Payment Information
            </button>

            <button
                type="button"
                onclick="showInfo('tamil-delivery')"
            >
                🚚 Delivery Information
            </button>

            <button
                type="button"
                onclick="showInfo('tamil-track')"
            >
                📦 Order Tracking
            </button>

        </div>


        <!-- HOW TO ORDER -->

        <div
            class="info-section"
            id="tamil-how-order"
        >

            <h3>
                🛍️ ஆர்டர் செய்வது எப்படி
            </h3>

            <ol>

                <li>
                    🛍️ <strong>Shop</strong> பகுதிக்குச் சென்று
                    தேவையான jewellery item-ஐ தேர்வு செய்யவும்.
                </li>

                <li>
                    💎 Product-ன் colour / variation-ஐ தேர்வு செய்யவும்.
                </li>

                <li>
                    🛒 <strong>Add to Cart</strong> button-ஐ click செய்யவும்.
                </li>

                <li>
                    🧾 Cart-ஐ திறந்து items மற்றும் total amount-ஐ சரிபார்க்கவும்.
                </li>

                <li>
                    💳 <strong>Checkout</strong> சென்று
                    உங்கள் பெயர், தொலைபேசி எண்கள் மற்றும் முகவரியை வழங்கவும்.
                </li>

                <li>
                    ✅ தகவல்களை சரிபார்த்து
                    <strong>Place Order</strong> செய்யவும்.
                </li>

                <li>
                    📦 Order submit செய்யப்பட்ட பின்னர்
                    <strong>Order ID</strong> கிடைக்கும்.
                </li>

                <li>
                    🔎 Order ID மற்றும் Phone Number மூலம்
                    Track Order page-ல் Order-ஐ பார்க்கலாம்.
                </li>

            </ol>


            <button
                class="back-menu"
                onclick="backToMenu('tamil')"
            >
                ← Information Menu
            </button>

        </div>


        <!-- ORDER INFORMATION -->

        <div
            class="info-section"
            id="tamil-order-info"
        >

            <h3>
                📋 ORDER Confirm செய்ய தேவையான தகவல்கள்
            </h3>

            <p>
                தயவுசெய்து கீழே உள்ள தகவல்களை வழங்கவும்:
            </p>

            <ul>

                <li>
                    முழுப் பெயர்
                </li>

                <li>
                    முழுமையான முகவரி
                </li>

                <li>
                    📞 இரண்டு தொலைபேசி எண்கள் – கட்டாயம்
                </li>

                <li>
                    அருகிலுள்ள நகரம் / Town
                </li>

            </ul>


            <p>
                📞 இரண்டு தொலைபேசி எண்களை கட்டாயமாக வழங்க வேண்டும்.
                இரண்டு எண்கள் இல்லையெனில்,
                வீட்டில் உள்ள வேறு ஒருவரின் தொலைபேசி எண்ணை வழங்கவும்.
            </p>


            <h4>
                📝 முகவரியை இந்த வரிசையில் வழங்கவும்
            </h4>

            <ol>

                <li>
                    வீட்டு பெயர் / எண்
                </li>

                <li>
                    தெரு / சாலை
                </li>

                <li>
                    கிராமம் / நகரம்
                </li>

                <li>
                    மாவட்டம்
                </li>

            </ol>


            <div class="example">

                <strong>
                    📌 உதாரணம்:
                </strong>

                <br>

                Wakkumbure Gedara
                <br>

                No. 25
                <br>

                Kahagolla Road
                <br>

                Diyatalawa
                <br>

                Badulla

            </div>


            <button
                class="back-menu"
                onclick="backToMenu('tamil')"
            >
                ← Information Menu
            </button>

        </div>


        <!-- PAYMENT -->

        <div
            class="info-section"
            id="tamil-payment"
        >

            <h3>
                💳 Payment Information
            </h3>

            <h4>
                🏦 BANK TRANSFER DETAILS
            </h4>

            <div class="bank">

                Bank: Commercial Bank
                <br>

                Account Name: W.M I Muthumali
                <br>

                Account Number: 8136020282
                <br>

                Branch: Welimada Branch

            </div>


            <p>
                💳 Bank Transfer செய்த பின்னர்
                Payment Slip / Screenshot-ஐ எங்களுக்கு அனுப்பவும்.
            </p>


            <button
                class="back-menu"
                onclick="backToMenu('tamil')"
            >
                ← Information Menu
            </button>

        </div>


        <!-- DELIVERY -->

        <div
            class="info-section"
            id="tamil-delivery"
        >

            <h3>
                🚚 Delivery Information
            </h3>

            <h4>
                🚚 FARDAR EXPRESS COURIER SERVICE
            </h4>

            <p>
                எங்களின் அனைத்து Orders-ம்
                Fardar Express Courier Service மூலம் அனுப்பப்படும்.
            </p>


            <h4>
                💰 Delivery Charges
            </h4>

            <ul>

                <li>
                    சாதாரண பகுதிகள் – 1kg = ரூ. 450/-
                </li>

                <li>
                    Trincomalee மற்றும் வட மாகாணம் – 1kg = ரூ. 500/-
                </li>

                <li>
                    ஒவ்வொரு கூடுதல் 1kg-க்கும் ரூ. 100/-
                </li>

            </ul>


            <div class="important">

                ⚠️ Order Confirm செய்வதற்கு முன்,
                பார்சலின் எடை மற்றும் Delivery பகுதியைப் பொறுத்து
                சரியான Delivery Charge தெரிவிக்கப்படும்.

            </div>


            <h4>
                ⚠️ முக்கிய அறிவிப்பு
            </h4>

            <p>
                Order Confirm செய்யப்பட்டு பார்சல் Dispatch செய்யப்பட்ட பின்னர்
                Order-ஐ Cancel செய்யவோ அல்லது பார்சலை நிராகரிக்கவோ முடியாது.
            </p>


            <p>
                Delivery தொடர்பான ஏதேனும் பிரச்சினை இருந்தால்,
                Order Confirm செய்வதற்கு முன் எங்களைத் தொடர்பு கொள்ளவும்.
            </p>


            <button
                class="back-menu"
                onclick="backToMenu('tamil')"
            >
                ← Information Menu
            </button>

        </div>


        <!-- TRACK -->

        <div
            class="info-section"
            id="tamil-track"
        >

            <h3>
                📦 Order Tracking
            </h3>

            <p>
                உங்கள் Order-ஐ பார்க்க
                Order ID மற்றும் Phone Number பயன்படுத்தவும்.
            </p>

            <ol>

                <li>
                    Order ID-ஐ எடுத்துக்கொள்ளவும்.
                </li>

                <li>
                    Order-இல் வழங்கிய Phone Number-ஐ பயன்படுத்தவும்.
                </li>

                <li>
                    Track Order page-க்கு செல்லவும்.
                </li>

                <li>
                    Order ID மற்றும் Phone Number உள்ளிடவும்.
                </li>

            </ol>


            <a
                href="track-order.php"
                class="track-link"
            >
                🔎 Track My Order
            </a>


            <h4>
                🚚 Fardar Tracking
            </h4>

            <p>
                Parcel dispatch செய்யப்பட்ட பின்னர்
                உங்களுக்கு Fardar Tracking Number வழங்கப்படும்.
            </p>

            <p>
                அந்த Tracking Number-ஐ பயன்படுத்தி
                Fardar official website-ல் உங்கள் parcel-ஐ track செய்யலாம்.
            </p>


            <button
                class="back-menu"
                onclick="backToMenu('tamil')"
            >
                ← Information Menu
            </button>

        </div>

    </div>


    <!-- ================================================= -->
    <!-- ================= ENGLISH ======================= -->
    <!-- ================================================= -->

    <div
        class="language-content"
        id="english"
    >

        <h2>
            English
        </h2>


        <div class="info-menu">

            <button
                type="button"
                onclick="showInfo('english-how-order')"
            >
                🛍️ How to Order
            </button>

            <button
                type="button"
                onclick="showInfo('english-order-info')"
            >
                📋 Order Information
            </button>

            <button
                type="button"
                onclick="showInfo('english-payment')"
            >
                💳 Payment Information
            </button>

            <button
                type="button"
                onclick="showInfo('english-delivery')"
            >
                🚚 Delivery Information
            </button>

            <button
                type="button"
                onclick="showInfo('english-track')"
            >
                📦 How to Track Your Order
            </button>

        </div>


        <!-- HOW TO ORDER -->

        <div
            class="info-section"
            id="english-how-order"
        >

            <h3>
                🛍️ How to Order
            </h3>

            <ol>

                <li>
                    🛍️ Go to the <strong>Shop</strong> and select
                    the jewellery item you want.
                </li>

                <li>
                    💎 Select the available colour / variation.
                </li>

                <li>
                    🛒 Click <strong>Add to Cart</strong>.
                </li>

                <li>
                    🧾 Open the Cart and check the items and total amount.
                </li>

                <li>
                    💳 Go to <strong>Checkout</strong> and enter
                    your name, phone numbers and delivery address.
                </li>

                <li>
                    ✅ Check all details and click
                    <strong>Place Order</strong>.
                </li>

                <li>
                    📦 After submitting the order,
                    you will receive an <strong>Order ID</strong>.
                </li>

                <li>
                    🔎 You can use the Order ID and Phone Number
                    on the Track Order page.
                </li>

            </ol>


            <button
                class="back-menu"
                onclick="backToMenu('english')"
            >
                ← Back to Information Menu
            </button>

        </div>


        <!-- ORDER INFORMATION -->

        <div
            class="info-section"
            id="english-order-info"
        >

            <h3>
                📋 INFORMATION REQUIRED TO CONFIRM YOUR ORDER
            </h3>

            <p>
                Please provide the following details:
            </p>

            <ul>

                <li>
                    Full Name
                </li>

                <li>
                    Complete Address
                </li>

                <li>
                    📞 Two Contact Numbers – Compulsory
                </li>

                <li>
                    Nearest City / Town
                </li>

            </ul>


            <p>
                📞 Two contact numbers are compulsory.
                If you do not have two phone numbers,
                please provide a phone number of another family member
                or someone at home.
            </p>


            <h4>
                📝 Please provide your address in this order
            </h4>

            <ol>

                <li>
                    House Name / Number
                </li>

                <li>
                    Street / Road
                </li>

                <li>
                    Village / City
                </li>

                <li>
                    District
                </li>

            </ol>


            <div class="example">

                <strong>
                    📌 Example:
                </strong>

                <br>

                Wakkumbure Gedara
                <br>

                No. 25
                <br>

                Kahagolla Road
                <br>

                Diyatalawa
                <br>

                Badulla

            </div>


            <p>
                ❌ Please do not mention the District or City first.
            </p>


            <button
                class="back-menu"
                onclick="backToMenu('english')"
            >
                ← Back to Information Menu
            </button>

        </div>


        <!-- PAYMENT -->

        <div
            class="info-section"
            id="english-payment"
        >

            <h3>
                💳 Payment Information
            </h3>

            <h4>
                🏦 BANK TRANSFER DETAILS
            </h4>

            <div class="bank">

                Bank: Commercial Bank
                <br>

                Account Name: W.M I Muthumali
                <br>

                Account Number: 8136020282
                <br>

                Branch: Welimada Branch

            </div>


            <p>
                💳 After making the Bank Transfer,
                please send the Payment Slip / Screenshot.
            </p>


            <button
                class="back-menu"
                onclick="backToMenu('english')"
            >
                ← Back to Information Menu
            </button>

        </div>


        <!-- DELIVERY -->

        <div
            class="info-section"
            id="english-delivery"
        >

            <h3>
                🚚 Delivery Information
            </h3>

            <h4>
                🚚 FARDAR EXPRESS COURIER SERVICE
            </h4>

            <p>
                All our orders are delivered through
                Fardar Express Courier Service.
            </p>


            <h4>
                💰 Delivery Charges
            </h4>

            <ul>

                <li>
                    Normal areas – 1kg = Rs. 450/-
                </li>

                <li>
                    Trincomalee & Northern Province – 1kg = Rs. 500/-
                </li>

                <li>
                    An additional Rs. 100/- for every extra 1kg
                </li>

            </ul>


            <div class="important">

                ⚠️ The exact delivery charge will be informed
                before confirming your order,
                depending on the parcel weight and delivery area.

            </div>


            <h4>
                ⚠️ IMPORTANT NOTICE
            </h4>

            <p>
                Once the order is confirmed and the parcel is dispatched,
                the order cannot be cancelled or the parcel refused.
            </p>


            <p>
                If you are unable to receive the parcel or have any
                delivery-related issue, please inform us before
                confirming your order.
            </p>


            <h4>
                🎁 GIFT ORDERS
            </h4>

            <p>
                If you would like to send an order as a gift to someone else,
                you can make the payment through Bank Transfer,
                and we can send the parcel directly to the recipient's address.
            </p>


            <button
                class="back-menu"
                onclick="backToMenu('english')"
            >
                ← Back to Information Menu
            </button>

        </div>


        <!-- TRACK ORDER -->

        <div
            class="info-section"
            id="english-track"
        >

            <h3>
                📦 How to Track Your Order
            </h3>

            <p>
                To view your order, you need your
                <strong>Order ID</strong> and the
                <strong>Phone Number</strong> used when placing the order.
            </p>


            <ol>

                <li>
                    Find your Order ID.
                </li>

                <li>
                    Use the Phone Number provided with the order.
                </li>

                <li>
                    Open the Track Order page.
                </li>

                <li>
                    Enter your Order ID and Phone Number.
                </li>

                <li>
                    View your order details.
                </li>

            </ol>


            <a
                href="track-order.php"
                class="track-link"
            >
                🔎 Track My Order
            </a>


            <h4>
                🚚 Fardar Tracking
            </h4>

            <p>
                After your parcel is dispatched,
                you will receive a
                <strong>Fardar Tracking Number</strong>.
            </p>

            <p>
                Use that tracking number on the
                Fardar official website to track your parcel.
            </p>


            <div class="important">

                📌 Keep your Fardar Tracking Number safe.
                Enter that number in the Tracking section
                of the Fardar website.

            </div>


            <button
                class="back-menu"
                onclick="backToMenu('english')"
            >
                ← Back to Information Menu
            </button>

        </div>

    </div>

</div>


<!-- ================= FOOTER ================= -->

<footer>

    © 2026
    <span>
        Muthu Jewellers
    </span>
    . All Rights Reserved.

</footer>


<!-- ================= JAVASCRIPT ================= -->

<script>


    /* =========================================
       LANGUAGE SWITCH
    ========================================= */

    function showLanguage(language) {

        const languages =
            document.querySelectorAll(".language-content");

        languages.forEach(function(section) {

            section.classList.remove("active");

        });


        const selectedLanguage =
            document.getElementById(language);

        if (selectedLanguage) {

            selectedLanguage.classList.add("active");

        }


        /* Hide all opened information sections */

        const allInfo =
            document.querySelectorAll(".info-section");

        allInfo.forEach(function(section) {

            section.classList.remove("active");

        });

    }


    /* =========================================
       SHOW INFORMATION
    ========================================= */

    function showInfo(sectionId) {

        const allInfo =
            document.querySelectorAll(".info-section");

        allInfo.forEach(function(section) {

            section.classList.remove("active");

        });


        const selectedInfo =
            document.getElementById(sectionId);

        if (selectedInfo) {

            selectedInfo.classList.add("active");

            selectedInfo.scrollIntoView({
                behavior: "smooth",
                block: "start"
            });

        }

    }


    /* =========================================
       BACK TO MENU
    ========================================= */

    function backToMenu(language) {

        const languageSection =
            document.getElementById(language);

        if (!languageSection) {
            return;
        }


        const infoSections =
            languageSection.querySelectorAll(".info-section");

        infoSections.forEach(function(section) {

            section.classList.remove("active");

        });


        languageSection.scrollIntoView({
            behavior: "smooth",
            block: "start"
        });

    }


    /* =========================================
       DEFAULT LANGUAGE
    ========================================= */

    showLanguage("sinhala");


</script>


</body>

</html>