"use client";

import { useRef } from "react";
import Image from "next/image";
import { motion, useInView } from "framer-motion";
import { Download } from "lucide-react";
import { supportDownloads } from "@/features/landing-page/data";

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

  return (
    <motion.section
      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 }}
      className="py-14 sm:py-16"
    >
      <div className="mx-auto max-w-5xl px-6 sm:px-10 lg:px-14">
        <h2 className="text-center text-2xl sm:text-3xl font-extrabold text-foreground tracking-tight mb-2 font-heading">
          Remote Support
        </h2>
        <p className="text-center text-muted-foreground mb-8">
          Download one of these tools so our technicians can assist you remotely.
        </p>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
          {supportDownloads.map(tool => (
            <a
              key={tool.title}
              href={tool.href}
              target="_blank"
              rel="noopener noreferrer"
              className="group bg-card rounded-2xl border border-border/60 p-6 hover:border-primary/40 hover:shadow-md transition-all duration-200"
            >
              <div className="flex items-start gap-5">
                <div className="w-16 h-16 rounded-xl bg-muted/30 flex items-center justify-center shrink-0 overflow-hidden">
                  <Image
                    src={tool.image}
                    alt={tool.title}
                    width={48}
                    height={48}
                    className="object-contain"
                  />
                </div>
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2 mb-1">
                    <h3 className="font-bold text-foreground group-hover:text-primary transition-colors">
                      {tool.title}
                    </h3>
                    <Download className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" />
                  </div>
                  <p className="text-sm text-muted-foreground leading-relaxed mb-2">
                    {tool.description}
                  </p>
                  <p className="text-xs font-medium text-primary">{tool.useCase}</p>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </motion.section>
  );
}
