// FAQ accordion.
const NS_FAQ = window.AnsysDigitalDesignSystem_4543d7;
function FAQ() {
  const { SectionHeading } = NS_FAQ;
  const qs = [
    ["What services does Ansys Digital offer?", "We focus entirely on Shopify — store design, development, redesign, theme customization, speed optimization, migration, landing pages, CRO, and ongoing maintenance & support."],
    ["Do you only work on Shopify?", "Yes. Shopify is all we do, which is exactly why we do it well. Every project is a Shopify store built to sell, scale, and grow."],
    ["How does pricing work?", "We don't use fixed packages. Every store is different, so we scope a custom quote after a free discovery call — you only pay for what your store actually needs."],
    ["How do I get started?", "Book a free discovery call. We'll understand your brand and goals, then send a tailored proposal with scope and timeline — no obligation."],
    ["How long does a Shopify store take?", "Most stores are designed and launched within a few weeks, depending on scope. We share a clear timeline in your proposal and work in focused sprints."],
    ["How involved do I need to be?", "Minimal. After the discovery call we handle design, development, and testing, checking in at each milestone for your approval."],
    ["Do I own my store and account?", "Completely. It's your Shopify account, your theme, and your data. No lock-in — everything is handed over to you."],
    ["What's included in every project?", "Homepage, collection & product pages, cart, checkout, payment gateway, shipping setup, policy pages, WhatsApp chat, analytics, Facebook Pixel, Google Analytics, basic SEO, speed optimization, mobile responsiveness, and domain setup."],
    ["Will my store be mobile responsive?", "Always. Every store we build is mobile-first and tested across phones, tablets, and desktops."],
    ["Is the store optimized for speed?", "Yes. Speed optimization and Core Web Vitals are part of every build — a fast store keeps customers and converts better."],
    ["Do you set up payments and shipping?", "Yes. We configure your payment gateway, shipping zones and rates, taxes, and policy pages as part of the build."],
    ["Do you help with SEO?", "Every store ships with basic on-page SEO — clean structure, meta setup, and image optimization. Advanced Shopify SEO is available as a dedicated service."],
    ["Can you redesign my existing store?", "Yes. We redesign existing Shopify stores into modern, high-converting experiences without losing your data or SEO."],
    ["Can you migrate my store to Shopify?", "Yes. We migrate from any platform to Shopify with zero data loss and no SEO drop."],
    ["Do you offer training after launch?", "Yes — one complimentary live Google Meet session (up to 30 minutes) on delivery, covering your dashboard, products, orders, apps, payments, shipping, and discounts. It's ideal for beginners running their first store."],
    ["What about revisions?", "You get 2 complimentary revisions, valid for 21 days after handover. Unused revisions expire after 21 days, and changes outside the agreed scope are quoted separately."],
    ["Do you provide support after launch?", "Yes. We offer ongoing maintenance and support, and many clients keep us on for continued improvements."],
    ["Which industries do you work with?", "Fashion, beauty, jewellery, electronics, furniture, home decor, food, health, pet, luxury brands, and digital products."],
    ["Do you work with international clients?", "Yes — we work with brands across the USA, UK, Canada, Australia, UAE, and India."],
    ["How do I contact you?", "Message us on WhatsApp at +91 92780 24499, email support@ansysdigital.com, or book a free discovery call through the site."],
  ];
  const [open, setOpen] = React.useState(0);
  const [showAll, setShowAll] = React.useState(false);
  const shown = showAll ? qs : qs.slice(0, 5);
  return (
    <section id="faq" style={{ background: "var(--surface-subtle)" }}>
      <div style={{ maxWidth: 820, margin: "0 auto", padding: "var(--section-y) var(--gutter)" }}>
        <div className="reveal" style={{ marginBottom: "clamp(2rem,4vw,3rem)" }}>
          <SectionHeading eyebrow="FAQ" title="Answers before you ask" align="center" />
        </div>
        <div className="reveal" style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          {shown.map(([q, a], i) => {
            const isOpen = open === i;
            return (
              <div key={q} style={{ background: "var(--surface-card)", border: "1px solid " + (isOpen ? "var(--blue-200)" : "var(--border-subtle)"), borderRadius: "var(--radius-lg)", boxShadow: isOpen ? "var(--shadow-sm)" : "none", overflow: "hidden", transition: "border-color var(--dur-base) var(--ease-out)" }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{ width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, padding: "20px 22px", background: "none", border: "none", cursor: "pointer", textAlign: "left", fontFamily: "var(--font-display)", fontSize: 16.5, fontWeight: 600, color: "var(--text-primary)" }}>
                  {q}
                  <span style={{ color: "var(--brand)", display: "inline-flex", flexShrink: 0, transform: isOpen ? "rotate(45deg)" : "none", transition: "transform var(--dur-base) var(--ease-out)" }}><Ic name="plus" size={22} /></span>
                </button>
                <div style={{ maxHeight: isOpen ? 360 : 0, opacity: isOpen ? 1 : 0, transition: "max-height var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out)" }}>
                  <p style={{ margin: 0, padding: "0 22px 22px", fontSize: 15, lineHeight: 1.6, color: "var(--text-secondary)", textWrap: "pretty" }}>{a}</p>
                </div>
              </div>
            );
          })}
        </div>
        {qs.length > 5 && (
          <div className="reveal" style={{ display: "flex", justifyContent: "center", marginTop: 24 }}>
            <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 " + qs.length + " questions"}
              <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, { FAQ });