// Portfolio: client store cards — brand logo, result metric, tags, live link.
// Replaces the old device-frame layout: reliable (no third-party captures), scannable,
// and it shows more stores per screen. Logos are local files; brands without a logo
// file fall back to a wordmark tile in brand colours.
const NS_PF = window.AnsysDigitalDesignSystem_4543d7;

function Portfolio() {
  const { SectionHeading, Tag, Button } = NS_PF;
  const [filter, setFilter] = React.useState("All");
  const [showAll, setShowAll] = React.useState(false);
  const secRef = React.useRef(null);
  React.useEffect(() => { setShowAll(false); }, [filter]);
  React.useEffect(() => {
    const el = secRef.current; if (!el) return;
    requestAnimationFrame(() => el.querySelectorAll(".reveal").forEach((n) => n.classList.add("in")));
  }, [filter, showAll]);

  const cats = ["All", "Fashion", "Beauty", "Jewelry", "Home"];
  const projects = [
    { id: "pf1", name: "Kishaan", logo: "logo-kishaan.png", url: "https://kishaan.in/", cat: "Home", region: "India", tagline: "Makhana manufacturer & B2B private-label storefront", metric: "+41% conversion", tags: ["Shopify", "CRO"] },
    { id: "pf2", name: "KRON Nutrition", logo: "logo-kron.png", url: "https://kronfit.com/", cat: "Fashion", region: "India", tagline: "Science-backed supplements with shoppable video", metric: "0.9s LCP", tags: ["Custom dev", "Performance"] },
    { id: "pf3", name: "Waysho", logo: "logo-waysho.avif", url: "https://waysho.com/", cat: "Home", region: "India", tagline: "Everyday fashion & essentials marketplace", metric: "+34% AOV", tags: ["Shopify", "UX"] },
    { id: "pf4", name: "Ayurmveda", logo: "logo-ayurmveda.webp", url: "https://ayurmveda.in/", cat: "Beauty", region: "India", tagline: "Ayurvedic wellness & skincare brand", metric: "+29% revenue", tags: ["CRO", "SEO"] },
    { id: "pf5", name: "Dubai Aroma", logo: "logo-dubaiaroma.avif", url: "https://dubaiaroma.in/", cat: "Beauty", region: "UAE", tagline: "Luxury perfumes & attars store", metric: "+58% AOV", tags: ["Fragrance", "Plus"] },
    { id: "pf6", name: "BloomLeaf", logo: "logo-bloomleaf.webp", url: "https://bloomleaf.co.in/", cat: "Home", region: "India", tagline: "Plants & home decor storefront", metric: "+34% LTV", tags: ["Shopify", "CRO"] },
    { id: "pf7", name: "Seafolds", logo: "logo-seafolds.avif", url: "https://seafolds.com/", cat: "Fashion", region: "India", tagline: "Ready-matched jeans & T-shirt combos", metric: "+36% conversion", tags: ["Shopify", "Fashion"] },
    { id: "pf8", name: "Sahina Dupatta", logo: "logo-sahina.avif", url: "https://sahinadupatta.com/", cat: "Fashion", region: "India", tagline: "Handcrafted premium dupattas & scarves", metric: "+42% conversion", tags: ["Shopify", "Ethnic wear"] },
    { id: "pf9", name: "HindIX", logo: "logo-hindix.avif", url: "https://hindix.in/", cat: "Fashion", region: "India", tagline: "Custom printed & oversized tees, print-on-demand", metric: "+40% repeat rate", tags: ["Shopify", "POD"] },
    { id: "pf10", name: "Pikku Store", logo: "logo-pikku.avif", url: "https://pikku.shop/", cat: "Home", region: "USA", tagline: "US multi-category lifestyle store", metric: "+45% AOV", tags: ["Shopify", "Bundle builder"] },
    { id: "pf11", name: "Namaste Silver", logo: "logo-namastesilver.webp", url: "https://namastesilver.com/", cat: "Jewelry", region: "Worldwide", tagline: "Handmade 925 sterling silver jewellery", metric: "+38% conversion", tags: ["Shopify", "Multi-currency"] },
  ];
  const all = projects.filter((p) => filter === "All" || p.cat === filter);
  const shown = showAll ? all : all.slice(0, 6);

  return (
    <section id="work" ref={secRef} style={{ background: "var(--surface-subtle)" }}>
      <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="Selected work" title="Stores we've shipped" description="Real storefronts we designed, built and optimized — click any card to see it live." style={{ maxWidth: 560 }} />
          <div className="work-filters" style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
            {cats.map((c) => <button key={c} onClick={() => setFilter(c)} style={{ border: "none", background: "none", padding: 0, cursor: "pointer" }}><Tag active={filter === c}>{c}</Tag></button>)}
          </div>
        </div>

        <div className="work-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3,minmax(0,1fr))", gap: 20 }}>
          {shown.map((p, i) => (
            <a key={p.id} href={p.url} target="_blank" rel="noopener" className="reveal work-card"
              style={{ transitionDelay: ((i % 3) * 70) + "ms", display: "flex", flexDirection: "column", background: "var(--surface-card)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-sm)", overflow: "hidden", textDecoration: "none", transition: "transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out)" }}>
              <div style={{ position: "relative", height: 150, display: "grid", placeItems: "center", padding: "0 28px", background: "linear-gradient(150deg,var(--blue-50),color-mix(in oklab,var(--blue-50),#fff 58%))", borderBottom: "1px solid var(--border-subtle)" }}>
                {p.logo
                  ? <img src={p.logo} alt={p.name} loading="lazy" style={{ maxHeight: 46, maxWidth: 160, width: "auto", objectFit: "contain" }} />
                  : <span style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 26, letterSpacing: "var(--tracking-tight)", color: "var(--brand)", textAlign: "center", lineHeight: 1.1 }}>{p.name}</span>}
                <span style={{ position: "absolute", top: 12, left: 12, display: "inline-flex", alignItems: "center", gap: 6, padding: "5px 11px", borderRadius: "var(--radius-pill)", background: "var(--surface-card)", border: "1px solid var(--border-subtle)", boxShadow: "var(--shadow-xs)" }}>
                  <span style={{ width: 6, height: 6, borderRadius: 99, background: "var(--accent)" }} />
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 700, color: "var(--brand)" }}>{p.metric}</span>
                </span>
                <span className="work-arrow" style={{ position: "absolute", top: 12, right: 12, width: 30, height: 30, borderRadius: 99, display: "grid", placeItems: "center", background: "var(--brand)", color: "#fff", opacity: 0, transform: "translateY(-4px)", transition: "opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out)" }}>
                  <Ic name="arrow-up-right" size={16} />
                </span>
              </div>
              <div style={{ padding: "20px 22px 24px", display: "flex", flexDirection: "column", flex: 1 }}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, textTransform: "uppercase", letterSpacing: ".1em", color: "var(--text-muted)", fontWeight: 600, marginBottom: 9 }}>{p.cat} · {p.region}</div>
                <h3 style={{ margin: "0 0 7px", fontFamily: "var(--font-display)", fontSize: 19, fontWeight: 700, letterSpacing: "var(--tracking-tight)", color: "var(--text-primary)" }}>{p.name}</h3>
                <p style={{ margin: 0, fontSize: 14, lineHeight: 1.55, color: "var(--text-secondary)", textWrap: "pretty" }}>{p.tagline}</p>
                <div style={{ display: "flex", gap: 7, flexWrap: "wrap", marginTop: "auto", paddingTop: 18 }}>
                  {p.tags.map((t) => <span key={t} style={{ fontSize: 11.5, fontWeight: 500, color: "var(--text-secondary)", background: "var(--surface-subtle)", border: "1px solid var(--border-subtle)", padding: "4px 10px", borderRadius: "var(--radius-pill)" }}>{t}</span>)}
                </div>
              </div>
            </a>
          ))}
        </div>

        {all.length > 6 && (
          <div className="reveal" style={{ display: "flex", justifyContent: "center", marginTop: "clamp(30px,4vw,44px)" }}>
            <Button variant="secondary" size="lg" onClick={() => setShowAll((v) => !v)} iconRight={<Ic name={showAll ? "chevron-up" : "chevron-down"} size={18} />}>
              {showAll ? "Show less" : "View all " + all.length + " stores"}
            </Button>
          </div>
        )}

        <p className="reveal" style={{ margin: "clamp(28px,4vw,40px) auto 0", maxWidth: 660, textAlign: "center", fontSize: 13, lineHeight: 1.6, color: "var(--text-muted)", textWrap: "pretty" }}>
          Figures shown are from specific client projects and reflect results measured on those stores. Outcomes vary by product, pricing, market and marketing spend, and are not a guarantee of future performance.
        </p>
      </div>
    </section>
  );
}
Object.assign(window, { Portfolio });