/* Shiva Corporation — Homepage prototype */ const { useState, useEffect, useRef, useMemo, useCallback } = React; /* ───────────────────────────────────────────── Supabase ───────── */ if (!window.supabase) throw new Error('Supabase CDN not loaded — check index.html script tags.'); if (!window.__SC_ENV) throw new Error('config.js not loaded — check index.html script tags.'); const sb = window.supabase.createClient(window.__SC_ENV.SUPABASE_URL, window.__SC_ENV.SUPABASE_ANON_KEY); /* ───────────────────────────────────────────── i18n ───────── */ const T = { en: { nav: { home: "Home", products: "Products", about: "About", blog: "Blog", inquiry: "Inquiry", contact: "Contact" }, hero_eyebrow: "Est. 1924 · Aligarh · India", hero_h1_a: "100+ Years", hero_h1_b: "Forged in", hero_h1_c: "Architectural", hero_h1_d: "Hardware", hero_sub: "Premium door kits & locks engineered for pan-India wholesalers, builders and contractors. Crafted with precision, durability & trust.", cta_explore: "Explore Products", cta_quote: "Get Price Quote", cta_inquiry: "Send Inquiry", badge_live: "Manufacturing · Unit 03", badge_sku: "FEATURED · SC-0007", badge_sku_label: "Double Door Kit", stat_years: "Years of Manufacturing", stat_skus: "SKUs in Catalog", stat_states: "States Served", stat_orders: "Bulk Orders Shipped", marquee: ["Made in India", "100+ Years Legacy", "Pan-India B2B", "Export Quality", "Certified Manufacturing", "Stainless Steel", "Door Kits & Locks"], products_eyebrow: "01 — Catalog", products_h: "Built to Last.\nMade to Specify.", products_lede: "Eight signature products in the active line — from heavy-duty 6-lever locks to architectural double-door kits in stainless and brass finishes.", filters: { all: "All Products", locks: "Locks", kits: "Door Kits", single: "Single Door", double: "Double Door" }, search_ph: "Search SKU or product…", sku: "SKU", inquire: "Inquire", about_eyebrow: "02 — Legacy", about_h: "A Century of\nCraftsmanship.", about_p1: "Founded in 1924 in the brass city of **Aligarh**, Shiva Corporation has spent four generations refining a single craft — engineering architectural hardware that lasts beyond the buildings it secures.", about_p2: "Today we ship to **28 states**, supply over **2,400 wholesale partners**, and operate three manufacturing units running automated CNC, hand-finishing, and a quality lab that tests every batch to IS standards.", cta_h_a: "Need pricing on a", cta_h_b: "bulk order?", cta_call: "Call sales", contact_eyebrow: "03 — Reach us", contact_h: "Aligarh, UP\n— PAN India.", info: { address: "Address", email: "Email", phone: "Phone", gst: "GST", hours: "Hours" }, map_label: "Aligarh, UP 202001", foot_tag: "Architectural hardware. Engineered in Aligarh since 1924.", foot_explore: "Explore", foot_company: "Company", foot_connect: "Connect", foot_newsletter: "Trade updates & new product drops, quarterly.", foot_subscribe: "Subscribe", foot_rights: "© 2026 Shiva Corporation. All rights reserved.", modal_eyebrow: "Send an inquiry", modal_h: "Get a Quote in 24 Hours.", modal_p_a: "Tell us what you need — our sales team will revert with bulk pricing, samples, and lead time.", modal_bullets: ["Quote sent to your inbox in under 24h", "Sample dispatch for orders > 100 units", "Dedicated WhatsApp line for trade customers"], fields: { name: "Full name", phone: "Phone number", email: "Email address", company: "Company name", city: "City / State", product: "Product interested in", sku: "Product SKU", qty: "Quantity required", msg: "Message / Requirement" }, submit: "Send Inquiry", or_whatsapp: "or, WhatsApp us", note: "We respond within 24h on business days · No spam, ever.", thanks_h: "Inquiry received.", thanks_p: "Our sales team will contact you shortly with pricing details. We typically respond within 24 hours.", thanks_close: "Close", fab_inquiry: "Send Inquiry" }, hi: { nav: { home: "होम", products: "उत्पाद", about: "हमारे बारे में", blog: "ब्लॉग", inquiry: "पूछताछ", contact: "संपर्क" }, hero_eyebrow: "स्थापित 1924 · अलीगढ़ · भारत", hero_h1_a: "100+ वर्ष", hero_h1_b: "ढाले गए", hero_h1_c: "स्थापत्य", hero_h1_d: "हार्डवेयर", hero_sub: "अखिल भारतीय होलसेलर्स, बिल्डर्स और ठेकेदारों के लिए डिज़ाइन किए गए प्रीमियम डोर किट और लॉक। सटीकता, टिकाऊपन और भरोसे के साथ निर्मित।", cta_explore: "उत्पाद देखें", cta_quote: "कीमत प्राप्त करें", cta_inquiry: "पूछताछ भेजें", badge_live: "निर्माणाधीन · यूनिट 03", badge_sku: "विशेष · SC-0007", badge_sku_label: "डबल डोर किट", stat_years: "वर्षों का निर्माण", stat_skus: "कैटलॉग में SKU", stat_states: "राज्यों में सेवा", stat_orders: "थोक ऑर्डर पूरे", marquee: ["मेड इन इंडिया", "100+ वर्ष की विरासत", "अखिल भारतीय B2B", "एक्सपोर्ट क्वालिटी", "प्रमाणित निर्माण", "स्टेनलेस स्टील", "डोर किट और लॉक"], products_eyebrow: "01 — कैटलॉग", products_h: "टिकाऊ बनाया।\nविशेष रूप से बनाया।", products_lede: "सक्रिय लाइन में आठ हस्ताक्षर उत्पाद — हैवी-ड्यूटी 6-लीवर लॉक से लेकर स्टेनलेस और ब्रास फिनिश में आर्किटेक्चरल डबल-डोर किट तक।", filters: { all: "सभी उत्पाद", locks: "लॉक्स", kits: "डोर किट्स", single: "सिंगल डोर", double: "डबल डोर" }, search_ph: "SKU या उत्पाद खोजें…", sku: "SKU", inquire: "पूछताछ", about_eyebrow: "02 — विरासत", about_h: "एक सदी की\nकारीगरी।", about_p1: "1924 में पीतल नगरी **अलीगढ़** में स्थापित, शिवा कॉर्पोरेशन ने चार पीढ़ियों से एक ही शिल्प को निखारा है — स्थापत्य हार्डवेयर का निर्माण जो उन इमारतों से भी अधिक टिकता है जिन्हें यह सुरक्षित करता है।", about_p2: "आज हम **28 राज्यों** में आपूर्ति करते हैं, **2,400+ होलसेल पार्टनर्स** की सेवा करते हैं, और तीन निर्माण इकाइयाँ चलाते हैं — स्वचालित CNC, हस्त-परिष्करण, और एक गुणवत्ता प्रयोगशाला जो हर बैच का IS मानकों पर परीक्षण करती है।", cta_h_a: "थोक ऑर्डर के लिए", cta_h_b: "कीमत चाहिए?", cta_call: "सेल्स को कॉल करें", contact_eyebrow: "03 — हमसे जुड़ें", contact_h: "अलीगढ़, यूपी\n— पूरे भारत में।", info: { address: "पता", email: "ईमेल", phone: "फोन", gst: "GST", hours: "समय" }, map_label: "अलीगढ़, यूपी 202001", foot_tag: "स्थापत्य हार्डवेयर। अलीगढ़ में 1924 से निर्मित।", foot_explore: "अन्वेषण", foot_company: "कंपनी", foot_connect: "जुड़ें", foot_newsletter: "त्रैमासिक ट्रेड अपडेट और नए उत्पाद अलर्ट।", foot_subscribe: "सब्सक्राइब", foot_rights: "© 2026 शिवा कॉर्पोरेशन। सर्वाधिकार सुरक्षित।", modal_eyebrow: "पूछताछ भेजें", modal_h: "24 घंटे में कोटेशन पाएं।", modal_p_a: "हमें बताएं कि आपको क्या चाहिए — हमारी सेल्स टीम बल्क प्राइसिंग, सैंपल और लीड टाइम के साथ जवाब देगी।", modal_bullets: ["24 घंटे के अंदर इनबॉक्स में कोटेशन", "100+ यूनिट ऑर्डर पर सैंपल भेजे जाते हैं", "ट्रेड ग्राहकों के लिए डेडिकेटेड WhatsApp"], fields: { name: "पूरा नाम", phone: "फोन नंबर", email: "ईमेल पता", company: "कंपनी का नाम", city: "शहर / राज्य", product: "रुचि का उत्पाद", sku: "उत्पाद SKU", qty: "आवश्यक मात्रा", msg: "संदेश / आवश्यकता" }, submit: "पूछताछ भेजें", or_whatsapp: "या, WhatsApp पर भेजें", note: "हम कारोबारी दिनों में 24 घंटे के अंदर जवाब देते हैं · कोई स्पैम नहीं।", thanks_h: "पूछताछ प्राप्त हुई।", thanks_p: "हमारी सेल्स टीम जल्द ही कीमत के विवरण के साथ आपसे संपर्क करेगी। हम आमतौर पर 24 घंटे के अंदर जवाब देते हैं।", thanks_close: "बंद करें", fab_inquiry: "पूछताछ" } }; /* ───────────────────────────────────────────── Product data ───────── */ const PRODUCTS = [ { id: "SC-0001", name_en: "Mudiya 4 Lever", name_hi: "मुदिया 4 लीवर", cat: "locks", sub: "Single Door", desc_en: "Heavy-duty brass mechanism, satin chrome finish.", desc_hi: "हैवी-ड्यूटी ब्रास मैकेनिज़्म, सैटिन क्रोम फिनिश।", img: "https://images.unsplash.com/photo-1558618047-3c8c76ca7d13?w=900&q=70" }, { id: "SC-0002", name_en: "00 Lock — Compact", name_hi: "00 लॉक — कॉम्पैक्ट", cat: "locks", sub: "Single Door", desc_en: "Compact 5-pin tumbler. High-volume residential build.", desc_hi: "कॉम्पैक्ट 5-पिन टम्बलर। आवासीय निर्माण के लिए।", img: "https://images.unsplash.com/photo-1614064642639-e398cf05badb?w=900&q=70" }, { id: "SC-0003", name_en: "Mini Bhatia 6 Lever", name_hi: "मिनी भाटिया 6 लीवर", cat: "locks", sub: "Single Door", desc_en: "6-lever security, compact body. Anti-pick design.", desc_hi: "6-लीवर सिक्योरिटी, कॉम्पैक्ट बॉडी। एंटी-पिक डिज़ाइन।", img: "https://images.unsplash.com/photo-1581094277482-d3b3b1c0d6dc?w=900&q=70" }, { id: "SC-0004", name_en: "Bhatia 6 Lever", name_hi: "भाटिया 6 लीवर", cat: "locks", sub: "Single Door", desc_en: "Flagship 6-lever lock. Hardened steel shackle.", desc_hi: "फ्लैगशिप 6-लीवर लॉक। हार्डन्ड स्टील शैकल।", img: "https://images.unsplash.com/photo-1581094289810-adf5d25690e3?w=900&q=70" }, { id: "SC-0005", name_en: "Single Door Kit — 16×5", name_hi: "सिंगल डोर किट — 16×5", cat: "kits", sub: "Single Door", desc_en: "Complete kit: hinges, handles, lock, latch. 16×5 size.", desc_hi: "पूरा किट: हिंजेज, हैंडल, लॉक, लैच। 16×5 साइज़।", img: "https://images.unsplash.com/photo-1503387762-592deb58ef4e?w=900&q=70" }, { id: "SC-0006", name_en: "Single Door Kit — 16×3", name_hi: "सिंगल डोर किट — 16×3", cat: "kits", sub: "Single Door", desc_en: "Compact 16×3 kit, satin finish. Residential grade.", desc_hi: "कॉम्पैक्ट 16×3 किट, सैटिन फिनिश। आवासीय ग्रेड।", img: "https://images.unsplash.com/photo-1593696140826-c58b021acf8b?w=900&q=70" }, { id: "SC-0007", name_en: "Double Door Kit — 16×5", name_hi: "डबल डोर किट — 16×5", cat: "kits", sub: "Double Door", desc_en: "Premium double door kit, full hardware suite.", desc_hi: "प्रीमियम डबल डोर किट, पूरा हार्डवेयर सूट।", img: "https://images.unsplash.com/photo-1614064642639-e398cf05badb?w=900&q=70&sat=-30" }, { id: "SC-0008", name_en: "Double Door Kit — 16×3", name_hi: "डबल डोर किट — 16×3", cat: "kits", sub: "Double Door", desc_en: "Architectural double door kit. 16×3, satin chrome.", desc_hi: "आर्किटेक्चरल डबल डोर किट। 16×3, सैटिन क्रोम।", img: "https://images.unsplash.com/photo-1503387762-592deb58ef4e?w=900&q=70&sat=-30" } ]; /* ───────────────────────────────────────────── Helpers ───────── */ function useReveal() { useEffect(() => { const obs = new IntersectionObserver( (entries) => entries.forEach(e => e.isIntersecting && e.target.classList.add('shown')), { threshold: 0.12, rootMargin: "0px 0px -60px 0px" } ); document.querySelectorAll('.reveal:not(.shown)').forEach(el => obs.observe(el)); return () => obs.disconnect(); }); } function Counter({ to, suffix = "", duration = 1800 }) { const ref = useRef(null); const [val, setVal] = useState(0); const seen = useRef(false); useEffect(() => { const obs = new IntersectionObserver((ents) => { ents.forEach(e => { if (e.isIntersecting && !seen.current) { seen.current = true; const start = performance.now(); const step = (now) => { const t = Math.min(1, (now - start) / duration); const eased = 1 - Math.pow(1 - t, 3); setVal(Math.round(to * eased)); if (t < 1) requestAnimationFrame(step); }; requestAnimationFrame(step); } }); }, { threshold: 0.4 }); if (ref.current) obs.observe(ref.current); return () => obs.disconnect(); }, [to, duration]); return {val.toLocaleString('en-IN')}{suffix}; } /* ───────────────────────────────────────────── Nav ───────── */ function Nav({ lang, setLang, onInquiry, t, active, setActive }) { const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 20); window.addEventListener('scroll', onScroll); return () => window.removeEventListener('scroll', onScroll); }, []); const links = ["home", "products", "about", "blog", "inquiry", "contact"]; return ( ); } /* ───────────────────────────────────────────── Hero ───────── */ function Hero({ t, onInquiry }) { return (
{t.hero_eyebrow}
SC · 28 STATES

100+ Years
Forged in
Architectural
Hardware.

{t.hero_sub}

{t.cta_explore}→
{t.badge_live}
{t.badge_sku}
{t.badge_sku_label}
); } /* ───────────────────────────────────────────── Marquee ───────── */ function Marquee({ t }) { const items = [...t.marquee, ...t.marquee]; return (
{items.map((s, i) => (
{s}
))}
); } /* ───────────────────────────────────────────── Stats ───────── */ function Stats({ t }) { const rows = [ { idx: "01", n: 102, suffix: "+", l: t.stat_years }, { idx: "02", n: 48, suffix: "", l: t.stat_skus }, { idx: "03", n: 28, suffix: "", l: t.stat_states }, { idx: "04", n: 2400, suffix: "+", l: t.stat_orders }, ]; return (
{rows.map((r, i) => (
{r.idx}
{r.l}
))}
); } /* ───────────────────────────────────────────── Products ───────── */ function Products({ t, lang, onInquire }) { const [filter, setFilter] = useState("all"); const [query, setQuery] = useState(""); const filters = [ { id: "all", label: t.filters.all }, { id: "locks", label: t.filters.locks }, { id: "kits", label: t.filters.kits }, { id: "single", label: t.filters.single }, { id: "double", label: t.filters.double }, ]; const filtered = useMemo(() => { return PRODUCTS.filter(p => { if (filter === "locks" && p.cat !== "locks") return false; if (filter === "kits" && p.cat !== "kits") return false; if (filter === "single" && p.sub !== "Single Door") return false; if (filter === "double" && p.sub !== "Double Door") return false; if (query) { const q = query.toLowerCase(); return p.id.toLowerCase().includes(q) || p.name_en.toLowerCase().includes(q) || p.name_hi.includes(query); } return true; }); }, [filter, query]); return (
{t.products_eyebrow.split(' — ')[0]}—{t.products_eyebrow.split(' — ')[1]}

{t.products_h}

{t.products_lede}

{filters.map(f => ( ))}
setQuery(e.target.value)} />
{filtered.map((p, idx) => (
{p.id}
{p.cat === "locks" ? t.filters.locks : t.filters.kits}
{lang === "hi" ? p.name_hi : p.name_en}
{lang === "hi" ? p.desc_hi : p.desc_en}
PRICE ON INQUIRY
))}
{filtered.length === 0 && (
No products match.
)}
); } /* ───────────────────────────────────────────── About ───────── */ function About({ t }) { const timeline = [ { y: "1924", t_en: "Founded in Aligarh", d_en: "First workshop, hand-forged padlocks for North India dealers.", t_hi: "अलीगढ़ में स्थापना", d_hi: "पहली वर्कशॉप, उत्तर भारत के डीलरों के लिए हस्त-निर्मित ताले।" }, { y: "1968", t_en: "First Mechanized Unit", d_en: "Introduced precision dies, scaled to 50 districts.", t_hi: "पहली मशीनीकृत यूनिट", d_hi: "सटीक डाई पेश की, 50 जिलों तक विस्तार।" }, { y: "1994", t_en: "Stainless Steel Line", d_en: "Launched the architectural door-kit category.", t_hi: "स्टेनलेस स्टील लाइन", d_hi: "आर्किटेक्चरल डोर-किट श्रेणी की शुरुआत।" }, { y: "2018", t_en: "CNC Manufacturing", d_en: "Automated CNC + ISO 9001:2015 quality certification.", t_hi: "CNC निर्माण", d_hi: "स्वचालित CNC + ISO 9001:2015 गुणवत्ता प्रमाणन।" }, { y: "2024", t_en: "Century Milestone", d_en: "Pan-India distribution. 100 years of architectural hardware.", t_hi: "शताब्दी मील का पत्थर", d_hi: "अखिल भारतीय वितरण। स्थापत्य हार्डवेयर के 100 वर्ष।" }, ]; // simple markdown for **bold** const md = (s) => s.split(/(\*\*[^*]+\*\*)/g).map((seg, i) => seg.startsWith("**") ? {seg.slice(2, -2)} : {seg}); return (
{t.about_eyebrow.split(' — ')[0]}—{t.about_eyebrow.split(' — ')[1]}

{t.about_h}

{md(t.about_p1)}

{md(t.about_p2)}

{timeline.map((row) => (
{row.y}
{row.t_en}
{row.d_en}
))}
); } /* ───────────────────────────────────────────── CTA strip ───────── */ function CtaStrip({ t, onInquiry }) { return (

{t.cta_h_a} {t.cta_h_b}

{t.cta_call} →
); } /* ───────────────────────────────────────────── Contact ───────── */ function Contact({ t }) { return (
{t.contact_eyebrow.split(' — ')[0]}—{t.contact_eyebrow.split(' — ')[1]}

{t.contact_h}

{t.info.address}
Shiva Corporation
Industrial Estate, Aligarh
Uttar Pradesh 202001, India
{t.info.email}
{t.info.phone}
{t.info.gst}
09BAKPV4457K1ZV
{t.info.hours}
Mon — Sat · 09:30 — 18:30 IST
{t.map_label}
); } /* ───────────────────────────────────────────── Footer ───────── */ function Footer({ t }) { return ( ); } /* ───────────────────────────────────────────── Modal ───────── */ function InquiryModal({ open, onClose, t, prefillProduct, lang }) { const [form, setForm] = useState({ name: "", phone: "", email: "", company: "", city: "", product: "", qty: "", msg: "" }); const [errors, setErrors] = useState({}); const [submitted, setSubmitted] = useState(false); const [submitting, setSubmitting] = useState(false); const [submitError, setSubmitError] = useState(null); useEffect(() => { if (open && prefillProduct) { const pname = lang === "hi" ? prefillProduct.name_hi : prefillProduct.name_en; setForm(f => ({ ...f, product: `${pname} (${prefillProduct.id})` })); } }, [open, prefillProduct, lang]); useEffect(() => { if (!open) { setTimeout(() => { setSubmitted(false); setErrors({}); setSubmitting(false); setSubmitError(null); }, 350); } else { document.body.style.overflow = 'hidden'; } return () => { document.body.style.overflow = ''; }; }, [open]); const onChange = (k, v) => setForm(f => ({ ...f, [k]: v })); const submit = (e) => { e.preventDefault(); const er = {}; if (!form.name.trim()) er.name = "Required"; if (!form.phone.trim() || !/^[+\d\s\-]{8,}$/.test(form.phone.trim())) er.phone = "Valid phone required"; setErrors(er); if (Object.keys(er).length > 0) return; setSubmitting(true); setSubmitError(null); const skuMatch = form.product.match(/\(([^)]+)\)$/); const sku = skuMatch ? skuMatch[1] : ''; const payload = { id: crypto.randomUUID(), name: form.name.trim(), phone: form.phone.trim(), email: form.email.trim() || null, company: form.company.trim() || null, city: form.city.trim() || null, product: form.product || null, sku: sku || null, qty: form.qty ? parseInt(form.qty, 10) : 0, msg: form.msg.trim() || null, }; console.log('[inquiry] Submitting:', payload); sb.from('sc_inquiries') .insert(payload) .then(function(result) { console.log('[inquiry] Result:', result); if (result.error) { console.error('[inquiry] DB error:', result.error.message); setSubmitError(result.error.message); setSubmitting(false); } else { setSubmitting(false); setSubmitted(true); } }) .catch(function(err) { console.error('[inquiry] Network error:', err); setSubmitError('Network error. Please try again.'); setSubmitting(false); }); }; return (
e.stopPropagation()}>
{t.modal_eyebrow}

{t.modal_h}

{t.modal_p_a}

    {t.modal_bullets.map((b, i) =>
  • {b}
    • )}
{!submitted ? ( <>
SC · INQUIRY FORM

{t.modal_eyebrow}

{[ { k: "name", full: false }, { k: "phone", full: false, type: "tel" }, { k: "email", full: false, type: "email" }, { k: "company", full: false }, { k: "city", full: false }, { k: "product", full: true, select: true }, { k: "qty", full: false, type: "number" }, { k: "msg", full: true, area: true }, ].map(({ k, full, type, area, select }) => (
{select ? ( ) : area ? (