"use client";

import { useState } from "react";

const FAQS = [
  {
    q: "Hangi exchange / chain'leri destekliyor?",
    a: "Şu an Hyperliquid (perpetuals + spot), Solana, Ethereum mainnet, Base. Sırada Arbitrum + Sui var.",
  },
  {
    q: "Alert'ler ne kadar hızlı?",
    a: "Hyperliquid WebSocket'inden direkt dinliyoruz. Pro tier'da ortalama latency <2 saniye. Free tier'da 6 saatlik delay var.",
  },
  {
    q: "Trade execute ediyor mu?",
    a: "Hayır. AltSignal sadece alert. Kararı ve execute'u sen yaparsın. Kalp atışı yüksek tutmak senin işin.",
  },
  {
    q: "Smart-money wallet'larını nasıl seçtiniz?",
    a: "On-chain PnL > $1M, son 6 ayda pozitif. Liste her hafta güncelleniyor. Pro tier'da curate edilmiş 100 wallet hazır, Plus'ta kendi listeni ekleyebilirsin.",
  },
  {
    q: "Crypto ile öderim, KYC var mı?",
    a: "USDC ile ödersen sadece email + Telegram. Kart ödemesi Polar.sh üzerinden, standart kart KYC'si.",
  },
  {
    q: "Cancel etmek kolay mı?",
    a: "Dashboard'dan tek tık. Hiçbir geri ödeme cycle'ı çalışmaz. Aktif sub bir sonraki billing'de durur.",
  },
];

export function FAQ() {
  const [open, setOpen] = useState<number | null>(0);
  return (
    <section id="faq" className="py-24 px-6 bg-ink-900/30">
      <div className="max-w-3xl mx-auto">
        <div className="text-center mb-12">
          <span className="text-accent-glow font-mono text-sm uppercase tracking-widest">
            FAQ
          </span>
          <h2 className="text-4xl md:text-5xl font-extrabold mt-3">
            Aklındaki soru.
          </h2>
        </div>
        <div className="space-y-3">
          {FAQS.map((f, i) => (
            <button
              key={i}
              onClick={() => setOpen(open === i ? null : i)}
              className="w-full text-left bg-ink-800/50 border border-white/10 hover:border-accent-500/30 rounded-xl p-5 transition"
            >
              <div className="flex justify-between items-center gap-4">
                <span className="font-semibold">{f.q}</span>
                <span className="text-accent-glow font-mono">
                  {open === i ? "−" : "+"}
                </span>
              </div>
              {open === i && (
                <p className="mt-3 text-white/60 text-sm">{f.a}</p>
              )}
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}