/* Sections B: Solution (8 frentes), Benefits, Proof */
const { useEffect: useEffectB, useState: useStateB, useRef: useRefB } = React;

function Solution({ accent }) {
  const frentes = [
  { num: "01", name: "Estratégia", desc: "Posicionamento, narrativa, território.", Icon: I.Strategy },
  { num: "02", name: "Identidade", desc: "Sistema visual, logo, tipografia, cor.", Icon: I.Identity },
  { num: "03", name: "Social", desc: "Conteúdo, feed, story, performance.", Icon: I.Social },
  { num: "04", name: "Embalagem", desc: "Rótulo, caixa, expositor, gôndola.", Icon: I.Package },
  { num: "05", name: "Vídeo", desc: "Institucional, produto, social, motion.", Icon: I.Video },
  { num: "06", name: "Site", desc: "Institucional, captação, e-commerce.", Icon: I.Site },
  { num: "07", name: "Catálogo", desc: "Linhas, lançamentos, ficha técnica.", Icon: I.Catalog },
  { num: "08", name: "Sinalização", desc: "Fachada, ambiente, frota, ponto de venda.", Icon: I.Sign }];

  const [hovered, setHovered] = useStateB(null);

  return (
    <section className="solution section-pad reveal" id="frentes">
      <div className="shell">
        <div className="solution-intro">
          <div>
            <div className="eyebrow">A estrutura única</div>
          </div>
          <div>
            <h2 className="display" style={{ fontSize: "clamp(36px, 5vw, 72px)", maxWidth: "18ch" }}>
              Oito frentes <span className="red" style={{ color: accent }}>regidas por uma única direção.</span>
            </h2>
            <div style={{ marginTop: 32, maxWidth: "62ch" }}>
              <p>Em vez de cinco fornecedores tomando cinco mil microdecisões desconectadas, a Empória opera como uma diretoria de marca terceirizada, com um único time atravessando todos os pontos onde sua empresa aparece.</p>
              <p>A mesma cabeça que define o posicionamento é a que aprova o rótulo, escolhe a fotografia, edita o vídeo, ajusta o site. A coerência deixa de ser uma reunião de alinhamento e vira o ponto de partida.</p>
              <p>Não é tudo feito pela mesma pessoa. É tudo conduzido pela mesma direção.</p>
            </div>
          </div>
        </div>

        <div className="frentes">
          <div className="frentes-grid" onMouseLeave={() => setHovered(null)}>
            {frentes.map((f, i) => {
              const Ic = f.Icon;
              return (
                <div
                  className={"frente" + (hovered === i ? " active" : "")}
                  key={f.num}
                  onMouseEnter={() => setHovered(i)}>
                  
                  <div className="fnum">{f.num}</div>
                  <Ic className="ficon" style={{ color: accent }} />
                  <div className="fname">{f.name}</div>
                  <div className="fdesc">{f.desc}</div>
                </div>);

            })}
          </div>
        </div>

        <p className="frentes-close">
          Tudo conectado.<br />
          <span className="dim">Tudo coerente.</span><br />
          <span className="em">Tudo Empória.</span>
        </p>
      </div>
    </section>);

}

function Benefits({ accent }) {
  const items = [
  { Icon: I.Unify, title: "Uma direção, não cinco opiniões.", desc: "Toda decisão criativa atravessa o mesmo filtro estratégico." },
  { Icon: I.Compass, title: "Marca reconhecível em três segundos.", desc: "Coerência visual e verbal entre todos os pontos de contato." },
  { Icon: I.Bolt, title: "Velocidade sem retrabalho.", desc: "Cada peça nasce dentro de um sistema já aprovado pela liderança." },
  { Icon: I.Eye, title: "Densidade, não só volume.", desc: "Menos publicação dispersa, mais presença que constrói repertório." },
  { Icon: I.Time, title: "Seu tempo de volta.", desc: "Um interlocutor único substitui cinco WhatsApp e três reuniões semanais." },
  { Icon: I.Chart, title: "Performance ancorada em marca.", desc: "Tráfego pago que converte porque a percepção foi construída antes do clique." },
  { Icon: I.Shield, title: "Patrimônio, não despesa.", desc: "Marca tratada como ativo de longo prazo, com inventário e governança." }];


  return (
    <section className="section-pad reveal">
      <div className="shell">
        <div style={{ maxWidth: "60ch", marginBottom: 56 }}>
          <div className="eyebrow">O que muda na prática</div>
          <h2 className="display" style={{ fontSize: "clamp(32px, 4.6vw, 64px)", marginTop: 24 }}>
            Sete mudanças<br />concretas.
          </h2>
        </div>
      </div>
      <div className="shell">
        <div className="benefits-grid">
          {items.map((b, i) => {
            const Ic = b.Icon;
            return (
              <div className={"benefit" + (i === 6 ? " benefit-wide" : "")} key={i}>
                <Ic className="bicon" style={{ color: accent }} />
                <div className="btitle">{b.title}</div>
                <div className="bdesc">{b.desc}</div>
              </div>);

          })}
        </div>
      </div>
    </section>);

}

function Proof({ accent }) {
  const numbers = [
  { v: "10", sub: "anos", k: "no mercado" },
  { v: "+400", sub: "", k: "marcas atendidas" },
  { v: "+10 bi", sub: "", k: "faturamento sob direção" },
  { v: "08", sub: "", k: "setores cobertos" }];


  return (
    <section className="section-pad reveal" id="prova">
      <div className="shell" style={{ marginBottom: 64 }}>
        <div className="eyebrow">Prova</div>
        <h2 className="display" style={{ fontSize: "clamp(32px, 4.6vw, 64px)", marginTop: 24, maxWidth: "18ch" }}>
          Uma década dirigindo marcas que não cabiam em pedaços.
        </h2>
      </div>

      <div className="shell">
        <div className="proof-numbers">
          {numbers.map((n, i) =>
          <div className="proof-num" key={i}>
              <div className="v">{n.v}{n.sub && <span className="sub"> {n.sub}</span>}</div>
              <div className="k">{n.k}</div>
            </div>
          )}
        </div>
      </div>

      <div className="shell" style={{ marginTop: 64 }}>
        <div className="eyebrow" style={{ marginBottom: 24 }}>
          Algumas marcas dirigidas pela Empória
        </div>
        <div className="logos-grid">
          {[
          { type: "img", src: "assets/logos/camilo-ghisi.png", alt: "Camilo Ghisi", maxH: "32%" },
          { type: "img", src: "assets/logos/sicoob-credivale.png", alt: "Sicoob Credivale", maxH: "70%" },
          { type: "img", src: "assets/logos/anjo.png", alt: "Anjo Tintas", maxH: "62%" },
          { type: "img", src: "assets/logos/refisa.png", alt: "Refisa", maxH: "50%" },
          { type: "img", src: "assets/logos/reve.png", alt: "Revê Empreendimentos", maxH: "58%" },
          { type: "img", src: "assets/logos/betha.png", alt: "Betha", maxH: "44%" }].
          map((item, i) =>
          <div className="logo-cell" key={i}>
              {item.type === "img" ?
                <img src={item.src} alt={item.alt} className="logo-img" style={{ maxHeight: item.maxH || "60%" }} /> :
                <PlaceholderLogo name={item.name} />}
            </div>
          )}
        </div>
      </div>
    </section>);

}

function PlaceholderLogo({ name }) {
  return (
    <span style={{
      color: "var(--fg-soft)",
      fontFamily: "var(--font-display)",
      fontWeight: 800,
      fontSize: 17,
      letterSpacing: "0.04em",
      textTransform: "uppercase",
      opacity: 0.88
    }}>{name}</span>);

}

function Testimonials({ accent }) {
  const items = [
  {
    quote: "Antes da Empória, eu tinha cinco fornecedores e nenhuma marca. Hoje tenho uma marca e nenhum fornecedor para gerenciar.",
    name: "Nome do Cliente",
    role: "Diretor de Marketing, [Empresa]"
  },
  {
    quote: "Pela primeira vez em dez anos, a embalagem, o catálogo e o site da nossa empresa parecem ter sido feitos pelo mesmo time. Porque finalmente foram.",
    name: "Nome do Cliente",
    role: "CEO, [Empresa]"
  },
  {
    quote: "A Empória não substituiu minha equipe. Substituiu a confusão entre eles.",
    name: "Nome do Cliente",
    role: "Sócia-Diretora, [Empresa]"
  }];


  return (
    <div>
      <div className="eyebrow" style={{ marginBottom: 24 }}>
        Depoimentos
      </div>
      <div className="testimonials">
        {items.map((t, i) =>
        <div className="testi" key={i}>
            <div className="placeholder-tag">PLACEHOLDER</div>
            <div className="quote">“{t.quote}”</div>
            <div className="author">
              <div className="avatar">FT</div>
              <div className="who">
                <div className="name">{t.name}</div>
                <div className="role">{t.role}</div>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>);

}

Object.assign(window, { Solution, Benefits, Proof });