// ============================================
// SECTIONS: Aplicações & Sistema (Menu, Cardápio, Social, App)
// ============================================

function AplicacoesSection() {
  return (
    <section className="section" data-screen-label="14 Aplicações" id="aplicacoes" style={{ background: "var(--bg-alt)" }}>
      <div className="section-num">14 · Aplicações</div>
      <h2 className="section-title">A marca no mundo</h2>
      <p className="section-lede">
        Cardápio, fachada, copos, redes e o app de pedidos. A marca se mantém fiel em qualquer
        suporte — do balcão à tela.
      </p>

      <div className="app-grid">
        {/* Cardápio impresso */}
        <div className="app-mockup" style={{ padding: 0 }}>
          <div className="app-mockup-label">01 · Cardápio</div>
          <div style={{ background: "var(--creme)", color: "var(--marrom)", padding: 48, minHeight: 480, position: "relative" }}>
            <div style={{ textAlign: "center", marginBottom: 24, display: "flex", flexDirection: "column", alignItems: "center", gap: 10 }}>
              <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontWeight: 500, fontSize: 16, color: "var(--bordo)" }}>Desde 1996</div>
              <Logo size={240} />
            </div>
            <div style={{ display: "flex", justifyContent: "center", marginBottom: 24 }}>
              <OrnamentalDivider width={140} />
            </div>
            <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontWeight: 500, fontSize: 22, color: "var(--bordo)", marginBottom: 12 }}>Chopps</div>
            {[
              ["Pilsen tradicional", "14,00"],
              ["Escura cremosa", "16,00"],
              ["IPA da casa", "18,00"],
            ].map(([n, p]) => (
              <div key={n} style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", padding: "10px 0", borderBottom: "1px dashed rgba(58,30,10,0.25)" }}>
                <span style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 18 }}>{n}</span>
                <span style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--marrom-medio)", fontWeight: 500 }}>R$ {p}</span>
              </div>
            ))}
            <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontWeight: 500, fontSize: 22, color: "var(--bordo)", marginTop: 24, marginBottom: 12 }}>Petiscos</div>
            {[
              ["Bolinho de bacalhau · 8 un", "48,00"],
              ["Linguiça artesanal", "42,00"],
              ["Porção mista da casa", "68,00"],
            ].map(([n, p]) => (
              <div key={n} style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", padding: "10px 0", borderBottom: "1px dashed rgba(58,30,10,0.25)" }}>
                <span style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 18 }}>{n}</span>
                <span style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--marrom-medio)", fontWeight: 500 }}>R$ {p}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Instagram post */}
        <div className="app-mockup">
          <div className="app-mockup-label">02 · Instagram</div>
          <div style={{ background: "#FFFFFF", padding: 32, minHeight: 480 }}>
            <div style={{ aspectRatio: "1", background: "var(--creme)", position: "relative", overflow: "hidden", marginBottom: 12, border: "1px solid var(--rule)" }}>
              <div style={{ position: "absolute", top: 24, left: 24, fontFamily: "var(--font-display)", fontStyle: "italic", fontWeight: 500, fontSize: 18, color: "var(--bordo)" }}>Mandamento nº 01</div>
              <div style={{ position: "absolute", bottom: 80, left: 24, right: 24, fontFamily: "var(--font-display)", fontStyle: "italic", fontWeight: 500, fontSize: 40, lineHeight: 1.05, color: "var(--marrom)" }}>
                Três dedos<br/>de colarinho<br/>cremoso.
              </div>
              <div style={{ position: "absolute", bottom: 20, left: 24 }}>
                <Logo size={90} />
              </div>
            </div>
            <div style={{ display: "flex", gap: 8, fontFamily: "var(--font-body)", fontSize: 13, color: "var(--ink-soft)", fontWeight: 500 }}>
              <span>@choperiadomario</span>
              <span>·</span>
              <span>Uberaba/MG</span>
            </div>
          </div>
        </div>

        {/* Copo / tulipa */}
        <div className="app-mockup">
          <div className="app-mockup-label">03 · Tulipa</div>
          <div style={{ background: "var(--linho)", padding: 48, minHeight: 480, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 24 }}>
            <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontWeight: 500, fontSize: 16, color: "var(--bordo)" }}>Aplicação em vidro</div>
            <div className="beer-glass" style={{ transform: "scale(2)" }} />
            <div style={{ textAlign: "center", marginTop: 40 }}>
              <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 20, color: "var(--carvao)" }}>
                Gravação em âmbar ou creme, monograma centralizado.
              </div>
            </div>
          </div>
        </div>

        {/* App mobile */}
        <div className="app-mockup">
          <div className="app-mockup-label">04 · App de pedidos</div>
          <div style={{ background: "var(--bg-alt)", padding: 40, minHeight: 480, display: "flex", justifyContent: "center" }}>
            <div style={{ width: 260, background: "#FFFFFF", borderRadius: 24, overflow: "hidden", boxShadow: "var(--shadow-lg)", border: "8px solid var(--creme)" }}>
              <div style={{ background: "var(--amarelo)", color: "var(--marrom)", padding: "16px 20px 20px" }}>
                <div style={{ fontFamily: "var(--font-body)", fontSize: 12, color: "var(--bordo)", fontWeight: 500 }}>Mesa 07 · 4 pessoas</div>
                <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 26, color: "var(--marrom)", marginTop: 4 }}>Boa noite!</div>
              </div>
              <div style={{ padding: 20 }}>
                <div className="eyebrow" style={{ marginBottom: 10 }}>Chopp</div>
                <div style={{ background: "var(--creme)", padding: 14, marginBottom: 10, borderLeft: "3px solid var(--amarelo)" }}>
                  <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 16 }}>Pilsen tradicional</div>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 6 }}>
                    <span style={{ fontFamily: "var(--font-body)", fontSize: 12, color: "var(--bordo)", fontWeight: 500 }}>R$ 14,00</span>
                    <button className="btn btn-gold" style={{ padding: "4px 10px", fontSize: 10 }}>+ Pedir</button>
                  </div>
                </div>
                <div style={{ background: "var(--creme)", padding: 14, marginBottom: 16, borderLeft: "3px solid var(--amarelo)" }}>
                  <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 16 }}>Escura cremosa</div>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 6 }}>
                    <span style={{ fontFamily: "var(--font-body)", fontSize: 12, color: "var(--bordo)", fontWeight: 500 }}>R$ 14,00</span>
                    <button className="btn btn-gold" style={{ padding: "4px 10px", fontSize: 10 }}>+ Pedir</button>
                  </div>
                </div>
                <button className="btn btn-primary" style={{ width: "100%" }}>Chamar o garçom</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ClosingSection() {
  return (
    <section className="section" data-screen-label="15 Encerramento" id="fim" style={{ background: "var(--amarelo)", color: "var(--marrom)" }}>
      <div className="section-num" style={{ color: "var(--marrom-medio)" }}>15 · Encerramento</div>
      <h2 className="section-title" style={{ color: "var(--bordo)" }}>Saúde!</h2>

      <div style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 80, alignItems: "end", marginTop: 64, paddingBottom: 64, borderBottom: "1px solid rgba(58,30,10,0.25)" }}>
        <div>
          <p style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontWeight: 500, fontSize: 44, lineHeight: 1.15, margin: 0, color: "var(--marrom)", maxWidth: 720 }}>
            Na Choperia do Mário, ninguém veste a camisa por acaso. Quem está aqui sente
            orgulho do que faz.
          </p>
          <div style={{ marginTop: 32, fontFamily: "var(--font-body)", fontSize: 15, fontWeight: 400, color: "var(--marrom-medio)", maxWidth: 560, lineHeight: 1.6 }}>
            Este brand book é um documento vivo. Atualizado sempre que a marca evoluir,
            sem perder a alma de onde veio. Dúvidas, aplicações fora do padrão ou pedidos
            novos — fale com a equipe de marca.
          </div>
        </div>
        <div className="stamp" style={{ width: 180, height: 180, borderColor: "var(--bordo)", color: "var(--bordo)" }}>
          <div className="stamp-top">Brand System</div>
          <div className="stamp-big">v1.0</div>
          <div className="stamp-bot">Abr · 2026</div>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32, paddingTop: 48 }}>
        {[
          ["Endereço", "Rua Arthur Machado", "Uberaba · MG"],
          ["Fundação", "1996", "Família de comerciantes desde 1920"],
          ["Tom", "Tradição com", "autenticidade"],
          ["Missão", "Servir bem, reunir pessoas,", "transformar momentos em inesquecíveis."]
        ].map(([label, line1, line2]) => (
          <div key={label}>
            <div className="eyebrow" style={{ color: "var(--bordo)" }}>{label}</div>
            <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 20, marginTop: 8, color: "var(--marrom)" }}>
              {line1}<br/>
              <span style={{ fontSize: 14, color: "var(--marrom-medio)" }}>{line2}</span>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { AplicacoesSection, ClosingSection });