/* How It Works page (how-it-works.html) */

const FULL_STEPS = [
  {
    n: "01",
    title: "Choose your unit",
    body: "Pick the size that fits what you're storing. Our size guide compares each unit to something familiar — a car boot, a garage, a triple garage — so you can match it to what you've got.",
    inline: { cta: "See sizes", href: "storage.html" },
    hint: "Not sure? Contact us and we'll recommend.",
  },
  {
    n: "02",
    title: "Book and pay online",
    body: "Create your account, sign the storage agreement digitally, and pay your first month. Takes about five minutes. We'll hold your unit while you complete signup so no-one books it under you.",
    meta: [["Time", "≈5 minutes"], ["Hold", "15-minute hold during signup"]],
  },
  {
    n: "03",
    title: "Book your move-in",
    body: "Choose a Friday or Saturday window for your move-in. Your manager will meet you at the unit, walk you through the facility and hand over access.",
    meta: [["Typical move-in", "15 minutes + your unload time"]],
  },
  {
    n: "04",
    title: "Access on your schedule",
    body: "When you need to visit your unit, request access through your account at least 24 hours ahead.",
    meta: [
      ["Standard", "Fri & Sat — no extra cost"],
      ["Premium callout", "Outside windows — $75/visit"],
      ["Short-notice", "Under 24 hours — $45/visit"],
    ],
  },
  {
    n: "05",
    title: "Move out when you're ready",
    body: "Give 14 days notice through your account. Book a move-out window the same way you booked move-in. On move-out day your manager will be there to confirm the unit is empty and close out your agreement.",
    meta: [["Notice", "14 days"], ["Exit fee", "None"]],
  },
];

const WHY_REASONS = [
  { tag: "Security", body: "A facility with a manager onsite for every visit is harder to misuse than one with a keypad and an empty office. Your stuff is safer." },
  { tag: "Service", body: "When you're there, you've got someone to ask. Trolley jammed? Need a hand? Found a problem? There's a human, not a number to call." },
  { tag: "Price", body: "Skipping a full-time onsite team means we can charge less for the storage and only charge extra for the times you genuinely need help outside hours." },
];

const FAQ_PREVIEW = [
  { 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." },
  { 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." },
  { 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." },
  { 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." },
];

const { useState: useStateH } = React;

const FAQBlock = ({ items }) => {
  const [open, setOpen] = useStateH(0);
  return (
    <div className="faq-list" role="list">
      {items.map((f, i) => (
        <div className={"faq-item" + (open === i ? " open" : "")} key={i} role="listitem">
          <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
            <span>{f.q}</span>
            <span className="faq-toggle"><Icon.Plus /></span>
          </button>
          <div className="faq-a"><div>{f.a}</div></div>
        </div>
      ))}
    </div>
  );
};

const HowItWorksPage = () => (
  <Page>
    <PageHero
      eyebrow="How it works"
      title="How Storage Cartel works."
      lede="Different on purpose. Easier where it counts."
    >
      <a className="btn btn-primary" href="book.html">Book Storage <Icon.Arrow /></a>
      <a className="btn btn-secondary on-dark" href="#why">Why we run it this way</a>
    </PageHero>

    {/* 5-step vertical */}
    <section className="section section--steel">
      <div className="container">
        <SectionHead eyebrow="The five steps" title="Signup to move-out." />
        <div className="vsteps">
          {FULL_STEPS.map((s) => (
            <article className="vstep" key={s.n}>
              <div className="num">{s.n}</div>
              <div>
                <h3>{s.title}</h3>
                <p>{s.body}</p>
                {s.inline && (
                  <a className="btn btn-secondary btn-sm" href={s.inline.href} style={{ marginTop: 8 }}>
                    {s.inline.cta} <Icon.Arrow size={14} />
                  </a>
                )}
                {s.hint && <p style={{ color: "var(--ink-2)", fontSize: 14, fontStyle: "italic", marginTop: 12 }}>{s.hint}</p>}
                {s.meta && (
                  <div className="meta">
                    {s.meta.map(([k, v], i) => <div key={i}><b>{k}</b><span>{v}</span></div>)}
                  </div>
                )}
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>

    {/* Why booked access */}
    <section className="section section--navy" id="why">
      <div className="container">
        <SectionHead eyebrow="The why" title="Why booked access?" lede="Three reasons. None of them about us." onDark />
        <div className="proof-list" style={{ borderTop: "2px solid var(--steel)" }}>
          {WHY_REASONS.map((r) => (
            <article className="proof-item" key={r.tag}>
              <div className="proof-num">{r.tag.toUpperCase()}</div>
              <p style={{ color: "rgba(244,246,249,0.85)", margin: 0 }}>{r.body}</p>
            </article>
          ))}
        </div>
        <p style={{ color: "rgba(244,246,249,0.7)", maxWidth: "60ch", marginTop: 32 }}>
          It also keeps the place clean, controlled and accountable — which matters more the longer you're with us.
        </p>
      </div>
    </section>

    {/* Urgent access */}
    <section className="section section--mist">
      <div className="container" style={{ display: "grid", gridTemplateColumns: "minmax(0, 0.9fr) minmax(0, 1.1fr)", gap: 56, alignItems: "start" }}>
        <SectionHead eyebrow="Urgent access" title="What if I need to get in now?" />
        <div style={{ fontSize: 17, color: "var(--ink-2)", lineHeight: 1.65 }}>
          <p>Request a premium callout through your account. If a manager is available, we'll confirm and meet you onsite. The callout fee is $75 and covers up to one hour.</p>
          <p style={{ color: "var(--ink)", fontWeight: 600 }}>Subject to availability.</p>
          <p>We can't always make it on an hour's notice, but most callouts inside business hours can be arranged same day.</p>
        </div>
      </div>
    </section>

    {/* FAQ preview */}
    <section className="section section--steel">
      <div className="container">
        <div className="faq">
          <div>
            <div className="eyebrow">Common questions</div>
            <h2>Quick answers.<br />Full FAQ if you want it.</h2>
            <p className="lede">Four of the most-asked. The rest live on the FAQ page.</p>
            <div style={{ marginTop: 24, display: "flex", gap: 12, flexWrap: "wrap" }}>
              <a className="btn btn-secondary btn-sm" href="faq.html">Full FAQ <Icon.Arrow size={14} /></a>
              <a className="btn btn-ghost btn-sm" href="contact.html">Ask us a question →</a>
            </div>
          </div>
          <FAQBlock items={FAQ_PREVIEW} />
        </div>
      </div>
    </section>

    <CTABand title="Make sense? Let's book your unit." lede="Five minutes. No bond. Move in this weekend." />
  </Page>
);

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