// Pricing → custom quote (no fixed pricing, per brief).
const NS_PR = window.AnsysDigitalDesignSystem_4543d7;

function Pricing({ onCta }) {
  const { SectionHeading, Button, Eyebrow } = NS_PR;
  const points = [
    ["search", "We learn your brand", "A free discovery call to understand your goals, products, and timeline."],
    ["file-text", "You get a custom quote", "A clear, tailored proposal scoped to exactly what your store needs — nothing padded."],
    ["rocket", "We build & launch", "Fixed scope, fixed timeline, premium result — with training and support after launch."],
  ];
  return (
    <section id="pricing" 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="How we work" title="No fixed packages — just the right quote for you" description="Every store is different, so every quote is custom. It starts with a free discovery call and a tailored proposal — never a template price." align="center" />
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 22, marginBottom: "clamp(2.5rem,4vw,3.5rem)" }} className="price-grid">
          {points.map((p, i) => (
            <div key={p[1]} className="reveal" style={{ transitionDelay: (i * 70) + "ms", background: "var(--surface-card)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-xl)", boxShadow: "var(--shadow-sm)", padding: "clamp(24px,3vw,32px)" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 16 }}>
                <span style={{ width: 46, height: 46, borderRadius: "var(--radius-md)", background: "var(--grad-brand)", color: "#fff", display: "grid", placeItems: "center", boxShadow: "var(--shadow-brand)" }}><Ic name={p[0]} size={21} /></span>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 13, fontWeight: 600, color: "var(--neutral-300)" }}>0{i + 1}</span>
              </div>
              <h3 style={{ margin: "0 0 8px", fontFamily: "var(--font-display)", fontSize: 19, fontWeight: 700, letterSpacing: "var(--tracking-tight)" }}>{p[1]}</h3>
              <p style={{ margin: 0, fontSize: 14.5, lineHeight: "var(--leading-normal)", color: "var(--text-secondary)", textWrap: "pretty" }}>{p[2]}</p>
            </div>
          ))}
        </div>
        <div className="reveal" style={{ position: "relative", overflow: "hidden", background: "var(--grad-brand)", borderRadius: "var(--radius-2xl)", padding: "clamp(30px,5vw,52px)", textAlign: "center" }}>
          <div style={{ position: "absolute", inset: 0, backgroundImage: "var(--grad-halo)", opacity: .5, pointerEvents: "none" }} />
          <div style={{ position: "relative" }}>
            <Eyebrow color="gold">Free consultation</Eyebrow>
            <h3 style={{ margin: "14px auto 0", maxWidth: 620, fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "var(--display-sm)", lineHeight: "var(--leading-tight)", letterSpacing: "var(--tracking-tight)", color: "#fff", textWrap: "balance" }}>Get a custom quote for your Shopify store</h3>
            <p style={{ margin: "16px auto 0", maxWidth: 520, fontSize: 17, lineHeight: "var(--leading-snug)", color: "rgba(255,255,255,.82)", textWrap: "pretty" }}>Book a free discovery call and we'll come back with a tailored plan — no obligation, no fixed-price templates.</p>
            <div style={{ display: "flex", gap: 14, justifyContent: "center", marginTop: 28, flexWrap: "wrap" }}>
              <Button variant="gold" size="lg" onClick={onCta} iconRight={<Ic name="arrow-right" size={18} />}>Book discovery call</Button>
              <Button variant="inverse" size="lg" onClick={onCta}>Get free consultation</Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Pricing });