// Si Fashion — page modules
const { useState: _us, useEffect: _ue, useMemo, useRef: _ur } = React;

// ============================================================
// HOME
// ============================================================
function PageHome({ navigate, openEnquire, openBrand, showTiles }) {
  return (
    <div className="page-fade">
      <Hero
        onEnquire={() => openEnquire({})}
        navigate={navigate}
        heroImage="media/home-john-smedley.webp"
      />
      <Credibility />

      {/* Divisions */}
      <section className="section">
        <div className="wrap">
          <SectionHead
            eyebrow="Three divisions, one address"
            title={<>Representation, distribution<br/>and brand development.</>}
            right={
              <p className="lede">
                The Showroom by Si Fashion places international labels and homegrown
                talent into MENA's most considered retail rooms — from department
                stores to concept retailers, sneaker speciality and fashion e-commerce.
              </p>
            }
          />
          <div className="div-grid">
            {SF_DATA.divisions.map(d => <DivisionCard d={d} key={d.id} navigate={navigate} />)}
          </div>
        </div>
      </section>

      {/* Roster teaser */}
      <section className="section surface">
        <div className="wrap">
          <SectionHead
            eyebrow="Current roster"
            title={<>A roster built for the<br/>region's appetite.</>}
            right={
              <div style={{ display: "flex", flexDirection: "column", gap: 14, alignItems: "flex-start" }}>
                <p className="lede">
                  From Osaka denim to New York streetwear, Stockholm resortwear to
                  Dubai's own design talent — the roster rotates with the market.
                </p>
                <button className="btn ghost" onClick={() => navigate("brands")}>
                  See full roster · {SF_DATA.brands.length} brands <ArrowRight />
                </button>
              </div>
            }
          />
          <div className="brand-grid" style={{ background: "var(--border)" }}>
            {SF_DATA.brands.slice(0, 6).map(b =>
              <BrandCard b={b} key={b.slug} onOpen={openBrand} showTiles={showTiles} />
            )}
          </div>
        </div>
      </section>

      {/* Sports feature */}
      <section className="section">
        <div className="wrap">
          <div className="feature-card">
            <img src="media/sports-speciality.webp" alt="Sports speciality division" />
            <div className="veil"></div>
            <div className="content">
              <Eyebrow onDark>Sports Speciality Division</Eyebrow>
              <h2 style={{ marginTop: 18 }}>Built for performance.<br/><em>Structured for scale.</em></h2>
              <p style={{ marginTop: 18, color: "var(--on-primary-dim)", maxWidth: "44ch" }}>
                Sports brands placed with top-tier Middle East retailers through regional
                insight and a streamlined distribution model — from sneaker specialists to
                multi-door chains.
              </p>
              <div style={{ marginTop: 28 }}>
                <button className="btn on-dark" onClick={() => navigate("sports")}>
                  Sports Speciality <ArrowRight />
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Retail network */}
      <section className="section tight">
        <div className="wrap">
          <div className="col-2">
            <div>
              <Eyebrow>Retail Network · MENA</Eyebrow>
              <h2 style={{ marginTop: 18 }}>Placed where the<br/>region shops.</h2>
              <p className="lede" style={{ marginTop: 22 }}>
                Department stores, multi-brand boutiques, sneaker and sports speciality retailers,
                concept stores and the region's leading fashion e-commerce platforms.
              </p>
              <p style={{ color: "var(--ink-dim)", marginTop: 14, fontSize: 13 }}>
                Retailer names rendered as text; permissioned logos shown when confirmed.
              </p>
            </div>
            <div>
              <ul className="list-rule">
                {SF_DATA.retailers.map((r, i) => (
                  <li key={r.name}>
                    <span className="index">{String(i + 1).padStart(2, "0")}</span>
                    <span className="name">{r.name}</span>
                    <span className="tier">{r.tier}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      <HomeCTA openEnquire={openEnquire} />
    </div>
  );
}

function HomeCTA({ openEnquire }) {
  return (
    <section className="cta-band">
      <div className="wrap">
        <div>
          <span className="accent-rule"></span>
          <h2>Represent your brand in<br/>MENA — from Dubai out.</h2>
        </div>
        <div className="right">
          <p style={{ color: "var(--on-primary-dim)", maxWidth: "36ch" }}>
            Tell us about your label and where you want to place it.
            We'll come back with a structured plan within five working days.
          </p>
          <button className="btn on-dark" onClick={() => openEnquire({ type: "Represent my brand" })}>
            Connect With Us <ArrowRight />
          </button>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// SHOWROOM
// ============================================================
function PageShowroom({ navigate, openEnquire, showTiles, openBrand }) {
  return (
    <div className="page-fade">
      {/* Page hero */}
      <section className="section dark">
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(40px,5vw,80px)", alignItems: "end" }}>
            <div>
              <Eyebrow onDark>01 · The Showroom</Eyebrow>
              <h1 style={{ marginTop: 28, color: "var(--on-primary)" }}>
                A multi-brand showroom at <span style={{ color: "var(--accent)", fontStyle: "italic", fontWeight: 500 }}>d3.</span>
              </h1>
              <p className="lede" style={{ color: "var(--on-primary-dim)", marginTop: 28 }}>
                Established international labels, bridge brands, sports speciality,
                emerging streetwear, fast-paced fashion and upcoming designers —
                represented to MENA's most considered buyers.
              </p>
              <div style={{ marginTop: 32, display: "flex", gap: 12 }}>
                <button className="btn on-dark" onClick={() => openEnquire({ type: "Become a retailer" })}>
                  Book a showroom visit <ArrowRight />
                </button>
                <button className="btn ghost on-dark" onClick={() => navigate("brands")}>See roster</button>
              </div>
            </div>
            <div className="hero-media" style={{ aspectRatio: "4/5" }}>
              <img src="media/home-john-smedley.webp" alt="Showroom representation" />
            </div>
          </div>
        </div>
      </section>

      {/* Categories */}
      <section className="section">
        <div className="wrap">
          <SectionHead
            eyebrow="What we represent"
            title="Six categories. One room."
            right={<p className="lede">Each brand is represented to the channels its
              positioning and pricing fit. Nothing is over-distributed.</p>}
          />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, borderTop: "1px solid var(--border)", borderLeft: "1px solid var(--border)" }}>
            {[
              { t: "Established international labels", d: "Heritage and contemporary houses bringing the world to MENA." },
              { t: "Bridge brands", d: "Aspirational price-points; tight stories; serious sell-through." },
              { t: "Sports speciality", d: "Performance, lifestyle and sneaker — placed with channel-fit retailers." },
              { t: "Emerging streetwear", d: "Drop-led capsules and graphic-led programs from the world's reference cities." },
              { t: "Fast-paced fashion", d: "Trend-aware programs with the merchandising cadence to keep up." },
              { t: "Upcoming designers", d: "Homegrown and regional talent placed alongside the international roster." },
            ].map((c, i) => (
              <div key={c.t} style={{ padding: "28px 28px 32px", borderRight: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.18em", color: "var(--secondary)" }}>{String(i+1).padStart(2,"0")}</div>
                <h4 style={{ marginTop: 14, fontSize: 22 }}>{c.t}</h4>
                <p style={{ marginTop: 10, color: "var(--ink-dim)", fontSize: 14 }}>{c.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Distribution network */}
      <section className="section surface">
        <div className="wrap col-2">
          <div>
            <Eyebrow>Distribution model</Eyebrow>
            <h2 style={{ marginTop: 18 }}>Five channels. Considered placement.</h2>
            <p className="lede" style={{ marginTop: 22 }}>
              We pair brand DNA to the right room. A heritage knitwear house belongs
              in a different door than a graphic-led streetwear capsule — and we read
              both rooms.
            </p>
          </div>
          <ul className="list-rule">
            {SF_DATA.channels.map((c, i) => (
              <li key={c.code}>
                <span className="index">{String(i + 1).padStart(2, "0")}</span>
                <span className="name">{c.label}</span>
                <span className="tier">{c.code}</span>
              </li>
            ))}
          </ul>
        </div>
      </section>

      {/* Territories */}
      <section className="section dark">
        <div className="wrap">
          <SectionHead
            dark
            eyebrow="Territories"
            title={<>Thirteen markets covered<br/>from a single room.</>}
            right={<p className="lede" style={{ color: "var(--on-primary-dim)" }}>
              Each territory is mapped against channel mix, seasonal calendar and
              local retail behaviour. We build per-territory go-to-market plans, not
              copy-paste roll-outs.
            </p>}
          />
          <TerritoryGrid dark />
        </div>
      </section>

      <HomeCTA openEnquire={openEnquire} />
    </div>
  );
}

// ============================================================
// BRANDS
// ============================================================
function PageBrands({ openBrand, openEnquire, showTiles }) {
  const [cat, setCat] = _us("All");
  const [query, setQuery] = _us("");
  const filtered = useMemo(() => {
    return SF_DATA.brands.filter(b => {
      const okCat = cat === "All" || b.category === cat;
      const okQ = !query || (b.name + " " + b.origin + " " + b.note).toLowerCase().includes(query.toLowerCase());
      return okCat && okQ;
    });
  }, [cat, query]);

  return (
    <div className="page-fade">
      <section className="section dark tight">
        <div className="wrap">
          <Eyebrow onDark>02 · Roster</Eyebrow>
          <h1 style={{ marginTop: 24, color: "var(--on-primary)" }}>
            {SF_DATA.brands.length} brands, one MENA partner.
          </h1>
          <p className="lede" style={{ color: "var(--on-primary-dim)", marginTop: 22, maxWidth: "60ch" }}>
            The roster rotates with the market. Filter by category, search by name,
            and request a line sheet for any label.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="brand-toolbar">
            <div className="brand-filters">
              {SF_DATA.categories.map(c => (
                <button key={c} className={"chip" + (cat === c ? " on" : "")} onClick={() => setCat(c)}>{c}</button>
              ))}
            </div>
            <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
              <input
                type="search" placeholder="Search the roster"
                value={query} onChange={e => setQuery(e.target.value)}
                style={{
                  border: "1px solid var(--border)",
                  padding: "10px 14px",
                  fontFamily: "var(--font-body)",
                  fontSize: 13,
                  width: 240,
                  outline: "none",
                }}
              />
              <span className="brand-count">{filtered.length} of {SF_DATA.brands.length}</span>
            </div>
          </div>

          {filtered.length === 0 ? (
            <div style={{ padding: 80, textAlign: "center", color: "var(--ink-dim)" }}>No brands match this filter.</div>
          ) : (
            <div className="brand-grid">
              {filtered.map(b => <BrandCard b={b} key={b.slug} onOpen={openBrand} showTiles={showTiles} />)}
            </div>
          )}

          <p style={{ marginTop: 28, color: "var(--ink-dim)", fontSize: 13, maxWidth: "60ch" }}>
            Brand names and lookbook tiles shown for representation context.
            Tile rights are confirmed brand-by-brand; some cards intentionally render
            as text-only until permissions are finalised.
          </p>
        </div>
      </section>

      <HomeCTA openEnquire={openEnquire} />
    </div>
  );
}

// ============================================================
// SPORTS SPECIALITY
// ============================================================
function PageSports({ openEnquire }) {
  return (
    <div className="page-fade">
      <section className="section">
        <div className="wrap">
          <div className="feature-card" style={{ minHeight: 560 }}>
            <img src="media/sports-speciality.webp" alt="Sports speciality" />
            <div className="veil"></div>
            <div className="content" style={{ maxWidth: 620 }}>
              <Eyebrow onDark>Division · 02</Eyebrow>
              <h1 style={{ marginTop: 22, color: "var(--on-primary)" }}>
                Built for performance.<br/><span style={{ color: "var(--accent)", fontStyle: "italic", fontWeight: 500 }}>Structured for scale.</span>
              </h1>
              <p style={{ marginTop: 22, color: "var(--on-primary-dim)", maxWidth: "50ch" }}>
                A dedicated division placing sports brands with top-tier Middle East retailers
                through regional insight and a streamlined distribution model — from sneaker
                specialists to multi-door chains and digital-first commerce.
              </p>
              <div style={{ marginTop: 32 }}>
                <button className="btn on-dark" onClick={() => openEnquire({ type: "Sports speciality" })}>
                  Bring your sports brand to MENA <ArrowRight />
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Why */}
      <section className="section">
        <div className="wrap col-2">
          <div>
            <Eyebrow>Why a dedicated division</Eyebrow>
            <h2 style={{ marginTop: 18 }}>Sports retail moves on a different calendar.</h2>
            <p className="lede" style={{ marginTop: 22 }}>
              Performance launches, sneaker capsules, in-store training and run-club
              activations require a buyer relationship built on the category — not a
              fashion calendar with a sports SKU bolted on.
            </p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, borderTop: "1px solid var(--border)", borderLeft: "1px solid var(--border)" }}>
            {[
              { t: "Sneaker speciality", d: "Limited-release and capsule placement with the region's reference doors." },
              { t: "Multi-door sports", d: "Performance and lifestyle programs across regional chains." },
              { t: "Digital-first", d: "Marketplace and pure-play sports e-commerce activation." },
              { t: "Training & activation", d: "In-store and event programming around launches and seasons." },
            ].map((c, i) => (
              <div key={c.t} style={{ padding: 22, borderRight: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.18em", color: "var(--accent)" }}>{String(i+1).padStart(2,"0")}</div>
                <h4 style={{ marginTop: 12, fontSize: 18 }}>{c.t}</h4>
                <p style={{ marginTop: 8, color: "var(--ink-dim)", fontSize: 13 }}>{c.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section surface">
        <div className="wrap">
          <SectionHead
            eyebrow="Operating model"
            title="A streamlined route to MENA retail."
            right={<p className="lede">Discover, position, place, perform. Reporting cadence
              and replenishment built around the sports calendar.</p>}
          />
          <ProcessStrip />
        </div>
      </section>

      <HomeCTA openEnquire={openEnquire} />
    </div>
  );
}

// ============================================================
// BRAND DEVELOPMENT
// ============================================================
function PageBrandDev({ openEnquire }) {
  const services = [
    { t: "Market strategy", d: "Pricing architecture, channel mix and seasonal plan against the regional read." },
    { t: "Wholesale distribution", d: "Key-account onboarding, line sheet, market appointments and order management." },
    { t: "Brand representation", d: "Showroom hosting, buyer relationships, sell-in and sell-through tracking." },
    { t: "E-commerce activation", d: "Placement on the region's leading digital-first retailers and pure-plays." },
    { t: "Logistics", d: "Routing, duties, regional warehousing — operational ground-game without surprises." },
    { t: "Regional talent", d: "Positioning and retail placement support for homegrown MENA labels." },
  ];

  return (
    <div className="page-fade">
      <section className="section dark">
        <div className="wrap">
          <Eyebrow onDark>03 · Brand Development</Eyebrow>
          <h1 style={{ marginTop: 28, color: "var(--on-primary)", maxWidth: 16 + "ch" }}>
            Positioning. Placement. <span style={{ color: "var(--accent)", fontStyle: "italic", fontWeight: 500 }}>Performance.</span>
          </h1>
          <p className="lede" style={{ color: "var(--on-primary-dim)", marginTop: 28, maxWidth: "62ch" }}>
            End-to-end support across wholesale distribution, market strategy, logistics,
            e-commerce and brand representation — for international labels entering the
            region and homegrown talent scaling out of it.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <SectionHead
            eyebrow="What we do"
            title="Six services, configured to fit."
            right={<p className="lede">Engagements run from short market-entry sprints to multi-season
              representation. No template; the plan is built against the brand.</p>}
          />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, borderTop: "1px solid var(--border)", borderLeft: "1px solid var(--border)" }}>
            {services.map((s, i) => (
              <div key={s.t} style={{ padding: "28px 28px 36px", borderRight: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.18em", color: "var(--secondary)" }}>{String(i+1).padStart(2,"0")}</div>
                <h4 style={{ marginTop: 14, fontSize: 20 }}>{s.t}</h4>
                <p style={{ marginTop: 10, color: "var(--ink-dim)", fontSize: 14 }}>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section surface">
        <div className="wrap">
          <SectionHead
            eyebrow="Engagement"
            title={<>How an engagement<br/>actually unfolds.</>}
            right={<p className="lede">A typical brand-development engagement runs over four phases,
              with reporting cadence agreed at the outset.</p>}
          />
          <ProcessStrip />
        </div>
      </section>

      <HomeCTA openEnquire={openEnquire} />
    </div>
  );
}

// ============================================================
// ABOUT
// ============================================================
function PageAbout({ openEnquire }) {
  return (
    <div className="page-fade">
      <section className="section">
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: "clamp(32px, 5vw, 80px)", alignItems: "end" }}>
            <div>
              <Eyebrow>About Si Fashion</Eyebrow>
              <h1 style={{ marginTop: 28 }}>Thirty years of MENA, <span style={{ color: "var(--accent)", fontStyle: "italic", fontWeight: 500 }}>compounded.</span></h1>
            </div>
            <p className="lede">
              Si Fashion is a Dubai Design District distribution and brand-development
              partner with over thirty years of experience across the Middle East and
              North Africa. The company is part of RVS Group, founded in 1989.
            </p>
          </div>
        </div>
      </section>

      {/* Mission card on dark */}
      <section className="section dark">
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "240px 1fr", gap: "clamp(24px, 4vw, 64px)", alignItems: "start" }}>
            <Eyebrow onDark>Our mission</Eyebrow>
            <div>
              <p style={{ fontFamily: "var(--font-display)", fontSize: "clamp(24px, 2.6vw, 38px)", lineHeight: 1.2, color: "var(--on-primary)", letterSpacing: "-0.015em" }}>
                "To empower global fashion and sports brands with seamless access to
                the Middle East and beyond — through strategic distribution, local
                expertise, and a commitment to long-term growth."
              </p>
              <p style={{ marginTop: 24, color: "var(--accent)", fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.18em" }}>
                — Si Fashion · The Showroom by Si Fashion
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Values */}
      <section className="section dark" style={{ paddingTop: 0 }}>
        <div className="wrap">
          <SectionHead
            dark
            eyebrow="Our values"
            title="Four principles we trade on."
            right={<p className="lede" style={{ color: "var(--on-primary-dim)" }}>
              They show up in our showroom, our reporting cadence, and the way we
              talk to our retail partners on a Wednesday afternoon.
            </p>}
          />
          <div className="values">
            {SF_DATA.values.map(v => (
              <div className="value-card" key={v.title}>
                <div className="roman">{v.no}</div>
                <div>
                  <h4>{v.title}</h4>
                  <p>{v.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Heritage timeline */}
      <section className="section">
        <div className="wrap">
          <SectionHead
            eyebrow="Heritage"
            title="From 1989 to Dubai Design District."
            right={<p className="lede">Si Fashion sits inside a wider operator group with three
              decades of regional reach across distribution and retail.</p>}
          />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, borderTop: "1px solid var(--border)" }}>
            {[
              { y: "1989", t: "RVS Group founded", d: "Group operations begin — regional retail and distribution foundations." },
              { y: "2000s", t: "Distribution expansion", d: "Brand-by-brand expansion across the GCC and broader MENA." },
              { y: "2010s", t: "Showroom-first model", d: "Multi-brand showroom positioning; structured international roster." },
              { y: "Today", t: "d3 base · 13 territories", d: "Dubai Design District base; sports speciality + brand development divisions." },
            ].map((s, i) => (
              <div key={s.y} style={{ padding: "28px 24px 32px", borderRight: i < 3 ? "1px solid var(--border)" : 0 }}>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 28, fontWeight: 600, color: "var(--accent)" }}>{s.y}</div>
                <h4 style={{ marginTop: 10, fontSize: 18 }}>{s.t}</h4>
                <p style={{ marginTop: 8, color: "var(--ink-dim)", fontSize: 13 }}>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <HomeCTA openEnquire={openEnquire} />
    </div>
  );
}

// ============================================================
// CONTACT
// ============================================================
function PageContact({ openEnquire }) {
  const c = SF_DATA.contact;
  return (
    <div className="page-fade">
      <section className="section">
        <div className="wrap">
          <Eyebrow>Contact</Eyebrow>
          <h1 style={{ marginTop: 24 }}>Let's start a <span style={{ color: "var(--accent)", fontStyle: "italic", fontWeight: 500 }}>conversation.</span></h1>

          <div className="contact-grid" style={{ marginTop: 56 }}>
            <div className="contact-card">
              <Eyebrow onDark>Single official NAP</Eyebrow>
              <div className="row" style={{ marginTop: 18 }}>
                <div className="k">Phone</div>
                <a className="v" href={c.phoneHref}>{c.phone}</a>
              </div>
              <div className="row">
                <div className="k">Email</div>
                <a className="v small" href={c.emailHref}>{c.email}</a>
              </div>
              <div className="row">
                <div className="k">Address</div>
                <div className="v">{c.address}</div>
                <div style={{ color: "var(--on-primary-dim)", marginTop: 4 }}>{c.addressLine2}</div>
              </div>
              <div className="row">
                <div className="k">Hours</div>
                <div className="v small" style={{ color: "var(--on-primary-dim)" }}>By appointment</div>
              </div>

              <div className="pending">
                Map pin & published hours are released once the client confirms the
                exact suite label. Until then: appointments only via this page.
              </div>

              <div style={{ display: "flex", gap: 14, marginTop: 24 }}>
                <a className="link-arrow on-dark" href={c.instagram} target="_blank" rel="noreferrer">Instagram <ArrowRight /></a>
                <a className="link-arrow on-dark" href={c.linkedin} target="_blank" rel="noreferrer">LinkedIn <ArrowRight /></a>
              </div>
            </div>

            <div>
              <h3 style={{ marginBottom: 14 }}>What would you like to discuss?</h3>
              <p style={{ color: "var(--ink-dim)" }}>
                Pick the conversation that fits — we'll route your enquiry to the right
                team and reply within five working days.
              </p>
              <div style={{ display: "grid", gap: 12, marginTop: 22 }}>
                {[
                  { t: "Represent my brand", d: "I'm an international label looking for a MENA distribution partner." },
                  { t: "Become a retailer", d: "I run a retail door / e-commerce platform and want to stock the roster." },
                  { t: "Sports speciality", d: "I'm a sports brand looking for MENA placement and activation." },
                  { t: "Brand development", d: "I'm a homegrown label looking for positioning and placement support." },
                  { t: "Press / Lookbook", d: "Editorial enquiry, line sheet or asset request." },
                  { t: "Careers", d: "I'd like to be considered for current or future openings." },
                ].map(o => (
                  <button key={o.t} className="enq-type-btn" onClick={() => openEnquire({ type: o.t })}>
                    <span className="t">{o.t}</span>
                    <span className="d">{o.d}</span>
                  </button>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, {
  PageHome, PageShowroom, PageBrands, PageSports, PageBrandDev, PageAbout, PageContact,
  HomeCTA,
});