'use client'

import { useState } from 'react'

const GROUPS: { title: string; items: { q: string; a: string }[] }[] = [
  {
    title: 'About',
    items: [
      { q: 'What is Fitorza?', a: 'Fitorza is a health, fitness and wellness marketplace in Pakistan offering authentic medicines, supplements and wellness products from verified pharmacies, plus gym memberships, doctor and dietitian consultations, and lab tests — all in one place.' },
      { q: 'Are your products authentic?', a: 'Yes. All products are sourced from verified pharmacies and medical stores, stored under recommended conditions, and traceable to the manufacturer.' },
      { q: 'Do you deliver across Pakistan?', a: 'We deliver to major cities with reliable courier partners, and we are expanding coverage continuously.' },
    ],
  },
  {
    title: 'Orders',
    items: [
      { q: 'How can I place my order?', a: 'Add products to your cart, proceed to checkout, enter your delivery address and choose a payment method (cash on delivery or card). You will receive an order confirmation with a reference number.' },
      { q: 'How do I track my order?', a: 'Go to My Account → Orders to see the live status of every order you place.' },
      { q: 'Can I change my order details?', a: 'Contact support shortly after ordering. If the order has not yet been dispatched, address or item changes may be possible.' },
      { q: 'What can cause my order to be delayed?', a: 'Prescription verification, stock checks, payment confirmation or courier conditions can occasionally cause short delays.' },
    ],
  },
  {
    title: 'Payment',
    items: [
      { q: 'How can I pay?', a: 'We accept cash on delivery and card / online payments at checkout. Card orders are completed through a secure hosted payment page.' },
      { q: 'Are there discounts on online payments?', a: 'Promotional and bank-discount codes can be applied at checkout when available.' },
      { q: 'How can I claim a refund?', a: 'Eligible refunds are processed back to your original payment method per our refund policy. Contact support to start a request.' },
    ],
  },
  {
    title: 'Delivery',
    items: [
      { q: 'Do you offer free home delivery?', a: 'Yes — orders above Rs. 5,000 qualify for free delivery. Smaller orders have a standard delivery fee shown at checkout.' },
      { q: 'How long does delivery take?', a: 'Delivery time depends on your city and product availability; the estimate is shown at checkout and in your order details.' },
      { q: 'Is there a minimum order for delivery?', a: 'There is no strict minimum, but free delivery applies above the threshold shown at checkout.' },
    ],
  },
  {
    title: 'Medicines & Prescriptions',
    items: [
      { q: 'How do I upload a prescription?', a: 'Use the Upload Prescription page to add a clear photo. Our pharmacist reviews it and prepares your order.' },
      { q: 'What if I don\u2019t have a prescription?', a: 'OTC products can be ordered without one. Prescription-only medicines require a valid prescription before dispatch.' },
      { q: 'Do you have a monthly refill facility?', a: 'For long-term medication, reorder easily from your order history; recurring reminders help you stay on schedule.' },
    ],
  },
  {
    title: 'Returns',
    items: [
      { q: 'I want to return my purchase — what do I do?', a: 'Eligible items can be returned per our return policy. Contact support with your order reference to begin.' },
      { q: 'Can I exchange instead of returning?', a: 'Where stock allows, exchanges may be arranged. Contact support to check availability.' },
    ],
  },
]

function Item({ q, a }: { q: string; a: string }) {
  const [open, setOpen] = useState(false)
  return (
    <div className="card overflow-hidden">
      <button onClick={() => setOpen((v) => !v)} className="flex w-full items-center justify-between gap-3 px-4 py-3 text-left text-sm font-medium hover:bg-soft">
        {q}
        <svg className={`shrink-0 transition-transform ${open ? 'rotate-180' : ''}`} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="m6 9 6 6 6-6" /></svg>
      </button>
      {open && <div className="border-t border-hair px-4 py-3 text-sm text-muted">{a}</div>}
    </div>
  )
}

export default function FaqsPage() {
  return (
    <div className="container-x py-10">
      <h1 className="text-2xl font-extrabold">Frequently Asked Questions</h1>
      <p className="mt-1 text-sm text-muted">Everything you need to know about ordering, delivery, payments and prescriptions.</p>

      <div className="mt-8 grid gap-8 md:grid-cols-2">
        {GROUPS.map((g) => (
          <section key={g.title}>
            <h2 className="mb-3 text-lg font-bold">{g.title}</h2>
            <div className="space-y-2">
              {g.items.map((it) => <Item key={it.q} {...it} />)}
            </div>
          </section>
        ))}
      </div>
    </div>
  )
}