/* FAQ page (faq.html) */

const { useState: useStateF } = React;

const CATEGORIES = [
  {
    id: "booking",
    label: "Category 01",
    title: "Booking & moving in",
    items: [
      { id: "move-in-speed", q: "How quickly can I move in?", a: "If you book before midnight on a Thursday, you can usually move in that Saturday. The minimum lead time is 24 hours." },
      { id: "hold", q: "Can I hold a unit while I decide?", a: "We hold the unit for 15 minutes while you complete signup. Beyond that, payment confirms the booking. If you need a longer hold, contact us — we can usually arrange it." },
      { id: "contract", q: "Do I need to sign a contract?", a: "You sign a digital storage agreement at signup. It's month-to-month — no fixed term, no lock-in." },
      { id: "id", q: "What ID do I need to provide?", a: "A current Australian driver's licence or passport. We confirm ID at move-in. Required for security and insurance." },
    ],
  },
  {
    id: "access",
    label: "Category 02",
    title: "Access",
    items: [
      { id: "when-access", q: "When can I access my unit?", a: "Standard access is Fridays and Saturdays, booked through your account at least 24 hours ahead. Premium callouts are available outside these windows for $75 per visit, subject to manager availability." },
      { id: "ahead", q: "How far ahead do I need to book access?", a: "At least 24 hours. Bookings inside 24 hours are treated as short-notice ($45 fee) and depend on manager availability." },
      { id: "missed", q: "What happens if I miss my appointment?", a: "We'll reach out to reschedule. A missed appointment is logged on your account. Repeated missed appointments may attract a $45 fee." },
      { id: "someone-else", q: "Can I send someone else to access my unit?", a: "Yes. Add an authorised person through your account — we'll verify their ID at access. You stay in control of who can come and go." },
      { id: "24-7", q: "Can I get 24/7 access?", a: "No — and that's deliberate. Manager-attended access is what keeps the facility secure and the rules consistent. If you need access outside standard windows, request a premium callout." },
    ],
  },
  {
    id: "pricing",
    label: "Category 03",
    title: "Pricing & payment",
    items: [
      { id: "hidden", q: "Are there any hidden fees?", a: "No. Monthly storage is what's shown on the pricing page. Premium services (callouts, deliveries, inventory work) are listed separately and only charged when you choose them." },
      { id: "bond", q: "Do I need to pay a bond or deposit?", a: "No bond, no security deposit, no key deposit. First month's rent at signup, then ongoing monthly billing." },
      { id: "billing", q: "How does monthly billing work?", a: "We charge your card on your billing date each month. You can update your card any time through your account. If a payment fails we'll notify you and retry in three days." },
      { id: "hardship", q: "What if my circumstances change and I can't pay?", a: "Contact us as early as you can. We're a small business — we'd much rather work something out than send debt to collections. Always reach out." },
      { id: "increase", q: "Can my price go up?", a: "Yes, but only with 60 days' written notice. We don't increase prices on existing customers without giving you time to decide." },
    ],
  },
  {
    id: "security",
    label: "Category 04",
    title: "Security & insurance",
    items: [
      { id: "secure", q: "How secure is the facility?", a: "Fully fenced, CCTV monitored, alarm system, and — most importantly — manager attended every time anyone is onsite. That last bit is what we think matters most." },
      { id: "insured", q: "Is my stuff insured?", a: "Your goods are not covered by our insurance — the facility is. You're responsible for insuring your own goods. We can point you to options if you don't already have cover." },
      { id: "incident", q: "What if something goes wrong?", a: "Tell us immediately. Every incident on site is logged against the unit and the customer. If we caused the problem, we'll deal with it directly. If it's an insurance matter, we'll provide the records you need." },
    ],
  },
  {
    id: "what-store",
    label: "Category 05",
    title: "What you can and can't store",
    items: [
      { id: "can", q: "What can I store?", a: "Almost anything dry, legal, and not perishable. Household goods, furniture, business stock, tools, documents, sports gear, seasonal items, collectibles." },
      { id: "cant", q: "What can't I store?", a: "Hazardous materials, flammables, live animals, illegal items, food, anything perishable. If you're unsure, ask before you bring it." },
      { id: "vehicle", q: "Can I store a vehicle?", a: "Yes, by enquiry. Vehicle storage works a little differently — see our Vehicle Storage page." },
    ],
  },
  {
    id: "move-out",
    label: "Category 06",
    title: "Moving out",
    items: [
      { id: "how-out", q: "How do I move out?", a: "Give 14 days notice through your account. Book a move-out window the same way you booked move-in." },
      { id: "exit", q: "Is there an exit fee?", a: "No. You pay for the days you've used and you're done." },
      { id: "abandon", q: "What if I leave items behind?", a: "We'll contact you to arrange collection or disposal. After 30 days of no contact, the agreement allows us to dispose of remaining items. We always try to reach you first." },
    ],
  },
];

const FAQItem = ({ item, open, onToggle }) => (
  <div className={"faq-item" + (open ? " open" : "")} id={item.id}>
    <button className="faq-q" onClick={onToggle} aria-expanded={open}>
      <span>{item.q}</span>
      <span className="faq-toggle"><Icon.Plus /></span>
    </button>
    <div className="faq-a"><div>{item.a}</div></div>
  </div>
);

const FAQPage = () => {
  const [openId, setOpenId] = useStateF(null);

  // Open the question matching window.location.hash on load
  React.useEffect(() => {
    const h = (window.location.hash || "").replace("#", "");
    if (h) setOpenId(h);
  }, []);

  return (
    <Page>
      <PageHero
        eyebrow="FAQ"
        title="Common questions."
        lede="Six categories. Twenty-something questions. Direct answers."
      >
        <a className="btn btn-primary" href="book.html">Book Storage <Icon.Arrow /></a>
        <a className="btn btn-secondary on-dark" href="contact.html">Ask us anything</a>
      </PageHero>

      <section className="section section--steel">
        <div className="container">
          <div className="faq-cats">
            {CATEGORIES.map((c) => (
              <section className="faq-cat" key={c.id} id={c.id}>
                <div className="cat-head">
                  <div className="lbl">{c.label}</div>
                  <h2>{c.title}</h2>
                </div>
                <div className="faq-list" style={{ borderTop: 0, marginTop: 16 }}>
                  {c.items.map((it) => (
                    <FAQItem
                      key={it.id}
                      item={it}
                      open={openId === it.id}
                      onToggle={() => setOpenId(openId === it.id ? null : it.id)}
                    />
                  ))}
                </div>
              </section>
            ))}
          </div>
        </div>
      </section>

      {/* Didn't find your answer */}
      <section className="section section--mist">
        <div className="container" style={{ display: "grid", gridTemplateColumns: "minmax(0, 1fr) auto", gap: 40, alignItems: "center" }}>
          <SectionHead eyebrow="Didn't find your answer?" title="Send it to us." lede="We come back within one business day." />
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <a className="btn btn-primary" href="contact.html">Contact us <Icon.Arrow size={16} /></a>
          </div>
        </div>
      </section>

      <CTABand title="Five minutes. One unit. Move in this weekend." />
    </Page>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<FAQPage />);
