"use client";

import { useRef } from "react";
import { ScrollReveal } from "@/components/ScrollReveal";
import { SectionScrollTitle } from "@/components/SectionScrollTitle";
import { GITEA_ISSUES_URL, SUPPORT_EMAIL } from "@/lib/plans";

type SupportCardProps = {
  title: string;
  description: string;
  href: string;
  cta: string;
  external?: boolean;
  hover: string;
  titleHover: string;
  linkClass: string;
  linkHover: string;
};

function SupportCard({
  title,
  description,
  href,
  cta,
  external,
  hover,
  titleHover,
  linkClass,
  linkHover,
}: SupportCardProps) {
  return (
    <a
      href={href}
      target={external ? "_blank" : undefined}
      rel={external ? "noopener noreferrer" : undefined}
      className={`group block rounded-xl border border-gray-700/50 bg-surface/80 p-6 backdrop-blur-sm transition-all duration-300 ${hover}`}
    >
      <h3
        className={`mb-2 text-lg font-semibold text-white transition-colors duration-300 ${titleHover}`}
      >
        {title}
      </h3>
      <p className="mb-4 text-sm leading-relaxed text-gray-400 transition-colors duration-300 group-hover:text-gray-300">
        {description}
      </p>
      <span
        className={`inline-flex text-sm font-medium transition-all duration-300 group-hover:underline ${linkClass} ${linkHover}`}
      >
        {cta}
      </span>
    </a>
  );
}

const SUPPORT_CARDS: SupportCardProps[] = [
  {
    title: "🛠️ Community & Self-Hosting",
    description:
      "Found a bug, want to request a feature, or need help setting up your Docker instance? Open an issue on our self-hosted Gitea.",
    href: GITEA_ISSUES_URL,
    cta: "Open Gitea Issues",
    external: true,
    hover:
      "hover:border-[#609926]/45 hover:bg-[#609926]/[0.06] hover:shadow-lg hover:shadow-[#609926]/20",
    titleHover: "group-hover:text-[#609926]",
    linkClass: "text-[#609926]",
    linkHover: "group-hover:text-[#7ab33a]",
  },
  {
    title: "📩 Billing & Premium Support",
    description:
      "Have questions about your Pro subscription, custom limits, or Enterprise inquiries? Drop us an email.",
    href: `mailto:${SUPPORT_EMAIL}`,
    cta: SUPPORT_EMAIL,
    hover:
      "hover:border-accent/50 hover:bg-accent/[0.06] hover:shadow-lg hover:shadow-accent/20",
    titleHover: "group-hover:text-accent",
    linkClass: "text-accent",
    linkHover: "group-hover:text-accent-hover",
  },
];

export function SupportSection() {
  const sectionRef = useRef<HTMLElement>(null);

  return (
    <section
      ref={sectionRef}
      id="support"
      className="relative scroll-mt-24 overflow-x-visible overflow-y-hidden px-6 pb-24 pt-24"
    >
      <SectionScrollTitle sectionRef={sectionRef} title="Support" />

      <div className="relative z-10 mx-auto max-w-4xl">
        <ScrollReveal>
          <h2 className="mb-4 text-center text-3xl font-bold text-white">Support</h2>
          <p className="mx-auto mb-10 max-w-2xl text-center text-gray-400">
            Community help for self-hosters, or reach us directly for billing and premium support.
          </p>
        </ScrollReveal>

        <div className="mx-auto mt-10 grid grid-cols-1 gap-8 text-left md:grid-cols-2">
          {SUPPORT_CARDS.map((card, index) => (
            <ScrollReveal
              key={card.title}
              direction={index === 0 ? "left" : "right"}
              delay={index * 120}
            >
              <SupportCard {...card} />
            </ScrollReveal>
          ))}
        </div>
      </div>
    </section>
  );
}