---
import Public from '../../layouts/Public.astro';

interface ApiTestimonial {
  id: number;
  user_id: number;
  user_fullname: string;
  role: string;
  content: string;
  created_at: string;
  is_deleted: boolean;
}

let testimonials: ApiTestimonial[] = [];
try {
  const res = await fetch('https://api.imphnen.dev/v1/landing/cms/testimonials');
  const json = await res.json();
  testimonials = (json.data || []).filter((t: ApiTestimonial) => !t.is_deleted);
} catch {
  testimonials = [];
}

const AVATAR_COLORS = [
  'bg-primary-500 text-white',
  'bg-blue-500 text-white',
  'bg-green-500 text-white',
  'bg-purple-500 text-white',
  'bg-orange-500 text-white',
  'bg-pink-500 text-white',
];

function getAvatarColor(index: number) {
  return AVATAR_COLORS[index % AVATAR_COLORS.length];
}

function getInitial(name: string) {
  return name.charAt(0).toUpperCase();
}
---

<Public title="Testimonial - IMPHNEN">
  <div class="min-h-screen">
    <div class="py-16 px-4 text-center border-b border-border">
      <svg class="size-14 mx-auto my-4 text-foreground" fill="currentColor" viewBox="0 0 16 16">
        <path d="M0 2a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H4a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h.5a.5.5 0 0 1 0 1H4a2 2 0 0 1-2-2V8a3 3 0 0 1 3-3h.5V2H2zM9 2a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h.5a.5.5 0 0 1 0 1H13a2 2 0 0 1-2-2V8a3 3 0 0 1 3-3h.5V2H11z"/>
      </svg>
      <h1 class="text-4xl font-bold mb-4 text-foreground">Testimonial</h1>
      <p class="max-w-2xl mx-auto text-lg mb-8 text-balance text-muted-foreground">
        Menampilkan pengalaman dan cerita para member yang telah join ke dalam
        komunitas kami
      </p>
      <a
        href="/testimonials/submit"
        class="inline-flex items-center justify-center rounded-lg bg-primary text-primary-foreground px-6 py-3 text-sm font-medium hover:bg-primary/90 transition-colors"
      >
        Tulis Testimonialmu
      </a>
    </div>

    <div class="grid gap-8 md:gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 my-16 container">
      {testimonials.map((testimonial, index) => (
        <div class="p-6 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300">
          <div class="flex flex-col space-y-4">
            <div class="flex items-center gap-4">
              <div class={`w-12 h-12 rounded-full flex items-center justify-center text-lg font-semibold ${getAvatarColor(index)}`}>
                {getInitial(testimonial.user_fullname)}
              </div>
              <div>
                <h4 class="font-semibold text-gray-900">
                  {testimonial.user_fullname}
                </h4>
                <p class="text-sm text-gray-600">{testimonial.role}</p>
              </div>
            </div>
            <div class="text-gray-600 relative">
              <svg class="text-primary-500/30 w-6 h-6 mb-2" fill="currentColor" viewBox="0 0 512 512"><path d="M464 256h-80v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8c-88.4 0-160 71.6-160 160v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48zm-288 0H96v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8C71.6 32 0 103.6 0 192v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48z"/></svg>
              <p class="text-sm/relaxed">{testimonial.content}</p>
            </div>
          </div>
        </div>
      ))}
    </div>
  </div>
</Public>
