"use client";

import Image from "next/image";
import { motion } from "motion/react";

const testimonials = [
  {
    id: 1,
    avatar: "https://api.dicebear.com/9.x/thumbs/svg?seed=Felix",
    name: "xX_DarkLord_Xx",
    role: "Minecraft Server Owner",
    tag: "@darklord",
    message: "No lag since I switched here. 200 players, TPS stays at 20. Absolutely worth every penny.",
    game: "Minecraft",
    stars: 5,
  },
  {
    id: 2,
    avatar: "https://api.dicebear.com/9.x/thumbs/svg?seed=Aneka",
    name: "NightOwlGamer",
    role: "ARK: Survival Admin",
    tag: "@nightowl",
    message: "WOW! Setup took 5 minutes, server was live instantly. Support resolved my issue within minutes with no bots, no queues.",
    game: "ARK: Survival",
    stars: 5,
  },
  {
    id: 3,
    avatar: "https://api.dicebear.com/9.x/thumbs/svg?seed=Zara",
    name: "ZephyrStrike",
    role: "CS2 Community Admin",
    tag: "@zephyr",
    message: "The DDoS protection is the real deal. Used to get hit constantly nothing gets through now. Game firewall is on another level.",
    game: "Counter-Strike 2",
    stars: 5,
  },
  {
    id: 4,
    avatar: "https://api.dicebear.com/9.x/thumbs/svg?seed=Ryuu",
    name: "RyuuHoshi",
    role: "Valheim Server Owner",
    tag: "@ryuuhoshi",
    message: "Best price-to-performance I've found. The 99.9% uptime SLA isn't just a gimmik. Tt holds.",
    game: "Valheim",
    stars: 5,
  },
  {
    id: 5,
    avatar: "https://api.dicebear.com/9.x/thumbs/svg?seed=Mochi",
    name: "MochiQueen",
    role: "Rust Clan Leader",
    tag: "@mochiqueen",
    message: "Migrating from my old host was seamless. Zero downtime, zero data loss. Highly recommended.",
    game: "Rust",
    stars: 5,
  },
  {
    id: 6,
    avatar: "https://api.dicebear.com/9.x/thumbs/svg?seed=Blaze",
    name: "BlazeRunner99",
    role: "FiveM Server Developer",
    tag: "@blazerunner",
    message: "The control panel is incredibly clean. Restart, backup, and udpate all one click. Exactly what I needed.",
    game: "FiveM / GTA V",
    stars: 5,
  },
  {
    id: 7,
    avatar: "https://api.dicebear.com/9.x/thumbs/svg?seed=Nova",
    name: "NovaStrike_ID",
    role: "Terraria Veteran",
    tag: "@novastrike",
    message: "Ping from Southeast Asia dropped from 180ms to 12ms. Literally a game changer.",
    game: "Terraria",
    stars: 5,
  },
  {
    id: 8,
    avatar: "https://api.dicebear.com/9.x/thumbs/svg?seed=Luna",
    name: "LunaCraft",
    role: "Modded MC Creator",
    tag: "@lunacraft",
    message: "100+ mods running smooth. RAM is flexible, can upgrade anytime without hassle.",
    game: "Modded MC",
    stars: 5,
  },
];

const gameIcons: Record<string, string> = {
  "Minecraft":       "/asset/minecraft.png",
  "ARK: Survival":   "/asset/ark.png",
  "Counter-Strike 2":"/asset/cs2.png",
  "Valheim":         "/asset/valheim.png",
  "Rust":            "/asset/rust.png",
  "FiveM / GTA V":   "/asset/gtav.png",
  "Terraria":        "/asset/terraria.png",
  "Modded MC":       "/asset/minecraft.png",
};

const noiseStyle = {
  backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")`,
  backgroundSize: "128px 128px",
};

function StarRating({ count }: { count: number }) {
  return (
    <div className="flex gap-0.5">
      {Array.from({ length: count }).map((_, i) => (
        <svg key={i} className="w-3 h-3 fill-amber-400" viewBox="0 0 20 20">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
        </svg>
      ))}
    </div>
  );
}

function TestiCard({
  t,
  delay = 0,
}: {
  t: (typeof testimonials)[0];
  delay?: number;
}) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 18 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: "-30px" }}
      transition={{ duration: 0.5, delay, ease: "easeOut" }}
      className="group flex flex-col gap-3.5 p-5 rounded-2xl bg-surface border border-border/80 hover:border-border-hover hover:bg-elevated transition-colors duration-300 h-full"
    >
      <div className="flex items-center gap-2.5">
        <div className="relative shrink-0">
          <img
            src={t.avatar}
            alt={t.name}
            width={32}
            height={32}
            className="rounded-full border border-border bg-zinc-900 w-8 h-8"
          />
          <span className="absolute -bottom-0.5 -right-0.5 w-2 h-2 rounded-full bg-emerald-500 border-[1.5px] border-surface" />
        </div>
        <div className="min-w-0 flex-1">
          <p className="text-[12.5px] font-bold text-white truncate leading-snug">{t.name}</p>
          <p className="text-[10px] text-content-muted truncate">{t.role}</p>
        </div>
        <StarRating count={t.stars} />
      </div>

      <p className="text-[12.5px] text-content-dim leading-relaxed flex-1">"{t.message}"</p>

      <div className="flex items-center justify-between pt-3 border-t border-border/60">
        <div className="flex items-center gap-1.5 px-2 py-1 rounded-md border border-border bg-zinc-900/50">
          <Image
            src={gameIcons[t.game] || "/icons/default.png"}
            alt={t.game}
            width={14}
            height={14}
            className="object-contain"
          />
          <span className="text-[10px] font-medium text-zinc-300">{t.game}</span>
        </div>
        <span className="text-[10px] text-content-subtle">{t.tag}</span>
      </div>
    </motion.div>
  );
}

function TrustpilotBadge() {
  return (
    <div className="inline-flex items-center gap-2.5 px-4 py-2 rounded-xl border border-border bg-surface">
      <svg
        viewBox="0 0 512 130"
        className="trustpilot-svg h-5 w-auto"
        fillRule="evenodd"
        clipRule="evenodd"
        strokeLinejoin="round"
        strokeMiterlimit="2"
      >
        <g transform="translate(0 1.249) scale(1.99222)">
          <clipPath id="tpClip">
            <path d="M0 0h257v64H0z" />
          </clipPath>
          <g fillRule="nonzero" clipPath="url(#tpClip)">
            <path d="M67.5 22.4h26v4.9H83.3v27.3h-5.6V27.2H67.5v-4.8zm24.9 8.8h4.8v4.5h.1c.2-.6.5-1.2.9-1.8.4-.6 1-1.2 1.6-1.6.6-.5 1.3-.9 2-1.2.7-.3 1.5-.5 2.3-.5h1.2c.2 0 .5.1.7.1v4.9c-.4-.1-.7-.1-1.1-.2-.4 0-.7-.1-1.1-.1-.9 0-1.7.2-2.4.5-.8.3-1.4.9-2 1.5-.6.7-1 1.5-1.4 2.5-.3 1-.5 2.1-.5 3.4v11.1h-5.1V31.2zm37.3 23.3h-5.1v-3.2h-.1c-.6 1.2-1.6 2.1-2.8 2.8-1.2.7-2.5 1.1-3.8 1.1-3.1 0-5.3-.7-6.6-2.3-1.4-1.5-2-3.8-2-6.9V31.2h5.1v14.3c0 2 .4 3.5 1.2 4.3.8.8 1.9 1.3 3.3 1.3 1.1 0 2-.2 2.7-.5.7-.3 1.3-.8 1.7-1.3.5-.5.8-1.2 1-2 .2-.8.3-1.6.3-2.5V31.3h5.1v23.2zm8.7-7.5c.2 1.5.7 2.5 1.7 3.2 1 .6 2.2.9 3.6.9.5 0 1 0 1.6-.1.6-.1 1.2-.2 1.7-.4s1-.5 1.3-.9c.3-.4.5-.9.5-1.6 0-.7-.3-1.2-.7-1.6-.5-.4-1-.7-1.7-1-.7-.2-1.5-.5-2.4-.7l-2.7-.6c-1-.2-1.9-.5-2.8-.8-.9-.3-1.7-.7-2.4-1.2s-1.3-1.2-1.7-2c-.4-.8-.6-1.8-.6-2.9 0-1.3.3-2.3.9-3.2.6-.9 1.4-1.5 2.3-2.1 1-.5 2-.9 3.2-1.1 1.2-.2 2.3-.3 3.3-.3 1.2 0 2.4.1 3.4.4 1.1.2 2.1.7 3 1.2.9.6 1.6 1.3 2.2 2.2.6.9 1 2 1.1 3.3h-5.4c-.2-1.2-.8-2.1-1.7-2.5-.9-.4-1.9-.6-3-.6-.4 0-.8 0-1.3.1s-1 .2-1.4.3c-.4.2-.8.4-1.1.7-.3.3-.5.7-.5 1.2 0 .6.2 1.1.7 1.5.4.4 1 .7 1.7 1 .7.2 1.5.5 2.4.7.9.2 1.8.4 2.8.6.9.2 1.8.5 2.7.8.9.3 1.7.7 2.4 1.2s1.3 1.2 1.7 1.9c.4.7.7 1.7.7 2.9 0 1.4-.3 2.5-1 3.5-.6 1-1.5 1.7-2.4 2.3-1 .6-2.1 1-3.4 1.3-1.2.3-2.4.4-3.7.4-1.5 0-2.8-.2-4.1-.5-1.2-.3-2.3-.8-3.2-1.5-.9-.7-1.6-1.5-2.2-2.5-.5-1-.8-2.2-.8-3.6l5.3.1zm16.9-15.8h3.9v-7h5.1v7h4.6V35h-4.6v12.4c0 .5 0 1 .1 1.4 0 .4.2.7.3 1 .2.3.4.5.7.6.3.1.8.2 1.4.2h1.1c.4 0 .7-.1 1.1-.2v4c-.6.1-1.1.1-1.7.2-.5.1-1.1.1-1.7.1-1.4 0-2.4-.1-3.3-.4-.8-.2-1.5-.6-1.9-1.1-.5-.5-.8-1.1-1-1.9-.2-.7-.3-1.6-.3-2.6V35.1h-3.9l.1-3.9zm17.3 0h4.9v3.2h.1c.7-1.4 1.7-2.3 3-2.9 1.3-.6 2.7-.9 4.2-.9 1.8 0 3.4.3 4.8 1 1.4.6 2.5 1.5 3.4 2.7.9 1.1 1.6 2.5 2 3.9.5 1.5.7 3.1.7 4.8 0 1.6-.2 3.1-.6 4.5-.4 1.5-1 2.8-1.8 3.9s-1.9 2-3.1 2.7c-1.3.7-2.7 1-4.5 1-.7 0-1.5-.1-2.2-.2-.7-.1-1.5-.4-2.2-.7-.7-.3-1.3-.7-1.9-1.2-.6-.5-1.1-1-1.5-1.6h-.1V63h-5.1V31.2h-.1zm17.9 11.7c0-1-.1-2.1-.4-3.1-.3-1-.7-1.9-1.2-2.6-.5-.8-1.2-1.4-2-1.8-.8-.5-1.7-.7-2.8-.7-2.2 0-3.8.7-4.9 2.2-1.1 1.5-1.6 3.5-1.6 6 0 1.2.1 2.3.4 3.3.3 1 .7 1.9 1.3 2.6.6.7 1.2 1.3 2 1.7.8.4 1.7.6 2.8.6 1.2 0 2.2-.2 3-.7.8-.5 1.5-1.1 2-1.9.5-.8.9-1.6 1.1-2.6.2-1 .3-2 .3-3zm9-20.5h5.1v4.9h-5.1v-4.9zm0 8.8h5.1v23.3h-5.1V31.2zm9.7-8.8h5.1v32.1h-5.1V22.4zm20.9 32.7c-1.9 0-3.5-.3-5-.9-1.5-.6-2.7-1.5-3.7-2.5-1-1.1-1.8-2.4-2.3-3.9-.5-1.5-.8-3.2-.8-4.9 0-1.8.3-3.4.8-4.9.5-1.5 1.3-2.8 2.3-3.9 1-1.1 2.2-1.9 3.7-2.5 1.5-.6 3.1-.9 5-.9s3.5.3 5 .9c1.5.6 2.7 1.5 3.7 2.5 1 1.1 1.8 2.4 2.3 3.9.5 1.5.8 3.1.8 4.9 0 1.8-.3 3.4-.8 4.9-.5 1.5-1.3 2.8-2.3 3.9-1 1.1-2.2 1.9-3.7 2.5-1.5.6-3.1.9-5 .9zm0-4c1.1 0 2.1-.2 3-.7.8-.5 1.5-1.1 2.1-1.9.5-.8.9-1.7 1.2-2.6.2-1 .4-2 .4-3s-.1-2-.4-3c-.2-1-.7-1.9-1.2-2.6-.5-.8-1.2-1.4-2.1-1.9-.8-.5-1.8-.7-3-.7-1.1 0-2.1.2-3 .7-.8.5-1.5 1.1-2.1 1.9-.5.8-.9 1.6-1.2 2.6-.2 1-.4 2-.4 3s.1 2 .4 3c.2 1 .7 1.9 1.2 2.6.5.8 1.2 1.4 2.1 1.9.9.5 1.9.7 3 .7zm13.2-19.9h3.9v-7h5.1v7h4.6V35h-4.6v12.4c0 .5 0 1 .1 1.4 0 .4.2.7.3 1 .2.3.4.5.7.6.3.1.8.2 1.4.2h1.1c.4 0 .7-.1 1.1-.2v4c-.6.1-1.1.1-1.7.2-.5.1-1.1.1-1.7.1-1.4 0-2.4-.1-3.3-.4-.8-.2-1.5-.6-1.9-1.1-.5-.5-.8-1.1-1-1.9-.2-.7-.3-1.6-.3-2.6V35.1h-3.9l.1-3.9z" fill="#fff" />
            <path d="M61.5 22.4H38L30.8 0l-7.3 22.4L0 22.3l19 13.8-7.3 22.3 19-13.8 19 13.8-7.3-22.3 19.1-13.7z" fill="#04da8d" />
            <path d="M44.2 41.2l-1.6-5.1-11.8 8.5 13.4-3.4z" fill="#005128" />
          </g>
        </g>
      </svg>
      <div className="h-3.5 w-px bg-zinc-800" />
      <div>
        <div className="flex gap-0.5 mb-0.5">
          {Array.from({ length: 5 }).map((_, i) => (
            <svg key={i} className="w-3 h-3 fill-[#04da8d]" viewBox="0 0 20 20">
              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
            </svg>
          ))}
        </div>
        <p className="text-[10px] text-zinc-300 leading-none">Excellent · 4.9/5</p>
      </div>
    </div>
  );
}

export default function TestimonialSection() {
  const col1 = [testimonials[0], testimonials[2], testimonials[4]];
  const col2 = [testimonials[1], testimonials[3]];
  const col3 = [testimonials[5], testimonials[6], testimonials[7]];

  return (
    <section
      className="relative w-full py-24 md:py-32 px-6 lg:px-12 font-sans overflow-hidden border-t border-border/80"
    >
      <div
        className="absolute inset-0 opacity-[0.03] pointer-events-none z-0"
        style={noiseStyle}
      />

      <div className="relative z-10 max-w-7xl mx-auto">

        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6, ease: "easeOut" }}
          className="flex flex-col sm:flex-row sm:items-end justify-between gap-6 mb-14 md:mb-16"
        >
          <div>
            <div className="flex items-center gap-3 mb-6">
              <span className="block h-0.5 w-6 bg-accent-hover rounded-full" />
              <p className="text-xs font-bold text-accent-text uppercase tracking-widest">Testimonials</p>
            </div>
            <h2 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-[1.1] tracking-tight mb-4">
              Trusted by <br />
              <span className="text-accent-text">server owners.</span>
            </h2>
            <p className="text-[1rem] text-content-dim leading-relaxed max-w-md">
              Thousands of communities run on our infrastructure. Here's what they say.
            </p>
          </div>
          <div className="shrink-0">
            <TrustpilotBadge />
          </div>
        </motion.div>

        <div className="hidden lg:grid lg:grid-cols-3 gap-4">
          <div className="flex flex-col gap-4">
            {col1.map((t, i) => (
              <TestiCard key={t.id} t={t} delay={i * 0.07} />
            ))}
          </div>
          <div className="flex flex-col gap-4 mt-8">
            {col2.map((t, i) => (
              <TestiCard key={t.id} t={t} delay={0.1 + i * 0.07} />
            ))}
          </div>
          <div className="flex flex-col gap-4">
            {col3.map((t, i) => (
              <TestiCard key={t.id} t={t} delay={0.05 + i * 0.07} />
            ))}
          </div>
        </div>

        <div className="lg:hidden grid grid-cols-1 sm:grid-cols-2 gap-4">
          {testimonials.map((t, i) => (
            <TestiCard key={t.id} t={t} delay={i * 0.06} />
          ))}
        </div>

        <motion.div
          initial={{ opacity: 0, y: 16 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5, delay: 0.2 }}
          className="mt-14 pt-10 border-t border-border/80 flex flex-wrap items-center justify-center gap-10"
        >
          {[
            { value: "10K+",  label: "Active Servers" },
            { value: "99.9%", label: "Uptime SLA" },
            { value: "4.9/5", label: "Avg. Rating" },
            { value: "<15m",  label: "Support Response" },
          ].map((s) => (
            <div key={s.label} className="flex flex-col items-center gap-1 text-center">
              <span className="text-2xl md:text-3xl font-semibold text-white tracking-tight">{s.value}</span>
              <span className="text-xs font-medium text-content-muted uppercase tracking-wider">{s.label}</span>
            </div>
          ))}
        </motion.div>

      </div>
    </section>
  );
}