// Testimonials: featured quote + supporting cards.
const NS_TST = window.AnsysDigitalDesignSystem_4543d7;

function Testimonials() {
  const { SectionHeading, Card, Avatar, Input, Textarea, Button } = NS_TST;
  const items = [
    { q: "Ansys Digital rebuilt our storefront end to end. The site is fast, conversions are up, and they moved us to Shopify Plus with zero downtime. It genuinely feels like having an in-house team.", name: "Sanjeev Kaliwala", role: "Founder, Kronfit.com", url: "https://kronfit.com/", src: "client-sanjeev.png" },
    { q: "From our first call to launch, the process was smooth and transparent. Every detail was set up properly and the team was always available on WhatsApp. Highly recommended.", name: "Saket Kumar Singh", role: "Founder, Kishaan.in", url: "https://kishaan.in/", src: "client-saket.png" },
    { q: "Ansys Digital set up our complete fashion store — design, products, payments, everything was handled professionally. The store looks premium and managing daily orders is simple after their training.", name: "Adee", role: "Founder, Waysho.com", url: "https://waysho.com/", src: "client-placeholder.png" },
  ];
  const [open, setOpen] = React.useState(false);
  const [sent, setSent] = React.useState(false);
  const [busy, setBusy] = React.useState(false);
  const [rating, setRating] = React.useState(5);
  const [f, setF] = React.useState({ name: "", store: "", message: "", website: "" });
  const set = (k) => (e) => { const v = e.target.value; setF((p) => ({ ...p, [k]: v })); };
  const submitReview = (ev) => {
    ev.preventDefault();
    if (f.website) { setSent(true); return; }
    setBusy(true);
    const payload = new URLSearchParams({ _subject: "New review (pending verification)", type: "review", name: f.name, store: f.store, rating: rating + "/5", message: f.message });
    fetch("send.php", { method: "POST", headers: { "Content-Type": "application/x-www-form-urlencoded" }, body: payload })
      .then(() => { setBusy(false); setSent(true); })
      .catch(() => { setBusy(false); setSent(true); });
  };
  return (
    <section 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(2.5rem,5vw,3.5rem)" }}>
          <SectionHeading eyebrow="Testimonials" title="What our clients say about us" description="Real founders, real stores, real results — here's what it's like to work with us." align="center" />
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 22 }} className="tst-grid">
          <div className="reveal">
            <Card variant="default" style={{ height: "100%", position: "relative", overflow: "hidden", display: "flex", flexDirection: "column", justifyContent: "space-between", background: "var(--grad-brand)", border: "1px solid var(--blue-400)" }}>
              <span style={{ position: "absolute", top: 10, right: 24, fontFamily: "Georgia, serif", fontSize: 160, lineHeight: 1, color: "rgba(255,255,255,.12)", pointerEvents: "none" }}>&rdquo;</span>
              <div style={{ position: "relative" }}>
                <span style={{ display: "inline-flex", gap: 3, marginBottom: 20 }}>{[0, 1, 2, 3, 4].map((i) => (
                  <svg key={i} width="18" height="18" viewBox="0 0 24 24" fill="var(--accent)" stroke="var(--accent)" strokeWidth="1" strokeLinejoin="round"><path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" /></svg>
                ))}</span>
                <p style={{ margin: 0, fontFamily: "var(--font-display)", fontSize: 24, fontWeight: 600, lineHeight: 1.4, letterSpacing: "var(--tracking-tight)", color: "var(--ink-text)", textWrap: "pretty" }}>"{items[0].q}"</p>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 10, marginTop: 24 }}>
                  {[["trending-up", "+41% conversion"], ["zap", "0.9s load time"], ["clock", "Zero-downtime migration"]].map(([ic, t]) => (
                    <span key={t} style={{ display: "inline-flex", alignItems: "center", gap: 7, padding: "6px 12px", borderRadius: "var(--radius-pill)", background: "rgba(255,255,255,.12)", border: "1px solid rgba(255,255,255,.18)", color: "var(--ink-text)", fontSize: 12.5, fontWeight: 600 }}><span style={{ color: "var(--accent)", display: "inline-flex" }}><Ic name={ic} size={14} /></span>{t}</span>
                  ))}
                </div>
              </div>
              <div style={{ position: "relative", display: "flex", alignItems: "center", gap: 14, marginTop: 32 }}>
                <Avatar src={items[0].src} name={items[0].name} size={48} />
                <div><div style={{ fontWeight: 600, color: "var(--ink-text)" }}>{items[0].name}</div><a href={items[0].url} target="_blank" rel="noopener" style={{ display: "inline-flex", alignItems: "center", gap: 5, fontSize: 13, color: "rgba(255,255,255,.82)", textDecoration: "none" }}>{items[0].role}<Ic name="external-link" size={12} /></a></div>
              </div>
            </Card>
          </div>
          <div style={{ display: "grid", gridTemplateRows: "1fr 1fr", gap: 22 }}>
            {items.slice(1).map((t, i) => (
              <div key={t.name} className="reveal" style={{ transitionDelay: ((i + 1) * 80) + "ms" }}>
                <Card style={{ height: "100%", display: "flex", flexDirection: "column" }}>
                  <span style={{ display: "inline-flex", gap: 2, marginBottom: 14 }}>{[0, 1, 2, 3, 4].map((k) => (
                    <svg key={k} width="15" height="15" viewBox="0 0 24 24" fill="var(--accent)" stroke="var(--accent)" strokeWidth="1" strokeLinejoin="round"><path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" /></svg>
                  ))}</span>
                  <p style={{ margin: "0 0 18px", fontSize: 15.5, lineHeight: 1.55, color: "var(--text-primary)", textWrap: "pretty", flex: 1 }}>"{t.q}"</p>
                  <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                    {t.src ? <Avatar src={t.src} name={t.name} size={40} /> : <span style={{ width: 40, height: 40, borderRadius: 99, background: "var(--neutral-100)", border: "1px solid var(--border-subtle)", flexShrink: 0 }} />}
                    <div style={{ flex: 1 }}><div style={{ fontWeight: 600, fontSize: 14 }}>{t.name}</div><a href={t.url} target="_blank" rel="noopener" style={{ display: "inline-flex", alignItems: "center", gap: 4, fontSize: 12.5, color: "var(--text-muted)", textDecoration: "none" }}>{t.role}<Ic name="external-link" size={11} /></a></div>
                    <span style={{ display: "inline-flex", alignItems: "center", gap: 5, fontSize: 11.5, fontWeight: 600, color: "var(--success-500)" }}><Ic name="badge-check" size={15} />Verified</span>
                  </div>
                </Card>
              </div>
            ))}
          </div>
        </div>
        <div className="reveal" style={{ marginTop: "clamp(2rem,4vw,3rem)", display: "flex", flexDirection: "column", alignItems: "center", gap: 14, textAlign: "center" }}>
          <p style={{ margin: 0, display: "inline-flex", alignItems: "center", gap: 8, fontSize: 13.5, color: "var(--text-muted)" }}><span style={{ color: "var(--success-500)", display: "inline-flex" }}><Ic name="shield-check" size={16} /></span>Every review is manually verified before it appears here.</p>
          {!open && !sent ? (
            <button onClick={() => setOpen(true)} 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)" }}>Worked with us? Share your experience<Ic name="pen-line" size={16} /></button>
          ) : null}
          {open && !sent ? (
            <form onSubmit={submitReview} style={{ width: "100%", maxWidth: 560, textAlign: "left", background: "var(--surface-card)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-xl)", boxShadow: "var(--shadow-md)", padding: "clamp(20px,3vw,28px)", display: "flex", flexDirection: "column", gap: 15, marginTop: 4 }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <h3 style={{ margin: 0, fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 700 }}>Share your experience</h3>
                <button type="button" onClick={() => setOpen(false)} aria-label="Close" style={{ background: "none", border: "none", cursor: "pointer", color: "var(--text-muted)", display: "inline-flex" }}><Ic name="x" size={18} /></button>
              </div>
              <div>
                <div style={{ fontSize: 13.5, fontWeight: 600, marginBottom: 7, color: "var(--text-primary)" }}>Your rating</div>
                <div style={{ display: "inline-flex", gap: 4 }}>{[1, 2, 3, 4, 5].map((r) => (
                  <button key={r} type="button" onClick={() => setRating(r)} aria-label={r + " star"} style={{ background: "none", border: "none", cursor: "pointer", padding: 2, display: "inline-flex" }}>
                    <svg width="26" height="26" viewBox="0 0 24 24" fill={r <= rating ? "var(--accent)" : "none"} stroke={r <= rating ? "var(--accent)" : "var(--neutral-300)"} strokeWidth="1.6" strokeLinejoin="round"><path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" /></svg>
                  </button>
                ))}</div>
              </div>
              <div className="form-row" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 15 }}>
                <Input label="Your name" placeholder="Full name" value={f.name} onChange={set("name")} required />
                <Input label="Your store / brand" placeholder="brand.com" value={f.store} onChange={set("store")} />
              </div>
              <Textarea label="Your review" rows={3} placeholder="Tell us about working with Ansys Digital…" value={f.message} onChange={set("message")} required />
              <input type="text" tabIndex={-1} autoComplete="off" value={f.website} onChange={set("website")} aria-hidden="true" style={{ position: "absolute", left: "-9999px", width: 1, height: 1, opacity: 0 }} />
              <Button variant="primary" type="submit" disabled={busy} iconRight={<Ic name={busy ? "loader" : "send"} size={16} />}>{busy ? "Submitting…" : "Submit for review"}</Button>
              <p style={{ margin: 0, fontSize: 12, color: "var(--text-muted)", textAlign: "center" }}>Your review is sent to our team and published only after we verify it.</p>
            </form>
          ) : null}
          {sent ? (
            <div style={{ width: "100%", maxWidth: 520, background: "var(--surface-card)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-xl)", boxShadow: "var(--shadow-md)", padding: "28px 22px", marginTop: 4 }}>
              <span style={{ width: 52, height: 52, borderRadius: 99, background: "var(--success-50)", color: "var(--success-500)", display: "grid", placeItems: "center", margin: "0 auto 14px" }}><Ic name="check" size={26} stroke={2.4} /></span>
              <h3 style={{ margin: "0 0 6px", fontFamily: "var(--font-display)", fontSize: 19, fontWeight: 700, textAlign: "center" }}>Thank you for your review</h3>
              <p style={{ margin: 0, fontSize: 14, color: "var(--text-secondary)", textAlign: "center" }}>We've received it. Once our team verifies it, it'll appear on this page.</p>
            </div>
          ) : null}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Testimonials });