/* Delivery & Pickup page (delivery.html) */

const STEPS = [
  { n: "01", title: "Tell us what's moving", body: "Rough volume, address, ideal date — anything we should know." },
  { n: "02", title: "We quote", body: "Within one business day, based on size and distance." },
  { n: "03", title: "We pick up", body: "At your booked time, with you or with someone you nominate." },
  { n: "04", title: "Straight to your unit", body: "Placed, secured, and documented." },
];

const CAN_MOVE = [
  "Boxes, household contents and furniture",
  "Business stock and equipment",
  "Anything that fits in a standard 6m moving truck",
];

const CANT_MOVE = [
  "Hazardous materials",
  "Live animals",
  "Items requiring specialist permits or certifications",
  "Vehicles (use the vehicle storage enquiry instead)",
];

const DELIVERY_FIELDS = [
  { key: "name", label: "Your name", required: true },
  { key: "phone", label: "Phone", type: "tel", required: true },
  { key: "email", label: "Email", type: "email", required: true },
  { key: "suburb", label: "Pickup suburb", required: true, placeholder: "e.g. Sorrento, Rye, Mornington" },
  { key: "moving", label: "Roughly what's moving?", type: "textarea", required: true, full: true, placeholder: "Volume, large items, anything tricky." },
  { key: "date", label: "Preferred move date", type: "date", required: false },
  { key: "customer", label: "Existing Storage Cartel account?", type: "select", required: true,
    placeholder: "Pick one",
    options: [
      { value: "yes", label: "Yes — existing customer" },
      { value: "no", label: "No — booking storage too" },
    ] },
];

const DeliveryPage = () => (
  <Page>
    <PageHero
      eyebrow="Delivery & pickup"
      title="Don't want to move it yourself?"
      lede="We'll handle it. Pickup from your place, straight to your unit."
    >
      <a className="btn btn-primary" href="#enquiry">Get a delivery quote <Icon.Arrow /></a>
      <a className="btn btn-secondary on-dark" href="storage.html">Pick a unit first</a>
    </PageHero>

    {/* How it works */}
    <section className="section section--steel">
      <div className="container">
        <SectionHead eyebrow="How it works" title="Four steps. No mystery." />
        <div className="steps" style={{ gridTemplateColumns: "repeat(4, 1fr)" }}>
          {STEPS.map((s) => (
            <article className="step" key={s.n} style={{ background: "var(--mist)", border: "1px solid var(--line)" }}>
              <div className="num">{s.n}</div>
              <h3 style={{ color: "var(--ink)" }}>{s.title}</h3>
              <p style={{ color: "var(--ink-2)" }}>{s.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>

    {/* What we can / can't move */}
    <section className="section section--mist">
      <div className="container">
        <SectionHead eyebrow="What we move" title="The honest list." />
        <div className="included-grid">
          <div>
            <h3>What we <span className="accent">can</span> move</h3>
            <TickList items={CAN_MOVE} variant="tick" />
          </div>
          <div>
            <h3>What we <span className="accent">won't</span> move</h3>
            <TickList items={CANT_MOVE} variant="cross" />
          </div>
        </div>
      </div>
    </section>

    {/* Pricing */}
    <section className="section section--steel">
      <div className="container" style={{ display: "grid", gridTemplateColumns: "minmax(0, 0.85fr) minmax(0, 1.15fr)", gap: 56 }}>
        <SectionHead eyebrow="Pricing" title="Why we don't list a flat price." />
        <div style={{ fontSize: 17, color: "var(--ink-2)", lineHeight: 1.65 }}>
          <p>Pricing is by quote because every move is different.</p>
          <p>Most pickups within the Mornington Peninsula area run between <b style={{ color: "var(--ink)" }}>$120 and $450</b> depending on volume, access difficulty and how much help you need at the other end.</p>
          <p style={{ color: "var(--ink)", fontWeight: 600 }}>We'll always quote up front. No surprises on the day.</p>
        </div>
      </div>
    </section>

    {/* Service area */}
    <section className="section section--mist">
      <div className="container" style={{ display: "grid", gridTemplateColumns: "minmax(0, 0.85fr) minmax(0, 1.15fr)", gap: 56 }}>
        <SectionHead eyebrow="Where we go" title="Service area." />
        <div style={{ fontSize: 17, color: "var(--ink-2)", lineHeight: 1.65 }}>
          <p>We cover the Mornington Peninsula from <b style={{ color: "var(--ink)" }}>Mornington</b> south to <b style={{ color: "var(--ink)" }}>Portsea</b>, and east as far as <b style={{ color: "var(--ink)" }}>Hastings</b>.</p>
          <div className="area-note">
            Outside this area? Ask us anyway — we can quote longer trips and we coordinate with reliable interstate movers for bigger jobs.
          </div>
        </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="Get a delivery quote" title="Tell us what's moving." lede="We'll come back within one business day with a quote." />
          <EnquiryForm fields={DELIVERY_FIELDS} submitLabel="Get my quote" helperText="We respond within one business day with a written quote and next steps." />
        </div>
      </div>
    </section>
  </Page>
);

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