/* global React, ReactDOM */
const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#E8C94B",
  "showQR": true,
  "tier": "premium"
}/*EDITMODE-END*/;

// ────────────────────────────────────────────────────────────────────────────
// Hooks
// ────────────────────────────────────────────────────────────────────────────
function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    const inView = () => {
      const r = el.getBoundingClientRect();
      const vh = window.innerHeight || document.documentElement.clientHeight;
      return r.top < vh * 0.95 && r.bottom > 0;
    };
    if (inView()) { el.classList.add("is-in"); return; }
    const fallback = setTimeout(() => el.classList.add("is-in"), 1200);
    let io;
    if (typeof IntersectionObserver !== "undefined") {
      io = new IntersectionObserver(
        (entries) => entries.forEach((e) => {
          if (e.isIntersecting) { e.target.classList.add("is-in"); clearTimeout(fallback); }
        }),
        { threshold: 0.05, rootMargin: "0px 0px -5% 0px" }
      );
      io.observe(el);
    }
    return () => { clearTimeout(fallback); io && io.disconnect(); };
  }, []);
  return ref;
}

function Reveal({ children, delay = 0, as: As = "div", className = "", ...rest }) {
  const ref = useReveal();
  const cls = ["reveal", delay && `reveal--delay-${delay}`, className].filter(Boolean).join(" ");
  return <As ref={ref} className={cls} {...rest}>{children}</As>;
}

function Scramble({ value, duration = 1100 }) {
  const [out, setOut] = useState(value);
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    const run = () => {
      const chars = "0123456789$%.";
      const target = String(value);
      const start = performance.now();
      let raf;
      const tick = (t) => {
        const p = Math.min(1, (t - start) / duration);
        const reveal = Math.floor(target.length * p);
        const scrambled = target.split("").map((c, i) =>
          i < reveal || /\s|\.|,/.test(c) ? c : chars[Math.floor(Math.random() * chars.length)]
        ).join("");
        setOut(scrambled);
        if (p < 1) raf = requestAnimationFrame(tick);
        else setOut(target);
      };
      raf = requestAnimationFrame(tick);
      return () => cancelAnimationFrame(raf);
    };
    if (typeof IntersectionObserver === "undefined") { run(); return; }
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { run(); io.disconnect(); }
    }, { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, [value, duration]);
  return <span ref={ref} className="scramble">{out}</span>;
}

function Aurora() {
  useEffect(() => {
    const el = document.querySelector(".aurora");
    if (!el) return;
    const onMove = (e) => {
      el.style.setProperty("--mx", e.clientX + "px");
      el.style.setProperty("--my", e.clientY + "px");
    };
    window.addEventListener("mousemove", onMove);
    return () => window.removeEventListener("mousemove", onMove);
  }, []);
  return <div className="aurora" />;
}

// ────────────────────────────────────────────────────────────────────────────
// QR pattern (deterministic mock)
// ────────────────────────────────────────────────────────────────────────────
function QRPattern({ size = 110 }) {
  // 21x21 deterministic pattern with finder squares
  const N = 21;
  const seed = (i, j) => ((i * 73 + j * 19 + i * j) % 5) < 2;
  const isFinder = (i, j) =>
    (i < 7 && j < 7) || (i < 7 && j > N - 8) || (i > N - 8 && j < 7);
  const finderCell = (i, j) => {
    const inSq = (a, b, ox, oy) => a >= ox && a < ox + 7 && b >= oy && b < oy + 7;
    let ox = 0, oy = 0;
    if (i < 7 && j < 7) { ox = 0; oy = 0; }
    else if (i < 7 && j > N - 8) { ox = 0; oy = N - 7; }
    else if (i > N - 8 && j < 7) { ox = N - 7; oy = 0; }
    const ri = i - ox, rj = j - oy;
    const onEdge = ri === 0 || ri === 6 || rj === 0 || rj === 6;
    const inner = ri >= 2 && ri <= 4 && rj >= 2 && rj <= 4;
    return onEdge || inner;
  };
  const cells = [];
  for (let i = 0; i < N; i++) {
    for (let j = 0; j < N; j++) {
      const on = isFinder(i, j) ? finderCell(i, j) : seed(i, j);
      if (on) cells.push(<rect key={`${i}-${j}`} x={j} y={i} width="1" height="1" fill="#07070A" />);
    }
  }
  return (
    <svg viewBox={`0 0 ${N} ${N}`} width={size} height={size} shapeRendering="crispEdges">
      <rect width={N} height={N} fill="#fff" />
      {cells}
      <rect x={N/2 - 2.4} y={N/2 - 2.4} width={4.8} height={4.8} fill="#fff" />
      <rect x={N/2 - 1.8} y={N/2 - 1.8} width={3.6} height={3.6} fill="#E8C94B" rx="0.4" />
    </svg>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// Floating QR
// ────────────────────────────────────────────────────────────────────────────
const REFERRAL_URL = "https://app.kast.xyz/referral/P4U426C3";
const REFERRAL_CODE = "P4U426C3";

function FloatingQR({ accent, show }) {
  const [collapsed, setCollapsed] = useState(false);
  const [copied, setCopied] = useState(false);
  const onCopy = () => {
    try { navigator.clipboard && navigator.clipboard.writeText(REFERRAL_URL); } catch(e){}
    setCopied(true); setTimeout(() => setCopied(false), 1600);
  };
  if (!show) return null;
  return (
    <div className={`qr-dock ${collapsed ? "qr-dock--collapsed" : ""}`}>
      <button className="qr-dock__toggle" onClick={() => setCollapsed(!collapsed)} aria-label="Toggle QR">
        {collapsed ? "↗" : "–"}
      </button>
      <a href={REFERRAL_URL} target="_blank" rel="noopener" className="qr-dock__qr">
        <img src="assets/qr-marcio.png" alt="QR · baixar Kast" />
      </a>
      <div className="qr-dock__copy">
        <div className="qr-dock__step"><span style={{ color: accent }}>01</span> Escaneie · baixe o app</div>
        <div className="qr-dock__step"><span style={{ color: accent }}>02</span> Cadastre com o código</div>
        <div className="qr-dock__code" style={{ borderColor: accent, color: accent }}>{REFERRAL_CODE}</div>
        <div className="qr-dock__step"><span style={{ color: accent }}>03</span> Ative missão · ganhe até $50</div>
        <button onClick={onCopy} className="qr-dock__copybtn" style={{ borderColor: accent, color: accent }}>
          {copied ? "Link copiado ✓" : "Can't scan? Copy link"}
        </button>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// Top nav
// ────────────────────────────────────────────────────────────────────────────
function Nav() {
  const links = [
    ["florida", "Flórida"],
    ["conta", "Conta USD"],
    ["cards", "Cards"],
    ["pix", "PIX"],
    ["suporte", "Suporte"],
    ["oferta", "Oferta"],
  ];
  return (
    <nav className="nav">
      <div className="nav__inner">
        <a href="#top" className="nav__logo">
          <svg className="nav__mark" viewBox="0 0 32 32" fill="none">
            <rect width="32" height="32" rx="6" fill="currentColor"/>
            <path d="M9 8h3.2v6.8L18.4 8h3.9l-6.4 7 6.6 9h-4.1l-4.9-6.7-1.3 1.4V24H9V8z" fill="#0A0A0A"/>
          </svg>
          <span>KAST<span className="nav__partner"> · partner brasil ↔ orlando</span></span>
        </a>
        <div className="nav__links">
          {links.map(([id, label]) => (
            <a key={id} href={`#${id}`}>{label}</a>
          ))}
        </div>
        <a href="#conta" className="btn btn--accent btn--sm">Abrir conta</a>
      </div>
    </nav>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// Hero — Flórida narrative
// ────────────────────────────────────────────────────────────────────────────
function Hero({ accent }) {
  return (
    <section id="top" className="hero" data-screen-label="01 Hero">
      <div className="hero__grid">
        <div className="hero__left">
          <Reveal className="eyebrow">
            <span className="dot" style={{ background: accent }}></span>
            Brasil ↔ Orlando, FL · USA
          </Reveal>
          <Reveal as="h1" delay={1} className="hero__title">
            Vai viajar pra<br/>
            <span className="hl" style={{ background: accent }}>Flórida?</span><br/>
            <em>Leva dólar de verdade.</em>
          </Reveal>
          <Reveal as="p" delay={2} className="hero__sub">
            O cartão Kast é um <b>VISA aceito em todo lugar que a bandeira anda</b> —
            do parque ao outlet, do Uber ao café da esquina.
            <b> Sem IOF. Sem taxas escondidas. Sem ligar pro gerente</b> antes de embarcar.
          </Reveal>
          <Reveal delay={3} className="hero__cta">
            <a href="#oferta" className="btn btn--accent">
              Clica aqui — quero o meu
              <span className="arrow">→</span>
            </a>
            <a href="#cards" className="btn btn--ghost">Comparar os cartões</a>
          </Reveal>
          <Reveal delay={4} className="hero__stats">
            <div><b>0%</b><span>IOF na conversão*</span></div>
            <div><b>VISA</b><span>aceito em todos os EUA</span></div>
            <div><b>até 8%</b><span>cashback em USD</span></div>
          </Reveal>
        </div>

        <div className="hero__right">
          <div className="hero-stage">
            <div className="hero-stage__grid" aria-hidden="true"></div>
            <div className="hero-stage__sun" style={{ background: accent }} />
            <div className="hero-stage__rings" aria-hidden="true">
              <span style={{ borderColor: accent }}></span>
              <span style={{ borderColor: accent }}></span>
              <span style={{ borderColor: accent }}></span>
            </div>
            <div className="hero-cards">
              <div className="hero-card-wrap hero-card-wrap--1">
                {window.KastCard && <window.KastCard variant="k" />}
              </div>
              <div className="hero-card-wrap hero-card-wrap--2">
                {window.KastCard && <window.KastCard variant="x" />}
              </div>
              <div className="hero-card-wrap hero-card-wrap--3">
                {window.KastCard && <window.KastCard variant="kast-gold" />}
              </div>
            </div>
            <div className="hero-stage__caption">
              <span style={{ background: accent, color: "#07070A" }}>VISA</span>
              aceito onde a bandeira está.
            </div>
          </div>
        </div>
      </div>
      <div className="ticker">
        <div className="ticker__row">
          {Array(2).fill(0).flatMap((_, k) =>
            ["DISNEY · UNIVERSAL", "USDC = US$1,00", "PIX 24/7", "VISA INFINITE", "CASHBACK ATÉ 8%", "ZERO IOF*", "ORLANDO ↔ BRASIL"].map((t, i) => (
              <span key={`${k}-${i}`} className="ticker__item">{t} <em>✦</em></span>
            ))
          )}
        </div>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// Florida use-cases (replaces the old "Dolarizar" steps)
// ────────────────────────────────────────────────────────────────────────────
function Florida({ accent }) {
  const places = [
    { n: "01", t: "Parques & atrações", d: "Disney, Universal, SeaWorld, Kennedy Space Center. Passa o cartão como se fosse local." },
    { n: "02", t: "Outlets & shopping", d: "Premium Outlets, Mall at Millenia, Florida Mall. Sem IOF mordendo cada compra." },
    { n: "03", t: "Uber, restaurantes, café", d: "Tudo que aceita Visa aceita o seu Kast. Pagamento por aproximação, Apple Pay, Google Pay." },
    { n: "04", t: "Saque em ATM", d: "Pega dólar em espécie em qualquer caixa Visa nos EUA quando precisar." },
  ];
  return (
    <section id="florida" className="section section--dark" data-screen-label="02 Florida">
      <header className="section__head">
        <Reveal as="span" className="kicker">/ 01 — Onde funciona</Reveal>
        <Reveal as="h2" delay={1} className="section__title">Em qualquer lugar que<br/>tenha o <span className="u" style={{ borderColor: accent }}>logo VISA</span>.</Reveal>
        <Reveal as="p" delay={2} className="section__lede">
          Não é um cartão limitado. É um Visa real, com BIN americano, processado igualzinho
          ao cartão de qualquer americano. A diferença? Zero IOF e cashback em dólar.
        </Reveal>
      </header>
      <div className="steps">
        {places.map((s, i) => (
          <Reveal key={s.n} delay={Math.min(4, i+1)} className="step">
            <div className="step__n" style={{ color: accent }}>{s.n}</div>
            <div className="step__t">{s.t}</div>
            <div className="step__d">{s.d}</div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// Conta Global USD (kast.xyz/global-accounts)
// ────────────────────────────────────────────────────────────────────────────
function ContaGlobal({ accent }) {
  const features = [
    { n: "01", t: "ACH + Fedwire",         d: "Receba e envie dólar pelos trilhos bancários americanos. SWIFT em breve." },
    { n: "02", t: "Ativação instantânea",  d: "Sem papelada, sem fila, sem espera. Conta ativa em minutos pelo app." },
    { n: "03", t: "Proteção bank-grade",   d: "Saldo custodiado por parceiros institucionais. Bridge + Lead Bank, FDIC." },
    { n: "04", t: "Integrado ao cartão",   d: "Gasta direto do saldo da conta. Sem migrar, sem converter, sem demora." },
  ];

  const flow = [
    { tag: "Recebe",  k: "USD",       desc: "Salário, freelancer, marketplace — direto do empregador americano." },
    { tag: "Deposita",k: "USDC/USDT", desc: "Stablecoins de ETH, Tron, Arbitrum convertem em USD instantaneamente." },
    { tag: "Envia",   k: "200+ países",desc: "Mande dólar pra qualquer lugar — em USD ou em moeda local (15+)." },
    { tag: "Gasta",   k: "150M lojas", desc: "Tap & go com Visa em qualquer estabelecimento do planeta." },
  ];

  return (
    <section id="conta" className="section section--dark" data-screen-label="03 Conta Global">
      <header className="section__head">
        <Reveal as="span" className="kicker">/ 02 — Conta Global USD</Reveal>
        <Reveal as="h2" delay={1} className="section__title">
          Conta em dólar.<br/>
          <span className="u" style={{ borderColor: accent }}><em>De qualquer país.</em></span>
        </Reveal>
        <Reveal as="p" delay={2} className="section__lede">
          Receba pagamentos como um local nos EUA e gaste globalmente —
          sem feriado bancário, sem limite, sem atraso. <b>O dinheiro de hoje é global.</b>
          O banco de ontem nunca foi.
        </Reveal>
      </header>

      {/* Globe visual — kast.xyz/global-accounts style */}
      {window.GlobalAccountsViz && (
        <Reveal className="ga-wrap">
          <window.GlobalAccountsViz accent={accent} />
        </Reveal>
      )}

      {/* Mock conta + features */}
      <div className="conta-grid">
        <Reveal className="conta-mock">
          <div className="conta-mock__top">
            <div className="conta-mock__brand">
              <span className="conta-mock__pin" style={{ background: accent }} />
              KAST · Global USD Account
            </div>
            <span className="conta-mock__chip">USD</span>
          </div>
          <div className="conta-mock__balance">
            <small>SALDO ATUAL</small>
            <b>US$ <Scramble value="12.480,55" /></b>
            <span>≈ R$ 65.327,72</span>
          </div>
          <div className="conta-mock__rows">
            <div>
              <small>ROUTING NUMBER</small>
              <b className="mono">101019644</b>
            </div>
            <div>
              <small>ACCOUNT NUMBER</small>
              <b className="mono">8881 ••• 4290</b>
            </div>
            <div>
              <small>BANK</small>
              <b>Lead Bank · Member FDIC</b>
            </div>
            <div>
              <small>TIPO</small>
              <b>ACH · Fedwire</b>
            </div>
          </div>
          <div className="conta-mock__rails">
            <span className="rail" style={{ borderColor: accent, color: accent }}>ACH</span>
            <span className="rail" style={{ borderColor: accent, color: accent }}>FEDWIRE</span>
            <span className="rail rail--soon">SWIFT · em breve</span>
          </div>
          <p className="conta-mock__legal">
            Account Number e Routing são identificadores virtuais de coleta. Fundos recebidos
            são automaticamente convertidos em ativo digital (USDC) — não é depósito bancário FDIC.
          </p>
        </Reveal>

        <div className="conta-features">
          {features.map((f, i) => (
            <Reveal key={f.n} delay={Math.min(4, i+1)} className="conta-feat">
              <div className="conta-feat__n" style={{ color: accent }}>{f.n}</div>
              <div className="conta-feat__t">{f.t}</div>
              <div className="conta-feat__d">{f.d}</div>
            </Reveal>
          ))}
        </div>
      </div>

      {/* Flow horizontal */}
      <Reveal className="conta-flow">
        <div className="conta-flow__head">
          <span className="conta-flow__label" style={{ color: accent }}>// uma conta · quatro movimentos</span>
        </div>
        <div className="conta-flow__rail">
          {flow.map((s, i) => (
            <React.Fragment key={s.tag}>
              <div className="conta-flow__node">
                <span className="conta-flow__tag" style={{ background: accent, color: "#07070A" }}>{s.tag}</span>
                <b>{s.k}</b>
                <small>{s.desc}</small>
              </div>
              {i < flow.length - 1 && <span className="conta-flow__arrow">→</span>}
            </React.Fragment>
          ))}
        </div>
      </Reveal>

      {/* Como abrir — 3 passos */}
      <Reveal className="conta-howto">
        <div className="conta-howto__head">
          <span className="conta-howto__label" style={{ color: accent }}>// abrir a conta · 3 passos</span>
          <h3>Sem papelada. Sem espera. Sem CPF americano.</h3>
        </div>
        <div className="conta-howto__steps">
          <div className="conta-howto__step">
            <span style={{ color: accent }}>01</span>
            <b>Baixa o app</b>
            <small>Escaneie o QR ali no canto. iOS ou Android, ambos. 30 segundos.</small>
          </div>
          <div className="conta-howto__step">
            <span style={{ color: accent }}>02</span>
            <b>Cadastra com {REFERRAL_CODE}</b>
            <small>Use meu link de partner pra liberar as missões premiadas. Documento brasileiro vale.</small>
          </div>
          <div className="conta-howto__step">
            <span style={{ color: accent }}>03</span>
            <b>Conta + cartão ativos</b>
            <small>Routing e account number americanos na hora. Cartão virtual em minutos.</small>
          </div>
        </div>
        <div className="conta-howto__cta">
          <a href={REFERRAL_URL} target="_blank" rel="noopener" className="btn btn--accent">Abrir minha conta agora <span className="arrow">→</span></a>
          <span className="conta-howto__note">KAST não é banco — é uma fintech. Serviços bancários via Bridge + Lead Bank, Member FDIC.</span>
        </div>
      </Reveal>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// Stablecoin
// ────────────────────────────────────────────────────────────────────────────
function Stablecoin({ accent }) {
  return (
    <section id="stablecoin" className="section section--cream" data-screen-label="04 Stablecoin">
      <div className="section__split">
        <div>
          <Reveal as="span" className="kicker kicker--dark">/ 03 — Stablecoin</Reveal>
          <Reveal as="h2" delay={1} className="section__title section__title--dark">
            Por trás do<br/>
            cartão tem<br/>
            <em>dólar de verdade.</em>
          </Reveal>
        </div>
        <Reveal delay={2} className="explainer">
          <p>
            <b>Stablecoin</b> é uma moeda digital cujo valor é colado em outra
            moeda real. A Kast usa <b>USDC</b>, emitida pela Circle, com lastro
            1-para-1 em dólares mantidos em bancos americanos.
          </p>
          <p>
            Não é Bitcoin. Não oscila. Não é especulação.
            É a forma mais rápida e barata de um brasileiro
            ter dólar de verdade na carteira — e gastar como dólar.
          </p>
          <ul className="checks">
            <li><span className="check" style={{ background: accent }}>✓</span> 1 USDC = 1 dólar, sempre.</li>
            <li><span className="check" style={{ background: accent }}>✓</span> Auditado mensalmente por uma Big Four.</li>
            <li><span className="check" style={{ background: accent }}>✓</span> Aceito no mundo todo via Visa.</li>
            <li><span className="check" style={{ background: accent }}>✓</span> Reservas líquidas e públicas.</li>
          </ul>
        </Reveal>
      </div>

      <Reveal className="peg-viz">
        <div className="peg-viz__line">
          <div className="peg-viz__row">
            <span>BRL</span>
            <div className="wave wave--volatile"></div>
            <small>volátil — perde valor</small>
          </div>
          <div className="peg-viz__row">
            <span>USDC</span>
            <div className="wave wave--stable" style={{ background: accent }}></div>
            <small>colado em US$ 1,00</small>
          </div>
          <div className="peg-viz__row">
            <span>BTC</span>
            <div className="wave wave--crypto"></div>
            <small>especulativo — não é dinheiro</small>
          </div>
        </div>
      </Reveal>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// Comparativo Cards (Standard / Premium / Private)
// ────────────────────────────────────────────────────────────────────────────
const TIERS = [
  {
    id: "standard",
    name: "Standard",
    cb: "1.5%",
    visa: "VISA Platinum",
    points: "—",
    perks: "Anuidade grátis · cashback até $2k em gastos/mês",
    cta: "Get Standard",
    bg: "linear-gradient(135deg, #1A1A22, #0A0A0E)",
    fg: "#fff",
    cards: [
      { name: "K Card",                desc: "O cartão padrão da Kast",      variant: "k" },
      { name: "Solana Card",           desc: "Edição cripto Solana",          variant: "solana" },
      { name: "Bitcoin Standard",      desc: "Edição cripto BTC",             variant: "bitcoin-standard" },
      { name: "Pengu Card",            desc: "Edição Pengu · azul",           variant: "pengu" },
    ],
  },
  {
    id: "premium",
    name: "Premium",
    cb: "2%",
    visa: "VISA Infinite",
    points: "+1% em todos os gastos",
    perks: "$1k/ano · cashback até $10k/mês · KAST Points ilimitados",
    cta: "Get Premium",
    bg: "#E8C94B",
    fg: "#07070A",
    badge: "MAIS PEDIDO PRA VIAJAR",
    cards: [
      { name: "X Card",            desc: "Metal card · elevated living",    variant: "x" },
      { name: "Solana Illuma",     desc: "Metal iluminado · edição premium", variant: "solana-illuma" },
      { name: "Bitcoin Black",     desc: "Cartão metal · edição BTC",        variant: "bitcoin-black" },
      { name: "Pengu Black",       desc: "Cartão metal · edição Pengu",      variant: "pengu-black" },
    ],
  },
  {
    id: "private",
    name: "Private",
    cb: "3%",
    visa: "VISA Infinite",
    points: "+2% em todos os gastos",
    perks: "$10k/ano · cashback até $40k/mês · concierge senior · 1 Gold inclusa",
    cta: "Get Private",
    bg: "linear-gradient(135deg, #C9A23A, #6B4815)",
    fg: "#fff",
    cards: [
      { name: "Bitcoin Gold Card", desc: "24k gold plated · ultimate flex", variant: "bitcoin-gold" },
      { name: "KAST Gold Card",    desc: "24k gold plated · Kast",            variant: "kast-gold" },
      { name: "Solana Gold Card",  desc: "24k gold plated · Solana",         variant: "solana-gold" },
      { name: "Pengu Gold Card",   desc: "24k gold plated · Pengu",          variant: "pengu-gold" },
      { name: "Solana Solid Gold", desc: "37g de ouro maciço · invite only", variant: "solana-solid-gold", soloGold: true },
    ],
  },
];

function Cards({ accent, currentTier, setCurrentTier }) {
  const t = TIERS.find(x => x.id === currentTier) || TIERS[1];
  return (
    <section id="cards" className="section section--dark cards-section" data-screen-label="05 Cards">
      <div className="cards-3d-bg" aria-hidden="true">
        <div className="cards-3d-bg__grid"></div>
        <div className="cards-3d-bg__horizon" style={{ background: `linear-gradient(180deg, transparent, ${accent}22, transparent)` }}></div>
        <div className="cards-3d-bg__orb cards-3d-bg__orb--1" style={{ background: accent }}></div>
        <div className="cards-3d-bg__orb cards-3d-bg__orb--2"></div>
        <div className="cards-3d-bg__beams" style={{ "--accent": accent }}>
          <span></span><span></span><span></span><span></span><span></span>
        </div>
      </div>
      <header className="section__head">
        <Reveal as="span" className="kicker">/ 04 — Cards &amp; cashback</Reveal>
        <Reveal as="h2" delay={1} className="section__title">
          Três tiers.<br/>
          Um cashback que <em>cresce com você.</em>
        </Reveal>
        <Reveal as="p" delay={2} className="section__lede">
          Compare lado a lado e escolha o teu. Standard pra começar,
          Premium pra quem viaja, Private pra quem quer concierge e cartão de ouro de verdade.
        </Reveal>
      </header>

      {/* Tier comparison strip */}
      <Reveal className="tier-grid">
        {TIERS.map((tier, i) => (
          <div
            key={tier.id}
            className={`tier-col ${currentTier === tier.id ? "tier-col--active" : ""}`}
            style={{ background: tier.bg, color: tier.fg }}
            onClick={() => setCurrentTier(tier.id)}
          >
            {tier.badge && <div className="tier-col__badge" style={{ background: "#07070A", color: accent }}>{tier.badge}</div>}
            <div className="tier-col__head">
              <div className="tier-col__name">{tier.name}</div>
              <div className="tier-col__count">{tier.cards.length} cards</div>
            </div>
            <div className="tier-col__cb">
              <Scramble value={tier.cb} />
              <small>cashback</small>
            </div>
            <dl className="tier-col__specs">
              <div><dt>Card Type</dt><dd>{tier.visa}</dd></div>
              <div><dt>KAST Points</dt><dd>{tier.points}</dd></div>
              {tier.id === "private" && <div><dt>VIP Concierge</dt><dd>Senior team Kast</dd></div>}
              <div><dt>Perks</dt><dd>{tier.perks}</dd></div>
            </dl>
            <button className="tier-col__cta" style={{ background: tier.fg, color: typeof tier.bg === "string" && tier.bg.startsWith("#") ? tier.bg : "#07070A" }}>
              {tier.cta} →
            </button>
          </div>
        ))}
      </Reveal>

      {/* Active tier — card variants */}
      <div className="tier-detail">
        <div className="tier-detail__head">
          <span className="tier-detail__label" style={{ color: accent }}>// {t.name} · {t.cards.length} cards</span>
          <h3 className="tier-detail__title">{t.cb} de cashback · {t.visa}</h3>
        </div>
        <div className="tier-detail__cards">
          {t.cards.map((c, i) => (
            <Reveal key={c.name} delay={Math.min(4, i+1)} className={`mini-card ${c.soloGold ? "mini-card--gold" : ""}`}>
              <div className="mini-card__face mini-card__face--svg">
                {window.KastCard && <window.KastCard variant={c.variant} />}
                {c.soloGold && <div className="mini-card__solo">SOLID GOLD · INVITE ONLY</div>}
              </div>
              <div className="mini-card__name">{c.name}</div>
              <div className="mini-card__desc">{c.desc}</div>
            </Reveal>
          ))}
        </div>
      </div>

      {/* Cashback simulator */}
      <Reveal className="cb-calc">
        <div className="cb-calc__title">// simulação · 12 meses na flórida</div>
        <div className="cb-calc__row">
          <div><small>Gasto na viagem</small><b><Scramble value="$2.000" /></b></div>
          <div><small>Tier {t.name}</small><b><Scramble value={t.cb} /></b></div>
          <div><small>Volta no bolso</small><b style={{ color: accent }}>$ {(2000 * parseFloat(t.cb) / 100).toFixed(0)}</b></div>
          <div><small>+ KAST Points</small><b style={{ color: accent }}>{t.points === "—" ? "—" : t.points}</b></div>
        </div>
      </Reveal>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// PIX
// ────────────────────────────────────────────────────────────────────────────
function Pix({ accent }) {
  return (
    <section id="pix" className="section section--cream" data-screen-label="06 PIX">
      <div className="section__split">
        <div>
          <Reveal as="span" className="kicker kicker--dark">/ 05 — PIX</Reveal>
          <Reveal as="h2" delay={1} className="section__title section__title--dark">
            PIX entra,<br/>
            PIX sai.<br/>
            <span className="u u--dark"><em>Sem ginástica.</em></span>
          </Reveal>
          <Reveal as="p" delay={2} className="muted">
            A Kast tem PIX nativo. Mande real, vira dólar. Recebe dólar,
            saca em real. Sem TED, sem corretora, sem planilha.
          </Reveal>
          <Reveal delay={3} className="pix-rule">
            <span className="pix-rule__tag" style={{ background: accent }}>importante</span>
            <p>
              O recebimento via PIX é feito <b>exclusivamente pela chave CPF do titular da conta</b>.
              Não aceita transferência de terceiros — quem manda e quem recebe precisam ser a mesma pessoa.
              É a regra da CVM/Bacen pra conversão BRL → USD via stablecoin.
            </p>
          </Reveal>
        </div>

        <div className="pix-mock">
          <Reveal className="phone">
            <div className="phone__bar">
              <span>21:04</span>
              <span>kast</span>
              <span>●●●</span>
            </div>
            <div className="phone__body">
              <div className="phone__bal">
                <small>SALDO</small>
                <b>US$ <Scramble value="4.218,90" /></b>
                <span className="phone__brl">≈ R$ 22.107,42</span>
              </div>
              <div className="phone__tabs">
                <div className="phone__tab phone__tab--on" style={{ background: accent }}>Receber PIX</div>
                <div className="phone__tab">Pagar PIX</div>
                <div className="phone__tab">Cartão</div>
              </div>
              <div className="phone__form">
                <label>Valor em BRL</label>
                <div className="phone__inp">R$ 1.000,00</div>
                <div className="phone__convert">
                  <span>convertido em</span>
                  <b style={{ color: accent }}>USDC <Scramble value="190,84" /></b>
                </div>
                <label>
                  Chave PIX do titular
                  <span className="phone__lock" style={{ color: accent }}>
                    <svg width="9" height="9" viewBox="0 0 12 12" fill="currentColor"><path d="M3 5V3.5a3 3 0 116 0V5h.5a1 1 0 011 1v4a1 1 0 01-1 1h-7a1 1 0 01-1-1V6a1 1 0 011-1H3zm1 0h4V3.5a2 2 0 10-4 0V5z"/></svg>
                    bloqueado · só CPF
                  </span>
                </label>
                <div className="phone__inp phone__inp--mono phone__inp--locked">
                  <span>***.***.***-42</span>
                  <small>Marcio · titular</small>
                </div>
                <small className="phone__warn">
                  ⓘ Origem do PIX deve ser do mesmo CPF. Transferência de terceiros é estornada.
                </small>
                <button className="phone__cta" style={{ background: accent }}>
                  Gerar QR Code de cobrança
                </button>
                <small className="phone__fine">Liquidação em segundos · sem IOF na conversão*</small>
              </div>
            </div>
          </Reveal>

          <div className="pix-flows">
            <Reveal delay={1} className="pix-flow pix-flow--in">
              <div className="pix-flow__from">
                <b>PIX BRL</b>
                <em>do seu CPF →</em>
              </div>
              <div className="pix-flow__arrow" style={{ background: accent }}>→</div>
              <div className="pix-flow__to">USDC</div>
              <small><b>Receber em dólar</b> · só da sua própria chave CPF</small>
            </Reveal>
            <Reveal delay={2} className="pix-flow pix-flow--out">
              <div className="pix-flow__from">USDC</div>
              <div className="pix-flow__arrow" style={{ background: accent }}>→</div>
              <div className="pix-flow__to">
                <b>PIX BRL</b>
                <em>qualquer chave</em>
              </div>
              <small><b>Pagar BRL</b> · livre — CPF, CNPJ, e-mail, telefone, aleatória</small>
            </Reveal>
            <Reveal delay={3} className="pix-flow pix-flow--blocked">
              <div className="pix-flow__from pix-flow__from--blocked">
                <b>PIX de outro CPF</b>
                <em>3º pagando pra você</em>
              </div>
              <div className="pix-flow__arrow pix-flow__arrow--blocked">✕</div>
              <div className="pix-flow__to pix-flow__to--blocked">estornado</div>
              <small>Recebimento de terceiros não é aceito — devolve automaticamente</small>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// Comparativo bancos
// ────────────────────────────────────────────────────────────────────────────
function Comparativo({ accent }) {
  const rows = [
    ["Conta em dólar real",            ["check","half","x","x","x"]],
    ["Lastro 1:1 em USDC",             ["check","x","x","x","x"]],
    ["PIX entra e sai",                ["check","check","check","check","check"]],
    ["Cartão Visa internacional",      ["check","check","half","check","check"]],
    ["Cashback em USD",                ["check","x","x","x","x"]],
    ["Cashback BRL/pontos",            ["x","x","check","half","check"]],
    ["Zero IOF na conversão",          ["check","x","x","x","x"]],
    ["Suporte humanizado em PT-BR",    ["check","x","x","x","x"]],
    ["Bônus de boas-vindas $25",       ["check","x","x","x","x"]],
    ["Saque em ATM no exterior",       ["check","check","check","half","check"]],
  ];
  const cols = [
    { id: "kast",    name: "Kast",       sub: "stablecoin",    highlight: true  },
    { id: "dollar",  name: "Dollar App", sub: "wallet",        highlight: false },
    { id: "inter",   name: "Inter",      sub: "Global Account",highlight: false },
    { id: "nubank",  name: "Nubank",     sub: "Ultravioleta",  highlight: false },
    { id: "c6",      name: "C6 Bank",    sub: "Global",        highlight: false },
  ];
  const ic = {
    check: <span className="ic ic--ok" style={{ background: accent }}>✓</span>,
    x:     <span className="ic ic--no">—</span>,
    half:  <span className="ic ic--half">◐</span>,
  };
  return (
    <section id="comparativo" className="section section--dark" data-screen-label="07 Comparativo">
      <header className="section__head">
        <Reveal as="span" className="kicker">/ 06 — Comparativo</Reveal>
        <Reveal as="h2" delay={1} className="section__title">Lado a lado com<br/>o que você já <em>conhece.</em></Reveal>
      </header>

      <Reveal className="cmp">
        <div className="cmp__grid" style={{ gridTemplateColumns: `1.6fr repeat(${cols.length}, 1fr)` }}>
          <div className="cmp__corner"></div>
          {cols.map(c => (
            <div key={c.id} className={`cmp__head ${c.highlight ? "cmp__head--hl" : ""}`}
                 style={c.highlight ? { background: accent, color: "#0A0A0A" } : {}}>
              <b>{c.name}</b>
              <small>{c.sub}</small>
            </div>
          ))}
          {rows.map(([label, vals]) => (
            <React.Fragment key={label}>
              <div className="cmp__row-label">{label}</div>
              {vals.map((v, i) => (
                <div key={i} className={`cmp__cell ${cols[i].highlight ? "cmp__cell--hl" : ""}`}>
                  {ic[v]}
                </div>
              ))}
            </React.Fragment>
          ))}
        </div>
      </Reveal>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// Suporte humanizado
// ────────────────────────────────────────────────────────────────────────────
function Suporte({ accent }) {
  return (
    <section id="suporte" className="section section--cream" data-screen-label="08 Suporte">
      <div className="suporte">
        <div className="suporte__left">
          <Reveal as="span" className="kicker kicker--dark">/ 07 — Suporte humanizado</Reveal>
          <Reveal as="h2" delay={1} className="section__title section__title--dark">
            Atendimento<br/>
            por <span className="u u--dark"><em>gente.</em></span> Não por bot.
          </Reveal>
          <Reveal as="p" delay={2} className="muted">
            Fintech grande te joga num chatbot. Aqui é diferente:
            atendimento humano em português, com escalada direta pra equipe Kast quando o caso é grave —
            cartão bloqueado em viagem, transferência travada, qualquer coisa fora do roteiro.
          </Reveal>
          <Reveal delay={3} as="ul" className="suporte__list">
            <li><span className="check" style={{ background: accent }}>✓</span> Atendimento humano em PT-BR</li>
            <li><span className="check" style={{ background: accent }}>✓</span> WhatsApp para casos urgentes</li>
            <li><span className="check" style={{ background: accent }}>✓</span> Escalada prioritária à equipe global</li>
            <li><span className="check" style={{ background: accent }}>✓</span> Acompanhamento até resolver — não até "encerrar ticket"</li>
            <li><span className="check" style={{ background: accent }}>✓</span> Ponte Brasil ↔ Orlando, FL para casos críticos</li>
          </Reveal>
        </div>

        <div className="suporte__right">
          <Reveal className="chat-card">
            <div className="chat-card__head">
              <span className="chat-card__dot"></span>
              <span className="chat-card__title">Suporte Kast · ao vivo</span>
              <span className="chat-card__time">21:14</span>
            </div>
            <div className="chat-card__body">
              <div className="bubble bubble--in">Oi, meu cartão foi recusado em SP — viagem amanhã pra Orlando.</div>
              <div className="bubble bubble--out" style={{ background: accent, color: "#07070A" }}>
                Vi aqui. Já liberei. Tenta agora — me chama se travar.
              </div>
              <div className="bubble bubble--in">Funcionou! Valeu mesmo.</div>
              <div className="bubble bubble--out bubble--small" style={{ background: "#fff", color: "#56503F", border: "1px solid #ddd" }}>
                Boa viagem 🌴
              </div>
            </div>
            <div className="chat-card__foot">
              <small>tempo médio de resposta · <b>&lt; 4 min</b> · em horário comercial · 24/7 para emergências</small>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// Oferta + CTA final
// ────────────────────────────────────────────────────────────────────────────
function Oferta({ accent }) {
  return (
    <section id="oferta" className="section section--accent" style={{ background: accent }} data-screen-label="09 Oferta">
      <div className="oferta">
        <Reveal as="span" className="kicker kicker--dark">/ 08 — Oferta</Reveal>
        <Reveal as="h2" delay={1} className="oferta__big">
          Missões premiadas.<br/>
          Gaste <span className="oferta__amt"><Scramble value="$100" /></span> · ganhe <span className="oferta__amt oferta__amt--lined"><Scramble value="$20" /></span>
        </Reveal>
        <Reveal as="p" delay={2} className="oferta__sub">
          Baixe o app pelo meu link, ative a missão dentro do app e gaste em até 7 dias.
          O cashback pinga em <b>USDC/USDT</b> — dólar digital de verdade. Sem IOF de 4,38%.
        </Reveal>
        <Reveal delay={3} className="missions">
          <div className="mission">
            <span style={{ color: accent }}>M1</span>
            <b>Gaste $100</b>
            <em style={{ color: accent }}>ganhe $20</em>
            <small>perfeito pra primeira semana de Orlando</small>
          </div>
          <div className="mission mission--feat" style={{ borderColor: accent }}>
            <span style={{ color: accent }}>M2</span>
            <b>Gaste $500</b>
            <em style={{ color: accent }}>ganhe $30</em>
            <small>cobre alguns dias de parque + restaurante</small>
          </div>
          <div className="mission">
            <span style={{ color: accent }}>M3</span>
            <b>Gaste $1.000</b>
            <em style={{ color: accent }}>ganhe $50</em>
            <small>viagem de 7 dias com extras — cashback em USDC</small>
          </div>
        </Reveal>
        <Reveal delay={4} className="oferta__rule">
          As missões são <b>ATIVADAS MANUALMENTE</b> no app e têm <b>7 dias</b> pra serem completadas.
          Cashback em <b>USDC/USDT</b>. Uma missão por vez.
        </Reveal>
        <Reveal delay={4} className="oferta__row">
          <a className="btn btn--dark" href={REFERRAL_URL} target="_blank" rel="noopener">
            Baixar app pelo meu link
            <span className="arrow">→</span>
          </a>
          <span className="oferta__note">Código: <b>{REFERRAL_CODE}</b> · ative dentro do app</span>
        </Reveal>
        <Reveal delay={4} className="oferta__chips">
          <div className="chip-stat"><b><Scramble value="$25" /></b><span>cashback de boas-vindas</span></div>
          <div className="chip-stat"><b>0</b><span>IOF · taxa escondida</span></div>
          <div className="chip-stat"><b>4–8%</b><span>cashback recorrente</span></div>
          <div className="chip-stat"><b>1:1</b><span>USDC ↔ dólar</span></div>
        </Reveal>
      </div>
    </section>
  );
}

function CTA({ accent }) {
  return (
    <section id="cta" className="section section--dark cta-final" data-screen-label="10 CTA">
      <Reveal as="h2" className="cta-final__title">
        Bora pra<br/>
        <span className="hl" style={{ background: accent }}><em>Flórida?</em></span>
      </Reveal>
      <Reveal as="p" delay={1} className="cta-final__sub">
        <b>Move money at the speed of you.</b><br/>
        Baixe o KAST e tenha conta em USD com stablecoin, payouts em 15+ moedas
        para 200+ países, transferência entre amigos sem taxa nem demora.
      </Reveal>
      <Reveal delay={2} className="cta-final__row">
        <a className="btn btn--accent btn--lg" href={REFERRAL_URL} target="_blank" rel="noopener" style={{ background: accent }}>
          Quero minha conta Kast →
        </a>
        <a className="btn btn--ghost btn--lg" href="#suporte">Falar com o suporte</a>
      </Reveal>
      <Reveal delay={3} className="cta-final__cantscan">
        <span>Can't scan?</span>
        <code>{REFERRAL_URL}</code>
      </Reveal>
      <footer className="foot">
        <span>kast · partner brasil ↔ orlando, fl</span>
        <span>referência: {REFERRAL_CODE}</span>
        <span>*Conforme regulação vigente. USDC custodiada por parceiros institucionais.</span>
      </footer>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// App
// ────────────────────────────────────────────────────────────────────────────
function App() {
  const [t, setTweak] = window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : [TWEAK_DEFAULTS, () => {}];
  const accent = t.accent;
  const [currentTier, setCurrentTier] = useState(t.tier || "premium");
  return (
    <>
      <Aurora />
      <Nav />
      <Hero accent={accent} />
      <Florida accent={accent} />
      <ContaGlobal accent={accent} />
      <Stablecoin accent={accent} />
      <Cards accent={accent} currentTier={currentTier} setCurrentTier={setCurrentTier} />
      <Pix accent={accent} />
      <Comparativo accent={accent} />
      <Suporte accent={accent} />
      <Oferta accent={accent} />
      <CTA accent={accent} />

      <FloatingQR accent={accent} show={t.showQR} />

      {window.TweaksPanel && (
        <window.TweaksPanel>
          <window.TweakSection title="Visual">
            <window.TweakColor
              label="Cor de destaque"
              value={t.accent}
              onChange={(v) => setTweak("accent", v)}
              options={["#E8C94B", "#D5FF3E", "#FF7A1A", "#7AE3FF"]}
            />
            <window.TweakToggle
              label="Mostrar QR de download"
              value={t.showQR}
              onChange={(v) => setTweak("showQR", v)}
            />
            <window.TweakRadio
              label="Tier ativo nos cards"
              value={currentTier}
              onChange={(v) => { setCurrentTier(v); setTweak("tier", v); }}
              options={[
                { value: "standard", label: "Standard" },
                { value: "premium",  label: "Premium" },
                { value: "private",  label: "Private" },
              ]}
            />
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);