/* Para quem · Diferencial · Serviços */

const MOMENTOS = [
  { n: "01", dot: "var(--cheer-yellow)", t: "Sua marca cresceu no improviso",
    d: "O negócio está validado, o faturamento é real. Mas a marca nunca foi pensada estrategicamente, ela foi acontecendo. A imagem não representa o que você entrega." },
  { n: "02", dot: "var(--cheer-lilac)", t: "Você tem visual. Falta a alma.",
    d: "Identidade visual existe, feita por designer, agência ou IA. Mas não tem posicionamento, narrativa ou estratégia por trás. Marca bonita que não funciona." },
  { n: "03", dot: "var(--cheer-cyan)", t: "Já contratou agência. E não se sentiu ouvido.",
    d: "Entregaram peças, mas nunca entenderam o negócio. Você era mais um na carteira. Saiu com arquivos no Figma e sem clareza estratégica." },
];

function ParaQuem() {
  const { Card } = window.CheerDesignSystem_4677f5;
  return (
    <section className="sec band-soft" id="para-quem">
      <div className="wrap">
        <div className="sec__head reveal">
          <div className="eyebrow"><span className="eyebrow__rule"></span>Para quem é</div>
          <h2 className="h-section">você está no momento certo<br />se reconhece um destes</h2>
        </div>
        <div className="momentos">
          {MOMENTOS.map((m, i) => (
            <Card key={m.n} className={"momento reveal d" + (i + 1)} padded>
              <div className="momento__num" style={{ "--dot": m.dot }}>{m.n}</div>
              <h3 className="momento__title">{m.t}</h3>
              <p className="momento__desc">{m.d}</p>
            </Card>
          ))}
        </div>

        <div className="pullquote reveal" style={{ background: "var(--surface-card)", border: "1.5px solid var(--border-subtle)", borderRadius: "var(--radius-xl)", boxShadow: "var(--shadow-sm)", marginTop: "32px" }}>
          <p className="pullquote__text">
            “Não usamos faturamento como critério. Um consultor solo faturando R$400k/ano
            pode ser o cliente perfeito. Uma empresa de R$5M que quer só um <b>logo barato</b>,
            não. O filtro é mentalidade, não tamanho.”
          </p>
          <div className="pullquote__by">
            <div className="n">Patricia Ilhôa</div>
            <div className="r">Fundadora · cheer design</div>
          </div>
        </div>
      </div>
    </section>
  );
}

const PILLARS = [
  { ico: "User", tint: "var(--cheer-yellow-soft)", ink: "var(--cheer-yellow-deep)",
    label: "Acesso direto", t: "Você fala com a Patricia. Sempre.",
    d: "Não existe equipe intermediária. Nenhuma estratégia se perde entre quem pensa e quem executa. A mesma mente da reunião é a que entrega o trabalho." },
  { ico: "Brain", tint: "var(--cheer-lilac-soft)", ink: "var(--cheer-lilac-deep)",
    label: "Raiz científica", t: "Neurociência como fundação do método",
    d: "Cada decisão de marca é informada por como o cérebro percebe, memoriza e decide. Não é diferencial de portfólio, é diferencial de método." },
  { ico: "Trend", tint: "var(--cheer-cyan-soft)", ink: "var(--cheer-cyan-deep)",
    label: "Estratégia que sai do papel", t: "Do posicionamento ao post de amanhã",
    d: "Não entregamos um documento bonito e sumimos. Construímos a estratégia e executamos, com o mesmo cuidado em cada etapa." },
];

function Diferencial() {
  return (
    <section className="sec" id="diferencial">
      <div className="wrap">
        <div className="dif dif--top">
          <div className="dif__visual reveal">
            <div className="dif__frame" data-parallax="0.06">
              <img className="dif__photo" src="assets/patricia.png" alt="Patricia Ilhôa, fundadora do Estúdio Cheer Design" />
            </div>
            <div className="dif__accent" data-parallax="0.14"></div>
            <div className="dif__sig">
              <div className="bar"></div>
              <div className="dif__sig-name">Patricia Ilhôa</div>
              <div className="dif__sig-role">Fundadora · Estrategista de marca</div>
            </div>
          </div>

          <div className="dif__content">
            <div className="sec__head reveal" style={{ marginBottom: "8px" }}>
              <div className="eyebrow"><span className="eyebrow__rule"></span>O estúdio</div>
              <h2 className="h-section">marca e estratégia à altura<br />de quem já entrega resultado</h2>
            </div>
            <div className="dif__bio reveal d1">
              <p>O Estúdio Cheer Design nasceu da observação de um padrão que <b>Patricia Ilhôa</b> viu
                se repetir: empresários com negócios sérios, entregas impecáveis, mas frustrados com
                marcas que não representavam nada disso e estratégias que não davam resultados.</p>
              <p>Com raiz em <span className="swipe">neurociência</span> e comportamento humano, o estúdio
                constrói marcas e estratégias para empresários que já entregam resultado e precisam
                demonstrar isso à altura.</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Diferenciais() {
  return (
    <section className="sec" id="diferenciais">
      <div className="wrap">
        <div className="sec__head sec__head--center reveal">
          <div className="eyebrow"><span className="eyebrow__rule"></span>Por que o cheer design</div>
          <h2 className="h-section">três diferenciais que<br />nenhuma grande agência entrega</h2>
        </div>
        <div className="dif-grid">
          {PILLARS.map((p, i) => {
            const I = window.Icon[p.ico];
            return (
              <div key={p.label} className={"dif-card reveal d" + (i + 1)}>
                <div className="pillar__ico" style={{ "--tint": p.tint, "--ink": p.ink }}><I /></div>
                <div className="pillar__label" style={{ "--ink": p.ink }}>{p.label}</div>
                <h3 className="pillar__title">{p.t}</h3>
                <p className="pillar__desc">{p.d}</p>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

const SERVICOS_MOVED = true;

Object.assign(window, { ParaQuem, Diferencial, Diferenciais });