/* global React, ReactDOM, TRANSLATIONS */ const { useState, useEffect, useRef, useCallback, useMemo } = React; // Telegram bot configuration — replace BOT_TOKEN/CHAT_ID with real values in production // In production, the bot send should be proxied through your own backend to keep the token private. const TG_CONFIG = { BOT_TOKEN: "8659768973:AAHWZwHIfOJF-MBhGY_Omu7GyZsKsBBFf90", CHAT_ID: "-1003912815046" }; // ---------------- Decorative Mountain SVG ---------------- function MountainRange({ className = "" }) { return ( ); } function WavyDivider({ flip = false, fill = "#ffffff", className = "" }) { return ( ); } function DropletIcon({ className = "" }) { return ( ); } // ---------------- Language hook ---------------- function useLang() { const [lang, setLang] = useState(() => { try {return localStorage.getItem("safo_lang") || "uz";} catch {return "uz";} }); useEffect(() => { try {localStorage.setItem("safo_lang", lang);} catch {} document.documentElement.lang = lang; }, [lang]); const t = TRANSLATIONS[lang]; return { lang, setLang, t }; } // ---------------- Navbar ---------------- function Navbar({ lang, setLang, t }) { const [scrolled, setScrolled] = useState(false); const [open, setOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 24); window.addEventListener("scroll", onScroll, { passive: true }); onScroll(); return () => window.removeEventListener("scroll", onScroll); }, []); useEffect(() => { document.body.style.overflow = open ? "hidden" : ""; return () => {document.body.style.overflow = "";}; }, [open]); const links = [ { href: "#about", label: t.nav.about }, { href: "#products", label: t.nav.products }, { href: "#benefits", label: t.nav.benefits }, { href: "#delivery", label: t.nav.delivery }, { href: "#cooperation", label: t.nav.cooperation }, { href: "#contact", label: t.nav.contact }]; return ( <>
Safo {/* Desktop nav */}
{/* Desktop / tablet: lang switch + order */}
{t.nav.order} {/* Mobile hamburger — right */}
{/* (drawer moved outside
so fixed positioning is relative to viewport) */}
{/* Mobile drawer — sibling of header so backdrop-filter on
doesn't break fixed positioning */}
setOpen(false)} className={"fixed inset-0 z-[60] bg-[#0A2540]/40 backdrop-blur-sm transition-opacity duration-300 " + (open ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none")} aria-hidden={!open} />
); } function BackToTop() { const [show, setShow] = useState(false); useEffect(() => { const onScroll = () => setShow(window.scrollY > 480); window.addEventListener("scroll", onScroll, { passive: true }); onScroll(); return () => window.removeEventListener("scroll", onScroll); }, []); return ( ); } function LangSwitch({ lang, setLang }) { return (
); } function TgIcon({ className = "" }) { return ( ); } // Monochrome plane (used inside solid colored buttons) function TgPlane({ className = "" }) { return ( ); } function IgIcon({ className = "" }) { return ( ); } function FbIcon({ className = "" }) { return ( ); } // ---------------- Hero ---------------- function Hero({ t }) { return (
{/* Natural mountain backdrop */}
{/* Light vignette for legibility — mobile (top→bottom) + desktop (left→right) */}
{/* Soft floating orbs */}
{/* Subtle grain dots */}
{t.hero.eyebrow}

{t.hero.title}{" "} {t.hero.titleAccent}

{/* Right column — bottle showcase */}
{/* Decorative animated rings */}
{/* Drop sparkles */} {/* Pedestal shadow */}
Safo 18.9L
{/* Scroll cue — desktop only */}
scroll
); } function Sparkle({ className }) { return ( ); } function Stat({ n, l, className = "" }) { return (
{n}
{l}
); } // ---------------- Footer ---------------- function Footer({ t, lang }) { return ( ); } // ---------------- App ---------------- function App() { const { lang, setLang, t } = useLang(); return ( <>