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("/about")({
  head: () => ({
    meta: [{ title: "About Us — SulejaMarket" }],
  }),
  component: AboutPage,
});

function AboutPage() {
  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">About Us</h1>
        <div className="bg-white p-8 rounded-lg border prose max-w-none text-neutral-600">
          <p className="mb-4">Welcome to SulejaMarket, Nigeria's premier destination for online shopping.</p>
          <p className="mb-4">We are dedicated to providing our customers with the best deals on electronics, fashion, groceries, and much more. Our platform connects thousands of trusted vendors with millions of shoppers across the country, ensuring a seamless and secure shopping experience.</p>
          <p>Our mission is to democratize commerce and make quality products accessible to everyone, everywhere.</p>
        </div>
      </main>
      
      <Footer />
    </div>
  );
}
