// ── Modules, Authority, Bonus, Transformation ───────────────

const MODULES = [
  { n: "Módulo 01", t: "Produto que vende", d: "Validação antes de comprar. Como ler demanda e fugir do encalhe." },
  { n: "Módulo 02", t: "Fornecedor confiável", d: "Filtros de fábrica séria, perguntas-chave, sinais de golpe." },
  { n: "Módulo 03", t: "Pedido blindado", d: "Amostra, negociação e pagamento seguro do início ao fim." },
  { n: "Módulo 04", t: "Custo real", d: "Frete, imposto e taxas calculados antes de fechar a compra." },
  { n: "Módulo 05", t: "Logística no Brasil", d: "Desembaraço e entrega: da alfândega até a sua porta." },
];
function Modules({ onCta }) {
  return (
    <Section bgChar="学">
      <SectionHead n="04" tag="O que vai aprender" title="Cinco módulos. Um encontro. O caminho inteiro na mão." />
      <div className="pf-modules-grid" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(240px,1fr))", gap: "16px", marginTop: "48px" }}>
        {MODULES.map((m, i) => (
          <Reveal key={i} delay={i * 0.05}>
            <GlassCard>
              <div style={{ fontFamily: "var(--f-body)", fontWeight: 600, fontSize: ".64rem", letterSpacing: ".28em", textTransform: "uppercase", color: "var(--champagne)", marginBottom: "14px" }}>{m.n}</div>
              <div style={{ fontFamily: "var(--f-display)", fontWeight: 400, fontSize: "1.3rem", lineHeight: 1.18, color: "var(--cream)", marginBottom: "10px", letterSpacing: "-0.005em" }}>{m.t}</div>
              <div style={{ fontFamily: "var(--f-body)", fontSize: ".95rem", lineHeight: 1.6, color: "var(--txt-body)" }}>{m.d}</div>
            </GlassCard>
          </Reveal>
        ))}
        <Reveal delay={0.25}>
          <div style={{ borderRadius: "16px", padding: "30px", background: "linear-gradient(135deg, rgba(245,158,11,0.10), rgba(176,124,37,0.04))", border: "1px solid rgba(176,124,37,0.35)", display: "flex", flexDirection: "column", justifyContent: "center", gap: "18px", height: "100%", boxSizing: "border-box" }}>
            <div style={{ fontFamily: "var(--f-display)", fontStyle: "italic", fontWeight: 400, fontSize: "1.5rem", lineHeight: 1.12, color: "var(--cream)" }}>Tudo num dia.<br />Presencial.</div>
            <Button variant="primary" size="md" onClick={onCta}>Quero participar →</Button>
          </div>
        </Reveal>
      </div>
    </Section>
  );
}

function GlassCard({ children }) {
  const [h, setH] = React.useState(false);
  return (
    <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{
        background: "rgba(15,22,40,0.55)", backdropFilter: "blur(20px)", WebkitBackdropFilter: "blur(20px)", border: `1px solid ${h ? "var(--border-2)" : "var(--border)"}`, borderRadius: "16px", padding: "28px", height: "100%", boxSizing: "border-box",
        transform: h ? "translateY(-4px)" : "none", boxShadow: h ? "0 18px 50px rgba(0,0,0,0.55)" : "none", transition: "all .4s var(--ease-out)"
      }}>
      {children}
    </div>
  );
}

// AUTHORITY: Alexandre Soong (bio oficial e stat cards)
const SOONG_STATS = [
  { big: "19+", unit: "Anos", d: "Experiência real no mercado Brasil e China." },
  { big: "R$ 100M+", unit: "", d: "Em mercadorias importadas e nacionalizadas." },
  { big: "Autor", unit: "", d: 'Do livro "Importando de 300 dólares a 5 milhões".' },
  { big: "Direct", unit: "from China", d: "Mora na Ásia e atua direto na fonte." },
];
function Authority() {
  return (
    <Section glow bgChar="师">
      <div style={{ display: "grid", gridTemplateColumns: "minmax(0,1fr) 340px", gap: "56px", alignItems: "center" }} className="pf-auth-grid">
        <div>
          <SectionHead n="05" tag="Autoridade" title="Quem é Alexandre Soong, e por que ele faz isso." />
          <Reveal delay={0.1}>
            <p style={{ fontFamily: "var(--f-body)", fontSize: "1.05rem", lineHeight: 1.7, color: "var(--txt-soft)", marginTop: "20px" }}>
              Alexandre Soong é empresário, autor e especialista em importação com mais de 19 anos de experiência no mercado Brasil e China. Atualmente morando na China, ele vive de perto o que muitos tentam aprender de longe: fábricas, fornecedores, negociações e os bastidores reais da importação. Sua autoridade não vem de teoria. Vem de campo.
            </p>
            <p style={{ fontFamily: "var(--f-body)", fontSize: "1.05rem", lineHeight: 1.7, color: "var(--txt-body)", marginTop: "14px" }}>
              Ao longo da carreira, participou da chegada de uma grande multinacional chinesa ao Brasil, empresa que forneceu produtos diretamente para as Olimpíadas de Pequim em 2008. Também é autor do livro <em style={{ color: "var(--cream)", fontStyle: "italic" }}>“Importando de 300 dólares a 5 milhões”</em> e já ultrapassou a marca de 100 milhões de reais em produtos importados.
            </p>
          </Reveal>
        </div>
        <Reveal delay={0.12}>
          {/* Soong portrait — framed like an Asian hanging scroll so the
              hard leg-cut at the photo's bottom edge resolves into a
              warm gold pedestal/spotlight + decorative hairline ornament
              instead of just floating in space. */}
          <div className="pf-auth-portrait" style={{ position: "relative", display: "flex", justifyContent: "center", alignItems: "flex-end", minHeight: "480px", paddingBottom: "32px" }}>
            {/* Two thin vertical bronze hairlines bracketing the figure —
                evokes a hanging-scroll frame without being literal. */}
            <span aria-hidden="true" style={{ position: "absolute", left: "8%", top: "10%", bottom: "20px", width: "1px", background: "linear-gradient(180deg, transparent 0%, var(--bronze) 25%, var(--bronze) 75%, transparent 100%)", opacity: 0.55 }} />
            <span aria-hidden="true" style={{ position: "absolute", right: "8%", top: "10%", bottom: "20px", width: "1px", background: "linear-gradient(180deg, transparent 0%, var(--bronze) 25%, var(--bronze) 75%, transparent 100%)", opacity: 0.55 }} />
            {/* Small ornamental seal at the top of each hairline */}
            <span aria-hidden="true" style={{ position: "absolute", left: "8%", top: "10%", transform: "translate(-50%, -50%)", width: "10px", height: "10px", border: "1px solid var(--bronze)", background: "var(--abyss)" }} />
            <span aria-hidden="true" style={{ position: "absolute", right: "8%", top: "10%", transform: "translate(50%, -50%)", width: "10px", height: "10px", border: "1px solid var(--bronze)", background: "var(--abyss)" }} />

            {/* Warm gold spotlight pedestal at his feet — bigger and
                richer than before, blends the leg cut into a glow. */}
            <span aria-hidden="true" style={{ position: "absolute", bottom: "8px", left: "50%", transform: "translateX(-50%)", width: "340px", height: "340px", borderRadius: "50%", background: "radial-gradient(ellipse at 50% 65%, rgba(245,158,11,0.32) 0%, rgba(245,158,11,0.16) 28%, rgba(176,124,37,0.06) 55%, transparent 75%)", filter: "blur(2px)", pointerEvents: "none" }} />

            {/* The portrait — bottom edge masked so the leg cut fades
                gracefully into the spotlight instead of stopping flat. */}
            <img src="assets/soong-v2.png" alt="Alexandre Soong"
              style={{
                position: "relative", width: "100%", maxWidth: "360px", height: "auto", filter: "drop-shadow(0 28px 44px rgba(0,0,0,0.65))",
                WebkitMaskImage: "linear-gradient(180deg, black 0%, black 78%, rgba(0,0,0,0.6) 90%, transparent 100%)",
                maskImage: "linear-gradient(180deg, black 0%, black 78%, rgba(0,0,0,0.6) 90%, transparent 100%)"
              }} />

            {/* Bottom "stage" hairline with a centered ornamental diamond
                — anchors him on a base instead of floating. */}
            <div aria-hidden="true" style={{ position: "absolute", bottom: 0, left: "50%", transform: "translateX(-50%)", display: "flex", alignItems: "center", gap: "14px", padding: "8px 0" }}>
              <span style={{ width: "70px", height: "1px", background: "linear-gradient(90deg, transparent, var(--bronze) 60%, var(--go-4))" }} />
              <span style={{ width: "9px", height: "9px", border: "1px solid var(--go-4)", background: "var(--abyss)", transform: "rotate(45deg)", boxShadow: "0 0 12px rgba(245,158,11,0.35)" }} />
              <span style={{ width: "70px", height: "1px", background: "linear-gradient(90deg, var(--go-4), var(--bronze) 40%, transparent)" }} />
            </div>
          </div>
        </Reveal>
      </div>
      {/* stat cards */}
      <div className="pf-stats-grid" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(220px,1fr))", gap: "16px", marginTop: "48px" }}>
        {SOONG_STATS.map((s, i) => (
          <Reveal key={i} delay={i * 0.06}>
            <HoverCard accent="var(--go)" surface="linear-gradient(165deg, #151210 0%, #0A0907 100%)" pad="26px">
              <div style={{ display: "flex", flexDirection: "column", gap: "6px", marginBottom: "14px" }}>
                <span style={{ fontFamily: "var(--f-display)", fontStyle: "italic", fontWeight: 400, fontSize: "1.85rem", lineHeight: 1.05, color: "var(--go-4)", letterSpacing: "-0.01em" }}>{s.big}</span>
                {s.unit && <span style={{ fontFamily: "var(--f-body)", fontWeight: 600, fontSize: ".64rem", letterSpacing: ".26em", textTransform: "uppercase", color: "var(--bronze)" }}>{s.unit}</span>}
              </div>
              <div style={{ fontFamily: "var(--f-body)", fontSize: ".95rem", lineHeight: 1.55, color: "var(--txt-soft)" }}>{s.d}</div>
            </HoverCard>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

// ── SOCIAL PROOF ──
// Premium proof block, positioned right after Authority. Editorial header
// with bronze hairline, support-icon bar, three floating phone mockups
// with a dotted gold China→Brasil arc behind them, then a 4-card grid
// of student testimonials (each with placeholder portrait, gold "Aluno
// Verificado" tag, 5 stars and a gold result line), and a closing
// authority-metrics bar. No cyan, no monospace — sober premium aesthetic.

// Real student feedback — sourced from screenshots provided by the
// brand team. Phone numbers refer to the visual story shown on the
// matching PhoneMock above; the cards repeat the same 4 stories so
// the user can connect what they see in the phones to the text proof.
const TESTIMONIALS = [
  {
    name: "Leandro S.",
    image: "assets/avatar_leandro.png",
    city: "Betim · MG",
    quote: "Estoque liberado e vendas começaram. O método funciona perfeitamente e os custos reais bateram certinho com a planilha do Soong.",
    result: "Estoque vendido",
  },
  {
    name: "Renato B.",
    image: "assets/avatar_renato.png",
    city: "São Paulo · SP",
    quote: "A melhor imersão que já participei na minha vida! Vocês são pessoas enviadas por Deus para nos abençoar em todas as áreas da vida.",
    result: "Imersão aprovada",
  },
  {
    name: "Fernanda G.",
    image: "assets/avatar_fernanda.png",
    city: "Franca · SP",
    quote: "Desenvolvi a minha marca própria com a fábrica chinesa indicada. Qualidade impecável e o suporte do Soong em cada etapa foi fundamental.",
    result: "Marca própria criada",
  },
  {
    name: "Patrícia R.",
    image: "assets/avatar_patricia.png",
    city: "Curitiba · PR",
    quote: "Amostras aprovadas e o primeiro container compartilhado já está em trânsito. A segurança que esse curso dá na prática é incrível.",
    result: "Container em trânsito",
  },
];

const PROOF_SUPPORT = [
  { ic: "package", t: "Importação estratégica" },
  { ic: "ship", t: "Processo seguro" },
  { ic: "trending-up", t: "Resultados comprovados" },
];

const PROOF_METRICS = [
  { ic: "users", t: "+1.200", sub: "Alunos ativos" },
  { ic: "boxes", t: "+3.000", sub: "Importações realizadas" },
  { ic: "factory", t: "Conexão", sub: "direta com fábricas" },
  { ic: "check-circle", t: "Validado", sub: "na prática" },
];

const WHATSAPP_DATA = {
  label: {
    name: "Leandro S. (Aluno)",
    color: "#34D399",
    avatar: "LS",
    image: "assets/phone-label.png",
    text: "Boa tarde pessoal, primeira venda para Betim! Foi mais rápido do que eu esperava, já com a etiqueta na mão. 🚀",
    time: "13:15",
  },
  boxes: {
    name: "Renato Bruning (Aluno)",
    color: "#60A5FA",
    avatar: "RB",
    image: "assets/avatar_renato.png",
    text: "A melhor que já participei na minha vida! Muito obrigado mesmo! 🚀",
    time: "10:24",
  },
  package: {
    name: "Patrícia R. (Aluna)",
    color: "#F87171",
    avatar: "PR",
    image: "assets/phone-package.png",
    text: "Deu tudo certo pra trazer as amostras da China. Chegaram, atestei a qualidade: próximo passo é volume e vender! 📦",
    time: "16:45",
  }
};

function PhoneMock({ rotate = 0, kind = "boxes", lift = 0, z = 1 }) {
  const data = WHATSAPP_DATA[kind] || WHATSAPP_DATA.boxes;

  const isLabel = kind === "label";
  const isPackage = kind === "package";
  const isBoxes = kind === "boxes";

  let statusTime = "09:41";
  let mentorTime = "12:55";
  let mentorText = "Pessoal, como estão os envios e recebimentos dessa semana? Mandem atualizações!";
  let classmateName = "Felipe R. (Aluno)";
  let classmateColor = "#FB923C";
  let classmateText = "Parabéns! Muito top!";
  let classmateTime = "13:18";
  let reactions = [{ emoji: "🚀", count: 8 }, { emoji: "👏", count: 5 }];

  if (isLabel) {
    statusTime = "13:20";
    mentorTime = "13:02";
    mentorText = "Pessoal, vi que alguns já liberaram estoque e começaram a despachar. Como estão as vendas?";
    classmateName = "Thiago M. (Aluno)";
    classmateColor = "#38BDF8";
    classmateText = "Que top, Leandro! Betim vai ficar pequena! 🚀🏆";
    classmateTime = "13:18";
    reactions = [{ emoji: "🚀", count: 7 }, { emoji: "🔥", count: 4 }];
  } else if (isBoxes) {
    statusTime = "10:30";
    mentorTime = "10:15";
    mentorText = "Renato, o que você achou da nossa Imersão Mundo China? Deu certo pra você?";
    classmateName = "Felipe R. (Aluno)";
    classmateColor = "#FB923C";
    classmateText = "Caramba Renato, depoimento forte demais irmão! Show! 🚀";
    classmateTime = "10:28";
    reactions = [{ emoji: "❤️", count: 10 }, { emoji: "🔥", count: 8 }];
  } else if (isPackage) {
    statusTime = "16:55";
    mentorTime = "16:30";
    mentorText = "Patrícia, as amostras que vieram aéreas da China chegaram no prazo? O que achou do material?";
    classmateName = "Felipe R. (Aluno)";
    classmateColor = "#FB923C";
    classmateText = "Massa demais! Testar qualidade das amostras é o segredo antes do volume. 🚀";
    classmateTime = "16:48";
    reactions = [{ emoji: "📦", count: 9 }, { emoji: "👍", count: 4 }];
  }

  return (
    <div style={{
      position: "relative",
      width: "240px",
      height: "490px",
      borderRadius: "38px",
      background: "#1C1917", // Graphite frame
      boxShadow: "0 25px 60px -15px rgba(0,0,0,0.9), inset 0 1px 1px rgba(255,255,255,0.15), 0 0 0 3px #1F1C1A, 0 0 0 4px rgba(255,255,255,0.05), 0 0 0 5px rgba(245,158,11,0.1)",
      padding: "8px", // Bezel thickness
      transform: `rotate(${rotate}deg) translateY(${lift}px)`,
      zIndex: z,
      flexShrink: 0,
      fontFamily: "var(--f-body)",
      transition: "transform .4s var(--ease-out)"
    }}>
      {/* Side buttons */}
      {/* Volume Up */}
      <div style={{ position: "absolute", left: "-3px", top: "100px", width: "3px", height: "35px", background: "#2e2e2e", borderRadius: "3px 0 0 3px", boxShadow: "inset 1px 0 0 rgba(255,255,255,0.1)" }} />
      {/* Volume Down */}
      <div style={{ position: "absolute", left: "-3px", top: "145px", width: "3px", height: "35px", background: "#2e2e2e", borderRadius: "3px 0 0 3px", boxShadow: "inset 1px 0 0 rgba(255,255,255,0.1)" }} />
      {/* Power Button */}
      <div style={{ position: "absolute", right: "-3px", top: "120px", width: "3px", height: "50px", background: "#2e2e2e", borderRadius: "0 3px 3px 0", boxShadow: "inset -1px 0 0 rgba(255,255,255,0.1)" }} />

      {/* Screen container */}
      <div style={{ position: "relative", width: "100%", height: "100%", borderRadius: "30px", overflow: "hidden", background: "#0B141A", display: "flex", flexDirection: "column" }}>

        {/* Camera Hole Punch */}
        <div style={{ position: "absolute", top: "6px", left: "50%", transform: "translateX(-50%)", width: "8px", height: "8px", borderRadius: "50%", background: "#050505", border: "1.5px solid #141414", zIndex: 10 }} />

        {/* Screen Glass Highlight Overlay */}
        <div style={{ position: "absolute", top: 0, left: 0, right: 0, bottom: 0, background: "linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.01) 40%, transparent 40%, transparent 100%)", zIndex: 9, pointerEvents: "none", borderRadius: "30px" }} />

            <div style={{ height: "24px", background: "#1F2C34", display: "flex", justifyContent: "space-between", alignItems: "center", padding: "4px 14px 0 14px", color: "#E9EDEF", fontSize: "9px", fontWeight: "600", zIndex: 5 }}>
              <span>{statusTime}</span>
              <div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
                <svg width="10" height="9" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M2 22h20V2L2 22z" />
                </svg>
                <svg width="11" height="9" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M12 21l-12-14.3c0 0 4.8-4.7 12-4.7s12 4.7 12 4.7l-12 14.3z" />
                </svg>
                <div style={{ width: "16px", height: "8px", border: "1px solid #E9EDEF", borderRadius: "2px", padding: "1px", display: "flex", alignItems: "center", position: "relative" }}>
                  <div style={{ flex: 1, height: "100%", background: "#E9EDEF", borderRadius: "1px" }} />
                  <div style={{ position: "absolute", right: "-2px", top: "2px", width: "1px", height: "3px", background: "#E9EDEF", borderRadius: "0 1px 1px 0" }} />
                </div>
              </div>
            </div>

            <div style={{ background: "#1F2C34", padding: "6px 8px 8px", display: "flex", alignItems: "center", gap: "6px", borderBottom: "1px solid #121B22", zIndex: 5 }}>
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="#00a884" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ cursor: "pointer", marginRight: "-2px" }}>
                <polyline points="15 18 9 12 15 6"></polyline>
              </svg>
              <div style={{ width: "26px", height: "26px", borderRadius: "50%", background: "linear-gradient(135deg, #B07C25, #FCD34D)", display: "flex", alignItems: "center", justifyContent: "center", color: "#1A1206", fontSize: "9px", fontWeight: "bold", fontFamily: "var(--f-display)", fontStyle: "italic", flexShrink: 0 }}>
                MPI
              </div>
              <div style={{ flex: 1, minWidth: 0, display: "flex", flexDirection: "column" }}>
                <span style={{ color: "#E9EDEF", fontSize: "10px", fontWeight: "700", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>Comunidade MPI 🚀</span>
                <span style={{ color: "#8696A0", fontSize: "7px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>Alexandre Soong, Você, +1.200 alunos...</span>
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: "8px", color: "#AEBAC1" }}>
                <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z" /></svg>
                <svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor"><path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56a.977.977 0 0 0-1.01.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4.01c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1C3 15.62 11.38 24 20 24c.55 0 1-.45 1-1v-6.62c0-.55-.45-1-.99-1z" /></svg>
                <svg viewBox="0 0 24 24" width="11" height="11" fill="currentColor"><circle cx="12" cy="5" r="2" /><circle cx="12" cy="12" r="2" /><circle cx="12" cy="19" r="2" /></svg>
              </div>
            </div>

            <div style={{
              flex: 1,
              padding: "10px 8px 14px",
              display: "flex",
              flexDirection: "column",
              gap: "10px",
              overflowY: "auto",
              backgroundImage: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80' opacity='0.04'%3E%3Cg fill='%23ffffff' fill-rule='evenodd'%3E%3Cpath d='M10 10c2 0 3 1 3 3s-1 3-3 3-3-1-3-3 1-3 3-3zm0 2c-1 0-1 1-1 1s0 1 1 1 1 0 1-1 0-1-1-1zm30 10c3 0 5 2 5 5s-2 5-5 5-5-2-5-5 2-5 5-5zm0 2c-1.6 0-3 1.4-3 3s1.4 3 3 3 3-1.4 3-3-1.4-3-3-3zm-20 30c1.6 0 3 1.4 3 3s-1.4 3-3 3-3-1-3-3 1-3 3-3zm40 10c2 0 3 1 3 3s-1 3-3 3-3-1-3-3 1-3 3-3z'/%3E%3C/g%3E%3C/svg%3E\")",
              backgroundRepeat: "repeat",
              backgroundSize: "80px 80px",
              scrollBehavior: "smooth",
              scrollbarWidth: "none"
            }}>
              <div style={{ alignSelf: "center", background: "#182229", color: "#8696A0", fontSize: "7.5px", padding: "3px 8px", borderRadius: "6px", textTransform: "uppercase", fontWeight: "600", letterSpacing: "0.5px" }}>
                Hoje
              </div>

              <div style={{
                alignSelf: "flex-start",
                maxWidth: "88%",
                background: "#202C33",
                borderRadius: "0 8px 8px 8px",
                padding: "5px 8px 6px",
                position: "relative",
                boxShadow: "0 1px 0.5px rgba(0,0,0,0.15)",
                display: "flex",
                flexDirection: "column",
                marginLeft: "6px"
              }}>
                <div style={{ position: "absolute", left: "-6px", top: 0, width: "6px", height: "10px", background: "#202C33", clipPath: "polygon(100% 0, 0 0, 100% 100%)" }} />
                <span style={{ color: "var(--go-4)", fontWeight: "bold", fontSize: "9px", marginBottom: "2px", display: "flex", alignItems: "center", gap: "2px" }}>
                  Alexandre Soong 👑 <span style={{ fontSize: "6.5px", background: "rgba(245,158,11,0.15)", padding: "1px 3px", borderRadius: "3px", color: "var(--go-4)", fontWeight: "bold", textTransform: "uppercase" }}>Mentor</span>
                </span>
                <p style={{ color: "#E9EDEF", fontSize: "9.2px", lineHeight: "1.35", margin: 0, fontFamily: "var(--f-body)", textAlign: "left" }}>
                  {mentorText}
                </p>
                <span style={{ alignSelf: "flex-end", color: "#8696A0", fontSize: "6.5px", marginTop: "1px" }}>
                  {mentorTime}
                </span>
              </div>

              {isBoxes ? (
                <>
                  <div style={{
                    alignSelf: "flex-start",
                    maxWidth: "88%",
                    background: "#202C33",
                    borderRadius: "0 8px 8px 8px",
                    padding: "5px 8px 6px",
                    position: "relative",
                    boxShadow: "0 1px 0.5px rgba(0,0,0,0.15)",
                    display: "flex",
                    flexDirection: "column",
                    marginLeft: "6px",
                    marginBottom: "4px"
                  }}>
                    <div style={{ position: "absolute", left: "-6px", top: 0, width: "6px", height: "10px", background: "#202C33", clipPath: "polygon(100% 0, 0 0, 100% 100%)" }} />
                    <span style={{ color: "#60A5FA", fontWeight: "bold", fontSize: "9px", marginBottom: "2px", textAlign: "left" }}>
                      Renato Bruning (Aluno)
                    </span>
                    <p style={{ color: "#E9EDEF", fontSize: "9.2px", lineHeight: "1.35", margin: 0, fontFamily: "var(--f-body)", textAlign: "left" }}>
                      A melhor que já participei na minha vida! Muito obrigado mesmo! 🚀
                    </p>
                    <span style={{ alignSelf: "flex-end", color: "#8696A0", fontSize: "6.5px", marginTop: "1px" }}>
                      10:24
                    </span>
                  </div>

                  <div style={{
                    alignSelf: "flex-start",
                    maxWidth: "88%",
                    background: "#202C33",
                    borderRadius: "8px",
                    padding: "5px 8px 6px",
                    position: "relative",
                    boxShadow: "0 1px 0.5px rgba(0,0,0,0.15)",
                    display: "flex",
                    flexDirection: "column",
                    marginLeft: "6px",
                    marginBottom: "4px"
                  }}>
                    <p style={{ color: "#E9EDEF", fontSize: "9.2px", lineHeight: "1.35", margin: 0, fontFamily: "var(--f-body)", textAlign: "left" }}>
                      Sou amigo do Eduardo da Master Mind e disse pra ele que não largo mais vocês! 🔥
                    </p>
                    <span style={{ alignSelf: "flex-end", color: "#8696A0", fontSize: "6.5px", marginTop: "1px" }}>
                      10:24
                    </span>
                  </div>

                  <div style={{
                    alignSelf: "flex-start",
                    maxWidth: "88%",
                    background: "#202C33",
                    borderRadius: "8px",
                    padding: "5px 8px 6px",
                    position: "relative",
                    boxShadow: "0 1px 0.5px rgba(0,0,0,0.15)",
                    display: "flex",
                    flexDirection: "column",
                    marginLeft: "6px",
                    marginBottom: "6px"
                  }}>
                    <p style={{ color: "#E9EDEF", fontSize: "9.2px", lineHeight: "1.35", margin: 0, fontFamily: "var(--f-body)", textAlign: "left" }}>
                      Vocês são pessoas enviadas por Deus para nos abençoar! Em todas as áreas da vida! 🙏
                    </p>
                    <span style={{ alignSelf: "flex-end", color: "#8696A0", fontSize: "6.5px", marginTop: "1px" }}>
                      10:25
                    </span>
                    <div style={{
                      position: "absolute",
                      right: "8px",
                      bottom: "-8px",
                      background: "#182229",
                      border: "1px solid #2A3942",
                      borderRadius: "10px",
                      padding: "1px 5px",
                      display: "flex",
                      alignItems: "center",
                      gap: "2.5px",
                      zIndex: 4,
                      boxShadow: "0 1px 2px rgba(0,0,0,0.3)"
                    }}>
                      <span style={{ fontSize: "8px", lineHeight: 1 }}>❤️🔥👏</span>
                      <span style={{ color: "#E9EDEF", fontSize: "7px", fontWeight: "600", lineHeight: 1 }}>18</span>
                    </div>
                  </div>

                  <div style={{
                    alignSelf: "flex-start",
                    maxWidth: "88%",
                    background: "#202C33",
                    borderRadius: "0 8px 8px 8px",
                    padding: "5px 8px 6px",
                    position: "relative",
                    boxShadow: "0 1px 0.5px rgba(0,0,0,0.15)",
                    display: "flex",
                    flexDirection: "column",
                    marginLeft: "6px"
                  }}>
                    <div style={{ position: "absolute", left: "-6px", top: 0, width: "6px", height: "10px", background: "#202C33", clipPath: "polygon(100% 0, 0 0, 100% 100%)" }} />
                    <span style={{ color: classmateColor, fontWeight: "bold", fontSize: "9px", marginBottom: "2px", textAlign: "left" }}>
                      {classmateName}
                    </span>
                    <p style={{ color: "#E9EDEF", fontSize: "9.2px", lineHeight: "1.35", margin: 0, fontFamily: "var(--f-body)", textAlign: "left" }}>
                      {classmateText}
                    </p>
                    <span style={{ alignSelf: "flex-end", color: "#8696A0", fontSize: "6.5px", marginTop: "1px" }}>
                      {classmateTime}
                    </span>
                  </div>
                </>
              ) : (
                <>
                  <div style={{
                    alignSelf: "flex-start",
                    maxWidth: "88%",
                    background: "#202C33",
                    borderRadius: "0 8px 8px 8px",
                    padding: "5px 5px 6px 5px",
                    position: "relative",
                    boxShadow: "0 1px 0.5px rgba(0,0,0,0.15)",
                    display: "flex",
                    flexDirection: "column",
                    marginLeft: "6px",
                    marginBottom: "6px"
                  }}>
                    <div style={{ position: "absolute", left: "-6px", top: 0, width: "6px", height: "10px", background: "#202C33", clipPath: "polygon(100% 0, 0 0, 100% 100%)" }} />
                    <span style={{ color: data.color, fontWeight: "bold", fontSize: "9px", padding: "0 3px", marginBottom: "3px", textAlign: "left" }}>
                      {data.name}
                    </span>
                    <div style={{ position: "relative", borderRadius: "5px", overflow: "hidden", marginBottom: "4px" }}>
                      <img src={data.image} alt="Upload" style={{ width: "100%", height: "125px", objectFit: "cover", display: "block" }} />
                    </div>
                    <p style={{ color: "#E9EDEF", fontSize: "9.2px", lineHeight: "1.35", padding: "0 3px", margin: "0 0 3px 0", fontFamily: "var(--f-body)", textAlign: "left" }}>
                      {data.text}
                    </p>
                    <span style={{ alignSelf: "flex-end", color: "#8696A0", fontSize: "6.5px", paddingRight: "3px", marginTop: "1px" }}>
                      {data.time}
                    </span>
                    <div style={{
                      position: "absolute",
                      right: "8px",
                      bottom: "-8px",
                      background: "#182229",
                      border: "1px solid #2A3942",
                      borderRadius: "10px",
                      padding: "1px 5px",
                      display: "flex",
                      alignItems: "center",
                      gap: "2.5px",
                      zIndex: 4,
                      boxShadow: "0 1px 2px rgba(0,0,0,0.3)"
                    }}>
                      <span style={{ fontSize: "8px", lineHeight: 1 }}>
                        {reactions.map(r => r.emoji).join("")}
                      </span>
                      <span style={{ color: "#E9EDEF", fontSize: "7px", fontWeight: "600", lineHeight: 1 }}>
                        {reactions.reduce((sum, r) => sum + r.count, 0)}
                      </span>
                    </div>
                  </div>

                  <div style={{
                    alignSelf: "flex-start",
                    maxWidth: "88%",
                    background: "#202C33",
                    borderRadius: "0 8px 8px 8px",
                    padding: "5px 8px 6px",
                    position: "relative",
                    boxShadow: "0 1px 0.5px rgba(0,0,0,0.15)",
                    display: "flex",
                    flexDirection: "column",
                    marginLeft: "6px"
                  }}>
                    <div style={{ position: "absolute", left: "-6px", top: 0, width: "6px", height: "10px", background: "#202C33", clipPath: "polygon(100% 0, 0 0, 100% 100%)" }} />
                    <span style={{ color: classmateColor, fontWeight: "bold", fontSize: "9px", marginBottom: "2px", textAlign: "left" }}>
                      {classmateName}
                    </span>
                    <p style={{ color: "#E9EDEF", fontSize: "9.2px", lineHeight: "1.35", margin: 0, fontFamily: "var(--f-body)", textAlign: "left" }}>
                      {classmateText}
                    </p>
                    <span style={{ alignSelf: "flex-end", color: "#8696A0", fontSize: "6.5px", marginTop: "1px" }}>
                      {classmateTime}
                    </span>
                  </div>
                </>
              )}
            </div>

            <div style={{ background: "#1F2C34", padding: "6px 8px", display: "flex", alignItems: "center", gap: "6px", zIndex: 5 }}>
              <div style={{ flex: 1, background: "#2A3942", borderRadius: "18px", display: "flex", alignItems: "center", padding: "5px 10px", gap: "6px" }}>
                <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="#8696a0" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
                  <circle cx="12" cy="12" r="10" /><path d="M8 14s1.5 2 4 2 4-2 4-2" /><line x1="9" y1="9" x2="9.01" y2="9" /><line x1="15" y1="9" x2="15.01" y2="9" />
                </svg>
                <span style={{ color: "#8696A0", fontSize: "9px", flex: 1, textAlign: "left", whiteSpace: "nowrap", overflow: "hidden" }}>Mensagem</span>
                <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="#8696a0" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0, transform: "rotate(45deg)" }}>
                  <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" />
                </svg>
                <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="#8696a0" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
                  <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" /><circle cx="12" cy="13" r="4" />
                </svg>
              </div>
              <div style={{ width: "28px", height: "28px", borderRadius: "50%", background: "#00A884", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", flexShrink: 0, boxShadow: "0 1px 2px rgba(0,0,0,0.2)" }}>
                <svg viewBox="0 0 24 24" width="13" height="13" fill="#ffffff" style={{ display: "block" }}>
                  <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z" />
                  <path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z" />
                </svg>
              </div>
            </div>
      </div>
    </div>
  );
}

// Simple inline star (5x). Kept lightweight; SVG draws a single point
// outline filled in gold — no complex artwork.
function Stars() {
  return (
    <div style={{ display: "inline-flex", gap: "3px" }}>
      {[0, 1, 2, 3, 4].map((i) => (
        <svg key={i} width="13" height="13" viewBox="0 0 16 16" fill="var(--go-4)" aria-hidden="true">
          <path d="M8 0.6l2.06 4.94 5.34.44-4.08 3.5 1.24 5.22L8 11.94l-4.56 2.76 1.24-5.22L0.6 5.98l5.34-.44z" />
        </svg>
      ))}
    </div>
  );
}

function SocialProof() {
  const stageRef = React.useRef(null);
  React.useEffect(() => {
    const el = stageRef.current;
    if (el) {
      const run = () => {
        const middleChild = el.children[1];
        if (middleChild) {
          const parentRect = el.getBoundingClientRect();
          const childRect = middleChild.getBoundingClientRect();
          const scrollOffset = (childRect.left - parentRect.left) - (parentRect.width - childRect.width) / 2;
          el.scrollLeft = scrollOffset;
        }
      };
      run();
      requestAnimationFrame(run);
    }
  }, []);

  return (
    <Section bgChar="实" style={{ background: "radial-gradient(ellipse at 50% 0%, rgba(245,158,11,0.06), transparent 55%), var(--abyss)" }}>
      {/* Header */}
      <SectionHead n="06" tag="Prova social real" title='Alunos que aplicaram,<br><span style="color: var(--go-4); font-style: italic;">importaram e venderam.</span>' sub="Veja o que nossos alunos e participantes estão conquistando com o método de importação da China." />

      {/* Support icon bar */}
      <Reveal delay={0.1}>
        <div style={{ display: "flex", justifyContent: "center", alignItems: "center", gap: "40px", flexWrap: "wrap", padding: "32px 0 56px", marginTop: "40px", borderTop: "1px solid rgba(176,124,37,0.18)", borderBottom: "1px solid rgba(176,124,37,0.18)" }}>
          {PROOF_SUPPORT.map((s, i) => (
            <React.Fragment key={i}>
              <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
                <span style={{ display: "flex", color: "var(--go-4)" }}><i data-lucide={s.ic} style={{ width: 18, height: 18 }}></i></span>
                <span style={{ fontFamily: "var(--f-body)", fontWeight: 500, fontSize: ".78rem", letterSpacing: ".18em", textTransform: "uppercase", color: "var(--champagne)" }}>{s.t}</span>
              </div>
              {i < PROOF_SUPPORT.length - 1 && <span style={{ width: "1px", height: "20px", background: "rgba(176,124,37,0.35)" }} />}
            </React.Fragment>
          ))}
        </div>
      </Reveal>

      {/* Phones + dotted gold trade route backdrop */}
      <Reveal delay={0.15}>
        <div className="pf-phones-row" style={{ position: "relative", padding: "40px 0 60px", display: "flex", justifyContent: "center", alignItems: "center" }}>
          {/* dotted world arc */}
          <svg className="pf-phones-arc" viewBox="0 0 800 320" preserveAspectRatio="xMidYMid meet" aria-hidden="true" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.35, pointerEvents: "none" }}>
            <defs>
              <linearGradient id="proofArc" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" stopColor="#B07C25" stopOpacity="0" />
                <stop offset="20%" stopColor="#B07C25" stopOpacity="0.8" />
                <stop offset="50%" stopColor="#FCD34D" stopOpacity="1" />
                <stop offset="80%" stopColor="#B07C25" stopOpacity="0.8" />
                <stop offset="100%" stopColor="#B07C25" stopOpacity="0" />
              </linearGradient>
            </defs>
            <path d="M 90 200 Q 400 30 710 200" fill="none" stroke="url(#proofArc)" strokeWidth="1.2" strokeDasharray="2 8" strokeLinecap="round" />
            <circle cx="90" cy="200" r="4" fill="#B07C25" />
            <circle cx="710" cy="200" r="4" fill="#FCD34D" />
            <text x="90" y="230" textAnchor="middle" fontFamily="var(--f-body)" fontSize="9" fill="#B07C25" letterSpacing="3" style={{ textTransform: "uppercase" }}>CHINA</text>
            <text x="710" y="230" textAnchor="middle" fontFamily="var(--f-body)" fontSize="9" fill="#FCD34D" letterSpacing="3" style={{ textTransform: "uppercase" }}>BRASIL</text>
          </svg>
          <div ref={stageRef} className="pf-phones-stage" style={{ position: "relative", display: "flex", alignItems: "center", justifyContent: "center" }}>
            <div style={{ marginRight: "-44px" }}><PhoneMock rotate={-7} kind="label" lift={26} z={1} /></div>
            <div style={{ marginRight: "-44px" }}><PhoneMock rotate={0} kind="boxes" lift={0} z={3} /></div>
            <div>                                 <PhoneMock rotate={7} kind="package" lift={26} z={1} /></div>
          </div>
        </div>
      </Reveal>

      {/* Testimonial grid — 2x2 so 4 cards always fill the bay, no orphan row. */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "18px", marginTop: "24px" }} className="pf-proof-grid">
        {TESTIMONIALS.map((t, i) => (
          <Reveal key={i} delay={i * 0.06}>
            <div style={{ position: "relative", overflow: "hidden", height: "100%", boxSizing: "border-box", padding: "28px 28px 24px", borderRadius: "14px", background: "linear-gradient(165deg, #151210 0%, #0A0907 100%)", border: "1px solid rgba(176,124,37,0.20)", boxShadow: "inset 0 1px 0 rgba(245,158,11,0.06), 0 22px 50px -28px rgba(0,0,0,0.85)", display: "flex", flexDirection: "column" }}>
              <span style={{ position: "absolute", top: 0, left: 0, right: 0, height: "1px", background: "linear-gradient(90deg, transparent, var(--go-4), transparent)", opacity: 0.55 }} />
              {/* Header: avatar + identity column (name on its own line, city muted below, stars row beneath) */}
              <div style={{ display: "flex", alignItems: "flex-start", gap: "14px", marginBottom: "18px" }}>
                <img src={t.image} alt={t.name} style={{ width: "54px", height: "54px", borderRadius: "50%", flexShrink: 0, border: "1px solid var(--bronze)", objectFit: "cover" }} />
                <div style={{ flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: "6px" }}>
                  {/* Name row: name on left (no wrap), verified pill on right */}
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: "10px" }}>
                    <span style={{ fontFamily: "var(--f-display)", fontWeight: 400, fontSize: "1.15rem", color: "var(--cream)", letterSpacing: "-0.005em", whiteSpace: "nowrap" }}>{t.name}</span>
                    <span style={{ display: "inline-flex", alignItems: "center", gap: "5px", flexShrink: 0, fontFamily: "var(--f-body)", fontWeight: 600, fontSize: ".56rem", letterSpacing: ".22em", textTransform: "uppercase", color: "var(--go-4)", padding: "3px 7px", border: "1px solid rgba(245,158,11,0.35)", borderRadius: "100px", background: "rgba(245,158,11,0.06)" }}>
                      <svg width="8" height="8" viewBox="0 0 16 16" fill="var(--go-4)" aria-hidden="true"><path d="M8 0l2 4 4 .4-3 2.6 1 4-4-2.4L4 11l1-4-3-2.6L6 4z" /></svg>
                      Verificado
                    </span>
                  </div>
                  {/* City + stars on a single row underneath */}
                  <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
                    <Stars />
                    <span style={{ fontFamily: "var(--f-body)", fontWeight: 500, fontSize: ".66rem", letterSpacing: ".22em", textTransform: "uppercase", color: "var(--bronze)", whiteSpace: "nowrap" }}>{t.city}</span>
                  </div>
                </div>
              </div>
              {/* Quote */}
              <p style={{ fontFamily: "var(--f-body)", fontStyle: "italic", fontSize: "1rem", lineHeight: 1.6, color: "var(--txt-soft)", margin: "0 0 22px", textWrap: "pretty", flex: 1 }}>“{t.quote}”</p>
              {/* Footer: Resultado on its own clean horizontal band */}
              <div style={{ paddingTop: "18px", borderTop: "1px solid rgba(176,124,37,0.18)", display: "flex", alignItems: "baseline", gap: "12px", flexWrap: "nowrap" }}>
                <span style={{ flexShrink: 0, fontFamily: "var(--f-body)", fontWeight: 500, fontSize: ".62rem", letterSpacing: ".22em", textTransform: "uppercase", color: "var(--bronze)" }}>Resultado</span>
                <span style={{ flexShrink: 0, width: "16px", height: "1px", background: "var(--bronze)", alignSelf: "center" }} />
                <span style={{ fontFamily: "var(--f-display)", fontStyle: "italic", fontWeight: 400, fontSize: "1.08rem", color: "var(--go-4)", whiteSpace: "nowrap" }}>{t.result}</span>
              </div>
            </div>
          </Reveal>
        ))}
      </div>

      {/* Closing metrics bar */}
      <Reveal delay={0.2}>
        <div className="pf-metrics-bar" style={{ marginTop: "40px", padding: "24px 28px", borderRadius: "14px", background: "linear-gradient(180deg, #0A0907 0%, #060504 100%)", border: "1px solid rgba(176,124,37,0.25)", display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))", gap: "20px", alignItems: "center" }}>
          {PROOF_METRICS.map((m, i) => (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: "14px", paddingLeft: i === 0 ? 0 : "20px", borderLeft: i === 0 ? "none" : "1px solid rgba(176,124,37,0.15)" }}>
              <span style={{ display: "flex", color: "var(--go-4)", flexShrink: 0 }}><i data-lucide={m.ic} style={{ width: 22, height: 22 }}></i></span>
              <div style={{ display: "flex", flexDirection: "column", gap: "2px", minWidth: 0 }}>
                <span style={{ fontFamily: "var(--f-display)", fontStyle: "italic", fontWeight: 400, fontSize: "1.25rem", lineHeight: 1, color: "var(--cream)", letterSpacing: "-0.01em" }}>{m.t}</span>
                <span style={{ fontFamily: "var(--f-body)", fontWeight: 500, fontSize: ".62rem", letterSpacing: ".22em", textTransform: "uppercase", color: "var(--bronze)" }}>{m.sub}</span>
              </div>
            </div>
          ))}
        </div>
      </Reveal>
    </Section>
  );
}

// ── TRANSFORMATION ──
function Transformation() {
  const before = ['“Será que vou ser enganado?”', "Trava no primeiro passo", "Tutorial solto, sem ordem", "Medo da conta estourar", "Adiamento eterno"];
  const after = ["Sabe filtrar fornecedor", "Tem o passo a passo na mão", "Calcula a margem antes de comprar", "Conhece o caminho até o Brasil", "Faz o primeiro pedido com confiança"];
  return (
    <Section glow bgChar="变">
      <SectionHead n="07" tag="Transformação" title='Você entra com dúvida.<br><span style="color:var(--go-4); font-style: italic;">Sai com um plano.</span>' />
      <div style={{ display: "grid", gridTemplateColumns: "1fr auto 1fr", gap: "24px", alignItems: "center", marginTop: "48px" }} className="pf-transform">
        <Reveal>
          <HoverCard accent="var(--crimson)" surface="var(--surface)" pad="30px">
            <div style={{ fontFamily: "var(--f-display)", fontWeight: 400, fontStyle: "italic", fontSize: "1.25rem", color: "var(--crimson-4)", marginBottom: "18px" }}>Antes do evento</div>
            {before.map((t, i) => <div key={i} style={{ fontFamily: "var(--f-body)", fontSize: ".98rem", color: "#9A8E78", padding: "9px 0", borderBottom: i < before.length - 1 ? "1px solid rgba(176,124,37,0.10)" : "none" }}>{t}</div>)}
          </HoverCard>
        </Reveal>
        <div style={{ fontFamily: "var(--f-display)", fontStyle: "italic", fontSize: "2.2rem", color: "var(--go-4)", textShadow: "0 0 16px var(--go-glow)" }} className="pf-arrow">→</div>
        <Reveal delay={0.1}>
          <HoverCard accent="var(--go)" surface="linear-gradient(165deg, #1B1810 0%, #0F0D08 100%)" pad="30px">
            <div style={{ fontFamily: "var(--f-display)", fontWeight: 400, fontStyle: "italic", fontSize: "1.25rem", color: "var(--go-4)", marginBottom: "18px" }}>Depois do evento</div>
            {after.map((t, i) => <div key={i} style={{ fontFamily: "var(--f-body)", fontSize: ".98rem", color: "var(--cream)", padding: "9px 0", borderBottom: i < after.length - 1 ? "1px solid rgba(176,124,37,0.18)" : "none" }}>{t}</div>)}
          </HoverCard>
        </Reveal>
      </div>
    </Section>
  );
}

Object.assign(window, { Modules, GlassCard, Authority, SocialProof, PhoneMock, Stars, Transformation });
