/* Pricing page (pricing.html) */

const ROWS = [
  { name: "3 m² Small", best: "Boxes, seasonal items", price: "149", bookId: "small" },
  { name: "6 m² Medium", best: "One-bedroom apartment", price: "229", bookId: "medium" },
  { name: "9 m² Large", best: "Two-bedroom home", price: "299", bookId: "large" },
  { name: "12 m² Extra Large", best: "Three-bedroom home", price: "369", bookId: "xl" },
  { name: "18 m² Warehouse", best: "Four-bedroom home", price: "549", bookId: "warehouse" },
  { name: "Vehicle storage", best: "Boats, caravans, vehicles", price: "From $159 — enquire", bookId: "vehicle", isEnquire: true },
];

const INCLUDED = [
  "Secure, dry storage unit",
  "Online account and digital agreement",
  "Booked access on Fridays and Saturdays",
  "Free use of trolleys and loading equipment",
  "Manager-attended access at no extra cost",
  "Move-out notice: 14 days",
  "Month-to-month — cancel anytime with notice",
];

const NOT_PAID = [
  "No bond",
  "No security deposit",
  "No key deposit",
  "No setup or admin fee",
  "No exit fee",
  "No mandatory insurance markup (optional cover available)",
  "No automatic price increases without 60 days written notice",
];

const OPTIONAL = [
  { name: "Premium callout", desc: "Access outside standard Friday/Saturday windows", price: "$75 per visit" },
  { name: "Short-notice booking", desc: "Booking with less than 24 hours notice", price: "$45 per visit" },
  { name: "Delivery coordination", desc: "We arrange delivery to your unit from a third party", price: "From $90" },
  { name: "Pickup coordination", desc: "We arrange pickup from your address to your unit", price: "From $120" },
  { name: "Inventory photos", desc: "We photograph and catalogue items at intake", price: "$60 per session" },
  { name: "Move-in assistance", desc: "Onsite help unloading and placing items", price: "From $150 per hour" },
];

const PricingPage = () => (
  <Page>
    <PageHero
      eyebrow="Pricing"
      title="Pricing, the way it should be."
      lede="What you see is what you pay. No bond traps. No hidden fees. No price-on-application games."
    >
      <a className="btn btn-primary" href="book.html">Book Storage <Icon.Arrow /></a>
      <a className="btn btn-secondary on-dark" href="storage.html">See sizes &amp; diagrams</a>
    </PageHero>

    {/* Monthly storage prices */}
    <section className="section section--steel">
      <div className="container">
        <SectionHead eyebrow="Monthly storage" title="What you pay each month." lede="All units include the same things. Price is just the size." />
        <table className="price-table">
          <thead>
            <tr><th>Size</th><th>Best for</th><th style={{ textAlign: "right" }}>Monthly</th><th></th></tr>
          </thead>
          <tbody>
            {ROWS.map((r, i) => (
              <tr key={i}>
                <td><div className="size-name">{r.name}</div></td>
                <td>{r.best}</td>
                <td style={{ textAlign: "right" }}>
                  {r.isEnquire ? (
                    <span className="price-cell" style={{ color: "var(--blue)", fontSize: 16 }}>{r.price}</span>
                  ) : (
                    <span className="price-cell">${r.price}<span className="per">/mo</span></span>
                  )}
                </td>
                <td><a href={r.isEnquire ? "vehicle-storage.html" : `book.html?size=${r.bookId}`} className="book-cell">{r.isEnquire ? "Enquire →" : "Book →"}</a></td>
              </tr>
            ))}
          </tbody>
        </table>
        <div className="price-foot">All prices in AUD, include GST. Month-to-month — no lock-in.</div>
      </div>
    </section>

    {/* What's included vs what you won't pay */}
    <section className="section section--mist">
      <div className="container">
        <SectionHead eyebrow="The honest list" title="What's in. What's not." />
        <div className="included-grid">
          <div>
            <h3>What's included <span className="accent">→</span></h3>
            <TickList items={INCLUDED} variant="tick" />
          </div>
          <div>
            <h3>What you <span className="accent">won't</span> pay</h3>
            <TickList items={NOT_PAID} variant="cross" />
          </div>
        </div>
      </div>
    </section>

    {/* Optional services */}
    <section className="section section--steel">
      <div className="container">
        <SectionHead eyebrow="Optional services" title="Extras, if you want them." lede="Listed up front. Only charged when you choose them. None are required to use storage." />
        <table className="price-table">
          <thead>
            <tr><th>Service</th><th>What it is</th><th style={{ textAlign: "right" }}>Price</th></tr>
          </thead>
          <tbody>
            {OPTIONAL.map((o, i) => (
              <tr key={i}>
                <td><div className="size-name" style={{ fontSize: 16 }}>{o.name}</div></td>
                <td>{o.desc}</td>
                <td style={{ textAlign: "right", fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 18 }}>{o.price}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>

    {/* Payment explainer */}
    <section className="section section--mist">
      <div className="container" style={{ display: "grid", gridTemplateColumns: "minmax(0, 0.85fr) minmax(0, 1.15fr)", gap: 56 }}>
        <SectionHead eyebrow="Payment" title="How payment works." />
        <div style={{ fontSize: 17, color: "var(--ink-2)", lineHeight: 1.65 }}>
          <p>You pay the first month at signup and set up a card for monthly billing. Your card is charged automatically on your billing date.</p>
          <p>If a payment fails we'll let you know and try again in three days. You can update your card any time through your account.</p>
          <p style={{ color: "var(--ink)", fontWeight: 600, marginTop: 24 }}>That's the whole system.</p>
        </div>
      </div>
    </section>

    <CTABand title="Pick your size. Be done in five." lede="No bond. No surprise fees. Cancel any time with 14 days notice." />
  </Page>
);

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