import { createFileRoute, Link } from "@tanstack/react-router";
import { MIN_BOXES, UNITS_PER_BOX, MIN_REFERENCES } from "@/lib/wholesale";

export const Route = createFileRoute("/wholesale-faq")({
  head: () => ({
    meta: [
      { title: "Wholesale FAQ — Right On Gloss" },
      { name: "description", content: "Minimum order, payment terms, shipping and returns for Right On Gloss wholesalers and distributors." },
      { property: "og:title", content: "Wholesale FAQ — Right On Gloss" },
      { property: "og:description", content: "Minimum order, payment, shipping and returns for wholesale partners." },
      { property: "og:type", content: "website" },
      { name: "twitter:card", content: "summary" },
    ],
  }),
  component: WholesaleFaq,
});

const SECTIONS: { title: string; items: [string, string][] }[] = [
  { title: "Minimum order", items: [
    ["What is the minimum order?", `${MIN_BOXES} boxes per order. Each box holds ${UNITS_PER_BOX} glosses, so the minimum is ${MIN_BOXES * UNITS_PER_BOX} units.`],
    ["Can I mix shades?", "Yes — each box is one shade, and you can mix different shades across your boxes."],
    ["What do I need to apply?", `Your business details, a copy of your business registration and at least ${MIN_REFERENCES} references or guarantors.`],
  ]},
  { title: "Payment terms", items: [
    ["How do I pay?", "Approved partners pay securely online by card through our order page at checkout."],
    ["When is payment due?", "Payment is due in full when you place your order. Orders are prepared once payment is confirmed."],
    ["Is there a wholesale discount?", "Yes, approved partners receive wholesale pricing shown on the distributor order page."],
  ]},
  { title: "Shipping", items: [
    ["How long does delivery take?", "Bulk orders are packed within 3–5 business days, then shipped. You'll receive tracking details by email."],
    ["Who pays for shipping?", "Shipping costs depend on your location and order size and are confirmed with you before dispatch."],
  ]},
  { title: "Returns", items: [
    ["Can I return a bulk order?", "Unopened, undamaged boxes can be returned within 14 days of delivery."],
    ["What if items arrive damaged?", "Report damaged or missing items within 7 days with photos and we'll replace them."],
  ]},
];

function WholesaleFaq() {
  return (
    <div className="mx-auto max-w-3xl px-5 py-12">
      <Link to="/wholesale" className="text-sm font-semibold text-primary">← Wholesale application</Link>
      <h1 className="mt-4 text-5xl font-semibold">Wholesale <em className="text-primary">FAQ</em></h1>
      {SECTIONS.map((s) => (
        <section key={s.title} className="mt-10">
          <h2 className="text-2xl font-semibold text-primary">{s.title}</h2>
          <div className="mt-3 space-y-3">
            {s.items.map(([q, a]) => (
              <details key={q} className="rounded-2xl bg-card p-5">
                <summary className="cursor-pointer list-none font-semibold">{q}</summary>
                <p className="mt-2 text-muted-foreground">{a}</p>
              </details>
            ))}
          </div>
        </section>
      ))}
      <div className="mt-12 flex flex-wrap gap-3">
        <Link to="/wholesale" className="btn-gloss">Apply now</Link>
        <Link to="/distributor" className="btn-outline">Approved partner? Place an order</Link>
      </div>
    </div>
  );
}