// OSET — Landing Page de Prova Social
// Fiel ao design do site oset.com.br: preto profundo, dourado vibrante #f5a623,
// Poppins/Manrope, cards retangulares, selos quadrados dourados, mapa do Brasil
// em pontos luminosos.

function OsetLP({ tweaks }) {
  const D = window.OSET_DATA;
  const gold = tweaks.gold;
  const goldDeep = tweaks.goldDeep;
  const accent2 = tweaks.accent2;

  // WhatsApp — número OSET com mensagem pré-preenchida
  const waMsg = encodeURIComponent("Olá! Vim pelo site Histórias OSET e quero saber se minha empresa tem créditos a recuperar.");
  const wa = `https://wa.me/5547999447088?text=${waMsg}`;

  const sans = '"Poppins", "Manrope", ui-sans-serif, system-ui, sans-serif';

  const bg = "#0a0a0a";
  const card = "#181410";
  const cardBorder = "rgba(245,166,35,0.10)";
  const fg = "#ffffff";
  const muted = "rgba(255,255,255,0.62)";
  const dim = "rgba(255,255,255,0.4)";

  const goldGlow = (a) => `radial-gradient(ellipse 70% 60% at 70% 50%, ${gold}${a} 0%, transparent 70%)`;

  return (
    <div style={{ background: bg, color: fg, fontFamily: sans, width: "100%", minHeight: "100%",
                  fontWeight: 400 }}>
      {/* Top bar — minimal, só logo + CTA */}
      <header className="oset-header" style={{
        position: "relative", zIndex: 10,
        display: "flex", justifyContent: "space-between", alignItems: "center",
        padding: "20px 64px", background: bg,
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
          <img src="assets/oset-logo.jpg" alt="OSET"
               style={{ width: 56, height: 56, objectFit: "cover", borderRadius: 6,
                        border: `1px solid ${cardBorder}` }} />
          <div>
            <div style={{ fontSize: 11, color: gold, fontWeight: 600, letterSpacing: "0.2em",
                          textTransform: "uppercase" }}>
              Histórias OSET
            </div>
            <div className="oset-tagline" style={{ fontSize: 13, color: muted, marginTop: 4 }}>
              Quem recuperou — em primeira pessoa
            </div>
          </div>
        </div>
        <div className="oset-header-cta" style={{ display: "flex", gap: 10, alignItems: "center" }}>
          <a href={wa} target="_blank" rel="noopener noreferrer" style={{
            background: gold, color: "#0a0a0a",
            padding: "12px 22px", borderRadius: 28,
            fontSize: 14, fontWeight: 600, letterSpacing: "0.005em",
            display: "inline-flex", alignItems: "center", gap: 8,
            boxShadow: `0 8px 28px -8px ${gold}55`,
            textDecoration: "none", cursor: "pointer",
          }}>
            <span style={{
              width: 16, height: 16, borderRadius: 999, background: "#0a0a0a",
              display: "inline-flex", alignItems: "center", justifyContent: "center",
              fontSize: 9, color: gold, fontWeight: 700,
            }}>✓</span>
            Solicitar Contato
          </a>
        </div>
      </header>

      {/* HERO — preto + mapa do Brasil dourado luminoso à direita */}
      <section className="oset-hero" style={{
        position: "relative", overflow: "hidden",
        padding: "80px 64px 120px",
        background: `${goldGlow("38")}, ${bg}`,
        borderBottom: `1px solid ${cardBorder}`,
      }}>
        <BrazilDots gold={gold} goldDeep={goldDeep} />

        <div style={{ position: "relative", zIndex: 2, maxWidth: 720 }}>
          <div style={{
            display: "inline-flex", alignItems: "center", gap: 12,
            fontSize: 12, color: gold, fontWeight: 500, letterSpacing: "0.08em",
            padding: "8px 14px", border: `1px solid ${gold}44`,
            borderRadius: 999, background: `${gold}10`, marginBottom: 32,
          }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: gold,
                           boxShadow: `0 0 12px ${gold}` }} />
            HISTÓRIAS OSET · CASES REAIS
          </div>

          <h1 className="oset-h1" style={{
            fontSize: 68, lineHeight: 1.08, fontWeight: 700,
            letterSpacing: "-0.025em", margin: 0, color: fg,
            textWrap: "balance",
          }}>
            Histórias de quem<br/>
            <span style={{ color: gold }}>transformou tributos</span><br/>
            em caixa.
          </h1>

          <p className="oset-hero-sub" style={{
            fontSize: 19, lineHeight: 1.55, color: muted, marginTop: 28, maxWidth: 560,
          }}>
            Mais de <span style={{ color: fg, fontWeight: 600 }}>6 mil empresas</span> já
            recuperaram <span style={{ color: gold, fontWeight: 600 }}>R$ 600 milhões</span> em
            tributos pagos a mais. Veja, em primeira pessoa, como foi.
          </p>

          <div className="oset-hero-buttons" style={{ display: "flex", gap: 12, marginTop: 40, alignItems: "center" }}>
            <a href={wa} target="_blank" rel="noopener noreferrer" style={{
              background: gold, color: "#0a0a0a",
              padding: "16px 28px", borderRadius: 999,
              fontSize: 14, fontWeight: 600, letterSpacing: "0.04em",
              textTransform: "uppercase",
              boxShadow: `0 12px 32px -10px ${gold}77`,
              textDecoration: "none", cursor: "pointer",
            }}>
              Quero ser o próximo →
            </a>
            <a href="#depoimentos" style={{
              color: fg, fontSize: 14, padding: "16px 22px",
              border: `1px solid rgba(255,255,255,0.12)`, borderRadius: 999,
              textDecoration: "none", cursor: "pointer",
              display: "inline-flex", alignItems: "center", gap: 6,
            }}>
              Ver depoimentos ↓
            </a>
          </div>
        </div>

        {/* Métricas no canto inferior — igual ao site */}
        <div className="oset-metrics" style={{
          position: "relative", zIndex: 2, marginTop: 96,
          display: "grid", gridTemplateColumns: "repeat(4, max-content)",
          gap: 64, paddingTop: 32,
          borderTop: `1px solid ${cardBorder}`,
        }}>
          {D.metrics.map((m, i) => (
            <div key={i}>
              <div style={{ fontSize: 44, fontWeight: 700, color: gold,
                            letterSpacing: "-0.02em", lineHeight: 1 }}>
                {m.value}
              </div>
              <div style={{ fontSize: 13, color: muted, marginTop: 8, fontWeight: 500 }}>
                {m.label}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* PILARES — cards igual ao site */}
      <section className="oset-section" style={{ padding: "100px 64px 80px" }}>
        <div style={{ marginBottom: 48, maxWidth: 720 }}>
          <div style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            fontSize: 12, color: gold, fontWeight: 600,
            letterSpacing: "0.16em", textTransform: "uppercase", marginBottom: 20,
          }}>
            <span style={{ width: 24, height: 1, background: gold }} />
            Por que confiam na OSET
          </div>
          <h2 className="oset-h2" style={{ fontSize: 42, fontWeight: 700, letterSpacing: "-0.02em",
                       margin: 0, lineHeight: 1.1, textWrap: "balance" }}>
            Quatro pilares que aparecem<br/>
            em <span style={{ color: gold }}>todas as histórias</span>.
          </h2>
        </div>

        <div className="oset-grid-4" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
          {D.pillars.map((p, i) => {
            const icons = [<IconShield key="s" />, <IconBolt key="b" />, <IconTag key="t" />, <IconCheck key="c" />];
            return (
              <div key={i} style={{
                background: card, border: `1px solid ${cardBorder}`, borderRadius: 12,
                padding: 28, display: "flex", flexDirection: "column", gap: 24, minHeight: 220,
              }}>
                <div style={{
                  width: 44, height: 44, borderRadius: 10, background: gold,
                  display: "flex", alignItems: "center", justifyContent: "center",
                  color: "#0a0a0a",
                }}>
                  {icons[i]}
                </div>
                <div>
                  <div style={{ fontSize: 19, fontWeight: 700, color: gold, marginBottom: 10,
                                letterSpacing: "-0.01em" }}>
                    {p.t}
                  </div>
                  <div style={{ fontSize: 13, color: muted, lineHeight: 1.55 }}>
                    {p.d}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </section>

      {/* PROMESSA-MESTRA — banner grande dourado */}
      <section className="oset-section" style={{
        padding: "100px 64px", position: "relative", overflow: "hidden",
        background: `linear-gradient(180deg, ${bg} 0%, #110d08 100%)`,
        borderTop: `1px solid ${cardBorder}`, borderBottom: `1px solid ${cardBorder}`,
      }}>
        <div style={{
          position: "absolute", inset: 0,
          background: `radial-gradient(ellipse 50% 70% at 50% 50%, ${gold}1c 0%, transparent 70%)`,
          pointerEvents: "none",
        }} />
        <div style={{ position: "relative", zIndex: 2, maxWidth: 1100, marginInline: "auto",
                      textAlign: "center" }}>
          <div style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            fontSize: 12, color: gold, fontWeight: 600,
            letterSpacing: "0.18em", textTransform: "uppercase", marginBottom: 32,
          }}>
            <span style={{ width: 24, height: 1, background: gold }} />
            A promessa que repete em todas as histórias
            <span style={{ width: 24, height: 1, background: gold }} />
          </div>
          <p className="oset-promise" style={{
            fontSize: 52, lineHeight: 1.15, fontWeight: 700, letterSpacing: "-0.025em",
            margin: 0, color: fg, textWrap: "balance",
          }}>
            A empresa <span style={{ color: gold }}>não paga nada</span> para começar.<br/>
            A OSET só recebe <span style={{ color: gold }}>quando houver resultado</span>.
          </p>
          <div style={{
            marginTop: 28, fontSize: 14, color: muted, letterSpacing: "0.04em",
          }}>
            Auditoria prévia gratuita · sob NDA · honorários só sobre o que efetivamente entrar
          </div>
        </div>
      </section>

      {/* DESTAQUE — 2 depoimentos featured grandes */}
      <FeaturedTestimonial t={D.testimonials[0]} gold={gold} fg={fg} muted={muted}
                           dim={dim} card={card} cardBorder={cardBorder} />
      <FeaturedTestimonial t={D.testimonials[6]} gold={gold} fg={fg} muted={muted}
                           dim={dim} card={card} cardBorder={cardBorder}
                           variant="reverse" />

      {/* GRID DE DEPOIMENTOS */}
      <section id="depoimentos" className="oset-section" style={{ padding: "80px 64px" }}>
        <div className="oset-grid-section-head" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end",
                      marginBottom: 48, gap: 32 }}>
          <div style={{ maxWidth: 760 }}>
            <div style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              fontSize: 12, color: gold, fontWeight: 600,
              letterSpacing: "0.16em", textTransform: "uppercase", marginBottom: 20,
            }}>
              <span style={{ width: 24, height: 1, background: gold }} />
              Histórias dos clientes
            </div>
            <h2 className="oset-h2" style={{ fontSize: 42, fontWeight: 700, letterSpacing: "-0.02em",
                         margin: 0, lineHeight: 1.1, textWrap: "balance" }}>
              Em primeira pessoa,<br/>
              quem já <span style={{ color: gold }}>recebeu de volta</span>.
            </h2>
          </div>
          <div style={{ fontSize: 13, color: muted, textAlign: "right" }}>
            Depoimentos coletados<br/>diretamente dos clientes
          </div>
        </div>

        <div className="oset-grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
          {[...D.testimonials.slice(1, 6), ...D.testimonials.slice(7)].map((t, i) => (
            <TestimonialCard key={i} t={t} gold={gold} fg={fg} muted={muted}
                             dim={dim} card={card} cardBorder={cardBorder} />
          ))}
        </div>
      </section>

      {/* QUEM ATENDE — representantes nominais */}
      <section className="oset-section" style={{
        padding: "100px 64px", background: card,
        borderTop: `1px solid ${cardBorder}`, borderBottom: `1px solid ${cardBorder}`,
      }}>
        <div className="oset-rep-grid" style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 64, alignItems: "center" }}>
          <div>
            <div style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              fontSize: 12, color: gold, fontWeight: 600,
              letterSpacing: "0.16em", textTransform: "uppercase", marginBottom: 20,
            }}>
              <span style={{ width: 24, height: 1, background: gold }} />
              Quem atende você
            </div>
            <h2 className="oset-h2" style={{ fontSize: 38, fontWeight: 700, letterSpacing: "-0.02em",
                         margin: 0, lineHeight: 1.1, textWrap: "balance" }}>
              Histórias com <span style={{ color: gold }}>nome e sobrenome</span>.
            </h2>
            <p style={{ fontSize: 15, color: muted, marginTop: 20, lineHeight: 1.6, maxWidth: 380 }}>
              Cada cliente OSET é acompanhado por um representante dedicado — quem
              orienta, executa e segue até a entrega final do crédito. Conheça
              <span style={{ color: fg, fontWeight: 600 }}> alguns </span>
              dos consultores que aparecem nesta página.
            </p>
          </div>

          <div className="oset-grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
            {[
              { name: "Marcell Wasman", role: "Representante OSET",
                photo: "assets/rep-marcell.jpg",
                cases: ["Aster Bike", "Fiets Bikes", "VR7 Cycles"] },
              { name: "Lorenzo Talhari", role: "Representante OSET",
                photo: "assets/rep-lorenzo.jpg",
                cases: ["Bar Besidel", "Clausli Hahn", "Marli Santos"] },
              { name: "Geraldo Sande", role: "Gerente de TI · Consultor Tributário",
                photo: "assets/rep-geraldo.jpg",
                cases: ["Marcos Kipper & Cia"] },
              { name: "Vinicius Schancosky", role: "Representante OSET",
                photo: "assets/rep-vinicius.jpg",
                cases: ["Pizzaria Via Napole", "Agroveterinária Sossego"] },
              { name: "Luiz Fernando Lima", role: "Consultor OSET",
                photo: "assets/rep-luiz.jpg",
                cases: ["Casa do Sorvete Artesanal", "Utilfarma"] },
              { name: "Wychyllim Silva", role: "Representante OSET",
                cases: ["Geni Brum da Rosa", "Loja Linda Laura", "Luginni Vino e Mangiare"] },
              { name: "Edison Minuzzi", role: "Representante OSET",
                photo: "assets/rep-edison.jpg",
                cases: ["Mercado Tradição", "Casa dos Radiadores", "Agroshop Vila Nova"] },
            ].map((r, i) => (
              <div key={i} style={{
                background: bg, border: `1px solid ${cardBorder}`, borderRadius: 12,
                padding: 24, display: "flex", flexDirection: "column", gap: 18, minHeight: 240,
              }}>
                {r.photo ? (
                  <div style={{
                    width: 64, height: 64, borderRadius: 999, overflow: "hidden",
                    border: `2px solid ${gold}`, flexShrink: 0,
                    boxShadow: `0 0 0 4px ${gold}1a`,
                  }}>
                    <img src={r.photo} alt={r.name}
                         style={{ width: "100%", height: "100%", objectFit: "cover",
                                  objectPosition: "center top" }} />
                  </div>
                ) : (
                  <div style={{
                    width: 56, height: 56, borderRadius: 999, background: gold,
                    color: "#0a0a0a", display: "flex", alignItems: "center", justifyContent: "center",
                    fontSize: 20, fontWeight: 700, letterSpacing: "0.02em",
                  }}>
                    {r.name.split(" ").map(n => n[0]).slice(0, 2).join("")}
                  </div>
                )}
                <div>
                  <div style={{ fontSize: 17, fontWeight: 700, color: fg, letterSpacing: "-0.005em" }}>
                    {r.name}
                  </div>
                  <div style={{ fontSize: 11, color: gold, marginTop: 4,
                                letterSpacing: "0.06em", textTransform: "uppercase", fontWeight: 600 }}>
                    {r.role}
                  </div>
                </div>
                <div style={{
                  marginTop: "auto", paddingTop: 16, borderTop: `1px solid ${cardBorder}`,
                  fontSize: 11, color: dim, letterSpacing: "0.04em",
                }}>
                  <div style={{ marginBottom: 6, color: muted, textTransform: "uppercase",
                                letterSpacing: "0.1em" }}>
                    Cases nesta página
                  </div>
                  <div style={{ color: fg, fontSize: 12, lineHeight: 1.5 }}>
                    {r.cases.join(" · ")}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Nota: equipe maior */}
        <div style={{
          marginTop: 48, paddingTop: 32, borderTop: `1px solid ${cardBorder}`,
          display: "flex", alignItems: "center", justifyContent: "center", gap: 20,
          flexWrap: "wrap",
        }}>
          {/* Stack de avatares anônimos */}
          <div style={{ display: "flex", alignItems: "center" }}>
            {[0, 1, 2, 3, 4, 5].map(i => (
              <div key={i} style={{
                width: 36, height: 36, borderRadius: 999,
                background: `linear-gradient(135deg, ${gold}33, ${gold}11)`,
                border: `2px solid ${card}`,
                marginLeft: i === 0 ? 0 : -10,
                display: "flex", alignItems: "center", justifyContent: "center",
                color: gold, fontSize: 11, fontWeight: 700,
              }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
                  <circle cx="12" cy="8" r="4" fill="currentColor" opacity="0.7"/>
                  <path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8" fill="currentColor" opacity="0.7"/>
                </svg>
              </div>
            ))}
            <div style={{
              width: 36, height: 36, borderRadius: 999,
              background: gold, color: "#0a0a0a",
              border: `2px solid ${card}`, marginLeft: -10,
              display: "flex", alignItems: "center", justifyContent: "center",
              fontSize: 11, fontWeight: 700,
            }}>
              +30
            </div>
          </div>
          <div style={{ fontSize: 14, color: muted, lineHeight: 1.5, maxWidth: 480 }}>
            <span style={{ color: fg, fontWeight: 600 }}>E mais dezenas de consultores </span>
            espalhados pelo Brasil — cada cliente OSET é atendido por um deles, do começo ao fim.
          </div>
        </div>
      </section>

      {/* TRUST STRIP */}
      <section className="oset-trust" style={{
        padding: "56px 64px", background: card,
        borderTop: `1px solid ${cardBorder}`, borderBottom: `1px solid ${cardBorder}`,
      }}>
        <div className="oset-trust-grid" style={{
          display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32, alignItems: "center",
        }}>
          {[
            { t: "Sob NDA", d: "Termo digital LGPD assinado antes da análise" },
            { t: "Auditoria 48h", d: "IA + cruzamento oficial de bases" },
            { t: "PIX no CNPJ", d: "Dinheiro entra direto, corrigido e atualizado" },
            { t: "Só no êxito", d: "Honorário só sobre o que efetivamente entrar" },
          ].map((b, i) => (
            <div key={i} style={{ display: "flex", gap: 16, alignItems: "flex-start" }}>
              <div style={{ width: 36, height: 36, borderRadius: 8, background: `${gold}1a`,
                            color: gold, display: "flex", alignItems: "center", justifyContent: "center",
                            fontSize: 16, fontWeight: 700, flexShrink: 0 }}>
                ✓
              </div>
              <div>
                <div style={{ fontSize: 15, fontWeight: 700, color: fg }}>{b.t}</div>
                <div style={{ fontSize: 12, color: muted, marginTop: 4, lineHeight: 1.45 }}>{b.d}</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* CTA FINAL */}
      <section className="oset-cta" style={{
        padding: "120px 64px", textAlign: "center", position: "relative", overflow: "hidden",
        background: `radial-gradient(ellipse 60% 80% at 50% 50%, ${gold}22 0%, transparent 70%), ${bg}`,
      }}>
        <div style={{ position: "relative", zIndex: 2, maxWidth: 880, marginInline: "auto" }}>
          <div style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            fontSize: 12, color: gold, fontWeight: 600,
            letterSpacing: "0.18em", textTransform: "uppercase", marginBottom: 28,
          }}>
            <span style={{ width: 24, height: 1, background: gold }} />
            Sua empresa pode ser a próxima
            <span style={{ width: 24, height: 1, background: gold }} />
          </div>
          <h2 className="oset-cta-h" style={{ fontSize: 64, fontWeight: 700, letterSpacing: "-0.025em",
                       margin: 0, lineHeight: 1.05, textWrap: "balance" }}>
            Descubra quanto a sua empresa<br/>
            <span style={{ color: gold }}>já pagou de imposto a mais</span>.
          </h2>
          <p style={{ fontSize: 17, color: muted, marginTop: 24, lineHeight: 1.6,
                      maxWidth: 560, marginInline: "auto" }}>
            Análise inicial gratuita, sob sigilo. Você só sabe o tamanho do crédito
            depois que a OSET coloca o caso na mesa.
          </p>
          <div className="oset-cta-buttons" style={{ marginTop: 40, display: "flex", gap: 12, justifyContent: "center" }}>
            <a href={wa} target="_blank" rel="noopener noreferrer" style={{
              background: gold, color: "#0a0a0a", padding: "18px 32px", borderRadius: 999,
              fontSize: 14, fontWeight: 700, letterSpacing: "0.04em", textTransform: "uppercase",
              boxShadow: `0 14px 40px -12px ${gold}88`,
              textDecoration: "none", cursor: "pointer",
            }}>
              Solicitar análise gratuita →
            </a>
            <a href={wa} target="_blank" rel="noopener noreferrer" style={{
              border: `1px solid rgba(255,255,255,0.16)`, color: fg,
              padding: "18px 32px", borderRadius: 999, fontSize: 14, fontWeight: 500,
              textDecoration: "none", cursor: "pointer",
              display: "inline-flex", alignItems: "center", gap: 8,
            }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                <path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.6.1l-.9 1.1c-.2.2-.3.2-.6.1-.3-.2-1.2-.5-2.4-1.5-.9-.8-1.5-1.8-1.6-2.1-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5l-.8-2c-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.5.1-.7.3-.3.3-1 1-1 2.4 0 1.4 1 2.8 1.2 3 .1.2 2 3.1 4.9 4.4.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.6-.1 1.7-.7 1.9-1.4.2-.7.2-1.3.2-1.4-.1-.1-.3-.2-.6-.3zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.4 1.3 4.9L2 22l5.3-1.4c1.4.8 3 1.2 4.7 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2zm0 18.2c-1.5 0-3-.4-4.3-1.2l-.3-.2-3.2.8.9-3.1-.2-.3c-.9-1.4-1.3-3-1.3-4.6 0-4.5 3.7-8.2 8.2-8.2 2.2 0 4.3.9 5.8 2.4 1.6 1.6 2.4 3.6 2.4 5.8.1 4.5-3.6 8.2-8 8.2z"/>
              </svg>
              Falar no WhatsApp
            </a>
          </div>
          <div style={{ marginTop: 28, fontSize: 12, color: dim, letterSpacing: "0.04em" }}>
            Sob NDA · resposta em 48h · pagamento só no êxito
          </div>
        </div>
      </section>

      <footer className="oset-footer" style={{
        padding: "32px 64px", borderTop: `1px solid ${cardBorder}`,
        display: "flex", justifyContent: "space-between", alignItems: "center",
        fontSize: 12, color: dim,
      }}>
        <span>© 2026 OSET Empresarial · Histórias OSET</span>
        <span style={{ color: "rgba(245,166,35,0.7)" }}>Recuperando para você, evoluindo com você.</span>
      </footer>
    </div>
  );
}

// ─── FEATURED TESTIMONIAL ────────────────────────────────────────────────
function FeaturedTestimonial({ t, gold, fg, muted, dim, card, cardBorder, variant }) {
  const reverse = variant === "reverse";
  // Pull a short pull-quote from the testimonial (first sentence ending in . ! or ?)
  const pull = (() => {
    const m = t.quote.match(/^[^.!?]+[.!?]/);
    return m ? m[0].replace(/[.!?]$/, "") : t.quote.slice(0, 80);
  })();
  return (
    <section className="oset-section" style={{
      padding: "80px 64px", borderTop: `1px solid ${cardBorder}`,
      background: reverse ? "#0a0a0a" : card,
    }}>
      <div className="oset-feat-grid" style={{ display: "grid",
                    gridTemplateColumns: reverse ? "2fr 1fr" : "1fr 2fr",
                    gap: 64, alignItems: "center" }}>
        {!reverse && (
          <FeaturedSide t={t} pull={pull} gold={gold} fg={fg} muted={muted} />
        )}

        <div style={{ position: "relative", order: reverse ? 1 : 2 }}>
          <div style={{
            position: "absolute", top: -32, left: -8,
            fontSize: 200, lineHeight: 0.6, color: gold, opacity: 0.18,
            fontFamily: "Georgia, serif", pointerEvents: "none",
          }}>"</div>
          <p className="oset-feat-q" style={{
            fontSize: 26, lineHeight: 1.45, fontWeight: 400, color: fg,
            margin: 0, letterSpacing: "-0.01em", position: "relative", zIndex: 1,
            textWrap: "balance",
          }}>
            {t.quote}
          </p>
          <div className="oset-feat-meta" style={{
            marginTop: 32, paddingTop: 20, borderTop: `1px solid ${cardBorder}`,
            display: "flex", justifyContent: "space-between", alignItems: "center",
            fontSize: 12, color: dim, letterSpacing: "0.04em",
          }}>
            <span>EM DESTAQUE · CASO REAL</span>
            <span>Atendido por <span style={{ color: gold }}>{t.rep}</span> · OSET</span>
          </div>
        </div>

        {reverse && (
          <FeaturedSide t={t} pull={pull} gold={gold} fg={fg} muted={muted} align="right" />
        )}
      </div>
    </section>
  );
}

function FeaturedSide({ t, pull, gold, fg, muted, align }) {
  return (
    <div style={{ textAlign: align === "right" ? "right" : "left" }}>
      <div style={{
        display: "inline-flex", alignItems: "center", gap: 8,
        fontSize: 12, color: gold, fontWeight: 600,
        letterSpacing: "0.16em", textTransform: "uppercase", marginBottom: 20,
      }}>
        {align !== "right" && <span style={{ width: 24, height: 1, background: gold }} />}
        Em destaque
        {align === "right" && <span style={{ width: 24, height: 1, background: gold }} />}
      </div>
      <h3 className="oset-feat-h" style={{ fontSize: 36, fontWeight: 700, letterSpacing: "-0.02em",
                   margin: 0, lineHeight: 1.05, textWrap: "balance" }}>
        "<span style={{ color: gold }}>{pull}</span>."
      </h3>

      <div style={{ display: "flex", alignItems: "center", gap: 14, marginTop: 32,
                    justifyContent: align === "right" ? "flex-end" : "flex-start" }}>
        {align === "right" && (
          <div style={{ textAlign: "right" }}>
            <div style={{ fontSize: 16, fontWeight: 600, color: fg }}>{t.author}</div>
            <div style={{ fontSize: 13, color: muted }}>{t.company}</div>
          </div>
        )}
        <div style={{
          width: 56, height: 56, borderRadius: 999, background: gold,
          color: "#0a0a0a", display: "flex", alignItems: "center", justifyContent: "center",
          fontSize: 18, fontWeight: 700, letterSpacing: "0.02em", flexShrink: 0,
        }}>
          {t.author.split(" ").map(n => n[0]).slice(0, 2).join("")}
        </div>
        {align !== "right" && (
          <div>
            <div style={{ fontSize: 16, fontWeight: 600, color: fg }}>{t.author}</div>
            <div style={{ fontSize: 13, color: muted }}>{t.company}</div>
          </div>
        )}
      </div>
    </div>
  );
}

// ─── TESTIMONIAL CARD ────────────────────────────────────────────────────
function TestimonialCard({ t, gold, fg, muted, dim, card, cardBorder }) {
  return (
    <article style={{
      background: card, border: `1px solid ${cardBorder}`, borderRadius: 12,
      padding: 28, display: "flex", flexDirection: "column", gap: 20, minHeight: 320,
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div style={{
          width: 36, height: 36, borderRadius: 8, background: gold,
          display: "flex", alignItems: "center", justifyContent: "center",
          color: "#0a0a0a", fontSize: 16, fontWeight: 700,
          fontFamily: "Georgia, serif",
        }}>"</div>
        <div style={{ display: "flex", gap: 2 }}>
          {[0, 1, 2, 3, 4].map(i => (
            <span key={i} style={{ color: gold, fontSize: 13 }}>★</span>
          ))}
        </div>
      </div>

      <p style={{
        fontSize: 14, lineHeight: 1.6, color: fg, margin: 0,
        letterSpacing: "-0.005em", fontWeight: 400,
      }}>
        {t.quote}
      </p>

      <div style={{
        marginTop: "auto", paddingTop: 20, borderTop: `1px solid ${cardBorder}`,
        display: "flex", alignItems: "center", gap: 12,
      }}>
        <div style={{
          width: 40, height: 40, borderRadius: 999, background: `${gold}1a`,
          color: gold, display: "flex", alignItems: "center", justifyContent: "center",
          fontSize: 13, fontWeight: 700, flexShrink: 0, border: `1px solid ${gold}33`,
        }}>
          {t.author.split(" ").map(n => n[0]).slice(0, 2).join("")}
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 13, fontWeight: 600, color: fg,
                        whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
            {t.author}
          </div>
          <div style={{ fontSize: 11, color: muted }}>{t.company}</div>
        </div>
        <div style={{ fontSize: 10, color: dim, letterSpacing: "0.06em",
                      textTransform: "uppercase", textAlign: "right" }}>
          via<br/><span style={{ color: gold }}>{t.rep}</span>
        </div>
      </div>
    </article>
  );
}

// ─── BRAZIL DOTS — mapa em pontos dourados luminosos ─────────────────────
function BrazilDots({ gold, goldDeep }) {
  // Sparse point cloud roughly shaped like Brazil, on the right side of hero.
  // Each dot has random size + opacity for a "constellation" look like the site.
  const pts = React.useMemo(() => {
    // Hand-picked coordinates approximating Brazil shape, in a 100x100 viewBox
    // (right half of the canvas)
    const seed = [
      [62, 14], [66, 16], [70, 14], [74, 18], [78, 20], [82, 24], [85, 30],
      [88, 36], [90, 44], [92, 52], [88, 58], [86, 64], [84, 72], [80, 78],
      [76, 84], [70, 88], [64, 86], [58, 82], [54, 76], [52, 68], [54, 60],
      [56, 52], [58, 44], [56, 36], [58, 28], [60, 20], [64, 22], [68, 22],
      [72, 26], [76, 30], [80, 36], [84, 42], [86, 50], [82, 56], [78, 60],
      [74, 64], [72, 70], [68, 76], [64, 74], [62, 66], [60, 58], [62, 50],
      [66, 42], [70, 38], [74, 44], [78, 50], [80, 64], [76, 72], [72, 80],
      [66, 80], [62, 78], [58, 70], [62, 56], [68, 52], [72, 54], [76, 58],
      [74, 36], [78, 42], [82, 48], [84, 56], [80, 70], [70, 30], [66, 32],
      [60, 30], [64, 38], [68, 46], [70, 60], [74, 76], [68, 84], [56, 64],
    ];
    return seed.map(([x, y], i) => ({
      x, y,
      r: 0.18 + (i % 5) * 0.12,
      o: 0.35 + ((i * 7) % 11) / 18,
    }));
  }, []);

  // Connecting lines (constellation feel)
  const lines = React.useMemo(() => {
    const ls = [];
    for (let i = 0; i < pts.length; i++) {
      for (let j = i + 1; j < pts.length; j++) {
        const dx = pts[i].x - pts[j].x, dy = pts[i].y - pts[j].y;
        const d = Math.sqrt(dx * dx + dy * dy);
        if (d < 6.5) ls.push([pts[i], pts[j], d]);
      }
    }
    return ls;
  }, [pts]);

  return (
    <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice"
         style={{ position: "absolute", inset: 0, width: "100%", height: "100%",
                  pointerEvents: "none", opacity: 1 }}>
      <defs>
        <radialGradient id="hg" cx="72%" cy="48%" r="42%">
          <stop offset="0%" stopColor={gold} stopOpacity="0.32" />
          <stop offset="60%" stopColor={gold} stopOpacity="0.08" />
          <stop offset="100%" stopColor={gold} stopOpacity="0" />
        </radialGradient>
      </defs>
      <rect width="100" height="100" fill="url(#hg)" />
      {lines.map(([a, b, d], i) => (
        <line key={i} x1={a.x} y1={a.y} x2={b.x} y2={b.y}
              stroke={gold} strokeWidth="0.06"
              strokeOpacity={Math.max(0.08, 0.32 - d * 0.04)} />
      ))}
      {pts.map((p, i) => {
        const dur = 3 + (i % 5) * 0.7;
        const delay = (i % 7) * 0.4;
        return (
          <circle key={i} className="oset-twinkle"
                  cx={p.x} cy={p.y} r={p.r} fill={gold} opacity={p.o}
                  style={{ animationDuration: `${dur}s`, animationDelay: `${delay}s` }} />
        );
      })}
    </svg>
  );
}

// ─── ICONS (24x24, stroke based, parecidos com os do site) ───────────────
function IconShield() {
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z" />
      <path d="M9 12l2 2 4-4" />
    </svg>
  );
}
function IconBolt() {
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor">
      <path d="M13 2L4 14h6l-1 8 9-12h-6l1-8z" />
    </svg>
  );
}
function IconTag() {
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 12l9-9 9 9-9 9-9-9z" />
      <circle cx="12" cy="9" r="1.5" fill="currentColor" stroke="none" />
    </svg>
  );
}
function IconCheck() {
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="9" />
      <path d="M8 12l3 3 5-6" />
    </svg>
  );
}

window.OsetLP = OsetLP;