/* Vehicle Storage page (vehicle-storage.html) */

const CATEGORIES = [
  { title: "Boats & jet skis", body: "On-trailer storage with regular condition checks. Wash-down facilities by arrangement." },
  { title: "Caravans & camper trailers", body: "Off-season storage with battery checks available as an add-on." },
  { title: "Classic & collector cars", body: "Indoor storage with condition recording at intake. Climate-controlled options on enquiry." },
  { title: "Motorbikes", body: "Secure indoor storage, individually tied down. Suitable for daily riders or long-term storage." },
];

const VEHICLE_PRICING = [
  { type: "Motorbike", storage: "Indoor, secure", price: "$159/month" },
  { type: "Small boat / jet ski", storage: "Covered, on trailer", price: "$219/month" },
  { type: "Caravan / camper trailer", storage: "Outdoor secure", price: "$259/month" },
  { type: "Large boat (>5 m)", storage: "Covered, on trailer", price: "$329/month" },
  { type: "Classic car", storage: "Indoor, dedicated bay", price: "$399/month" },
  { type: "Climate-controlled options", storage: "On enquiry", price: "Quoted", muted: true },
];

const ADD_ONS = [
  "Battery maintenance — keep the caravan or boat ready to roll",
  "Tyre pressure checks at regular intervals",
  "Wash-down and detailing through partners (vehicle dependent)",
  "Pre-season prep and post-season storage prep",
  "Coordinated delivery to and from servicing",
];

const HOW = [
  { tag: "Condition recording", body: "At intake, your manager will document the vehicle's condition with photos and notes. At every premium-level service we update the record so you have a clear timeline of how the vehicle has been kept." },
  { tag: "Storage agreement", body: "Vehicle agreements include additional clauses around handling, insurance and access. We'll walk you through them at intake." },
  { tag: "Access", body: "Vehicle access is by appointment, same as personal storage. Most owners visit monthly or seasonally rather than weekly." },
];

const VEHICLE_FIELDS = [
  { key: "name", label: "Your name", required: true },
  { key: "email", label: "Email", type: "email", required: true },
  { key: "phone", label: "Phone", type: "tel", required: true },
  { key: "vehicleType", label: "Vehicle type", type: "select", required: true,
    placeholder: "Pick one",
    options: ["Motorbike", "Boat / jet ski", "Caravan / camper trailer", "Classic car", "Other"] },
  { key: "makeModel", label: "Make, model & length", required: true, full: true, placeholder: "e.g. 2018 Jayco Journey Pop-Top, 5.4 m" },
  { key: "duration", label: "Storage duration", type: "select", required: true,
    placeholder: "Pick one",
    options: ["Less than 3 months", "3–6 months", "6–12 months", "Long term"] },
  { key: "when", label: "When do you need it?", type: "select", required: true,
    placeholder: "Pick one",
    options: ["This month", "Next month", "2–3 months", "Just researching"] },
  { key: "notes", label: "Anything else we should know?", type: "textarea", required: false, full: true, placeholder: "Special handling, insurance specifics, anything we should know about the vehicle." },
];

const VehiclePage = () => (
  <Page>
    <PageHero
      eyebrow="Vehicle storage"
      title="Boat, caravan & vehicle storage."
      lede="Properly looked after. Properly documented. Because what you're storing matters."
    >
      <a className="btn btn-primary" href="#enquiry">Enquire about vehicle storage <Icon.Arrow /></a>
    </PageHero>

    {/* What we store */}
    <section className="section section--steel">
      <div className="container">
        <SectionHead eyebrow="What we store" title="Four kinds. All handled differently." />
        <div className="biz-segments">
          {CATEGORIES.map((c, i) => (
            <article className="biz-seg" key={i}>
              <h3>{c.title}</h3>
              <p>{c.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>

    {/* How vehicle storage works */}
    <section className="section section--navy">
      <div className="container">
        <SectionHead eyebrow="How it works" title="Vehicle storage is a different beast." lede="Three things matter more here than in personal storage." onDark />
        <div className="proof-list" style={{ borderTop: "2px solid var(--steel)" }}>
          {HOW.map((h) => (
            <article className="proof-item" key={h.tag}>
              <div className="proof-num">{h.tag.toUpperCase()}</div>
              <p style={{ color: "rgba(244,246,249,0.85)", margin: 0 }}>{h.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>

    {/* Pricing */}
    <section className="section section--steel">
      <div className="container">
        <SectionHead eyebrow="Indicative pricing" title="Where the numbers usually land." lede="Final quote at enquiry — depends on size, storage type and any add-ons." />
        <table className="price-table">
          <thead>
            <tr><th>Vehicle type</th><th>Storage type</th><th style={{ textAlign: "right" }}>From</th></tr>
          </thead>
          <tbody>
            {VEHICLE_PRICING.map((p, i) => (
              <tr key={i}>
                <td><div className="size-name" style={{ fontSize: 16 }}>{p.type}</div></td>
                <td>{p.storage}</td>
                <td style={{ textAlign: "right" }}>
                  <span className="price-cell" style={p.muted ? { color: "var(--blue)", fontSize: 16 } : null}>{p.price}</span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        <div className="price-foot">All prices indicative, include GST. Final quote provided at enquiry based on size and storage type.</div>
      </div>
    </section>

    {/* Add-on services */}
    <section className="section section--mist">
      <div className="container">
        <SectionHead eyebrow="Add-on services" title="Extras worth knowing about." lede="None are required. Pick what's relevant to the vehicle." />
        <div style={{ background: "#fff", border: "1px solid var(--line)", padding: 40, maxWidth: 800 }}>
          <TickList items={ADD_ONS} variant="tick" />
        </div>
      </div>
    </section>

    {/* Enquiry form */}
    <section className="section section--steel" id="enquiry">
      <div className="container">
        <div style={{ background: "#fff", border: "1px solid var(--line)", padding: "clamp(32px, 4vw, 64px)" }}>
          <SectionHead eyebrow="Vehicle storage enquiry" title="Tell us about the vehicle." lede="We'll come back within one business day with availability, a tailored quote and next steps." />
          <EnquiryForm fields={VEHICLE_FIELDS} submitLabel="Send enquiry" helperText="We respond within one business day." />
        </div>
      </div>
    </section>
  </Page>
);

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