/* global React, ReactDOM */
const { useState, useEffect } = React;

// ---------------- Data ----------------
const PRODUCTS = [
  {
    sku: "BAND·201/316",
    name: "Band-It Band & Buckles",
    desc: "Stainless steel banding system. 201, 304 & 316 grades from 6.4mm to 19.0mm widths. The original since 1937.",
    tag: "Flagship",
    img: "assets/band-it-band.jpg",
    feature: true,
  },
  {
    sku: "ULT-LOK",
    name: "Ultra-Lok Hose Clamps",
    desc: "High-pressure stainless hose clamps. Smooth band, no perforations — won't damage hose under load.",
    img: "assets/ultra-lok-clamps.jpg",
  },
  {
    sku: "S75099",
    name: "S75099 Pneumatic Tool",
    desc: "Air-driven band tensioning tool. Tensions, cuts and crimps in one cycle. For high-volume installation.",
    tag: "Pro",
    img: "assets/band-it-tools.jpg",
  },
  {
    sku: "D504·D50489",
    name: "Bolt Clamps",
    desc: "Heavy-duty bolted band clamps for large diameters. Designed for repeat use on pipe and ducting.",
    img: "assets/d504-bolt-clamp.jpg",
  },
  {
    sku: "BLT·KS652",
    name: "Ball-Lok Ties",
    desc: "Stainless cable ties with self-locking ball mechanism. Installed with the KS652 hand tool.",
    tag: "New",
    img: "assets/ball-lok-ties.jpg",
  },
  {
    sku: "M211",
    name: "Scru-Seal Worm Drive",
    desc: "All-stainless worm-drive hose clamps for general-purpose sealing across the trades.",
    img: "assets/m211-scru-seal.jpg",
  },
  {
    sku: "NBN·POLE",
    name: "NBN Pole Fittings",
    desc: "Brackets, clamps and accessories engineered for telecommunications pole installation.",
    img: "assets/brackets-d310.jpg",
  },
  {
    sku: "ABS·5000",
    name: "Industrial Absorbents",
    desc: "Absorbent 5000 & SpillFixer granular media. Hazchem and oil spill kits for vehicle and factory.",
    img: "assets/20l-absorbent.jpg",
  },
  {
    sku: "PROMURA",
    name: "Promura Building Products",
    desc: "Bond Mate PVA bonding agent and the Promura range — Australian-manufactured under original ownership.",
    img: "assets/j001-j050.jpg",
  },
];

const CATALOGUES = [
  { code: "BIT-201", title: "Band-It 201 Stainless Steel Brochure", year: "2026", size: "2.4 MB" },
  { code: "BIT-316", title: "Band-It 316 Stainless Steel Brochure", year: "2026", size: "2.1 MB" },
  { code: "BIT-HOSE", title: "Band-It Hose Clamp Catalogue", year: "April 2024", size: "8.6 MB" },
  { code: "BIT-COMPLETE", title: "Band-It Complete Catalogue", year: "2022", size: "14.2 MB" },
  { code: "BIT-ELEC", title: "Band-It Band & Buckle Electrical", year: "2024", size: "5.8 MB" },
  { code: "BIT-TOOLS", title: "Band-It Tools & Instructions", year: "2024", size: "6.1 MB" },
  { code: "BIT-APPS", title: "Band-It Applications Guide", year: "2024", size: "4.7 MB" },
  { code: "PRO-CAT", title: "Promura Product Catalogue", year: "Sept 2024", size: "3.2 MB" },
];

const TIMELINE = [
  { year: "1966", title: "Union Engineering Supplies founded",
    body: "Established in Melbourne to import and distribute industrial banding and clamping systems. Original family ownership remains today, six decades later." },
  { year: "1978", title: "Sole Australian distributor for Band-It",
    body: "Appointed national distributor for the Band-It Company (USA) — the inventors of stainless steel preformed banding in 1937." },
  { year: "1995", title: "Promura range launched",
    body: "Diversified into Australian-manufactured building products and industrial absorbents under the Promura brand." },
  { year: "2014", title: "Springvale headquarters",
    body: "Moved into the purpose-built warehouse and distribution centre on McWilliam Street, Springvale VIC." },
  { year: "2024", title: "Ball-Lok Ties + new tool range",
    body: "Released stainless steel Ball-Lok cable ties with the KS652 installation tool, plus the 2024 Tools & Instructions catalogue." },
  { year: "2026", title: "60 years",
    body: "Celebrating six decades of service to Australian industry, infrastructure, telecommunications and manufacturing." },
];

// ---------------- Tweaks ----------------
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "red",
  "heroVariant": "split",
  "showHeritageBig": true,
  "compactNav": false
}/*EDITMODE-END*/;

const ACCENT_MAP = {
  red:      { accent: "oklch(0.55 0.19 28)",  ink: "oklch(0.42 0.18 28)",  bg: "oklch(0.96 0.04 28)"  },
  blue:     { accent: "oklch(0.50 0.16 245)", ink: "oklch(0.40 0.15 245)", bg: "oklch(0.96 0.03 245)" },
  amber:    { accent: "oklch(0.74 0.16 70)",  ink: "oklch(0.55 0.14 70)",  bg: "oklch(0.97 0.04 75)"  },
  graphite: { accent: "oklch(0.32 0.012 60)", ink: "oklch(0.22 0.012 60)", bg: "oklch(0.94 0.006 70)" },
};

// ---------------- App ----------------
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [spotTab, setSpotTab] = useState(0);

  useEffect(() => {
    const c = ACCENT_MAP[t.accent] || ACCENT_MAP.red;
    document.documentElement.style.setProperty("--accent", c.accent);
    document.documentElement.style.setProperty("--accent-ink", c.ink);
    document.documentElement.style.setProperty("--accent-bg", c.bg);
  }, [t.accent]);

  return (
    <>
      <UtilityBar />
      <Header compact={t.compactNav} />
      <Hero variant={t.heroVariant} />
      <TrustStrip />
      <ProductsSection />
      <Spotlight tab={spotTab} setTab={setSpotTab} />
      <Capabilities />
      <Catalogues />
      <Heritage big={t.showHeritageBig} />
      <Contact />
      <Footer />

      <TweaksPanel title="Tweaks" defaultOpen={false}>
        <TweakSection title="Brand accent">
          <TweakColor
            label="Signal colour"
            value={t.accent}
            onChange={(v) => setTweak("accent", v)}
            options={[
              { label: "Red",      value: "red",      color: "oklch(0.55 0.19 28)"  },
              { label: "Blue",     value: "blue",     color: "oklch(0.50 0.16 245)" },
              { label: "Amber",    value: "amber",    color: "oklch(0.74 0.16 70)"  },
              { label: "Graphite", value: "graphite", color: "oklch(0.32 0.012 60)" },
            ]}
          />
        </TweakSection>
        <TweakSection title="Hero">
          <TweakRadio
            label="Layout"
            value={t.heroVariant}
            onChange={(v) => setTweak("heroVariant", v)}
            options={[
              { label: "Split", value: "split" },
              { label: "Centered", value: "centered" },
            ]}
          />
        </TweakSection>
        <TweakSection title="Heritage">
          <TweakToggle
            label="Show big '60'"
            value={t.showHeritageBig}
            onChange={(v) => setTweak("showHeritageBig", v)}
          />
        </TweakSection>
        <TweakSection title="Navigation">
          <TweakToggle
            label="Compact nav"
            value={t.compactNav}
            onChange={(v) => setTweak("compactNav", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

// ---------------- Atoms ----------------
function ArrowRight({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" className="hero-arrow">
      <path d="M2.5 7h9M8 3.5L11.5 7 8 10.5" />
    </svg>
  );
}
function Download({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M7 2v8M3.5 6.5L7 10l3.5-3.5M2 12h10" />
    </svg>
  );
}

// ---------------- Utility / Header ----------------
function UtilityBar() {
  return (
    <div className="utility">
      <div className="container utility-row">
        <div className="utility-left">
          <span><span className="dot"></span>Open · Mon–Thu 7:30–17:00</span>
          <span className="hide-sm">Springvale VIC · Melbourne, Australia</span>
        </div>
        <div className="utility-right">
          <a href="tel:0395475833">03 9547 5833</a>
          <a href="mailto:sales@uespromura.com.au">sales@uespromura.com.au</a>
        </div>
      </div>
    </div>
  );
}

function Header({ compact }) {
  const links = compact
    ? [["Products", "#products"], ["Catalogues", "#catalogues"], ["About", "#heritage"], ["Contact", "#contact"]]
    : [["Products", "#products"], ["Featured", "#spotlight"], ["Capability", "#capability"], ["Catalogues", "#catalogues"], ["Heritage", "#heritage"], ["Contact", "#contact"]];
  return (
    <header className="header">
      <div className="container header-row">
        <a className="brand" href="#top">
          <div className="brand-mark">UP</div>
          <div className="brand-name">
            UES Promura
            <small>Industrial Supplies · Est 1966</small>
          </div>
        </a>
        <nav className="nav">
          {links.map(([label, href]) => <a key={href} href={href}>{label}</a>)}
          <a className="nav-cta" href="#contact">Request a quote <ArrowRight /></a>
        </nav>
      </div>
    </header>
  );
}

// ---------------- Hero ----------------
function Hero({ variant }) {
  const isCentered = variant === "centered";
  return (
    <section className="hero" id="top">
      <div className="container">
        <div className="hero-grid" style={isCentered ? { gridTemplateColumns: "1fr", textAlign: "left", paddingBottom: 60 } : {}}>
          <div>
            <span className="hero-heritage">
              <span className="hero-heritage-badge">60</span>
              <span>1966 — 2026 · Sixty Years</span>
            </span>
            <h1>
              Precision <span className="accent">stainless</span> banding,<br/>
              made to clamp <span className="line">anything.</span>
            </h1>
            <p className="hero-lede">
              UES Promura is the Australian distributor for Band-It® stainless steel clamping systems
              — and the Melbourne maker of the Promura industrial range. Six decades, original
              ownership, same warehouse on McWilliam Street.
            </p>
            <div className="hero-cta-row">
              <a className="btn btn-primary" href="#products">Browse products <ArrowRight /></a>
              <a className="btn btn-secondary" href="#catalogues"><Download /> 2026 catalogues</a>
              <a className="btn btn-ghost" href="tel:0395475833">Or call 03 9547 5833 <ArrowRight /></a>
            </div>
          </div>
          {!isCentered && (
            <div className="hero-media">
              <span className="hero-media-tag">Band-It · 201 SS · 12.7mm × 30.5m</span>
              <img src="assets/band-it-band.jpg" alt="Stainless steel banding" />
              <div className="hero-spec hero-spec-1">
                <span className="label">Tensile</span>
                <span className="value">2,400 N</span>
              </div>
              <div className="hero-spec hero-spec-2">
                <span className="label">Grades stocked</span>
                <span className="value">201 · 304 · 316</span>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

function TrustStrip() {
  return (
    <section className="trust">
      <div className="container">
        <div className="trust-row">
          <div className="trust-item">
            <div className="num">60<span style={{color: "var(--accent)"}}>.</span></div>
            <div className="label">Years in business</div>
          </div>
          <div className="trust-item">
            <div className="num">1,400+</div>
            <div className="label">Active line items</div>
          </div>
          <div className="trust-item">
            <div className="num">24h</div>
            <div className="label">Melbourne dispatch</div>
          </div>
          <div className="trust-item">
            <div className="num">100%</div>
            <div className="label">Original ownership</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------------- Products ----------------
function ProductsSection() {
  return (
    <section className="section" id="products">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">Product index · 01</div>
            <h2>Every clamp, every grade, every tool.</h2>
          </div>
          <p>
            From the Band-It stainless preformed banding we've shipped since 1978, through the
            Ball-Lok ties, to the Promura building line — all stocked in Melbourne, all available
            in commercial quantity.
          </p>
        </div>
        <div className="products-grid">
          {PRODUCTS.map((p) => (
            <article key={p.sku} className={`product ${p.feature ? "feature" : ""}`}>
              <div className="product-head">
                <span className="product-sku mono">{p.sku}</span>
                {p.tag && <span className="product-tag">{p.tag}</span>}
              </div>
              <div className="product-thumb">
                <img src={p.img} alt={p.name} />
              </div>
              <div>
                <h3>{p.name}</h3>
                <p className="desc">{p.desc}</p>
              </div>
              <span className="product-link">Specs & sizing <ArrowRight /></span>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------------- Spotlight ----------------
function Spotlight({ tab, setTab }) {
  const tabs = [
    {
      name: "201 Stainless",
      headline: "Band-It 201 Stainless. Built to stay tight.",
      lede: "Our highest-volume banding. Cold-rolled 201 stainless, pre-cut and stamped, supplied in coils. Lock it in with a Band-It buckle and the right tool — it does not loosen.",
      specs: [
        ["Material", "201 Stainless Steel"],
        ["Tensile", "1,275 MPa · min"],
        ["Widths", <>1/4" · 3/8" · 1/2" · 5/8" · 3/4"<span className="mono">/ 6.4–19.0mm</span></>],
        ["Coil length", "30.5m · 100ft standard"],
        ["Grades available", "201 · 304 · 316"],
      ],
      img: "assets/band-it-band.jpg",
    },
    {
      name: "S75099 Air Tool",
      headline: "S75099 Pneumatic Tool. Tension, cut, crimp.",
      lede: "The Band-It S75099 air-powered tool tensions banding to a calibrated load, cuts the tail flush and crimps the buckle — one trigger, one cycle. Designed for production lines and field crews.",
      specs: [
        ["Pressure", "90 PSI · 6.2 bar"],
        ["Tensile range", "0–2,400 N adjustable"],
        ["Air consumption", "6 CFM · 170 L/min"],
        ["Compatible bands", "12.7mm · 15.9mm · 19.0mm"],
        ["Mass", "1.85 kg"],
      ],
      img: "assets/band-it-tools.jpg",
    },
    {
      name: "Ball-Lok Ties",
      headline: "Ball-Lok Ties. Stainless cable ties, properly engineered.",
      lede: "Self-locking stainless steel ties for harsh environments. The ball-bearing locking mechanism re-tensions itself under load. Installed with the KS652 hand tool.",
      specs: [
        ["Material", "304 / 316 Stainless"],
        ["Widths", <>4.6 · 7.9 · 12.3 mm<span className="mono">/ 3 widths</span></>],
        ["Lengths", "127 mm – 838 mm"],
        ["Tool", "KS652 hand-tensioning"],
        ["Tensile (max)", "1,560 N"],
      ],
      img: "assets/ball-lok-ties.jpg",
    },
  ];
  const active = tabs[tab];
  return (
    <section className="spotlight" id="spotlight">
      <div className="container">
        <div className="spotlight-grid">
          <div className="spotlight-image">
            <img src={active.img} alt={active.name} />
          </div>
          <div>
            <div className="eyebrow">Featured · 02</div>
            <h2>{active.headline}</h2>
            <p className="spotlight-lede">{active.lede}</p>

            <div className="spotlight-tabs">
              {tabs.map((tt, i) => (
                <button
                  key={tt.name}
                  className={`spot-tab ${i === tab ? "active" : ""}`}
                  onClick={() => setTab(i)}
                >{tt.name}</button>
              ))}
            </div>

            <div className="spec-table">
              {active.specs.map(([k, v], i) => (
                <div key={i} className="spec-row">
                  <span className="spec-label">{k}</span>
                  <span className="spec-value">{v}</span>
                </div>
              ))}
            </div>
            <div className="spotlight-cta">
              <a className="btn btn-on-dark-primary" href="#contact">Order or enquire <ArrowRight /></a>
              <a className="btn btn-on-dark-secondary" href="#catalogues"><Download /> Datasheet (PDF)</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------------- Capabilities ----------------
function Capabilities() {
  const items = [
    { num: "01", title: "Held in Melbourne stock",
      body: "Over 1,400 active line items on the floor at McWilliam Street. If we list it, it ships from Springvale — not from overseas." },
    { num: "02", title: "Technical advice that's actually technical",
      body: "Sixty years of clamping problems solved. Send us your application, get a recommendation back from someone who's specified the same job before." },
    { num: "03", title: "Trade and commercial pricing",
      body: "Direct distributor pricing on Band-It across Australia. Volume terms, account terms, and freight-included options for stocked product." },
    { num: "04", title: "Original-ownership stability",
      body: "Same family business, same warehouse, same phone number since 1966. Your spec sheet from twelve years ago is still on file." },
    { num: "05", title: "Australian-made Promura line",
      body: "Bond Mate PVA, Absorbent 5000 and the Promura building range — manufactured here, packaged here, supported here." },
    { num: "06", title: "Compliance documentation",
      body: "Up-to-date SDS, certificates of conformity and tool manuals — sent with every order or downloadable from the catalogue index." },
  ];
  return (
    <section className="section" id="capability" style={{ background: "var(--bg-2)" }}>
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">Capability · 03</div>
            <h2>Six decades of doing this one thing well.</h2>
          </div>
          <p>
            UES Promura isn't a marketplace and it isn't a reseller. We import, we stock, we
            manufacture, and we answer the phone. Here's what that buys you.
          </p>
        </div>
        <div className="cap-grid">
          {items.map((it) => (
            <div key={it.num} className="cap">
              <span className="cap-num mono">{it.num} / 06</span>
              <h3>{it.title}</h3>
              <p>{it.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------------- Catalogues ----------------
function Catalogues() {
  return (
    <section className="section" id="catalogues">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">Library · 04</div>
            <h2>Catalogues, specs and tool manuals.</h2>
          </div>
          <p>
            Current Band-It and Promura literature, ready to download. Need a printed copy posted?
            Call the warehouse — we still send them.
          </p>
        </div>
        <div className="cat-grid">
          {CATALOGUES.map((c) => (
            <a key={c.code} className="cat-row" href="#">
              <div className="cat-thumb">
                <span className="cat-thumb-label">{c.code}</span>
                <span className="cat-thumb-stripe"></span>
              </div>
              <div className="cat-info">
                <div className="cat-title">{c.title}</div>
                <div className="cat-meta">PDF · {c.year} · {c.size}</div>
              </div>
              <div className="cat-action"><Download size={14} /></div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------------- Heritage ----------------
function Heritage({ big }) {
  return (
    <section className="section heritage" id="heritage">
      <div className="container">
        <div className="heritage-grid">
          <div className="heritage-left">
            <div className="eyebrow">Heritage · 05</div>
            {big && (
              <div className="heritage-big">
                60<sup>YR</sup>
              </div>
            )}
            <div className="heritage-tag">1966 — 2026 · Melbourne, Australia</div>
            <p style={{ marginTop: 24, color: "var(--ink-2)", maxWidth: 380, lineHeight: 1.55 }}>
              UES Promura — formerly Union Engineering Supplies — was founded in 1966 to import
              and distribute precision banding to Australian industry. Six decades later, still
              under the original ownership, still operating from the same purpose-built warehouse.
            </p>
          </div>
          <div className="timeline">
            {TIMELINE.map((t) => (
              <div key={t.year} className="tl-item">
                <div className="tl-year mono">{t.year}</div>
                <div>
                  <div className="tl-title">{t.title}</div>
                  <div className="tl-body">{t.body}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------------- Contact ----------------
function Contact() {
  return (
    <section className="section" id="contact">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">Contact · 06</div>
            <h2>Talk to the warehouse, not a chatbot.</h2>
          </div>
          <p>
            Have a part number, an application or a problem? Email, call, or drop the form —
            you'll get a real person, usually the same day.
          </p>
        </div>
        <div className="contact-grid">
          <div className="contact-card">
            <div className="contact-row">
              <span className="contact-label">Phone</span>
              <span className="contact-value">
                <a href="tel:0395475833">03 9547 5833</a>
                <small>International · +61 3 9547 5833</small>
              </span>
            </div>
            <div className="contact-row">
              <span className="contact-label">Email</span>
              <span className="contact-value">
                <a href="mailto:sales@uespromura.com.au">sales@uespromura.com.au</a>
                <small>Sales · technical · accounts</small>
              </span>
            </div>
            <div className="contact-row">
              <span className="contact-label">Address</span>
              <span className="contact-value">
                10–12 McWilliam Street
                <small>Springvale VIC 3171 · Melbourne</small>
              </span>
            </div>
            <div className="contact-row">
              <span className="contact-label">Hours</span>
              <div className="hours-table">
                <div className="hours-row"><span className="day">Office · Mon–Thu</span><span className="time">07:30 — 17:00</span></div>
                <div className="hours-row"><span className="day">Office · Fri</span><span className="time">07:30 — 16:00</span></div>
                <div className="hours-row"><span className="day">Warehouse · Mon–Fri</span><span className="time">07:30 — 15:00</span></div>
              </div>
            </div>
            <form className="enquiry" onSubmit={(e) => { e.preventDefault(); alert("Enquiry sent. We'll reply within one business day."); }}>
              <div className="row">
                <input type="text" placeholder="Name" required />
                <input type="text" placeholder="Company" />
              </div>
              <div className="row">
                <input type="email" placeholder="Email" required />
                <input type="tel" placeholder="Phone" />
              </div>
              <textarea placeholder="Tell us the application or paste a part number (e.g. C254, D504, S75099)…" required></textarea>
              <button type="submit" className="btn btn-primary">Send enquiry <ArrowRight /></button>
            </form>
          </div>
          <div className="map">
            <iframe
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3146.638152501166!2d145.16755699999996!3d-37.938883!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad614e26728ec63%3A0x3015df46d84be590!2sUES+Promura!5e0!3m2!1sen!2sau!4v1425701111613"
              title="UES Promura, Springvale Melbourne"
              loading="lazy"
            ></iframe>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------------- Footer ----------------
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <div className="brand">
              <div className="brand-mark">UP</div>
              <div className="brand-name">UES Promura<small>Industrial Supplies · Est 1966</small></div>
            </div>
            <p>
              Sole Australian distributor for Band-It® stainless banding and clamping systems
              since 1978. Manufacturer of the Promura industrial and building range.
            </p>
          </div>
          <div>
            <h4>Products</h4>
            <ul>
              <li><a href="#">Band-It Band & Buckles</a></li>
              <li><a href="#">Ultra-Lok Hose Clamps</a></li>
              <li><a href="#">S75099 Air Tool</a></li>
              <li><a href="#">Ball-Lok Ties</a></li>
              <li><a href="#">NBN Pole Fittings</a></li>
            </ul>
          </div>
          <div>
            <h4>Company</h4>
            <ul>
              <li><a href="#heritage">About / Heritage</a></li>
              <li><a href="#capability">Capability</a></li>
              <li><a href="#catalogues">Catalogues (PDF)</a></li>
              <li><a href="#">Photo gallery</a></li>
              <li><a href="#">Safety data sheets</a></li>
            </ul>
          </div>
          <div>
            <h4>Contact</h4>
            <ul>
              <li><a href="tel:0395475833">03 9547 5833</a></li>
              <li><a href="mailto:sales@uespromura.com.au">sales@uespromura.com.au</a></li>
              <li>10–12 McWilliam Street</li>
              <li>Springvale VIC 3171</li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 1966 — 2026 UES Promura Pty Ltd · All rights reserved</span>
          <span className="abn">ABN 55 155 859 127 · Melbourne, Australia</span>
        </div>
      </div>
    </footer>
  );
}

// ---------------- Boot ----------------
ReactDOM.createRoot(document.getElementById("root")).render(<App />);