/* Business Storage page (business.html) */

const SEGMENTS = [
  {
    title: "Tradies & contractors",
    body: "Tools, materials and equipment off the ute and out of the garage. Drive-up access on larger units.",
    icon: <Icon.Vehicle />,
  },
  {
    title: "Ecommerce & retail",
    body: "Stock you've outgrown your garage for, without the rent of a commercial unit. Scale up or down month to month.",
    icon: <Icon.Business />,
  },
  {
    title: "Hospitality & holiday rentals",
    body: "Off-season furniture, linen and equipment for short-stay operators. Swap inventory in and out as seasons turn.",
    icon: <Icon.Holiday />,
  },
  {
    title: "Professional services",
    body: "Archived files, equipment and seasonal materials. Secure, accessible, and properly documented.",
    icon: <Icon.Card />,
  },
];

const BIZ_BENEFITS = [
  "Month-to-month — no commercial lease, no lock-in",
  "Tax-invoiceable monthly billing with proper GST documentation",
  "Multiple authorised users on one account",
  "Scheduled regular access if you visit weekly",
  "Coordinated deliveries — couriers and suppliers can drop to your unit",
  "Inventory records available as a managed service",
];

const BIZ_STEPS = [
  { n: "01", title: "Tell us what you need", body: "Brief form — size, type of stock, access pattern, any special requirements." },
  { n: "02", title: "We propose a fit", body: "Within one business day we'll come back with a recommended unit, price and any extras you'd benefit from." },
  { n: "03", title: "Set up and run", body: "Sign your agreement, set up authorised users, schedule regular access if you need it, and you're running." },
];

const BIZ_FIELDS = [
  { key: "business", label: "Business name", required: true, full: false },
  { key: "name", label: "Your name", required: true, full: false },
  { key: "email", label: "Email", type: "email", required: true, full: false },
  { key: "phone", label: "Phone", type: "tel", required: true, full: false },
  { key: "storing", label: "What are you storing?", type: "textarea", required: true, full: true, placeholder: "Tools, stock, seasonal furniture — give us a rough sense." },
  { key: "size", label: "Estimated unit size needed", type: "select", required: false,
    placeholder: "Not sure yet",
    options: [
      { value: "small", label: "Small (3 m²)" },
      { value: "medium", label: "Medium (6 m²)" },
      { value: "large", label: "Large (9 m²)" },
      { value: "xl", label: "Extra Large (12 m²)" },
      { value: "warehouse", label: "Warehouse (18 m²)" },
      { value: "unsure", label: "Not sure — recommend" },
    ] },
  { key: "when", label: "When do you need it?", type: "select", required: true,
    placeholder: "Pick one",
    options: ["ASAP", "Within a month", "In 1–3 months", "Just researching"] },
];

const BusinessPage = () => (
  <Page>
    <PageHero
      eyebrow="Business storage"
      title="Storage that runs like your business should."
      lede="Overflow space for tools, stock and seasonal inventory — without locking yourself into a lease."
    >
      <a className="btn btn-primary" href="#enquiry">Enquire about business storage <Icon.Arrow /></a>
      <a className="btn btn-secondary on-dark" href="pricing.html">See standard prices</a>
    </PageHero>

    {/* Who it's for */}
    <section className="section section--steel">
      <div className="container">
        <SectionHead eyebrow="Who it's for" title="Four kinds of business we host." />
        <div className="biz-segments">
          {SEGMENTS.map((s, i) => (
            <article className="biz-seg" key={i}>
              <div className="glyph">{s.icon}</div>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>

    {/* What you get */}
    <section className="section section--mist">
      <div className="container">
        <SectionHead eyebrow="What you get" title="The business-specific bits." lede="Same transparent pricing as personal storage, plus six things that matter when storage is part of how you operate." />
        <div style={{ background: "#fff", border: "1px solid var(--line)", padding: 40 }}>
          <TickList items={BIZ_BENEFITS} variant="tick" />
        </div>
      </div>
    </section>

    {/* How business storage works */}
    <section className="section section--navy">
      <div className="container">
        <SectionHead eyebrow="How it works" title="From enquiry to running." lede="Three steps. One business day." onDark />
        <div className="steps">
          {BIZ_STEPS.map((s) => (
            <article className="step" key={s.n}>
              <div className="num">{s.n}</div>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>

    {/* Pricing for business */}
    <section className="section section--steel">
      <div className="container" style={{ display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.1fr)", gap: 56, alignItems: "center" }}>
        <SectionHead eyebrow="Business pricing" title="The same prices. More invoicing options." />
        <div>
          <p style={{ fontSize: 17, color: "var(--ink-2)", lineHeight: 1.65 }}>
            The same transparent prices as personal storage, plus tax-invoiceable billing and multi-user account access at no extra charge.
          </p>
          <p style={{ fontSize: 17, color: "var(--ink-2)", lineHeight: 1.65 }}>
            For larger or specialised storage needs (over 18 m², frequent goods movement, special handling) we'll quote a tailored arrangement after we understand the use case.
          </p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 28 }}>
            <a className="btn btn-secondary" href="pricing.html">See standard prices <Icon.Arrow size={16} /></a>
            <a className="btn btn-ghost" href="#enquiry">Enquire about a tailored arrangement →</a>
          </div>
        </div>
      </div>
    </section>

    {/* Enquiry form */}
    <section className="section section--mist" id="enquiry">
      <div className="container">
        <div style={{ background: "#fff", border: "1px solid var(--line)", padding: "clamp(32px, 4vw, 64px)" }}>
          <SectionHead eyebrow="Start a conversation" title="Tell us about your business." lede="We'll come back within one business day with a proposed fit, a price, and any extras you'd benefit from. No call until you ask for one." />
          <EnquiryForm
            fields={BIZ_FIELDS}
            submitLabel="Send enquiry"
            helperText="We'll respond within one business day. No call until you ask for one."
          />
        </div>
      </div>
    </section>
  </Page>
);

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