/* global React, Reveal, Eyebrow, StepBadge, SlashMotif */
const { useState, useEffect, useRef } = React;

/* ============================================================
   SEÇÃO 4 — ASSINATURAS COM LUCRO REAL
   ============================================================ */
function Assinaturas() {
  return (
    <section className="gen-section" id="assinaturas" data-screen-label="04 Assinaturas">
      <div className="gen-container">
        <div className="gen-grid gen-grid--12" style={{ alignItems: "stretch" }}>
          <div style={{ gridColumn: "1 / 7", gridRow: 1 }} className="gen-col-12-mobile">
            <Reveal><Eyebrow number="01 · 06">Recorrência Inteligente</Eyebrow></Reveal>
            <Reveal stagger={1}>
              <h2 className="gen-h2" style={{ marginTop: 0, marginBottom: 24 }}>
                Assinaturas inteligentes.<br />
                Recorrência que <span style={{ color: "var(--accent)" }}>protege</span> a sua margem.
              </h2>
            </Reveal>
            <Reveal stagger={2}>
              <p className="gen-lead" style={{ marginBottom: 0 }}>
                Sistemas comuns apenas registram "assinantes". O GÊNESIS monitora o <strong style={{ color: "var(--fg)" }}>Custo de Oportunidade</strong> de cada plano
                para garantir que a sua previsibilidade não vire prejuízo invisível.
              </p>
            </Reveal>
          </div>
          <div style={{ gridColumn: "7 / 13", gridRow: 1 }} className="gen-col-12-mobile gen-rcb-col">
            <Reveal stagger={2} className="gen-rcb-reveal">
              <RecebiveisMockup />
            </Reveal>
          </div>
        </div>

        {/* Pontos como cards — largura total, abaixo do texto + mockup */}
        <Reveal stagger={1} as="div" className="gen-grid gen-grid--2 gen-cc-cards" style={{ marginTop: 56 }}>
          {[
            { num: "A", t: "Monitoramento de Capacidade", d: "O sistema te avisa se um assinante está ocupando horários de pico que seriam de clientes avulsos, permitindo ajustar o preço ou a estratégia antes de perder margem." },
            { num: "B", t: "Calendário de Recebíveis", d: "Visualize exatamente quanto de dinheiro garantido entrará no seu caixa nos próximos meses. Planeje o crescimento e a folha de pagamento com base em dados reais." },
          ].map((f) => (
            <div key={f.num} className="gen-cc-card">
              <span className="gen-cc-card__bar" aria-hidden="true" />
              <div className="gen-cc-card__head">
                <StepBadge n={f.num} />
                <h3 className="gen-h3 gen-cc-card__t">{f.t}</h3>
              </div>
              <p className="gen-cc-card__d">{f.d}</p>
            </div>
          ))}
        </Reveal>

        <Reveal stagger={2}>
          <div style={{ display: "flex", justifyContent: "center", marginTop: 44 }}>
            <a href="#cta" className="gen-gov-btn" aria-label="Ver plano de governança">
              <span className="gen-gov-btn__label">Ver Plano de Governança</span>
              <span className="gen-gov-btn__arrow" aria-hidden="true">→</span>
            </a>
          </div>
          <style>{`
            .gen-gov-btn {
              display: inline-flex; align-items: center; gap: 14px;
              padding: 16px 30px;
              background: var(--accent);
              color: var(--bg);
              border: 1px solid var(--accent);
              border-radius: 999px;
              text-decoration: none;
              font-family: var(--ff-body);
              font-size: 15px;
              font-weight: 600;
              letter-spacing: 0;
              transition: background 280ms ease, color 280ms ease, transform 280ms cubic-bezier(0.22,0.61,0.36,1);
            }
            .gen-gov-btn:hover {
              background: transparent;
              color: var(--accent);
              transform: translateY(-1px);
            }
            .gen-gov-btn__arrow {
              font-family: var(--ff-mono); font-size: 16px;
              transition: transform 280ms cubic-bezier(0.22,0.61,0.36,1);
              display: inline-block;
            }
            .gen-gov-btn:hover .gen-gov-btn__arrow { transform: translateX(4px); }
            .gen-rcb-col { position: relative; min-height: 300px; overflow: visible; }
            .gen-rcb-reveal { position: absolute; inset: 0; overflow: visible; }
            .rcb-fit { position: relative; width: 100%; height: 100%; overflow: visible; }
            .rcb-scale { position: absolute; top: 0; left: 0; right: 0; margin-inline: auto; transform-origin: top center; will-change: transform; overflow: visible; }
            @media (max-width: 880px) {
              .gen-rcb-col { position: static; min-height: 0; }
              .gen-rcb-reveal { position: static; inset: auto; }
              .rcb-fit { height: auto; }
              .rcb-scale { position: static; transform: none !important; }
            }
          `}</style>
        </Reveal>
      </div>
    </section>
  );
}

function FeatureLine({ num, t, d }) {
  return (
    <div style={{ display: "flex", gap: 20, alignItems: "flex-start" }}>
      <div style={{
        fontFamily: "var(--ff-mono)", fontSize: 13,
        color: "var(--accent)", letterSpacing: "0.1em",
        paddingTop: 4, minWidth: 24
      }}>{num}</div>
      <div>
        <div className="gen-h3" style={{ marginBottom: 8 }}>{t}</div>
        <p style={{ color: "var(--fg-muted)", margin: 0 }}>{d}</p>
      </div>
    </div>
  );
}

function useRecebiveisInView() {
  const ref = React.useRef(null);
  const [inView, setInView] = React.useState(false);
  React.useEffect(() => {
    if (!ref.current || inView) return;
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setInView(true); obs.disconnect(); }
    }, { threshold: 0.2 });
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, [inView]);
  return [ref, inView];
}

function RecebiveisCounter({ value, duration = 1600, active }) {
  const [v, setV] = React.useState(0);
  React.useEffect(() => {
    if (!active) return;
    let raf, start = null;
    const step = (t) => {
      if (start === null) start = t;
      const p = Math.min(1, (t - start) / duration);
      const eased = 1 - Math.pow(1 - p, 3);
      setV(value * eased);
      if (p < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [value, active, duration]);
  return v;
}

function RcbFloatingPopup() {
  const items = [
    { ic: "↑", k: "Novo assinante", t: "Plano Pro", v: "+R$ 98 / mês", bar: 72, pos: "tl" },
    { ic: "✓", k: "Recorrência garantida", t: "Dez + Jan", v: "R$ 50.600", bar: 88, pos: "br" },
    { ic: "↺", k: "Churn evitado", t: "Cliente reativado", v: "+R$ 1.180", bar: 54, pos: "tr" },
    { ic: "★", k: "Meta do mês", t: "Ticket médio em alta", v: "R$ 98 → 112", bar: 81, pos: "bl" },
  ];
  const [i, setI] = React.useState(0);
  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    const t0 = setTimeout(() => setShow(true), 900);
    const id = setInterval(() => {
      setShow(false);
      setTimeout(() => { setI(x => (x + 1) % items.length); setShow(true); }, 520);
    }, 3000);
    return () => { clearTimeout(t0); clearInterval(id); };
  }, []);
  const it = items[i];
  return (
    <div className={"rcb-pop rcb-pop--" + it.pos + " " + (show ? "is-show" : "")} aria-hidden="true">
      <span className="rcb-pop__ic">{it.ic}</span>
      <span className="rcb-pop__txt">
        <span className="rcb-pop__k">{it.k}</span>
        <span className="rcb-pop__t">{it.t}</span>
      </span>
      <span className="rcb-pop__v">{it.v}</span>
    </div>
  );
}

function RecebiveisMockup() {
  const [rootRef, inView] = useRecebiveisInView();
  const months = [
    { m: "DEZ", short: "Dez/24", v: 24180, n: 247, status: "garantido", delta: "+R$ 1.940" },
    { m: "JAN", short: "Jan/25", v: 26420, n: 269, status: "garantido", delta: "+R$ 2.240" },
    { m: "FEV", short: "Fev/25", v: 28940, n: 295, status: "projetado", delta: "+R$ 2.520" },
    { m: "MAR", short: "Mar/25", v: 31210, n: 318, status: "projetado", delta: "+R$ 2.270" },
  ];
  const max = Math.max(...months.map(m => m.v));
  const total = months.reduce((s, m) => s + m.v, 0);
  const totalAnim = RecebiveisCounter({ value: total, active: inView, duration: 2000 });

  const fitRef = React.useRef(null);
  const scaleRef = React.useRef(null);
  React.useEffect(() => {
    const fit = fitRef.current, scaleEl = scaleRef.current;
    if (!fit || !scaleEl) return;
    const apply = () => {
      const mobile = window.matchMedia("(max-width: 880px)").matches;
      if (mobile) { scaleEl.style.transform = "none"; return; }
      const availH = fit.clientHeight, natH = scaleEl.offsetHeight;
      if (availH > 0 && natH > 0) scaleEl.style.transform = "scale(" + Math.min(1, availH / natH) + ")";
    };
    apply();
    const ro = new ResizeObserver(apply);
    ro.observe(fit);
    window.addEventListener("resize", apply);
    return () => { ro.disconnect(); window.removeEventListener("resize", apply); };
  }, []);

  return (
    <div ref={fitRef} className="rcb-fit">
    <div ref={scaleRef} className="rcb-scale">
    <div ref={rootRef} className={"rcb-card " + (inView ? "in" : "")} style={{
      position: "relative",
      background: "var(--bg-elev)",
      border: "1px solid var(--line-strong)",
      borderRadius: "var(--r-md)",
      padding: 32,
      boxShadow: "var(--shadow-lg)",
      overflow: "hidden"
    }}>
      {/* tech grid background */}
      <svg aria-hidden="true" width="100%" height="100%" preserveAspectRatio="none" style={{
        position: "absolute", inset: 0, opacity: 0.04, pointerEvents: "none"
      }} viewBox="0 0 400 600">
        <defs>
          <pattern id="rcb-grid" width="20" height="20" patternUnits="userSpaceOnUse">
            <path d="M 20 0 L 0 0 0 20" fill="none" stroke="currentColor" strokeWidth="0.5" />
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#rcb-grid)" />
      </svg>
      {/* corner brackets */}
      {["tl","tr","bl","br"].map(p => (
        <span key={p} aria-hidden="true" className={`rcb-bracket rcb-bracket--${p}`} />
      ))}

      {/* HEADER */}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 8, position: "relative", zIndex: 1 }}>
        <div>
          <div style={{ fontFamily: "var(--ff-mono)", fontSize: 10, color: "var(--fg-muted)", letterSpacing: "0.22em", textTransform: "uppercase", display: "flex", alignItems: "center", gap: 8 }}>
            <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--accent)", boxShadow: "0 0 8px var(--accent)", animation: "gen-pulse-dot 1.6s infinite" }} />
            MRR · Forecast Engine
          </div>
          <div style={{ fontFamily: "var(--ff-condensed)", fontSize: 30, marginTop: 8, color: "var(--fg)", lineHeight: 1, textTransform: "uppercase", letterSpacing: "-0.01em" }}>
            Calendário de<br />Recebíveis
          </div>
        </div>
        <div style={{ textAlign: "right" }}>
          <div style={{ fontFamily: "var(--ff-mono)", fontSize: 9, color: "var(--fg-dim)", letterSpacing: "0.2em", textTransform: "uppercase" }}>4M Total</div>
          <div style={{ fontFamily: "var(--ff-condensed)", fontSize: 28, color: "var(--accent)", lineHeight: 1, marginTop: 4, fontVariantNumeric: "tabular-nums" }}>
            R$ {Math.round(totalAnim).toLocaleString("pt-BR")}
          </div>
          <div style={{ fontFamily: "var(--ff-mono)", fontSize: 9, color: "var(--fg-dim)", letterSpacing: "0.12em", marginTop: 4 }}>
            ↗ +29,1% vs trimestre anterior
          </div>
        </div>
      </div>

      {/* Legenda didática */}
      <div style={{
        display: "flex", gap: 18, marginTop: 18, marginBottom: 22, paddingTop: 14,
        borderTop: "1px dashed rgba(127,127,127,0.18)",
        fontFamily: "var(--ff-mono)", fontSize: 10, color: "var(--fg-muted)", letterSpacing: "0.1em", textTransform: "uppercase",
        position: "relative", zIndex: 1
      }}>
        <span style={{ display: "flex", alignItems: "center", gap: 6 }}>
          <span style={{ width: 14, height: 4, background: "var(--accent)", display: "inline-block" }} /> garantido
        </span>
        <span style={{ display: "flex", alignItems: "center", gap: 6 }}>
          <span style={{ width: 14, height: 4, backgroundImage: "repeating-linear-gradient(90deg, var(--accent) 0 4px, transparent 4px 7px)" }} /> projetado
        </span>
        <span style={{ marginLeft: "auto", color: "var(--fg-dim)" }}>R$ · BRL · mensal</span>
      </div>

      {/* horizontal stacked bars */}
      <div style={{ display: "flex", flexDirection: "column", gap: 22, position: "relative", zIndex: 1 }}>
        {months.map((m, i) => {
          const pct = (m.v / max) * 100;
          const animatedV = RecebiveisCounter({ value: m.v, active: inView, duration: 1400 + i * 200 });
          return (
            <div key={m.m} className="rcb-row" style={{ "--row-delay": `${i * 180}ms` }}>
              <div style={{ display: "grid", gridTemplateColumns: "70px 1fr auto", gap: 14, alignItems: "center", marginBottom: 7 }}>
                <div>
                  <div style={{ fontFamily: "var(--ff-condensed)", fontSize: 18, color: "var(--fg)", lineHeight: 1, letterSpacing: "0.04em" }}>{m.m}</div>
                  <div style={{ fontFamily: "var(--ff-mono)", fontSize: 9, color: "var(--fg-dim)", letterSpacing: "0.1em", marginTop: 2 }}>{i === 0 ? "T+30" : i === 1 ? "T+60" : i === 2 ? "T+90" : "T+120"}</div>
                </div>
                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <span className={"rcb-chip rcb-chip--" + m.status}>
                    {m.status === "garantido"
                      ? <svg width="9" height="9" viewBox="0 0 12 12"><path d="M2 6 L5 9 L10 3" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="square" /></svg>
                      : <svg width="9" height="9" viewBox="0 0 12 12"><circle cx="6" cy="6" r="3" fill="none" stroke="currentColor" strokeWidth="1.4" strokeDasharray="2 1.5" /></svg>}
                    {m.status === "garantido" ? "Garantido" : "Projetado"}
                  </span>
                  <span style={{ fontFamily: "var(--ff-mono)", fontSize: 10, color: "var(--accent)", letterSpacing: "0.06em" }}>{m.delta}</span>
                </div>
                <div style={{ fontFamily: "var(--ff-condensed)", fontSize: 24, color: "var(--fg)", lineHeight: 1, fontVariantNumeric: "tabular-nums" }}>
                  R$ {Math.round(animatedV).toLocaleString("pt-BR")}
                </div>
              </div>

              {/* bar track */}
              <div className="rcb-track">
                {/* tick marks every 20% */}
                {[20,40,60,80].map(t => (
                  <span key={t} className="rcb-tick" style={{ left: `${t}%` }} />
                ))}
                <div
                  className={"rcb-fill " + (m.status === "garantido" ? "rcb-fill--solid" : "rcb-fill--dashed")}
                  style={{ "--target": `${pct}%`, "--delay": `${300 + i * 180}ms` }}
                />
                {/* leading edge marker */}
                <span className="rcb-edge" style={{ "--target": `${pct}%`, "--delay": `${300 + i * 180}ms` }} />
              </div>

              <div style={{ display: "flex", justifyContent: "space-between", marginTop: 6, fontFamily: "var(--ff-mono)", fontSize: 10, color: "var(--fg-dim)", letterSpacing: "0.1em" }}>
                <span>{m.n} assinantes · ticket R$ {(m.v / m.n).toFixed(0)}</span>
                <span style={{ color: "var(--fg-muted)" }}>{Math.round(pct)}% · ceiling R$ {(max/1000).toFixed(1)}k</span>
              </div>
            </div>
          );
        })}
      </div>

      {/* alert */}
      <div className="rcb-alert" style={{
        marginTop: 28,
        padding: "14px 16px",
        border: "1px solid var(--accent)",
        borderRadius: 6,
        background: "rgba(16,202,254,0.06)",
        display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 14, alignItems: "center",
        position: "relative", zIndex: 1
      }}>
        <div style={{
          width: 30, height: 30, borderRadius: 4, display: "grid", placeItems: "center",
          background: "var(--accent)", color: "var(--bg)",
          fontFamily: "var(--ff-mono)", fontSize: 12, fontWeight: 700
        }}>!</div>
        <div style={{ fontSize: 12.5, color: "var(--fg-muted)", lineHeight: 1.45 }}>
          <div style={{ fontFamily: "var(--ff-mono)", fontSize: 9, color: "var(--accent)", letterSpacing: "0.2em", textTransform: "uppercase", marginBottom: 4 }}>Custo de Oportunidade detectado</div>
          <strong style={{ color: "var(--fg)" }}>3 assinantes</strong> ocupando horários de pico que renderiam <strong style={{ color: "var(--accent)" }}>R$ 1.840 a mais</strong> em clientes avulsos.
        </div>
        <button style={{
          appearance: "none", border: "1px solid var(--accent)", background: "transparent", color: "var(--accent)",
          padding: "8px 14px", borderRadius: 4, fontFamily: "var(--ff-mono)", fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", cursor: "pointer"
        }}>Ajustar →</button>
      </div>

      <style>{`
        .rcb-card { color: var(--fg); }
        /* popup flutuante slim — pílula de uma linha, surge em cantos alternados */
        .rcb-pop {
          position: absolute; z-index: 5; max-width: 230px;
          display: inline-flex; align-items: center; gap: 9px;
          background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: 999px;
          padding: 7px 13px 7px 8px;
          box-shadow: 0 14px 34px -14px rgba(0,0,0,0.5), 0 0 0 1px rgba(var(--accent-rgb),0.06), 0 0 26px -12px rgba(var(--accent-rgb),0.4);
          opacity: 0;
          transition: opacity 420ms cubic-bezier(0.22,0.61,0.36,1), transform 420ms cubic-bezier(0.22,0.61,0.36,1);
          pointer-events: none; white-space: nowrap;
        }
        /* posições: cada uma desliza do seu próprio lado */
        .rcb-pop--tl { top: 70px; left: -34px;  transform-origin: top left;     transform: translate(-12px, 10px) scale(0.96); }
        .rcb-pop--tr { top: 70px; right: -30px; transform-origin: top right;    transform: translate(12px, 10px) scale(0.96); }
        .rcb-pop--bl { bottom: 104px; left: -34px;  transform-origin: bottom left;  transform: translate(-12px, -10px) scale(0.96); }
        .rcb-pop--br { bottom: 104px; right: -30px; transform-origin: bottom right; transform: translate(12px, -10px) scale(0.96); }
        .rcb-pop.is-show { opacity: 1; transform: translate(0,0) scale(1); }
        .rcb-pop__ic { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--accent-rgb),0.16); color: var(--accent); font-family: var(--ff-mono); font-size: 12px; flex: 0 0 auto; }
        .rcb-pop__txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
        .rcb-pop__k { font-family: var(--ff-mono); font-size: 7.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-dim); }
        .rcb-pop__t { font-size: 11.5px; color: var(--fg); font-weight: 600; }
        .rcb-pop__v { font-family: var(--ff-condensed); font-size: 15px; color: var(--accent); letter-spacing: -0.01em; flex: 0 0 auto; padding-left: 4px; }
        /* no celular os popups saem de cena para n\u00e3o cortar o card */
        @media (max-width: 880px) { .rcb-pop { display: none; } }
        /* brilho contínuo varrendo as barras (gráfico vivo) */
        .rcb-card.in .rcb-fill::after {
          content: ""; position: absolute; inset: 0;
          background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
          transform: translateX(-100%);
          animation: rcb-shine 2.8s cubic-bezier(0.45,0,0.55,1) infinite;
          animation-delay: var(--shine-delay, 1.6s);
        }
        @keyframes rcb-shine { 0% { transform: translateX(-120%); } 55% { transform: translateX(320%); } 100% { transform: translateX(320%); } }
        .rcb-card.in .rcb-edge { animation: rcb-edgepulse 2.2s ease-in-out infinite 1800ms; }
        @keyframes rcb-edgepulse { 0%,100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0.5); } 50% { box-shadow: 0 0 0 5px rgba(var(--accent-rgb),0); } }
        .rcb-bracket { position: absolute; width: 14px; height: 14px; border: 1px solid var(--accent); opacity: 0.5; pointer-events: none; }
        .rcb-bracket--tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
        .rcb-bracket--tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
        .rcb-bracket--bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
        .rcb-bracket--br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }

        .rcb-chip {
          display: inline-flex; align-items: center; gap: 5px;
          font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
          padding: 3px 8px; border-radius: 3px; border: 1px solid;
        }
        .rcb-chip--garantido { color: var(--accent); border-color: var(--accent); background: rgba(16,202,254,0.05); }
        .rcb-chip--projetado { color: var(--fg-muted); border-color: var(--line-strong); background: transparent; }

        .rcb-track {
          position: relative; height: 10px;
          background: var(--bg-elev-2);
          border-radius: 2px; overflow: hidden;
          border: 1px solid rgba(127,127,127,0.08);
        }
        .rcb-tick {
          position: absolute; top: 0; bottom: 0; width: 1px;
          background: rgba(127,127,127,0.15);
        }
        .rcb-fill {
          position: absolute; left: 0; top: 0; bottom: 0;
          width: 0;
          transition: width 1100ms cubic-bezier(0.22,0.61,0.36,1);
          transition-delay: var(--delay, 0ms);
        }
        .rcb-card.in .rcb-fill { width: var(--target); }
        .rcb-fill--solid {
          background: linear-gradient(90deg, var(--accent) 0%, rgba(var(--accent-rgb),0.7) 100%);
          box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.5);
        }
        .rcb-fill--dashed {
          background-image: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 10px);
          opacity: 0.85;
        }
        .rcb-edge {
          position: absolute; top: -3px; bottom: -3px; width: 2px;
          background: var(--accent);
          box-shadow: 0 0 8px var(--accent), 0 0 16px rgba(var(--accent-rgb), 0.4);
          left: 0;
          transition: left 1100ms cubic-bezier(0.22,0.61,0.36,1);
          transition-delay: var(--delay, 0ms);
          opacity: 0;
        }
        .rcb-card.in .rcb-edge { left: var(--target); opacity: 1; transition: left 1100ms cubic-bezier(0.22,0.61,0.36,1), opacity 300ms ease; transition-delay: var(--delay, 0ms); }

        .rcb-row { opacity: 0; transform: translateY(8px); transition: opacity 600ms ease, transform 600ms ease; transition-delay: var(--row-delay, 0ms); }
        .rcb-card.in .rcb-row { opacity: 1; transform: translateY(0); }

        .rcb-alert { opacity: 0; transform: translateY(8px); transition: opacity 600ms ease 1400ms, transform 600ms ease 1400ms; }
        .rcb-card.in .rcb-alert { opacity: 1; transform: translateY(0); }
      `}</style>
    </div>
      <RcbFloatingPopup />
    </div>
    </div>
  );
}

/* ============================================================
   TELAS REAIS — showcase estático do sistema
   ============================================================ */
function AppScreensShowcase() {
  const shots = [
    { src: window.__resources.heroAppScreen, k: "Agenda", t: "Agenda por cadeira" },
    { src: window.__resources.appScreen2, k: "Comanda", t: "Detalhes do atendimento" },
    { src: window.__resources.appScreen3, k: "Avaliações", t: "Notas por colaborador" },
  ];
  const [sel, setSel] = React.useState(0);
  return (
    <div className="as-tech">
      <div className="as-tech__chrome">
        <span className="as-tech__live"><span className="as-dot" />TELAS REAIS DO SISTEMA</span>
        <span>iOS · ANDROID · WEB</span>
      </div>

      <div className="as-tech__stage">
        <div className="as-tech__grid" aria-hidden="true" />
        <div className="as-phones">
          {shots.map((sh, i) => (
            <button
              key={sh.src}
              className={"as-phone " + (i === sel ? "is-on" : "")}
              onClick={() => setSel(i)}
              aria-label={sh.t}
            >
              <span className="as-phone__frame">
                <img src={sh.src} alt={sh.t} loading="lazy" />
                <span className="as-phone__island" aria-hidden="true" />
              </span>
              <span className="as-phone__k">{sh.k}</span>
            </button>
          ))}
        </div>
        <span className="as-b as-b--tl" aria-hidden="true" />
        <span className="as-b as-b--tr" aria-hidden="true" />
        <span className="as-b as-b--bl" aria-hidden="true" />
        <span className="as-b as-b--br" aria-hidden="true" />
      </div>

      <div className="as-tech__bar">
        <span className="as-dot" />
        <span>{shots[sel].t}</span>
        <span className="as-tech__bar-sep" />
        <span className="as-tech__bar-hint">Clique para destacar</span>
      </div>

      <style>{`
        .as-tech { position: relative; border: 1px solid var(--line-strong); border-radius: var(--r-md);
          background: linear-gradient(180deg, #0a1320, #060a13);
          box-shadow: var(--shadow-lg), 0 0 90px -34px rgba(var(--accent-rgb), 0.5); overflow: hidden; }
        .as-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); flex: 0 0 auto; }
        .as-tech__chrome { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 16px;
          border-bottom: 1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.28);
          font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
        .as-tech__live { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); }
        .as-tech__stage { position: relative; padding: 34px 22px 30px;
          background: radial-gradient(120% 100% at 50% 0%, rgba(var(--accent-rgb), 0.16), transparent 62%), linear-gradient(160deg, #0c1929, #07080e); }
        .as-tech__grid { position: absolute; inset: 0; pointer-events: none;
          background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
          background-size: 40px 40px;
          -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, #000, transparent 82%);
          mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, #000, transparent 82%); }
        .as-phones { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 16px; }
        .as-phone { appearance: none; background: transparent; border: 0; padding: 0; cursor: pointer;
          display: flex; flex-direction: column; align-items: center; gap: 12px; flex: 1 1 0; min-width: 0; max-width: 190px;
          transition: transform 300ms cubic-bezier(0.22,0.61,0.36,1); }
        .as-phone:hover { transform: translateY(-4px); }
        .as-phone.is-on { transform: translateY(-10px) scale(1.04); }
        .as-phone__frame { position: relative; display: block; width: 100%; aspect-ratio: 9 / 19.5;
          border: 5px solid #1b2026; border-radius: 26px; overflow: hidden; background: #000;
          box-shadow: 0 22px 44px -18px rgba(0,0,0,0.8); transition: border-color 300ms ease, box-shadow 300ms ease; }
        .as-phone.is-on .as-phone__frame { border-color: rgba(var(--accent-rgb),0.55);
          box-shadow: 0 26px 54px -18px rgba(0,0,0,0.85), 0 0 34px -8px rgba(var(--accent-rgb),0.6); }
        .as-phone__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center;
          opacity: 0.72; transition: opacity 300ms ease; }
        .as-phone.is-on .as-phone__frame img { opacity: 1; }
        .as-phone__island { position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
          width: 46px; height: 13px; background: #000; border-radius: 9px; }
        .as-phone__k { font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
          color: rgba(255,255,255,0.4); transition: color 260ms ease; }
        .as-phone.is-on .as-phone__k { color: var(--accent); }
        .as-b { position: absolute; width: 22px; height: 22px; border: 1px solid var(--accent); opacity: 0.8; pointer-events: none; }
        .as-b--tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
        .as-b--tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
        .as-b--bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
        .as-b--br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }
        .as-tech__bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px;
          border-top: 1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.28);
          font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
        .as-tech__bar-sep { flex: 1; height: 1px; background: rgba(255,255,255,0.1); }
        .as-tech__bar-hint { color: rgba(255,255,255,0.35); }
        @media (max-width: 620px) {
          .as-tech__stage { padding: 24px 14px 22px; }
          .as-phones { gap: 10px; }
          .as-tech__chrome { font-size: 9px; letter-spacing: 0.1em; }
        }
      `}</style>
    </div>
  );
}

/* ============================================================
   SEÇÃO 5 — FECHAMENTO EXECUTIVO
   ============================================================ */
function Fechamento() {
  return (
    <section className="gen-section" id="fechamento" data-screen-label="05 Fechamento">
      <SlashMotif opacity={0.04} />
      <div className="gen-container" style={{ position: "relative" }}>
        <div className="gen-grid gen-grid--12" style={{ alignItems: "start", marginBottom: 80 }}>
          <div style={{ gridColumn: "span 6" }} className="gen-col-12-mobile">
            <Reveal><Eyebrow number="04 · 06">Resumo Executivo Diário</Eyebrow></Reveal>
            <Reveal stagger={1}>
              <h2 className="gen-h2" style={{ marginTop: 0, marginBottom: 24 }}>
                Você <span style={{ color: "var(--accent)" }}>não precisa abrir o sistema</span> para saber como foi o seu dia.
              </h2>
            </Reveal>
            <Reveal stagger={2}>
              <p className="gen-lead" style={{ marginBottom: 0 }}>
                Esqueça dashboards complexos e relatórios que você nunca tem tempo de ler.
                Ao final do expediente, a IA do GÊNESIS envia um <strong style={{ color: "var(--fg)" }}>Resumo Executivo</strong> diretamente no seu WhatsApp.
              </p>
            </Reveal>
          </div>
          <div style={{ gridColumn: "span 6" }} className="gen-col-12-mobile">
            <Reveal stagger={2}>
              <AppScreensShowcase />
            </Reveal>
            <Reveal stagger={3}>
              <p style={{
                marginTop: 28, marginBottom: 0, fontFamily: "var(--ff-condensed)",
                fontSize: "clamp(22px, 2.4vw, 34px)", lineHeight: 1.12,
                color: "var(--fg)", textTransform: "uppercase", letterSpacing: "-0.01em"
              }}>
                É a gestão acontecendo de forma automática <span style={{ color: "var(--accent)" }}>e confiável.</span>
              </p>
            </Reveal>
          </div>
        </div>

        <div className="gen-grid gen-grid--3 gen-cc-cards">
          {[
            { k: "01", t: "Quanto produziu", d: "Faturamento bruto, lucro líquido real, ticket médio e variação vs ontem." },
            { k: "02", t: "Ociosidade detectada", d: "Cadeiras vazias, horários mortos e perda de tempo durante o expediente." },
            { k: "03", t: "Equipe e clientes", d: "Quem bateu meta, quem está abaixo, e quais clientes precisam de atenção imediata." },
          ].map((b, i) => (
            <Reveal key={b.k} stagger={i + 1} as="div" className="gen-cc-card">
              <span className="gen-cc-card__bar" aria-hidden="true" />
              <div className="gen-cc-num">— {b.k}</div>
              <h3 className="gen-h3 gen-cc-card__t" style={{ marginBottom: 12 }}>{b.t}</h3>
              <p className="gen-cc-card__d">{b.d}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   SECURITY VAULT — painel S/A (Segurança · Auditoria · Autonomia)
   ============================================================ */
function SecurityVaultMockup() {
  const log = [
    ["EXPORT", "Relatório mensal exportado por você", "22:14"],
    ["ALERTA", "Exclusão sem senha — bloqueada", "22:11"],
    ["AUDIT", "184 comandas · 0 divergências", "22:03"],
  ];
  return (
    <div className="sv-tech">
      <div className="sv-tech__chrome">
        <span className="sv-tech__live"><span className="sv-dot" />COFRE DE DADOS · S/A</span>
        <span className="sv-tech__sig">AES-256 · TLS 1.3</span>
      </div>

      <div className="sv-tech__body">
        <div className="sv-tech__hero">
          <div className="sv-tech__shield" aria-hidden="true">
            <span className="sv-tech__aura" />
            <span className="sv-tech__ring" />
            <span className="sv-tech__ring sv-tech__ring--2" />
            <svg viewBox="0 0 48 56" width="82" height="94" fill="none" style={{ position: "relative", zIndex: 1 }}>
              <path d="M24 2 L44 10 V27 C44 41 35 50.5 24 54 C13 50.5 4 41 4 27 V10 Z"
                fill="rgba(var(--accent-rgb),0.14)" stroke="var(--accent)" strokeWidth="1.5" />
            </svg>
            <img src={(window.__resources && window.__resources.genesisG) || "genesis-g.png"} alt="" className="sv-tech__shield-g" />
          </div>
          <div className="sv-tech__hero-txt">
            <div className="sv-tech__hero-k"><span className="sv-dot" /> Status · criptografado</div>
            <div className="sv-tech__hero-t">Dados<br />blindados</div>
            <div className="sv-tech__owner">Proprietário dos dados: <strong>VOCÊ</strong></div>
          </div>
          <div className="sv-tech__metric">
            <span className="sv-tech__metric-v">256</span>
            <span className="sv-tech__metric-u">bit</span>
            <span className="sv-tech__metric-l">AES · ponta a ponta</span>
          </div>
        </div>

        <div className="sv-tech__chips">
          {["Criptografia", "Backup diário", "Auditoria 24/7"].map((c) => (
            <span className="sv-chip" key={c}>
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="5 13 10 18 19 6" /></svg>
              {c}
            </span>
          ))}
        </div>

        <div className="sv-tech__log">
          <div className="sv-tech__log-h"><span className="sv-dot" />Auditoria · streaming</div>
          {log.map(([k, t, time]) => (
            <div className="sv-row" key={k}>
              <span className={"sv-row-k sv-row-k--" + k.toLowerCase()}>{k}</span>
              <span className="sv-row-t">{t}</span>
              <span className="sv-row-time">{time}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="sv-tech__foot">
        <span className="sv-tech__foot-l"><span className="sv-dot" />Sincronização · ativa</span>
        <span className="sv-tech__export">Exportar tudo →</span>
      </div>

      <span className="sv-b sv-b--tl" aria-hidden="true" />
      <span className="sv-b sv-b--tr" aria-hidden="true" />
      <span className="sv-b sv-b--bl" aria-hidden="true" />
      <span className="sv-b sv-b--br" aria-hidden="true" />
      <div className="sv-scan" aria-hidden="true" />

      <style>{`
        .sv-tech {
          position: relative; border: 1px solid var(--line-strong); border-radius: var(--r-md);
          background: linear-gradient(180deg, #0a1320, #060a13);
          box-shadow: var(--shadow-lg), 0 0 90px -34px rgba(var(--accent-rgb), 0.5);
          overflow: hidden;
        }
        .sv-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); display: inline-block; flex: 0 0 auto; }
        .sv-tech__chrome {
          display: flex; justify-content: space-between; align-items: center; padding: 11px 16px;
          border-bottom: 1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.28);
          font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.5);
        }
        .sv-tech__live { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); }
        .sv-tech__body { padding: 30px 24px 18px; }
        .sv-tech__hero { display: flex; align-items: center; gap: 22px; }
        .sv-tech__shield { position: relative; display: grid; place-items: center; flex: 0 0 auto; width: 100px; height: 100px; }
        .sv-tech__shield-g { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -48%); width: 38px; height: 38px; object-fit: contain; z-index: 2; filter: drop-shadow(0 0 10px rgba(var(--accent-rgb),0.6)); }
        .sv-tech__aura { position: absolute; inset: 8px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-rgb),0.45), transparent 70%); filter: blur(10px); animation: sv-pulse 2.8s ease-in-out infinite; }
        @keyframes sv-pulse { 0%,100% { opacity: 0.5; transform: scale(0.92); } 50% { opacity: 1; transform: scale(1.08); } }
        .sv-tech__ring {
          position: absolute; inset: -2px; border-radius: 50%;
          border: 1px dashed rgba(var(--accent-rgb), 0.5); animation: sv-spin 14s linear infinite;
        }
        .sv-tech__ring--2 { inset: -12px; border-style: solid; border-color: rgba(var(--accent-rgb),0.16); animation: sv-spin 26s linear infinite reverse; }
        @keyframes sv-spin { to { transform: rotate(360deg); } }
        .sv-tech__hero-k { display: inline-flex; align-items: center; gap: 7px; font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
        .sv-tech__hero-t { font-family: var(--ff-display); font-weight: 700; font-size: 44px; line-height: 0.9; color: #fff; text-transform: uppercase; letter-spacing: -0.01em; margin: 8px 0 10px; text-shadow: 0 0 38px rgba(var(--accent-rgb),0.45); }
        .sv-tech__owner { font-family: var(--ff-mono); font-size: 12px; color: rgba(255,255,255,0.55); }
        .sv-tech__owner strong { color: var(--accent); letter-spacing: 0.08em; }
        .sv-tech__metric { margin-left: auto; align-self: flex-start; text-align: right; display: flex; flex-direction: column; align-items: flex-end; line-height: 1; padding-left: 12px; }
        .sv-tech__metric-v { font-family: var(--ff-display); font-weight: 700; font-size: 46px; color: var(--accent); letter-spacing: -0.03em; text-shadow: 0 0 30px rgba(var(--accent-rgb),0.5); }
        .sv-tech__metric-u { font-family: var(--ff-mono); font-size: 12px; color: var(--accent); letter-spacing: 0.16em; text-transform: uppercase; margin-top: -2px; }
        .sv-tech__metric-l { font-family: var(--ff-mono); font-size: 9px; color: rgba(255,255,255,0.4); letter-spacing: 0.14em; text-transform: uppercase; margin-top: 7px; }
        .sv-tech__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 6px; }
        .sv-chip {
          display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px;
          border: 1px solid rgba(var(--accent-rgb), 0.4); color: var(--accent);
          font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
          background: rgba(var(--accent-rgb), 0.07);
        }
        .sv-tech__log { margin-top: 16px; padding-top: 14px; border-top: 1px dashed rgba(255,255,255,0.1); }
        .sv-tech__log-h { display: flex; align-items: center; gap: 8px; font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 10px; }
        .sv-row { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; padding: 7px 0; }
        .sv-row-k { font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.12em; text-align: center; padding: 3px 0; border-radius: 4px; border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.6); }
        .sv-row-k--export { color: var(--accent); border-color: rgba(var(--accent-rgb),0.45); }
        .sv-row-k--alerta { color: #ffce6a; border-color: rgba(255,206,106,0.4); }
        .sv-row-t { font-family: var(--ff-body); font-size: 13px; color: rgba(255,255,255,0.82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .sv-row-time { font-family: var(--ff-mono); font-size: 10px; color: rgba(255,255,255,0.35); }
        .sv-tech__foot {
          display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px;
          border-top: 1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.28);
          font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5);
        }
        .sv-tech__foot-l { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); }
        .sv-tech__export { color: #fff; border: 1px solid var(--accent); padding: 6px 12px; border-radius: 999px; box-shadow: 0 0 14px -3px rgba(var(--accent-rgb),0.6); }
        .sv-b { position: absolute; width: 20px; height: 20px; border: 1px solid var(--accent); opacity: 0.7; pointer-events: none; }
        .sv-b--tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
        .sv-b--tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
        .sv-b--bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; }
        .sv-b--br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
        .sv-scan { position: absolute; left: 0; right: 0; top: 0; height: 90px; pointer-events: none; background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.10), transparent); mix-blend-mode: screen; animation: sv-scanmove 6s linear infinite; }
        @keyframes sv-scanmove { 0% { transform: translateY(-100px); } 100% { transform: translateY(560px); } }

        @media (max-width: 560px) {
          .sv-tech__body { padding: 24px 18px 14px; }
          .sv-tech__hero { flex-wrap: wrap; gap: 16px; }
          .sv-tech__shield { width: 76px; height: 76px; }
          .sv-tech__shield svg { width: 64px; height: 74px; }
          .sv-tech__shield-g { width: 28px; height: 28px; }
          .sv-tech__hero-t { font-size: 32px; }
          .sv-tech__metric { margin-left: 0; width: 100%; align-items: flex-start; text-align: left; padding-left: 0; flex-direction: row; align-items: baseline; gap: 8px; flex-wrap: wrap; }
          .sv-tech__metric-l { margin-top: 0; width: 100%; }
          .sv-tech__metric-v { font-size: 38px; }
          .sv-row { grid-template-columns: 56px 1fr auto; gap: 8px; }
          .sv-row-t { font-size: 12px; }
          .sv-tech__foot { flex-wrap: wrap; gap: 10px; }
          .sv-tech__chrome { font-size: 9px; letter-spacing: 0.12em; gap: 8px; }
        }
      `}</style>
    </div>
  );
}

/* ============================================================
   SEÇÃO 6 — LIBERDADE E SEGURANÇA (S/A)
   ============================================================ */
function LiberdadeSeguranca() {
  return (
    <section className="gen-section" id="seguranca" data-screen-label="06 Segurança Auditoria">
      <div className="gen-container">
        <div className="gen-grid gen-grid--12" style={{ alignItems: "center", marginBottom: 80 }}>
          <div style={{ gridColumn: "span 6" }} className="gen-col-12-mobile">
            <Reveal><Eyebrow number="07 · 06">S/A · Segurança · Auditoria · Autonomia</Eyebrow></Reveal>
            <Reveal stagger={1}>
              <h2 className="gen-h2" style={{ marginTop: 0, marginBottom: 24 }}>
                Seus dados são seus.<br />
                Sua autonomia e segurança são <span style={{ color: "var(--accent)" }}>nossas prioridades.</span>
              </h2>
            </Reveal>
            <Reveal stagger={2}>
              <p className="gen-lead" style={{ marginBottom: 0 }}>
                O GÊNESIS foi desenhado sob o conceito S/A: <strong style={{ color: "var(--fg)" }}>Segurança, Auditoria e Autonomia.</strong>
              </p>
            </Reveal>
          </div>
          <div style={{ gridColumn: "span 6" }} className="gen-col-12-mobile">
            <Reveal stagger={2}>
              <SecurityVaultMockup />
            </Reveal>
          </div>
        </div>

        {/* SA letters featured */}
        <div className="gen-grid gen-grid--3">
          {[
            { letra: "S", t: "Exportação em 1 Clique", sub: "Segurança de dados",
              d: 'Não "sequestramos" seus dados. Você pode baixar todos os seus relatórios e históricos quando quiser.' },
            { letra: "A", t: "Sistema Antivazamento", sub: "Auditoria 24/7",
              d: "Receba alertas instantâneos no WhatsApp se houver qualquer anomalia no caixa ou exclusão de comandas sem a sua senha de supervisor." },
            { letra: "+", t: "Onboarding Especializado", sub: "Autonomia operacional",
              d: "Não te entregamos um login e sumimos. Nossa equipe configura a governança da sua unidade passo a passo, garantindo que o sistema se adapte à sua rotina, e não o contrário." },
          ].map((c, i) => (
            <Reveal key={c.letra} stagger={i + 1} as="div" className="gen-card" style={{ paddingTop: 36 }}>
              <div style={{
                fontFamily: "var(--ff-display)", fontWeight: 700,
                fontSize: 88, lineHeight: 0.9, color: "var(--accent)",
                marginBottom: 20, letterSpacing: "-0.04em"
              }}>{c.letra}</div>
              <div style={{ fontFamily: "var(--ff-mono)", fontSize: 11, color: "var(--fg-muted)", letterSpacing: "0.18em", marginBottom: 8, textTransform: "uppercase" }}>
                {c.sub}
              </div>
              <div className="gen-h3" style={{ marginBottom: 12 }}>{c.t}</div>
              <p style={{ color: "var(--fg-muted)", margin: 0, fontSize: 15 }}>{c.d}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Assinaturas, Fechamento, LiberdadeSeguranca });
