Testimonials

<%# Variant 1: Single large quote — one big centered testimonial with avatar, name, role, quote %>
<section class="bg-background py-16 lg:py-24">
  <div class="mx-auto max-w-4xl px-6 text-center">
    <div class="mb-8">
      <%= ui.icon "chat-bubble-left-right", size: 10, class: "text-primary mx-auto" %>
    </div>
    <blockquote class="text-foreground text-2xl font-medium leading-relaxed sm:text-3xl lg:text-4xl">
      "This platform completely changed how our team collaborates. We shipped our last product in half the time and with far fewer bugs. It is, without a doubt, the best investment we have made."
    </blockquote>
    <div class="mt-10 flex flex-col items-center gap-4">
      <%= ui.avatar size: 16 %>
      <div>
        <p class="text-foreground text-base font-semibold">Sarah Chen</p>
        <p class="text-muted-foreground text-sm">VP of Engineering, Streamline</p>
      </div>
    </div>
  </div>
</section>

<%# Variant 2: 3-column cards — three testimonial cards in a grid %>
<section class="bg-background py-16 lg:py-24">
  <div class="mx-auto max-w-6xl px-6">
    <div class="text-center">
      <h2 class="text-foreground text-3xl font-bold tracking-tight sm:text-4xl">
        Loved by teams everywhere
      </h2>
      <p class="text-muted-foreground mx-auto mt-4 max-w-2xl text-lg">
        See what our customers have to say about their experience.
      </p>
    </div>

    <div class="mt-12 grid grid-cols-1 gap-6 md:grid-cols-3">
      <%
        testimonials = [
          {
            quote: "The onboarding was seamless. Within a day, our entire team was up and running. The intuitive interface made adoption effortless.",
            name: "Marcus Johnson",
            role: "CTO, Nextera Labs"
          },
          {
            quote: "We reduced our deployment time by 70%. The CI/CD integration is best-in-class and the monitoring tools give us complete visibility.",
            name: "Emily Rodriguez",
            role: "Lead Developer, Craftwork"
          },
          {
            quote: "Outstanding support team. Every time we had a question, we got a thoughtful response within the hour. They truly care about their customers.",
            name: "David Park",
            role: "Engineering Manager, Vaultkey"
          }
        ]
      %>

      <% testimonials.each do |testimonial| %>
        <%= ui.card do %>
          <%= ui.card_body class: "flex flex-col gap-6" do %>
            <p class="text-muted-foreground text-base leading-relaxed">
              "<%= testimonial[:quote] %>"
            </p>
            <div class="flex items-center gap-3 mt-auto">
              <%= ui.avatar size: 10 %>
              <div>
                <p class="text-foreground text-sm font-semibold"><%= testimonial[:name] %></p>
                <p class="text-muted-foreground text-sm"><%= testimonial[:role] %></p>
              </div>
            </div>
          <% end %>
        <% end %>
      <% end %>
    </div>
  </div>
</section>

<%# Variant 3: Carousel style — single testimonial displayed prominently (static) %>
<section class="bg-muted py-16 lg:py-24">
  <div class="mx-auto max-w-4xl px-6">
    <div class="text-center">
      <p class="text-primary text-sm font-semibold uppercase tracking-wider">Testimonials</p>
      <h2 class="text-foreground mt-2 text-3xl font-bold tracking-tight sm:text-4xl">
        What our customers say
      </h2>
    </div>

    <div class="mt-12">
      <%= ui.card do %>
        <%= ui.card_body class: "p-8 sm:p-12" do %>
          <div class="flex flex-col items-center text-center">
            <div class="flex gap-1 mb-6">
              <% 5.times do %>
                <%= ui.icon "star", size: 6, class: "text-primary" %>
              <% end %>
            </div>
            <blockquote class="text-foreground text-xl font-medium leading-relaxed sm:text-2xl">
              "Switching to this platform was a turning point for our company. The developer experience is unmatched, and the performance gains we saw were immediate. Our page load times dropped by 60% in the first week."
            </blockquote>
            <div class="mt-8 flex flex-col items-center gap-4">
              <%= ui.avatar size: 14 %>
              <div>
                <p class="text-foreground text-base font-semibold">Jessica Williams</p>
                <p class="text-muted-foreground text-sm">Head of Product, Prism Analytics</p>
              </div>
            </div>
          </div>
        <% end %>
      <% end %>
    </div>

    <div class="mt-8 flex items-center justify-center gap-2">
      <span class="bg-primary size-2.5 rounded-full"></span>
      <span class="bg-border size-2.5 rounded-full"></span>
      <span class="bg-border size-2.5 rounded-full"></span>
    </div>
  </div>
</section>

<%# Variant 4: Wall of testimonials — masonry-like grid of many small quotes %>
<section class="bg-background py-16 lg:py-24">
  <div class="mx-auto max-w-6xl px-6">
    <div class="text-center">
      <h2 class="text-foreground text-3xl font-bold tracking-tight sm:text-4xl">
        Hear from our community
      </h2>
      <p class="text-muted-foreground mx-auto mt-4 max-w-2xl text-lg">
        Thousands of developers and teams trust us every day.
      </p>
    </div>

    <%
      testimonials = [
        { quote: "Absolutely love the developer experience. Everything just works out of the box.", name: "Alex Turner", role: "Senior Developer, Basecamp" },
        { quote: "We migrated our entire stack in a weekend. The documentation is phenomenal and the migration guides saved us weeks of work.", name: "Priya Sharma", role: "Tech Lead, Finley" },
        { quote: "Best-in-class support. The team goes above and beyond every single time.", name: "Tom Bradley", role: "Founder, Launchpad" },
        { quote: "The analytics dashboard alone is worth the price. We finally have real visibility into our application performance.", name: "Nina Petrova", role: "Product Manager, Datawise" },
        { quote: "I have tried every tool out there. This is the one that actually sticks. Simple, powerful, reliable.", name: "James Kofi", role: "Full-Stack Developer" },
        { quote: "Our deployment frequency went from weekly to multiple times a day. The CI/CD pipeline integration is seamless.", name: "Laura Chen", role: "DevOps Lead, Scaleforce" },
        { quote: "Clean API, great docs, responsive team. What more could you ask for?", name: "Ryan Mitchell", role: "Backend Engineer, Optio" },
        { quote: "Saved us at least 20 hours per sprint. The automated testing and preview environments changed our workflow completely.", name: "Sophie Dubois", role: "Engineering Manager, Collective" }
      ]
    %>

    <div class="mt-12 columns-1 gap-6 sm:columns-2 lg:columns-3">
      <% testimonials.each do |testimonial| %>
        <div class="mb-6 break-inside-avoid">
          <%= ui.card do %>
            <%= ui.card_body class: "flex flex-col gap-4" do %>
              <p class="text-muted-foreground text-sm leading-relaxed">
                "<%= testimonial[:quote] %>"
              </p>
              <div class="flex items-center gap-3">
                <%= ui.avatar size: 8 %>
                <div>
                  <p class="text-foreground text-sm font-semibold"><%= testimonial[:name] %></p>
                  <p class="text-muted-foreground text-xs"><%= testimonial[:role] %></p>
                </div>
              </div>
            <% end %>
          <% end %>
        </div>
      <% end %>
    </div>
  </div>
</section>

<%# Variant 5: With rating stars — testimonials with 5-star ratings shown as star icons %>
<section class="bg-background py-16 lg:py-24">
  <div class="mx-auto max-w-6xl px-6">
    <div class="text-center">
      <h2 class="text-foreground text-3xl font-bold tracking-tight sm:text-4xl">
        Rated 5 stars by our users
      </h2>
      <p class="text-muted-foreground mx-auto mt-4 max-w-2xl text-lg">
        Real reviews from real teams using our platform every day.
      </p>
    </div>

    <%
      testimonials = [
        { quote: "The best developer tool I have used in years. It simplified our entire build process and gave us back hours every week.", name: "Olivia Martinez", role: "Staff Engineer, Helix", stars: 5 },
        { quote: "Incredible value for the price. The free tier alone covers most of what small teams need. Upgrading was a no-brainer.", name: "Ben Walker", role: "Co-founder, Stackable", stars: 5 },
        { quote: "Rock-solid reliability. We have not had a single incident since switching. Our uptime has never been better.", name: "Aisha Okafor", role: "SRE Lead, Overture", stars: 5 }
      ]
    %>

    <div class="mt-12 grid grid-cols-1 gap-6 md:grid-cols-3">
      <% testimonials.each do |testimonial| %>
        <%= ui.card do %>
          <%= ui.card_body class: "flex flex-col gap-4" do %>
            <div class="flex gap-0.5">
              <% testimonial[:stars].times do %>
                <%= ui.icon "star", size: 5, class: "text-primary" %>
              <% end %>
            </div>
            <p class="text-muted-foreground text-base leading-relaxed">
              "<%= testimonial[:quote] %>"
            </p>
            <div class="flex items-center gap-3 mt-auto">
              <%= ui.avatar size: 10 %>
              <div>
                <p class="text-foreground text-sm font-semibold"><%= testimonial[:name] %></p>
                <p class="text-muted-foreground text-sm"><%= testimonial[:role] %></p>
              </div>
            </div>
          <% end %>
        <% end %>
      <% end %>
    </div>
  </div>
</section>

<%# Variant 6: Logo + quote — company logo placeholder + quote + person info %>
<section class="bg-muted py-16 lg:py-24">
  <div class="mx-auto max-w-6xl px-6">
    <div class="text-center">
      <h2 class="text-foreground text-3xl font-bold tracking-tight sm:text-4xl">
        Trusted by industry leaders
      </h2>
      <p class="text-muted-foreground mx-auto mt-4 max-w-2xl text-lg">
        Leading companies rely on our platform to power their products.
      </p>
    </div>

    <%
      testimonials = [
        { quote: "Moving to this platform cut our infrastructure costs by 40% while improving performance across the board. The ROI was immediate.", name: "Katherine Lee", role: "CTO", company: "Meridian" },
        { quote: "The collaboration features are a game-changer. Our distributed team feels more connected than ever, and code reviews happen twice as fast.", name: "Robert Andersen", role: "VP of Engineering", company: "Elevate" },
        { quote: "We evaluated a dozen solutions before choosing this one. Six months later, it remains the best technical decision we have made this year.", name: "Fatima Al-Rashid", role: "Director of Technology", company: "Crestline" }
      ]
    %>

    <div class="mt-12 grid grid-cols-1 gap-8 lg:grid-cols-3">
      <% testimonials.each do |testimonial| %>
        <%= ui.card do %>
          <%= ui.card_body class: "flex flex-col gap-6 p-8" do %>
            <div class="text-muted-foreground/50 text-xl font-bold tracking-tight">
              <%= testimonial[:company] %>
            </div>
            <p class="text-muted-foreground text-base leading-relaxed flex-1">
              "<%= testimonial[:quote] %>"
            </p>
            <div class="border-border flex items-center gap-3 border-t pt-6">
              <%= ui.avatar size: 10 %>
              <div>
                <p class="text-foreground text-sm font-semibold"><%= testimonial[:name] %></p>
                <p class="text-muted-foreground text-sm"><%= testimonial[:role] %>, <%= testimonial[:company] %></p>
              </div>
            </div>
          <% end %>
        <% end %>
      <% end %>
    </div>
  </div>
</section>