/* Sections A: Nav, Hero, Value Prop, CTA mid, Pain */
const { useEffect, useRef, useState } = React;

function BrandLockup({ small = false }) {
  const h = small ? 28 : 36;
  return (
    <a className="brand" href="#" aria-label="Empória Branding">
      <img
        src="assets/emporia-logo.png"
        alt="Empória Branding"
        className="brand-logo"
        style={{ height: h, width: "auto", display: "block" }} />
      
    </a>);

}

function Nav({ accent }) {
  return (
    <header className="nav">
      <div className="shell nav-inner">
        <BrandLockup />
        <nav className="nav-links">
          <a href="#frentes">Serviços</a>
          <a href="#prova">Cases</a>
          <a href="#faq">FAQ</a>
          <a href="#contato">Contato</a>
        </nav>
        <a href="#contato" className="btn btn-primary nav-cta" style={{ background: accent }}>
          Quero conversar
          <span className="arr"><I.Arrow size={11} /></span>
        </a>
      </div>
    </header>);

}

function Hero({ accent }) {
  return (
    <section className="hero">
      <div className="plus-bg" />
      <div className="shell">
        <div className="hero-grid">
          <div>
            <div className="eyebrow">Para empresas que já não cabem em pedaços soltos</div>
            <h1 className="display hero-headline tight" style={{ marginTop: 26 }}>
              Sua marca fala <span className="stroke">três línguas diferentes.</span><br />
              E <span className="red" style={{ color: accent }}>nenhuma vende.</span>
            </h1>
            <p className="lede hero-sub">
              Estratégia, identidade, social, embalagem, vídeo, site, catálogo e sinalização. Uma estrutura única, uma direção só, uma marca coerente do briefing à prateleira.
            </p>
            <div className="hero-actions">
              <a href="#contato" className="btn btn-primary" style={{ background: accent }}>
                Quero uma marca coerente
                <span className="arr"><I.Arrow size={11} /></span>
              </a>
            </div>
            <div className="hero-meta">
              <div className="hero-meta-item">
                <div className="k">Atuação</div>
                <div className="v">10 anos</div>
              </div>
              <div className="hero-meta-item">
                <div className="k">Marcas atendidas</div>
                <div className="v">+400</div>
              </div>
              <div className="hero-meta-item">
                <div className="k">Setores</div>
                <div className="v">Construção · Indústria · Serviços</div>
              </div>
            </div>
          </div>

          <HeroCanvas accent={accent} />
        </div>
      </div>
    </section>);

}

function HeroCanvas({ accent }) {
  // five pieces placed at fixed % coords; lines connect them through a center node
  const pieces = [
  { id: 1, cls: "piece piece-1", meta: "01 / Social", red: false, tag: "post · feed" },
  { id: 2, cls: "piece piece-2", meta: "02 / Embalagem", red: true, tag: "rótulo · caixa" },
  { id: 3, cls: "piece piece-3", meta: "03 / Site", red: false, tag: "home · produto" },
  { id: 4, cls: "piece piece-4", meta: "04 / Catálogo", red: false, tag: "linha 2026" },
  { id: 5, cls: "piece piece-5", meta: "05 / Vídeo", red: true, tag: "institucional" }];

  return (
    <div className="hero-canvas">
      <div className="canvas-bg" />
      <svg className="lines" viewBox="0 0 100 100" preserveAspectRatio="none">
        <path className="line-path" d="M 25 16 Q 50 35, 50 50" style={{ stroke: accent, animationDelay: "0.3s" }} />
        <path className="line-path" d="M 78 27 Q 60 40, 50 50" style={{ stroke: accent, animationDelay: "0.5s" }} />
        <path className="line-path" d="M 19 56 Q 35 55, 50 50" style={{ stroke: accent, animationDelay: "0.7s" }} />
        <path className="line-path" d="M 81 64 Q 65 58, 50 50" style={{ stroke: accent, animationDelay: "0.9s" }} />
        <path className="line-path" d="M 50 89 Q 50 70, 50 50" style={{ stroke: accent, animationDelay: "1.1s" }} />
        <circle className="node-dot" cx="50" cy="50" r="5" style={{ fill: accent }} />
      </svg>
      {pieces.map((p) =>
      <div key={p.id} className={p.cls}>
          <div className="pmeta">{p.meta}</div>
          <div className={"pbody" + (p.red ? " red" : "")} />
          <div className="ptag">{p.tag}</div>
        </div>
      )}
    </div>);

}

function ValueProp({ accent }) {
  return (
    <section className="value-prop section-pad reveal">
      <div className="shell value-prop-grid">
        <div>
          <div className="eyebrow">Por que isso importa</div>
        </div>
        <div>
          <p>
            Quem fatura acima de sete dígitos por ano raramente tem um problema de orçamento. Tem um problema de <span className="em" style={{ color: accent }}>direção</span>.
          </p>
          <p>
            O designer entrega um post bonito. A agência de vídeo entrega um filme bonito. A gráfica entrega uma embalagem bonita. E mesmo assim, vistos lado a lado, parecem três empresas diferentes vendendo o mesmo produto.
          </p>
          <p>
            Marketing fragmentado não é falta de talento, é falta de comando. Cada fornecedor toma cinco micro-decisões por semana, e nenhuma delas conversa com as outras.
          </p>
          <p>
            A Empória existe para ocupar exatamente esse vazio: o lugar entre o que sua empresa <span className="em" style={{ color: accent }}>é</span> e o que ela <span className="em" style={{ color: accent }}>aparenta ser</span> em cada ponto de contato.
          </p>
        </div>
      </div>
    </section>);

}

function CtaMid({ accent, label = "Falar com um estrategista da Empória", tight = false }) {
  const tightStyle = tight ? { paddingTop: "clamp(20px, 3vw, 36px)", paddingBottom: "clamp(20px, 3vw, 36px)" } : null;
  return (
    <section className="section-pad-sm reveal" style={tightStyle}>
      <div className="shell" style={{ textAlign: "center" }}>
        <a href="#contato" className="btn btn-primary" style={{ background: accent }}>
          {label}
          <span className="arr"><I.Arrow size={11} /></span>
        </a>
      </div>
    </section>);

}

function Pain({ accent }) {
  const items = [
  "Cada peça parece feita por uma empresa diferente, porque foi.",
  "Você gasta mais tempo briefando do que faturando, repetindo o posicionamento para o quinto fornecedor.",
  "A logo nova nunca chega na embalagem. A embalagem nova nunca chega no site. O site novo nunca chega no Instagram.",
  "Toda quarta-feira tem uma reunião só para alinhar o que já deveria estar alinhado.",
  "A marca cresce em volume, mas perde em densidade, fica conhecida sem ficar memorável.",
  "Quando você pede 'algo no nosso estilo', ninguém sabe ao certo qual é o seu estilo."];

  return (
    <section className="section-pad reveal" id="dor">
      <div className="shell">
        <div className="pain-grid">
          <div>
            <div className="eyebrow">Sintomas do marketing fragmentado</div>
            <h2 className="display tight" style={{ fontSize: "clamp(36px, 5.2vw, 76px)", marginTop: 28, maxWidth: "12ch" }}>
              Você já reconhece esses sinais?
            </h2>
          </div>
          <div>
            <div className="pain-list">
              {items.map((t, i) =>
              <div className="pain-item" key={i}>
                  <div className="num">{String(i + 1).padStart(2, "0")}</div>
                  <div className="txt">{t}</div>
                </div>
              )}
            </div>
            <p className="pain-close">
              O problema nunca foi <span className="accent" style={{ color: accent }}>falta de fornecedor</span>. Foi falta de <span className="accent" style={{ color: accent }}>direção única</span>.
            </p>
          </div>
        </div>
      </div>
    </section>);

}

Object.assign(window, { Nav, Hero, ValueProp, CtaMid, Pain, BrandLockup });