/* Storage Options page (storage.html) */

const UNITS_FULL = [
  {
    size: "3", suffix: "m²", name: "Small",
    price: "149",
    blurb: "Roughly the boot of a large SUV.",
    fits: "15–20 boxes, a few seasonal items, sporting gear, or a small bedroom's worth of furniture.",
    dims: "1.5 × 2 m", scale: 0.42,
    bookId: "small",
  },
  {
    size: "6", suffix: "m²", name: "Medium",
    price: "229",
    blurb: "Roughly a single garage.",
    fits: "A one-bedroom apartment, the contents of a small move, or moderate business stock.",
    dims: "2 × 3 m", scale: 0.6,
    bookId: "medium",
  },
  {
    size: "9", suffix: "m²", name: "Large",
    price: "299",
    blurb: "Roughly one and a half garages.",
    fits: "A two-bedroom home, a small business inventory, or a renovation's worth of furniture.",
    dims: "3 × 3 m", scale: 0.78,
    bookId: "large",
  },
  {
    size: "12", suffix: "m²", name: "Extra Large",
    price: "369",
    blurb: "Roughly a double garage.",
    fits: "A two- to three-bedroom home, significant business stock, or a workshop's worth of tools and equipment.",
    dims: "3 × 4 m", scale: 0.92,
    bookId: "xl",
  },
  {
    size: "18", suffix: "m²", name: "Warehouse",
    price: "549",
    blurb: "Roughly a triple garage with high ceilings.",
    fits: "A four-bedroom home, serious business stock, or large vehicles with trailers.",
    dims: "3 × 6 m", scale: 1.0,
    bookId: "warehouse", drive: true,
  },
];

const INCLUDED = [
  "Secure dry unit",
  "Free use of trolleys onsite",
  "Online account",
  "Booked access",
];

/* SVG unit dimension diagram (isometric box) */
const UnitDiagram = ({ size, dims, drive }) => {
  const s = Math.max(0.5, Math.min(1.0, size / 18 * 0.9 + 0.3));
  const w = 180 * s, h = 100 * s;
  const cx = 220, cy = 160;
  return (
    <svg viewBox="0 0 440 280" width="100%" height="100%" style={{ maxHeight: 240 }}>
      {/* ground */}
      <line x1="20" y1="240" x2="420" y2="240" stroke="rgba(8,25,54,0.2)" strokeDasharray="4 4" />
      {/* unit floor (rotated rectangle) */}
      <g transform={`translate(${cx},${cy})`}>
        <polygon
          points={`${-w/2},0 ${w/2},0 ${w/2 + 32*s},-22*${s} ${-w/2 + 32*s},-22*${s}`.replace(/\*0\.\d+/g, m => '')}
          fill="#163059" opacity="0.2"
        />
        {/* back wall */}
        <polygon
          points={`${-w/2 + 32*s},${-22*s} ${w/2 + 32*s},${-22*s} ${w/2 + 32*s},${-h - 22*s} ${-w/2 + 32*s},${-h - 22*s}`}
          fill="#0E2244" stroke="rgba(244,246,249,0.25)"
        />
        {/* side wall */}
        <polygon
          points={`${-w/2},0 ${-w/2 + 32*s},${-22*s} ${-w/2 + 32*s},${-h - 22*s} ${-w/2},${-h}`}
          fill="#081936" stroke="rgba(244,246,249,0.25)"
        />
        {/* door / front opening */}
        <polygon
          points={`${-w/2},0 ${w/2},0 ${w/2},${-h} ${-w/2},${-h}`}
          fill={drive ? "#142B47" : "#142B47"}
          stroke="#EC3214" strokeWidth="2"
        />
        {/* door slats */}
        {[...Array(Math.floor(h / 12))].map((_, i) => (
          <line key={i} x1={-w/2} y1={-i * 12 - 6} x2={w/2} y2={-i * 12 - 6} stroke="rgba(244,246,249,0.18)" />
        ))}
        {/* dims label */}
        <text x="0" y={20} textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="12" letterSpacing="1.5" fill="#4a5567">{dims}</text>
      </g>
      {/* badge */}
      {drive && (
        <g transform="translate(280, 30)">
          <rect width="130" height="28" fill="#1C4E92" />
          <text x="10" y="19" fontFamily="Barlow Condensed, sans-serif" fontWeight="700" fontSize="12" letterSpacing="1.5" fill="#fff">DRIVE-UP ACCESS</text>
        </g>
      )}
    </svg>
  );
};

const SizeRow = ({ u }) => (
  <div className="size-row" id={u.bookId}>
    <div className="visual">
      <UnitDiagram size={parseInt(u.size)} dims={u.dims} drive={u.drive} />
    </div>
    <div className="info">
      <div className="meta">
        <h2>{u.size} m² · {u.name}</h2>
        <div className="price">${u.price}<span className="per">/month</span></div>
      </div>
      <div className="desc">{u.blurb}</div>
      <ul className="specs">
        <li><b>Fits</b><span>{u.fits}</span></li>
        <li><b>Dimensions</b><span>{u.dims}</span></li>
        <li><b>Inclusions</b><span>{INCLUDED.concat(u.drive ? ["Drive-up access where available"] : []).join(" · ")}</span></li>
      </ul>
      <a className="btn btn-primary" href={`book.html?size=${u.bookId}`}>Book this size <Icon.Arrow size={16} /></a>
    </div>
  </div>
);

const StoragePage = () => (
  <Page>
    <PageHero
      eyebrow="Storage options"
      title="Find a unit that fits."
      lede="All sizes, all prices — laid out plainly. Book the one that suits."
    >
      <a className="btn btn-primary" href="book.html">Book Storage <Icon.Arrow /></a>
      <a className="btn btn-secondary on-dark" href="pricing.html">Just the prices</a>
    </PageHero>

    <section className="section section--steel" style={{ paddingTop: 0 }}>
      <div className="container">
        {UNITS_FULL.map((u) => <SizeRow key={u.bookId} u={u} />)}

        {/* Vehicle row — different layout */}
        <div className="size-row">
          <div className="visual">
            <svg viewBox="0 0 440 280" width="100%" height="100%" style={{ maxHeight: 240 }}>
              <line x1="20" y1="240" x2="420" y2="240" stroke="rgba(8,25,54,0.2)" strokeDasharray="4 4" />
              <g transform="translate(220, 170)">
                {/* abstract caravan */}
                <rect x="-110" y="-60" width="180" height="56" fill="#0E2244" stroke="rgba(244,246,249,0.3)" />
                <polygon points="-110,-60 -130,-20 -110,-4" fill="#0E2244" stroke="rgba(244,246,249,0.3)" />
                <circle cx="-60" cy="0" r="10" fill="#081936" stroke="rgba(244,246,249,0.35)" />
                <circle cx="20" cy="0" r="10" fill="#081936" stroke="rgba(244,246,249,0.35)" />
                <rect x="-80" y="-46" width="22" height="22" fill="#163059" stroke="rgba(244,246,249,0.4)" />
                <rect x="-44" y="-46" width="22" height="22" fill="#163059" stroke="rgba(244,246,249,0.4)" />
                <rect x="-8" y="-46" width="22" height="22" fill="#163059" stroke="rgba(244,246,249,0.4)" />
                <rect x="28" y="-46" width="38" height="22" fill="#EC3214" />
                <text x="0" y="20" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="12" letterSpacing="1.5" fill="#4a5567">VEHICLE INTAKE</text>
              </g>
            </svg>
          </div>
          <div className="info">
            <div className="meta">
              <h2>Vehicle storage</h2>
              <div className="price" style={{ color: "var(--blue)" }}>By enquiry</div>
            </div>
            <div className="desc">Boats, caravans, classic cars, motorbikes and high-value vehicles.</div>
            <ul className="specs">
              <li><b>Includes</b><span>Managed intake with condition recording. Photos and notes at every premium service.</span></li>
              <li><b>Pricing</b><span>Depends on size and storage type. From $159/month for motorbikes.</span></li>
            </ul>
            <a className="btn btn-primary" href="vehicle-storage.html">Vehicle storage enquiry <Icon.Arrow size={16} /></a>
          </div>
        </div>
      </div>
    </section>

    {/* Size comparison table */}
    <section className="section section--mist">
      <div className="container">
        <SectionHead eyebrow="At a glance" title="Size comparison." lede="Same information, table form. Pick a row." />
        <table className="price-table">
          <thead>
            <tr><th>Size</th><th>Dimensions</th><th>Best for</th><th>From</th><th></th></tr>
          </thead>
          <tbody>
            {UNITS_FULL.map((u) => (
              <tr key={u.bookId}>
                <td><div className="size-name">{u.size} m² · {u.name}</div></td>
                <td><span className="dims">{u.dims}</span></td>
                <td>{u.fits}</td>
                <td><span className="price-cell">${u.price}<span className="per">/mo</span></span></td>
                <td><a href={`book.html?size=${u.bookId}`} className="book-cell">Book →</a></td>
              </tr>
            ))}
            <tr>
              <td><div className="size-name">Vehicle</div></td>
              <td><span className="dims">Various</span></td>
              <td>Boats, caravans, vehicles</td>
              <td><span className="price-cell" style={{ color: "var(--blue)" }}>Enquire</span></td>
              <td><a href="vehicle-storage.html" className="book-cell">Enquire →</a></td>
            </tr>
          </tbody>
        </table>
        <div className="price-foot">All prices include GST. Month-to-month. No lock-in.</div>
      </div>
    </section>

    {/* Helper section */}
    <section className="section section--steel">
      <div className="container" style={{ display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 0.8fr)", gap: 56, alignItems: "center" }}>
        <div>
          <SectionHead eyebrow="Not sure?" title="Tell us what you're storing." lede="We'll recommend a size. No pressure, no upselling — we'd rather you got it right." />
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          <a className="btn btn-primary" href="contact.html">Talk to us <Icon.Arrow size={16} /></a>
          <a className="btn btn-secondary" href="pricing.html">See full pricing details</a>
        </div>
      </div>
    </section>

    <CTABand title="Pick a size. Move in this weekend." lede="Five minutes. No bond. No surprise fees." />
  </Page>
);

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