// Testimonials.jsx — illustrative "what it solves" cards (no attributed customers)
function LDTestimonials() {
  const cards = [
    {
      icon: "🛒",
      tone: "linear-gradient(135deg,#F9CFB5,#E68A6B)",
      title: "Fewer abandoned carts",
      body: "When customers can see a real delivery date before they pay, they stop second-guessing checkout — so more carts turn into orders.",
      tag: "For: florists, gifting",
    },
    {
      icon: "🗺️",
      tone: "linear-gradient(135deg,#A8D5BA,#3F8F6E)",
      title: "One tidy dispatch flow",
      body: "Every scheduled order flows straight into Locate2u with its delivery window attached — replacing spreadsheets, group chats, and a stressed dispatcher.",
      tag: "For: food, grocery, high volume",
    },
    {
      icon: "📅",
      tone: "linear-gradient(135deg,#D9B8DE,#7A4A8A)",
      title: "No overbooked days",
      body: "Per-area order limits and deadlines hide slots once an area is full, so customers only ever book a day you can actually deliver.",
      tag: "For: any busy local store",
    },
  ];

  return (
    <section style={{ background: "var(--ld-cream-2)", padding: "112px 0", borderTop: "1px solid var(--ld-line)" }}>
      <div className="ld-container-wide">
        <div style={{ marginBottom: 56, maxWidth: 720 }}>
          <span className="ld-eyebrow ld-eyebrow-dot">What it solves</span>
          <h2 className="ld-h2" style={{ marginTop: 16 }}>
            Built for how local stores really deliver.
          </h2>
        </div>

        <div className="ld-grid-3" style={{ gap: 24 }}>
          {cards.map((c) => (
            <div key={c.title} style={{
              background: "#fff", borderRadius: 22, padding: 28,
              border: "1px solid var(--ld-line)",
              display: "flex", flexDirection: "column",
            }}>
              <span style={{
                width: 48, height: 48, borderRadius: 12,
                background: c.tone,
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                fontSize: 24, marginBottom: 20,
              }}>{c.icon}</span>
              <h3 className="ld-h4" style={{ marginBottom: 10 }}>{c.title}</h3>
              <p className="ld-body" style={{ fontSize: 15, marginBottom: 24 }}>{c.body}</p>
              <div style={{ marginTop: "auto", paddingTop: 20, borderTop: "1px solid var(--ld-line)" }}>
                <span className="ld-mono" style={{ fontSize: 10, color: "var(--ld-ink-soft)", letterSpacing: "0.8px", textTransform: "uppercase" }}>
                  {c.tag}
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.LDTestimonials = LDTestimonials;