// Direction B — Refreshed landing using shared shell
// New sections: Press strip, How it works, Featured case study, Comparison,
// Security, Demo video, Trade shows. Editorial-still motion.

const L_Hero = () => {
  const copy = {
    tag: "Vol. 09 — for brands",
    h: <>The wholesale floor, <em style={{ fontStyle: "italic" }}>reimagined</em> for the way fashion moves now.</>,
    sub: "An operating system for modern wholesale. Catalogues, assortments, and orders — connected to every retailer, every market, every season."
  };
  return (
    <section style={{ padding: "40px 0 60px", borderBottom: `1px solid ${B.line}` }}>
      <BContainer>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", paddingBottom: 24, borderBottom: `1px solid ${B.line}`, marginBottom: 56 }}>
          <BMono>Issue 09 · Spring/Summer 2026</BMono>
          <BMono>04 · 2026</BMono>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1.7fr 1fr", gap: 64, alignItems: "center" }}>
          <div className="b-reveal">
            <BMono style={{ marginBottom: 28, display: "block" }}>— {copy.tag}</BMono>
            <h1 style={{ margin: 0, fontFamily: BFONTS, fontSize: 104, lineHeight: 0.95, fontWeight: 400, letterSpacing: -3, color: B.ink, textWrap: "balance" }}>
              {copy.h}
            </h1>
          </div>
          <div className="b-reveal" style={{ borderLeft: `1px solid ${B.line}`, paddingLeft: 32, transitionDelay: ".15s" }}>
            <p style={{ margin: 0, fontSize: 16, lineHeight: 1.55, color: B.ink2, fontFamily: BSANS, maxWidth: 360 }}>{copy.sub}</p>
            <div style={{ marginTop: 28, display: "flex", flexDirection: "row", gap: 10, alignItems: "center", flexWrap: "wrap" }}>
              <BBtn variant="primary" href="demo.html">Book a demo</BBtn>
              <BBtn variant="secondary" icon={false} href="customers.html">Read the dossier</BBtn>
            </div>
            <BMono style={{ marginTop: 28, display: "block", lineHeight: 1.7 }}>
              SOC 2 · GDPR<br />No card · 30-day pilot
            </BMono>
          </div>
        </div>

        <div className="b-reveal" style={{ marginTop: 80, display: "grid", gridTemplateColumns: "auto 1fr", gap: 32, alignItems: "start" }}>
          <div style={{ paddingTop: 16, width: 220 }}>
            <BMono>Fig. 01</BMono>
            <p style={{ margin: "10px 0 0", fontFamily: BFONTS, fontSize: 18, fontStyle: "italic", lineHeight: 1.3, color: B.ink, fontWeight: 400 }}>
              The order ledger, rendered live across markets and currencies.
            </p>
            <p style={{ margin: "12px 0 0", fontSize: 12, color: B.ink3, lineHeight: 1.5 }}>
              SS26 buying window · Jeffrey Campbell dashboard, sampled at 09:42 EST.
            </p>
          </div>
          <div style={{ overflow: "hidden", border: `1px solid ${B.line}`, background: "#e8e2d9", boxShadow: "0 60px 80px -30px rgba(40,20,10,.45), 0 30px 40px -20px rgba(40,20,10,.35), 0 12px 24px -8px rgba(40,20,10,.25)" }}>
            <img src="assets/soledistro_vega_atelier.jpg" alt="Sole Distro Dashboard — Vega Atelier" style={{ display: "block", width: "100%", height: "auto" }} />
          </div>
        </div>
      </BContainer>
    </section>);

};

const L_Press = () =>
<section style={{ padding: "32px 0", borderBottom: `1px solid ${B.line}`, background: B.paper }}>
    <BContainer>
      <div style={{ display: "grid", gridTemplateColumns: "180px 1fr", gap: 48, alignItems: "center" }}>
        <BMono>As featured in</BMono>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 24 }}>
          {[
        { name: "BoF", style: { fontFamily: BFONTS, fontSize: 28, fontStyle: "italic", letterSpacing: -1 } },
        { name: "VOGUE BUSINESS", style: { fontFamily: BSANS, fontSize: 14, fontWeight: 700, letterSpacing: 3 } },
        { name: "WWD", style: { fontFamily: BFONTS, fontSize: 26, fontWeight: 400, letterSpacing: 4 } },
        { name: "TechCrunch", style: { fontFamily: BSANS, fontSize: 17, fontWeight: 600, letterSpacing: -0.4 } },
        { name: "Sourcing Journal", style: { fontFamily: BFONTS, fontSize: 20, fontStyle: "italic", letterSpacing: -0.4 } },
        { name: "Modern Retail", style: { fontFamily: BSANS, fontSize: 14, fontWeight: 600, letterSpacing: 1.4, textTransform: "uppercase" } }].
        map((p) => <span key={p.name} style={{ color: B.ink, opacity: 0.75, ...p.style }}>{p.name}</span>)}
        </div>
      </div>
    </BContainer>
  </section>;


const L_HowItWorks = () => {
  const steps = [
  ["I.", "Connect", "Plug Soledistro into your ERP, PLM, and POS in days. Standard connectors handle SAP, NetSuite, D365, Shopify, Lightspeed, Cegid, Oracle Retail."],
  ["II.", "Curate", "Upload line sheets or import your existing catalogue. Build seasonal collections, set wholesale pricing, define size grids per region."],
  ["III.", "Open the floor", "Invite retailers to your branded portal. They browse, build assortments, place orders 24/7. You ship, settle, and report from one workspace."],
  ["IV.", "Optimize", "Predictive sell-through, duplicate detection, and localized size curves shape every reorder. Markdowns drop. Sell-through climbs."]];

  return (
    <section style={{ padding: "60px 0", borderBottom: `1px solid ${B.line}`, background: B.paper2 }}>
      <BContainer>
        <BSectionHeader
          section="§ 03"
          kicker="The Process"
          title={<>Four <em style={{ fontStyle: "italic" }}>moves</em> to a modern wholesale floor.</>}
          right={<BMono>30-day onboarding</BMono>} />
        
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", borderTop: `1px solid ${B.line}`, marginTop: 0 }}>
          {steps.map(([n, t, b], i) =>
          <div key={n} className="b-reveal" style={{
            padding: "36px 28px 36px 0", borderRight: i < 3 ? `1px solid ${B.line}` : "none",
            paddingLeft: i === 0 ? 0 : 28, transitionDelay: `${i * 0.08}s`
          }}>
              <span style={{ fontFamily: BFONTS, fontSize: 56, fontStyle: "italic", color: B.accentInk, fontWeight: 400, letterSpacing: -1.6, lineHeight: 1 }}>{n}</span>
              <h3 style={{ margin: "20px 0 10px", fontFamily: BFONTS, fontSize: 32, fontWeight: 400, letterSpacing: -0.8, lineHeight: 1.05 }}>{t}</h3>
              <p style={{ margin: 0, fontSize: 14, lineHeight: 1.6, color: B.ink2 }}>{b}</p>
            </div>
          )}
        </div>
      </BContainer>
    </section>);

};

const L_FeaturedCaseStudy = () =>
<section style={{ padding: "60px 0", borderBottom: `1px solid ${B.line}`, background: B.paper }}>
    <BContainer>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 32 }}>
        <BMono>§ 04 · Case File 01 — Jeffrey Campbell</BMono>
        <a href="customers.html" className="b-rule-link" style={{ fontFamily: BSANS, fontSize: 12, fontWeight: 600, letterSpacing: 1.4, textTransform: "uppercase", color: B.ink }}>All cases →</a>
      </div>
      <div className="b-reveal" style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 64, alignItems: "stretch", border: `1px solid ${B.line}`, background: B.paper2 }}>
        <div style={{ padding: "56px 56px 56px 56px", display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
          <div>
            <BMono>Los Angeles, CA · Footwear · <a href="https://jeffreycampbellshoes.com" target="_blank" rel="noopener" className="b-rule-link" style={{ color: B.ink2 }}>jeffreycampbellshoes.com</a></BMono>
            <h3 style={{ margin: "20px 0 0", fontFamily: BFONTS, fontSize: 56, fontWeight: 400, letterSpacing: -1.8, lineHeight: 0.98, color: B.ink, textWrap: "balance" }}>
              <em style={{ fontStyle: "italic" }}>"We doubled wholesale revenue</em> without doubling the team."
            </h3>
            <p style={{ margin: "24px 0 0", fontSize: 15, color: B.ink2, lineHeight: 1.6, maxWidth: 460 }}>
              Jeffrey Campbell moved off spreadsheets and three disconnected tools onto Soledistro in 26 days. One full season later, the numbers tell the story.
            </p>
          </div>
          <div style={{ marginTop: 40, display: "flex", alignItems: "center", gap: 14 }}>
            <div style={{ width: 44, height: 44, borderRadius: "50%", background: B.paper, overflow: "hidden", border: `1px solid ${B.line}`, display: "flex", alignItems: "center", justifyContent: "center" }}>
              <img src="assets/jeffrey-campbell-logo.jpg" alt="Jeffrey Campbell" style={{ width: "92%", height: "92%", objectFit: "contain" }} />
            </div>
            <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.3 }}>
              <span style={{ fontSize: 14, fontWeight: 600 }}>Amber Nanjo</span>
              <span style={{ fontSize: 12, color: B.ink3 }}>Jeffrey Campbell Shoes</span>
            </div>
            <BBtn variant="primary" href="case-study.html" style={{ marginLeft: "auto" }}>Read full case study</BBtn>
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", borderLeft: `1px solid ${B.line}` }}>
          {[
        ["+108%", "Wholesale revenue, YoY"],
        ["−31%", "Markdown rate, S/S vs. prior season"],
        ["+47", "New retail doors opened"],
        ["6.4 hrs", "Avg. weekly hours saved per rep"]].
        map(([n, l], i) =>
        <div key={l} style={{
          padding: "40px 32px", borderRight: i % 2 === 0 ? `1px solid ${B.line}` : "none",
          borderBottom: i < 2 ? `1px solid ${B.line}` : "none", display: "flex", flexDirection: "column", justifyContent: "center", minHeight: 200
        }}>
              <span style={{ fontFamily: BFONTS, fontSize: 64, fontWeight: 400, letterSpacing: -2, lineHeight: 1, color: B.ink }}>{n}</span>
              <span style={{ fontSize: 12, color: B.ink3, marginTop: 12, lineHeight: 1.4 }}>{l}</span>
            </div>
        )}
        </div>
      </div>
    </BContainer>
  </section>;


const L_Comparison = () => {
  const rows = [
  ["Branded retailer portal", true, true, true, true],
  ["24/7 self-serve ordering", true, true, false, true],
  ["Localized size curves", true, false, false, false],
  ["Duplicate SKU detection", true, false, false, false],
  ["Predictive sell-through", true, false, false, false],
  ["Open API + webhooks", true, true, true, false],
  ["100+ ERP/POS integrations", true, false, false, false],
  ["Multi-currency (50+)", true, true, true, false],
  ["EDI support", true, true, true, true],
  ["SOC 2 Type II", true, true, false, false],
  ["Implementation under 30 days", true, false, false, true],
  ["No per-order fees", true, false, false, true]];

  const Cell = ({ v, featured }) =>
  <span style={{
    display: "inline-flex", alignItems: "center", justifyContent: "center", width: 22, height: 22,
    borderRadius: "50%", border: `1px solid ${v ? B.brand : B.line}`,
    background: v ? B.brand : "transparent",
    color: v ? "#0E2828" : B.line2,
    fontSize: 12, fontWeight: 700, fontFamily: BSANS
  }}>{v ? "✓" : "—"}</span>;

  return (
    <section style={{ padding: "60px 0", borderBottom: `1px solid ${B.line}`, background: B.paper }}>
      <BContainer>
        <BSectionHeader
          section="§ 05"
          kicker="Field Comparison"
          title={<>How we <em style={{ fontStyle: "italic" }}>stack up</em>.</>}
          sub="A side-by-side against the wholesale tools we hear about most. Last verified Q1 2026 from public docs and customer interviews." />
        
        <div style={{ marginTop: 40, border: `1px solid ${B.line}`, background: B.paper }}>
          <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr 1fr", borderBottom: `1px solid ${B.line}`, background: B.paper2 }}>
            <div style={{ padding: "20px 24px" }}><BMono>Capability</BMono></div>
            {[["Soledistro", true], ["NuOrder", false], ["Joor", false], ["Brandboom", false]].map(([n, hi]) =>
            <div key={n} style={{
              padding: "20px 24px", textAlign: "center", borderLeft: `1px solid ${B.line}`,
              background: hi ? B.brand : "transparent", color: hi ? "#0E2828" : B.ink
            }}>
                <span style={{ fontFamily: BFONTS, fontSize: 24, fontStyle: hi ? "italic" : "normal", fontWeight: 400, letterSpacing: -0.4 }}>{n}</span>
              </div>
            )}
          </div>
          {rows.map((r, i) =>
          <div key={i} style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr 1fr", borderBottom: i < rows.length - 1 ? `1px solid ${B.line}` : "none", alignItems: "center" }}>
              <div style={{ padding: "16px 24px", fontSize: 14, color: B.ink, fontFamily: BSANS }}>{r[0]}</div>
              {r.slice(1).map((v, ci) =>
            <div key={ci} style={{ padding: "16px 24px", textAlign: "center", borderLeft: `1px solid ${B.line}`, background: ci === 0 ? "rgba(31,20,16,0.025)" : "transparent" }}>
                  <Cell v={v} featured={ci === 0} />
                </div>
            )}
            </div>
          )}
        </div>
        <p style={{ margin: "20px 0 0", fontSize: 11, color: B.ink3, fontFamily: BMONO, letterSpacing: 0.3 }}>
          Sources: vendor public documentation; customer reference calls. Disputes? hello@soledistro.com.
        </p>
      </BContainer>
    </section>);

};

const L_DemoVideo = () =>
<section style={{ padding: "60px 0", borderBottom: `1px solid ${B.line}`, background: B.paper2 }}>
    <BContainer>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 64, alignItems: "center" }}>
        <div className="b-reveal">
          <BMono>§ 06 · Walkthrough</BMono>
          <h2 style={{ margin: "14px 0 0", fontFamily: BFONTS, fontSize: 56, fontWeight: 400, letterSpacing: -1.8, lineHeight: 0.98 }}>
            See the floor in <em style={{ fontStyle: "italic" }}>4 minutes</em>.
          </h2>
          <p style={{ margin: "20px 0 28px", fontSize: 15, color: B.ink2, lineHeight: 1.6, maxWidth: 380 }}>
            A guided tour of the Wholesale dashboard, the Assortments builder, and the retailer portal. No sign-up. No sales call.
          </p>
          <BBtn variant="primary" href="demo.html">Watch the tour</BBtn>
        </div>
        <div className="b-reveal" style={{ position: "relative", aspectRatio: "16/10", border: `1px solid ${B.line}`, background: B.brick, overflow: "hidden", boxShadow: "0 30px 60px -30px rgba(40,20,10,.3)" }}>
          <div style={{ position: "absolute", inset: 0, background: "radial-gradient(circle at 50% 50%, oklch(40% 0.08 30 / .6), transparent 70%)" }} />
          <div style={{ position: "absolute", top: 16, left: 20, fontFamily: BMONO, fontSize: 10.5, color: "rgba(244,239,230,.7)", letterSpacing: 0.5, textTransform: "uppercase" }}>● REC · 04:12 · SS26 walkthrough</div>
          <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center" }}>
            <div style={{
            width: 88, height: 88, borderRadius: "50%", background: B.paper, display: "grid", placeItems: "center",
            boxShadow: "0 0 0 8px rgba(244,239,230,0.18)"
          }}>
              <span style={{ fontSize: 22, color: B.ink, marginLeft: 4 }}>▶</span>
            </div>
          </div>
          <div style={{ position: "absolute", bottom: 16, left: 20, right: 20, display: "flex", justifyContent: "space-between", fontFamily: BMONO, fontSize: 10, color: "rgba(244,239,230,.7)", letterSpacing: 0.5, textTransform: "uppercase" }}>
            <span>Soledistro · Product tour</span><span>HD · CC</span>
          </div>
        </div>
      </div>
    </BContainer>
  </section>;


const L_Security = () => {
  const items = [
  ["SOC 2 Type II", "Annual independent audit. Reports available under NDA.", "soc2.html"],
  ["GDPR & CCPA", "EU/US data residency. DPA on request. Retailer-PII firewalls."],
  ["ISO 27001", "Information security management certified, 2024.", "iso27001.html"],
  ["Encrypted at rest & in transit", "AES-256, TLS 1.3. Tenant-isolated databases."],
  ["Role-based access", "Granular permissions. SSO via Okta, Azure AD, Google Workspace."],
  ["99.95% uptime SLA", "Multi-region failover. Public status page. RTO < 15 min."]];

  return (
    <section style={{ padding: "60px 0", borderBottom: `1px solid ${B.line}`, background: B.paper }}>
      <BContainer>
        <BSectionHeader
          section="§ 06"
          kicker="Trust & Compliance"
          title={<>Built like <em style={{ fontStyle: "italic" }}>infrastructure</em>.</>}
          sub="Your catalogue, your retailer relationships, your order book — all hosted on systems audited to enterprise grade." />
        
        <div style={{ marginTop: 40, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", borderTop: `1px solid ${B.line}`, borderLeft: `1px solid ${B.line}` }}>
          {items.map(([t, b, href]) => {
            const inner = (
              <>
                <BOrnament id="b-orn-corner" w={24} h={24} color={B.line2} style={{ marginBottom: 18 }} />
                <h3 style={{ margin: 0, fontFamily: BFONTS, fontSize: 24, fontWeight: 400, letterSpacing: -0.5, lineHeight: 1.15, display: "flex", alignItems: "baseline", gap: 8 }}>
                  {t}{href && <span style={{ fontSize: 16, color: B.accentInk }}>→</span>}
                </h3>
                <p style={{ margin: "10px 0 0", fontSize: 13.5, lineHeight: 1.55, color: B.ink2 }}>{b}</p>
              </>);
            const cellStyle = { padding: "32px 28px", borderRight: `1px solid ${B.line}`, borderBottom: `1px solid ${B.line}`, color: B.ink, textDecoration: "none", display: "block" };
            return href
              ? <a key={t} href={href} className="b-reveal b-card-hover" style={cellStyle}>{inner}</a>
              : <div key={t} className="b-reveal" style={cellStyle}>{inner}</div>;
          })}
        </div>
      </BContainer>
    </section>);

};

const L_Events = () => {
  const events = [
  ["Aug 15 — Aug 17, 2026", "The Atlanta Shoe Market", "Atlanta, GA", "Cobb Galleria Centre", "Confirmed"],
  ["Feb 06 — Feb 08, 2027", "The Atlanta Shoe Market", "Atlanta, GA", "Cobb Galleria Centre", "Confirmed"]];

  return (
    <section style={{ padding: "60px 0", borderBottom: `1px solid ${B.line}`, background: B.paper }}>
      <BContainer>
        <BSectionHeader
          section="§ 07"
          kicker="On the Road"
          title={<>Where we'll be <em style={{ fontStyle: "italic" }}>this season</em>.</>}
          right={<BMono>2026 – 2027 trade show calendar</BMono>} />
        
        <div style={{ marginTop: 40, borderTop: `1px solid ${B.line}` }}>
          {events.map(([date, name, loc, booth, status], i) =>
          <div key={i} className="b-reveal" style={{
            display: "grid", gridTemplateColumns: "180px 1.6fr 1.4fr 1fr 100px 120px",
            padding: "24px 0", borderBottom: `1px solid ${B.line}`, gap: 24, alignItems: "baseline",
            transitionDelay: `${i * 0.04}s`
          }}>
              <BMono>{date}</BMono>
              <span style={{ fontFamily: BFONTS, fontSize: 26, fontWeight: 400, letterSpacing: -0.4, color: B.ink }}>{name}</span>
              <span style={{ fontSize: 13.5, color: B.ink2 }}>{loc}</span>
              <span style={{ fontSize: 13, color: B.ink3, fontFamily: BMONO, letterSpacing: 0.3 }}>{booth}</span>
              <span style={{ fontSize: 11, fontFamily: BMONO, letterSpacing: 0.5, textTransform: "uppercase", color: status === "Confirmed" ? B.accentInk : B.ink3 }}>● {status}</span>
              <a href="demo.html" className="b-rule-link" style={{ fontFamily: BSANS, fontSize: 11.5, fontWeight: 600, letterSpacing: 1.4, textTransform: "uppercase", color: B.ink, textAlign: "right" }}>Book meeting →</a>
            </div>
          )}
        </div>
      </BContainer>
    </section>);

};

const L_Stats = () => {
  const stats = [
  ["200", "+", "Brands on the platform"],
  ["50", "+", "Currencies supported"],
  ["100", "+", "ERP / POS / PLM integrations"],
  ["30", "%", "Avg. markdown reduction"]];

  return (
    <section style={{ padding: "52px 0", borderBottom: `1px solid ${B.line}`, background: B.brick, color: B.paper }}>
      <BContainer>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 48 }}>
          <BMono style={{ color: "rgba(244,239,230,0.6)" }}>§ 08 · By the Numbers</BMono>
          <span style={{ fontFamily: BFONTS, fontStyle: "italic", fontSize: 22, color: "rgba(244,239,230,0.7)" }}>—as of Q1 2026</span>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "48px 40px" }}>
          {stats.map(([n, suf, l], i) =>
          <div key={l} className="b-reveal" style={{ borderTop: `1px solid rgba(244,239,230,0.2)`, paddingTop: 18, transitionDelay: `${i * 0.05}s` }}>
              <div style={{ display: "flex", alignItems: "baseline" }}>
                <span style={{ fontFamily: BFONTS, fontSize: 80, fontWeight: 400, letterSpacing: -3, lineHeight: 1, color: B.paper }}>{n}</span>
                <span style={{ fontFamily: BFONTS, fontSize: 46, fontStyle: "italic", color: "oklch(78% 0.14 65)", letterSpacing: -1.6, lineHeight: 1, marginLeft: 4 }}>{suf}</span>
              </div>
              <div style={{ fontSize: 13.5, color: "rgba(244,239,230,0.7)", marginTop: 10, lineHeight: 1.4 }}>{l}</div>
            </div>
          )}
        </div>
      </BContainer>
    </section>);

};

const L_FinalCTA = () =>
<section style={{ padding: "72px 0", background: B.brick, color: B.paper, position: "relative", overflow: "hidden" }}>
    <BContainer style={{ textAlign: "center" }}>
      <BMono style={{ color: "oklch(80% 0.16 65)" }}>§ 09 · Colophon</BMono>
      <h2 style={{ margin: "20px auto 0", fontFamily: BFONTS, fontSize: 96, fontWeight: 400, letterSpacing: -3, lineHeight: 0.95, color: B.paper, maxWidth: 1000 }}>
        Transform your wholesale<br /><em style={{ fontStyle: "italic", color: "oklch(80% 0.16 65)" }}>this season</em>.
      </h2>
      <p style={{ margin: "28px auto 40px", fontSize: 17, lineHeight: 1.55, color: "rgba(244,239,230,0.7)", maxWidth: 540 }}>
        See Soledistro in 30 minutes. Walk away with a tailored implementation plan — whether you go with us or not.
      </p>
      <div style={{ display: "inline-flex", gap: 12 }}>
        <BBtn variant="onDark" href="demo.html">Book a demo</BBtn>
        <BBtn variant="secondary" icon={false} href="demo.html" style={{ color: B.paper, borderColor: "rgba(244,239,230,0.3)" }}>Talk to sales</BBtn>
      </div>
    </BContainer>
  </section>;


const Landing = () =>
<BPage current="">
    <L_Hero />
    <L_HowItWorks />
    <L_FeaturedCaseStudy />
    <L_Comparison />
    <L_Security />
    <L_Events />
    <L_Stats />
    <L_FinalCTA />
  </BPage>;


window.Landing = Landing;