"use client";

import { useState } from "react";
import FadeIn from "@/components/FadeIn";

const faqs = [
  {
    q: "How do I receive my license key?",
    a: "After completing your purchase through Stripe, your license key is emailed to the address you provided at checkout. Delivery is immediate upon payment confirmation.",
  },
  {
    q: "What is a license key and how does it work?",
    a: "A license key is a unique code that activates UIT on your machine. When you first launch the application, you enter your key and it binds to your hardware. No account creation or login is required.",
  },
  {
    q: "Can I use my license on multiple devices?",
    a: "Each license key is bound to a single machine (hardware ID). If you need to transfer your license to a new machine, contact support and we will reset your hardware binding.",
  },
  {
    q: "What happens when my license expires?",
    a: "Weekly and monthly licenses expire after their respective period. The application will notify you before expiry. You can renew at any time by purchasing a new license key.",
  },
  {
    q: "How do I renew my license?",
    a: "Simply purchase a new license key from the UIT pricing page. Enter it in the application when prompted and your access will be extended.",
  },
  {
    q: "How do I reset my hardware ID?",
    a: "Contact us via the Contact page or email support@verimundsolutions.com with your license key and a brief description of your situation. We will process your hardware reset promptly.",
  },
  {
    q: "Do you offer refunds?",
    a: "Due to the digital nature of license keys, all sales are final. If you experience a technical issue preventing the software from functioning, contact support and we will work to resolve it.",
  },
  {
    q: "Is UIT financial advice?",
    a: "No. UIT is an informational tool that provides algorithmic scoring and data analysis. Nothing produced by UIT constitutes financial advice or a recommendation to buy or sell any security. Always consult a licensed financial advisor before making investment decisions.",
  },
];

function Accordion({ q, a }: { q: string; a: string }) {
  const [open, setOpen] = useState(false);

  return (
    <div
      className="border-b cursor-pointer"
      style={{ borderColor: "#1a1a1a" }}
      onClick={() => setOpen(!open)}
    >
      <div className="flex items-center justify-between py-5 gap-4">
        <p className="text-sm font-medium" style={{ color: "#ffffff" }}>
          {q}
        </p>
        <span
          className="text-lg flex-shrink-0 transition-transform duration-200"
          style={{
            color: "#888888",
            transform: open ? "rotate(45deg)" : "none",
          }}
        >
          +
        </span>
      </div>
      {open && (
        <p className="text-sm pb-5 leading-relaxed" style={{ color: "#888888" }}>
          {a}
        </p>
      )}
    </div>
  );
}

export default function FAQ() {
  return (
    <section className="min-h-screen pt-32 pb-24 px-6">
      <div className="max-w-2xl mx-auto">
        <FadeIn>
          <p
            className="text-xs font-semibold uppercase tracking-widest mb-4"
            style={{ color: "#3a3a3a", letterSpacing: "0.2em" }}
          >
            Support
          </p>
          <h1
            className="text-4xl md:text-5xl font-semibold mb-4"
            style={{ letterSpacing: "-0.03em" }}
          >
            Frequently Asked Questions
          </h1>
          <p className="text-sm mb-12" style={{ color: "#888888" }}>
            Can&apos;t find what you&apos;re looking for?{" "}
            <a
              href="/contact"
              className="underline underline-offset-4 transition-colors duration-200"
              style={{ color: "#888888" }}
              onMouseEnter={(e) => (e.currentTarget.style.color = "#ffffff")}
              onMouseLeave={(e) => (e.currentTarget.style.color = "#888888")}
            >
              Contact us.
            </a>
          </p>
        </FadeIn>

        <FadeIn delay={0.1}>
          <div className="border-t" style={{ borderColor: "#1a1a1a" }}>
            {faqs.map((item) => (
              <Accordion key={item.q} {...item} />
            ))}
          </div>
        </FadeIn>
      </div>
    </section>
  );
}