"use client";

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

const stars = Array.from({ length: 5 }, (_, i) => i);

export function SignupTestimonialPanel() {
  const [imgError, setImgError] = useState(false);
  return (
    <motion.div
      initial={{ opacity: 0, x: 20 }}
      animate={{ opacity: 1, x: 0 }}
      transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
      className="flex flex-col gap-8"
    >
      {/* Testimonial card */}
      <div className="rounded-2xl border border-border/60 bg-white/90 p-6 shadow-lg shadow-black/5 backdrop-blur-sm">
        <div className="flex gap-1 mb-4">
          {stars.map((i) => (
            <svg
              key={i}
              className="h-5 w-5 text-amber-400"
              fill="currentColor"
              viewBox="0 0 20 20"
              aria-hidden
            >
              <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>
        <blockquote className="text-foreground text-base leading-relaxed">
          &ldquo;LedgerOne helped us understand cash flow before problems surfaced. The experience feels fast, clear, and built for modern finance teams.&rdquo;
        </blockquote>
        <footer className="mt-4">
          <p className="text-sm font-semibold text-foreground">Sarah Chen</p>
          <p className="text-xs text-muted-foreground">Head of Finance, Northwind</p>
        </footer>
      </div>

      {/* Dashboard preview */}
      <motion.div
        initial={{ opacity: 0, y: 16 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5, delay: 0.15, ease: [0.16, 1, 0.3, 1] }}
        className="relative overflow-hidden rounded-2xl border border-border/60 bg-slate-900/95 shadow-2xl shadow-black/10"
      >
        <div className="aspect-[4/3] relative bg-slate-900">
          {!imgError ? (
            <Image
              src="/images/dashboard-hero.png"
              alt="LedgerOne dashboard preview"
              fill
              className="object-cover opacity-90"
              sizes="(max-width: 768px) 100vw, 480px"
              priority
              onError={() => setImgError(true)}
            />
          ) : (
            <div className="absolute inset-0 bg-gradient-to-br from-slate-800 via-slate-900 to-primary/20 flex items-center justify-center">
              <div className="text-center text-white/80 text-sm px-6">
                <p className="font-medium">Your dashboard</p>
                <p className="mt-1 opacity-80">Cash flow, insights, and AI predictions in one place.</p>
              </div>
            </div>
          )}
          <div className="absolute inset-0 bg-gradient-to-t from-slate-900/80 via-transparent to-transparent pointer-events-none" />
        </div>
        {/* Floating insight card */}
        <div className="absolute bottom-4 left-4 right-4 rounded-xl border border-emerald-400/30 bg-white/95 px-4 py-3 shadow-lg backdrop-blur-sm">
          <p className="text-xs text-slate-700 leading-relaxed">
            <span className="font-semibold text-emerald-600">AI insight:</span> Your runway is healthy. Safe to spend up to $2,400 this week.
          </p>
        </div>
      </motion.div>

      <p className="text-center text-xs text-muted-foreground">
        Join 50,000+ teams who trust LedgerOne for financial clarity.
      </p>
    </motion.div>
  );
}