// Services: logo strip + service grid.
const NS_SVC = window.AnsysDigitalDesignSystem_4543d7;

if (!document.getElementById("svc-marquee-kf")) {
  const st = document.createElement("style");
  st.id = "svc-marquee-kf";
  st.textContent =
    "@keyframes svcMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}" +
    "@keyframes svcMarqueeRev{from{transform:translateX(-50%)}to{transform:translateX(0)}}" +
    ".svc-mq{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}" +
    ".svc-mq:hover .svc-mq-track{animation-play-state:paused}" +
    ".svc-mq-chip:hover img{opacity:1!important;filter:grayscale(0)!important}" +
    "@media (prefers-reduced-motion:reduce){.svc-mq-track{animation:none!important}}";
  document.head.appendChild(st);
}

function MarqueeRow({ logos, reverse, dur }) {
  const loop = logos.concat(logos);
  return (
    <div className="svc-mq" style={{ width: "100%", overflow: "hidden" }}>
      <div className="svc-mq-track" style={{ display: "flex", width: "max-content", gap: 16, animation: (reverse ? "svcMarqueeRev " : "svcMarquee ") + (dur || 32) + "s linear infinite" }}>
        {loop.map((l, i) => (
          <a key={i} href={l.url} target="_blank" rel="noopener" title={"Visit " + l.name} className="svc-mq-chip" style={{ flex: "none", display: "grid", placeItems: "center", height: 68, minWidth: 156, padding: "0 26px", borderRadius: "var(--radius-lg)", background: "var(--surface-card)", border: "1px solid var(--border-subtle)", boxShadow: "var(--shadow-sm)", cursor: "pointer", textDecoration: "none" }}>
            {l.src
              ? <img src={l.src} alt={l.name} style={{ maxHeight: 34, maxWidth: 128, width: "auto", objectFit: "contain", opacity: 0.82, filter: "grayscale(1)", transition: "opacity var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out)" }} />
              : <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 18, letterSpacing: "var(--tracking-tight)", color: "var(--neutral-400)" }}>{l.name}</span>}
          </a>
        ))}
      </div>
    </div>
  );
}

// Two rows drifting in opposite directions — more presence, keeps the eye moving.
function LogoMarquee({ logos }) {
  const half = Math.ceil(logos.length / 2);
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 16, width: "100%" }}>
      <MarqueeRow logos={logos.slice(0, half)} dur={34} />
      <MarqueeRow logos={logos.slice(half)} dur={38} reverse />
    </div>
  );
}

function Services() {
  const { SectionHeading, Card, LogoWall, Eyebrow } = NS_SVC;
  const services = [
    { icon: "layout-template", title: "Shopify Store Design", desc: "Premium, conversion-focused storefront design tailored to your brand and products." },
    { icon: "code-2", title: "Shopify Development", desc: "Custom theme and store development built for speed, control, and clean code." },
    { icon: "paintbrush", title: "Store Redesign", desc: "Refresh an existing Shopify store into a modern, high-converting experience." },
    { icon: "sliders-horizontal", title: "Theme Customization", desc: "Tailor any Shopify theme exactly to your brand, layout, and functionality needs." },
    { icon: "gauge", title: "Speed Optimization", desc: "Faster load times and Core Web Vitals in the green so you never lose a sale." },
    { icon: "replace", title: "Migration", desc: "Move to Shopify from any platform with zero data loss and no SEO drop." },
    { icon: "layout", title: "Landing Page Design", desc: "High-converting Shopify landing pages built for campaigns and product launches." },
    { icon: "line-chart", title: "CRO Optimization", desc: "Research-led improvements that turn more of your traffic into paying customers." },
    { icon: "life-buoy", title: "Maintenance & Support", desc: "Ongoing updates, fixes, and support to keep your store running perfectly." },
    { icon: "repeat-2", title: "2 free revisions", desc: "Two complimentary rounds of changes after your project is complete, valid for 21 days post-delivery." },
    { icon: "graduation-cap", title: "30-min onboarding training", desc: "A free 30-minute Google Meet walkthrough on delivery — ideal for beginners running their first store." },
  ];
  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 shownServices = (isMobile || showAll) ? services : services.slice(0, 6);
  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;
          const s = 1 - p * 0.08;
          c.style.transform = "scale(" + s + ") 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, showAll]);
  return (
    <section id="services" style={{ background: "var(--surface-page)" }}>
      <div style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "var(--section-y) var(--gutter)" }}>
        <div className="reveal" style={{ paddingBottom: "clamp(2.5rem,5vw,4rem)", display: "flex", flexDirection: "column", alignItems: "center", gap: 28 }}>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, fontWeight: 600, letterSpacing: "var(--tracking-caps)", textTransform: "uppercase", color: "var(--text-muted)" }}>Recent Shopify projects</span>
          <LogoMarquee logos={[
            { name: "Kron Nutrition", src: "logo-kron.png", url: "https://kronfit.com/" },
            { name: "Ayurmveda", src: "logo-ayurmveda.webp", url: "https://ayurmveda.in/" },
            { name: "Dubai Aroma", src: "logo-dubaiaroma.avif", url: "https://dubaiaroma.in/" },
            { name: "BloomLeaf", src: "logo-bloomleaf.webp", url: "https://bloomleaf.co.in/" },
            { name: "Waysho", src: "logo-waysho.avif", url: "https://waysho.com/" },
            { name: "Seafolds", src: "logo-seafolds.avif", url: "https://seafolds.com/" },
            { name: "Sahina Dupatta", src: "logo-sahina.avif", url: "https://sahinadupatta.com/" },
            { name: "HindIX", src: "logo-hindix.avif", url: "https://hindix.in/" },
            { name: "Kishaan", src: "logo-kishaan.png", url: "https://kishaan.in/" },
            { name: "Pikku Store", src: "logo-pikku.avif", url: "https://pikku.shop/" },
            { name: "Namaste Silver", src: "logo-namastesilver.webp", url: "https://namastesilver.com/" },
          ]} />
        </div>
        <div className="reveal" style={{ marginBottom: "clamp(2.5rem,5vw,3.5rem)" }}>
          <SectionHeading eyebrow="What we do" title="Complete Shopify store design & development" description="Everything your Shopify store needs — designed, built, and optimized to sell, scale, and grow." align="center" />
        </div>
        <div ref={stackRef} style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 20 }} className={"svc-grid" + (isMobile ? " svc-stack" : "")}>
          {shownServices.map((s, i) => {
            const dir = isMobile ? "" : (i % 3 === 0 ? "slide-l" : i % 3 === 2 ? "slide-r" : "");
            return (
            <div key={s.title} className={"reveal " + dir} style={{ transitionDelay: ((i % 3) * 90) + "ms", "--i": i }}>
              {isMobile ? (
                <Card interactive style={{ height: "100%", textAlign: "center" }}>
                  <div style={{ display: "grid", placeItems: "center", height: 160, borderRadius: "var(--radius-lg)", background: "linear-gradient(160deg,var(--blue-50),color-mix(in oklab,var(--blue-50),#fff 45%))", marginBottom: 20 }}>
                    <Ic name={s.icon} size={64} stroke={1.25} color="var(--brand)" />
                  </div>
                  <h3 style={{ margin: "0 0 8px", fontFamily: "var(--font-display)", fontSize: 21, fontWeight: 700, letterSpacing: "var(--tracking-tight)" }}>{s.title}</h3>
                  <p style={{ margin: "0 auto", maxWidth: 300, fontSize: 15, lineHeight: "var(--leading-normal)", color: "var(--text-secondary)", textWrap: "pretty" }}>{s.desc}</p>
                </Card>
              ) : (
                <Card interactive style={{ height: "100%" }}>
                  <span style={{ width: 48, height: 48, borderRadius: "var(--radius-md)", background: "var(--blue-50)", color: "var(--brand)", display: "grid", placeItems: "center", marginBottom: 18 }}><Ic name={s.icon} size={22} /></span>
                  <h3 style={{ margin: "0 0 8px", fontFamily: "var(--font-display)", fontSize: 19, fontWeight: 700, letterSpacing: "var(--tracking-tight)" }}>{s.title}</h3>
                  <p style={{ margin: 0, fontSize: 14.5, lineHeight: "var(--leading-normal)", color: "var(--text-secondary)", textWrap: "pretty" }}>{s.desc}</p>
                </Card>
              )}
            </div>
            );
          })}
        </div>
        {!isMobile && services.length > 6 && (
          <div className="reveal" style={{ display: "flex", justifyContent: "center", marginTop: 32 }}>
            <button onClick={() => setShowAll((v) => !v)} style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "13px 24px", background: "var(--surface-card)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-pill)", cursor: "pointer", fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 15, color: "var(--brand)", boxShadow: "var(--shadow-sm)" }}>
              {showAll ? "Show less" : "View all " + services.length + " services"}
              <span style={{ display: "inline-flex", transform: showAll ? "rotate(180deg)" : "none", transition: "transform var(--dur-base) var(--ease-out)" }}><Ic name="chevron-down" size={18} /></span>
            </button>
          </div>
        )}
      </div>
    </section>
  );
}
Object.assign(window, { Services });