// Why choose Ansys Digital.
const NS_AB = window.AnsysDigitalDesignSystem_4543d7;
function About() {
  const { SectionHeading } = NS_AB;
  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 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]);
  const feats = [
    ["target", "Conversion focused", "Every design decision is made to turn visitors into paying customers."],
    ["sparkles", "Premium UI", "Clean, modern, luxury interfaces that build instant trust in your brand."],
    ["smartphone", "Mobile first", "Built for mobile from the ground up, where most of your customers shop."],
    ["search", "SEO ready", "Clean structure and on-page SEO so your store is ready to be found."],
    ["gauge", "Fast performance", "Speed-optimized stores with Core Web Vitals in the green."],
    ["headset", "Dedicated support", "Real people who respond fast — before, during, and after launch."],
    ["code-2", "Custom development", "No generic templates — everything tailored to your brand and products."],
    ["messages-square", "Transparent communication", "Clear updates and honest timelines at every step of the project."],
  ];
  return (
    <section id="about" style={{ background: "var(--surface-page)" }}>
      <div style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "var(--section-y) var(--gutter)" }}>
        <div className="reveal" style={{ marginBottom: "clamp(2.5rem,5vw,3.5rem)" }}>
          <SectionHeading eyebrow="Why Ansys Digital" title="We don't just set up stores. We set up stores that sell." description="No juniors, no templates, no shortcuts — just premium Shopify work built to grow your business." align="center" />
        </div>
        <div ref={stackRef} style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 18 }} className={"why-grid" + (isMobile ? " cap-stack" : "")}>
          {feats.map((f, i) => (
            <div key={f[1]} className={isMobile ? "" : "reveal"} style={{ "--ci": i, transitionDelay: (i * 40) + "ms", background: "var(--surface-card)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-lg)", padding: "22px", boxShadow: "var(--shadow-xs)" }}>
              <span style={{ width: 44, height: 44, borderRadius: "var(--radius-md)", background: "var(--blue-50)", color: "var(--brand)", display: "grid", placeItems: "center", marginBottom: 14 }}><Ic name={f[0]} size={21} /></span>
              <h3 style={{ margin: "0 0 6px", fontFamily: "var(--font-display)", fontSize: 16.5, fontWeight: 700, letterSpacing: "var(--tracking-tight)" }}>{f[1]}</h3>
              <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.5, color: "var(--text-secondary)", textWrap: "pretty" }}>{f[2]}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { About });