// ============================================================
// SEÇÃO · Gastronomia (sob Vida no Iate Clube) — Rev. 18/jun
//  Hub: espaços (Restaurante · Sushi · Bar do Deck) → cada um abre
//  seu CARDÁPIO (componente dinâmico, fonte única reusada na Home e
//  na newsletter). + horários + eventos gastronômicos (Agenda filtrada).
//  Lacuna do Bloco 3 ("Hub de Gastronomia"). O Cardápio saiu de Serviços.
// ============================================================

function gastronomiaArtboards() {
  // Card de espaço/venue (foto + nome + "ver cardápio").
  const Venue = ({ nome, desc, horario }) => (
    <div className="wf-card" style={{ padding: 0 }}>
      <Img h={120} label="" style={{ borderRadius: 0, border: 'none' }} />
      <div style={{ padding: 13 }}>
        <div className="wf-between" style={{ marginBottom: 4 }}><div className="wf-h sm">{nome}</div><Data>{horario}</Data></div>
        <T sm style={{ marginBottom: 10 }}>{desc}</T>
        <div className="wf-row" style={{ gap: 8 }}><Btn variant="ghost" size="sm">Ver cardápio</Btn><Btn variant="plain" size="sm">Reservar · Secretaria</Btn></div>
      </div>
    </div>
  );
  const MenuItem = ({ nome, desc, preco, tag }) => (
    <div className="wf-between" style={{ alignItems: 'baseline', gap: 12, padding: '11px 0', borderBottom: '1px solid var(--wf-line-2)' }}>
      <div style={{ flex: 1 }}>
        <div className="wf-row" style={{ gap: 8, alignItems: 'center', marginBottom: 3 }}><div className="wf-h sm">{nome}</div>{tag ? <Tag>{tag}</Tag> : null}</div>
        <T sm style={{ color: 'var(--wf-muted)' }}>{desc}</T>
      </div>
      <Data style={{ color: 'var(--wf-ink)', fontWeight: 700, whiteSpace: 'nowrap' }}>{preco}</Data>
    </div>
  );
  const MENU = {
    Entradas: [
      ['Bolinho de bacalhau', 'crocante, maionese de limão-siciliano', 'R$ 48'],
      ['Ceviche de robalo', 'leite de tigre, batata-doce, milho', 'R$ 62', 'Peixe'],
    ],
    Principais: [
      ['Moqueca caiçara', 'peixe da ilha, dendê e pirão', 'R$ 98', 'Para 2'],
      ['Risoto de camarão', 'camarão rosa, limão e ervas', 'R$ 86'],
      ['Pesca do dia grelhada', 'legumes do dia, molho de maracujá', 'R$ 92'],
    ],
    Sobremesas: [
      ['Pudim da casa', 'calda de rapadura', 'R$ 28'],
      ['Petit gâteau', 'sorvete de baunilha', 'R$ 32'],
    ],
  };

  return [

    // ---------- Gastronomia · HUB · Mobile ----------
    <DCArtboard key="gas" id="gastronomia" label="Gastronomia · hub · Mobile" width={SHEETW(390)} height={1860} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'Rev. 18/jun · Bloco 3 — <b>Hub de Gastronomia</b> (não existia como tela). Vive sob Vida no Iate Clube.',
          { pin: 1, t: '<b>Espaços</b>: Restaurante · Sushi Bar · Bar do Deck. Cada um abre <b>seu cardápio</b>.' },
          { pin: 2, t: '<b>Cardápio da semana</b> embutido (componente dinâmico, CMS) → cardápio completo.' },
          { pin: 3, t: '<b>Horários</b> + <b>eventos gastronômicos</b> (jantares, harmonizações) — abrem na Agenda filtrada por Gastronomia.' },
          '<b>Fonte única</b> do cardápio: o mesmo componente aparece na Home e na newsletter. Reservas pela Secretaria.',
        ]}>
        <MobileHeader logged={false} />
        <div style={{ position: 'relative' }}>
          <Img h={210} label="Restaurante · deck ao pôr do sol" style={{ borderRadius: 0, border: 'none' }} />
          <div style={{ position: 'absolute', bottom: 14, left: 16, right: 16 }}>
            <div className="wf-crumb" style={{ marginBottom: 8 }}>Vida no Iate Clube<span className="sep">›</span>Gastronomia</div>
            <div className="wf-h xl" style={{ color: '#fff' }}>Gastronomia</div>
          </div>
        </div>
        <div style={{ padding: '14px 16px 4px' }}><T sm>O restaurante, o sushi e o bar do deck — com vista para a marina.</T></div>

        <div style={{ position: 'relative', padding: '10px 16px' }}>
          <Pin n={1} style={{ position: 'absolute', left: 6, top: 4, zIndex: 6 }} />
          <Eyebrow style={{ marginBottom: 12 }}>Espaços</Eyebrow>
          <div className="wf-stack" style={{ gap: 14 }}>
            <Venue nome="Restaurante" desc="Cozinha do mar · almoço e jantar" horario="ter–dom · 12–22h" />
            <Venue nome="Sushi Bar" desc="Balcão e à la carte" horario="qui–dom · 18–23h" />
            <Venue nome="Bar do Deck" desc="Petiscos e drinks à beira-mar" horario="todos os dias · 10–22h" />
          </div>
        </div>

        <div style={{ position: 'relative', padding: '16px 16px 6px' }}>
          <Pin n={2} style={{ position: 'absolute', left: 6, top: 12, zIndex: 6 }} />
          <div className="wf-between" style={{ marginBottom: 12 }}><Eyebrow>Cardápio da semana</Eyebrow><Tag navy>Semana 24</Tag></div>
          <div className="wf-card" style={{ padding: 14 }}>
            <div style={{ marginBottom: 14 }}><Data style={{ marginBottom: 8 }}>Principais</Data><div className="wf-stack" style={{ gap: 0 }}><MenuItem nome="Moqueca caiçara" desc="peixe da ilha, dendê e pirão" preco="R$ 98" tag="Para 2" /><MenuItem nome="Risoto de camarão" desc="camarão rosa, limão e ervas" preco="R$ 86" /></div></div>
            <Btn variant="ghost" block>Ver cardápio completo</Btn>
          </div>
        </div>

        <div style={{ position: 'relative', padding: '16px 16px' }}>
          <Pin n={3} style={{ position: 'absolute', left: 6, top: 12, zIndex: 6 }} />
          <Eyebrow style={{ marginBottom: 12 }}>Eventos gastronômicos</Eyebrow>
          <div className="wf-stack" style={{ gap: 12, marginBottom: 14 }}>
            {[['Jantar harmonizado', 'sex · 20h'], ['Feijoada do clube', 'sáb · 13h']].map(([t, q]) => (
              <div key={t} className="wf-between wf-card" style={{ padding: 12 }}><div><div className="wf-h sm">{t}</div><Data>{q}</Data></div><span style={{ color: 'var(--wf-navy)' }}>›</span></div>
            ))}
          </div>
          <Link>Ver todos na Agenda ↗</Link>
        </div>
        <Footer mobile />
      </Sheet>
    </DCArtboard>,

    // ---------- Gastronomia · HUB · Desktop ----------
    <DCArtboard key="gasD" id="gastronomia-d" label="Gastronomia · hub · Desktop" width={SHEETW(1240)} height={1180} style={ABS}>
      <Sheet vp="Desktop · 1240" screenW={1240}
        notes={[
          'Versão desktop do <b>Hub de Gastronomia</b>.',
          { pin: 1, t: '<b>Espaços</b> em grade (3 colunas) → cada um abre seu cardápio.' },
          { pin: 2, t: '<b>Cardápio da semana</b> + <b>horários</b> em coluna lateral.' },
          { pin: 3, t: '<b>Eventos gastronômicos</b> (Agenda filtrada).' },
        ]}>
        <DeskHeader active="Vida no Iate Clube" weather mega />
        <div style={{ position: 'relative' }}>
          <Img h={360} label="Hero · restaurante e deck" style={{ border: 'none', borderRadius: 0 }} />
          <div style={{ position: 'absolute', left: 60, bottom: 44, maxWidth: 640 }}>
            <div className="wf-crumb" style={{ marginBottom: 10 }}>Vida no Iate Clube<span className="sep">›</span>Gastronomia</div>
            <div className="wf-h" style={{ fontSize: 50, color: '#fff' }}>Gastronomia</div>
          </div>
        </div>
        <div style={{ padding: '36px 60px', display: 'grid', gridTemplateColumns: '1fr 360px', gap: 48 }}>
          <div style={{ position: 'relative' }}>
            <Pin n={1} style={{ position: 'absolute', left: -28, top: 0, zIndex: 6 }} />
            <Eyebrow style={{ marginBottom: 16 }}>Espaços</Eyebrow>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 18, marginBottom: 36 }}>
              <Venue nome="Restaurante" desc="Cozinha do mar" horario="ter–dom · 12–22h" />
              <Venue nome="Sushi Bar" desc="Balcão e à la carte" horario="qui–dom · 18–23h" />
              <Venue nome="Bar do Deck" desc="Petiscos e drinks" horario="todos · 10–22h" />
            </div>
            <div style={{ position: 'relative' }}>
              <Pin n={3} style={{ position: 'absolute', left: -28, top: 0, zIndex: 6 }} />
              <div className="wf-between" style={{ marginBottom: 16 }}><Eyebrow>Eventos gastronômicos</Eyebrow><Link>Ver na Agenda ↗</Link></div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                {[['Jantar harmonizado', 'sex · 20h'], ['Feijoada do clube', 'sáb · 13h'], ['Noite italiana', 'qui · 20h'], ['Brunch de domingo', 'dom · 11h']].map(([t, q]) => (
                  <div key={t} className="wf-between wf-card" style={{ padding: 14 }}><div><div className="wf-h sm">{t}</div><Data>{q}</Data></div><span style={{ color: 'var(--wf-navy)' }}>›</span></div>
                ))}
              </div>
            </div>
          </div>
          <div style={{ position: 'relative' }}>
            <Pin n={2} style={{ position: 'absolute', left: -28, top: 0, zIndex: 6 }} />
            <div className="wf-card" style={{ padding: 16, marginBottom: 18 }}>
              <div className="wf-between" style={{ marginBottom: 12 }}><Eyebrow>Cardápio da semana</Eyebrow><Tag navy>Sem. 24</Tag></div>
              <div className="wf-stack" style={{ gap: 0, marginBottom: 14 }}><MenuItem nome="Moqueca caiçara" desc="peixe da ilha, dendê e pirão" preco="R$ 98" tag="Para 2" /><MenuItem nome="Risoto de camarão" desc="camarão rosa, limão e ervas" preco="R$ 86" /><MenuItem nome="Pudim da casa" desc="calda de rapadura" preco="R$ 28" /></div>
              <Btn variant="ghost" block>Ver cardápio completo</Btn>
            </div>
            <div className="wf-card" style={{ padding: 16 }}>
              <Eyebrow style={{ marginBottom: 12 }}>Horários</Eyebrow>
              <div className="wf-stack" style={{ gap: 0 }}>{[['Restaurante', 'ter–dom · 12–22h'], ['Sushi Bar', 'qui–dom · 18–23h'], ['Bar do Deck', 'todos · 10–22h']].map(([t, h], i) => <div key={t} className="wf-between" style={{ padding: '11px 0', borderBottom: i < 2 ? '1px solid var(--wf-line-2)' : 'none' }}><Data style={{ color: 'var(--wf-ink)' }}>{t}</Data><Data>{h}</Data></div>)}</div>
            </div>
          </div>
        </div>
        <Footer />
      </Sheet>
    </DCArtboard>,

    // ---------- Cardápio (dinâmico) · Mobile — movido de Serviços ----------
    <DCArtboard key="gasC" id="gastronomia-cardapio" label="Cardápio (dinâmico) · Mobile" width={SHEETW(390)} height={1520} style={ABS}>
      <Sheet mobile vp="Mobile · 390" screenW={390}
        notes={[
          'Rev. 18/jun: o <b>Cardápio</b> agora vive em Gastronomia (saiu de Serviços). <b>Componente dinâmico</b> (CMS semanal).',
          { pin: 1, t: 'Seletor de <b>espaço</b> (Restaurante / Sushi Bar) — cada um tem seu cardápio.' },
          { pin: 2, t: '<b>Menu tipográfico</b>: prato + descrição + preço (mono), com <b>sugestão do chef</b> em destaque. Conteúdo plausível ilustra a estrutura.' },
          '<b>Fonte única</b>: o mesmo componente é reaproveitado na Home e na newsletter.',
        ]}>
        <MobileHeader logged={false} />
        <div style={{ position: 'relative', padding: '14px 16px 6px' }}>
          <div className="wf-crumb" style={{ marginBottom: 12 }}>Gastronomia<span className="sep">›</span>Cardápio</div>
          <div className="wf-between" style={{ marginBottom: 10 }}><div className="wf-h xl">Cardápio</div><Tag navy>Semana 24</Tag></div>
          <Pin n={1} style={{ position: 'absolute', left: 6, top: 96, zIndex: 6 }} />
          <div className="wf-row" style={{ gap: 7, overflow: 'hidden' }}>{['Restaurante', 'Sushi Bar', 'Bar do Deck'].map((t, i) => <Chip key={t} active={i === 0}>{t}</Chip>)}</div>
          <Data style={{ marginTop: 12 }}>Restaurante · ter–dom · 12h–22h</Data>
        </div>
        <div style={{ position: 'relative', padding: '14px 16px 6px' }}>
          <Pin n={2} style={{ position: 'absolute', left: 6, top: 10, zIndex: 6 }} />
          <div className="wf-card" style={{ padding: 0, marginBottom: 20, display: 'flex', overflow: 'hidden', border: '1.5px solid var(--wf-navy)' }}>
            <Img w={104} h={104} label="" style={{ flex: '0 0 104px', border: 'none', borderRadius: 0 }} />
            <div style={{ padding: 12, flex: 1 }}><Eyebrow style={{ marginBottom: 6 }}>Sugestão do chef</Eyebrow><div className="wf-h sm" style={{ marginBottom: 3 }}>Moqueca caiçara</div><T sm style={{ color: 'var(--wf-muted)' }}>peixe da ilha, dendê e pirão</T><Data style={{ color: 'var(--wf-navy)', fontWeight: 700, marginTop: 6, display: 'block' }}>R$ 98</Data></div>
          </div>
          {Object.entries(MENU).map(([sec, items]) => (
            <div key={sec} style={{ marginBottom: 16 }}>
              <Eyebrow style={{ marginBottom: 6 }}>{sec}</Eyebrow>
              <div className="wf-stack" style={{ gap: 0 }}>{items.map((d, i) => <MenuItem key={i} nome={d[0]} desc={d[1]} preco={d[2]} tag={d[3]} />)}</div>
            </div>
          ))}
          <div className="wf-row" style={{ gap: 8, marginTop: 6 }}><Btn variant="ghost" size="sm">Baixar PDF</Btn><Data>Cozinha aberta · ter–dom 12h–22h</Data></div>
        </div>
        <Footer mobile />
      </Sheet>
    </DCArtboard>,

  ];
}
window.gastronomiaArtboards = gastronomiaArtboards;