/* global React */ const { useState: useStateS, useRef: useRefS } = React; // ---------------- About ---------------- function About({ t }) { return (

{t.about.title}

{t.about.lead}

{t.about.p1}

{t.about.p2}

} title={t.about.featureA} desc={t.about.featureADesc} /> } title={t.about.featureB} desc={t.about.featureBDesc} /> } title={t.about.featureC} desc={t.about.featureCDesc} /> } title={t.about.featureD} desc={t.about.featureDDesc} />
{/* Right visual — cross-section illustration */}
{/* Sky → water gradient backdrop */}
{/* Subtle radial sun glow */}
{/* Soft drifting clouds */} {/* Faint horizon line between sky and water */}
{/* Underwater ripple highlights */} {/* Cross-section illustration (transparent) */} Mountain water source cross-section {/* Depth scale on the side */}
0 m
350 m
{/* Floating callout */}
Fergana
Tien Shan foothills
41.39°N · 71.78°E
); } function SectionEyebrow({ text }) { return (
{text}
); } function FeatureCard({ icon, title, desc }) { return (
{icon}
{title}
{desc}
); } // ---------------- Process (7 filtration steps) ---------------- function Process({ t }) { return (

{t.process.title}

{t.process.sub}

{/* Connecting line */}
    {t.process.steps.map((s, i) =>
  1. {i + 1}
    {s.t}
    {s.d}
    2. )}
); } // ---------------- Products ---------------- function Products({ t }) { const sizes = t.products.sizes; // Map images by index — order matches the array const imgs = [ { src: "assets/safo-033.webp", w: 542, h: 542 }, // 0.33L { src: "assets/safo-05.webp", w: 592, h: 735 }, // 0.5L { src: "assets/safo-1.webp", w: 463, h: 882 }, // 1L { src: "assets/bottle-5l-clean.webp", w: 800, h: 640 }, // 5L { src: "assets/bottle-10l-clean.webp",w: 800, h: 640 }, // 10L { src: "assets/bottle-19l-clean.webp",w: 1200,h: 1200 } // 18.9L ]; // All images now have their own transparent PNG const bgPositions = [null, null, null, null, null, null]; return (

{t.products.title}

{t.products.sub}

{sizes.map((s, i) => { const isLarge = i >= 3; const popular = i === 4; // 10L popular const freeDelivery = i === 5; // 18.9L return (
{/* Badges */}
SAFO
{popular && {t.products.pop} } {freeDelivery && {t.products.free} }
{/* Image */}
{bgPositions[i] ?
: {`Safo }
{/* Bottom info */}
{s.v}
{s.t}
{s.d}
); })}
); } // ---------------- Benefits ---------------- function Benefits({ t }) { const icons = [ // hydration , // heart , // digestion / leaf , // bones , // detox , // immunity ]; return (
{/* Soft blue glow */}
{t.benefits.eyebrow}

{t.benefits.title}

{t.benefits.sub}

{t.benefits.items.map((it, i) =>
{icons[i]}
{it.t}
{it.d}
)}
); } // ---------------- Delivery ---------------- function Delivery({ t }) { return (
{/* Decor */}
{t.delivery.eyebrow}

{t.delivery.title}

{t.delivery.sub}

    {t.delivery.points.map((p, i) =>
  • {p}
    • )}
Safo 18.9L {/* Floating tag */}
18.9 L
{t.products.free}
); } // ---------------- Cooperation form ---------------- function Cooperation({ t, lang, tgConfig }) { const PHONE_PREFIX = "+998 "; const [form, setForm] = useStateS({ name: "", phone: PHONE_PREFIX, message: "" }); const [errors, setErrors] = useStateS({}); const [status, setStatus] = useStateS("idle"); // idle | sending | success | error const formRef = useRefS(null); const update = (k) => (e) => { let v = e.target.value; if (k === "phone" && !v.startsWith(PHONE_PREFIX)) { // strip any partial prefix attempts and re-apply v = PHONE_PREFIX + v.replace(/^\+?9?9?8?\s*/, ""); } setForm((f) => ({ ...f, [k]: v })); if (errors[k]) setErrors((er) => ({ ...er, [k]: undefined })); }; const onPhoneFocus = (e) => { if (!e.target.value) { setForm((f) => ({ ...f, phone: PHONE_PREFIX })); } // place caret at the end requestAnimationFrame(() => { const el = e.target; const end = el.value.length; try {el.setSelectionRange(end, end);} catch (_) {} }); }; const validate = () => { const e = {}; if (!form.name.trim()) e.name = t.coop.required; if (form.phone.trim() === PHONE_PREFIX.trim() || !form.phone.trim()) e.phone = t.coop.required;else if (!/^\+998\s*\d{6,}/.test(form.phone.replace(/[\s\-()]/g, ""))) e.phone = t.coop.invalidPhone; return e; }; const onSubmit = async (ev) => { ev.preventDefault(); const e = validate(); if (Object.keys(e).length) {setErrors(e);return;} setStatus("sending"); const text = "🆕 *Safo — Hamkorlik so'rovi / Запрос на сотрудничество*\n" + `\n👤 *${t.coop.name}:* ${form.name}` + `\n📞 *${t.coop.phone}:* ${form.phone}` + ( form.message ? `\n💬 *${t.coop.message}:* ${form.message}` : "") + `\n🌐 Lang: ${lang.toUpperCase()}` + `\n⏱ ${new Date().toLocaleString()}`; try { // If bot token is configured, send directly to Telegram Bot API. // For production safety, route this through your own backend instead. if (tgConfig.BOT_TOKEN && !tgConfig.BOT_TOKEN.startsWith("REPLACE_")) { const res = await fetch(`https://api.telegram.org/bot${tgConfig.BOT_TOKEN}/sendMessage`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ chat_id: tgConfig.CHAT_ID, text, parse_mode: "Markdown" }) }); if (!res.ok) throw new Error("bot"); } else { // Demo path — just simulate latency so the UX is testable await new Promise((r) => setTimeout(r, 900)); console.log("[Safo demo] Would send to Telegram:\n" + text); } setStatus("success"); setForm({ name: "", phone: PHONE_PREFIX, message: "" }); } catch (err) { console.error(err); setStatus("error"); } }; return (

{t.coop.title}

{t.coop.sub}

{/* Decorative droplet */}