/* global React, MobilePOSDemo, TerminalPOSDemo, IOSDevice, TweaksPanel, useTweaks, TweakSection, TweakText, TweakSelect, TweakRadio, TweakColor */
const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "brandName": "Green Grocer",
  "currency": "USD",
  "terminalStyle": "retail",
  "accent": "#009859"
}/*EDITMODE-END*/;

function App() {
  const [tw, setTw] = useTweaks(TWEAK_DEFAULTS);
  const [activeMode, setActiveMode] = useState("mobile"); // mobile | terminal
  const [faqOpen, setFaqOpen] = useState(0);

  const accent = tw.accent || "#009859";

  return (
    <div style={{ background: "#FDFFFE", color: "#0C3124", minHeight: "100vh" }}>
      <Nav accent={accent} />
      <Hero accent={accent} brandName={tw.brandName} currency={tw.currency} terminalStyle={tw.terminalStyle} activeMode={activeMode} setActiveMode={setActiveMode} />
      <Modes accent={accent} brandName={tw.brandName} currency={tw.currency} terminalStyle={tw.terminalStyle} activeMode={activeMode} setActiveMode={setActiveMode} />
      <Advantages accent={accent} />
      <Developer accent={accent} />
      <FAQ faqOpen={faqOpen} setFaqOpen={setFaqOpen} />
      <CTA accent={accent} />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Merchant">
          <TweakText label="Store name" value={tw.brandName} onChange={(v) => setTw({ brandName: v })} />
          <TweakSelect label="Currency" value={tw.currency} options={["USD","CAD","SGD","HKD"]} onChange={(v) => setTw({ currency: v })} />
        </TweakSection>
        <TweakSection title="POS terminal">
          <TweakRadio label="Hardware style" value={tw.terminalStyle} options={[
            { value: "retail", label: "Classic retail (vertical)" },
            { value: "tablet", label: "Modern tablet (horizontal)" },
          ]} onChange={(v) => setTw({ terminalStyle: v })} />
        </TweakSection>
        <TweakSection title="Brand">
          <TweakColor label="Accent" value={tw.accent} onChange={(v) => setTw({ accent: v })} />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

/* ───────── Nav ───────── */
function Nav({ accent }) {
  return (
    <nav style={navStyles.wrap}>
      <div data-r="nav-inner" style={navStyles.inner}>
        <a href="#" style={{ display: "flex", alignItems: "center", gap: 10, textDecoration: "none" }}>
          <img src="assets/logo.svg" alt="AllScale" style={{ height: 28 }} />
          <span style={{ fontSize: 15, fontWeight: 500, color: "#0C3124" }}>POS</span>
        </a>
        <div data-r="nav-links" style={navStyles.links}>
          <a href="#modes">Demo</a>
          <a href="#why">Why AllScale</a>
          <a href="#developers">Developers</a>
          <a href="#faq">FAQ</a>
        </div>
        <div style={{ display: "flex", gap: 10 }}>
          <button data-r="nav-signin" style={navStyles.signIn}>
            Contact sales
          </button>
          <button style={{ ...navStyles.cta, background: accent }}>Request access</button>
        </div>
      </div>
    </nav>
  );
}

const navStyles = {
  wrap: {
    position: "sticky", top: 0, zIndex: 30, background: "rgba(253,255,254,0.85)",
    backdropFilter: "blur(12px)", borderBottom: "1px solid #E5EEEA",
  },
  inner: {
    maxWidth: 1200, margin: "0 auto", padding: "14px 28px",
    display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24,
  },
  links: {
    display: "flex", gap: 28, fontSize: 14, fontWeight: 500,
  },
  signIn: {
    display: "inline-flex", alignItems: "center", gap: 8, padding: "10px 16px",
    borderRadius: 999, border: "1px solid #E4E6E5", background: "#fff",
    fontFamily: "inherit", fontSize: 14, fontWeight: 500, cursor: "pointer",
  },
  cta: {
    padding: "10px 18px", borderRadius: 999, border: 0, color: "#fff",
    fontFamily: "inherit", fontSize: 14, fontWeight: 500, cursor: "pointer",
  },
};

function GoogleG() {
  return (
    <svg width="16" height="16" viewBox="0 0 48 48"><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"/><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/></svg>
  );
}

/* ───────── Hero ───────── */
function Hero({ accent, brandName, currency, terminalStyle, activeMode, setActiveMode }) {
  return (
    <section style={heroStyles.wrap}>
      {/* Background dome gradient */}
      <div style={heroStyles.dome} />
      <div data-r="hero-inner" style={heroStyles.inner}>
        <div style={heroStyles.left}>
          <span style={heroStyles.eyebrow}>
            <span style={{ width: 6, height: 6, borderRadius: "50%", background: accent, display: "inline-block", marginRight: 8 }} />
            AllScale POS · Powered by AllScale Checkout
          </span>
          <h1 data-r="hero-h1" style={heroStyles.h1}>
            Accept stablecoin payments<br/>
            <span style={{ color: accent }}>in under a minute.</span>
          </h1>
          <p data-r="hero-lede" style={heroStyles.lede}>
            Turn any phone into a POS, or integrate AllScale Checkout into the terminals you already ship. One API, lower fees, instant settlement, no chargebacks.
          </p>
          <div data-r="hero-cta-row" style={heroStyles.ctaRow}>
            <button style={{ ...heroStyles.primary, background: accent }}>
              Try the demo <Arrow />
            </button>
            <button style={heroStyles.secondary}>
              Integrate AllScale Checkout
            </button>
          </div>
          <div style={heroStyles.trust}>
            <span>0.5% flat fee</span><Dot/>
            <span>Instant settlement</span><Dot/>
            <span>No chargebacks</span><Dot/>
            <span>Self-custody</span>
          </div>
        </div>

        <div data-r="hero-right" style={heroStyles.right}>
          <HeroPreview accent={accent} brandName={brandName} currency={currency} terminalStyle={terminalStyle} />
        </div>
      </div>
    </section>
  );
}

function HeroPreview({ accent, brandName, currency, terminalStyle }) {
  // Compact preview of mobile demo inside iPhone silhouette (scaled)
  return (
    <div data-r="hero-preview-wrap" style={{ position: "relative", display: "flex", alignItems: "center", justifyContent: "center", minHeight: 560 }}>
      <div style={{ transform: "scale(0.72)", transformOrigin: "center" }}>
        <IOSDevice width={402} height={780}>
          <MobilePOSDemo brandName={brandName} currency={currency} accent={accent} />
        </IOSDevice>
      </div>
      <div data-r="hero-floatcard" style={heroStyles.floatCard}>
        <div style={{ fontSize: 11, color: "#83968F", letterSpacing: "0.06em" }}>LIVE · POLYGON</div>
        <div style={{ fontSize: 18, fontWeight: 700, marginTop: 4 }}>+24.00 USDT</div>
        <div style={{ fontSize: 11, color: "#048E44" }}>Settled in 2.1s</div>
      </div>
    </div>
  );
}

function Dot() { return <span style={{ width: 3, height: 3, borderRadius: "50%", background: "#B6C3BE" }} />; }
function Arrow() { return <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg>; }

const heroStyles = {
  wrap: { position: "relative", overflow: "hidden", paddingBottom: 60 },
  dome: {
    position: "absolute", top: -200, left: "50%", transform: "translateX(-50%)",
    width: 1400, height: 900, borderRadius: "50%",
    background: "radial-gradient(closest-side, #E8F5EE 0%, #F2F8F5 35%, transparent 70%)",
    zIndex: 0, pointerEvents: "none",
  },
  inner: {
    position: "relative", zIndex: 1, maxWidth: 1200, margin: "0 auto",
    padding: "80px 28px 40px", display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 40, alignItems: "center",
  },
  left: { },
  eyebrow: {
    display: "inline-flex", alignItems: "center", padding: "6px 12px", borderRadius: 999,
    background: "#fff", border: "1px solid #E5EEEA", fontSize: 12, fontWeight: 500, color: "#048E44",
    marginBottom: 22,
  },
  h1: { fontSize: 64, fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 1.02, marginBottom: 20 },
  lede: { fontSize: 18, lineHeight: 1.5, color: "#4a5a54", maxWidth: 520, letterSpacing: "-0.01em" },
  ctaRow: { display: "flex", gap: 12, marginTop: 32, flexWrap: "wrap" },
  primary: {
    display: "inline-flex", alignItems: "center", gap: 10, padding: "16px 26px",
    borderRadius: 999, border: 0, color: "#fff", fontFamily: "inherit",
    fontSize: 16, fontWeight: 500, cursor: "pointer", letterSpacing: "-0.01em",
  },
  secondary: {
    padding: "16px 26px", borderRadius: 999, border: "1px solid #E4E6E5",
    background: "#fff", color: "#0C3124", fontFamily: "inherit",
    fontSize: 16, fontWeight: 500, cursor: "pointer",
  },
  trust: {
    marginTop: 28, display: "flex", gap: 12, flexWrap: "wrap",
    fontSize: 13, color: "#83968F", fontWeight: 500, alignItems: "center",
  },
  right: { position: "relative" },
  floatCard: {
    position: "absolute", right: 20, top: 80, background: "#fff", padding: "12px 16px",
    borderRadius: 16, boxShadow: "0 12px 32px rgba(0,0,0,0.12)", border: "1px solid #E5EEEA",
    minWidth: 160,
  },
};

/* ───────── Modes (two playable demos) ───────── */
function Modes({ accent, brandName, currency, terminalStyle, activeMode, setActiveMode }) {
  return (
    <section id="modes" data-r="modes-wrap" style={modesStyles.wrap}>
      <div data-r="modes-inner" style={modesStyles.inner}>
        <div style={{ textAlign: "center", marginBottom: 48 }}>
          <span style={modesStyles.tag}>Try it</span>
          <h2 data-r="modes-h2" style={modesStyles.h2}>Two ways to get paid.<br/>Both fully playable below.</h2>
          <p data-r="modes-sub" style={modesStyles.sub}>Switch between the mobile POS app and a simulated terminal that an integrator might build. Both use the same AllScale Checkout under the hood.</p>
        </div>

        <div data-r="modes-toggle" style={modesStyles.toggle}>
          <button onClick={() => setActiveMode("mobile")}
            style={{ ...modesStyles.toggleBtn, ...(activeMode === "mobile" ? modesStyles.toggleActive : {}) }}>
            <PhoneIcon/> Mobile POS
            <span style={modesStyles.forWho}>For merchants</span>
          </button>
          <button onClick={() => setActiveMode("terminal")}
            style={{ ...modesStyles.toggleBtn, ...(activeMode === "terminal" ? modesStyles.toggleActive : {}) }}>
            <TerminalIcon/> POS terminal
            <span style={modesStyles.forWho}>For integrators</span>
          </button>
        </div>

        <div data-r="modes-stage" style={modesStyles.stage}>
          {activeMode === "mobile" ? (
            <MobileStage accent={accent} brandName={brandName} currency={currency} />
          ) : (
            <TerminalStage accent={accent} brandName={brandName} currency={currency} terminalStyle={terminalStyle} />
          )}
        </div>
      </div>
    </section>
  );
}

function MobileStage({ accent, brandName, currency }) {
  return (
    <div data-r="mode-stage-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 48, alignItems: "center" }}>
      <div data-r="mode-stage-content">
        <h3 style={{ fontSize: 32, fontWeight: 700, letterSpacing: "-0.03em", marginBottom: 16 }}>Your phone is the register.</h3>
        <p style={{ fontSize: 17, lineHeight: 1.5, color: "#4a5a54", marginBottom: 24 }}>
          Open the app, punch in an amount, hand the customer a QR. Works on any phone, for any small business — a coffee cart, a pop-up, a weekend market stall.
        </p>
        <Step n={1} title="Enter amount" body="Tap the keypad. Every currency tabular-aligned to the cent." />
        <Step n={2} title="Show QR to customer" body="Generated instantly. Any stablecoin wallet can scan and pay." />
        <Step n={3} title="Instant confirmation" body="Funds land in your AllScale wallet in seconds. No T+2 hold." />
        <div style={{ marginTop: 24, padding: "14px 16px", background: "#F2F8F5", borderRadius: 16, border: "1px solid #E5EEEA", fontSize: 13, color: "#0C3124" }}>
          <strong style={{ fontWeight: 500 }}>Tip:</strong> This demo is fully live — try the keypad, watch the QR generate, wait for the auto-paid simulation.
        </div>
      </div>
      <div data-r="mobile-device" style={{ display: "flex", justifyContent: "center" }}>
        <IOSDevice width={380} height={780}>
          <MobilePOSDemo brandName={brandName} currency={currency} accent={accent} />
        </IOSDevice>
      </div>
    </div>
  );
}

function TerminalStage({ accent, brandName, currency, terminalStyle }) {
  return (
    <div data-r="mode-stage-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 48, alignItems: "center" }}>
      <div data-r="mode-stage-content">
        <h3 style={{ fontSize: 32, fontWeight: 700, letterSpacing: "-0.03em", marginBottom: 16 }}>Built into the terminals merchants already use.</h3>
        <p style={{ fontSize: 17, lineHeight: 1.5, color: "#4a5a54", marginBottom: 24 }}>
          POS providers drop AllScale Checkout into their firmware with one endpoint. Merchants get a new "crypto" tender button on hardware they already own.
        </p>
        <Step n={1} title="POST /checkout" body="Send amount + currency. Get back a checkout URL and QR payload." />
        <Step n={2} title="Render on screen" body="Terminal shows the QR. Customer scans with any wallet." />
        <Step n={3} title="Listen for webhook" body="payment.succeeded hits your endpoint. Print receipt, close the sale." />
        <div style={{ marginTop: 24, padding: "14px 16px", background: "#F2F8F5", borderRadius: 16, border: "1px solid #E5EEEA", fontSize: 13, color: "#0C3124" }}>
          <strong style={{ fontWeight: 500 }}>Integrators:</strong> Switch hardware style in the Tweaks panel (bottom right). Same software — different form factor.
        </div>
      </div>
      <div data-r="terminal-scene" style={{ display: "flex", justifyContent: "center" }}>
        <TerminalPOSDemo brandName={brandName} currency={currency} style={terminalStyle} accent={accent} />
      </div>
    </div>
  );
}

function Step({ n, title, body }) {
  return (
    <div style={{ display: "flex", gap: 14, marginBottom: 14 }}>
      <div style={{ width: 28, height: 28, borderRadius: "50%", background: "#F2F8F5", color: "#009859", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 500, fontSize: 13, flexShrink: 0 }}>{n}</div>
      <div>
        <div style={{ fontWeight: 500, fontSize: 15, marginBottom: 2 }}>{title}</div>
        <div style={{ fontSize: 14, color: "#83968F" }}>{body}</div>
      </div>
    </div>
  );
}

function PhoneIcon() { return <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="6" y="2" width="12" height="20" rx="3"/><path d="M11 18h2"/></svg>; }
function TerminalIcon() { return <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="14" rx="2"/><path d="M3 17h18M8 21h8"/></svg>; }

const modesStyles = {
  wrap: { background: "#FAFBFA", padding: "100px 0", borderTop: "1px solid #E5EEEA", borderBottom: "1px solid #E5EEEA" },
  inner: { maxWidth: 1200, margin: "0 auto", padding: "0 28px" },
  tag: { display: "inline-block", fontSize: 12, fontWeight: 500, color: "#048E44", background: "#E8F5EE", padding: "6px 12px", borderRadius: 999, marginBottom: 18 },
  h2: { fontSize: 48, fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 1.05, marginBottom: 18 },
  sub: { fontSize: 17, color: "#4a5a54", maxWidth: 640, margin: "0 auto", lineHeight: 1.5 },
  toggle: {
    display: "inline-flex", gap: 6, padding: 6, background: "#fff", border: "1px solid #E5EEEA",
    borderRadius: 999, margin: "0 auto 48px", boxShadow: "0 4px 16px rgba(0,0,0,0.04)",
  },
  toggleBtn: {
    display: "inline-flex", alignItems: "center", gap: 10, padding: "12px 24px",
    borderRadius: 999, border: 0, background: "transparent", color: "#83968F",
    fontFamily: "inherit", fontSize: 15, fontWeight: 500, cursor: "pointer",
  },
  toggleActive: { background: "#F2F8F5", color: "#0C3124" },
  forWho: { fontSize: 11, color: "#B6C3BE", fontWeight: 400, marginLeft: 4 },
  stage: { background: "#fff", borderRadius: 28, padding: 48, border: "1px solid #E5EEEA", boxShadow: "0 4px 16px rgba(0,0,0,0.04)" },
};
// Need to wrap toggle in a flex container so it centers
Object.assign(modesStyles.toggle, { display: "flex", width: "fit-content" });

/* ───────── Advantages ───────── */
function Advantages({ accent }) {
  const items = [
    { title: "0.5% flat fee", body: "Card networks take 2.9% + 30¢. You keep the difference on every sale.", emoji: null, icon: <FeeIcon/> },
    { title: "Instant settlement", body: "Funds land in your wallet in seconds. No T+2 banking hold, no weekends.", icon: <BoltIcon/> },
    { title: "No chargebacks", body: "Blockchain settlement is final. No disputes, no reserves, no surprise clawbacks.", icon: <ShieldIcon/> },
    { title: "Self-custody", body: "The merchant owns the keys. AllScale never holds the funds — it just routes them.", icon: <KeyIcon/> },
    { title: "Works anywhere", body: "Any country, any currency pair. Stablecoins don't care about borders or bank hours.", icon: <GlobeIcon/> },
    { title: "No PCI compliance", body: "Hosted checkout means cards and card data never touch your systems.", icon: <LockIcon/> },
    { title: "Stablecoin payouts", body: "Price your goods in USDT or USDC. Zero volatility between sale and settlement.", icon: <CoinIcon/> },
    { title: "5-minute integration", body: "One API key, one endpoint, one webhook. Ship crypto acceptance in an afternoon.", icon: <CodeIcon/> },
  ];
  return (
    <section id="why" data-r="adv-wrap" style={advStyles.wrap}>
      <div data-r="adv-inner" style={advStyles.inner}>
        <div style={{ textAlign: "center", marginBottom: 56 }}>
          <span style={modesStyles.tag}>Why AllScale Checkout</span>
          <h2 data-r="adv-h2" style={modesStyles.h2}>A better register for small businesses.</h2>
          <p style={modesStyles.sub}>The payment rail rewritten: lower fees, faster settlement, no middleman holding your money.</p>
        </div>
        <div data-r="adv-grid" style={advStyles.grid}>
          {items.map((it, i) => (
            <div key={i} data-r="adv-card" style={advStyles.card}>
              <div style={{ ...advStyles.iconWrap, color: accent }}>{it.icon}</div>
              <div style={{ fontSize: 18, fontWeight: 500, marginBottom: 8, letterSpacing: "-0.02em" }}>{it.title}</div>
              <div style={{ fontSize: 14, color: "#83968F", lineHeight: 1.5 }}>{it.body}</div>
            </div>
          ))}
        </div>

        <FeeComparison accent={accent} />
      </div>
    </section>
  );
}

function FeeComparison({ accent }) {
  return (
    <div data-r="fee-wrap" style={feeStyles.wrap}>
      <div data-r="fee-inner" style={feeStyles.inner}>
        <div>
          <div style={{ fontSize: 12, color: "#83968F", marginBottom: 8 }}>ON A $1,000 DAY</div>
          <div style={{ fontSize: 32, fontWeight: 700, letterSpacing: "-0.03em" }}>You keep an extra <span style={{ color: accent }}>$24</span>.<br/>Every day.</div>
          <div style={{ fontSize: 14, color: "#83968F", marginTop: 12 }}>Versus 2.9% + 30¢ card processing fees.</div>
        </div>
        <div style={feeStyles.bars}>
          <BarRow label="Card processor" amt="$29.30" pct={100} color="#DB9253" />
          <BarRow label="AllScale Checkout" amt="$5.00" pct={17} color={accent} />
        </div>
      </div>
    </div>
  );
}

function BarRow({ label, amt, pct, color }) {
  return (
    <div style={{ marginBottom: 18 }}>
      <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13, marginBottom: 6 }}>
        <span style={{ color: "#0C3124", fontWeight: 500 }}>{label}</span>
        <span style={{ color: "#83968F", fontVariantNumeric: "tabular-nums" }}>{amt}</span>
      </div>
      <div style={{ height: 12, background: "#F2F8F5", borderRadius: 999, overflow: "hidden" }}>
        <div style={{ height: "100%", width: `${pct}%`, background: color, borderRadius: 999, transition: "width 0.8s cubic-bezier(.2,.8,.2,1)" }} />
      </div>
    </div>
  );
}

// Simple inline icons
const IconBase = ({ d, sw = 1.5 }) => <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">{d}</svg>;
const FeeIcon = () => <IconBase d={<><path d="M19 5 5 19"/><circle cx="7" cy="7" r="2.5"/><circle cx="17" cy="17" r="2.5"/></>}/>;
const BoltIcon = () => <IconBase d={<path d="m13 2-9 12h7l-1 8 9-12h-7l1-8Z"/>}/>;
const ShieldIcon = () => <IconBase d={<><path d="M12 3 4 6v6c0 5 4 8 8 9 4-1 8-4 8-9V6l-8-3Z"/><path d="m9 12 2 2 4-4"/></>}/>;
const KeyIcon = () => <IconBase d={<><circle cx="8" cy="15" r="4"/><path d="m10.8 12.2 9-9M16 5l3 3M14 7l3 3"/></>}/>;
const GlobeIcon = () => <IconBase d={<><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></>}/>;
const LockIcon = () => <IconBase d={<><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></>}/>;
const CoinIcon = () => <IconBase d={<><circle cx="12" cy="12" r="9"/><path d="M15 9.5A3 3 0 0 0 12 8c-1.7 0-3 1-3 2.2 0 3 6 1.7 6 4.6C15 16 13.6 17 12 17a3 3 0 0 1-3-1.5M12 6v2M12 17v2"/></>}/>;
const CodeIcon = () => <IconBase d={<><path d="m8 8-5 4 5 4M16 8l5 4-5 4M14 5l-4 14"/></>}/>;

const advStyles = {
  wrap: { padding: "120px 0" },
  inner: { maxWidth: 1200, margin: "0 auto", padding: "0 28px" },
  grid: { display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20 },
  card: {
    background: "#fff", border: "1px solid #E5EEEA", borderRadius: 22, padding: 24,
    transition: "transform 0.2s, box-shadow 0.2s",
  },
  iconWrap: {
    width: 44, height: 44, borderRadius: 14, background: "#F2F8F5",
    display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 20,
  },
};

const feeStyles = {
  wrap: { marginTop: 64, background: "#F2F8F5", borderRadius: 28, padding: 40, border: "1px solid #E5EEEA" },
  inner: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "center" },
  bars: { },
};

/* ───────── Developer ───────── */
// Syntax-highlighted snippet — tokens colored like a proper IDE
const synT = {
  kw: "#F0A868",     // keyword (orange)
  str: "#7DD3A0",    // strings (green)
  num: "#E4C07A",    // numbers
  fn: "#7EC4E8",     // function/method
  key: "#B8D4C6",    // object keys
  cmt: "#5A7668",    // comments
  mute: "#83968F",   // plain text
  punct: "#D5E8DD",  // punctuation
};

const T = {
  k: (c) => <span style={{ color: synT.kw }}>{c}</span>,
  s: (c) => <span style={{ color: synT.str }}>{c}</span>,
  n: (c) => <span style={{ color: synT.num }}>{c}</span>,
  f: (c) => <span style={{ color: synT.fn }}>{c}</span>,
  key: (c) => <span style={{ color: synT.key }}>{c}</span>,
  c: (c) => <span style={{ color: synT.cmt, fontStyle: "italic" }}>{c}</span>,
  m: (c) => <span style={{ color: synT.mute }}>{c}</span>,
  p: (c) => <span style={{ color: synT.punct }}>{c}</span>,
};

function Developer({ accent }) {
  return (
    <section id="developers" data-r="dev-wrap" style={devStyles.wrap}>
      <div style={devStyles.gridDome} />
      <div data-r="dev-inner" style={devStyles.inner}>
        <div style={{ maxWidth: 760, marginBottom: 56 }}>
          <span style={devStyles.tag}>For integrators</span>
          <h2 data-r="dev-h2" style={devStyles.h2}>Three endpoints. One afternoon.<br/>A new tender on every terminal you ship.</h2>
          <p data-r="dev-lede" style={devStyles.lede}>
            AllScale Checkout is a hosted endpoint, not an SDK you have to maintain. POST an amount, render the QR we return, listen for a signed webhook. That's the whole integration.
          </p>
        </div>

        {/* The 3-step flow */}
        <div data-r="dev-flow" style={devStyles.flow}>
          <FlowStep
            n="01"
            label="Request"
            title="POST /v1/checkouts"
            subtitle="Send amount + currency from your terminal. Under 80ms at the p50."
            card={<RequestCard/>}
          />
          <FlowConnector/>
          <FlowStep
            n="02"
            label="Render"
            title="Show the QR on screen"
            subtitle="We return a payload. Customer scans with any stablecoin wallet. No SDK required."
            card={<ResponseCard/>}
          />
          <FlowConnector/>
          <FlowStep
            n="03"
            label="Confirm"
            title="Webhook fires on payment"
            subtitle="Signed event hits your endpoint in ~2s. Print receipt, close sale, done."
            card={<WebhookCard/>}
          />
        </div>

        {/* Footer row — stats + CTAs */}
        <div data-r="dev-footer-row" style={devStyles.footerRow}>
          <div data-r="dev-stats-row" style={devStyles.statsRow}>
            <Stat k="~80ms" v="Checkout API p50"/>
            <div data-r="dev-stat-div" style={devStyles.statDiv}/>
            <Stat k="<2s" v="Webhook delivery p99"/>
            <div data-r="dev-stat-div" style={devStyles.statDiv}/>
            <Stat k="4 SDKs" v="Node · Python · Go · Ruby"/>
            <div data-r="dev-stat-div" style={devStyles.statDiv}/>
            <Stat k="99.99%" v="Uptime (12-month)"/>
          </div>
          <div style={devStyles.footerCtaRow}>
            <button style={{ ...heroStyles.primary, background: accent }}>Read the docs <Arrow/></button>
            <button style={devStyles.ghostDark}>Request partnership</button>
          </div>
        </div>
      </div>
    </section>
  );
}

function FlowStep({ n, label, title, subtitle, card }) {
  return (
    <div style={devStyles.step}>
      <div style={devStyles.stepHead}>
        <span style={devStyles.stepNum}>{n}</span>
        <span style={devStyles.stepLabel}>{label}</span>
      </div>
      <div style={devStyles.stepTitle}>{title}</div>
      <div style={devStyles.stepSub}>{subtitle}</div>
      <div style={devStyles.stepCard}>{card}</div>
    </div>
  );
}

function FlowConnector() {
  return (
    <div data-r="dev-connector" style={devStyles.connector}>
      <svg width="28" height="12" viewBox="0 0 28 12" fill="none">
        <path d="M1 6h24m0 0-4-4m4 4-4 4" stroke="#12D16B" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    </div>
  );
}

function Stat({ k, v }) {
  return (
    <div>
      <div style={{ fontSize: 24, fontWeight: 700, color: "#fff", letterSpacing: "-0.02em", fontVariantNumeric: "tabular-nums" }}>{k}</div>
      <div style={{ fontSize: 12, color: "#83968F", marginTop: 4 }}>{v}</div>
    </div>
  );
}

/* ── Card 1: Request (terminal window with curl) ── */
function RequestCard() {
  return (
    <div style={winStyles.win}>
      <div style={winStyles.bar}>
        <div style={winStyles.dots}>
          <span style={{ ...winStyles.dot, background: "#FF605C" }}/>
          <span style={{ ...winStyles.dot, background: "#FFBD44" }}/>
          <span style={{ ...winStyles.dot, background: "#00CA4E" }}/>
        </div>
        <span style={winStyles.title}>terminal · pos-integration</span>
        <span style={winStyles.meta}>bash</span>
      </div>
      <div style={winStyles.body}>
        <div style={winStyles.line}>
          <span style={winStyles.prompt}>$</span> {T.f("curl")} {T.s("https://api.allscale.io/v1/checkouts")} {T.p("\\")}
        </div>
        <div style={winStyles.indent}>
          {T.k("-H")} {T.s('"Authorization: Bearer sk_live_7a4f…"')} {T.p("\\")}
        </div>
        <div style={winStyles.indent}>
          {T.k("-H")} {T.s('"Content-Type: application/json"')} {T.p("\\")}
        </div>
        <div style={winStyles.indent}>
          {T.k("-d")} {T.s("'{")}
        </div>
        <div style={winStyles.indent2}>
          {T.s('"amount"')}{T.p(":")} {T.s('"24.00"')}{T.p(",")}
        </div>
        <div style={winStyles.indent2}>
          {T.s('"currency"')}{T.p(":")} {T.s('"USD"')}{T.p(",")}
        </div>
        <div style={winStyles.indent2}>
          {T.s('"accepted_tokens"')}{T.p(":")} {T.p("[")}{T.s('"USDT"')}{T.p(",")} {T.s('"USDC"')}{T.p("]")}{T.p(",")}
        </div>
        <div style={winStyles.indent2}>
          {T.s('"metadata"')}{T.p(":")} {T.p("{")} {T.s('"pos"')}{T.p(":")} {T.s('"counter-04"')} {T.p("}")}
        </div>
        <div style={winStyles.indent}>
          {T.s("}'")}
        </div>
      </div>
    </div>
  );
}

/* ── Card 2: Response (JSON + mini QR) ── */
function ResponseCard() {
  return (
    <div style={winStyles.win}>
      <div style={winStyles.bar}>
        <div style={winStyles.httpStatus}>
          <span style={{ ...winStyles.methodTag, background: "#123628", color: "#7DD3A0", border: "1px solid #1e5a3f" }}>POST</span>
          <span style={winStyles.url}>/v1/checkouts</span>
        </div>
        <span style={{ ...winStyles.meta, color: "#7DD3A0" }}>201 Created · 78ms</span>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 0 }}>
        <div style={{ ...winStyles.body, borderRight: "1px solid #1c2a23" }}>
          <div>{T.p("{")}</div>
          <div style={winStyles.indent}>
            {T.key('"id"')}{T.p(":")} {T.s('"chk_a8f2b0"')}{T.p(",")}
          </div>
          <div style={winStyles.indent}>
            {T.key('"status"')}{T.p(":")} {T.s('"pending"')}{T.p(",")}
          </div>
          <div style={winStyles.indent}>
            {T.key('"amount"')}{T.p(":")} {T.s('"24.00"')}{T.p(",")}
          </div>
          <div style={winStyles.indent}>
            {T.key('"currency"')}{T.p(":")} {T.s('"USD"')}{T.p(",")}
          </div>
          <div style={winStyles.indent}>
            {T.key('"qr_payload"')}{T.p(":")} {T.s('"allscale:chk_…"')}{T.p(",")}
          </div>
          <div style={winStyles.indent}>
            {T.key('"expires_at"')}{T.p(":")} {T.n("1767312900")}
          </div>
          <div>{T.p("}")}</div>
        </div>
        <div style={winStyles.qrPreview}>
          <div style={winStyles.miniQr}>
            <MiniQR/>
          </div>
          <div style={{ fontSize: 10, color: "#83968F", marginTop: 10, letterSpacing: "0.06em" }}>QR_PAYLOAD</div>
        </div>
      </div>
    </div>
  );
}

function MiniQR() {
  // Decorative pixel grid — stable, on-brand
  const size = 13;
  const cells = [];
  const seed = [
    "1111111010111111111",
    "1000001010100000011",
    "1011101011111011101",
    "1011101001010011101",
    "1011101101010111101",
    "1000001010101000001",
    "1111111010101111111",
    "0000000011100000000",
    "1110110110101101011",
    "1010001000011001101",
    "1101111111101110010",
    "0010100110011011010",
    "1111111010111010011",
  ];
  for (let r = 0; r < size; r++) {
    for (let c = 0; c < size; c++) {
      const on = seed[r] && seed[r][c] === "1";
      cells.push(<div key={`${r}-${c}`} style={{ background: on ? "#FDFFFE" : "transparent" }}/>);
    }
  }
  return (
    <div style={{ width: 104, height: 104, display: "grid", gridTemplateColumns: `repeat(${size}, 1fr)`, gap: 1, padding: 8, background: "#0C3124", borderRadius: 8 }}>
      {cells}
    </div>
  );
}

/* ── Card 3: Webhook (Node handler + event log) ── */
function WebhookCard() {
  return (
    <div style={winStyles.win}>
      <div style={winStyles.bar}>
        <div style={winStyles.dots}>
          <span style={{ ...winStyles.dot, background: "#FF605C" }}/>
          <span style={{ ...winStyles.dot, background: "#FFBD44" }}/>
          <span style={{ ...winStyles.dot, background: "#00CA4E" }}/>
        </div>
        <span style={winStyles.title}>webhook.js · payment handler</span>
        <span style={winStyles.meta}>node</span>
      </div>
      <div style={winStyles.body}>
        <div>{T.f("app")}{T.p(".")}{T.f("post")}{T.p("(")}{T.s('"/allscale/webhook"')}{T.p(",")} {T.p("(")}req{T.p(",")} res{T.p(") =>")} {T.p("{")}</div>
        <div style={winStyles.indent}>
          {T.k("const")} {T.key("event")} {T.p("=")} verify{T.p("(")}req{T.p(".")}body{T.p(",")} req{T.p(".")}headers{T.p("[")}{T.s('"allscale-signature"')}{T.p("])")}{T.p(";")}
        </div>
        <div style={winStyles.indent}>
          {T.c("// → checkout.payment_succeeded")}
        </div>
        <div style={winStyles.indent}>
          {T.k("if")} {T.p("(")}event{T.p(".")}type {T.p("===")} {T.s('"checkout.payment_succeeded"')}{T.p(")")} {T.p("{")}
        </div>
        <div style={winStyles.indent2}>
          {T.f("printReceipt")}{T.p("(")}event{T.p(".")}data{T.p(");")}
        </div>
        <div style={winStyles.indent2}>
          {T.f("closeSale")}{T.p("(")}event{T.p(".")}data{T.p(".")}checkout_id{T.p(");")}
        </div>
        <div style={winStyles.indent}>
          {T.p("}")}
        </div>
        <div>{T.p("})")}</div>
      </div>
      <div style={winStyles.eventLog}>
        <div style={{ display: "flex", justifyContent: "space-between", fontSize: 10, color: "#83968F", letterSpacing: "0.08em", marginBottom: 8 }}>
          <span>EVENT LOG</span><span>LIVE</span>
        </div>
        <LogLine time="14:02:11" verb="POST" path="/allscale/webhook" status="200" amt="24.00 USDT"/>
        <LogLine time="14:01:47" verb="POST" path="/allscale/webhook" status="200" amt="8.50 USDT"/>
        <LogLine time="14:01:03" verb="POST" path="/allscale/webhook" status="200" amt="64.20 USDC"/>
      </div>
    </div>
  );
}

function LogLine({ time, verb, path, status, amt }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10, fontFamily: "ui-monospace, SFMono-Regular, Consolas, monospace", fontSize: 11, padding: "4px 0", color: "#B8D4C6" }}>
      <span style={{ color: "#5A7668", minWidth: 56 }}>{time}</span>
      <span style={{ color: "#7DD3A0", minWidth: 34 }}>{verb}</span>
      <span style={{ color: "#B8D4C6", flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{path}</span>
      <span style={{ color: "#7DD3A0", minWidth: 28 }}>{status}</span>
      <span style={{ color: "#E4C07A", minWidth: 86, textAlign: "right" }}>+{amt}</span>
    </div>
  );
}

const devStyles = {
  wrap: { background: "#0C3124", color: "#FDFFFE", padding: "120px 0", position: "relative", overflow: "hidden" },
  gridDome: {
    position: "absolute", top: -400, left: "50%", transform: "translateX(-50%)",
    width: 1400, height: 900, borderRadius: "50%",
    background: "radial-gradient(closest-side, rgba(18,209,107,0.10) 0%, rgba(18,209,107,0.04) 40%, transparent 70%)",
    pointerEvents: "none",
  },
  inner: { position: "relative", zIndex: 1, maxWidth: 1240, margin: "0 auto", padding: "0 28px" },
  tag: {
    display: "inline-flex", alignItems: "center", padding: "6px 12px", borderRadius: 999,
    background: "rgba(18,209,107,0.12)", color: "#12D16B", border: "1px solid rgba(18,209,107,0.2)",
    fontSize: 12, fontWeight: 500, marginBottom: 20,
  },
  h2: { fontSize: 48, fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 1.05, color: "#FDFFFE", marginBottom: 20 },
  lede: { fontSize: 17, lineHeight: 1.55, color: "#B6C3BE", maxWidth: 640 },

  flow: {
    display: "grid",
    gridTemplateColumns: "1fr auto 1fr auto 1fr",
    alignItems: "stretch",
    gap: 0,
    marginBottom: 56,
  },
  step: {
    display: "flex", flexDirection: "column",
    padding: 4,
  },
  stepHead: { display: "flex", alignItems: "center", gap: 10, marginBottom: 12 },
  stepNum: {
    fontFamily: "ui-monospace, SFMono-Regular, Consolas, monospace",
    fontSize: 11, color: "#12D16B", letterSpacing: "0.08em", fontWeight: 500,
    padding: "3px 8px", background: "rgba(18,209,107,0.1)", borderRadius: 999,
    border: "1px solid rgba(18,209,107,0.25)",
  },
  stepLabel: { fontSize: 11, color: "#83968F", letterSpacing: "0.14em", fontWeight: 500 },
  stepTitle: { fontSize: 20, fontWeight: 500, color: "#FDFFFE", letterSpacing: "-0.02em", marginBottom: 8 },
  stepSub: { fontSize: 13, color: "#83968F", lineHeight: 1.5, marginBottom: 16, minHeight: 56 },
  stepCard: { flex: 1 },

  connector: {
    display: "flex", alignItems: "center", justifyContent: "center",
    padding: "0 12px", paddingTop: 80, // aligns roughly with top of card
  },

  footerRow: {
    display: "flex", alignItems: "center", justifyContent: "space-between",
    padding: "28px 32px", background: "rgba(18,209,107,0.04)",
    border: "1px solid rgba(18,209,107,0.18)", borderRadius: 22,
    flexWrap: "wrap", gap: 20,
  },
  statsRow: { display: "flex", alignItems: "center", gap: 32, flexWrap: "wrap" },
  statDiv: { width: 1, height: 36, background: "rgba(255,255,255,0.1)" },
  footerCtaRow: { display: "flex", gap: 12, flexWrap: "wrap" },
  ghostDark: {
    padding: "16px 26px", borderRadius: 999, border: "1px solid rgba(255,255,255,0.15)",
    background: "transparent", color: "#FDFFFE", fontFamily: "inherit",
    fontSize: 16, fontWeight: 500, cursor: "pointer",
  },
};

// IDE-style "window" shared by the three cards
const winStyles = {
  win: {
    background: "#0A1814",
    border: "1px solid #1c2a23",
    borderRadius: 14,
    overflow: "hidden",
    boxShadow: "0 12px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.03)",
    fontFamily: "ui-monospace, SFMono-Regular, Consolas, monospace",
    fontSize: 12, lineHeight: 1.7,
  },
  bar: {
    display: "flex", alignItems: "center", gap: 10,
    padding: "10px 14px",
    background: "#0F231B",
    borderBottom: "1px solid #1c2a23",
  },
  dots: { display: "flex", gap: 6 },
  dot: { width: 10, height: 10, borderRadius: "50%", display: "inline-block" },
  title: { flex: 1, textAlign: "center", fontSize: 11, color: "#83968F", fontFamily: "Archivo, sans-serif", letterSpacing: 0 },
  meta: { fontSize: 10, color: "#5A7668", letterSpacing: "0.08em", fontFamily: "Archivo, sans-serif" },
  httpStatus: { display: "flex", alignItems: "center", gap: 10, flex: 1 },
  methodTag: {
    padding: "2px 8px", borderRadius: 6, fontSize: 10,
    letterSpacing: "0.08em", fontWeight: 500, fontFamily: "Archivo, sans-serif",
  },
  url: { color: "#D5E8DD", fontSize: 12, fontFamily: "ui-monospace, SFMono-Regular, Consolas, monospace" },
  body: { padding: "18px 18px", color: "#D5E8DD", whiteSpace: "nowrap", overflow: "auto" },
  line: { },
  indent: { paddingLeft: 16 },
  indent2: { paddingLeft: 32 },
  prompt: { color: "#12D16B", marginRight: 8 },
  qrPreview: {
    display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
    padding: 18, background: "#081512",
  },
  miniQr: { },
  eventLog: {
    padding: "14px 18px",
    borderTop: "1px solid #1c2a23",
    background: "#081512",
  },
};

/* ───────── FAQ ───────── */
function FAQ({ faqOpen, setFaqOpen }) {
  const qs = [
    { q: "What does my customer actually do?", a: "Scan the QR with any stablecoin wallet (Phantom, MetaMask, Rainbow, Trust Wallet — any of them). Confirm the amount. Done. Most customers pay in under 10 seconds." },
    { q: "Which currencies can I bill in?", a: "Price in any fiat: USD, CAD, SGD, HKD, EUR, and 40+ more. Customers pay in USDT or USDC. AllScale handles the pair conversion at spot with zero spread." },
    { q: "How does settlement actually work?", a: "Funds land directly in your self-custody AllScale wallet the moment the blockchain confirms the transaction — usually 2-4 seconds on Polygon. You control the keys. AllScale can't freeze or reverse anything." },
    { q: "What about chargebacks and disputes?", a: "There aren't any. Blockchain settlement is final — there's no 'card network' to file a chargeback through. You save the ~1% of revenue most small businesses lose to dispute reserves." },
    { q: "Do I need to be a crypto expert to use this?", a: "No. If you can use Square or Stripe, you can use AllScale. The mobile app hides all the wallet stuff — you see dollars, cents, and a receipt." },
    { q: "I'm a POS hardware vendor. How do I integrate?", a: "One REST endpoint (POST /checkouts), one webhook (payment.succeeded). Your terminals get a new 'crypto' tender option. Contact partnerships@allscale.io for a white-label SDK and revenue share." },
  ];
  return (
    <section id="faq" data-r="faq-wrap" style={faqStyles.wrap}>
      <div data-r="faq-inner" style={faqStyles.inner}>
        <div style={{ textAlign: "center", marginBottom: 48 }}>
          <span style={modesStyles.tag}>FAQ</span>
          <h2 data-r="faq-h2" style={modesStyles.h2}>Questions, answered.</h2>
        </div>
        <div style={faqStyles.list}>
          {qs.map((item, i) => (
            <div key={i} data-r="faq-row" style={faqStyles.row} onClick={() => setFaqOpen(faqOpen === i ? -1 : i)}>
              <div style={faqStyles.qRow}>
                <span style={{ fontSize: 17, fontWeight: 500, letterSpacing: "-0.02em" }}>{item.q}</span>
                <span style={{ ...faqStyles.plus, transform: faqOpen === i ? "rotate(45deg)" : "none" }}>+</span>
              </div>
              {faqOpen === i && <div style={faqStyles.a}>{item.a}</div>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const faqStyles = {
  wrap: { padding: "120px 0", background: "#FAFBFA", borderTop: "1px solid #E5EEEA" },
  inner: { maxWidth: 860, margin: "0 auto", padding: "0 28px" },
  list: { display: "flex", flexDirection: "column", gap: 12 },
  row: { background: "#fff", border: "1px solid #E5EEEA", borderRadius: 22, padding: "22px 26px", cursor: "pointer" },
  qRow: { display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16 },
  plus: { fontSize: 24, color: "#009859", fontWeight: 300, transition: "transform 0.2s", lineHeight: 1 },
  a: { fontSize: 15, color: "#4a5a54", lineHeight: 1.55, marginTop: 14, paddingTop: 14, borderTop: "1px solid #E5EEEA" },
};

/* ───────── CTA ───────── */
function CTA({ accent }) {
  return (
    <section data-r="cta-wrap" style={ctaStyles.wrap}>
      <div style={ctaStyles.card}>
        <div style={ctaStyles.dome} />
        <div data-r="cta-card-inner" style={{ position: "relative", zIndex: 1, textAlign: "center", padding: "72px 40px" }}>
          <h2 data-r="cta-h2" style={{ fontSize: 48, fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 1.05, marginBottom: 16 }}>
            Your register, on every phone.<br/>Starting today.
          </h2>
          <p style={{ fontSize: 17, color: "#4a5a54", maxWidth: 560, margin: "0 auto 32px", lineHeight: 1.5 }}>
            AllScale POS is invite-only while we onboard early merchants and integration partners. Tell us about your business and we'll get back to you within one business day.
          </p>
          <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
            <button style={{ ...heroStyles.primary, background: accent }}>
              Request access <Arrow />
            </button>
            <button style={heroStyles.secondary}>Partnership inquiry</button>
          </div>
          <div style={{ fontSize: 12, color: "#83968F", marginTop: 20 }}>
            You'll need an AllScale Checkout API key & secret. <a href="#" style={{ color: "#009859" }}>Get one in 2 minutes →</a>
          </div>
        </div>
      </div>
    </section>
  );
}

const ctaStyles = {
  wrap: { padding: "80px 28px 40px" },
  card: {
    maxWidth: 1000, margin: "0 auto", background: "#fff", border: "1px solid #E5EEEA",
    borderRadius: 28, position: "relative", overflow: "hidden",
    boxShadow: "0 12px 32px rgba(0,0,0,0.08)",
  },
  dome: {
    position: "absolute", top: -300, left: "50%", transform: "translateX(-50%)",
    width: 900, height: 700, borderRadius: "50%",
    background: "radial-gradient(closest-side, #E8F5EE 0%, #F2F8F5 40%, transparent 70%)",
  },
};

/* ───────── Footer ───────── */
function Footer() {
  return (
    <footer style={footerStyles.wrap}>
      <div data-r="footer-inner" style={footerStyles.inner}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <img src="assets/logo.svg" alt="AllScale" style={{ height: 22 }} />
          <span style={{ fontSize: 13, color: "#83968F" }}>POS · Built on AllScale Checkout</span>
        </div>
        <div style={{ fontSize: 13, color: "#83968F" }}>© 2026 AllScale · Self-custody by design</div>
      </div>
    </footer>
  );
}

const footerStyles = {
  wrap: { borderTop: "1px solid #E5EEEA", padding: "32px 28px", background: "#FDFFFE" },
  inner: { maxWidth: 1200, margin: "0 auto", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 12 },
};

window.App = App;

/* Render */
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);