const { Button, CapPill } = window.AbStudioDigitalDesignSystem_cd7db8;
const { useState, useEffect, useRef } = React;

/* ---------- icons: lucide-style 1.75px strokes (DS recommendation) ---------- */
const Icon = ({ d, size = 20, stroke = "currentColor", ...rest }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...rest}>{d}</svg>
);
const IconUser = p => <Icon {...p} d={<><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" /></>} />;
const IconSearch = p => <Icon {...p} d={<><circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" /></>} />;
const IconHeart = p => <Icon {...p} d={<path d="M12 20s-7-4.4-7-9.2A3.8 3.8 0 0 1 12 8a3.8 3.8 0 0 1 7 2.8C19 15.6 12 20 12 20Z" />} />;
const IconChevron = p => <Icon {...p} d={<path d="m6 9 6 6 6-6" />} />;
const IconArrow = p => <Icon {...p} d={<><path d="M5 12h14" /><path d="m13 6 6 6-6 6" /></>} />;
const IconLogout = p => <Icon {...p} d={<><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" /><path d="m16 17 5-5-5-5" /><path d="M21 12H9" /></>} />;
const IconClose = p => <Icon {...p} d={<><path d="M18 6 6 18" /><path d="m6 6 12 12" /></>} />;
const IconMenu = p => <Icon {...p} d={<><path d="M3 6h18" /><path d="M3 12h18" /><path d="M3 18h18" /></>} />;
const IconWhatsApp = ({ size = 22 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12.04 2C6.6 2 2.2 6.4 2.2 11.84c0 1.74.46 3.44 1.32 4.94L2 22l5.36-1.4a9.85 9.85 0 0 0 4.68 1.2h.01c5.43 0 9.84-4.4 9.84-9.84C21.89 6.4 17.47 2 12.04 2Zm5.76 14.06c-.24.68-1.4 1.3-1.93 1.35-.5.05-.98.07-1.5-.09-.36-.11-.83-.26-1.42-.52-2.5-1.08-4.14-3.6-4.26-3.77-.13-.17-1.02-1.35-1.02-2.58 0-1.22.64-1.83.87-2.08.23-.25.5-.31.67-.31.17 0 .34 0 .49.01.16.01.37-.06.58.44.21.51.72 1.76.79 1.88.06.13.1.28.02.45-.09.17-.34.5-.5.67-.11.13-.24.27-.1.53.14.25.62 1.03 1.33 1.67.9.82 1.66 1.08 1.9 1.2.24.13.38.11.52-.05.14-.17.6-.7.76-.94.16-.25.32-.2.54-.12.21.08 1.37.65 1.6.77.24.12.4.18.46.28.06.1.06.6-.18 1.28Z" /></svg>
);
const IconMail = p => <Icon {...p} d={<><rect x="2" y="4" width="20" height="16" rx="2" /><path d="m22 6-10 7L2 6" /></>} />;
const IconInstagram = p => <Icon {...p} d={<><rect x="3" y="3" width="18" height="18" rx="5" /><circle cx="12" cy="12" r="4" /><path d="M17.5 6.5h.01" /></>} />;
const IconFacebook = p => <Icon {...p} d={<path d="M14 9h3V5h-3a4 4 0 0 0-4 4v2H7v4h3v6h4v-6h3l1-4h-4V9a1 1 0 0 1 1-1Z" fill="currentColor" stroke="none" />} />;
const IconYouTube = p => <Icon {...p} d={<><path d="M21.5 7.5s-.2-1.5-.85-2.15c-.8-.85-1.7-.85-2.1-.9C15.7 4.2 12 4.2 12 4.2h0s-3.7 0-6.55.25c-.4.05-1.3.05-2.1.9C2.7 6 2.5 7.5 2.5 7.5S2.25 9.25 2.25 11v1.9c0 1.75.25 3.5.25 3.5s.2 1.5.85 2.15c.8.85 1.85.82 2.3.92 1.7.16 7.35.25 7.35.25s3.7 0 6.55-.25c.4-.05 1.3-.05 2.1-.9.65-.65.85-2.15.85-2.15s.25-1.75.25-3.5V11c0-1.75-.25-3.5-.25-3.5Z" /><path d="m10 14.5 5-2.5-5-2.5v5Z" fill="currentColor" stroke="none" /></>} />;

/* ================= HEADER ================= */
function MegaMenu({ category }) {
  return (
    <div className="jw-mega" role="menu">
      <div className="jw-wrap jw-mega-inner">
        <div className="jw-mega-cols">
          {category.children.map(sub => (
            <a key={sub.id} className="jw-mega-link" href={`Category.html#/${category.slug}/${sub.slug}`} role="menuitem">{sub.name}</a>
          ))}
        </div>
        <a className="jw-mega-all" href={`Category.html#/${category.slug}`}>All {category.name.toLowerCase()}<IconArrow size={16} /></a>
      </div>
    </div>
  );
}

function SearchOverlay({ open, onClose }) {
  const [q, setQ] = useState("");
  const results = q.trim().length < 2 ? [] : PRODUCTS.filter(p =>
    (p.name + p.code + p.category + p.subcategory + Object.values(p.customFields).join(" ")).toLowerCase().includes(q.trim().toLowerCase()));
  const suggestions = ["Mangalsutra", "22K chains", "Solitaire rings", "Silver pooja articles", "Gold coins"];
  if (!open) return null;
  return (
    <div className="jw-search-scrim" onClick={onClose}>
      <div className="jw-search-panel" onClick={e => e.stopPropagation()}>
        <div className="jw-search-field">
          <IconSearch size={22} />
          <input autoFocus value={q} onChange={e => setQ(e.target.value)} placeholder="Search by name, item code or category" aria-label="Search jewellery" />
          <button className="jw-icon-btn" onClick={onClose} aria-label="Close search"><IconClose /></button>
        </div>
        {q.trim().length < 2 ? (
          <div className="jw-search-body">
            <div className="jw-eyebrow">Popular searches</div>
            <div className="jw-chips">{suggestions.map(s => <button key={s} className="jw-chip" onClick={() => setQ(s)}>{s}</button>)}</div>
          </div>
        ) : results.length ? (
          <div className="jw-search-body">
            <div className="jw-eyebrow">{results.length} result{results.length > 1 ? "s" : ""}</div>
            <div className="jw-search-results">
              {results.slice(0, 5).map(p => (
                <a key={p.id} className="jw-search-row" href={`ProductDetails.html#/product/${p.code}`} onClick={onClose}>
                  <div className="jw-search-thumb"><image-slot id={"s-" + p.slotId} src={p.images[0]} shape="rounded" radius="8" placeholder=" "></image-slot></div>
                  <div>
                    <div className="jw-search-name">{p.name}</div>
                    <div className="jw-meta">{p.code} · {p.category} / {p.subcategory}</div>
                  </div>
                  <div className="jw-search-price">{inr(priceBreakdown(p).total)}</div>
                </a>
              ))}
            </div>
          </div>
        ) : (
          <div className="jw-search-body jw-empty">
            <div className="jw-empty-title">No jewellery found for “{q}”</div>
            <p>Try an item code, a metal, or browse the collections above.</p>
          </div>
        )}
      </div>
    </div>
  );
}

function Header() {
  const [openCat, setOpenCat] = useState(null);
  const [searchOpen, setSearchOpen] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const [mobileCat, setMobileCat] = useState(null);
  return (
    <header className="jw-header">
      <div className="jw-nav" onMouseLeave={() => setOpenCat(null)}>
        <div className="jw-wrap jw-nav-inner">
          <button className="jw-icon-btn jw-only-mobile" onClick={() => setMenuOpen(true)} aria-label="Open menu"><IconMenu size={22} /></button>
          <a className="jw-logo" href="index.html">
            <img className="jw-logo-full" src="images/logo-full.png" alt={SITE_CONFIG.brand} />
          </a>
          <nav className="jw-nav-links">
            {CATEGORIES.map(c => (
              <div key={c.id} className={"jw-nav-item" + (openCat === c.id ? " is-open" : "")} onMouseEnter={() => setOpenCat(c.id)}>
                <a href={`Category.html#/${c.slug}`} onClick={e => { e.preventDefault(); setOpenCat(openCat === c.id ? null : c.id); }}>
                  {c.name}<IconChevron size={16} />
                </a>
              </div>
            ))}
            <div className="jw-nav-item"><a href="SavingScheme.html">Saving Scheme</a></div>
            <div className="jw-nav-item"><a href="OurJourney.html">Our journey</a></div>
            <div className="jw-nav-item"><a href="Terms.html">Terms &amp; Conditions</a></div>
          </nav>
          <div className="jw-nav-actions">
            <button className="jw-icon-btn" onClick={() => setSearchOpen(true)} aria-label="Search"><IconSearch size={21} /></button>
          </div>
        </div>
        {openCat && <MegaMenu category={CATEGORIES.find(c => c.id === openCat)} />}
      </div>

      {menuOpen && (
        <div className="jw-drawer-scrim" onClick={() => setMenuOpen(false)}>
          <div className="jw-drawer" onClick={e => e.stopPropagation()}>
            <div className="jw-drawer-head">
              <img className="jw-logo-full jw-logo-full-sm" src="images/logo-full-white.png" alt={SITE_CONFIG.brand} />
              <button className="jw-icon-btn" onClick={() => setMenuOpen(false)} aria-label="Close menu"><IconClose /></button>
            </div>
            {CATEGORIES.map(c => (
              <div key={c.id} className="jw-drawer-group">
                <button onClick={() => setMobileCat(mobileCat === c.id ? null : c.id)}>
                  {c.name}<IconChevron size={18} style={{ transform: mobileCat === c.id ? "rotate(180deg)" : "none", transition: "transform 120ms ease" }} />
                </button>
                {mobileCat === c.id && (
                  <div className="jw-drawer-subs">
                    {c.children.map(s => <a key={s.id} href={`Category.html#/${c.slug}/${s.slug}`} onClick={() => setMenuOpen(false)}>{s.name}</a>)}
                  </div>
                )}
              </div>
            ))}
            <div className="jw-drawer-foot">
              <a href="SavingScheme.html">Saving Scheme</a>
              <a href="OurJourney.html">Our journey</a>
              <a href="Terms.html">Terms &amp; Conditions</a>
              <a href="#/profile"><IconUser size={18} />My profile</a>
              <a href="#/logout"><IconLogout size={18} />Log out</a>
            </div>
          </div>
        </div>
      )}
      <SearchOverlay open={searchOpen} onClose={() => setSearchOpen(false)} />
    </header>
  );
}

/* ================= RATE BOARD ================= */
function RateBoard() {
  const updated = new Date(RATES[0].updatedAt);
  const stamp = updated.toLocaleDateString("en-IN", { day: "numeric", month: "short" }) + ", " +
    updated.toLocaleTimeString("en-IN", { hour: "numeric", minute: "2-digit" });
  const trackRef = useRef(null);
  useEffect(() => {
    const track = trackRef.current;
    if (!track) return;
    const t = setInterval(() => {
      const max = track.scrollWidth - track.clientWidth;
      if (max <= 0) return;
      const next = track.scrollLeft >= max - 4 ? 0 : Math.min(track.scrollLeft + track.clientWidth * 0.6, max);
      track.scrollTo({ left: next, behavior: "smooth" });
    }, 2500);
    return () => clearInterval(t);
  }, []);
  return (
    <section className="jw-rates" aria-label="Today's metal rates">
      <div className="jw-wrap jw-rates-inner">
        <div className="jw-rates-label">
          <span className="jw-eyebrow">Today’s rates</span>
          <span className="jw-meta">Updated {stamp}</span>
        </div>
        <div className="jw-rates-track" ref={trackRef}>
          {RATES.map(r => (
            <div className="jw-rate" key={r.id}>
              <span className="jw-rate-metal">{r.metal} {r.purity}</span>
              <span className="jw-rate-value">{inr(r.rate)}<em>/{r.unit}</em></span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ================= BANNER SLIDER ================= */
function BannerSlider() {
  const [i, setI] = useState(0);
  const [paused, setPaused] = useState(false);
  const slides = BANNERS.slice().sort((a, b) => a.order - b.order);
  useEffect(() => {
    if (paused) return;
    const t = setTimeout(() => setI(v => (v + 1) % slides.length), 6000);
    return () => clearTimeout(t);
  }, [i, paused, slides.length]);
  const go = n => setI((n + slides.length) % slides.length);
  return (
    <section className="jw-banner" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)} aria-label="Promotions">
      <div className="jw-wrap">
        <div className="jw-banner-frame">
          <div className="jw-slide-track" style={{ transform: `translateX(-${i * 100}%)` }}>
            {slides.map((b, n) => (
              <div key={b.id} className="jw-slide" aria-hidden={n !== i}>
                <image-slot id={b.slotId} src={b.image} shape="rect" fit="cover" placeholder={`Drop banner ${n + 1} (2400×1000)`}></image-slot>
                <div className="jw-slide-copy">
                  <CapPill tone="cream">{b.eyebrow}</CapPill>
                  <h2>{b.title}</h2>
                  <p>{b.subtitle}</p>
                  <Button as="a" href={b.href} size="lg" elevated style={{ background: "var(--gold)", color: "var(--color-primary-deep)" }}>{b.cta}</Button>
                </div>
              </div>
            ))}
          </div>
          <button className="jw-slide-nav jw-prev" onClick={() => go(i - 1)} aria-label="Previous banner"><IconChevron size={22} style={{ transform: "rotate(90deg)" }} /></button>
          <button className="jw-slide-nav jw-next" onClick={() => go(i + 1)} aria-label="Next banner"><IconChevron size={22} style={{ transform: "rotate(-90deg)" }} /></button>
          <div className="jw-dots">
            {slides.map((b, n) => (
              <button key={b.id} className={"jw-dot" + (n === i ? " is-active" : "")} onClick={() => go(n)} aria-label={`Banner ${n + 1}`} />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ================= INQUIRY MODAL ================= */
function InquiryModal({ product, onClose }) {
  const [name, setName] = useState("");
  const [mobile, setMobile] = useState("");
  const [message, setMessage] = useState(product
    ? `Hi, I'm interested in ${product.name}${product.code ? ` (${product.code})` : ""}. Please share more details.`
    : "Hi, I'd like to know more about your jewellery collection.");
  const [sending, setSending] = useState(false);
  const [error, setError] = useState("");
  const [sent, setSent] = useState(false);

  const submit = async e => {
    e.preventDefault();
    const digits = mobile.replace(/[^0-9]/g, "");
    if (digits.length < 10) { setError("Enter a valid mobile number"); return; }
    setSending(true);
    setError("");
    try {
      await submitInquiry(product, { name: name.trim(), mobile: mobile.trim(), message: message.trim() });
      setSent(true);
      window.open(whatsappLink(product), "_blank", "noopener");
    } catch (err) {
      setError(err.message);
    } finally {
      setSending(false);
    }
  };

  return (
    <div className="jw-modal-scrim" onClick={onClose}>
      <div className="jw-modal" onClick={e => e.stopPropagation()}>
        <button type="button" className="jw-modal-close" onClick={onClose} aria-label="Close"><IconClose size={18} /></button>
        {sent ? (
          <div className="jw-modal-success">
            <h3>Thanks, we’ve got your enquiry</h3>
            <p>Our team will reach out to you shortly on the number you shared.</p>
            <div className="jw-modal-actions">
              <button type="button" className="jw-modal-btn" onClick={onClose}>Close</button>
            </div>
          </div>
        ) : (
          <form onSubmit={submit}>
            <h3>{product ? `Enquire about ${product.name}` : "Send an enquiry"}</h3>
            {product && <p className="jw-meta">{product.code}</p>}
            {error && <div className="jw-modal-error">{error}</div>}
            <label className="jw-modal-field">
              <span>Your name <em>(optional)</em></span>
              <input value={name} onChange={e => setName(e.target.value)} placeholder="Your name" />
            </label>
            <label className="jw-modal-field">
              <span>Mobile number</span>
              <input type="tel" value={mobile} onChange={e => setMobile(e.target.value)} placeholder="98765 43210" required autoFocus />
            </label>
            <label className="jw-modal-field">
              <span>Message</span>
              <textarea value={message} onChange={e => setMessage(e.target.value)} rows={3} />
            </label>
            <button type="submit" className="jw-modal-btn jw-modal-btn-primary" disabled={sending}>{sending ? "Sending…" : "Send enquiry"}</button>
          </form>
        )}
      </div>
    </div>
  );
}

/* ================= PRODUCT CARD ================= */
function ProductCard({ product: p }) {
  const b = priceBreakdown(p);
  const [fav, setFav] = useState(false);
  return (
    <article className="jw-card">
      <a className="jw-card-media" href={`ProductDetails.html#/product/${p.code}`}>
        <image-slot id={p.slotId} src={p.images[0]} shape="rect" fit="cover" placeholder="Drop product photo"></image-slot>
        <span className="jw-card-media-alt"><image-slot id={p.slotIdAlt} src={p.images[1] || p.images[0]} shape="rect" fit="cover" placeholder="Second view"></image-slot></span>
        <span className="jw-badges">
          {p.newArrival && <CapPill tone="on-dark" style={{ background: "var(--color-primary)" }}>New arrival</CapPill>}
          {p.bestCollection && <CapPill tone="cream">Best collection</CapPill>}
        </span>
        {!p.inStock && <span className="jw-oos">Made to order</span>}
      </a>
      <button className={"jw-fav" + (fav ? " is-on" : "")} onClick={() => setFav(!fav)} aria-label="Add to wishlist"><IconHeart size={18} /></button>
      <div className="jw-card-body">
        <a className="jw-card-name" href={`ProductDetails.html#/product/${p.code}`}>{p.name}</a>
        <div className="jw-meta">{p.code} · {p.purity} {p.metal} · {p.netWeight} g</div>
        <div className="jw-card-price">
          <strong>{inr(b.total)}</strong>
          <span className="jw-meta">at today’s {p.metal.toLowerCase()} rate</span>
        </div>
        <a className="jw-wa-link" href={`ProductDetails.html#/product/${p.code}`}>View Details<IconArrow size={17} /></a>
      </div>
    </article>
  );
}

/* ================= PRODUCT SECTION ================= */
function ProductSection({ eyebrow, title, description, products, href, tone }) {
  if (!products.length) return (
    <section className={"jw-section" + (tone ? " jw-tone-" + tone : "")}>
      <div className="jw-wrap jw-empty">
        <div className="jw-empty-title">Nothing published in {title.toLowerCase()} yet</div>
        <p>Flag items in the catalogue and they appear here automatically.</p>
      </div>
    </section>
  );
  return (
    <section className={"jw-section" + (tone ? " jw-tone-" + tone : "")}>
      <div className="jw-wrap">
        <div className="jw-section-head">
          <div>
            <span className="jw-eyebrow">{eyebrow}</span>
            <h2 className="jw-h2">{title}</h2>
            {description && <p className="jw-sub">{description}</p>}
          </div>
          <Button as="a" href={href} variant="outline" size="md" style={{ borderColor: "var(--color-semantic-success)", color: "var(--color-semantic-success)" }}>View all</Button>
        </div>
        <div className="jw-grid">{products.map(p => <ProductCard key={p.id} product={p} />)}</div>
      </div>
    </section>
  );
}

/* ================= SHOP BY CATEGORY ================= */
function CategoryTiles() {
  return (
    <section className="jw-section jw-tone-lavender">
      <div className="jw-wrap">
        <div className="jw-section-head">
          <div>
            <span className="jw-eyebrow">Shop by category</span>
            <h2 className="jw-h2">Find it by metal</h2>
          </div>
        </div>
        <div className="jw-tiles">
          {CATEGORY_TILES.map(t => (
            <a className="jw-tile" key={t.slug} href={`Category.html#/${t.slug}`}>
              <div className="jw-tile-media"><image-slot id={t.slotId} src={t.image} shape="rect" fit="cover" placeholder={`${t.name} image`}></image-slot></div>
              <div className="jw-tile-foot">
                <span>{t.name}</span>
                <span className="jw-meta">{PRODUCTS.filter(p => p.category === t.name).length} pieces</span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ================= PROMISE BAND ================= */
const PROMISES = [
  { t: "सोनेरी विश्वास 1984 पासून.", icon: "images/icon/promise-01.png" },
  { t: "शासनमान्य शुध्दतेचे हॉलमार्क दागिणे.", icon: "images/icon/promise-02.png" },
  { t: "विविध महोत्सवातून सोने, चांदी, हीरे, टेम्पल, अंटीक, दागीन्यांचे शेकडो प्रकार.", icon: "images/icon/promise-03.png" },
  { t: "आपण खरेदी केलेल्या दागीन्यांचा एक वर्षाचा फ्री इशुरन्स.", icon: "images/icon/promise-04.png" },
  { t: "मासिक सुवर्ण बचत योजना.", icon: "images/icon/promise-05.png" },
  { t: "हप्त्यांवर दागीणे खरेदीसाठी EMI.", icon: "images/icon/promise-06.png" },
  { t: "हीऱ्यांच्या दागीन्यांची विस्तृत शृंखला.", icon: "images/icon/promise-07.png" },
  { t: "एक वर्षासाठी रिपेअरिंग लेबर नाही.", icon: "images/icon/promise-08.png" },
  { t: "घरबसल्या खरेदीसाठी Online Platform.", icon: "images/icon/promise-09.png" },
  { t: "कमीत कमी व्याजदराने दागीण्यांवर तात्काळ कर्जमंजुरी.", icon: "images/icon/promise-10.png" },
  { t: "मोडीच्या दागीण्यांसाठी सर्वोत्तम भाव.", icon: "images/icon/promise-11.png" },
  { t: "वारंवार खरेदीसाठी लॉयल्टी पॉईंटसची सुविधा.", icon: "images/icon/promise-12.png" },
  { t: "महाराष्ट्र उद्योग रत्न प्राप्त ब्रँड", icon: "images/icon/promise-13.png" },
  { t: "आपले भाग्य उजळविण्यासाठी मार्गदर्शन आणि राशी रत्न विभाग", icon: "images/icon/promise-14.png" },
];
function PromiseBand() {
  const slides = PROMISES.concat(PROMISES);
  return (
    <section className="jw-promises">
      <div className="jw-wrap jw-promise-head">
        <div className="jw-promise-ribbon"><span>बेदरे बंधू सुवर्णकारच का ?</span></div>
        <p className="jw-promise-sub">(why Bedre Bandhu Suvarnakar)</p>
      </div>
      <div className="jw-promise-marquee">
        <div className="jw-promise-track">
          {slides.map((p, i) => (
            <div className="jw-promise" key={i}>
              <div className="jw-promise-icon"><img src={p.icon} alt="" /></div>
              <span>{p.t}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ================= VIDEO SECTION (reusable, DB-ready) ================= */
function StoryVideo() {
  return (
    <section className="jw-section">
      <div className="jw-wrap jw-video">
        <div className="jw-video-copy">
          <span className="jw-eyebrow">Brand film</span>
          <h2 className="jw-h2">{BRAND_FILM.title}</h2>
          <p className="jw-sub">{BRAND_FILM.subtitle}</p>
        </div>
        <div className="jw-video-media">
          <video className="jw-video-el" autoPlay muted loop playsInline poster="images/video-poster.png">
            <source src="videos/brand-film.mp4" type="video/mp4" />
            <source src="videos/brand-film.webm" type="video/webm" />
          </video>
        </div>
      </div>
    </section>
  );
}

/* ================= FOOTER ================= */
function SiteFooter() {
  const mapsLink = `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(`${SITE_CONFIG.brand}, Bajar Road, Tirthpuri, Maharashtra 431209`)}`;
  return (
    <div className="jw-footer">
      <div className="jw-wrap jw-footer-brand-row">
        <img className="jw-logo-full jw-logo-full-lg" src="images/logo-full-white.png" alt={SITE_CONFIG.brand} />
      </div>

      <div className="jw-wrap jw-footer-columns">
        <div className="jw-footer-col jw-footer-col-qr">
          <h4>Find Us on Google Maps</h4>
          <a className="jw-footer-qr" href={mapsLink} target="_blank" rel="noreferrer">
            <img src={`https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(mapsLink)}`} width="200" height="200" alt="Scan for our location on Google Maps" />
          </a>
        </div>
        <div className="jw-footer-col">
          <h4>Explore</h4>
          {CATEGORIES.map(c => <a key={c.id} href={`Category.html#/${c.slug}`}>{c.name}</a>)}
        </div>
        <div className="jw-footer-col">
          <h4>Information</h4>
          <a href="SavingScheme.html">Saving Scheme</a>
          <a href="OurJourney.html">Our journey</a>
          <a href="Terms.html">Terms &amp; Conditions</a>
        </div>
        <div className="jw-footer-col">
          <h4>Contact Us</h4>
          <p className="jw-footer-address">Bajar Road, Tirthpuri, Maharashtra 431209</p>
          <a className="jw-footer-phone" href={`tel:+${SITE_CONFIG.whatsappNumber}`}>+91 {SITE_CONFIG.whatsappNumber.slice(2)}</a>
          <div className="jw-footer-contact-icons">
            <a href={whatsappLink(null)} target="_blank" rel="noreferrer" aria-label="Chat on WhatsApp"><IconWhatsApp size={19} /></a>
            <a href="mailto:care@abstudiodesign.com" aria-label="Email us"><IconMail size={19} /></a>
          </div>
        </div>
      </div>

      <div className="jw-footer-social-panel">
        <div className="jw-wrap jw-footer-social-row">
          <span>Social</span>
          <div className="jw-footer-social-icons">
            {SITE_CONFIG.social.instagram && <a href={SITE_CONFIG.social.instagram} target="_blank" rel="noreferrer" aria-label="Instagram"><IconInstagram size={24} /></a>}
            {SITE_CONFIG.social.facebook && <a href={SITE_CONFIG.social.facebook} target="_blank" rel="noreferrer" aria-label="Facebook"><IconFacebook size={24} /></a>}
            {SITE_CONFIG.social.youtube && <a href={SITE_CONFIG.social.youtube} target="_blank" rel="noreferrer" aria-label="YouTube"><IconYouTube size={24} /></a>}
          </div>
        </div>
      </div>

      <div className="jw-footer-legal">© 2026 {SITE_CONFIG.brand}. Rates shown are indicative and revised daily.</div>
    </div>
  );
}

function WhatsAppFab() {
  return (
    <a className="jw-fab" href={whatsappLink(null)} target="_blank" rel="noreferrer" aria-label="Enquire on WhatsApp">
      <IconWhatsApp size={26} /><span>Enquire</span>
    </a>
  );
}

Object.assign(window, { IconUser, IconSearch, IconHeart, IconChevron, IconArrow, IconClose, IconWhatsApp, Header, RateBoard, BannerSlider, ProductCard, ProductSection, CategoryTiles, PromiseBand, StoryVideo, SiteFooter, WhatsAppFab });
