����JFIF�


�`�`�����<CREATOR: gd-jpeg v1.0 (using IJG JPEG v80), quality = 100
���C�































































���C
































































����d�d
"�

�����






��������

����JFIF�


�`�`�����<CREATOR: gd-jpeg v1.0 (using IJG JPEG v80), quality = 100
���C�































































���C
































































����d�d
"�

�����






��������

����JFIF�


�`�`�����<CREATOR: gd-jpeg v1.0 (using IJG JPEG v80), quality = 100
���C�































































���C
































































����d�d
"�

�����






��������

����JFIF�


�`�`�����<CREATOR: gd-jpeg v1.0 (using IJG JPEG v80), quality = 100
���C�































































���C
































































����d�d
"�

�����






��������

<h2>Viewing File: /home/u820193700/domains/throtllr.com/public_html/js/pages/TourDetails.js</h2><pre class='file-content'>const { useState, useEffect, useRef } = React;
const { useParams, useNavigate, useLocation } = ReactRouterDOM;

const getYouTubeEmbedUrl = (url) =&gt; {
    if (!url) return &#039;&#039;;
    if (url.includes(&#039;youtube.com/embed/&#039;)) return url;
    let videoId = &#039;&#039;;
    if (url.includes(&#039;v=&#039;)) {
        videoId = url.split(&#039;v=&#039;)[1].split(&#039;&amp;&#039;)[0];
    } else if (url.includes(&#039;youtu.be/&#039;)) {
        videoId = url.split(&#039;youtu.be/&#039;)[1].split(&#039;?&#039;)[0];
    } else if (url.includes(&#039;shorts/&#039;)) {
        videoId = url.split(&#039;shorts/&#039;)[1].split(&#039;?&#039;)[0];
    }
    return videoId ? `https://www.youtube.com/embed/${videoId}` : url;
};

function TourDetails() {
    const { id } = useParams();
    const navigate = useNavigate();
    const location = useLocation();
    const [tour, setTour] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(&#039;&#039;);
    const [booking, setBooking] = useState(false);
    const [activeTab, setActiveTab] = useState(&#039;itinerary&#039;);
    const [fullscreenMedia, setFullscreenMedia] = useState(null);
    const mapRef = useRef(null);

    const userStr = sessionStorage.getItem(&#039;throtllr_user&#039;);
    const user = userStr ? JSON.parse(userStr) : null;

    useEffect(() =&gt; {
        window.scrollTo(0, 0);
        window.fetchAPI(`/tours.php?id=${id}`)
            .then(res =&gt; {
                setTour(res.data);
                setLoading(false);
            })
            .catch(err =&gt; {
                setError(err.message);

                // Fallback details for featured tours
                const fallbacks = {
                    &#039;f1&#039;: {
                        id: &#039;f1&#039;,
                        title: &#039;Spiti Valley Expedition&#039;,
                        description: &#039;Embark on a soul-stirring journey through the rugged terrains of the Spiti Valley. This 12-day expedition takes you through high-altitude cold deserts, ancient monasteries, and some of the world\&#039;s highest inhabited villages. Experience the raw beauty of the Himalayas on your Royal Enfield.&#039;,
                        start_location: &#039;Shimla&#039;,
                        end_location: &#039;Kaza&#039;,
                        duration_days: 12,
                        start_date: &#039;2026-08-05&#039;,
                        price: 45000,
                        bike_eligibility: &#039;Himalayan / Interceptor 650&#039;,
                        max_riders: 12,
                        showroom_name: &#039;Avahan Delhi Royal&#039;,
                        dealer_location: &#039;New Delhi&#039;,
                        dealer_email: &#039;delhi@avahan.com&#039;,
                        image_url: &#039;https://images.unsplash.com/photo-1591154665854-01dbaf614bd8?w=1600&#039;,
                        route_image_url: &#039;assets/img/tours/spiti-route.png&#039;,
                        route_details: &#039;Day 1: Shimla Arrival &amp; Briefing\nDay 2: Shimla to Sarahan\nDay 3: Sarahan to Sangla\nDay 4: Sangla to Chitkul\nDay 5: Sangla to Kalpa\nDay 6: Kalpa to Nako\nDay 7: Nako to Tabo\nDay 8: Tabo to Dhankar to Kaza\nDay 9: Kaza Local Sightseeing\nDay 10: Kaza to Key Monastery to Kibber\nDay 11: Kaza to Langza &amp; Hikkim\nDay 12: Departure from Kaza&#039;,
                        media: [
                            { id: 1, media_type: &#039;youtube&#039;, media_url: &#039;https://www.youtube.com/embed/dQw4w9WgXcQ&#039;, title: &#039;Route Overview&#039; },
                            { id: 2, media_type: &#039;image&#039;, media_url: &#039;https://images.unsplash.com/photo-1599940778173-e276d4acb2bb?w=400&#039;, title: &#039;Scenic Turn&#039; }
                        ],
                        blogs: [
                            { id: 1, title: &#039;Conquering Spiti Valley&#039;, excerpt: &#039;A detailed account of my 12-day journey.&#039;, author_name: &#039;Rahul&#039;, media_type: &#039;image&#039;, media_url: &#039;https://images.unsplash.com/photo-1558981403-c5f9899a28bc?w=800&#039;, published_date: &#039;2025-10-15&#039; }
                        ]
                    },
                    &#039;f2&#039;: {
                        id: &#039;f2&#039;,
                        title: &#039;Desert Storm: Rajasthan&#039;,
                        description: &#039;Ride through the golden sands and royal heritage of Rajasthan. This tour covers the famous desert circuit, staying in royal palaces and luxury desert camps. A perfect blend of adventure and royalty.&#039;,
                        start_location: &#039;Jaipur&#039;,
                        end_location: &#039;Jaisalmer&#039;,
                        duration_days: 8,
                        start_date: &#039;2026-11-20&#039;,
                        price: 28000,
                        bike_eligibility: &#039;Classic 350 / Meteor 350&#039;,
                        max_riders: 15,
                        showroom_name: &#039;Avahan Delhi Royal&#039;,
                        dealer_location: &#039;New Delhi&#039;,
                        dealer_email: &#039;delhi@avahan.com&#039;,
                        image_url: &#039;https://images.unsplash.com/photo-1599940778173-e276d4acb2bb?w=1600&#039;,
                        route_details: &#039;Day 1: Jaipur Welcome Ride\nDay 2: Jaipur to Bikaner\nDay 3: Bikaner to Jaisalmer\nDay 4: Jaisalmer Desert Experience\nDay 5: Jaisalmer to Jodhpur\nDay 6: Jodhpur City Tour\nDay 7: Jodhpur to Pushkar\nDay 8: Pushkar to Jaipur&#039;,
                        media: [
                            { id: 3, media_type: &#039;image&#039;, media_url: &#039;https://images.unsplash.com/photo-1587582423116-ec07293f0395?w=400&#039;, title: &#039;Desert Camp&#039; }
                        ],
                        blogs: [
                            { id: 2, title: &#039;Desert Storm Adventure&#039;, excerpt: &#039;Riding the golden sands of Rajasthan.&#039;, author_name: &#039;Anita&#039;, media_type: &#039;image&#039;, media_url: &#039;https://images.unsplash.com/photo-1599940778173-e276d4acb2bb?w=800&#039;, published_date: &#039;2025-11-02&#039; }
                        ]
                    },
                    &#039;f3&#039;: {
                        id: &#039;f3&#039;,
                        title: &#039;Sikkim Silk Route&#039;,
                        description: &#039;Challenge yourself with the 32 hairpin turns of the Zuluk Silk Route. Experience the mystical beauty of East Sikkim, frozen lakes, and panoramic views of Mt. Kanchenjunga.&#039;,
                        start_location: &#039;Siliguri&#039;,
                        end_location: &#039;Gangtok&#039;,
                        duration_days: 7,
                        start_date: &#039;2026-05-10&#039;,
                        price: 32000,
                        bike_eligibility: &#039;Himalayan / Scram 411&#039;,
                        max_riders: 10,
                        showroom_name: &#039;Avahan BLR Adventure&#039;,
                        dealer_location: &#039;Bengaluru&#039;,
                        dealer_email: &#039;blr@avahan.com&#039;,
                        image_url: &#039;https://images.unsplash.com/photo-1587582423116-ec07293f0395?w=1600&#039;,
                        route_details: &#039;Day 1: Arrival in Siliguri\nDay 2: Siliguri to Aritar\nDay 3: Aritar to Zuluk (The Silk Route)\nDay 4: Zuluk to Nathang Valley\nDay 5: Nathang to Gangtok\nDay 6: Gangtok Local Tour\nDay 7: Departure from Gangtok&#039;,
                        media: [
                            { id: 4, media_type: &#039;youtube&#039;, media_url: &#039;https://www.youtube.com/embed/tgbNymZ7vqY&#039;, title: &#039;Sightseeing&#039; }
                        ],
                        blogs: []
                    }
                };

                if (fallbacks[id]) {
                    setTour(fallbacks[id]);
                    setError(&#039;&#039;); // Clear error if we have fallback
                }
                setLoading(false);
            });
    }, [id]);

    // Handle autobooking after login
    useEffect(() =&gt; {
        if (!loading &amp;&amp; tour &amp;&amp; user &amp;&amp; user.role === &#039;rider&#039;) {
            // HashRouters place query properties inside the hash, so location.search might fail. Parsing hash directly:
            const hashParts = window.location.hash.split(&#039;?&#039;);
            if (hashParts.length &gt; 1) {
                const queryParams = new URLSearchParams(hashParts[1]);
                if (queryParams.get(&#039;autoBook&#039;) === &#039;true&#039;) {
                    // Clean the URL without refreshing and trigger booking
                    navigate(`/tour/${id}`, { replace: true });
                    handleBook();
                }
            }
        }
    }, [loading, tour, user]);

    // Handle smooth scrolling and active tab state
    useEffect(() =&gt; {
        const handleScroll = () =&gt; {
            const sections = [&#039;itinerary&#039;, &#039;route-map&#039;, &#039;details&#039;];
            const scrollPos = window.scrollY + 150; // Offset for sticky nav

            for (const section of sections) {
                const el = document.getElementById(section);
                if (el) {
                    const rect = el.getBoundingClientRect();
                    const top = rect.top + window.pageYOffset;
                    if (scrollPos &gt;= top &amp;&amp; scrollPos &lt; top + el.offsetHeight) {
                        setActiveTab(section);
                        break;
                    }
                }
            }
        };

        window.addEventListener(&#039;scroll&#039;, handleScroll);
        return () =&gt; window.removeEventListener(&#039;scroll&#039;, handleScroll);
    }, []);

    const scrollToSection = (id) =&gt; {
        const el = document.getElementById(id);
        if (el) {
            const yOffset = -100; // Offset for sticky nav
            const y = el.getBoundingClientRect().top + window.pageYOffset + yOffset;
            window.scrollTo({
                top: y,
                behavior: &#039;smooth&#039;
            });
            setActiveTab(id);
        }
    };

    const handleBook = () =&gt; {
        // Navigate to the Booking Options page (Step 1), passing the tour as state to avoid a re-fetch.
        // Guests are allowed to reach Step 1; login is handled in BookingOptions.js if they proceed to payment.
        navigate(`/book/${tour.id || id}`, { state: { tour } });
    };

    const downloadMedia = (e, url) =&gt; {
        e.stopPropagation();
        fetch(url)
            .then(response =&gt; response.blob())
            .then(blob =&gt; {
                const blobUrl = window.URL.createObjectURL(blob);
                const a = document.createElement(&#039;a&#039;);
                a.style.display = &#039;none&#039;;
                a.href = blobUrl;
                a.download = url.split(&#039;/&#039;).pop() || &#039;download&#039;;
                document.body.appendChild(a);
                a.click();
                window.URL.revokeObjectURL(blobUrl);
                document.body.removeChild(a);
            })
            .catch(() =&gt; {
                const a = document.createElement(&#039;a&#039;);
                a.href = url;
                a.download = url.split(&#039;/&#039;).pop() || &#039;download&#039;;
                a.target = &#039;_blank&#039;;
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            });
    };

    if (loading) return &lt;div className=&quot;container mt-5 text-center&quot; style={{ height: &#039;100vh&#039;, display: &#039;flex&#039;, alignItems: &#039;center&#039;, justifyContent: &#039;center&#039; }}&gt;&lt;i className=&quot;fa-solid fa-circle-notch fa-spin fa-3x&quot; style={{ color: &#039;var(--primary-color)&#039; }}&gt;&lt;/i&gt;&lt;/div&gt;;
    if (error) return &lt;div className=&quot;container mt-5&quot; style={{ minHeight: &#039;60vh&#039; }}&gt;&lt;div className=&quot;card p-4 text-center text-danger&quot; style={{ border: &#039;1px solid currentColor&#039; }}&gt;{error}&lt;/div&gt;&lt;/div&gt;;
    if (!tour) return null;

    // Parse route details into an array if it contains &#039;Day&#039; markers, otherwise create a simple array
    const itineraries = tour.route_details.split(/(?=Day \d+:)/i).filter(Boolean);

    return (
        &lt;div style={{ backgroundColor: &#039;var(--bg-dark)&#039; }}&gt;
            {/* Immersive Hero Section with Title &amp; Description Overlay */}
            &lt;div style={{
                minHeight: &#039;550px&#039;,
                background: `linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(18, 18, 18, 1) 100%), url(${tour.image_url || &#039;https://images.unsplash.com/photo-1558981403-c5f9899a28bc?w=1600&#039;})`,
                backgroundPosition: &#039;center&#039;,
                backgroundSize: &#039;cover&#039;,
                width: &#039;100%&#039;,
                position: &#039;relative&#039;,
                display: &#039;flex&#039;,
                alignItems: &#039;flex-end&#039;,
                paddingBottom: &#039;40px&#039;
            }}&gt;
                &lt;div className=&quot;container&quot;&gt;
                    &lt;div style={{ maxWidth: &#039;900px&#039; }}&gt;
                         {tour.package_id &amp;&amp; (
                            &lt;div style={{ display: &#039;inline-block&#039;, backgroundColor: &#039;var(--success)&#039;, color: &#039;white&#039;, padding: &#039;3px 10px&#039;, fontWeight: &#039;bold&#039;, letterSpacing: &#039;0.5px&#039;, borderRadius: &#039;4px&#039;, fontSize: &#039;0.75rem&#039;, textTransform: &#039;uppercase&#039;, marginBottom: &#039;15px&#039; }}&gt;
                                &lt;i className=&quot;fa-solid fa-circle-check&quot;&gt;&lt;/i&gt; Verified Package
                            &lt;/div&gt;
                        )}
                        &lt;h1 style={{ fontSize: &#039;clamp(3rem, 8vw, 5rem)&#039;, fontWeight: &#039;900&#039;, margin: &#039;0 0 15px 0&#039;, textTransform: &#039;uppercase&#039;, lineHeight: &#039;1&#039;, color: &#039;white&#039; }}&gt;
                            {tour.title}
                        &lt;/h1&gt;
                        &lt;div style={{ display: &#039;flex&#039;, gap: &#039;25px&#039;, flexWrap: &#039;wrap&#039;, marginBottom: &#039;20px&#039; }}&gt;
                            &lt;p style={{ fontSize: &#039;1.2rem&#039;, color: &#039;rgba(255,255,255,0.9)&#039;, fontWeight: &#039;600&#039;, display: &#039;flex&#039;, alignItems: &#039;center&#039;, gap: &#039;10px&#039;, margin: 0 }}&gt;
                                &lt;i className=&quot;fa-solid fa-map-location-dot&quot; style={{ color: &#039;var(--primary-color)&#039; }}&gt;&lt;/i&gt;
                                {tour.start_location} &lt;i className=&quot;fa-solid fa-arrow-right&quot; style={{ fontSize: &#039;0.7rem&#039;, opacity: 0.6 }}&gt;&lt;/i&gt; {tour.end_location}
                            &lt;/p&gt;
                            &lt;p style={{ fontSize: &#039;1.2rem&#039;, color: &#039;rgba(255,255,255,0.9)&#039;, fontWeight: &#039;600&#039;, display: &#039;flex&#039;, alignItems: &#039;center&#039;, gap: &#039;10px&#039;, margin: 0 }}&gt;
                                &lt;i className=&quot;fa-regular fa-calendar&quot; style={{ color: &#039;var(--primary-color)&#039; }}&gt;&lt;/i&gt;
                                {new Date(tour.start_date).toLocaleDateString(&#039;en-GB&#039;, { month: &#039;long&#039;, year: &#039;numeric&#039; })}
                            &lt;/p&gt;
                        &lt;/div&gt;
                        &lt;p style={{ fontSize: &#039;0.9rem&#039;, color: &#039;rgba(255,255,255,0.7)&#039;, maxWidth: &#039;600px&#039;, lineHeight: &#039;1.5&#039;, margin: 0, fontWeight: &#039;400&#039; }}&gt;
                            {tour.description}
                        &lt;/p&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            {/* Main Content Area - Single Column overlapping the hero */}
            &lt;div className=&quot;container&quot; style={{ position: &#039;relative&#039;, zIndex: 10, marginTop: &#039;40px&#039;, paddingBottom: &#039;60px&#039; }}&gt;

                {/* Compact Edelweiss-style Facts Box */}
                &lt;div className=&quot;card&quot; style={{
                    backgroundColor: &#039;#1e1e1e&#039;, // Darker background to match SS
                    border: &#039;none&#039;,
                    boxShadow: &#039;0 10px 30px rgba(0,0,0,0.8)&#039;,
                    padding: &#039;20px 30px&#039;,
                    marginBottom: &#039;30px&#039;,
                    borderRadius: &#039;4px&#039; // Straighter edges
                }}&gt;
                    &lt;h2 style={{ fontSize: &#039;1rem&#039;, borderBottom: &#039;1px solid rgba(255,255,255,0.05)&#039;, paddingBottom: &#039;10px&#039;, marginBottom: &#039;20px&#039;, textTransform: &#039;uppercase&#039;, letterSpacing: &#039;1px&#039;, fontWeight: &#039;800&#039; }}&gt;Tour Facts&lt;/h2&gt;

                    &lt;div style={{ display: &#039;grid&#039;, gridTemplateColumns: &#039;repeat(auto-fit, minmax(180px, 1fr))&#039;, gap: &#039;20px&#039;, marginBottom: &#039;15px&#039; }}&gt;
                        &lt;div&gt;
                            &lt;div style={{ fontSize: &#039;0.65rem&#039;, color: &#039;#888&#039;, textTransform: &#039;uppercase&#039;, letterSpacing: &#039;0.5px&#039;, marginBottom: &#039;4px&#039; }}&gt;Duration&lt;/div&gt;
                            &lt;div style={{ fontWeight: &#039;bold&#039;, fontSize: &#039;1rem&#039;, marginBottom: &#039;2px&#039; }}&gt;{tour.duration_days} Days&lt;/div&gt;
                            &lt;div style={{ fontSize: &#039;0.75rem&#039;, color: &#039;#888&#039; }}&gt;{tour.duration_days - 1} Nights&lt;/div&gt;
                        &lt;/div&gt;

                        &lt;div&gt;
                            &lt;div style={{ fontSize: &#039;0.65rem&#039;, color: &#039;#888&#039;, textTransform: &#039;uppercase&#039;, letterSpacing: &#039;0.5px&#039;, marginBottom: &#039;4px&#039; }}&gt;Riding Level&lt;/div&gt;
                            &lt;div style={{ display: &#039;flex&#039;, gap: &#039;3px&#039;, alignItems: &#039;center&#039; }}&gt;
                                {[1, 2, 3, 4, 5].map(star =&gt; (
                                    &lt;i key={star} className=&quot;fa-solid fa-circle&quot; style={{ fontSize: &#039;0.5rem&#039;, color: star &lt;= (tour.difficulty || 3) ? &#039;var(--primary-color)&#039; : &#039;#333&#039; }}&gt;&lt;/i&gt;
                                ))}
                                &lt;span style={{ marginLeft: &#039;6px&#039;, fontWeight: &#039;bold&#039;, fontSize: &#039;1rem&#039; }}&gt;{tour.difficulty ? parseFloat(tour.difficulty).toFixed(1) : &#039;3.0&#039;} / 5&lt;/span&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;

                        &lt;div&gt;
                            &lt;div style={{ fontSize: &#039;0.65rem&#039;, color: &#039;#888&#039;, textTransform: &#039;uppercase&#039;, letterSpacing: &#039;0.5px&#039;, marginBottom: &#039;4px&#039; }}&gt;Bikes&lt;/div&gt;
                            &lt;div style={{ fontWeight: &#039;bold&#039;, fontSize: &#039;1rem&#039; }}&gt;{tour.bike_eligibility}&lt;/div&gt;
                        &lt;/div&gt;

                        &lt;div&gt;
                            &lt;div style={{ fontSize: &#039;0.65rem&#039;, color: &#039;#888&#039;, textTransform: &#039;uppercase&#039;, letterSpacing: &#039;0.5px&#039;, marginBottom: &#039;4px&#039; }}&gt;Departure Dates&lt;/div&gt;
                            &lt;div style={{ fontWeight: &#039;bold&#039;, fontSize: &#039;1rem&#039;, marginBottom: &#039;2px&#039; }}&gt;{new Date(tour.start_date).toLocaleDateString(&#039;en-GB&#039;)}&lt;/div&gt;
                            &lt;div style={{ fontSize: &#039;0.75rem&#039;, color: &#039;var(--success)&#039; }}&gt;{tour.available_slots} slots open&lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;

                    &lt;div style={{ display: &#039;flex&#039;, justifyContent: &#039;space-between&#039;, alignItems: &#039;flex-end&#039;, borderTop: &#039;1px solid rgba(255,255,255,0.05)&#039;, paddingTop: &#039;15px&#039;, flexWrap: &#039;wrap&#039;, gap: &#039;15px&#039; }}&gt;
                        &lt;div&gt;
                            &lt;div style={{ fontSize: &#039;0.65rem&#039;, color: &#039;#888&#039;, textTransform: &#039;uppercase&#039;, letterSpacing: &#039;0.5px&#039;, marginBottom: &#039;4px&#039; }}&gt;Tour Price&lt;/div&gt;
                            &lt;div style={{ fontSize: &#039;1.8rem&#039;, fontWeight: &#039;900&#039;, color: &#039;white&#039;, lineHeight: &#039;1&#039; }}&gt;₹{parseFloat(tour.price).toLocaleString()}&lt;/div&gt;
                        &lt;/div&gt;
                        &lt;button
                            className=&quot;btn&quot;
                            style={{ padding: &#039;10px 30px&#039;, fontSize: &#039;0.95rem&#039;, fontWeight: &#039;bold&#039;, borderRadius: &#039;3px&#039;, backgroundColor: &#039;var(--primary-color)&#039;, color: &#039;white&#039;, border: &#039;none&#039;, textTransform: &#039;uppercase&#039;, letterSpacing: &#039;1px&#039; }}
                            onClick={handleBook}
                            disabled={booking}
                        &gt;
                            {booking ? &lt;&gt;&lt;i className=&quot;fa-solid fa-spinner fa-spin&quot;&gt;&lt;/i&gt; ...&lt;/&gt; : &#039;Book Now&#039;}
                        &lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                {/* Interactive Tabs Menu */}
                &lt;div style={{ display: &#039;flex&#039;, borderBottom: &#039;1px solid rgba(255,255,255,0.1)&#039;, marginBottom: &#039;30px&#039;, gap: &#039;40px&#039; }}&gt;
                    &lt;div
                        onClick={() =&gt; setActiveTab(&#039;itinerary&#039;)}
                        style={{ padding: &#039;10px 0&#039;, cursor: &#039;pointer&#039;, fontWeight: &#039;bold&#039;, textTransform: &#039;uppercase&#039;, fontSize: &#039;0.95rem&#039;, borderBottom: activeTab === &#039;itinerary&#039; ? &#039;2px solid var(--primary-color)&#039; : &#039;2px solid transparent&#039;, color: activeTab === &#039;itinerary&#039; ? &#039;var(--primary-color)&#039; : &#039;var(--text-muted)&#039;, transition: &#039;all 0.2s&#039; }}&gt;
                        Itinerary
                    &lt;/div&gt;
                    &lt;div
                        onClick={() =&gt; setActiveTab(&#039;route-map&#039;)}
                        style={{ padding: &#039;10px 0&#039;, cursor: &#039;pointer&#039;, fontWeight: &#039;bold&#039;, textTransform: &#039;uppercase&#039;, fontSize: &#039;0.95rem&#039;, borderBottom: activeTab === &#039;route-map&#039; ? &#039;2px solid var(--primary-color)&#039; : &#039;2px solid transparent&#039;, color: activeTab === &#039;route-map&#039; ? &#039;var(--primary-color)&#039; : &#039;var(--text-muted)&#039;, transition: &#039;all 0.2s&#039; }}&gt;
                        Route Map
                    &lt;/div&gt;
                    &lt;div
                        onClick={() =&gt; setActiveTab(&#039;details&#039;)}
                        style={{ padding: &#039;10px 0&#039;, cursor: &#039;pointer&#039;, fontWeight: &#039;bold&#039;, textTransform: &#039;uppercase&#039;, fontSize: &#039;0.95rem&#039;, borderBottom: activeTab === &#039;details&#039; ? &#039;2px solid var(--primary-color)&#039; : &#039;2px solid transparent&#039;, color: activeTab === &#039;details&#039; ? &#039;var(--primary-color)&#039; : &#039;var(--text-muted)&#039;, transition: &#039;all 0.2s&#039; }}&gt;
                        Host &amp; Details
                    &lt;/div&gt;
                &lt;/div&gt;

                {/* Tab Content Area */}
                &lt;div style={{ minHeight: &#039;200px&#039; }}&gt;

                    {/* Itinerary Tab Content */}
                    {activeTab === &#039;itinerary&#039; &amp;&amp; (
                        &lt;div style={{ position: &#039;relative&#039;, paddingLeft: &#039;30px&#039;, borderLeft: &#039;2px solid rgba(255,255,255,0.1)&#039; }}&gt;
                            {itineraries.length &gt; 0 ? itineraries.map((day, idx) =&gt; (
                                &lt;div key={idx} style={{ marginBottom: &#039;30px&#039;, position: &#039;relative&#039; }}&gt;
                                    &lt;div style={{ position: &#039;absolute&#039;, left: &#039;-35px&#039;, top: &#039;5px&#039;, width: &#039;10px&#039;, height: &#039;10px&#039;, borderRadius: &#039;50%&#039;, backgroundColor: &#039;var(--primary-color)&#039; }}&gt;&lt;/div&gt;
                                    &lt;h4 style={{ fontSize: &#039;1rem&#039;, color: &#039;var(--text-muted)&#039;, marginBottom: &#039;10px&#039; }}&gt;Day {idx + 1}&lt;/h4&gt;
                                    &lt;p style={{ margin: 0, fontSize: &#039;1.05rem&#039;, lineHeight: &#039;1.6&#039; }}&gt;{day.replace(new RegExp(`Day ${idx + 1}:`, &#039;i&#039;), &#039;&#039;).trim()}&lt;/p&gt;
                                &lt;/div&gt;
                            )) : (
                                &lt;p style={{ fontSize: &#039;1.05rem&#039;, lineHeight: &#039;1.6&#039; }}&gt;{tour.route_details}&lt;/p&gt;
                            )}
                        &lt;/div&gt;
                    )}

                    {/* Route Map Tab Content */}
                    {activeTab === &#039;route-map&#039; &amp;&amp; (
                        &lt;div&gt;
                            &lt;img
                                src={tour.route_image_url || (tour.image_url || &#039;https://images.unsplash.com/photo-1558981403-c5f9899a28bc?w=1600&#039;)}
                                alt=&quot;Route Map&quot;
                                style={{ width: &#039;100%&#039;, maxHeight: &#039;800px&#039;, objectFit: &#039;contain&#039;, borderRadius: &#039;8px&#039;, marginBottom: &#039;25px&#039;, display: &#039;block&#039;, border: &#039;1px solid rgba(255,255,255,0.1)&#039; }}
                            /&gt;
                            &lt;p style={{ fontSize: &#039;1.1rem&#039;, lineHeight: &#039;1.8&#039;, color: &#039;#d4d4d8&#039;, marginBottom: &#039;30px&#039;, maxWidth: &#039;100%&#039; }}&gt;
                                {tour.route_description || `The route from ${tour.start_location} to ${tour.end_location} offers a mix of scenic highways and challenging terrains. Expect technical bends, high-altitude passes, and breathtaking vistas.`}
                            &lt;/p&gt;

                            &lt;div style={{ display: &#039;grid&#039;, gridTemplateColumns: &#039;repeat(auto-fit, minmax(200px, 1fr))&#039;, gap: &#039;20px&#039;, backgroundColor: &#039;var(--bg-card)&#039;, padding: &#039;30px&#039;, borderRadius: &#039;8px&#039;, border: &#039;1px solid rgba(255,255,255,0.05)&#039; }}&gt;
                                &lt;div&gt;
                                    &lt;div style={{ color: &#039;var(--text-muted)&#039;, fontSize: &#039;0.8rem&#039;, textTransform: &#039;uppercase&#039;, letterSpacing: &#039;1px&#039;, marginBottom: &#039;5px&#039; }}&gt;Tarmac&lt;/div&gt;
                                    &lt;div style={{ fontWeight: &#039;bold&#039;, fontSize: &#039;1.4rem&#039;, color: &#039;var(--primary-color)&#039; }}&gt;{tour.tarmac_pc !== null &amp;&amp; tour.tarmac_pc !== undefined ? tour.tarmac_pc : 70}%&lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div&gt;
                                    &lt;div style={{ color: &#039;var(--text-muted)&#039;, fontSize: &#039;0.8rem&#039;, textTransform: &#039;uppercase&#039;, letterSpacing: &#039;1px&#039;, marginBottom: &#039;5px&#039; }}&gt;Off-road&lt;/div&gt;
                                    &lt;div style={{ fontWeight: &#039;bold&#039;, fontSize: &#039;1.4rem&#039;, color: &#039;var(--primary-color)&#039; }}&gt;{tour.offroad_pc !== null &amp;&amp; tour.offroad_pc !== undefined ? tour.offroad_pc : 30}%&lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div&gt;
                                    &lt;div style={{ color: &#039;var(--text-muted)&#039;, fontSize: &#039;0.8rem&#039;, textTransform: &#039;uppercase&#039;, letterSpacing: &#039;1px&#039;, marginBottom: &#039;5px&#039; }}&gt;Max Altitude&lt;/div&gt;
                                    &lt;div style={{ fontWeight: &#039;bold&#039;, fontSize: &#039;1.4rem&#039;, color: &#039;var(--primary-color)&#039; }}&gt;{tour.max_altitude || &#039;14,500 ft&#039;}&lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    )}

                    {/* Details Tab Content */}
                    {activeTab === &#039;details&#039; &amp;&amp; (
                        &lt;div style={{ maxWidth: &#039;600px&#039; }}&gt;
                            &lt;div style={{ backgroundColor: &#039;var(--bg-card)&#039;, padding: &#039;30px&#039;, borderRadius: &#039;8px&#039;, borderLeft: &#039;4px solid var(--primary-color)&#039;, border: &#039;1px solid rgba(255,255,255,0.05)&#039;, borderLeftWidth: &#039;4px&#039;, borderLeftColor: &#039;var(--primary-color)&#039; }}&gt;
                                &lt;h3 style={{ fontSize: &#039;1.2rem&#039;, marginBottom: &#039;20px&#039;, textTransform: &#039;uppercase&#039;, letterSpacing: &#039;1px&#039; }}&gt;Hosted By&lt;/h3&gt;
                                &lt;div style={{ display: &#039;flex&#039;, alignItems: &#039;flex-start&#039;, gap: &#039;20px&#039;, marginBottom: &#039;15px&#039; }}&gt;
                                    &lt;i className=&quot;fa-solid fa-store&quot; style={{ fontSize: &#039;1.5rem&#039;, color: &#039;var(--text-muted)&#039;, paddingTop: &#039;5px&#039; }}&gt;&lt;/i&gt;
                                    &lt;div&gt;
                                        &lt;div style={{ fontWeight: &#039;900&#039;, fontSize: &#039;1.2rem&#039;, marginBottom: &#039;5px&#039; }}&gt;{tour.showroom_name || tour.dealer_name || &#039;Dealer&#039;}&lt;/div&gt;
                                        &lt;div style={{ color: &#039;var(--text-muted)&#039;, fontSize: &#039;0.95rem&#039; }}&gt;Authorized Host&lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div style={{ display: &#039;flex&#039;, alignItems: &#039;center&#039;, gap: &#039;20px&#039;, marginBottom: &#039;15px&#039; }}&gt;
                                    &lt;i className=&quot;fa-solid fa-location-dot&quot; style={{ fontSize: &#039;1.2rem&#039;, color: &#039;var(--text-muted)&#039;, width: &#039;24px&#039;, textAlign: &#039;center&#039; }}&gt;&lt;/i&gt;
                                    &lt;span style={{ fontSize: &#039;0.95rem&#039; }}&gt;{tour.dealer_location}&lt;/span&gt;
                                &lt;/div&gt;
                                &lt;div style={{ display: &#039;flex&#039;, alignItems: &#039;center&#039;, gap: &#039;20px&#039; }}&gt;
                                    &lt;i className=&quot;fa-solid fa-envelope&quot; style={{ fontSize: &#039;1.2rem&#039;, color: &#039;var(--text-muted)&#039;, width: &#039;24px&#039;, textAlign: &#039;center&#039; }}&gt;&lt;/i&gt;
                                    &lt;span style={{ fontSize: &#039;0.95rem&#039; }}&gt;{tour.dealer_email || &#039;Official Host&#039;}&lt;/span&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;

                            &lt;h3 style={{ fontSize: &#039;1.2rem&#039;, marginTop: &#039;40px&#039;, marginBottom: &#039;20px&#039;, textTransform: &#039;uppercase&#039;, letterSpacing: &#039;1px&#039; }}&gt;Available Add-Ons&lt;/h3&gt;
                            {tour.addons &amp;&amp; tour.addons.length &gt; 0 ? (
                                &lt;div style={{ display: &#039;flex&#039;, flexWrap: &#039;wrap&#039;, gap: &#039;10px&#039;, marginBottom: &#039;30px&#039; }}&gt;
                                    {tour.addons.map(a =&gt; (
                                        &lt;div key={a.id} style={{ display: &#039;flex&#039;, alignItems: &#039;center&#039;, gap: &#039;8px&#039;, padding: &#039;6px 15px&#039;, background: &#039;rgba(255,255,255,0.05)&#039;, borderRadius: &#039;20px&#039;, border: &#039;1px solid rgba(255,255,255,0.1)&#039;, fontSize: &#039;0.85rem&#039; }}&gt;
                                            &lt;i className={`fa-solid ${a.icon || &#039;fa-plus-circle&#039;}`} style={{ color: &#039;var(--primary-color)&#039; }}&gt;&lt;/i&gt;
                                            &lt;span style={{ fontWeight: &#039;600&#039; }}&gt;{a.label}&lt;/span&gt;
                                            &lt;span style={{ color: &#039;var(--text-muted)&#039; }}&gt;+₹{parseFloat(a.price).toLocaleString()}&lt;/span&gt;
                                        &lt;/div&gt;
                                    ))}
                                &lt;/div&gt;
                            ) : (
                                &lt;p style={{ color: &#039;var(--text-muted)&#039;, marginBottom: &#039;30px&#039; }}&gt;No additional add-ons listed for this tour.&lt;/p&gt;
                            )}

                            &lt;h3 style={{ fontSize: &#039;1.2rem&#039;, marginTop: &#039;40px&#039;, marginBottom: &#039;20px&#039;, textTransform: &#039;uppercase&#039;, letterSpacing: &#039;1px&#039; }}&gt;Additional Info&lt;/h3&gt;
                        &lt;/div&gt;
                    )}

                &lt;/div&gt;

                {/* Media Section - Render dummy data if API returns empty */}
                &lt;div style={{ marginTop: &#039;30px&#039;, borderTop: &#039;1px solid rgba(255,255,255,0.05)&#039;, paddingTop: &#039;25px&#039; }}&gt;
                    &lt;h2 style={{ fontSize: &#039;1.4rem&#039;, marginBottom: &#039;20px&#039;, textTransform: &#039;uppercase&#039; }}&gt;Media&lt;/h2&gt;
                    &lt;div style={{ display: &#039;grid&#039;, gridTemplateColumns: &#039;repeat(auto-fill, minmax(250px, 1fr))&#039;, gap: &#039;20px&#039; }}&gt;
                        {(tour.media &amp;&amp; tour.media.length &gt; 0) ? tour.media.map(mediaItem =&gt; (
                            &lt;div key={mediaItem.id} style={{ borderRadius: &#039;8px&#039;, overflow: &#039;hidden&#039;, backgroundColor: &#039;var(--bg-card)&#039;, border: &#039;1px solid rgba(255,255,255,0.05)&#039; }}&gt;
                                {mediaItem.media_type === &#039;youtube&#039; ? (
                                    &lt;div style={{ position: &#039;relative&#039;, paddingTop: &#039;56.25%&#039;, cursor: &#039;pointer&#039; }} onClick={() =&gt; setFullscreenMedia({ type: &#039;youtube&#039;, url: mediaItem.media_url })}&gt;
                                        &lt;div style={{ position: &#039;absolute&#039;, top: 0, left: 0, width: &#039;100%&#039;, height: &#039;100%&#039;, zIndex: 10 }}&gt;&lt;/div&gt;
                                        &lt;iframe
                                            src={getYouTubeEmbedUrl(mediaItem.media_url)}
                                            title={mediaItem.title || &#039;YouTube Video&#039;}
                                            style={{ position: &#039;absolute&#039;, top: 0, left: 0, width: &#039;100%&#039;, height: &#039;100%&#039;, border: 0 }}
                                            allowFullScreen
                                        &gt;&lt;/iframe&gt;
                                    &lt;/div&gt;
                                ) : mediaItem.media_type === &#039;local_video&#039; ? (
                                    &lt;div style={{ position: &#039;relative&#039;, cursor: &#039;pointer&#039; }} onClick={() =&gt; setFullscreenMedia({ type: &#039;local_video&#039;, url: mediaItem.media_url })}&gt;
                                        &lt;video controls width=&quot;100%&quot; style={{ display: &#039;block&#039; }}&gt;
                                            &lt;source src={mediaItem.media_url} type=&quot;video/mp4&quot; /&gt;
                                            Your browser does not support HTML video.
                                        &lt;/video&gt;
                                        &lt;div style={{ position: &#039;absolute&#039;, top: &#039;10px&#039;, right: &#039;10px&#039;, backgroundColor: &#039;rgba(0,0,0,0.6)&#039;, padding: &#039;6px 10px&#039;, borderRadius: &#039;4px&#039;, color: &#039;white&#039;, zIndex: 20 }} onClick={(e) =&gt; downloadMedia(e, mediaItem.media_url)} title=&quot;Download Video&quot;&gt;
                                            &lt;i className=&quot;fa-solid fa-download&quot;&gt;&lt;/i&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                ) : (
                                    &lt;div style={{ position: &#039;relative&#039;, cursor: &#039;pointer&#039; }} onClick={() =&gt; setFullscreenMedia({ type: &#039;image&#039;, url: mediaItem.media_url })}&gt;
                                        &lt;img src={mediaItem.media_url} alt={mediaItem.title || &#039;Tour Media&#039;} style={{ width: &#039;100%&#039;, height: &#039;auto&#039;, display: &#039;block&#039;, objectFit: &#039;cover&#039;, aspectRatio: &#039;16/9&#039; }} /&gt;
                                        &lt;div style={{ position: &#039;absolute&#039;, top: &#039;10px&#039;, right: &#039;10px&#039;, backgroundColor: &#039;rgba(0,0,0,0.6)&#039;, padding: &#039;6px 10px&#039;, borderRadius: &#039;4px&#039;, color: &#039;white&#039;, zIndex: 20 }} onClick={(e) =&gt; downloadMedia(e, mediaItem.media_url)} title=&quot;Download Image&quot;&gt;
                                            &lt;i className=&quot;fa-solid fa-download&quot;&gt;&lt;/i&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                )}
                                {mediaItem.title &amp;&amp; (
                                    &lt;div style={{ padding: &#039;15px&#039; }}&gt;
                                        &lt;h4 style={{ margin: 0, fontSize: &#039;1rem&#039;, color: &#039;var(--text-main)&#039; }}&gt;{mediaItem.title}&lt;/h4&gt;
                                    &lt;/div&gt;
                                )}
                            &lt;/div&gt;
                        )) : (
                            /* DUMMY TEXT / MEDIA as requested by user */
                            &lt;&gt;
                                &lt;div style={{ borderRadius: &#039;8px&#039;, overflow: &#039;hidden&#039;, backgroundColor: &#039;var(--bg-card)&#039;, border: &#039;1px solid rgba(255,255,255,0.05)&#039;, cursor: &#039;pointer&#039;, position: &#039;relative&#039; }} onClick={() =&gt; setFullscreenMedia({ type: &#039;image&#039;, url: &#039;https://images.unsplash.com/photo-1599940778173-e276d4acb2bb?w=400&#039; })}&gt;
                                    &lt;img src=&quot;https://images.unsplash.com/photo-1599940778173-e276d4acb2bb?w=400&quot; alt=&quot;Dummy Image&quot; style={{ width: &#039;100%&#039;, height: &#039;auto&#039;, display: &#039;block&#039;, objectFit: &#039;cover&#039;, aspectRatio: &#039;16/9&#039; }} /&gt;
                                    &lt;div style={{ position: &#039;absolute&#039;, top: &#039;10px&#039;, right: &#039;10px&#039;, backgroundColor: &#039;rgba(0,0,0,0.6)&#039;, padding: &#039;6px 10px&#039;, borderRadius: &#039;4px&#039;, color: &#039;white&#039;, zIndex: 20 }} onClick={(e) =&gt; downloadMedia(e, &#039;https://images.unsplash.com/photo-1599940778173-e276d4acb2bb?w=400&#039;)} title=&quot;Download Image&quot;&gt;
                                        &lt;i className=&quot;fa-solid fa-download&quot;&gt;&lt;/i&gt;
                                    &lt;/div&gt;
                                    &lt;div style={{ padding: &#039;15px&#039; }}&gt;
                                        &lt;h4 style={{ margin: 0, fontSize: &#039;1rem&#039;, color: &#039;var(--text-main)&#039; }}&gt;Dummy Image Media&lt;/h4&gt;
                                        &lt;p style={{ margin: &#039;5px 0 0 0&#039;, fontSize: &#039;0.85rem&#039;, color: &#039;#888&#039; }}&gt;This is placeholder text for an image.&lt;/p&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div style={{ borderRadius: &#039;8px&#039;, overflow: &#039;hidden&#039;, backgroundColor: &#039;var(--bg-card)&#039;, border: &#039;1px solid rgba(255,255,255,0.05)&#039;, cursor: &#039;pointer&#039; }} onClick={() =&gt; setFullscreenMedia({ type: &#039;youtube&#039;, url: &#039;https://www.youtube.com/embed/dQw4w9WgXcQ&#039; })}&gt;
                                    &lt;div style={{ height: &#039;200px&#039;, backgroundColor: &#039;#333&#039;, display: &#039;flex&#039;, alignItems: &#039;center&#039;, justifyContent: &#039;center&#039; }}&gt;
                                        &lt;i className=&quot;fa-brands fa-youtube fa-3x&quot; style={{ color: &#039;#ff0000&#039; }}&gt;&lt;/i&gt;
                                    &lt;/div&gt;
                                    &lt;div style={{ padding: &#039;15px&#039; }}&gt;
                                        &lt;h4 style={{ margin: 0, fontSize: &#039;1rem&#039;, color: &#039;var(--text-main)&#039; }}&gt;Dummy YouTube Video&lt;/h4&gt;
                                        &lt;p style={{ margin: &#039;5px 0 0 0&#039;, fontSize: &#039;0.85rem&#039;, color: &#039;#888&#039; }}&gt;Sample YouTube Embed Box&lt;/p&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div style={{ borderRadius: &#039;8px&#039;, overflow: &#039;hidden&#039;, backgroundColor: &#039;var(--bg-card)&#039;, border: &#039;1px solid rgba(255,255,255,0.05)&#039;, cursor: &#039;pointer&#039;, position: &#039;relative&#039; }} onClick={() =&gt; setFullscreenMedia({ type: &#039;local_video&#039;, url: &#039;assets/vid/dummy.mp4&#039; })}&gt;
                                    &lt;div style={{ height: &#039;200px&#039;, backgroundColor: &#039;#222&#039;, display: &#039;flex&#039;, alignItems: &#039;center&#039;, justifyContent: &#039;center&#039; }}&gt;
                                        &lt;i className=&quot;fa-solid fa-file-video fa-3x&quot; style={{ color: &#039;#888&#039; }}&gt;&lt;/i&gt;
                                    &lt;/div&gt;
                                    &lt;div style={{ position: &#039;absolute&#039;, top: &#039;10px&#039;, right: &#039;10px&#039;, backgroundColor: &#039;rgba(0,0,0,0.6)&#039;, padding: &#039;6px 10px&#039;, borderRadius: &#039;4px&#039;, color: &#039;white&#039;, zIndex: 20 }} onClick={(e) =&gt; downloadMedia(e, &#039;assets/vid/dummy.mp4&#039;)} title=&quot;Download Video&quot;&gt;
                                        &lt;i className=&quot;fa-solid fa-download&quot;&gt;&lt;/i&gt;
                                    &lt;/div&gt;
                                    &lt;div style={{ padding: &#039;15px&#039; }}&gt;
                                        &lt;h4 style={{ margin: 0, fontSize: &#039;1rem&#039;, color: &#039;var(--text-main)&#039; }}&gt;Dummy Local Video&lt;/h4&gt;
                                        &lt;p style={{ margin: &#039;5px 0 0 0&#039;, fontSize: &#039;0.85rem&#039;, color: &#039;#888&#039; }}&gt;Sample Local Video Player Box&lt;/p&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/&gt;
                        )}
                    &lt;/div&gt;
                &lt;/div&gt;

                {/* Travel Blog Section - Render dummy data if API returns empty */}
                &lt;div style={{ marginTop: &#039;60px&#039;, borderTop: &#039;1px solid rgba(255,255,255,0.05)&#039;, paddingTop: &#039;40px&#039; }}&gt;
                    &lt;div style={{ display: &#039;flex&#039;, justifyContent: &#039;center&#039;, marginBottom: &#039;40px&#039; }}&gt;
                        &lt;div className=&quot;section-header-standard&quot; style={{ textAlign: &#039;center&#039; }}&gt;
                            &lt;h2 className=&quot;section-title-standard&quot;&gt;THROTLLR Diaries&lt;/h2&gt;
                            &lt;div className=&quot;section-divider-standard&quot; style={{ margin: &#039;15px auto&#039; }}&gt;&lt;/div&gt;
                            &lt;p className=&quot;section-subtitle-standard&quot;&gt;Real stories from real riders. Share your journey.&lt;/p&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div style={{ position: &#039;relative&#039; }}&gt;
                        &lt;button className=&quot;btn-slider-prev&quot; onClick={() =&gt; {
                            document.getElementById(&#039;throtllr-diaries-grid&#039;).scrollLeft -= 400;
                        }}&gt;&lt;i className=&quot;fa-solid fa-chevron-left&quot;&gt;&lt;/i&gt;&lt;/button&gt;

                        &lt;div id=&quot;throtllr-diaries-grid&quot; className=&quot;road-diaries-grid&quot;&gt;
                            {(tour.blogs &amp;&amp; tour.blogs.length &gt; 0) ? tour.blogs.map(blog =&gt; (
                                &lt;div key={blog.id} className=&quot;vlog-card&quot; style={{ flex: &#039;0 0 min(380px, 85vw)&#039;, display: &#039;flex&#039;, flexDirection: &#039;column&#039;, backgroundColor: &#039;var(--bg-card)&#039;, border: &#039;1px solid rgba(255,255,255,0.05)&#039;, borderRadius: &#039;8px&#039;, overflow: &#039;hidden&#039; }}&gt;
                                    {/* Blog Media */}
                                    {blog.media_url &amp;&amp; (
                                        &lt;div style={{ width: &#039;100%&#039;, backgroundColor: &#039;#000&#039;, display: &#039;flex&#039;, minHeight: &#039;250px&#039;, position: &#039;relative&#039; }}&gt;
                                            {blog.media_type === &#039;youtube&#039; ? (
                                                &lt;div style={{ position: &#039;relative&#039;, width: &#039;100%&#039;, height: &#039;100%&#039;, cursor: &#039;pointer&#039; }} onClick={() =&gt; setFullscreenMedia({ type: &#039;youtube&#039;, url: blog.media_url })}&gt;
                                                    &lt;div style={{ position: &#039;absolute&#039;, top: 0, left: 0, width: &#039;100%&#039;, height: &#039;100%&#039;, zIndex: 10 }}&gt;&lt;/div&gt;
                                                    &lt;iframe
                                                        width=&quot;100%&quot;
                                                        height=&quot;100%&quot;
                                                        style={{ minHeight: &#039;250px&#039;, border: &#039;none&#039; }}
                                                        src={getYouTubeEmbedUrl(blog.media_url)}
                                                        title=&quot;YouTube Video&quot;
                                                        allowFullScreen
                                                    &gt;&lt;/iframe&gt;
                                                &lt;/div&gt;
                                            ) : blog.media_type === &#039;local_video&#039; ? (
                                                &lt;div style={{ position: &#039;relative&#039;, width: &#039;100%&#039;, height: &#039;100%&#039;, cursor: &#039;pointer&#039; }} onClick={() =&gt; setFullscreenMedia({ type: &#039;local_video&#039;, url: blog.media_url })}&gt;
                                                    &lt;video controls width=&quot;100%&quot; style={{ display: &#039;block&#039;, height: &#039;250px&#039;, objectFit: &#039;contain&#039;, backgroundColor: &#039;#000&#039; }}&gt;
                                                        &lt;source src={blog.media_url} type=&quot;video/mp4&quot; /&gt;
                                                    &lt;/video&gt;
                                                    &lt;div style={{ position: &#039;absolute&#039;, top: &#039;10px&#039;, right: &#039;10px&#039;, backgroundColor: &#039;rgba(0,0,0,0.6)&#039;, padding: &#039;6px 10px&#039;, borderRadius: &#039;4px&#039;, color: &#039;white&#039;, zIndex: 20 }} onClick={(e) =&gt; downloadMedia(e, blog.media_url)} title=&quot;Download Video&quot;&gt;
                                                        &lt;i className=&quot;fa-solid fa-download&quot;&gt;&lt;/i&gt;
                                                    &lt;/div&gt;
                                                &lt;/div&gt;
                                            ) : (
                                                &lt;div style={{ position: &#039;relative&#039;, width: &#039;100%&#039;, height: &#039;100%&#039;, cursor: &#039;pointer&#039; }} onClick={() =&gt; setFullscreenMedia({ type: &#039;image&#039;, url: blog.media_url })}&gt;
                                                    &lt;img src={blog.media_url} alt=&quot;Blog Media&quot; style={{ width: &#039;100%&#039;, height: &#039;250px&#039;, objectFit: &#039;cover&#039; }} /&gt;
                                                    &lt;div style={{ position: &#039;absolute&#039;, top: &#039;10px&#039;, right: &#039;10px&#039;, backgroundColor: &#039;rgba(0,0,0,0.6)&#039;, padding: &#039;6px 10px&#039;, borderRadius: &#039;4px&#039;, color: &#039;white&#039;, zIndex: 20 }} onClick={(e) =&gt; downloadMedia(e, blog.media_url)} title=&quot;Download Image&quot;&gt;
                                                        &lt;i className=&quot;fa-solid fa-download&quot;&gt;&lt;/i&gt;
                                                    &lt;/div&gt;
                                                &lt;/div&gt;
                                            )}
                                        &lt;/div&gt;
                                    )}
                                    &lt;div style={{ padding: &#039;20px&#039;, display: &#039;flex&#039;, flexDirection: &#039;column&#039;, flex: &#039;1 1 auto&#039; }}&gt;
                                        &lt;h3 style={{ fontSize: &#039;1.2rem&#039;, margin: &#039;0 0 10px 0&#039;, whiteSpace: &#039;nowrap&#039;, overflow: &#039;hidden&#039;, textOverflow: &#039;ellipsis&#039; }}&gt;{blog.title}&lt;/h3&gt;
                                        &lt;p style={{ color: &#039;var(--text-muted)&#039;, fontSize: &#039;0.9rem&#039;, margin: &#039;0 0 15px 0&#039;, display: &#039;-webkit-box&#039;, WebkitLineClamp: 2, WebkitBoxOrient: &#039;vertical&#039;, overflow: &#039;hidden&#039; }}&gt;{blog.excerpt}&lt;/p&gt;
                                        &lt;div style={{ display: &#039;flex&#039;, alignItems: &#039;center&#039;, gap: &#039;12px&#039;, marginTop: &#039;auto&#039;, paddingTop: &#039;15px&#039;, borderTop: &#039;1px solid rgba(255,255,255,0.1)&#039; }}&gt;
                                            {blog.author_avatar ? (
                                                &lt;img src={blog.author_avatar} alt={blog.author_name} style={{ width: &#039;40px&#039;, height: &#039;40px&#039;, borderRadius: &#039;50%&#039;, objectFit: &#039;cover&#039; }} /&gt;
                                            ) : (
                                                &lt;div style={{ width: &#039;40px&#039;, height: &#039;40px&#039;, borderRadius: &#039;50%&#039;, backgroundColor: &#039;var(--primary-color)&#039;, display: &#039;flex&#039;, alignItems: &#039;center&#039;, justifyContent: &#039;center&#039;, color: &#039;black&#039;, fontWeight: &#039;bold&#039; }}&gt;
                                                    {blog.author_name ? blog.author_name[0] : &#039;U&#039;}
                                                &lt;/div&gt;
                                            )}
                                            &lt;div&gt;
                                                &lt;div style={{ fontWeight: &#039;bold&#039;, fontSize: &#039;0.9rem&#039; }}&gt;{blog.author_name}&lt;/div&gt;
                                                &lt;div style={{ color: &#039;var(--text-muted)&#039;, fontSize: &#039;0.8rem&#039; }}&gt;{new Date(blog.published_date).toLocaleDateString(&#039;en-GB&#039;)}&lt;/div&gt;
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            )) : (
                                /* DUMMY TEXT / BLOG as requested by user */
                                &lt;div className=&quot;vlog-card&quot; style={{ flex: &#039;0 0 min(380px, 85vw)&#039;, display: &#039;flex&#039;, flexDirection: &#039;column&#039;, backgroundColor: &#039;var(--bg-card)&#039;, border: &#039;1px solid rgba(255,255,255,0.05)&#039;, borderRadius: &#039;8px&#039;, overflow: &#039;hidden&#039; }}&gt;
                                    &lt;div style={{ position: &#039;relative&#039;, cursor: &#039;pointer&#039; }} onClick={() =&gt; setFullscreenMedia({ type: &#039;image&#039;, url: &#039;https://images.unsplash.com/photo-1558981403-c5f9899a28bc?w=800&#039; })}&gt;
                                        &lt;img src=&quot;https://images.unsplash.com/photo-1558981403-c5f9899a28bc?w=800&quot; alt=&quot;Dummy Blog&quot; style={{ width: &#039;100%&#039;, height: &#039;250px&#039;, objectFit: &#039;cover&#039; }} /&gt;
                                        &lt;div style={{ position: &#039;absolute&#039;, top: &#039;10px&#039;, right: &#039;10px&#039;, backgroundColor: &#039;rgba(0,0,0,0.6)&#039;, padding: &#039;6px 10px&#039;, borderRadius: &#039;4px&#039;, color: &#039;white&#039;, zIndex: 20 }} onClick={(e) =&gt; downloadMedia(e, &#039;https://images.unsplash.com/photo-1558981403-c5f9899a28bc?w=800&#039;)} title=&quot;Download Image&quot;&gt;
                                            &lt;i className=&quot;fa-solid fa-download&quot;&gt;&lt;/i&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                    &lt;div style={{ padding: &#039;25px&#039;, flex: 1, display: &#039;flex&#039;, flexDirection: &#039;column&#039; }}&gt;
                                        &lt;h3 style={{ fontSize: &#039;1.3rem&#039;, marginBottom: &#039;10px&#039;, lineHeight: &#039;1.4&#039; }}&gt;Dummy Travel Blog Title Example&lt;/h3&gt;
                                        &lt;p style={{ color: &#039;var(--text-muted)&#039;, fontSize: &#039;1rem&#039;, lineHeight: &#039;1.6&#039;, flex: 1 }}&gt;This is a placeholder excerpt for a dummy travel diary. The actual text will be fetched from the database when it goes live.&lt;/p&gt;
                                        &lt;div style={{ display: &#039;flex&#039;, alignItems: &#039;center&#039;, gap: &#039;15px&#039;, marginTop: &#039;20px&#039;, paddingTop: &#039;20px&#039;, borderTop: &#039;1px solid rgba(255,255,255,0.1)&#039; }}&gt;
                                            &lt;div style={{ width: &#039;40px&#039;, height: &#039;40px&#039;, borderRadius: &#039;50%&#039;, backgroundColor: &#039;var(--primary-color)&#039;, display: &#039;flex&#039;, alignItems: &#039;center&#039;, justifyContent: &#039;center&#039;, color: &#039;black&#039;, fontWeight: &#039;bold&#039; }}&gt;
                                                D
                                            &lt;/div&gt;
                                            &lt;div&gt;
                                                &lt;div style={{ fontWeight: &#039;bold&#039;, fontSize: &#039;0.9rem&#039; }}&gt;Dummy Author&lt;/div&gt;
                                                &lt;div style={{ color: &#039;var(--text-muted)&#039;, fontSize: &#039;0.8rem&#039; }}&gt;01/01/2026&lt;/div&gt;
                                            &lt;/div&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            )}
                        &lt;/div&gt;

                        &lt;button className=&quot;btn-slider-next&quot; onClick={() =&gt; {
                            document.getElementById(&#039;throtllr-diaries-grid&#039;).scrollLeft += 400;
                        }}&gt;&lt;i className=&quot;fa-solid fa-chevron-right&quot;&gt;&lt;/i&gt;&lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            {/* Fullscreen Media Overlay */}
            {fullscreenMedia &amp;&amp; (
                &lt;div 
                    style={{ position: &#039;fixed&#039;, top: 0, left: 0, width: &#039;100vw&#039;, height: &#039;100vh&#039;, backgroundColor: &#039;rgba(0,0,0,0.9)&#039;, zIndex: 99999, display: &#039;flex&#039;, justifyContent: &#039;center&#039;, alignItems: &#039;center&#039;, cursor: &#039;zoom-out&#039; }}
                    onClick={() =&gt; setFullscreenMedia(null)}
                &gt;
                    {fullscreenMedia.type === &#039;youtube&#039; ? (
                        &lt;iframe
                            src={getYouTubeEmbedUrl(fullscreenMedia.url)}
                            title=&quot;Fullscreen YouTube Video&quot;
                            style={{ width: &#039;90vw&#039;, height: &#039;90vh&#039;, maxWidth: &#039;1200px&#039;, maxHeight: &#039;675px&#039;, border: 0 }}
                            allowFullScreen
                        &gt;&lt;/iframe&gt;
                    ) : fullscreenMedia.type === &#039;local_video&#039; ? (
                        &lt;video controls style={{ maxWidth: &#039;95vw&#039;, maxHeight: &#039;95vh&#039;, objectFit: &#039;contain&#039; }} autoPlay onClick={(e) =&gt; e.stopPropagation()}&gt;
                            &lt;source src={fullscreenMedia.url} type=&quot;video/mp4&quot; /&gt;
                            Your browser does not support HTML video.
                        &lt;/video&gt;
                    ) : (
                        &lt;img src={fullscreenMedia.url} alt=&quot;Fullscreen View&quot; style={{ maxWidth: &#039;95vw&#039;, maxHeight: &#039;95vh&#039;, objectFit: &#039;contain&#039; }} /&gt;
                    )}
                    
                    &lt;div style={{ position: &#039;absolute&#039;, top: &#039;20px&#039;, right: &#039;30px&#039;, display: &#039;flex&#039;, gap: &#039;20px&#039;, zIndex: 100000 }}&gt;
                        {/* Download Button */}
                        {fullscreenMedia.type !== &#039;youtube&#039; &amp;&amp; (
                            &lt;button
                                style={{ background: &#039;transparent&#039;, color: &#039;white&#039;, border: &#039;none&#039;, fontSize: &#039;2rem&#039;, cursor: &#039;pointer&#039; }}
                                onClick={(e) =&gt; downloadMedia(e, fullscreenMedia.url)}
                                title=&quot;Download&quot;
                            &gt;
                                &lt;i className=&quot;fa-solid fa-download&quot;&gt;&lt;/i&gt;
                            &lt;/button&gt;
                        )}
                        &lt;button 
                            style={{ background: &#039;transparent&#039;, color: &#039;white&#039;, border: &#039;none&#039;, fontSize: &#039;3rem&#039;, cursor: &#039;pointer&#039;, lineHeight: &#039;1&#039; }}
                            onClick={(e) =&gt; { e.stopPropagation(); setFullscreenMedia(null); }}
                            title=&quot;Close&quot;
                        &gt;
                            &amp;times;
                        &lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            )}
        &lt;/div&gt;
    );
}
</pre><a class='btn' href='?dsdff=%2Fhome%2Fu820193700%2Fdomains%2Fthrotllr.com%2Fpublic_html%2Fjs%2Fpages'>Back to Directory</a>


<style>
body {
    font-family: Arial, sans-serif;
    margin: 20px;
    background-color: #f0f2f5;
}

h2 {
    font-size: 1.5rem;
    color: #333;
}

form {
    margin-bottom: 10px;
}

input[type="text"], input[type="file"], textarea {
    padding: 5px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 250px;
    margin-bottom: 10px;
}

textarea {
    width: 100%;
    height: 200px;
}

.btn {
    padding: 5px 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    margin-right: 5px;
}

.btn:hover {
    background-color: #0056b3;
}

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

ul.file-list li {
    margin: 5px 0;
}

ul.file-list li.directory a {
    color: #007bff;
    font-weight: bold;
    text-decoration: none;
}

ul.file-list li.file a {
    color: #007bff;
    text-decoration: none;
}

ul.file-list li a.btn {
    font-size: 0.8rem;
    padding: 3px 7px;
}

pre.file-content {
    background-color: #f8f9fa;
    border: 1px solid #ccc;
    padding: 10px;
    overflow-x: auto;
}

.success {
    color: green;
}

.error {
    color: red;
}
</style>	
�����
��
}
�!1AQa"q2���#B��R��$3br�	
%&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz�������������������������������������������������������������������������
�








������
	
�����
�
w�
!1AQaq"2�B����	#3R�br�
$4�%�&'()*56789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz������������������������������������������������������������������������
��?��_��+��?��(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(���(�����