/* ============ HERMANITO · UI components ============ */
const { useState } = React;

/* ---------- Header ---------- */
function Header({ open, count, onCart }) {
  return (
    <header className="hdr">
      <div className="wrap hdr-in">
        <a href="#topo" className="hdr-logo">
          <img src="assets/logo-badge.png" alt="Hermanito Empanadas Artesanais" />
        </a>
        <nav className="hdr-nav">
          <a href="#historia">Nossa história</a>
          <a href="#cardapio">Cardápio</a>
          <a href="#entregas">Entregas</a>
          <a href="#restaurante">Em breve</a>
        </nav>
        <div className="hdr-right">
          <span className={'status-pill ' + (open ? 'status-open' : 'status-closed')}>
            <span className="dot"></span>{open ? 'Aberto agora' : 'Fechado'}
          </span>
          <button className="cart-btn" onClick={onCart}>
            <Icon name="cart" style={{ width: 19, height: 19 }} />
            <span>Pedir</span>
            {count > 0 && <span className="cart-count">{count}</span>}
          </button>
        </div>
      </div>
    </header>);

}

/* ---------- Hero variants ---------- */
function HeroClassic({ onOrder }) {
  return (
    <section className="hero hero-classic paper-bg" id="topo">
      <img className="hero-logo-big" src="assets/logo-badge.png" alt="Hermanito Empanadas Artesanais" />
      <div className="hero-row">
        <div className="hero-text">
          <h1 className="hero-h1">Empanadas<br /><span className="blue">argentinas</span><br />de verdade.</h1>
          <p className="hero-lead">Massa artesanal feita à mão, receitas de família e muito recheio — assadas no forno em pequenos lotes, aqui em {BRAND.city}.</p>
          <div className="hero-cta">
            <button className="btn btn-primary" onClick={onOrder}>
              <Icon name="cart" style={{ width: 18, height: 18 }} />Fazer meu pedido
            </button>
            <a className="btn btn-ghost" href="#cardapio">Ver cardápio</a>
          </div>
          <div className="hero-meta">
            <div className="m"><b>3</b><span>sabores</span></div>
            <div className="m"><b>R$9</b><span>cada</span></div>
            <div className="m"><b>Qui–Sáb</b><span>à noite</span></div>
          </div>
        </div>
        <div className="hero-art">
          <div className="hero-photo">
            <img src="assets/hero-empanadas-fade.png" alt="Empanadas argentinas assadas" />
            <span className="hero-price"><b>R$ 9</b><span>cada</span></span>
          </div>
        </div>
      </div>
    </section>);

}

function HeroPoster({ onOrder }) {
  return (
    <section className="hero hero-poster paper-bg" id="topo">
      <div className="wrap">
        <span className="kicker">Empanadas Artesanais · {BRAND.city}</span>
        <h1 className="hero-h1" style={{ marginTop: 14 }}>O sabor da<br /><span className="blue">Argentina</span> chegou.</h1>
        <p className="hero-lead">Receitas de família, massa artesanal e muito recheio. Feitas em pequenos lotes e entregues fresquinhas.</p>
        <div className="hero-cta">
          <button className="btn btn-primary" onClick={onOrder}>
            <Icon name="cart" style={{ width: 18, height: 18 }} />Fazer meu pedido
          </button>
          <a className="btn btn-gold" href="#cardapio">Ver sabores</a>
        </div>
        <div className="hero-foods">
          {MENU.map((m) =>
          <figure className="hero-food-card" key={m.id}>
              <img src={m.img} alt={'Empanada de ' + m.name} />
              <figcaption>{m.name}</figcaption>
            </figure>
          )}
        </div>
      </div>
    </section>);

}

function HeroVitrine({ onOrder }) {
  return (
    <section className="hero hero-vitrine" id="topo">
      <div className="wrap inner">
        <div className="left">
          <span className="eyebrow" style={{ color: 'var(--gold-soft)' }}>Receitas de família</span>
          <h1 className="hero-h1">Muito<br /><span className="blue">recheio</span><br />em cada mordida.</h1>
          <p className="hero-lead">Carne, Pollo e Humita — empanadas argentinas assadas no forno, com massa feita à mão todos os dias.</p>
          <div className="hero-cta">
            <button className="btn btn-gold" onClick={onOrder}>
              <Icon name="cart" style={{ width: 18, height: 18 }} />Fazer meu pedido
            </button>
            <a className="btn" href="#cardapio" style={{ border: '2px solid rgba(255,255,255,.4)', color: '#fff' }}>Ver cardápio</a>
          </div>
        </div>
        <div className="right">
          <div className="vit-glow"></div>
          <div className="hero-photo">
            <img src="assets/hero-empanadas-fade.png" alt="Empanadas argentinas assadas" />
            <span className="hero-price"><b>R$ 9</b><span>cada</span></span>
          </div>
        </div>
      </div>
    </section>);

}

function Hero({ variant, onOrder }) {
  if (variant === 'poster') return <HeroPoster onOrder={onOrder} />;
  if (variant === 'vitrine') return <HeroVitrine onOrder={onOrder} />;
  return <HeroClassic onOrder={onOrder} />;
}

/* ---------- Selos strip ---------- */
function Selos() {
  const items = [
  { ic: 'oven', t: 'Assadas no forno', d: 'Mais leves e saborosas, nunca fritas.' },
  { ic: 'rolling', t: 'Massa artesanal', d: 'Feita à mão, fresquinha todos os dias.' },
  { ic: 'leaf', t: 'Sem aditivos', d: 'Ingredientes naturais e de verdade.' },
  { ic: 'heart', t: 'Receita de família', d: 'O carinho argentino em cada lote.' }];

  return (
    <section className="selos">
      <div className="wrap selos-row">
        {items.map((s, i) =>
        <div className="selo" key={i}>
            <div className="selo-ic"><Icon name={s.ic} /></div>
            <div><b>{s.t}</b><span>{s.d}</span></div>
          </div>
        )}
      </div>
    </section>);

}

/* ---------- História ---------- */
function Historia() {
  return (
    <section className="section story paper-bg" id="historia">
      <div className="wrap story-grid">
        <div className="story-portrait">
          <div className="tape">Mascote oficial</div>
          <div className="frame">
            <img className="story-illus" src="assets/hermanito-cozinha2.jpg" alt="Hermanito na cozinha com uma empanada" />
            <div className="cert">O nosso Hermanito</div>
            <div className="sub-cert">Metade brasileiro · metade argentino</div>
          </div>
        </div>
        <div>
          <span className="eyebrow">Quem é o Hermanito</span>
          <h2>Uma família,<br />dois países,<br />um só sabor.</h2>
          <p>O Hermanito nasceu em casa, da nossa vontade de dividir com o bairro o sabor das empanadas que aprendemos a fazer em família — do jeitinho argentino de verdade.</p>
          <p>O nosso mascote é inspirado no nosso filho de 11 anos: metade brasileiro, metade argentino, fã de futebol e da camisa 10. Ele é o coração da marca e representa exatamente o que somos — duas culturas que se encontram numa mesa cheia de afeto.</p>
          <p>Cada empanada é assada em pequenos lotes, com receita de família e muito carinho. É comida feita à mão, para você e para a sua família.</p>
          <div className="sign">— com amor, a família Hermanito ❤️</div>
        </div>
      </div>
    </section>);

}

/* ---------- Cardápio ---------- */
function ItemCard({ item, qty, onAdd, onInc, onDec }) {
  return (
    <article className="card">
      <div className="card-photo">
        <img src={item.img} alt={'Empanada de ' + item.name} />
        {item.tag && <span className="card-tag">{item.tag}</span>}
        {item.veg && <span className="card-tag veg">Vegetariana</span>}
      </div>
      <div className="card-body">
        <h3>{item.name}</h3>
        <div className="sub">{item.sub}</div>
        <p className="desc">{item.desc}</p>
        <div className="nutri">
          <span className="chip"><Icon name="flame" style={{ width: 14, height: 14 }} />{item.kcal} kcal</span>
          <span className="chip"><Icon name="bolt" style={{ width: 14, height: 14 }} />{item.protein}g proteína</span>
        </div>
        <div className="card-foot">
          <div className="price">{brl(item.price)}<small> /un</small></div>
          {qty > 0 ?
          <div className="stepper">
              <button onClick={onDec} aria-label="menos">–</button>
              <span>{qty}</span>
              <button onClick={onInc} aria-label="mais">+</button>
            </div> :

          <button className="add-btn" onClick={onAdd}>
              <Icon name="cart" style={{ width: 16, height: 16 }} />Adicionar
            </button>
          }
        </div>
      </div>
    </article>);

}

function Cardapio({ cart, add, inc, dec, showPromo }) {
  return (
    <section className="section menu" id="cardapio">
      <div className="wrap">
        <div className="section-head">
          <span className="kicker">Nossos sabores</span>
          <h2>O cardápio</h2>
          <p>Todas as empanadas por <b>R$ 9,00</b> cada. Produção artesanal e limitada — peça a sua antes de acabar o lote!</p>
        </div>
        {showPromo &&
        <div className="promo-banner">
            <Icon name="star" style={{ width: 22, height: 22 }} />
            <b>Promo de estreia</b>
            <span>Leve 12 empanadas e ganhe <b>10% off</b> — combine os sabores como quiser!</span>
          </div>
        }
        <div className="menu-grid">
          {MENU.map((m) =>
          <ItemCard key={m.id} item={m} qty={cart[m.id] || 0}
          onAdd={() => add(m.id)} onInc={() => inc(m.id)} onDec={() => dec(m.id)} />
          )}
        </div>
      </div>
    </section>);

}

/* ---------- Entregas ---------- */
function Entregas() {
  const days = [
  { n: 'Quinta', c: 'var(--celeste)' },
  { n: 'Sexta', c: 'var(--gold-soft)' },
  { n: 'Sábado', c: 'var(--green)' }];

  return (
    <section className="section entregas" id="entregas">
      <div className="wrap">
        <div className="section-head">
          <span className="kicker" style={{ color: 'var(--gold-soft)' }}>Pedidos e entregas</span>
          <h2>Toda quinta, sexta e sábado</h2>
          <p>Faça seu pedido durante o dia. As entregas saem à noite, fresquinhas do forno.</p>
        </div>
        <div className="days">
          {days.map((d, i) =>
          <div className="day" key={i}>
              <div className="moon"><Icon name="moon" style={{ width: 24, height: 24, color: d.c }} /></div>
              <h3>{d.n}<br />à noite</h3>
              <div className="line"></div>
              <div className="lbl">Pedidos até</div>
              <div className="big">19h</div>
              <div className="line"></div>
              <div className="lbl">Entregas a partir das</div>
              <div className="big">{DELIVERY_FROM}</div>
            </div>
          )}
        </div>
        <div className="note">
          <span className="area-pill">
            <Icon name="pin" /> Entregamos em <b style={{ marginLeft: 4 }}>{BRAND.city}</b>
          </span>
          <p style={{ color: '#aab3c7', marginTop: 14, fontSize: '.92rem' }}>
            Fora do horário? Sem problema — você pode agendar a entrega para a próxima noite ao fazer o pedido.
          </p>
        </div>
      </div>
    </section>);

}

/* ---------- Restaurante teaser ---------- */
function Teaser() {
  return (
    <section className="section teaser" id="restaurante">
      <div className="wrap">
        <span className="badge-soon">Em breve</span>
        <h2>Hoje delivery.<br />Amanhã, a sua mesa.</h2>
        <p>Começamos levando as empanadas até a sua casa, mas o sonho é grande: em breve o Hermanito vai abrir as portas como restaurante, para receber você e a sua família com o melhor da cozinha argentina.</p>
      </div>
    </section>);

}

/* ---------- Footer ---------- */
function Footer({ onOrder }) {
  return (
    <footer className="ftr">
      <div className="wrap">
        <div className="ftr-grid">
          <div>
            <div className="ftr-logo"><img src="assets/logo-badge.png" alt="Hermanito" /></div>
            <p>Empanadas argentinas artesanais, feitas à mão com receitas de família. Feitas com amor, para você e a sua família.</p>
            <a className="wa-line" href={waLink('Olá, Hermanito! Tudo bem?')} target="_blank" rel="noopener">
              <Icon name="whatsapp" /> {BRAND.whatsappShow}
            </a>
          </div>
          <div>
            <h4>Navegar</h4>
            <a className="l" href="#historia">Nossa história</a>
            <a className="l" href="#cardapio">Cardápio</a>
            <a className="l" href="#entregas">Entregas</a>
            <a className="l" href="#restaurante">Em breve restaurante</a>
          </div>
          <div>
            <h4>Atendimento</h4>
            <p style={{ marginBottom: 10 }}>Quinta, sexta e sábado<br />Pedidos até 19h · entregas {DELIVERY_FROM}</p>
            <p style={{ marginBottom: 16 }}>Entregas em {BRAND.city} · {BRAND.region}</p>
            <button className="btn btn-wa" onClick={onOrder}>
              <Icon name="whatsapp" style={{ width: 18, height: 18 }} />Fazer pedido
            </button>
          </div>
        </div>
        <div className="ftr-bottom">
          <span>© {new Date().getFullYear()} Hermanito Empanadas Artesanais · {BRAND.domain}</span>
          <span>Empanadas feitas como na Argentina 🇦🇷</span>
        </div>
      </div>
    </footer>);

}

Object.assign(window, {
  Header, Hero, Selos, Historia, Cardapio, ItemCard, Entregas, Teaser, Footer
});