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

// ── LIVE EXPERIENCE ("Experiência presencial") ──
const LIVE_ELEMENTS = [
  { n: "Networking", t: "Networking qualificado", d: "Troca direta com empresários e compradores que vivem o mesmo desafio que você." },
  { n: "Soong", t: "Contato com Soong", d: "Acesso a quem vive a China e traduz os bastidores de fornecedores na sua frente." },
  { n: "Mercado", t: "Visão de mercado", d: "A leitura real da cadeia: fábricas, fornecedores e o que move os preços." },
  { n: "Feira", t: "Preparação para outubro", d: "Como chegar pronto para a maior feira de fornecedores do mundo." },
  { n: "Troca", t: "Troca entre participantes", d: "Conexões com quem compra, vende e quer escalar margem como você." },
  { n: "Direção", t: "Direção estratégica", d: "Sair com clareza do próximo passo, não com mais um monte de teoria." },
];
function LiveExperience({ onCta }) {
  return (
    <Section glow>
      <SectionHead n="06" tag="Experiência presencial" title='Mais do que conteúdo. Uma imersão <span style="color:var(--go-4); font-style: italic;">presencial para empresários</span>.' sub="O ambiente presencial cria troca, networking, clareza e profundidade. Você não está só assistindo a uma aula, está entrando em um ambiente com empresários e compradores que querem entender a China dos negócios." />
      <div className="pf-modules-grid" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(240px,1fr))", gap: "16px", marginTop: "48px" }}>
        {LIVE_ELEMENTS.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.3}>
          <div style={{ borderRadius: "16px", padding: "30px", background: "linear-gradient(135deg, rgba(var(--go-rgb),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)" }}>Dois dias.<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 + stat cards) ──
const SOONG_STATS = [
  { big: "China", unit: "Mora lá", d: "Vive na China e atua direto na fonte, todos os dias." },
  { big: "R$ 100M+", unit: "", d: "Em mercadorias importadas e nacionalizadas." },
  { big: "Brasil-China", unit: "Experiência", d: "Anos lendo a cadeia de fornecedores dos dois lados." },
  { big: "Mentor", unit: "Imersão Mundo China", d: "Anfitrião e autoridade central do evento presencial." },
];
function Authority() {
  return (
    <Section glow>
      <div style={{ display: "grid", gridTemplateColumns: "minmax(0,1fr) 340px", gap: "56px", alignItems: "center" }} className="pf-auth-grid">
        <div>
          <SectionHead n="04" tag="Autoridade" title="Aprenda com quem vive a China de dentro." />
          <Reveal delay={0.1}>
            <p style={{ fontFamily: "var(--f-body)", fontSize: "1.05rem", lineHeight: 1.7, color: "var(--txt-soft)", marginTop: "20px" }}>
              Soong mora na China, conhece o mercado Brasil-China por dentro e já importou mais de R$ 100 milhões. Ele não é um professor comum: é a ponte entre o empresário brasileiro e a China real dos negócios: fábricas, fornecedores, negociação e oportunidades.
            </p>
            <p style={{ fontFamily: "var(--f-body)", fontSize: "1.05rem", lineHeight: 1.7, color: "var(--txt-body)", marginTop: "14px" }}>
              Na <em style={{ color: "var(--cream)", fontStyle: "italic" }}>Imersão Mundo China</em>, ele traduz os bastidores de fornecedores e negociação para empresários brasileiros que querem comprar com mais estratégia e chegar preparados para a maior feira de fornecedores do mundo, em outubro.
            </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(var(--go-rgb),0.32) 0%, rgba(var(--go-rgb),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(var(--go-rgb),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.",
    initials: "LS",
    city: "Betim · MG",
    quote: "Boa tarde pessoal, primeira venda para Betim! Foi mais rápido do que eu esperava, já com a etiqueta na mão.",
    result: "Primeira venda",
  },
  {
    name: "Carlos M.",
    initials: "CM",
    city: "São Paulo · SP",
    quote: "Mais uma etapa concluída com sucesso! Chegando mercadorias da China sem dor de cabeça. Obrigado, Alexandre Soong. Gratidão.",
    result: "Carga recebida",
  },
  {
    name: "Fernanda G.",
    initials: "FG",
    city: "Franca · SP",
    quote: "Consegui fábrica para um produto idealizado por mim. Os chineses gostaram da ideia e lançaram na feira da China. Hoje uso no meu trabalho.",
    result: "Produto fabricado",
  },
  {
    name: "Patrícia R.",
    initials: "PR",
    city: "Curitiba · PR",
    quote: "Deu tudo certo para trazer as amostras da China. Chegaram, atestei a qualidade. O próximo passo é trazer volume e vender.",
    result: "Amostras aprovadas",
  },
];

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: "container", 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" },
];

// Tiny QR-code-ish square. Three finder patterns + sparse fill — reads
// as "QR code" at a glance without being a real one (and without using
// any real brand's QR). Used inside the shipping-label phone scene.
function QRSquare({ size = 38 }) {
  const px = size / 7; // 7-module logical grid
  // hand-picked module fills for a believable noise pattern
  const fills = [
    [3,2],[4,3],[5,2],[3,4],[5,4],[4,5],[2,5],[5,5],
  ];
  return (
    <div style={{ width: size, height: size, background: "#fff", position: "relative" }}>
      {/* three corner finder patterns */}
      {[[0,0],[0,5],[5,0]].map(([cx,cy],i)=>(
        <div key={i} style={{ position:"absolute", left: cx*px, top: cy*px, width: 2*px, height: 2*px, background:"#000", boxShadow:`inset 0 0 0 ${px*0.5}px #fff, inset 0 0 0 ${px*0.85}px #000` }} />
      ))}
      {fills.map(([cx,cy],i)=>(
        <div key={`f${i}`} style={{ position:"absolute", left: cx*px, top: cy*px, width: px*0.85, height: px*0.85, background:"#000" }} />
      ))}
    </div>
  );
}

// Phone scene: shipping label (Leandro — "primeira venda para Betim").
// Recreates the visual language of the original screenshot without
// any brand marks: redacted bars, two QR squares, two "tracking code"
// black plates, a barcode and an "AGÊNCIA" footer note.
function PhoneScene_Label() {
  return (
    <div style={{ position:"absolute", inset:0, padding:"38px 14px 16px", display:"flex", flexDirection:"column", gap:"10px" }}>
      {/* label paper */}
      <div style={{ background:"#F4F1EA", borderRadius:"4px", padding:"10px 12px", color:"#111", fontFamily:"var(--f-body)", fontSize:"7px", lineHeight:1.3, boxShadow:"0 6px 18px rgba(0,0,0,0.45)" }}>
        {/* destinatário row */}
        <div style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-start", gap:"8px" }}>
          <div style={{ flex:1, minWidth:0 }}>
            <div style={{ background:"#111", color:"#fff", padding:"1px 4px", display:"inline-block", fontWeight:700, letterSpacing:".1em", fontSize:"6px" }}>DESTINATÁRIO</div>
            <div style={{ height:"5px", background:"#222", marginTop:"3px", borderRadius:"1px" }} />
            <div style={{ height:"5px", background:"#222", marginTop:"3px", borderRadius:"1px", width:"85%" }} />
            <div style={{ marginTop:"6px", display:"flex", flexDirection:"column", gap:"2px", fontSize:"5.5px", color:"#333" }}>
              <span>Bairro <span style={{ color:"#000", letterSpacing:".5px" }}>•••••••</span></span>
              <span>CEP <span style={{ color:"#000", letterSpacing:".5px" }}>•••••••</span></span>
              <span>Pedido <span style={{ color:"#000", letterSpacing:".5px" }}>•••••</span></span>
            </div>
          </div>
          <QRSquare size={32} />
        </div>
        {/* codes + qr */}
        <div style={{ display:"flex", gap:"6px", alignItems:"center", marginTop:"8px" }}>
          <QRSquare size={32} />
          <div style={{ display:"flex", flexDirection:"column", gap:"3px", flex:1 }}>
            <div style={{ background:"#000", color:"#fff", padding:"3px 6px", fontWeight:800, fontSize:"10px", letterSpacing:".05em", textAlign:"center", borderRadius:"2px" }}>MG2 -2</div>
            <div style={{ background:"#000", color:"#fff", padding:"3px 6px", fontWeight:800, fontSize:"10px", letterSpacing:".05em", textAlign:"center", borderRadius:"2px" }}>LMG-15</div>
          </div>
        </div>
        <div style={{ fontSize:"5.5px", color:"#666", textAlign:"center", marginTop:"6px" }}>Betim</div>
        {/* barcode */}
        <div style={{ marginTop:"8px", display:"flex", justifyContent:"space-between", alignItems:"center", gap:"6px" }}>
          <div style={{ flex:1, height:"22px", backgroundImage:"repeating-linear-gradient(90deg, #000 0 1.5px, transparent 1.5px 3px, #000 3px 4px, transparent 4px 6px, #000 6px 7.5px, transparent 7.5px 11px)" }} />
          <div style={{ fontSize:"5.5px", color:"#666", letterSpacing:".15em" }}>AGÊNCIA</div>
        </div>
      </div>
      {/* caption */}
      <div style={{ color:"#fff", fontFamily:"var(--f-body)", fontSize:"11px", lineHeight:1.35, fontWeight:500, padding:"4px 2px 0" }}>
        Boa tarde pessoal,<br/>primeira venda para Betim!
      </div>
      <div style={{ marginTop:"auto", display:"flex", justifyContent:"flex-end", alignItems:"center", gap:"2px", fontSize:"11px" }}>
        <span>🎉</span><span>🚀</span><span>🙏</span><span style={{ color:"#fff", fontFamily:"var(--f-body)", fontWeight:600, fontSize:"9px", marginLeft:"4px" }}>6</span>
      </div>
    </div>
  );
}

// Phone scene: stacked cardboard boxes from China + white banner overlay.
// (Carlos M. — "Mais uma etapa concluída com sucesso!")
function PhoneScene_Boxes() {
  // a few mock china-marker labels — placeholder runes drawn as bold
  // glyphs; not real characters, just suggestive of CN handwriting.
  return (
    <div style={{ position:"absolute", inset:0, padding:"38px 14px 16px", display:"flex", flexDirection:"column", gap:"10px" }}>
      {/* boxes stage */}
      <div style={{ position:"relative", background:"linear-gradient(180deg,#E9DDC8 0%, #D8C9A8 100%)", borderRadius:"4px", overflow:"hidden", height:"175px", boxShadow:"inset 0 -10px 20px rgba(0,0,0,0.15), 0 6px 18px rgba(0,0,0,0.45)" }}>
        {/* back box */}
        <Box style={{ left:"8%", top:"6%", width:"72%", height:"36%", rotate:"-2deg" }} dark />
        {/* middle box */}
        <Box style={{ left:"4%", top:"38%", width:"86%", height:"38%", rotate:"1deg" }} />
        {/* front box right */}
        <Box style={{ left:"40%", top:"58%", width:"58%", height:"40%", rotate:"-1deg" }} />
        {/* banner overlay */}
        <div style={{ position:"absolute", left:"50%", top:"42%", transform:"translate(-50%, -50%)", background:"#fff", padding:"6px 12px", borderRadius:"3px", boxShadow:"0 4px 12px rgba(0,0,0,0.35)", color:"#111", fontFamily:"var(--f-body)", fontWeight:800, fontSize:"11px", letterSpacing:"-.005em", whiteSpace:"nowrap" }}>
          Mais uma etapa concluída!
        </div>
      </div>
      <div style={{ color:"#fff", fontFamily:"var(--f-body)", fontSize:"10px", lineHeight:1.35, fontWeight:500, padding:"4px 2px 0" }}>
        Chegando mercadorias! Mais uma etapa concluída com sucesso!
      </div>
      <div style={{ marginTop:"auto", display:"flex", justifyContent:"flex-end", alignItems:"center", gap:"2px", fontSize:"11px" }}>
        <span>🚀</span><span>🙏</span><span>👏</span><span style={{ color:"#fff", fontFamily:"var(--f-body)", fontWeight:600, fontSize:"9px", marginLeft:"4px" }}>4</span>
      </div>
    </div>
  );
}

// Small cardboard box primitive used by PhoneScene_Boxes — tan gradient,
// shipping label rectangle in the corner and faint CN-style handwriting.
function Box({ style, dark }) {
  const base = dark ? "linear-gradient(165deg, #B89765 0%, #8E6F44 100%)" : "linear-gradient(165deg, #D9BC8B 0%, #B89060 100%)";
  return (
    <div style={{ position:"absolute", background: base, borderRadius:"2px", boxShadow:"inset 0 -4px 8px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 8px rgba(0,0,0,0.25)", transform:`rotate(${style.rotate||"0deg"})`, ...style }}>
      <div style={{ position:"absolute", left:"6%", top:"22%", width:"24%", height:"32%", background:"#F1E7D0", borderRadius:"1px" }} />
      <div style={{ position:"absolute", right:"10%", top:"18%", fontFamily:"var(--f-display)", fontWeight:700, color:"rgba(0,0,0,0.55)", fontSize:"9px", letterSpacing:"-.02em" }}>上海</div>
      <div style={{ position:"absolute", right:"8%", top:"42%", fontFamily:"var(--f-display)", fontWeight:700, color:"rgba(0,0,0,0.45)", fontSize:"7px" }}>外贸</div>
    </div>
  );
}

// Phone scene: international cargo package — brown package + green
// "NÃO COBRAR" tag + a generic magenta "CARGA INTERNACIONAL" sticker
// (intentionally NOT a real carrier brand). Patrícia R. — "amostras da China".
function PhoneScene_Package() {
  return (
    <div style={{ position:"absolute", inset:0, padding:"38px 14px 16px", display:"flex", flexDirection:"column", gap:"10px" }}>
      <div style={{ position:"relative", height:"180px", background:"linear-gradient(180deg,#3A2C1E 0%, #251B11 100%)", borderRadius:"4px", overflow:"hidden", boxShadow:"0 6px 18px rgba(0,0,0,0.45)" }}>
        {/* package */}
        <div style={{ position:"absolute", left:"12%", right:"10%", top:"22%", bottom:"12%", background:"linear-gradient(165deg, #C39763 0%, #8C6332 100%)", borderRadius:"2px", boxShadow:"inset 0 -8px 14px rgba(0,0,0,0.35), inset 0 2px 0 rgba(255,255,255,0.15)" }}>
          {/* tape strip */}
          <div style={{ position:"absolute", left:"-4%", right:"-4%", top:"42%", height:"22%", background:"linear-gradient(180deg, rgba(255,240,210,0.55) 0%, rgba(220,200,160,0.45) 100%)", transform:"rotate(-2deg)" }} />
          {/* small slip on top */}
          <div style={{ position:"absolute", left:"22%", top:"-8%", width:"30%", height:"22%", background:"#1A1A1A", borderRadius:"1px" }} />
          {/* "NÃO COBRAR" tag */}
          <div style={{ position:"absolute", left:"6%", top:"6%", padding:"3px 6px", background:"#2E8B3E", color:"#fff", fontFamily:"var(--f-body)", fontWeight:800, fontSize:"7px", lineHeight:1, letterSpacing:".06em", transform:"rotate(-6deg)", boxShadow:"0 2px 4px rgba(0,0,0,0.35)" }}>
            NÃO<br/>COBRAR
          </div>
          {/* generic international cargo sticker (NOT FedEx) */}
          <div style={{ position:"absolute", right:"14%", top:"30%", width:"54px", height:"54px", borderRadius:"50%", background:"radial-gradient(circle at 35% 30%, #FF4FA0, #C9277A 65%, #9E1A60 100%)", display:"flex", flexDirection:"column", alignItems:"center", justifyContent:"center", textAlign:"center", color:"#fff", fontFamily:"var(--f-body)", fontWeight:800, fontSize:"6.5px", letterSpacing:".12em", lineHeight:1.1, padding:"4px", boxShadow:"0 4px 8px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.25)" }}>
            <span style={{ opacity:.85 }}>CARGA</span>
            <span style={{ fontSize:"5.5px", opacity:.85 }}>INTERNACIONAL</span>
            <span style={{ width:"24px", height:"1px", background:"#fff", opacity:.5, margin:"2px 0" }} />
            <span style={{ fontSize:"5.5px" }}>EXPRESS</span>
          </div>
        </div>
      </div>
      <div style={{ color:"#fff", fontFamily:"var(--f-body)", fontSize:"10px", lineHeight:1.35, fontWeight:500, padding:"4px 2px 0" }}>
        Deu tudo certo pra trazer as amostras da China. Atestei a qualidade. 🤑
      </div>
      <div style={{ marginTop:"auto", display:"flex", justifyContent:"flex-end", alignItems:"center", gap:"2px", fontSize:"11px" }}>
        <span>🤑</span><span>📦</span><span>✈️</span><span style={{ color:"#fff", fontFamily:"var(--f-body)", fontWeight:600, fontSize:"9px", marginLeft:"4px" }}>9</span>
      </div>
    </div>
  );
}

// Phone shell: device chrome + status row + name pill. Picks the right
// scene by `kind`. The bronze "AO VIVO" pill is replaced with a
// realistic story top-bar (avatar + handle + time) so the mock reads
// instantly as social proof.
const PHONE_SCENES = { label: PhoneScene_Label, boxes: PhoneScene_Boxes, package: PhoneScene_Package };
function PhoneMock({ rotate = 0, kind = "label", handle = "aluno_mpi", time = "2 d", lift = 0, z = 1 }) {
  const Scene = PHONE_SCENES[kind] || PhoneScene_Label;
  return (
    <div style={{ position: "relative", width: "200px", height: "410px", borderRadius: "34px", background: "linear-gradient(165deg, #1A1610 0%, #0A0907 100%)", border: "1px solid rgba(176,124,37,0.45)", padding: "8px", boxShadow: "0 30px 70px -18px rgba(0,0,0,0.85), inset 0 0 0 1px rgba(var(--go-rgb),0.08)", transform: `rotate(${rotate}deg) translateY(${lift}px)`, zIndex: z, flexShrink: 0 }}>
      {/* notch */}
      <div style={{ position: "absolute", top: "12px", left: "50%", transform: "translateX(-50%)", width: "72px", height: "18px", borderRadius: "10px", background: "#000", zIndex: 3 }} />
      <div style={{ position: "relative", width: "100%", height: "100%", borderRadius: "26px", overflow: "hidden", background: "#0A0807" }}>
        {/* story top-bar: avatar + handle + time */}
        <div style={{ position: "absolute", top: "10px", left: "12px", right: "12px", display: "flex", alignItems: "center", gap: "8px", zIndex: 4, fontFamily: "var(--f-body)", whiteSpace: "nowrap" }}>
          <span style={{ width: "20px", height: "20px", borderRadius: "50%", background: "linear-gradient(135deg, var(--go-4), var(--bronze))", boxShadow: "0 0 0 1.5px #0A0807, 0 0 0 2.5px var(--go-4)", flexShrink: 0 }} />
          <span style={{ color: "#fff", fontWeight: 700, fontSize: "9.5px", letterSpacing: "-.005em" }}>{handle}</span>
          <span style={{ color: "rgba(255,255,255,0.55)", fontSize: "9px" }}>· {time}</span>
        </div>
        <Scene />
      </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() {
  return (
    <Section style={{ background: "radial-gradient(ellipse at 50% 0%, rgba(var(--go-rgb),0.06), transparent 55%), var(--abyss)" }}>
      {/* Header */}
      <SectionHead n="05" tag="Prova social real" title='Quem aprende com Soong enxerga a<br><span style="color: var(--go-4); font-style: italic;">China com outros olhos.</span>' sub="Feedbacks, mensagens e relatos de alunos e participantes que passaram a entender melhor fornecedores, importação, negociação e oportunidades com a orientação de Soong." />
 
      {/* 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 — fine gold line, China → Brasil */}
          <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="var(--go-4)" 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="var(--go-4)" />
            <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="var(--go-4)" letterSpacing="3" style={{ textTransform: "uppercase" }}>BRASIL</text>
          </svg>
          <div className="pf-phones-stage" style={{ position: "relative", display: "flex", alignItems: "center", justifyContent: "center" }}>
            <div style={{ marginRight: "-36px" }}><PhoneMock rotate={-7} kind="label"   handle="leandro.s"   time="3 d" lift={26} z={1} /></div>
            <div style={{ marginRight: "-36px" }}><PhoneMock rotate={0}  kind="boxes"   handle="carlos.m"    time="1 sem" lift={0}  z={3} /></div>
            <div>                                  <PhoneMock rotate={7}  kind="package" handle="patricia.r"  time="2 d" 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(var(--go-rgb),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" }}>
                <div style={{ width: "54px", height: "54px", borderRadius: "50%", flexShrink: 0, background: "linear-gradient(135deg, #2A2218, #0F0C08)", border: "1px solid var(--bronze)", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--f-display)", fontStyle: "italic", fontWeight: 400, color: "var(--go-4)", fontSize: "1.2rem" }}>{t.initials}</div>
                <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(var(--go-rgb),0.35)", borderRadius: "100px", background: "rgba(var(--go-rgb),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 = ["Compra caro, de intermediário", "Margem apertada", "Fornecedor limitado", "Pouca clareza sobre a cadeia", "Medo de negociar", "Despreparo para a feira"];
  const after = ["Visão da cadeia inteira", "Clareza sobre fornecedores", "Melhor leitura de margem", "Preparação para negociar", "Visão China-Brasil", "Networking qualificado"];
  return (
    <Section glow>
      <SectionHead n="08" tag="Transformação" title='Saia da dependência do intermediário<br><span style="color:var(--go-4); font-style: italic;">e pense mais perto da fonte.</span>' />
      <div style={{ display: "grid", gridTemplateColumns: "1fr auto 1fr", gap: "24px", alignItems: "center", marginTop: "48px" }} className="pf-transform">
        <Reveal>
          <HoverCard accent="var(--txt-dim)" surface="linear-gradient(165deg, #1E2022 0%, #0F1011 100%)" pad="30px">
            <div style={{ fontFamily: "var(--f-display)", fontWeight: 400, fontStyle: "italic", fontSize: "1.25rem", color: "var(--txt-dim)", marginBottom: "18px" }}>Antes da imersão</div>
            {before.map((t, i) => <div key={i} style={{ fontFamily: "var(--f-body)", fontSize: ".98rem", color: "#718096", padding: "9px 0", borderBottom: i < before.length - 1 ? "1px solid rgba(255,255,255,0.05)" : "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, #2A0C0D 0%, #0C0506 100%)" pad="30px">
            <div style={{ fontFamily: "var(--f-display)", fontWeight: 400, fontStyle: "italic", fontSize: "1.25rem", color: "var(--go-4)", marginBottom: "18px" }}>Depois da imersão</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(var(--go-rgb),0.18)" : "none" }}>{t}</div>)}
          </HoverCard>
        </Reveal>
      </div>
    </Section>
  );
}

Object.assign(window, { LiveExperience, GlassCard, Authority, SocialProof, PhoneMock, PhoneScene_Label, PhoneScene_Boxes, PhoneScene_Package, Box, QRSquare, Stars, Transformation });
