// Blog / insights — real client case-study articles with an in-page reader.
const NS_BLOG = window.AnsysDigitalDesignSystem_4543d7;

// Live auto-scrolling storefront preview for a blog card (lazy-loaded on view).
// Falls back to the poster image if a site blocks embedding.
function LiveThumb({ url, name, poster }) {
  const [live, setLive] = React.useState(false);
  const [scale, setScale] = React.useState(0.3);
  const rootRef = React.useRef(null), boxRef = React.useRef(null);
  React.useEffect(() => {
    if (!rootRef.current || live) return;
    const io = new IntersectionObserver((es) => { if (es.some((e) => e.isIntersecting)) { setLive(true); io.disconnect(); } }, { rootMargin: "300px" });
    io.observe(rootRef.current);
    return () => io.disconnect();
  }, [live]);
  React.useEffect(() => {
    const measure = () => { if (boxRef.current) { const n = boxRef.current.clientWidth / 1280; setScale((p) => Math.abs(n - p) < 0.002 ? p : n); } };
    measure(); window.addEventListener("resize", measure); return () => window.removeEventListener("resize", measure);
  }, [live]);
  const render = 2600, shift = -(render - 800);
  return (
    <div ref={rootRef} style={{ position: "absolute", inset: 0 }}>
      {poster && <img src={poster} alt={name + " Shopify store built by Ansys Digital"} loading="lazy" onError={(e) => { e.currentTarget.style.display = "none"; }} style={{ position: "absolute", inset: 0, zIndex: 1, width: "100%", height: "100%", objectFit: "cover" }} />}
      <div ref={boxRef} style={{ position: "absolute", inset: 0, zIndex: 2, overflow: "hidden", pointerEvents: "none" }}>
        {live && (
          <div style={{ position: "absolute", top: 0, left: 0, width: 1280, transformOrigin: "top left", transform: "scale(" + scale + ")" }}>
            <div className="ls-pan" style={{ "--ls-shift": shift + "px", animation: "lsScroll 24s ease-in-out infinite" }}>
              <iframe src={url} title={name} loading="lazy" scrolling="no" sandbox="allow-scripts allow-same-origin allow-popups allow-forms" style={{ display: "block", width: 1280, height: render, border: 0 }} />
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

const BLOG_POSTS = [
  {
    id: "sahina",
    cat: "Ethnic wear",
    title: "Sahina Dupatta: making handcrafted ethnic wear feel premium online",
    read: "5 min read",
    date: "Jul 14, 2026",
    store: "Sahina Dupatta",
    url: "https://sahinadupatta.com/",
    img: "https://sahinadupatta.com/cdn/shop/files/9754a677-2e2c-463f-945b-68a6dba09044.png?crop=center&height=724&v=1783613031&width=1600",
    body: [
      ["p", "Sahina Dupatta sells premium handcrafted dupattas and scarves — Banarasi, Pashmina, Bandhani, Organza, Kalamkari and bridal pieces woven by skilled Indian artisans. The product is beautiful in person; the challenge was making that craftsmanship feel just as premium and trustworthy through a screen."],
      ["h", "Letting the craft breathe"],
      ["p", "We built a calm, editorial storefront where each dupatta gets room to shine — rich close-up imagery of the weave, zari and embroidery, organised into the collections women actually shop by: plain, designer, bridal, silk, chiffon, organza and more. Shoppable videos let customers see the fabric move before they buy."],
      ["h", "Turning browsers into buyers"],
      ["p", "Clear sale pricing, \"frequently bought together\" bundles, an easy 3-day return window, free pan-India shipping and cash on delivery are surfaced exactly where hesitation lives. A WhatsApp line and honest customer reviews close the trust gap for a first-time festive or bridal purchase."],
      ["h", "The takeaway"],
      ["p", "For a handcrafted ethnic brand, design has to carry the texture. Sahina's storefront makes a traditional dupatta feel like the premium, giftable piece it truly is — and makes buying it effortless."],
    ],
  },
  {
    id: "seafolds",
    cat: "Fashion",
    title: "Seafolds: ready-matched jeans & T-shirt combos, built to sell fast",
    read: "4 min read",
    date: "Jul 02, 2026",
    store: "Seafolds",
    url: "https://seafolds.com/",
    img: "https://seafolds.com/cdn/shop/files/preview_images/475f260c7beb42348c37b5d0152c970b.thumbnail.0000000000_1600x.jpg?v=1768639478",
    body: [
      ["p", "Seafolds solves a small everyday problem with a smart idea: ready-matched jeans and T-shirt combos for men, women and kids, at better value than buying the pieces separately. The catalogue is deep — baggy, wide-leg, cargo and loose-fit denim, oversized tees, shirts and hoodies — so the store had to make choosing feel effortless."],
      ["h", "Designing for the impulse buy"],
      ["p", "Everyday fashion is thumb-driven, so we built a fast, mobile-first storefront with bold category tiles, big product imagery, quick add-to-cart, and clear size selection right on the collection grid. Best Sellers are split by T-Shirts, Shirts and Jeans so shoppers find their fit in seconds."],
      ["h", "Value made obvious"],
      ["p", "The whole pitch is \"matched and affordable,\" so we made value loud: combo pricing, first-order discount codes, free delivery cues and secure payment badges placed exactly where doubt appears. Real customer testimonials reinforce comfort, fit and on-time delivery."],
      ["h", "The takeaway"],
      ["p", "For a high-volume everyday brand, clarity beats cleverness. Seafolds' storefront gets out of the way so the value — a complete, ready-to-wear outfit — sells itself."],
    ],
  },
  {
    id: "kron",
    cat: "Nutrition",
    title: "How we built KRON Nutrition into a Shopify store India actually trusts",
    read: "6 min read",
    date: "Jun 12, 2026",
    store: "KRON Nutrition",
    url: "https://kronfit.com/",
    img: "https://kronfit.com/cdn/shop/files/PC_Banner_1920X900_3.jpg?v=1763454081&width=900",
    body: [
      ["p", "When Sanjeev Kaliwala came to us, he already had the hard part figured out. As an INBA Mr. Olympia winner and a natural bodybuilder, he had spent years earning the trust of athletes the honest way. What he needed was a Shopify store that carried that same credibility the moment someone landed on it — because in the Indian supplement market, trust is everything and fakes are everywhere."],
      ["h", "The real problem: proving you're genuine"],
      ["p", "Shoppers buying whey protein or creatine online in India have been burned before. So we didn't lead with discounts — we led with proof. Lab-tested claims, ISO and HACCP certification badges, and a clean \"KRON vs other brands\" comparison were built into the storefront so a first-time visitor could feel the difference within seconds, not paragraphs."],
      ["h", "What we built"],
      ["p", "We designed a fast, mobile-first storefront around the hero range — Premium Isolate + Concentrate Whey Protein, Pre-Workout, and Creatine Monohydrate — with shoppable video clips, quantity-break pricing, and a founder story section that puts Sanjeev front and centre. Every product page loads quickly, reads clearly, and pushes gently toward a confident \"Add to cart.\""],
      ["h", "The outcome"],
      ["p", "The result is a proudly Indian supplement brand that looks the part next to any global name — clean, quick, and believable. If you're launching a nutrition or wellness brand, the lesson from KRON is simple: build trust into the design itself, and let the product do the rest."],
    ],
  },
  {
    id: "kishaan",
    cat: "Food & FMCG",
    title: "From Bihar's farms to a global B2B storefront: the Kishaan makhana build",
    read: "5 min read",
    date: "May 28, 2026",
    store: "Kishaan",
    url: "https://kishaan.in/",
    img: "https://kishaan.in/cdn/shop/files/Untitled_design_-_2026-01-10T164353.962.jpg?v=1768043643&width=900",
    body: [
      ["p", "Kishaan grows and roasts some of the best makhana (fox nuts) in India, straight from the heartland of Bihar — no middlemen, no mixing. But great product alone doesn't sell itself online. They needed one Shopify store that could speak to two very different buyers at once: the everyday snacker and the serious B2B importer."],
      ["h", "Two audiences, one storefront"],
      ["p", "We split the experience cleanly. The retail side shows off the flavoured range — Cream & Onion, Peri-Peri, Pudina, Tangy Tomato and more — in bright, appetising packs with easy 60g and 100g choices. The B2B and private-label side speaks a different language: bulk supply, custom packaging, export reliability, and quality assurance for wholesalers and brands."],
      ["h", "Built for snacking and for scale"],
      ["p", "Fast product pages, clear pricing, quick-commerce availability, and a genuinely useful blog on sourcing and private-label manufacturing help Kishaan rank for the terms buyers actually search — \"makhana manufacturer in Bihar,\" \"bulk fox nuts,\" \"private label makhana.\""],
      ["h", "The takeaway"],
      ["p", "A food brand can serve retail and B2B from the same Shopify store — as long as the journeys are designed on purpose, not stacked on top of each other. Kishaan proves it."],
    ],
  },
  {
    id: "waysho",
    cat: "Fashion",
    title: "Waysho: a trend-led fashion store built to convert first-time shoppers",
    read: "5 min read",
    date: "May 10, 2026",
    store: "Waysho",
    url: "https://waysho.com/",
    img: "https://waysho.com/cdn/shop/files/wayshobaggyjeans.jpg?v=1778360783&width=900",
    body: [
      ["p", "Waysho sells the styles young India is actually searching for — baggy jeans, oversized tees, hoodies, shirts and tracksuits at prices that make the \"add to cart\" decision easy. With over 108,000 happy customers, the brand had the momentum. Our job was to turn browsers into buyers, fast."],
      ["h", "Designing for the scroll"],
      ["p", "Fashion is impulse-driven, so we built a storefront that moves at the speed of a phone thumb: bold category tiles, big product imagery, quick-add buttons, and clear trust cues — free shipping, easy 5-day returns, secure prepaid payments — repeated exactly where doubt creeps in."],
      ["h", "Merchandising that sells"],
      ["p", "We organised the catalogue the way customers shop — by fit and occasion (baggy, wide-leg, winter wear, tracksuits) — and surfaced real verified reviews next to the products they praise. Every collection page is engineered to keep momentum toward checkout."],
      ["h", "The takeaway"],
      ["p", "For a high-volume fashion brand, speed and clarity beat clever. Waysho's storefront gets out of the way so the clothes — and the prices — can do the talking."],
    ],
  },
  {
    id: "dubaiaroma",
    cat: "Fragrance",
    title: "Bottling luxury online: the Dubai Aroma attar & perfume storefront",
    read: "6 min read",
    date: "Apr 22, 2026",
    store: "Dubai Aroma",
    url: "https://dubaiaroma.in/",
    img: "https://dubaiaroma.in/cdn/shop/files/ChatGPT_Image_Feb_17_2026_08_35_36_AM_d1d6d6e3-fe2b-4b5e-b5c0-f3f788d3bfad.webp?v=1771379107&width=900",
    body: [
      ["p", "Selling fragrance online is hard — customers can't smell the product. Dubai Aroma brings authentic Arabic attars, luxury perfumes, bakhoor and aroma oils to India, and needed a storefront that could make a scent feel premium through the screen alone."],
      ["h", "Making a scent feel expensive"],
      ["p", "We leaned into rich, editorial product imagery and a calm, confident layout that lets each bottle breathe. Collections are split the way fragrance lovers think — attars, perfume sprays, bakhoor, and burners — with clear notes and long-lasting claims to guide the choice."],
      ["h", "Removing the risk"],
      ["p", "To offset the \"I can't smell it\" hesitation, we made the safety nets loud: cash on delivery, free shipping, easy returns, and a bundle builder that rewards trying more than one scent. Alcohol and alcohol-free options are clearly labelled for every kind of buyer."],
      ["h", "The takeaway"],
      ["p", "In fragrance, design has to do the smelling for you. A premium, trustworthy storefront is what turns curiosity into a first order — and a first order into a signature scent."],
    ],
  },
  {
    id: "bloomleaf",
    cat: "Wellness",
    title: "BloomLeaf: turning herbal green tea into an everyday wellness habit",
    read: "4 min read",
    date: "Apr 05, 2026",
    store: "BloomLeaf",
    url: "https://bloomleaf.co.in/",
    img: "https://bloomleaf.co.in/cdn/shop/files/Gemini_Generated_Image_p2twh6p2twh6p2tw.png?v=1775182242&width=900",
    body: [
      ["p", "BloomLeaf makes premium green tea blended with familiar Indian herbs — mint, lemon-ginger, jeera and citrus — packed into convenient tea bags. The product is genuinely good for daily digestion and wellness. The challenge was making a healthy habit feel effortless and desirable, not preachy."],
      ["h", "Selling a feeling, not just a flavour"],
      ["p", "We built product pages around outcomes people actually care about — less bloating, lighter digestion, more energy after meals — backed by honest ingredient breakdowns. Each blend gets its own personality so choosing feels like picking a mood, not reading a label."],
      ["h", "Built for repeat purchase"],
      ["p", "Green tea lives or dies on reorders, so we designed for it: clean subscriptions-ready product pages, shoppable videos, real customer reviews, and a wellness blog that answers the questions new tea drinkers ask before they buy."],
      ["h", "The takeaway"],
      ["p", "For a consumable wellness brand, the storefront's real job is the second order. BloomLeaf's design makes the first cup easy — and the next one obvious."],
    ],
  },
  {
    id: "ayurmveda",
    cat: "Ayurveda",
    title: "Ayurmveda: building trust for an Ayurvedic wellness brand online",
    read: "5 min read",
    date: "Mar 18, 2026",
    store: "Ayurmveda",
    url: "https://ayurmveda.in/",
    img: "https://ayurmveda.in/cdn/shop/files/file_00000000b19c7208a739e6ed72e81ed3.png?v=1777305822&width=900",
    body: [
      ["p", "Ayurmveda offers traditional Ayurvedic herbal solutions for everyday concerns — from digestive health to energy and stamina — made with natural ingredients. In a category crowded with big claims, the brand needed a storefront that felt genuinely safe, calm, and credible."],
      ["h", "Trust before the transaction"],
      ["p", "We designed a reassuring, uncluttered experience: clear ingredient stories, honest benefit explanations, real customer reviews, and a \"free advice from a doctor\" touchpoint that turns a health worry into a helpful conversation instead of a hard sell."],
      ["h", "Removing friction"],
      ["p", "Free shipping across India, cash on delivery, a 5-day return window, and WhatsApp support are surfaced right where hesitation lives. For a wellness buyer, those small assurances are often the difference between bouncing and buying."],
      ["h", "The takeaway"],
      ["p", "Ayurvedic and wellness brands don't win on volume of claims — they win on calm credibility. Ayurmveda's storefront is designed to earn trust first, and the sale follows."],
    ],
  },
];

function Blog() {
  const { SectionHeading, Button } = NS_BLOG;
  const [showAll, setShowAll] = React.useState(false);
  const shown = showAll ? BLOG_POSTS : BLOG_POSTS.slice(0, 6);
  const secRef = React.useRef(null);
  React.useEffect(() => {
    const el = secRef.current; if (!el) return;
    requestAnimationFrame(() => el.querySelectorAll(".reveal").forEach((n) => n.classList.add("in")));
  }, [showAll]);
  return (
    <section id="blog" ref={secRef} style={{ background: "var(--surface-page)" }}>
      <div style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "var(--section-y) var(--gutter)" }}>
        <div className="reveal" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, flexWrap: "wrap", marginBottom: "clamp(2rem,4vw,3rem)" }}>
          <SectionHeading eyebrow="Client stories" title="Real Shopify stores we've built" description="A closer look at how we design, build, and grow stores for ambitious brands — in their own words and numbers." style={{ maxWidth: 560 }} />
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 22 }} className="blog-grid">
          {shown.map((p, i) => (
            <div key={p.id} role="button" tabIndex={0} className="reveal blog-card" data-post={p.id} style={{ transitionDelay: (i * 60) + "ms", textAlign: "left", cursor: "pointer", font: "inherit", padding: 0, background: "var(--surface-card)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-lg)", overflow: "hidden", boxShadow: "var(--shadow-sm)", display: "flex", flexDirection: "column" }}>
              <div style={{ position: "relative", aspectRatio: "16/10", background: "var(--grad-brand)", overflow: "hidden" }}>
                <LiveThumb url={p.url} name={p.store} poster={p.img} />
                <span style={{ position: "absolute", left: 12, top: 12, padding: "4px 10px", borderRadius: "var(--radius-pill)", background: "var(--glass-bg,rgba(255,255,255,.85))", backdropFilter: "blur(6px)", fontFamily: "var(--font-mono)", fontSize: 10, fontWeight: 600, letterSpacing: ".06em", textTransform: "uppercase", color: "var(--brand)" }}>{p.store}</span>
              </div>
              <div style={{ padding: "20px 22px 24px", display: "flex", flexDirection: "column", flex: 1 }}>
                <div style={{ display: "flex", gap: 10, alignItems: "center", marginBottom: 12, fontFamily: "var(--font-mono)", fontSize: 11, textTransform: "uppercase", letterSpacing: ".08em" }}>
                  <span style={{ color: "var(--brand)", fontWeight: 600 }}>{p.cat}</span>
                  <span style={{ color: "var(--text-muted)" }}>· {p.read}</span>
                </div>
                <h3 style={{ margin: "0 0 auto", fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 700, lineHeight: 1.3, color: "var(--text-primary)", textWrap: "pretty" }}>{p.title}</h3>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 6, marginTop: 16, color: "var(--brand)", fontWeight: 600, fontSize: 14 }}>Read case study <Ic name="arrow-right" size={15} /></span>
              </div>
            </div>
          ))}
        </div>
        {BLOG_POSTS.length > 6 && (
          <div className="reveal" style={{ display: "flex", justifyContent: "center", marginTop: "clamp(32px,4vw,48px)" }}>
            <Button variant="secondary" size="lg" onClick={() => setShowAll((v) => !v)} iconRight={<Ic name={showAll ? "chevron-up" : "chevron-down"} size={18} />}>
              {showAll ? "Show less" : "View all " + BLOG_POSTS.length + " stories"}
            </Button>
          </div>
        )}
      </div>
      <BlogReader />
    </section>
  );
}

function BlogReader() {
  const [open, setOpen] = React.useState(null);
  React.useEffect(() => {
    const onClick = (e) => {
      const card = e.target.closest("[data-post]");
      if (card) { const p = BLOG_POSTS.find((x) => x.id === card.getAttribute("data-post")); if (p) setOpen(p); }
    };
    document.addEventListener("click", onClick);
    return () => document.removeEventListener("click", onClick);
  }, []);
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") setOpen(null); };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [open]);
  if (!open) return null;
  return (
    <div onClick={(e) => { if (e.target === e.currentTarget) setOpen(null); }} style={{ position: "fixed", inset: 0, zIndex: 1000, background: "rgba(10,13,22,.55)", backdropFilter: "blur(4px)", display: "flex", justifyContent: "center", alignItems: "flex-start", padding: "clamp(16px,5vh,64px) 16px", overflowY: "auto" }}>
      <article style={{ position: "relative", width: "min(720px,100%)", background: "var(--surface-card)", borderRadius: "var(--radius-xl)", overflow: "hidden", boxShadow: "var(--shadow-xl)" }}>
        <button onClick={() => setOpen(null)} aria-label="Close" style={{ position: "absolute", top: 14, right: 14, zIndex: 2, width: 38, height: 38, borderRadius: "50%", border: "none", cursor: "pointer", background: "rgba(255,255,255,.9)", backdropFilter: "blur(6px)", display: "grid", placeItems: "center", color: "var(--text-primary)", boxShadow: "var(--shadow-sm)" }}><Ic name="x" size={18} /></button>
        <div style={{ position: "relative", aspectRatio: "16/9", background: "var(--grad-brand)", overflow: "hidden" }}>
          <img src={open.img} alt={open.store + " Shopify store"} onError={(e) => { e.currentTarget.style.display = "none"; }} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
        </div>
        <div style={{ padding: "clamp(24px,4vw,44px)" }}>
          <div style={{ display: "flex", gap: 10, alignItems: "center", marginBottom: 16, fontFamily: "var(--font-mono)", fontSize: 11, textTransform: "uppercase", letterSpacing: ".08em" }}>
            <span style={{ color: "var(--brand)", fontWeight: 600 }}>{open.cat}</span>
            <span style={{ color: "var(--text-muted)" }}>· {open.read} · {open.date}</span>
          </div>
          <h2 style={{ margin: "0 0 24px", fontFamily: "var(--font-display)", fontSize: "clamp(24px,3.4vw,32px)", fontWeight: 800, lineHeight: 1.2, letterSpacing: "var(--tracking-tight)", color: "var(--text-primary)", textWrap: "balance" }}>{open.title}</h2>
          {open.body.map((b, i) => b[0] === "h"
            ? <h3 key={i} style={{ margin: "26px 0 10px", fontFamily: "var(--font-display)", fontSize: 19, fontWeight: 700, color: "var(--text-primary)" }}>{b[1]}</h3>
            : <p key={i} style={{ margin: "0 0 16px", fontSize: 16, lineHeight: 1.7, color: "var(--text-secondary)", textWrap: "pretty" }}>{b[1]}</p>)}
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 28, paddingTop: 24, borderTop: "1px solid var(--border-subtle)" }}>
            <a href={open.url} target="_blank" rel="noopener" style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "12px 22px", borderRadius: "var(--radius-pill)", background: "var(--brand)", color: "#fff", fontWeight: 600, fontSize: 14, textDecoration: "none" }}>Visit the live store <Ic name="external-link" size={15} /></a>
            <button onClick={() => setOpen(null)} style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "12px 22px", borderRadius: "var(--radius-pill)", background: "transparent", border: "1px solid var(--border-default)", color: "var(--text-primary)", fontWeight: 600, fontSize: 14, cursor: "pointer" }}>Close</button>
          </div>
        </div>
      </article>
    </div>
  );
}
Object.assign(window, { Blog });