// Hero, Trust, Services, Jurisdictions, Estimator, About, Offices, Guides, Footer.

const T = () => window.CBI18N[window.__cbLocale || "en"];

// ─── HERO ──────────────────────────────────────────────────────────────
function Hero({ onBook, onEstimate, locale }) {
  const t = T();
  return (
    <section className="cb-hero" data-screen-label="01 Hero">
      <div className="cb-wrap cb-hero__grid">
        <div className="cb-hero__copy">
          <span className="cb-eyebrow">{t.hero.eyebrow}</span>
          <h1 className="cb-h1">
            <span>{t.hero.h1a}</span>
            <span className="cb-h1__em">{t.hero.h1b}</span>
          </h1>
          <p className="cb-lede">{t.hero.sub}</p>
          <div className="cb-hero__cta">
            <CBButton kind="primary" icon="arrow" onClick={onBook}>{t.hero.cta1}</CBButton>
            <CBButton kind="ghost" icon="arrowUpRight" onClick={onEstimate}>{t.hero.cta2}</CBButton>
          </div>
          <div className="cb-hero__meta">{t.hero.meta}</div>
        </div>

        <div className="cb-hero__visual">
          <div className="cb-hero__photo">
            <img src="media/office-dubai-dwtc.webp" alt="Dubai World Trade Centre — Commitbiz HQ district" />
            <div className="cb-hero__caption">
              <span className="cb-hero__cap-eyebrow">HQ</span>
              <span className="cb-hero__cap-line">Dubai World Trade Centre · Sheikh Zayed Road</span>
            </div>
          </div>
          <div className="cb-hero__plate">
            <div className="cb-hero__plate-row">
              <span className="cb-hero__plate-k">Founded</span>
              <span className="cb-hero__plate-v">2007</span>
            </div>
            <div className="cb-hero__plate-row">
              <span className="cb-hero__plate-k">Team</span>
              <span className="cb-hero__plate-v">200+</span>
            </div>
            <div className="cb-hero__plate-row">
              <span className="cb-hero__plate-k">Clients</span>
              <span className="cb-hero__plate-v">1,000+</span>
            </div>
            <div className="cb-hero__plate-row">
              <span className="cb-hero__plate-k">Offices</span>
              <span className="cb-hero__plate-v">UAE · GCC · EU</span>
            </div>
          </div>
        </div>
      </div>

      {/* Ticker — like an advisory call-and-response */}
      <div className="cb-ticker">
        <div className="cb-ticker__inner">
          {Array.from({ length: 2 }).map((_, n) => (
            <div className="cb-ticker__group" key={n}>
              <span>Mainland</span><i>·</i>
              <span>Free zone</span><i>·</i>
              <span>Offshore</span><i>·</i>
              <span>Trade licensing</span><i>·</i>
              <span>Visa & PRO</span><i>·</i>
              <span>Corporate banking</span><i>·</i>
              <span>VAT & corporate tax</span><i>·</i>
              <span>ESR · UBO · AML</span><i>·</i>
              <span>Audit & assurance</span><i>·</i>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── TRUST STRIP ──────────────────────────────────────────────────────
function TrustStrip() {
  const items = window.CBDATA.trust;
  return (
    <section className="cb-trust" data-screen-label="02 Trust">
      <div className="cb-wrap">
        <div className="cb-trust__grid">
          {items.map((it, i) => (
            <div className="cb-trust__cell" key={i}>
              <div className="cb-trust__v">{it.v}</div>
              <div className="cb-trust__k">{it.k}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── SERVICES ──────────────────────────────────────────────────────────
function ServicesSection({ onEstimate, onBook }) {
  const t = T();
  const services = window.CBDATA.services;
  const [active, setActive] = useState(services[0].id);
  const cur = services.find(s => s.id === active);
  return (
    <Section id="services" tone="paper" screen="03 Services">
      <SectionHead num="01" eyebrow={t.services.eyebrow} title={t.services.title} sub={t.services.sub} />
      <div className="cb-svc__layout">
        <ul className="cb-svc__list">
          {services.map(s => (
            <li key={s.id}>
              <button
                onClick={() => setActive(s.id)}
                className={`cb-svc__item ${s.id === active ? "is-active" : ""}`}
                aria-pressed={s.id === active}
              >
                <span className="cb-svc__icon">{IconSet[SERVICE_ICON[s.id]]}</span>
                <span className="cb-svc__name">{s.name}</span>
                <span className="cb-svc__chev">{IconSet.arrow}</span>
              </button>
            </li>
          ))}
        </ul>

        <div className="cb-svc__detail" key={cur.id}>
          <div className="cb-svc__detail-head">
            <div className="cb-svc__detail-eyebrow">Service · {String(services.indexOf(cur) + 1).padStart(2, "0")} / 08</div>
            <h3 className="cb-h3">{cur.name}</h3>
            <p className="cb-svc__tagline">{cur.tagline}</p>
          </div>

          <div className="cb-svc__detail-grid">
            <div className="cb-svc__col">
              <div className="cb-svc__col-title">What's typically included</div>
              <ul className="cb-svc__check">
                {cur.typical.map((x, i) => <li key={i}><span>{IconSet.check}</span>{x}</li>)}
              </ul>
            </div>
            <div className="cb-svc__col">
              <div className="cb-svc__col-title">You'll need</div>
              <ul className="cb-svc__bullet">
                {cur.docs.map((x, i) => <li key={i}>{x}</li>)}
              </ul>
            </div>
            <div className="cb-svc__col cb-svc__col--meta">
              <div className="cb-svc__col-title">Typical duration</div>
              <div className="cb-svc__duration">{cur.duration}</div>
              <div className="cb-svc__cta">
                <CBButton kind="primary" icon="arrow" onClick={onBook}>{t.services.explore}</CBButton>
                <CBButton kind="ghost" icon="arrowUpRight" onClick={onEstimate}>{t.services.estimate}</CBButton>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Section>
  );
}

// ─── JURISDICTIONS ──────────────────────────────────────────────────────
function JurisdictionsSection() {
  const t = T();
  const rows = window.CBDATA.jurisdictionRows;
  const jurs = window.CBDATA.jurisdictions;
  const [pick, setPick] = useState("dubai-mainland");
  const picked = jurs.find(j => j.id === pick);
  return (
    <Section id="jurisdictions" tone="mist" screen="04 Jurisdictions">
      <SectionHead num="02" eyebrow={t.jur.eyebrow} title={t.jur.title} sub={t.jur.sub} />

      <div className="cb-cmp">
        <div className="cb-cmp__head">
          <div className="cb-cmp__col cb-cmp__col--label">{t.jur.compare}</div>
          <div className="cb-cmp__col"><div className="cb-cmp__tag cb-cmp__tag--main">Mainland</div></div>
          <div className="cb-cmp__col"><div className="cb-cmp__tag cb-cmp__tag--fz">Free zone</div></div>
          <div className="cb-cmp__col"><div className="cb-cmp__tag cb-cmp__tag--off">Offshore</div></div>
        </div>
        {rows.map((r, i) => (
          <div className="cb-cmp__row" key={r.id}>
            <div className="cb-cmp__col cb-cmp__col--label">{r.label}</div>
            <div className="cb-cmp__col">{r.mainland}</div>
            <div className="cb-cmp__col">{r.freezone}</div>
            <div className="cb-cmp__col">{r.offshore}</div>
          </div>
        ))}
        <div className="cb-cmp__note">{t.jur.note}</div>
      </div>

      <div className="cb-jpick">
        <div className="cb-jpick__head">
          <span className="cb-eyebrow">{t.jur.pick}</span>
          <h3 className="cb-h3">Pick where you want to operate.</h3>
        </div>
        <div className="cb-jpick__grid">
          <div className="cb-jpick__chips">
            {jurs.map(j => (
              <button key={j.id} className={`cb-jchip cb-jchip--${j.type} ${j.id === pick ? "is-on" : ""}`} onClick={() => setPick(j.id)}>
                <span className="cb-jchip__name">{j.name}</span>
                <span className="cb-jchip__type">{j.type}</span>
              </button>
            ))}
          </div>
          <div className="cb-jpick__card">
            <div className="cb-jpick__card-eyebrow">{picked.region} · {picked.type}</div>
            <h4 className="cb-h4">{picked.name}</h4>
            <div className="cb-jpick__authority"><span>Authorities · </span>{picked.authority}</div>
            <p className="cb-jpick__note">{picked.note}</p>
            <div className="cb-jpick__actions">
              <CBButton kind="primary" icon="arrow" href="#estimator">Estimate cost</CBButton>
              <CBButton kind="ghost" icon="arrowUpRight" href="#consult">Book consultation</CBButton>
            </div>
          </div>
        </div>
      </div>
    </Section>
  );
}

// ─── COST ESTIMATOR ───────────────────────────────────────────────────
function fmt(n) { return n.toLocaleString("en-AE", { maximumFractionDigits: 0 }); }

function EstimatorSection() {
  const t = T();
  const cfg = window.CBDATA.estimator;
  const jurs = window.CBDATA.jurisdictions;
  const [jur, setJur] = useState("dubai-mainland");
  const [visas, setVisas] = useState(2);
  const [office, setOffice] = useState("flexi");
  const [bundles, setBundles] = useState({ banking: true, accounting: false, "vat-ct": false });
  const [name, setName] = useState("");
  const [contact, setContact] = useState("");
  const [submitted, setSubmitted] = useState(false);

  const range = useMemo(() => {
    const base = cfg.base[jur] || [0, 0];
    const visaLow = cfg.perVisa[0] * visas;
    const visaHigh = cfg.perVisa[1] * visas;
    const off = cfg.officeAdders[office];
    let lo = base[0] + visaLow + off[0];
    let hi = base[1] + visaHigh + off[1];
    for (const k of Object.keys(bundles)) {
      if (bundles[k]) { lo += cfg.bundles[k][0]; hi += cfg.bundles[k][1]; }
    }
    return [lo, hi];
  }, [jur, visas, office, bundles]);

  const submit = (e) => {
    e.preventDefault();
    setSubmitted(true);
  };

  return (
    <Section id="estimator" tone="ink" screen="05 Cost estimator">
      <SectionHead num="03" eyebrow={t.est.eyebrow} title={t.est.title} sub={t.est.sub} />

      <form className="cb-est" onSubmit={submit}>
        <div className="cb-est__controls">
          <fieldset className="cb-est__field">
            <legend>{t.est.jur}</legend>
            <div className="cb-est__pills">
              {jurs.map(j => (
                <button type="button" key={j.id} onClick={() => setJur(j.id)} className={`cb-est__pill ${jur === j.id ? "is-on" : ""}`}>
                  {j.name}
                </button>
              ))}
            </div>
          </fieldset>

          <div className="cb-est__split">
            <fieldset className="cb-est__field">
              <legend>{t.est.visas} <span className="cb-est__num">{visas}</span></legend>
              <input type="range" min="0" max="10" value={visas} onChange={e => setVisas(+e.target.value)} className="cb-est__range" aria-label="Visas" />
              <div className="cb-est__rangeticks"><span>0</span><span>2</span><span>4</span><span>6</span><span>8</span><span>10</span></div>
            </fieldset>

            <fieldset className="cb-est__field">
              <legend>{t.est.office}</legend>
              <div className="cb-est__segs">
                {[
                  { id: "flexi", label: "Flexi-desk" },
                  { id: "shared", label: "Shared" },
                  { id: "private", label: "Private" },
                ].map(o => (
                  <button type="button" key={o.id} onClick={() => setOffice(o.id)} className={`cb-est__seg ${office === o.id ? "is-on" : ""}`}>
                    {o.label}
                  </button>
                ))}
              </div>
            </fieldset>
          </div>

          <fieldset className="cb-est__field">
            <legend>{t.est.addons}</legend>
            <div className="cb-est__addons">
              {[
                { id: "banking", label: "Corporate banking assistance" },
                { id: "accounting", label: "Accounting & audit retainer" },
                { id: "vat-ct", label: "VAT & corporate-tax filing" },
              ].map(b => (
                <label key={b.id} className={`cb-est__addon ${bundles[b.id] ? "is-on" : ""}`}>
                  <input type="checkbox" checked={bundles[b.id]} onChange={() => setBundles(s => ({ ...s, [b.id]: !s[b.id] }))} />
                  <span className="cb-est__addon-box">{IconSet.check}</span>
                  <span className="cb-est__addon-label">{b.label}</span>
                </label>
              ))}
            </div>
          </fieldset>
        </div>

        <aside className="cb-est__result">
          <div className="cb-est__result-eyebrow">{t.est.result}</div>
          <div className="cb-est__amount">
            <span className="cb-est__cur">AED</span>
            <span className="cb-est__val">{fmt(range[0])}</span>
            <span className="cb-est__dash">—</span>
            <span className="cb-est__val">{fmt(range[1])}</span>
          </div>
          <div className="cb-est__bar" aria-hidden="true">
            <div className="cb-est__bar-fill" />
          </div>

          <ul className="cb-est__breakdown">
            <li><span>Set-up & licence</span><span>{fmt(cfg.base[jur][0])}–{fmt(cfg.base[jur][1])}</span></li>
            <li><span>Visas × {visas}</span><span>{fmt(cfg.perVisa[0] * visas)}–{fmt(cfg.perVisa[1] * visas)}</span></li>
            <li><span>Office · {office}</span><span>{fmt(cfg.officeAdders[office][0])}–{fmt(cfg.officeAdders[office][1])}</span></li>
            {Object.keys(bundles).filter(k => bundles[k]).map(k => (
              <li key={k}><span>{k === "vat-ct" ? "VAT & CT" : k.charAt(0).toUpperCase() + k.slice(1)} add-on</span><span>{fmt(cfg.bundles[k][0])}–{fmt(cfg.bundles[k][1])}</span></li>
            ))}
          </ul>

          {!submitted ? (
            <div className="cb-est__leadform">
              <input type="text" placeholder="Your name" value={name} onChange={e => setName(e.target.value)} required />
              <input type="text" placeholder="Email or WhatsApp" value={contact} onChange={e => setContact(e.target.value)} required />
              <CBButton kind="accent" icon="arrow" className="cb-est__leadbtn">{t.est.submit}</CBButton>
            </div>
          ) : (
            <div className="cb-est__thanks">
              <span className="cb-est__thanks-icon">{IconSet.check}</span>
              <div>
                <strong>Saved.</strong>
                <div>A consultant will WhatsApp you within one business day to confirm the range against your activity.</div>
              </div>
            </div>
          )}

          <div className="cb-est__disclaimer">{t.est.disclaimer}</div>
        </aside>
      </form>
    </Section>
  );
}

// ─── ABOUT / TIMELINE / LEADERSHIP ────────────────────────────────────
function AboutSection() {
  const tl = window.CBDATA.timeline;
  const ld = window.CBDATA.leadership;
  return (
    <Section id="about" tone="paper" screen="06 About">
      <SectionHead num="04" eyebrow="Since 2007" title={(
        <span><span className="cb-quote-mark">"</span>The aim of business should be inclusion and enablement.<span className="cb-quote-mark">"</span></span>
      )} sub="Commitbiz began in DAFZA in 2007. Today, 200+ advisors operate across the UAE, the GCC and Europe — guiding founders through formation, licensing, banking, tax and compliance." />

      <div className="cb-tl">
        {tl.map((step, i) => (
          <article key={step.year} className={`cb-tl__step ${i % 2 === 1 ? "cb-tl__step--alt" : ""}`}>
            <div className="cb-tl__bar"><span className="cb-tl__dot" /><span className="cb-tl__line" /></div>
            <div className="cb-tl__body">
              <div className="cb-tl__year">{step.year}</div>
              <h4 className="cb-tl__title">{step.title}</h4>
              <p className="cb-tl__copy">{step.body}</p>
              {step.photo && <div className="cb-tl__photo"><img src={step.photo} alt={step.title} /></div>}
            </div>
          </article>
        ))}
      </div>

      <div className="cb-ld">
        <div className="cb-ld__head">
          <span className="cb-eyebrow">Leadership</span>
          <h3 className="cb-h3">Five named advisors anchor every engagement.</h3>
        </div>
        <div className="cb-ld__grid">
          {ld.map(p => (
            <article key={p.id} className="cb-ld__card">
              <div className="cb-ld__photo"><img src={p.photo} alt={p.name} /></div>
              <div className="cb-ld__body">
                <h5 className="cb-ld__name">{p.name}</h5>
                <div className="cb-ld__role">{p.role}</div>
                <p className="cb-ld__note">{p.note}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </Section>
  );
}

// ─── OFFICES ──────────────────────────────────────────────────────────
function OfficesSection() {
  const off = window.CBDATA.offices;
  const uae = off.filter(o => o.country === "UAE");
  const gcc = off.filter(o => ["Bahrain", "Qatar", "Oman"].includes(o.country));
  const eu = off.filter(o => o.country === "Romania");
  return (
    <Section id="offices" tone="mist" screen="07 Offices">
      <SectionHead num="05" eyebrow="Offices" title="UAE primary. GCC and Europe alongside." sub="Each office is distinct — addresses, suites and verification status listed honestly. Map coordinates pending client confirmation." />

      <div className="cb-off__group">
        <header className="cb-off__group-head">
          <span className="cb-off__group-tag">UAE · primary</span>
          <span className="cb-off__group-count">{uae.length} offices</span>
        </header>
        <div className="cb-off__grid">
          {uae.map(o => <OfficeCard key={o.id} o={o} primary={o.role === "Group HQ"} />)}
        </div>
      </div>

      <div className="cb-off__group">
        <header className="cb-off__group-head">
          <span className="cb-off__group-tag">GCC</span>
          <span className="cb-off__group-count">{gcc.length} offices</span>
        </header>
        <div className="cb-off__grid">
          {gcc.map(o => <OfficeCard key={o.id} o={o} />)}
        </div>
      </div>

      <div className="cb-off__group">
        <header className="cb-off__group-head">
          <span className="cb-off__group-tag">Europe</span>
          <span className="cb-off__group-count">{eu.length} office</span>
        </header>
        <div className="cb-off__grid">
          {eu.map(o => <OfficeCard key={o.id} o={o} />)}
        </div>
      </div>
    </Section>
  );
}
function OfficeCard({ o, primary }) {
  return (
    <article className={`cb-off__card ${primary ? "cb-off__card--primary" : ""}`}>
      <div className="cb-off__card-head">
        <span className="cb-off__flag" aria-hidden="true">{o.flag}</span>
        <div>
          <div className="cb-off__country">{o.country}</div>
          <h4 className="cb-off__city">{o.city}</h4>
        </div>
        {o.since && <span className="cb-off__since">since {o.since}</span>}
      </div>
      <div className="cb-off__role">{o.role}</div>
      <ul className="cb-off__addr">{o.addr.map((l, i) => <li key={i}>{l}</li>)}</ul>
      <div className="cb-off__actions">
        <a className="cb-off__pin" href="#contact">{IconSet.pin}<span>Get directions</span></a>
      </div>
    </article>
  );
}

// ─── GUIDES ───────────────────────────────────────────────────────────
function GuidesSection() {
  const guides = window.CBDATA.guides;
  return (
    <Section id="guides" tone="paper" screen="08 Guides">
      <SectionHead num="06" eyebrow="Resources" title="Founder‑grade guides — without the legal jargon." sub="Plain‑English explainers, checklists and decision tools. Reorganised so you find what you need in under a minute." />
      <div className="cb-gd__grid">
        {guides.map((g, i) => (
          <a className={`cb-gd__card ${i === 0 ? "cb-gd__card--feat" : ""}`} key={g.id} href="#guides">
            <div className="cb-gd__top">
              <span className="cb-gd__kind">{g.kind}</span>
              <span className="cb-gd__tag">{g.tag}</span>
            </div>
            <h4 className="cb-gd__title">{g.title}</h4>
            <div className="cb-gd__foot">
              <span className="cb-gd__read">{g.read}</span>
              <span className="cb-gd__arrow">{IconSet.arrowUpRight}</span>
            </div>
          </a>
        ))}
      </div>
    </Section>
  );
}

// ─── CONTACT / CONSULTATION ───────────────────────────────────────────
function ContactSection({ onBook }) {
  const c = window.CBDATA.contact;
  return (
    <Section id="contact" tone="ink" screen="09 Contact">
      <SectionHead num="07" eyebrow="Talk to a consultant" title="One conversation. Clear next steps." sub="Pick how you'd like to talk — WhatsApp is the fastest. The same consultant follows up across channels." />

      <div className="cb-ct">
        <div className="cb-ct__channels">
          <a className="cb-ct__channel" href={`https://wa.me/${c.whatsapp}?text=Hi%20Commitbiz%2C%20I%27d%20like%20to%20enquire%20about%20...`}>
            <span className="cb-ct__icon">{IconSet.whatsapp}</span>
            <span className="cb-ct__label">WhatsApp</span>
            <span className="cb-ct__v">+{c.whatsapp}</span>
            <span className="cb-ct__hint">Monitored Sun–Thu</span>
          </a>
          <a className="cb-ct__channel" href={`tel:${c.mobile.replace(/\s/g, '')}`}>
            <span className="cb-ct__icon">{IconSet.phone}</span>
            <span className="cb-ct__label">Direct line</span>
            <span className="cb-ct__v">{c.mobile}</span>
            <span className="cb-ct__hint">Mobile · Manu Thomas V's team</span>
          </a>
          <a className="cb-ct__channel" href={`mailto:${c.email}`}>
            <span className="cb-ct__icon">{IconSet.mail}</span>
            <span className="cb-ct__label">Email</span>
            <span className="cb-ct__v">{c.email}</span>
            <span className="cb-ct__hint">Replies within one business day</span>
          </a>
        </div>

        <aside className="cb-ct__hq">
          <div className="cb-ct__hq-eyebrow">Dubai HQ</div>
          <h4 className="cb-h4">Exhibition Tower, DWTC</h4>
          <p className="cb-ct__hq-addr">
            {c.address.line1}<br />
            {c.address.line2}<br />
            {c.address.line3}<br />
            {c.address.poBox}
          </p>
          <div className="cb-ct__hq-hours"><span>{IconSet.globe}</span>{c.hours}</div>
          <CBButton kind="accent" icon="arrow" onClick={onBook}>Book a free consultation</CBButton>
          <div className="cb-ct__hq-note">⚠ Two Dubai landlines on file — primary to be confirmed. The mobile + WhatsApp above are live channels today.</div>
        </aside>
      </div>
    </Section>
  );
}

// ─── FOOTER ──────────────────────────────────────────────────────────
function Footer() {
  const c = window.CBDATA.contact;
  return (
    <footer className="cb-foot" data-screen-label="10 Footer">
      <div className="cb-wrap">
        <div className="cb-foot__top">
          <div className="cb-foot__brand">
            <CBLogo mono size={32} />
            <p className="cb-foot__pitch">Business setup, licensing, visas, banking, tax and compliance across the UAE and the wider GCC.</p>
          </div>
          <div className="cb-foot__cols">
            <div>
              <h6>Services</h6>
              <ul>{window.CBDATA.services.map(s => <li key={s.id}><a href="#services">{s.name}</a></li>)}</ul>
            </div>
            <div>
              <h6>Jurisdictions</h6>
              <ul>{window.CBDATA.jurisdictions.slice(0, 8).map(j => <li key={j.id}><a href="#jurisdictions">{j.name}</a></li>)}</ul>
            </div>
            <div>
              <h6>Company</h6>
              <ul>
                <li><a href="#about">About</a></li>
                <li><a href="#offices">Offices</a></li>
                <li><a href="#guides">Guides</a></li>
                <li><a href="#estimator">Cost estimator</a></li>
                <li><a href="#contact">Contact</a></li>
              </ul>
            </div>
            <div>
              <h6>Talk to us</h6>
              <ul>
                <li><a href={`https://wa.me/${c.whatsapp}`}>WhatsApp · +{c.whatsapp}</a></li>
                <li><a href={`tel:${c.mobile.replace(/\s/g, '')}`}>{c.mobile}</a></li>
                <li><a href={`mailto:${c.email}`}>{c.email}</a></li>
              </ul>
            </div>
          </div>
        </div>
        <div className="cb-foot__bottom">
          <div>© 2026 Commitbiz LLC · Group entity Commit FZE · DWTC, Dubai · P.O. Box 293816.</div>
          <div className="cb-foot__socials">
            <a href="https://www.linkedin.com/company/commit-fze" aria-label="LinkedIn">in</a>
            <a href="https://www.facebook.com/Commitbiz" aria-label="Facebook">f</a>
            <a href="https://www.instagram.com/commitbiz" aria-label="Instagram">ig</a>
            <a href="https://www.youtube.com/@CommitbizLLC" aria-label="YouTube">yt</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Hero, TrustStrip, ServicesSection, JurisdictionsSection, EstimatorSection,
  AboutSection, OfficesSection, GuidesSection, ContactSection, Footer
});