import { createFileRoute, Link } from "@tanstack/react-router";
import { PageBanner } from "./about";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
import { HelpCircle } from "lucide-react";

export const faqs = [
  {
    q: "Where is Global Market Connections Co. Ltd based?",
    a: "Our head office is in City Mall, Juba, Republic of South Sudan. We are incorporated under the Companies Act 2012 and operate nationwide with international supply partners across air, road and port logistics.",
  },
  {
    q: "Which industries do you serve?",
    a: "We operate seven divisions: Food & Non-Food Supplies, Logistics & Transportation, Oil & Gas Supplies, Construction & Materials, Real Estate, Agricultural Farming, Stationery, and Office Supplies. We serve corporate, government, NGO and household clients.",
  },
  {
    q: "How do I request a quotation?",
    a: "Send a detailed enquiry via our Contact page, email info@globalmarketconnectionscoltd.com, or call +211 922 999 832. Our team typically responds within one business day with a tailored proposal.",
  },
  {
    q: "Do you deliver outside Juba?",
    a: "Yes. Our logistics network covers all ten states of South Sudan, with regular consignment runs to remote project sites. International freight is coordinated through partner air, road and port operators.",
  },
  {
    q: "Are you licensed and tax compliant?",
    a: "Yes. GMC holds a full operating licence, tax clearance and the certifications required under South Sudanese law. Documentation is available on request for tender and procurement processes.",
  },
  {
    q: "Can you handle bulk and long-term supply contracts?",
    a: "Absolutely. A significant share of our business is recurring framework agreements with corporate, NGO and government clients. We have the warehousing, fleet and team capacity to honour long-term commitments.",
  },
  {
    q: "What payment terms do you offer?",
    a: "Standard terms are 50% advance and 50% on delivery, with negotiable net-30 terms available for verified institutional clients under framework agreements.",
  },
  {
    q: "Do you supply stationery and office consumables?",
    a: "Yes. Our Stationery and Office Supplies divisions provides notebooks, pens, paper reams, filing systems, printer cartridges and full office set-ups for businesses, schools, NGOs and government offices — with bulk pricing and scheduled re-stocking available.",
  },
  {
    q: "Where exactly is your office located?",
    a: "We are located at City Mall, Juba, South Sudan. Walk-ins are welcome during office hours (Mon–Sat, 08:00–18:00) and our team is happy to discuss any enquiry in person.",
  },
  {
    q: "How can I reach the GMC team quickly?",
    a: "Call +211 922 999 832 or +211 912 999 832, email info@globalmarketconnectionscoltd.com, or visit us at City Mall, Juba. We aim to respond to every enquiry within one business day.",
  },
  {
    q: "Do you offer construction and engineering services in-house?",
    a: "Yes. Our construction division covers sourcing of materials, civil works, fit-out and complete project delivery — including EPC scopes for the oil & gas sector through our specialist team.",
  },
];

export const Route = createFileRoute("/faq")({
  head: () => ({
    meta: [
      { title: "FAQs — Global Market Connections Co. Ltd" },
      { name: "description", content: "Answers to common questions about Global Market Connections Co. Ltd — services, delivery, payment terms, licensing and procurement in South Sudan." },
      { property: "og:title", content: "Frequently Asked Questions — GMC" },
      { property: "og:description", content: "Everything you need to know before partnering with Global Market Connections Co. Ltd." },
      { name: "script:ld+json", content: JSON.stringify({
        "@context": "https://schema.org",
        "@type": "FAQPage",
        mainEntity: faqs.map((f) => ({
          "@type": "Question",
          name: f.q,
          acceptedAnswer: { "@type": "Answer", text: f.a },
        })),
      })},
    ],
  }),
  component: FAQPage,
});

function FAQPage() {
  return (
    <>
      <PageBanner title="Frequently Asked Questions" caption="Answers · guidance · clarity" />
      <section className="bg-ivory">
        <div className="container-classic grid gap-12 py-20 md:grid-cols-12">
          <aside className="md:col-span-4">
            <p className="text-xs uppercase tracking-[0.4em] text-gold">Need help?</p>
            <span className="gold-rule mt-4" />
            <h2 className="mt-5 font-serif text-3xl text-navy-deep">Common questions, answered with care.</h2>
            <p className="mt-4 text-muted-foreground">
              Can't find what you're looking for? Our team is one call or email away — we'd be
              delighted to walk you through any aspect of working with GMC.
            </p>
            <div className="mt-8 border-l-2 border-gold bg-card p-6">
              <HelpCircle className="text-gold" />
              <p className="mt-3 font-serif text-lg text-navy-deep">Still curious?</p>
              <p className="mt-2 text-sm text-muted-foreground">
                Reach our office in Juba on
                <a href="tel:+211922999832" className="block font-serif text-navy underline decoration-gold underline-offset-4">+211 922 999 832</a>
              </p>
              <Link to="/contact" className="mt-5 inline-flex bg-navy px-5 py-2.5 font-serif text-sm text-ivory hover:bg-navy-deep">
                Contact our team
              </Link>
            </div>
          </aside>
          <div className="md:col-span-8">
            <Accordion type="single" collapsible defaultValue="i-0" className="border-t border-border">
              {faqs.map((f, i) => (
                <AccordionItem key={f.q} value={`i-${i}`} className="border-b border-border">
                  <AccordionTrigger className="font-serif text-lg text-navy-deep hover:no-underline hover:text-gold py-6">
                    <span className="flex items-start gap-4">
                      <span className="font-serif text-sm text-gold pt-1.5">{String(i + 1).padStart(2, "0")}</span>
                      {f.q}
                    </span>
                  </AccordionTrigger>
                  <AccordionContent className="pl-10 pr-2 pb-6 text-base leading-relaxed text-muted-foreground">
                    {f.a}
                  </AccordionContent>
                </AccordionItem>
              ))}
            </Accordion>
          </div>
        </div>
      </section>
    </>
  );
}