/* global React, ReactDOM, Nav, Footer, WhatsFab, Flourish, PageHero, useReveal, openWhats */

const SERVICES = [
  {
    image: 'uploads/services-casamentos.png',
    tag: '01 · Casamentos',
    title: <>O sim merece <em>uma mesa à altura.</em></>,
    paragraphs: [
      'No seu casamento, preparamos os alimentos no local e montamos a mesa do buffet para que os convidados se sirvam com liberdade e conforto.',
      'Trabalhamos com cardápios completos de comidas, salgados e bebidas, com opções alcoólicas e não alcoólicas.'
    ],
    features: ['Preparo no local', 'Mesa de buffet montada (autosserviço)', 'Comidas e salgados para o evento', 'Bebidas com e sem álcool', 'Bar completo com barman']
  },
  {
    image: 'uploads/services-aniversarios.png',
    tag: '02 · Aniversários',
    title: <>Celebrar mais <em>um ano de história.</em></>,
    paragraphs: [
      'De aniversários infantis a celebrações de 50, 60 e 70 anos, montamos o buffet completo de acordo com o perfil dos convidados.',
      'Nossa entrega é focada em comida, salgados e bebidas, sempre com organização e cuidado na montagem da mesa.'
    ],
    features: ['Mesa de buffet montada', 'Cardápio de comidas e salgados', 'Bebidas com e sem álcool', 'Bar completo com barman', 'Equipe de apoio no evento']
  },
  {
    image: 'uploads/services-bodas.png',
    tag: '03 · Bodas',
    title: <>Décadas juntos, <em>celebradas com sabor.</em></>,
    paragraphs: [
      'Bodas pedem uma celebração especial com mesa farta e bem organizada para receber família e amigos.',
      'Cuidamos do preparo e da montagem do buffet no local, respeitando o estilo de cada comemoração.'
    ],
    features: ['Buffet completo em mesa montada', 'Comidas e salgados variados', 'Bebidas com e sem álcool', 'Bar completo com barman', 'Atendimento organizado no local']
  },
  {
    image: 'uploads/services-corporativo.png',
    tag: '04 · Eventos Corporativos',
    title: <>Padrão profissional, <em>sabor memorável.</em></>,
    paragraphs: [
      'Atendemos eventos corporativos com buffet montado no local, facilitando o serviço para equipes e convidados.',
      'Pontualidade, organização e qualidade dos alimentos são prioridade em cada evento da empresa.'
    ],
    features: ['Buffet montado para autosserviço', 'Opções para reuniões e confraternizações', 'Comidas, salgados e bebidas', 'Bar completo com barman', 'Operação no local do evento']
  },
  {
    image: 'uploads/services-religioso.png',
    tag: '05 · Eventos Religiosos',
    title: <>Servir é também <em>um ato de fé.</em></>,
    paragraphs: [
      'Atendemos eventos religiosos com respeito ao momento e foco em uma mesa de buffet bem servida para a comunidade.',
      'Fazemos o preparo e a montagem no local, com cardápios alinhados ao perfil da celebração.'
    ],
    features: ['Mesa de buffet montada', 'Comidas e salgados para grupos', 'Bebidas com e sem álcool', 'Bar completo com barman (quando solicitado)', 'Atendimento para diferentes portes']
  },
  {
    image: 'uploads/services-formaturas.png',
    tag: '06 · Formaturas',
    title: <>O fim de uma jornada <em>pede banquete.</em></>,
    paragraphs: [
      'Para formaturas e celebrações de turma, montamos um buffet completo para os convidados se servirem durante o evento.',
      'Unimos variedade de comidas e salgados com bebidas para acompanhar o ritmo da comemoração.'
    ],
    features: ['Preparo e montagem no local', 'Mesa de buffet completa', 'Comidas e salgados variados', 'Bebidas com e sem álcool', 'Bar completo com barman']
  },
  {
    image: 'uploads/services-cafe-colonial.png',
    tag: '07 · Café Colonial',
    title: <>Tradição e aconchego <em>na mesa.</em></>,
    paragraphs: [
      'Também realizamos eventos de café colonial com uma mesa completa, pensada para encontros familiares e celebrações especiais.',
      'Tudo é preparado com cuidado e organizado em formato de buffet para autosserviço.'
    ],
    features: ['Mesa de café colonial montada', 'Variedade de salgados e comidas', 'Bebidas com e sem álcool', 'Serviço no local do evento', 'Atendimento para grupos diversos']
  },
  {
    image: 'uploads/services-confraternizacoes.png',
    tag: '08 · Confraternizações',
    title: <>Reunir os seus, <em>com fartura.</em></>,
    paragraphs: [
      'Para confraternizações, organizamos uma mesa de buffet completa para que todos aproveitem o evento com praticidade.',
      'Atendemos em residências, salões e espaços corporativos com o mesmo padrão de cuidado.'
    ],
    features: ['Buffet montado no local', 'Comidas e salgados para diferentes públicos', 'Bebidas com e sem álcool', 'Bar completo com barman', 'Equipe de apoio durante o evento']
  }
];

const MENU_CATALOG = [
  'Churrasco 1',
  'Churrasco 2',
  'Boteco 1',
  'Boteco 2',
  'Strogonoff de Frango',
  'Parmegiana de Frango',
  'Carne ao Molho Madeira',
  'Feijoada',
  'Comida Mineira',
  'Massas 1',
  'Massas 2',
  'Kids 1',
  'Kids 2',
  'Kids 3',
  'Kids 4',
  'Cardápio Junino'
];

const ServiceRow = ({ s, reverse, idx }) => (
  <div className={`service-row ${reverse ? 'reverse' : ''}`}>
    <div className="container">
      <div className="service-row-grid">
        <div className="service-img reveal" style={{
          backgroundImage: `url(${s.image})`,
          backgroundSize: 'cover',
          backgroundPosition: 'center'
        }} />
        <div className="reveal">
          <span className="service-tag">{s.tag}</span>
          <h2>{s.title}</h2>
          {s.paragraphs.map((p, i) => <p key={i}>{p}</p>)}
          <ul className="service-features">
            {s.features.map((f, i) => <li key={i}>{f}</li>)}
          </ul>
          <div className="service-cta">
            <a href="orcamento.html" className="btn">Solicitar Orçamento</a>
            <button className="btn btn-ghost" onClick={() => openWhats('5511969219101', `Olá! Tenho interesse no serviço de ${s.tag.split('· ')[1]}.`)}>WhatsApp</button>
          </div>
        </div>
      </div>
    </div>
  </div>
);

const Process = () => (
  <section className="process">
    <div className="container">
      <div className="section-head reveal">
        <span className="eyebrow">Como Trabalhamos</span>
        <h2 className="h2" style={{ marginTop: 28 }}>Do primeiro contato <em>ao último brinde.</em></h2>
        <p className="lede">Um processo simples, transparente e cuidadoso — para que você se concentre em celebrar.</p>
      </div>
      <div className="process-grid reveal">
        <div className="process-step">
          <div className="process-num">i</div>
          <h3>Conversa</h3>
          <p>Você nos conta sobre o evento — data, estilo, número de convidados, expectativas.</p>
        </div>
        <div className="process-step">
          <div className="process-num">ii</div>
          <h3>Proposta</h3>
          <p>Em até 24h, enviamos cardápio e orçamento personalizados para a sua celebração.</p>
        </div>
        <div className="process-step">
          <div className="process-num">iii</div>
          <h3>Ajustes</h3>
          <p>Refinamos juntos cada detalhe — sabores, apresentação, equipe, cronograma.</p>
        </div>
        <div className="process-step">
          <div className="process-num">iv</div>
          <h3>Execução</h3>
          <p>Chegamos antes, montamos com cuidado, servimos com afeto. Você só celebra.</p>
        </div>
      </div>
    </div>
  </section>
);

const MenuCatalog = () => (
  <section className="process" style={{ paddingTop: 110, paddingBottom: 110 }}>
    <div className="container">
      <div className="section-head reveal">
        <span className="eyebrow">Cardápios Oficiais</span>
        <h2 className="h2" style={{ marginTop: 28 }}>Modalidades de buffet <em>que atendemos.</em></h2>
        <p className="lede">Sem valores no site. Enviamos o orçamento conforme data, local, quantidade de convidados e estrutura do evento.</p>
      </div>
      <div className="services-grid reveal" style={{ gridTemplateColumns: 'repeat(4, 1fr)' }}>
        {MENU_CATALOG.map((item) => (
          <div key={item} className="service-card" style={{ padding: '26px 22px' }}>
            <h3 className="service-title" style={{ fontSize: 24, marginBottom: 0 }}>{item}</h3>
          </div>
        ))}
      </div>
      <div className="section-head reveal" style={{ marginTop: 48, marginBottom: 0 }}>
        <p className="lede">
          Também oferecemos <strong>Open Bar</strong> e <strong>Cascata de Chocolate</strong> como serviços adicionais,
          contratados junto com o buffet.
        </p>
      </div>
    </div>
  </section>
);

const CTAStrip = () => (
  <section className="cta-strip">
    <div className="container reveal">
      <Flourish style={{ width: 240, margin: '0 auto 32px', display: 'block' }} />
      <span className="eyebrow">Pronto para começar?</span>
      <h2 className="h2" style={{ marginTop: 28 }}>Conte sobre <em>o seu evento.</em></h2>
      <p className="lede" style={{ margin: '24px auto 40px' }}>Use a calculadora de orçamento para uma estimativa imediata, ou fale direto com a gente.</p>
      <div style={{ display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap' }}>
        <a href="orcamento.html" className="btn">Calcular Orçamento</a>
        <button className="btn btn-ghost" onClick={() => openWhats()}>Chamar no WhatsApp</button>
      </div>
    </div>
  </section>
);

function App() {
  useReveal();
  return (
    <>
      <Nav onWhats={() => openWhats()} />
      <PageHero
        breadcrumb={<span>Serviços</span>}
        title={<>Nossos <em className="gold-text">serviços.</em></>}
        lede="Buffet montado no local, com convidados se servindo à vontade. Comidas, salgados e bebidas com e sem álcool para diferentes tipos de evento."
      />
      {SERVICES.map((s, i) => <ServiceRow key={i} s={s} idx={i} reverse={i % 2 === 1} />)}
      <Process />
      <MenuCatalog />
      <CTAStrip />
      <Footer />
      <WhatsFab onClick={() => openWhats()} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);