/* iGaming Interactive Demo — Scroll Panels (7 sections) */

const {
  ArrowRight, ArrowLeft, ArrowUp, ArrowDown, ArrowUpRight,
  ShieldCheck, Landmark, Lock, Scale, Cpu,
  Building, Plug, SwapinGlyph,
  Coins, Wallet, Send, Activity, CheckCircle, Bank, Users,
  Star, Award, Shield, Globe
} = window;

// ─────────────────────────────────────────────────────────
// reusable Orb background layer
// ─────────────────────────────────────────────────────────
const OrbField = ({ config }) =>
<div className="orbs" aria-hidden="true">
    {config.map((o, i) =>
  <div
    key={i}
    className={`orb ${o.color}`}
    style={{
      top: o.top, left: o.left, right: o.right, bottom: o.bottom,
      animationDelay: `${o.delay || 0}s`,
      animationDuration: `${o.dur || 24}s`,
      opacity: o.opacity ?? 0.55
    }} />

  )}
  </div>;


// ─────────────────────────────────────────────────────────
// SECTION 1 — HERO
// ─────────────────────────────────────────────────────────
const HeroSection = ({ onStart }) =>
<section className="panel" data-mood="hero" data-screen-label="01 Hero" data-section-id="hero">
    <OrbField config={[
  { color: "purple", top: "10%", left: "-8%", delay: 0 },
  { color: "cyan", top: "55%", right: "-6%", delay: 6 },
  { color: "violet", top: "70%", left: "20%", delay: 12 }]
  } />
    <div className="panel-inner">
      <div className="hero-layout">
        <div>
          <div className="eyebrow reveal in-view"><span className="dot"></span>Crypto payment gateway · for casinos</div>
          <h1 className="headline hero-headline reveal in-view" data-d="1">
            <span className="accent">Swapin:</span> the regulated stablecoin payment solution for casinos
          </h1>
          <p className="subhead reveal in-view" data-d="2">
            EU-licensed. Audited. Built for high-volume casino operators since 2018.
          </p>
        </div>

        <div className="hero-cols">
          <div className="hero-col">
            <div className="reveal in-view" data-d="3">
              <h4>The Challenge</h4>
              <p>iGaming operators need fast, scalable payments — without sacrificing compliance, security, or uptime.</p>
            </div>
            <div className="reveal in-view" data-d="4" style={{ marginTop: 28 }}>
              <h4>The Solution</h4>
              <p>Swapin is an EU-licensed and regulated crypto payments processor, audited by Grant Thornton, built specifically for high-volume casino transactions.</p>
            </div>
          </div>

          <div className="hero-col">
            <div className="pillars">
              {[
            { t: "Regulation & Oversight", b: "EU licensed and regulated, independently audited." },
            { t: "Security & Stability", b: "ISO-standard security, liquidity, and anti-volatility settlement." },
            { t: "Technology & Integration", b: "Fast, secure APIs and payment links, deployed as needed." }].
            map((p, i) =>
            <div className="pillar reveal in-view" data-d={4 + i} key={i}>
                  <ArrowRight className="arrow" size={20} />
                  <div>
                    <span className="title">{p.t}</span>
                    <span className="body">— {p.b}</span>
                  </div>
                </div>
            )}
              <div className="pillar-proven reveal in-view" data-d="7">
                <strong>Proven in the market.</strong> Trusted since 2018 by regulated European land-based and online casinos, backed by an award-winning fintech team with 10+ years of crypto and payments experience.
              </div>
            </div>
          </div>
        </div>

        <div className="trust-strip reveal in-view" data-d="7">
          <div className="trustpilot-pill">
            <span style={{ fontWeight: 700, color: "#00B67A" }}>Trustpilot</span>
            <span className="stars">★★★★★</span>
            <span style={{ opacity: 0.7 }}>4.5 · 303 reviews</span>
          </div>
          <div className="item" title="World Luxury Chamber of Commerce">
            <img src="assets/trust/wlcoc.webp" alt="World Luxury Chamber of Commerce" />
          </div>
          <div className="item" title="People's Choice Award">
            <img src="assets/trust/peoples-choice.webp" alt="People's Choice Award" />
          </div>
          <div className="item" title="Mastercard">
            <img src="assets/trust/mastercard.svg" alt="Mastercard" className="invert" />
          </div>
          <div className="item" title="Lighthouse">
            <img src="assets/trust/lighthouse.svg" alt="Lighthouse" />
          </div>
          <div className="item item--wide" title="Estonian Financial Intelligence Unit">
            <img src="assets/trust/estonian-fiu.svg" alt="Estonian FIU" />
          </div>
          <div className="item" title="European Union">
            <svg width="52" height="35" viewBox="0 0 60 40" aria-label="EU flag">
              <rect width="60" height="40" rx="2" fill="#003399" />
              <g fill="#FFCC00">
                {Array.from({ length: 12 }).map((_, i) => {
                const a = i / 12 * Math.PI * 2 - Math.PI / 2;
                const x = 30 + Math.cos(a) * 12;
                const y = 20 + Math.sin(a) * 11;
                return <circle key={i} cx={x} cy={y} r="1.6" />;
              })}
              </g>
            </svg>
          </div>
        </div>

        <div className="hero-cta-row reveal in-view" data-d="8">
          <button className="cta" onClick={onStart}>
            Start demo
            <ArrowRight className="arrow" size={18} />
          </button>
          <span className="hint">↓ scroll, or press start</span>
        </div>
      </div>
    </div>
  </section>;


// ─────────────────────────────────────────────────────────
// SECTION 2 — PITCH
// ─────────────────────────────────────────────────────────
const PitchSection = () =>
<section className="panel" data-mood="pitch" data-screen-label="02 Pitch" data-section-id="pitch">
    <OrbField config={[
  { color: "deep", top: "-10%", left: "-10%", delay: 4, opacity: 0.4 },
  { color: "cyan", bottom: "-15%", right: "-5%", delay: 10, opacity: 0.3 }]
  } />
    <div className="panel-inner">
      <div className="eyebrow reveal"><span className="dot"></span>What this actually means for you</div>
      <h2 className="headline reveal" data-d="1" style={{ maxWidth: "20ch" }}>
        It's <span className="accent">just another payment method</span> — that plugs into your existing infrastructure.
      </h2>
      <p className="subhead reveal" data-d="2">
        Like adding a new payment processor: same treatment in your system, same player experience at checkout. No new flows. No surprises.
      </p>

      <div className="pitch-grid">
        {[
      { I: ShieldCheck, t: "Zero chargebacks", b: "Crypto is cryptographically irreversible. No disputes, no friendly fraud, no reversal costs." },
      { I: Landmark, t: "EUR to your bank", b: "Player pays in crypto → operator receives EUR. Treasury, accounting, banking — unchanged." },
      { I: Lock, t: "No crypto custody", b: "Swapin holds the wallet infrastructure and runs KYT on the crypto side. You never touch crypto." },
      { I: Scale, t: "Regulator-ready", b: "EU VASP licensed. Grant Thornton audited. We sit in regulator meetings alongside your team." }].
      map((c, i) =>
      <div className="value-card reveal" data-d={3 + i} key={i}>
            <div className="icon-wrap"><c.I size={22} /></div>
            <h4>{c.t}</h4>
            <p>{c.b}</p>
          </div>
      )}
      </div>

      <div className="pitch-foot reveal" data-d="7">
        <span className="label">Supports all major stablecoins and cryptocurrencies:</span>
        {["USDT", "USDC", "BTC", "ETH", "TRX", "TON"].map((c) =>
      <span className="chip" key={c}>{c}</span>
      )}
        <span style={{ opacity: 0.5 }}>and more</span>
      </div>
    </div>
  </section>;


// ─────────────────────────────────────────────────────────
// SECTION 3 — ARCHITECTURE (3-layer model + side table)
// ─────────────────────────────────────────────────────────
/* Bidirectional connector for the architecture flow.
   Each lane has: a faint rail, a glowing "trail" segment that travels
   from start to end (animated stroke-dashoffset), and an arrow head
   at the destination that pulses when the trail arrives. */
const ArchConnector = ({ delay = 0 }) =>
<div className="arch-connector" aria-hidden="true">
    {/* deposit lane — cyan, top → bottom */}
    <svg className="arch-lane down" viewBox="0 0 24 80" preserveAspectRatio="none">
      <defs>
        <linearGradient id="arch-trail-down" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#2AF6FF" stopOpacity="0" />
          <stop offset="35%" stopColor="#2AF6FF" stopOpacity="0.9" />
          <stop offset="100%" stopColor="#FFFFFF" stopOpacity="1" />
        </linearGradient>
      </defs>
      {/* faint rail */}
      <line x1="12" y1="4" x2="12" y2="64" stroke="rgba(42,246,255,0.18)" strokeWidth="1.5" strokeLinecap="round" />
      {/* arrow head at bottom */}
      <path d="M5 60 L12 70 L19 60" stroke="#2AF6FF" strokeWidth="2.2" fill="none" strokeLinecap="round" strokeLinejoin="round" opacity="0.45" style={{ filter: "drop-shadow(0 0 6px rgba(42,246,255,0.65))" }}>
        <animate attributeName="opacity" values="0.45;1;0.45" keyTimes="0;0.45;1" dur="2.4s" begin={`${delay}s`} repeatCount="indefinite" />
      </path>
      {/* travelling glow segment */}
      <line x1="12" y1="4" x2="12" y2="64" stroke="url(#arch-trail-down)" strokeWidth="2.6" strokeLinecap="round" strokeDasharray="22 60" strokeDashoffset="60" style={{ filter: "drop-shadow(0 0 5px #2AF6FF) drop-shadow(0 0 11px rgba(42,246,255,0.55))" }}>
        <animate attributeName="stroke-dashoffset" from="60" to="-22" dur="2.4s" begin={`${delay}s`} repeatCount="indefinite" />
      </line>
    </svg>

    {/* withdrawal lane — purple, bottom → top */}
    <svg className="arch-lane up" viewBox="0 0 24 80" preserveAspectRatio="none">
      <defs>
        <linearGradient id="arch-trail-up" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#FFFFFF" stopOpacity="1" />
          <stop offset="65%" stopColor="#D5B6E8" stopOpacity="0.9" />
          <stop offset="100%" stopColor="#9F79B8" stopOpacity="0" />
        </linearGradient>
      </defs>
      <line x1="12" y1="16" x2="12" y2="76" stroke="rgba(159,121,184,0.2)" strokeWidth="1.5" strokeLinecap="round" />
      <path d="M5 20 L12 10 L19 20" stroke="#D5B6E8" strokeWidth="2.2" fill="none" strokeLinecap="round" strokeLinejoin="round" opacity="0.45" style={{ filter: "drop-shadow(0 0 6px rgba(159,121,184,0.65))" }}>
        <animate attributeName="opacity" values="0.45;1;0.45" keyTimes="0;0.45;1" dur="2.4s" begin={`${delay + 1.2}s`} repeatCount="indefinite" />
      </path>
      {/* line drawn from bottom to top so the trail travels upward */}
      <line x1="12" y1="76" x2="12" y2="16" stroke="url(#arch-trail-up)" strokeWidth="2.6" strokeLinecap="round" strokeDasharray="22 60" strokeDashoffset="60" style={{ filter: "drop-shadow(0 0 5px #D5B6E8) drop-shadow(0 0 11px rgba(124,29,201,0.55))" }}>
        <animate attributeName="stroke-dashoffset" from="60" to="-22" dur="2.4s" begin={`${delay + 1.2}s`} repeatCount="indefinite" />
      </line>
    </svg>
  </div>;


const ArchitectureSection = () =>
<section className="panel" data-mood="architecture" data-screen-label="03 Architecture" data-section-id="architecture">
    <OrbField config={[
  { color: "purple", top: "20%", right: "-8%", delay: 2, opacity: 0.35 }]
  } />
    <div className="panel-inner">
      <div className="arch-header">
        <div className="eyebrow reveal"><span className="dot"></span>Architecture</div>
        <h2 className="headline reveal" data-d="1" style={{ maxWidth: "22ch" }}>
          How it fits into <span className="accent">your stack</span>
        </h2>
        <p className="subhead reveal" data-d="2">
          Three clean layers. Your casino keeps doing what it does — Swapin handles crypto.
        </p>
      </div>

      <div className="arch-layout">
        <div className="arch-flow-wrap reveal" data-d="3">
          <div className="arch-lane-tags">
            <span className="lane-tag deposit">↓ Deposit · crypto → EUR</span>
            <span className="lane-tag withdraw">↑ Withdrawal · EUR → crypto</span>
          </div>

          <div className="flow-chart arch-flow">
            <div className="flow-stage reveal" data-d="3">
              <div className="stage-icon"><Building size={20} /></div>
              <div className="stage-body">
                <div className="stage-where">Layer 1 · your side</div>
                <div className="stage-title">Casino operator</div>
                <div className="stage-desc">Player accounts · balances · cashier operations</div>
              </div>
            </div>

            <ArchConnector delay={0} />

            <div className="flow-stage reveal" data-d="4">
              <div className="stage-icon"><Plug size={20} /></div>
              <div className="stage-body">
                <div className="stage-where">Layer 2 · the bridge</div>
                <div className="stage-title">Integration layer</div>
                <div className="stage-desc">Connections · callbacks · payment orchestration</div>
              </div>
            </div>

            <ArchConnector delay={0.3} />

            <div className="flow-stage swapin reveal" data-d="5">
              <div className="stage-icon"><SwapinGlyph size={20} /></div>
              <div className="stage-body">
                <div className="stage-where">Layer 3 · Swapin handles</div>
                <div className="stage-title">Crypto processing engine</div>
                <div className="stage-desc">Wallet infra · compliance · exchange · settlement</div>
              </div>
            </div>
          </div>
        </div>

        <div className="arch-aside reveal" data-d="5">
          <div className="arch-table">
            <div className="head">
              <div className="col-title">Who owns what</div>
              <div className="col-title deposit">Deposit · crypto → EUR</div>
              <div className="col-title withdraw">Withdrawal · EUR → crypto</div>
            </div>
            {[
          { n: 1, who: "Player", d: "Sends crypto from wallet", w: "Provides wallet address" },
          { n: 2, who: "Compliance", d: "KYT on incoming funds", w: "KYT on destination wallet" },
          { n: 3, who: "Conversion", d: "Instant, floating rate", w: "Instant, floating rate" },
          { n: 4, who: "Operator", d: "Receives EUR to bank", w: "Sends EUR from balance" }].
          map((r) =>
          <div key={r.n} className={`row ${r.who === "Operator" ? "operator-row" : ""}`}>
                <div className="who">
                  <span className="num">{r.n}</span>{r.who}
                </div>
                <div className="cell">{r.d}</div>
                <div className="cell">{r.w}</div>
              </div>
          )}
          </div>
        </div>
      </div>
    </div>
  </section>;



// ─────────────────────────────────────────────────────────
// SECTION 4 — FLOW CHOOSER
// ─────────────────────────────────────────────────────────
const ChooserSection = ({ onOpen }) =>
<section className="panel" data-mood="chooser" data-screen-label="04 Flow Chooser" data-section-id="chooser">
    <OrbField config={[
  { color: "cyan", top: "30%", left: "10%", delay: 0, opacity: 0.35 },
  { color: "purple", top: "30%", right: "10%", delay: 6, opacity: 0.4 }]
  } />
    <div className="panel-inner" style={{ textAlign: "center" }}>
      <div className="eyebrow reveal"><span className="dot"></span>Live the flow</div>
      <h2 className="headline reveal" data-d="1" style={{ margin: "0 auto", maxWidth: "20ch" }}>
        Experience the <span className="accent">integration</span>
      </h2>
      <p className="subhead reveal" data-d="2" style={{ margin: "auto", marginTop: 24 }}>
        Pick a flow to step through the player-side experience inside Sample Casino — Swapin works behind the scenes.
      </p>

      <div className="chooser-cards" style={{ textAlign: "left" }}>
        <div className="chooser-card deposit reveal" data-d="3" onClick={() => onOpen("deposit")}>
          <div className="arrow-art"><ArrowDown size={64} /></div>
          <h3>Deposit flow</h3>
          <p className="sub">Player sends crypto → operator receives EUR. Five system stages, two taps for the player.</p>
          <div className="step-in">
            Step into deposit <ArrowRight size={16} />
          </div>
        </div>
        <div className="chooser-card withdraw reveal" data-d="4" onClick={() => onOpen("withdraw")}>
          <div className="arrow-art"><ArrowUp size={64} /></div>
          <h3>Withdrawal flow</h3>
          <p className="sub">Player requests EUR payout → receives crypto. Three-phase auth, KYT, floating rate.</p>
          <div className="step-in">
            Step into withdrawal <ArrowRight size={16} />
          </div>
        </div>
      </div>

      <div className="chooser-hint reveal" data-d="5">or keep scrolling to see both</div>
    </div>
  </section>;


// ─────────────────────────────────────────────────────────
// SECTION 5a — DEPOSIT FLOW EXPLAINER
// ─────────────────────────────────────────────────────────
const DepositFlowSection = ({ onOpen }) =>
<section className="panel" data-mood="deposit" data-screen-label="05 Deposit Flow" data-section-id="deposit-flow">
    <OrbField config={[
  { color: "cyan", bottom: "-10%", left: "-10%", delay: 2, opacity: 0.3 }]
  } />
    <div className="panel-inner">
      <div className="eyebrow reveal"><span className="dot"></span>Deposit · crypto → EUR</div>
      <h2 className="headline reveal" data-d="1" style={{ maxWidth: "26ch" }}>
        Player pays in crypto, <span className="accent">you receive EUR.</span>
      </h2>
      <p className="subhead reveal" data-d="2">
        For the player it's simple — pick a network and currency, send crypto to a reusable address. Swapin handles the rest behind the scenes.
      </p>

      <div className="flow-layout">
        <div className="flow-chart">
          {[
        { I: Wallet, t: "Player selects crypto", w: "Casino system" },
        { I: Coins, t: "Persistent deposit address displayed", w: "Casino system", note: "unique per player / coin" },
        { I: Send, t: "Player sends crypto from their wallet", w: "Player crypto wallet" },
        { I: SwapinGlyph, t: "Detect → KYT screening → convert to EUR", w: "Swapin Exchange Engine", swapin: true },
        { I: CheckCircle, t: "Callback to operator · player balance credited", w: "Casino bank account" }].
        map((s, i, arr) =>
        <React.Fragment key={i}>
              <div className={`flow-stage reveal ${s.swapin ? "swapin" : ""}`} data-d={3 + i}>
                <div className="stage-icon"><s.I size={20} /></div>
                <div className="stage-body">
                  <div className="stage-where">{s.w}</div>
                  <div className="stage-title">{s.t}</div>
                  {s.note && <div className="stage-desc">{s.note}</div>}
                </div>
              </div>
              {i < arr.length - 1 && <div className="flow-connector" />}
            </React.Fragment>
        )}
        </div>

        <div className="flow-side">
          <div className="points">
            {[
          { t: "No additional KYC", d: "Existing casino verification covers crypto flows." },
          { t: "Recurring addresses", d: "No new address per transaction — same address every time." },
          { t: "EUR settled to your bank", d: "Via SEPA or stablecoin, configurable frequency." }].
          map((p, i) =>
          <div className="point reveal" data-d={6 + i} key={i}>
                <span className="arr">→</span>
                <div className="text"><strong>{p.t}</strong> — {p.d}</div>
              </div>
          )}
          </div>

          <div className="flow-cta-row reveal" data-d="9">
            <button className="cta" onClick={() => onOpen("deposit")}>
              Step into the deposit experience
              <ArrowRight className="arrow" size={18} />
            </button>
          </div>
        </div>
      </div>
    </div>
  </section>;


// ─────────────────────────────────────────────────────────
// SECTION 5b — WITHDRAWAL FLOW EXPLAINER
// ─────────────────────────────────────────────────────────
const WithdrawalFlowSection = ({ onOpen }) =>
<section className="panel" data-mood="withdraw" data-screen-label="06 Withdrawal Flow" data-section-id="withdraw-flow">
    <OrbField config={[
  { color: "purple", top: "-15%", right: "-10%", delay: 4, opacity: 0.4 }]
  } />
    <div className="panel-inner">
      <div className="eyebrow reveal"><span className="dot"></span>Withdrawal · EUR → crypto</div>
      <h2 className="headline reveal" data-d="1" style={{ maxWidth: "28ch" }}>
        Crypto payouts to players, <span className="accent">from your EUR balance.</span>
      </h2>
      <p className="subhead reveal" data-d="2">
        Really simple for the player: pick a network and crypto, paste a wallet address, receive crypto. Swapin handles authorization, KYT and conversion behind the scenes.
      </p>

      <div className="flow-layout">
        <div className="flow-chart">
          <div className="flow-stage purple reveal" data-d="3">
            <div className="stage-icon"><Wallet size={20} /></div>
            <div className="stage-body">
              <div className="stage-where">Casino system</div>
              <div className="stage-title">Operator creates withdrawal order</div>
              <div className="stage-desc">EUR amount · crypto type · player wallet address</div>
            </div>
          </div>
          <div className="flow-connector" />

          <div className="flow-stage purple reveal" data-d="4">
            <div className="stage-icon"><Users size={20} /></div>
            <div className="stage-body">
              <div className="stage-where">Casino + Swapin</div>
              <div className="stage-title">Three-phase authorization</div>
              <div className="auth-chips">
                <span className="auth-chip"><span className="num">1</span>Initiator</span>
                <span className="auth-arrow"><ArrowRight size={12} /></span>
                <span className="auth-chip"><span className="num">2</span>Authorizer</span>
                <span className="auth-arrow"><ArrowRight size={12} /></span>
                <span className="auth-chip"><span className="num">3</span>Executor</span>
              </div>
            </div>
          </div>
          <div className="flow-connector" />

          <div className="flow-stage swapin reveal" data-d="5">
            <div className="stage-icon"><SwapinGlyph size={20} /></div>
            <div className="stage-body">
              <div className="stage-where">Swapin Exchange Engine</div>
              <div className="stage-title">KYT screening · EUR → crypto at floating rate</div>
            </div>
          </div>
          <div className="flow-connector" />

          <div className="flow-stage reveal" data-d="6">
            <div className="stage-icon"><Send size={20} /></div>
            <div className="stage-body">
              <div className="stage-where">Player's crypto wallet</div>
              <div className="stage-title">Crypto sent · callback confirms completion</div>
            </div>
          </div>
        </div>

        <div className="flow-side">
          <div className="points">
            {[
          { t: "Pre-funded liquidity pool", d: "Topped up via SEPA or stablecoin." },
          { t: "Floating rate at execution", d: "No locked quotes." },
          { t: "Flexible fee structure", d: "Agreed per operator — absorbed, on top, or built into rate." }].
          map((p, i) =>
          <div className="point reveal" data-d={7 + i} key={i}>
                <span className="arr">→</span>
                <div className="text"><strong>{p.t}</strong> — {p.d}</div>
              </div>
          )}
          </div>

          <div className="flow-cta-row reveal" data-d="10">
            <button className="cta" onClick={() => onOpen("withdraw")}>
              Step into the withdrawal experience
              <ArrowRight className="arrow" size={18} />
            </button>
          </div>
        </div>
      </div>
    </div>
  </section>;


// ─────────────────────────────────────────────────────────
// SECTION 7 — CLOSE
// ─────────────────────────────────────────────────────────
const CloseSection = ({ onBackToTop }) =>
<section className="panel" data-mood="close" data-screen-label="07 Close" data-section-id="close">
    <OrbField config={[
  { color: "violet", top: "30%", left: "20%", delay: 0, opacity: 0.45 },
  { color: "cyan", bottom: "20%", right: "20%", delay: 4, opacity: 0.3 }]
  } />
    <div className="panel-inner">
      <div className="close-layout">
        <div className="eyebrow reveal"><span className="dot"></span>Ready when you are</div>
        <h2 className="headline reveal" data-d="1">
          Regulated. Proven. <span className="accent">Ready when you are.</span>
        </h2>

        <div className="close-pills">
          {[
        { I: Scale, l: "EU-licensed VASP" },
        { I: ShieldCheck, l: "Grant Thornton audited" },
        { I: Landmark, l: "Trusted since 2018" }].
        map((p, i) =>
        <div className="close-pill reveal" data-d={2 + i} key={i}>
              <div className="icon"><p.I size={18} /></div>
              <div className="label">{p.l}</div>
            </div>
        )}
        </div>

        <div className="close-cta-block">
          <a className="cta cta--lg reveal" data-d="5" href="https://www.swapin.com/business/crypto-payment-gateway/" target="_blank" rel="noreferrer">
            Contact Sales
            <ArrowRight className="arrow" size={18} />
          </a>
          <div className="close-qr reveal" data-d="6">
            <div className="qr-box"><QRPlaceholder /></div>
            <div className="qr-text">
              <div className="t">Scan to follow up later</div>
              <div className="s">swapin.com/business/crypto-payment-gateway</div>
            </div>
          </div>
        </div>

        <div className="close-footer reveal" data-d="7">
          <a onClick={onBackToTop}>↑ Back to top</a>
          <span>Swapin · Regulated EU VASP · © 2026</span>
        </div>
      </div>
    </div>
  </section>;


// quick visual QR placeholder (fake pattern)
const QRPlaceholder = () => {
  const cells = [];
  // deterministic pseudo-random pattern (no Math.random for SSR-friendliness)
  const pattern = "10110100110101010011010010111010011010101001110101001011010110010110100110101010011010010111010011010101001110101001011010110010110100";
  for (let y = 0; y < 21; y++) {
    for (let x = 0; x < 21; x++) {
      const idx = (y * 21 + x) % pattern.length;
      // corner markers
      const isCorner =
      x < 7 && y < 7 || x > 13 && y < 7 || x < 7 && y > 13;

      let fill = pattern[idx] === "1";
      if (isCorner) {
        const lx = x % 8,ly = y % 8;
        const sx = x > 13 ? x - 14 : x;
        const sy = y > 13 ? y - 14 : y;
        if (sx === 0 || sx === 6 || sy === 0 || sy === 6) fill = true;else
        if (sx === 2 || sx === 4 || sy === 2 || sy === 4) fill = sx >= 2 && sx <= 4 && sy >= 2 && sy <= 4;else
        if (sx === 3 && sy === 3) fill = true;else
        fill = false;
      }
      if (fill) cells.push(<rect key={`${x}-${y}`} x={x * 4} y={y * 4} width="4" height="4" fill="#000" />);
    }
  }
  return (
    <svg viewBox="0 0 84 84" width="80" height="80">{cells}</svg>);

};

Object.assign(window, {
  HeroSection, PitchSection, ArchitectureSection,
  ChooserSection, DepositFlowSection, WithdrawalFlowSection, CloseSection
});