/* Hero, Proof strip, Storage options preview */

const Hero = ({ variant = "split", showArt = true }) => {
  const isCentered = variant === "centered";
  return (
  <section className={"hero hero--" + variant} id="top">
    <div className="container">
      <div className={"hero-grid" + (isCentered || !showArt ? " hero-grid--single" : "")}>
        <div className={isCentered ? "hero-text hero-text--center" : "hero-text"}>
          <div className="eyebrow on-dark">Blairgowrie · Mornington Peninsula</div>
          <h1>
            Secure storage.<br />
            <span className="red">Modern</span> <span>rules.</span>
          </h1>
          <p className="lede">
            Professionally managed storage in Blairgowrie. Book online, controlled access,
            clear pricing — no surprises and no clipboards.
          </p>
          <div className="hero-ctas">
            <a className="btn btn-primary" href="#book">Book Storage <Icon.Arrow /></a>
            <a className="btn btn-secondary on-dark" href="#storage">See sizes &amp; pricing</a>
          </div>
          <div className="hero-trust">
            <span><span className="dot" /> Secure facility</span>
            <span><span className="dot" /> Fri &amp; Sat access</span>
            <span><span className="dot" /> Managed support</span>
            <span><span className="dot" /> Book online</span>
          </div>
        </div>
        {!isCentered && showArt && (
          <div>
            <HeroArt />
          </div>
        )}
      </div>
    </div>
  </section>
  );
};

const Proof = () => (
  <section className="proof" aria-labelledby="proof-h">
    <div className="container">
      <div className="proof-head">
        <h2 id="proof-h">What you get with Storage Cartel</h2>
        <div className="eyebrow" style={{ margin: 0 }}>The proposition · plainly</div>
      </div>
      <div className="proof-list">
        <article className="proof-item">
          <div className="proof-num">01 / Access</div>
          <h3>Booked access, not gate codes.</h3>
          <p>A manager attends every visit, so the facility stays controlled and your unit stays your unit.</p>
        </article>
        <article className="proof-item">
          <div className="proof-num">02 / Pricing</div>
          <h3>Transparent pricing.</h3>
          <p>The price you see is the price you pay. No bond traps, no surprise fees, no admin charges.</p>
        </article>
        <article className="proof-item">
          <div className="proof-num">03 / Support</div>
          <h3>Managed support.</h3>
          <p>Real help with deliveries, pickups, inventory and access — not just a key handed over and goodbye.</p>
        </article>
      </div>
    </div>
  </section>
);

// Unit cards
const UNITS = [
  { tag: "Small · 3 m²", title: "Boxes & gear", size: "3", unit: "m²", blurb: "Boxes, seasonal gear, a few pieces of furniture. Roughly the boot of a large SUV.", price: "149", note: "From / month", scale: 0.6 },
  { tag: "Medium · 6 m²", title: "Studio overflow", size: "6", unit: "m²", blurb: "Studio apartment contents. Renovator overflow. Roughly a single garage's worth.", price: "229", note: "From / month", scale: 0.8 },
  { tag: "Large · 12 m²", title: "Family home", size: "12", unit: "m²", blurb: "Two- to three-bedroom home contents, or business stock. Roughly a double garage.", price: "369", note: "From / month", scale: 1.0 },
  { tag: "Vehicle / Premium", title: "Boats, caravans, cars", size: "—", unit: "", blurb: "Boats, caravans, classic cars, high-value items. Managed intake with condition recording.", price: "Enquire", note: "By enquiry", scale: 1.1, isEnquire: true },
];

const UnitCard = ({ u }) => (
  <article className="unit-card">
    <div className="tag">{u.tag}</div>
    <div className="visual"><UnitGlyph scale={u.scale} /></div>
    <div className="size">{u.size}{u.unit && <sup>{u.unit}</sup>}</div>
    <p className="blurb">{u.blurb}</p>
    <div className="price">
      <div className="from">{u.note}</div>
      <div>
        {u.isEnquire ? (
          <span className="amt">Enquire</span>
        ) : (
          <>
            <span className="amt">${u.price}</span>
            <span className="per">/mo</span>
          </>
        )}
      </div>
    </div>
    <a className="book-link" href={u.isEnquire ? "#contact" : "#book"}>
      {u.isEnquire ? "Enquire about this" : "Book this size"} <Icon.Arrow size={14} />
    </a>
  </article>
);

const StorageOptionsPreview = () => (
  <section className="section section--steel" id="storage">
    <div className="container">
      <div className="section-head">
        <div className="eyebrow">Storage options</div>
        <h2>Pick a size that fits<br />what you've got.</h2>
        <p className="lede">Four ways in. Full grid, drawings and inclusions live on the Storage Options page.</p>
      </div>
      <div className="options-grid">
        {UNITS.map((u, i) => <UnitCard key={i} u={u} />)}
      </div>
      <div className="section-foot">
        <a className="btn btn-secondary" href="#storage-all">See all sizes <Icon.Arrow /></a>
      </div>
    </div>
  </section>
);

Object.assign(window, { Hero, Proof, StorageOptionsPreview });