// Capabilities: advanced Shopify features offered, grouped in tabs.
const NS_CAP = window.AnsysDigitalDesignSystem_4543d7;

const CAP_GROUPS = [
  {
    key: "sections", label: "Advanced sections", count: "30+",
    blurb: "Powerful sections to design your store exactly the way you envision it.",
    items: [
      { icon: "sparkles", title: "Animated Richtext", desc: "Smooth fade-in text animations that captivate visitors as they scroll.", badge: "NEW" },
      { icon: "layout-grid", title: "Matrix Grid", desc: "Showcase visuals at the centre with content blocks on either side.", badge: "NEW" },
      { icon: "chevrons-down-up", title: "Advanced Accordion", desc: "Each accordion opens with a matching image on the side.", badge: "NEW" },
      { icon: "list-ordered", title: "Numbered Slider", desc: "Navigate your story with numbered vertical tabs for a clean, modern feel.", badge: "NEW" },
      { icon: "package-plus", title: "Bundle Builder", desc: "Let customers build their perfect bundle and see instant savings — no reloads." },
      { icon: "images", title: "Hero Slideshow", desc: "Striking hero slides that capture attention at first glance." },
      { icon: "text-cursor", title: "Marquee Scroller", desc: "Infinite scrolling text or logos to add motion between sections." },
      { icon: "play-circle", title: "Shoppable Videos", desc: "Turn UGC into sales — make every video clip shoppable." },
      { icon: "gallery-vertical-end", title: "Sticky Media", desc: "Showcase stunning images while highlighting key product messages." },
      { icon: "move-diagonal", title: "Parallax Media", desc: "Display calls to action beautifully without disrupting page flow." },
      { icon: "columns-2", title: "Image Compare", desc: "Before-and-after sliders — ideal for beauty and results-led stores." },
      { icon: "table-2", title: "Pricing Plans", desc: "Compare features across products and add to cart from the table." },
      { icon: "instagram", title: "Instagram Gallery", desc: "Show your best Instagram posts in an engaging infinite gallery." },
      { icon: "align-justify", title: "Table Compare", desc: "Compare your product's advantages against competitors side by side." },
      { icon: "mail-plus", title: "Contact Form Builder", desc: "Advanced contact forms with custom fields and smart validation." },
      { icon: "timer", title: "Animated Countdown", desc: "Drive urgency for BFCM, limited offers, and event-based promotions." },
      { icon: "bell", title: "Newsletter Popup", desc: "Capture subscribers with controlled timing and frequency." },
      { icon: "quote", title: "Testimonials Slider", desc: "A sleek, animated review slider that builds social proof instantly." },
      { icon: "book-image", title: "Lookbook", desc: "Bring products to life with lifestyle visuals for fashion and beauty." },
      { icon: "layers", title: "+10 more sections", desc: "Additional flexible sections for richer homepage and editorial pages.", more: true },
    ],
  },
  {
    key: "product", label: "Product page", count: "15+",
    blurb: "Sell more with advanced upsells, cross-sells, and conversion tools.",
    items: [
      { icon: "shuffle", title: "Product switcher", desc: "Show similar products and let customers switch without leaving the page.", badge: "NEW" },
      { icon: "palette", title: "Color swatches", desc: "Beautiful colour options across product pages and product cards." },
      { icon: "arrow-down-to-line", title: "Sticky add to cart", desc: "Keep the Add to Cart button visible on long scrolling pages." },
      { icon: "layers-3", title: "Quantity breaks", desc: "Smart bulk pricing and volume discounts — no extra apps needed." },
      { icon: "bar-chart-3", title: "Inventory / stock bar", desc: "Create urgency by showing how many items are left in stock." },
      { icon: "list-checks", title: "Upsell checkboxes", desc: "Let shoppers add complementary products with a single click." },
      { icon: "git-merge", title: "Cross-sells", desc: "Bundle items together and let customers buy them all at once." },
      { icon: "pen-line", title: "Personalization fields", desc: "Custom names, notes, or uploads for made-to-order products." },
      { icon: "ruler", title: "Size chart", desc: "A clear, interactive size-chart modal with per-category tables." },
      { icon: "shield-check", title: "Trust icons", desc: "Trust badges right under Add to Cart to build instant confidence." },
      { icon: "truck", title: "Delivery dates", desc: "Show estimated delivery times and skip weekends to boost confidence." },
      { icon: "plus-circle", title: "+3 more features", desc: "Extra product-page tools for merchandising, confidence, and conversion.", more: true },
    ],
  },
  {
    key: "cart", label: "Cart", count: "10+",
    blurb: "Improve conversion rates with powerful, high-converting carts.",
    items: [
      { icon: "megaphone", title: "Cart announcement", desc: "Highlight promotions in the cart to nudge customers toward checkout." },
      { icon: "alert-triangle", title: "Low-stock info", desc: "Add urgency with low-stock messages reminding customers items may sell out." },
      { icon: "repeat", title: "Variant switcher", desc: "Change product variants directly in the cart — no remove and re-add." },
      { icon: "calendar-sync", title: "Upgrade to subscription", desc: "Let customers switch from one-time purchases to subscriptions in the cart." },
      { icon: "target", title: "3-tier cart goal", desc: "Dynamic goals that unlock rewards as carts reach higher values." },
      { icon: "shopping-bag", title: "Cart upsells", desc: "Show related products in the cart so customers can add more before checkout." },
      { icon: "gift", title: "Gift upsell", desc: "Offer gift wrapping or small add-ons to lift average order value." },
      { icon: "ticket-percent", title: "Discount form", desc: "Apply discount codes in the cart drawer — no need to wait until checkout." },
      { icon: "plus-circle", title: "+2 more features", desc: "Additional cart options designed to help shoppers complete their purchase.", more: true },
    ],
  },
];

function Capabilities() {
  const { SectionHeading, Eyebrow } = NS_CAP;
  const [tab, setTab] = React.useState(0);
  const [showAll, setShowAll] = React.useState(false);
  const [isMobile, setIsMobile] = React.useState(false);
  React.useEffect(() => {
    const mq = window.matchMedia("(max-width:640px)");
    const on = () => setIsMobile(mq.matches);
    on(); mq.addEventListener("change", on);
    return () => mq.removeEventListener("change", on);
  }, []);
  const g = CAP_GROUPS[tab];
  const items = (isMobile || showAll) ? g.items : g.items.slice(0, 9);
  const stackRef = React.useRef(null);
  React.useEffect(() => {
    if (!isMobile || !stackRef.current) return;
    const cards = [...stackRef.current.children];
    const tops = cards.map((c) => c.getBoundingClientRect().top + window.scrollY);
    cards.forEach((c) => { c.style.transformOrigin = "top center"; c.style.transition = "transform .15s linear"; c.style.willChange = "transform"; });
    let raf = 0;
    const onScroll = () => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        cards.forEach((c, i) => {
          const stickyTop = 80 + i * 14;
          const pinnedBy = (window.scrollY + stickyTop) - tops[i];
          const p = pinnedBy > 0 ? Math.min(1, pinnedBy / 320) : 0;
          c.style.transform = "scale(" + (1 - p * 0.08) + ") rotate(" + (p * (i % 2 ? 1.8 : -1.8)) + "deg)";
        });
      });
    };
    const remeasure = () => { cards.forEach((c) => { c.style.transform = "none"; }); cards.forEach((c, i) => { tops[i] = c.getBoundingClientRect().top + window.scrollY; }); onScroll(); };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", remeasure);
    return () => { cancelAnimationFrame(raf); window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", remeasure); cards.forEach((c) => { c.style.transform = ""; c.style.transition = ""; }); };
  }, [isMobile, tab, showAll]);
  return (
    <section id="capabilities" style={{ background: "var(--surface-subtle)" }}>
      <div style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "var(--section-y) var(--gutter)" }}>
        <div className="reveal" style={{ marginBottom: "clamp(2rem,4vw,3rem)" }}>
          <SectionHeading eyebrow="Capabilities" title="55+ advanced Shopify features, ready to go" description="Every feature below is already in our toolkit. Send us a reference site or the exact design you want — we customize and deliver it on your store." align="center" />
        </div>
        <div className="reveal" style={{ display: "flex", flexWrap: "wrap", justifyContent: "center", gap: 12, marginBottom: "clamp(2rem,4vw,2.75rem)" }}>
          {CAP_GROUPS.map((grp, i) => (
            <button key={grp.key} onClick={() => { setTab(i); setShowAll(false); }} style={{ display: "inline-flex", alignItems: "center", gap: 9, padding: "11px 20px", borderRadius: "var(--radius-pill)", cursor: "pointer", font: "inherit", fontWeight: 600, fontSize: 14.5, border: "1px solid " + (tab === i ? "transparent" : "var(--border-default)"), background: tab === i ? "var(--brand)" : "var(--surface-card)", color: tab === i ? "#fff" : "var(--text-secondary)", transition: "all var(--dur-base) var(--ease-out)" }}>
              {grp.label}
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 700, padding: "2px 7px", borderRadius: "var(--radius-pill)", background: tab === i ? "rgba(255,255,255,.2)" : "var(--blue-50)", color: tab === i ? "#fff" : "var(--brand)" }}>{grp.count}</span>
            </button>
          ))}
        </div>
        <p className="reveal" style={{ textAlign: "center", margin: "0 auto clamp(1.75rem,3vw,2.5rem)", maxWidth: 620, fontSize: 15.5, color: "var(--text-secondary)" }}>{g.blurb}</p>
        <div ref={stackRef} key={g.key} style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 16 }} className={"cap-grid" + (isMobile ? " cap-stack" : "")}>
          {items.map((f, i) => (
            <div key={f.title} className="cap-tile" style={{ "--ci": i, animation: "capFade .45s both var(--ease-out)", animationDelay: (i * 35) + "ms", display: "flex", gap: 14, padding: "20px 20px", borderRadius: "var(--radius-lg)", background: f.more ? "var(--blue-50)" : "var(--surface-card)", border: "1px solid " + (f.more ? "var(--blue-200)" : "var(--border-subtle)"), boxShadow: f.more ? "none" : "var(--shadow-sm)", transition: "transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out)" }}>
              <span style={{ flexShrink: 0, width: 40, height: 40, borderRadius: "var(--radius-md)", background: f.more ? "var(--brand)" : "var(--blue-50)", color: f.more ? "#fff" : "var(--brand)", display: "grid", placeItems: "center" }}><Ic name={f.icon} size={20} /></span>
              <div>
                <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 5 }}>
                  <h3 style={{ margin: 0, fontFamily: "var(--font-display)", fontSize: 15.5, fontWeight: 700, color: "var(--text-primary)" }}>{f.title}</h3>
                  {f.badge ? <span style={{ fontFamily: "var(--font-mono)", fontSize: 9, fontWeight: 700, letterSpacing: ".06em", padding: "2px 6px", borderRadius: "var(--radius-pill)", background: "var(--accent)", color: "var(--neutral-950)" }}>{f.badge}</span> : null}
                </div>
                <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.5, color: "var(--text-secondary)", textWrap: "pretty" }}>{f.desc}</p>
              </div>
            </div>
          ))}
        </div>
        {!isMobile && g.items.length > 9 && (
          <div className="reveal" style={{ display: "flex", justifyContent: "center", marginTop: 28 }}>
            <button onClick={() => setShowAll((v) => !v)} style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "12px 22px", background: "var(--surface-card)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-pill)", cursor: "pointer", fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 14.5, color: "var(--brand)", boxShadow: "var(--shadow-sm)" }}>
              {showAll ? "Show less" : "View all " + g.items.length + " features"}
              <span style={{ display: "inline-flex", transform: showAll ? "rotate(180deg)" : "none", transition: "transform var(--dur-base) var(--ease-out)" }}><Ic name="chevron-down" size={17} /></span>
            </button>
          </div>
        )}
      </div>
    </section>
  );
}
Object.assign(window, { Capabilities });
