/* Sections C: Oferta, Objeções, Garantia, Custo da Inação, FAQ */

function Oferta({ accent }) {
  const items = [
  "Uma conversa de 45 minutos com um estrategista sênior da Empória, sem script nem pitch.",
  "Um bate-papo direto, no seu ritmo, sobre como sua marca aparece hoje em cada ponto de contato.",
  "Identificação em tempo real dos gargalos da sua operação de marca, o que está duplicado, o que falta, o que desalinha.",
  "Espaço para perguntar qualquer coisa antes de qualquer compromisso.",
  "Acesso direto à liderança da Empória, sem intermediário."];


  return (
    <section className="oferta section-pad reveal">
      <div className="shell">
        <div className="oferta-grid">
          <div>
            <div className="eyebrow">O que acontece quando você se cadastra</div>
            <h2 className="display" style={{ fontSize: "clamp(32px, 4vw, 56px)", marginTop: 24, maxWidth: "16ch" }}>
              Um bate-papo, zero compromisso.
            </h2>
          </div>
          <div>
            <div className="oferta-list">
              {items.map((t, i) =>
              <div className="oferta-item" key={i}>
                  <div className="check" style={{ background: accent }}><I.Check size={14} /></div>
                  <div className="txt">{t}</div>
                </div>
              )}
            </div>
            <p className="oferta-close">
              Sem fórmula engessada.<br />
              <span style={{ color: accent }}>Sem cobrança pelo primeiro contato.</span>
            </p>
          </div>
        </div>
      </div>
    </section>);

}

function Accordion({ items, kind = "faq" }) {
  const [open, setOpen] = React.useState(0);
  return (
    <div className="acc">
      {items.map((it, i) =>
      <div className={"acc-item" + (open === i ? " open" : "")} key={i}>
          <button
          className={"acc-q" + (kind === "objection" ? " objection" : "")}
          onClick={() => setOpen(open === i ? -1 : i)}
          aria-expanded={open === i}>
          
            <span className="qtext">{it.q}</span>
            <span className="qmark"><I.Plus size={14} /></span>
          </button>
          <div className="acc-a">
            <div className="acc-a-inner">{it.a}</div>
          </div>
        </div>
      )}
    </div>);

}

function Objections({ accent }) {
  const items = [
  {
    q: "Já tenho equipe interna de marketing.",
    a: "A Empória não substitui sua equipe. Dirige. Atuamos como o vértice estratégico que falta entre o que sua liderança quer e o que cada executor entrega. Sua equipe ganha clareza, não concorrência."
  },
  {
    q: "Tenho fornecedores que já conheço há anos.",
    a: "Ótimo. A coerência não exige troca de fornecedores, exige uma única direção para todos eles. Quando faz sentido, mantemos sua cadeia atual e assumimos a direção criativa transversal."
  },
  {
    q: "Não sei se branding gera retorno mensurável.",
    a: "Branding sem performance é estética. Performance sem branding é desperdício. A Empória trabalha os dois eixos no mesmo plano: cada peça é desenhada para construir percepção e converter."
  },
  {
    q: "Vocês são caros?",
    a: "Somos caros para quem precisa de um post. Somos baratos para quem precisa de uma marca. O primeiro diagnóstico é gratuito, e depois dele fica óbvio em qual dos dois lados sua empresa está."
  },
  {
    q: "Não estou pronto para um projeto grande agora.",
    a: "Por isso o ponto de partida é uma conversa, não um contrato. Você sai do primeiro encontro com um diagnóstico em mãos, independente de seguir adiante com a Empória ou não."
  }];

  return (
    <section className="section-pad reveal" id="objecoes">
      <div className="shell" style={{ marginBottom: 40 }}>
        <div className="eyebrow">O que costumam dizer antes de começar</div>
        <h2 className="display" style={{ fontSize: "clamp(32px, 4.6vw, 64px)", marginTop: 24, maxWidth: "20ch" }}>
          Cinco frases que ouvimos na primeira reunião.
        </h2>
      </div>
      <div className="shell">
        <Accordion items={items} kind="objection" />
      </div>
    </section>);

}

function Garantia() {
  return null;
}

function Custo({ accent }) {
  const items = [
  "Cada trimestre sem direção única é mais um trimestre construindo reconhecimento sem construir reputação.",
  "A marca que poderia ser percebida como referência continua sendo percebida como mais uma, e o preço que você consegue cobrar reflete isso.",
  "Os fornecedores seguem entregando peças bonitas e a soma delas segue parecendo menor do que cada uma individualmente."];

  return (
    <section className="section-pad reveal">
      <div className="shell">
        <div className="eyebrow">O custo de continuar como está</div>
        <h2 className="display" style={{ fontSize: "clamp(32px, 4.6vw, 64px)", marginTop: 24, maxWidth: "20ch" }}>
          O preço de não decidir é mais alto do que parece.
        </h2>

        <div className="custo-list" style={{ marginTop: 56 }}>
          {items.map((t, i) =>
          <div className="custo-item" key={i}>
              <div className="num" style={{ color: accent }}>{String(i + 1).padStart(2, "0")}</div>
              <div className="txt">{t}</div>
            </div>
          )}
        </div>

        <p className="custo-close">
          O concorrente que decidiu primeiro <span className="em" style={{ color: accent }}>já está três trimestres à frente.</span>
        </p>
      </div>
    </section>);

}

function FAQ({ accent }) {
  const items = [
  { q: "Em que momento da empresa faz sentido procurar a Empória?",
    a: "Quando o volume de pontos de contato da marca já cresceu além do que uma única cabeça interna consegue alinhar. Tipicamente: faturamento acima de R$ 2 MM/ano, mais de três fornecedores criativos em paralelo, expansão de portfólio ou entrada em novos canais." },
  { q: "Vocês atendem empresas de quais setores?",
    a: "Concentramos atuação em construção, indústria e serviços B2B, segmentos onde a marca precisa atravessar showroom, embalagem, catálogo técnico, ponto de venda e canal digital ao mesmo tempo. Avaliamos outros setores caso a caso." },
  { q: "Como funciona o engajamento?",
    a: "Trabalhamos em ciclos de direção criativa contínua, não em projetos isolados. Há um time fixo da Empória atribuído à sua marca e um ritual semanal de governança com a liderança da empresa." },
  { q: "Vocês substituem agências e freelancers atuais?",
    a: "Nem sempre. Em boa parte dos casos, dirigimos a cadeia existente. O time da Empória entra como diretoria criativa transversal, e os parceiros atuais continuam executando dentro de uma estrutura mais clara." },
  { q: "Como vocês mensuram resultado?",
    a: "Três planos: consistência (peças produzidas dentro do sistema), reconhecimento (recall, brand search, tráfego direto) e performance (CPL, CAC, taxa de conversão). Tudo reportado mensalmente." },
  { q: "Posso terminar o contrato a qualquer momento?",
    a: "Sim. Não trabalhamos com contrato de fidelidade. Você encerra quando fizer sentido para a sua operação, sem multa e sem letra miúda. Acreditamos que retenção tem que vir do valor entregue." }];


  return (
    <section className="section-pad reveal" id="faq">
      <div className="shell" style={{ marginBottom: 32 }}>
        <div className="eyebrow">Perguntas frequentes</div>
        <h2 className="display" style={{ fontSize: "clamp(32px, 4.6vw, 64px)", marginTop: 24, maxWidth: "18ch" }}>
          Antes de você perguntar.
        </h2>
      </div>
      <div className="shell">
        <Accordion items={items} kind="faq" />
      </div>
    </section>);

}

Object.assign(window, { Oferta, Objections, Garantia, Custo, FAQ });