import { createFileRoute } from "@tanstack/react-router";
import { Header } from "@/components/site/Header";
import { Footer } from "@/components/site/Footer";
import { SignInModal, CartDrawer, CheckoutFlow } from "@/components/site/Modals";
import { useState } from "react";

export const Route = createFileRoute("/faq")({
  head: () => ({
    meta: [{ title: "FAQs — SulejaMarket" }],
  }),
  component: FAQPage,
});

function FAQPage() {
  const [signInOpen, setSignInOpen] = useState(false);
  const [cartOpen, setCartOpen] = useState(false);
  const [checkoutOpen, setCheckoutOpen] = useState(false);

  return (
    <div className="min-h-screen bg-neutral-50 flex flex-col">
      <SignInModal open={signInOpen} onOpenChange={setSignInOpen} />
      <CartDrawer open={cartOpen} onOpenChange={setCartOpen} onCheckout={() => { setCartOpen(false); setCheckoutOpen(true); }} />
      <CheckoutFlow open={checkoutOpen} onOpenChange={setCheckoutOpen} />
      <Header onOpenCart={() => setCartOpen(true)} onOpenSignIn={() => setSignInOpen(true)} />
      
      <main className="flex-1 max-w-[800px] w-full mx-auto px-4 py-12">
        <h1 className="text-3xl font-bold mb-6 text-neutral-900">Frequently Asked Questions</h1>
        <div className="bg-white p-8 rounded-lg border prose max-w-none text-neutral-600 space-y-6">
          <div>
            <h2 className="text-lg font-bold text-neutral-900 mb-1">How do I place an order?</h2>
            <p>Simply browse our categories or use the search bar, add items to your cart, and proceed to checkout where you can enter your shipping and payment details.</p>
          </div>
          <div>
            <h2 className="text-lg font-bold text-neutral-900 mb-1">Is it safe to pay online?</h2>
            <p>Yes, all payments are securely processed by our payment partners like Paystack. We do not store your credit card information.</p>
          </div>
          <div>
            <h2 className="text-lg font-bold text-neutral-900 mb-1">Can I become a vendor?</h2>
            <p>Absolutely! Head over to the <a href="/vendor" className="text-orange-600 hover:underline">Sell on SulejaMarket</a> page to submit your application. Our team will review it within 48 hours.</p>
          </div>
          <div>
            <h2 className="text-lg font-bold text-neutral-900 mb-1">How can I contact customer service?</h2>
            <p>You can reach us by email at <a href="mailto:support@sulejamarket.ng" className="text-orange-600 hover:underline">support@sulejamarket.ng</a> or call us at 081 0265 8259.</p>
          </div>
        </div>
      </main>
      
      <Footer />
    </div>
  );
}
