"use client";

import Image from "next/image";
import { Box, Container, Group, SimpleGrid, Stack, Text, Title } from "@mantine/core";
import { Star } from "lucide-react";
import { useThemeColors } from "@/hooks/useThemeColors";
import { testimonials, testimonialsIntro, type Testimonial } from "@/data/landing";
const STAR_COLOR = "#FFD700";

function StarRating({ count = 5, size = 16 }: { count?: number; size?: number }) {
  return (
    <Group gap={4}>
      {Array.from({ length: count }).map((_, i) => (
        <Star key={i} size={size} fill={STAR_COLOR} color={STAR_COLOR} strokeWidth={0} />
      ))}
    </Group>
  );
}

function TestimonialCard({
  item,
  cardBg,
  border,
  heading,
  muted,
}: {
  item: Testimonial;
  cardBg: string;
  border: string;
  heading: string;
  muted: string;
}) {
  return (
    <Box
      style={{
        height: "100%",
        padding: 28,
        borderRadius: 16,
        background: cardBg,
        border,
        display: "flex",
        flexDirection: "column",
        gap: 20,
      }}
    >
      <StarRating />

      <Text
        style={{
          color: heading,
          fontSize: "1.05rem",
          lineHeight: 1.7,
          fontStyle: "italic",
          flex: 1,
        }}
      >
        &ldquo;{item.quote}&rdquo;
      </Text>

      <Group gap="md" wrap="nowrap" align="center">
        <Box
          style={{
            width: 52,
            height: 52,
            borderRadius: "50%",
            overflow: "hidden",
            flexShrink: 0,
            border: "2px solid rgba(0, 155, 255, 0.25)",
          }}
        >
          <Image
            src={item.avatar}
            alt={item.name}
            width={52}
            height={52}
            style={{ width: "100%", height: "100%", objectFit: "cover" }}
          />
        </Box>
        <Stack gap={2} style={{ minWidth: 0 }}>
          <Text fw={700} size="sm" style={{ color: heading }}>
            {item.name}
          </Text>
          <Text size="sm" style={{ color: muted, lineHeight: 1.4 }}>
            {item.role} / {item.company}
          </Text>
        </Stack>
      </Group>
    </Box>
  );
}

export function TestimonialsSection() {
  const theme = useThemeColors();
  const cardBg = theme.isDark ? "rgba(255, 255, 255, 0.04)" : "#ffffff";
  const border = theme.isDark
    ? "1px solid rgba(255, 255, 255, 0.08)"
    : "1px solid rgba(15, 23, 42, 0.08)";

  return (
    <Box component="section" id="depoimentos" py={{ base: 72, md: 100 }}>
      <Container size="xl">
        <Stack gap={48} align="center">
          <Stack gap="md" align="center" maw={720}>
            <Title
              order={2}
              ta="center"
              fw={800}
              style={{
                color: theme.heading,
                fontSize: "clamp(1.75rem, 3.5vw, 2.5rem)",
                letterSpacing: "-0.03em",
                lineHeight: 1.15,
              }}
            >
              {testimonialsIntro.title}
            </Title>
            <Group gap="sm" justify="center">
              <Text size="md" fw={500} style={{ color: theme.heading }}>
                {testimonialsIntro.ratingLabel}
              </Text>
              <StarRating size={18} />
            </Group>
          </Stack>

          <SimpleGrid cols={{ base: 1, md: 3 }} spacing="lg" w="100%">
            {testimonials.map((item) => (
              <TestimonialCard
                key={item.id}
                item={item}
                cardBg={cardBg}
                border={border}
                heading={theme.heading}
                muted={theme.muted}
              />
            ))}
          </SimpleGrid>
        </Stack>
      </Container>
    </Box>
  );
}