"use client";

import { useRef } from "react";
import Image from "next/image";
import Link from "next/link";
import { motion, useInView } from "framer-motion";
import { ArrowRight, BadgeCheck } from "lucide-react";

const trustPoints = [
  "Full English support, no Japanese needed",
  "Foreign credit cards accepted",
  "Bilingual contracts and documentation",
];

export function WhyUsSection() {
  const ref = useRef<HTMLDivElement>(null);
  const isInView = useInView(ref, { once: true, amount: 0.1 });

  return (
    <motion.div
      ref={ref}
      initial={{ opacity: 0, y: 32 }}
      animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 32 }}
      transition={{ duration: 0.7, ease: "easeOut" as const }}
    >
      <div className="max-w-6xl mx-auto px-6 sm:px-10 lg:px-14 py-14 sm:py-16">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-14 items-center">
          <div className="relative w-full overflow-hidden rounded-2xl shadow-md border border-border/60 bg-card aspect-[3/2]">
            <Image
              src="/assets/images/Why_us.png"
              alt="Team collaborating with trust and excellence"
              fill
              className="object-cover"
              sizes="(max-width: 1024px) 100vw, 50vw"
            />
          </div>
          <div className="space-y-6">
            <div>
              <h2 className="text-2xl sm:text-3xl font-extrabold text-primary uppercase tracking-wide mb-3 font-heading">
                Built on Trust and Excellence
              </h2>
              <p className="text-xl sm:text-2xl font-semibold text-foreground leading-relaxed">
                For over two decades, we&apos;ve been helping foreigners, expats, and international
                businesses in Japan navigate the tech landscape with confidence.
              </p>
            </div>

            <ul className="space-y-3 text-foreground">
              {trustPoints.map(item => (
                <li key={item} className="flex items-center gap-3 text-base font-semibold">
                  <BadgeCheck className="h-5 w-5 text-primary" />
                  <span>{item}</span>
                </li>
              ))}
            </ul>
            <Link
              href="/about"
              className="inline-flex items-center gap-2 text-primary font-semibold hover:text-primary/80 transition-colors"
            >
              About our company
              <ArrowRight className="h-4 w-4" />
            </Link>
          </div>
        </div>
      </div>
    </motion.div>
  );
}
