// ============================================
// SECTIONS: UI Kit (Buttons, Inputs, Cards, Pills)
// ============================================

function UIKitSection() {
  return (
    <section className="section paper-tex" data-screen-label="10 Componentes" id="componentes">
      <div className="section-num">10 · Sistema</div>
      <h2 className="section-title">Componentes de interface</h2>
      <p className="section-lede">
        UI kit para menu digital, site, pedidos e painéis internos. Botões, campos, cards e
        etiquetas — traduzindo a alma de balcão para a tela.
      </p>

      {/* Buttons */}
      <div className="showcase">
        <div className="showcase-header">
          <div className="showcase-title">Botões</div>
          <div className="showcase-meta">5 variações · 3 tamanhos</div>
        </div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 12, marginBottom: 20 }}>
          <button className="btn btn-primary">Fazer pedido</button>
          <button className="btn btn-gold">Ver o chopp do dia</button>
          <button className="btn btn-bordeaux">Reservar mesa</button>
          <button className="btn btn-outline">Ver cardápio</button>
          <button className="btn btn-ghost">Voltar</button>
        </div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 12, alignItems: "center" }}>
          <button className="btn btn-primary" style={{ padding: "8px 14px", fontSize: 12 }}>Pequeno</button>
          <button className="btn btn-primary">Médio</button>
          <button className="btn btn-primary" style={{ padding: "16px 28px", fontSize: 16 }}>Grande</button>
        </div>
      </div>

      {/* Inputs */}
      <div className="showcase">
        <div className="showcase-header">
          <div className="showcase-title">Campos</div>
          <div className="showcase-meta">Formulário · Reserva</div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, maxWidth: 640 }}>
          <div>
            <label className="field-label">Nome completo</label>
            <input className="input" defaultValue="Mário Junior" />
          </div>
          <div>
            <label className="field-label">Telefone</label>
            <input className="input" placeholder="(34) —" />
          </div>
          <div>
            <label className="field-label">Data</label>
            <input className="input" defaultValue="23 · Abr · 2026" />
          </div>
          <div>
            <label className="field-label">Pessoas</label>
            <input className="input" defaultValue="4" />
          </div>
        </div>
      </div>

      {/* Pills */}
      <div className="showcase">
        <div className="showcase-header">
          <div className="showcase-title">Etiquetas</div>
          <div className="showcase-meta">Badges · Status</div>
        </div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
          <span className="pill pill-solid">Novo</span>
          <span className="pill pill-gold">Recomendado</span>
          <span className="pill pill-bordeaux">Esgotado</span>
          <span className="pill pill-outline">Desde 1996</span>
          <span className="pill pill-outline">Sem glúten</span>
          <span className="pill pill-gold">Chopp do dia</span>
        </div>
      </div>

      {/* Cards */}
      <div className="showcase" style={{ background: "var(--creme)" }}>
        <div className="showcase-header">
          <div className="showcase-title">Cards de cardápio</div>
          <div className="showcase-meta">Menu digital</div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 20 }}>
          {[
            { kicker: "Chopp · Claro", title: "Pilsen tradicional", price: "R$ 14,00", desc: "Servido em tulipa gelada, três dedos de colarinho cremoso." },
            { kicker: "Petiscos", title: "Bolinho de bacalhau", price: "R$ 48,00", desc: "Receita da casa. Servido em porção de 8 unidades, com limão." },
            { kicker: "Prato", title: "Picanha na chapa", price: "R$ 94,00", desc: "Acompanha arroz, vinagrete, farofa e batata rústica." },
          ].map(c => (
            <div key={c.title} className="card">
              <div className="card-img ph" style={{ margin: 0, border: "none" }}>Foto · {c.title}</div>
              <div className="card-body">
                <div className="card-kicker">{c.kicker}</div>
                <h4 className="card-title">{c.title}</h4>
                <p className="card-body-text">{c.desc}</p>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <span style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 22, color: "var(--bordo)" }}>{c.price}</span>
                  <button className="btn btn-gold" style={{ padding: "6px 14px", fontSize: 12 }}>+ Pedir</button>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Iconografia / Ornamentos */}
      <div className="showcase">
        <div className="showcase-header">
          <div className="showcase-title">Ornamentos & ritmo</div>
          <div className="showcase-meta">Filetes, dots, stamp</div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 32, alignItems: "center" }}>
          <div style={{ textAlign: "center" }}>
            <OrnamentalDivider width={180} />
            <div className="eyebrow" style={{ marginTop: 12 }}>Divisor ornamental</div>
          </div>
          <div style={{ textAlign: "center" }}>
            <div className="fillet" style={{ width: 180, margin: "0 auto" }} />
            <div className="eyebrow" style={{ marginTop: 12 }}>Filete dotted</div>
          </div>
          <div style={{ display: "flex", justifyContent: "center" }}>
            <div className="beer-glass" />
          </div>
        </div>
      </div>
    </section>
  );
}

function VoiceSection() {
  return (
    <section className="section" data-screen-label="11 Voz" id="voz" style={{ background: "var(--bg-alt)" }}>
      <div className="section-num">11 · Sistema</div>
      <h2 className="section-title">Voz & tom</h2>
      <p className="section-lede">
        Falamos como quem serve à mesa: próximo, honesto, sem enfeite desnecessário.
        Tradicional, mas sem tédio. Boêmio, mas de família.
      </p>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 1, background: "var(--rule)", border: "1px solid var(--rule)", marginBottom: 48 }}>
        {[
          { word: "Acolhedor", desc: "Como quem recebe em casa." },
          { word: "Honesto", desc: "Produto bom, do jeito certo." },
          { word: "Boêmio", desc: "Alma de bar tradicional." },
          { word: "Orgulhoso", desc: "Sem arrogância, com verdade." },
        ].map(v => (
          <div key={v.word} style={{ background: "var(--bg)", padding: 28 }}>
            <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontWeight: 500, fontSize: 28, color: "var(--bordo)", marginBottom: 8 }}>
              {v.word}
            </div>
            <div style={{ fontSize: 13, lineHeight: 1.5, color: "var(--ink-muted)" }}>{v.desc}</div>
          </div>
        ))}
      </div>

      <div className="do-dont">
        <div className="dd-card do">
          <div className="dd-label">✓ Dizemos</div>
          <ul style={{ margin: 0, paddingLeft: 18, fontSize: 14, lineHeight: 1.9, color: "var(--ink-muted)" }}>
            <li>"Chopp bem tirado, três dedos de colarinho."</li>
            <li>"Cozinha com alma — acolhe e compartilha."</li>
            <li>"Desde 1996, servindo com verdade."</li>
            <li>"Aqui, cada tulipa tem história."</li>
            <li>"Saúde! — e que a mesa seja boa."</li>
          </ul>
        </div>
        <div className="dd-card dont">
          <div className="dd-label">✗ Não dizemos</div>
          <ul style={{ margin: 0, paddingLeft: 18, fontSize: 14, lineHeight: 1.9, color: "var(--ink-muted)" }}>
            <li>"Experiência premium gastronômica diferenciada."</li>
            <li>"Food & Beverage conceito disruptivo."</li>
            <li>"O melhor Chopp do Brasil." <em>(bravata vazia)</em></li>
            <li>Emoji em comunicação institucional.</li>
            <li>Gírias forçadas ou linguagem jovem demais.</li>
          </ul>
        </div>
      </div>

      <div style={{
        marginTop: 48,
        display: "grid",
        gridTemplateColumns: "auto 1fr",
        gap: 40,
        alignItems: "center",
        padding: "32px 40px",
        background: "var(--creme)",
        border: "1px solid var(--rule)",
        borderLeft: "6px solid var(--amarelo)"
      }}>
        <div style={{
          fontFamily: "var(--font-display)",
          fontStyle: "italic",
          fontWeight: 600,
          fontSize: 120,
          lineHeight: 0.85,
          color: "var(--amarelo-escuro)",
          letterSpacing: "-0.04em"
        }}>
          C<span style={{ color: "var(--marrom-claro)" }}>hopp</span>
        </div>
        <div>
          <div className="eyebrow" style={{ marginBottom: 8 }}>Regra editorial · Obrigatória</div>
          <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontWeight: 500, fontSize: 30, lineHeight: 1.2, color: "var(--marrom)", marginBottom: 8 }}>
            O "C" de Chopp é sempre maiúsculo.
          </div>
          <div style={{ fontSize: 15, lineHeight: 1.6, color: "var(--ink-muted)", margin: 0 }}>
            Em qualquer contexto — cardápio, post, legenda, uniforme, cartaz, assinatura
            de e-mail. Não é "chopp", não é "chope", não é "chopinho". É <strong>Chopp</strong>.
            É o produto que dá nome à casa, e é tratado com maiúscula por respeito.
            Única exceção: a palavra "choperia" minúscula em meio a uma frase corrida,
            por ser substantivo comum.
          </div>
        </div>
      </div>

      <div style={{ marginTop: 48, background: "var(--carvao)", color: "var(--creme)", padding: 56 }}>
        <div className="eyebrow" style={{ color: "var(--dourado)", marginBottom: 16 }}>Manifesto</div>
        <p style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontWeight: 500, fontSize: 36, lineHeight: 1.25, margin: 0, maxWidth: 900 }}>
          "Se é pra brindar, que seja com Chopp bem tirado. Se é pra petiscar, que seja com
          comida feita com alma. Se é pra reunir, que seja com alegria."
        </p>
      </div>
    </section>
  );
}

function MandamentosSection() {
  const dos = [
    "O 'C' de Chopp é maiúsculo — sempre",
    "Copo sempre limpo",
    "Três dedos de colarinho cremoso",
    "Temperatura ideal",
    "Respeito à chopeira e seus processos",
    "Não deixar o freguês com sede",
    "Apresentação impecável",
  ];
  const donts = [
    "Copo sujo",
    "Excesso de gás",
    "Falta de higiene",
    "Produtos quente/frio",
    "Fora do ponto",
    "Comida ressecada",
    "Mesas sujas",
    "Desrespeito com clientes ou colegas",
  ];
  return (
    <section className="section paper-tex" data-screen-label="12 Mandamentos" id="mandamentos">
      <div className="section-num">12 · Sistema</div>
      <h2 className="section-title">Os mandamentos</h2>
      <p className="section-lede">
        O chopp bem tirado é levado a sério — como diz o mandamento. Uma régua simples,
        que vale para todos os dias, em todas as mesas.
      </p>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
        <div style={{ background: "var(--creme)", border: "1px solid var(--rule)", padding: 40 }}>
          <div className="eyebrow" style={{ color: "var(--garrafa)", marginBottom: 20 }}>Como deve ser</div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
            {dos.map((d, i) => (
              <li key={d} style={{ display: "flex", gap: 16, alignItems: "baseline", padding: "12px 0", borderBottom: i < dos.length - 1 ? "1px dashed var(--rule)" : "none" }}>
                <span style={{ fontFamily: "var(--font-body)", fontSize: 14, fontWeight: 500, color: "var(--garrafa)", minWidth: 28 }}>{String(i + 1).padStart(2, "0")}</span>
                <span style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 20, lineHeight: 1.3 }}>{d}</span>
              </li>
            ))}
          </ul>
        </div>
        <div style={{ background: "var(--creme)", border: "1px solid var(--rule)", padding: 40 }}>
          <div className="eyebrow" style={{ color: "var(--bordo)", marginBottom: 20 }}>Não pode acontecer</div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
            {donts.map((d, i) => (
              <li key={d} style={{ display: "flex", gap: 16, alignItems: "baseline", padding: "12px 0", borderBottom: i < donts.length - 1 ? "1px dashed var(--rule)" : "none" }}>
                <span style={{ fontFamily: "var(--font-body)", fontSize: 14, fontWeight: 500, color: "var(--bordo)", minWidth: 28 }}>{String(i + 1).padStart(2, "0")}</span>
                <span style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 20, lineHeight: 1.3, color: "var(--ink-muted)", textDecoration: "line-through", textDecorationColor: "var(--bordo)", textDecorationThickness: "1px" }}>{d}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { UIKitSection, VoiceSection, MandamentosSection, GlossarioSection });

// ============================================
// GLOSSÁRIO DA CASA — termos autorais, extraídos do cardápio real
// ============================================

function GlossarioSection() {
  const termos = [
    { termo: "Chopp", definicao: "Sempre com C maiúsculo. Dois 'p'. Nunca 'chope' nem 'chopinho' na comunicação institucional — exceto quando o cardápio usa 'Chopinho' como produto específico (dose menor)." },
    { termo: "Sandubas", definicao: "Categoria oficial do cardápio. Não traduzir para 'sanduíches' em peças de comunicação — é parte do idioma da casa." },
    { termo: "Palitagens", definicao: "Palitos de filé mignon, prato-assinatura. Termo exclusivo — não existe em nenhum outro lugar. Proteger e usar com orgulho." },
    { termo: "Caipis", definicao: "Caipirinhas da casa. Sempre no plural, nunca 'caipirinha do Mário'. Cada uma tem nome próprio (Do Dica, Do Xico, Viúva, etc.)." },
    { termo: "Do Mato / Do Boi", definicao: "Seções do cardápio para pratos de peixe/frutos do mar (do mato) e carnes (do boi). Linguagem direta, interiorana, afetuosa." },
    { termo: "Bolinhos", definicao: "Nunca 'croquetes' ou 'bolinhos gourmet'. Sempre 'sequinhos, saborosos e crocantes, produzidos artesanalmente na casa'." },
    { termo: "Só pra começar…", definicao: "Nome da seção de petiscos. Reticências inclusas, minúsculas inclusas. É assim que se convida pra mesa." },
    { termo: "+ Pedido", definicao: "Etiqueta usada para marcar os mais pedidos. Sempre com o '+' colado, cor âmbar, caixa alta." },
    { termo: "Nova Receita", definicao: "Etiqueta para pratos clássicos que foram reinventados. Vermelho bordô. Orgulho de atualizar a tradição." },
    { termo: "Prazer em servir bem", definicao: "Lema operacional da casa. Assina rodapés, uniformes, treinamentos. Não é slogan — é régua de trabalho." },
    { termo: "Desde 1996", definicao: "A data de nascimento da choperia. Sempre aparece em itálico ou em pequenas caixas altas. Nunca esconder." },
    { termo: "Família de comerciantes", definicao: "Expressão de identidade. Sempre que houver espaço: 'Família de comerciantes há mais de 100 anos na Rua Arthur Machado'." },
    { termo: "Arthur Machado", definicao: "O endereço de sangue. A rua. Sempre com a rua nomeada — nunca só 'endereço' ou 'Uberaba'." },
    { termo: "Brindar · Petiscar · Reunir", definicao: "Os três verbos da casa. Usar nessa ordem sempre que possível. Resume o que fazemos." },
  ];

  const caipis = [
    { nome: "Do Dica", receita: "limão china, rapadura e gengibre" },
    { nome: "Do Sertão", receita: "cajulimão" },
    { nome: "Do Xico", receita: "frutas vermelhas" },
    { nome: "Zé das Couves", receita: "limão e couve" },
    { nome: "Sol Nascente", receita: "melancia e maracujá" },
    { nome: "Viúva", receita: "uva, limão e hortelã" },
    { nome: "O Cravo e a Rosa", receita: "morango, limão china e gengibre" },
  ];

  return (
    <section className="section" data-screen-label="13 Glossário" id="glossario" style={{ background: "var(--bg-alt)" }}>
      <div className="section-num">13 · Sistema</div>
      <h2 className="section-title">Glossário da casa</h2>
      <p className="section-lede">
        A Choperia do Mário tem um idioma próprio, construído ao longo de 30 anos de cardápio
        e mesa. Estes termos não são sinônimos a traduzir — são <em>nomes oficiais</em>.
        Preservá-los é preservar a casa.
      </p>

      {/* TERMOS */}
      <div style={{ marginTop: 40 }}>
        <h3 className="subsection-title" style={{ marginBottom: 24 }}>Vocabulário oficial</h3>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 0, border: "1px solid var(--rule)", background: "var(--creme)" }}>
          {termos.map((t, i) => (
            <div key={t.termo} style={{
              padding: "24px 28px",
              borderRight: i % 2 === 0 ? "1px solid var(--rule)" : "none",
              borderBottom: i < termos.length - 2 ? "1px solid var(--rule)" : "none"
            }}>
              <div style={{
                fontFamily: "var(--font-display)",
                fontStyle: "italic",
                fontWeight: 600,
                fontSize: 24,
                color: "var(--marrom)",
                marginBottom: 8
              }}>
                {t.termo}
              </div>
              <div style={{ fontSize: 14, lineHeight: 1.55, color: "var(--ink-muted)" }}>
                {t.definicao}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* OS NOMES DAS CAIPIS */}
      <div style={{ marginTop: 56 }}>
        <h3 className="subsection-title" style={{ marginBottom: 8 }}>Os nomes das Caipis</h3>
        <p style={{ fontSize: 15, lineHeight: 1.6, color: "var(--ink-muted)", marginTop: 0, marginBottom: 24, maxWidth: 720 }}>
          Cada caipi tem um nome próprio — personagem, apelido, expressão. É folclore
          líquido: proteger os nomes é proteger a alma da casa.
        </p>
        <div style={{
          background: "var(--carvao, #0F0F0F)",
          color: "var(--creme)",
          padding: "48px 56px",
          border: "1px solid var(--rule-strong)"
        }}>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "24px 64px" }}>
            {caipis.map((c, i) => (
              <div key={c.nome} style={{
                display: "grid",
                gridTemplateColumns: "48px 1fr",
                gap: 20,
                alignItems: "baseline",
                paddingBottom: 18,
                borderBottom: "1px dashed rgba(250,246,236,0.18)"
              }}>
                <div style={{
                  fontFamily: "var(--font-body)",
                  fontSize: 12,
                  color: "rgba(250,246,236,0.5)"
                }}>
                  {String(i + 1).padStart(2, "0")}
                </div>
                <div>
                  <div style={{
                    fontFamily: "var(--font-display)",
                    fontStyle: "italic",
                    fontWeight: 600,
                    fontSize: 26,
                    lineHeight: 1.1,
                    color: "var(--dourado-claro, #D4A24A)",
                    marginBottom: 4
                  }}>
                    {c.nome}
                  </div>
                  <div style={{
                    fontSize: 14,
                    lineHeight: 1.5,
                    color: "rgba(250,246,236,0.75)"
                  }}>
                    {c.receita}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* REGRA EDITORIAL */}
      <div style={{
        marginTop: 48,
        padding: "32px 40px",
        background: "var(--creme)",
        border: "1px solid var(--rule)",
        borderLeft: "6px solid var(--bordo)"
      }}>
        <div className="eyebrow" style={{ marginBottom: 10 }}>Regra editorial · Obrigatória</div>
        <div style={{
          fontFamily: "var(--font-display)",
          fontStyle: "italic",
          fontWeight: 500,
          fontSize: 28,
          lineHeight: 1.25,
          color: "var(--marrom)",
          marginBottom: 10
        }}>
          Não traduzir o idioma da casa.
        </div>
        <div style={{ fontSize: 15, lineHeight: 1.6, color: "var(--ink-muted)", maxWidth: 780 }}>
          Em qualquer comunicação — site, redes, cardápio, placa, convite —
          os termos desta seção aparecem exatamente como estão. "Sandubas" não vira
          "sanduíches". "Caipis" não vira "caipirinhas". "Do Mato" não vira "peixes".
          Se um termo soar estranho para um cliente novo, <em>tanto melhor</em>: é uma porta
          pra conversa sobre quem somos.
        </div>
      </div>
    </section>
  );
}