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

const StoryBlock = ({ num, title, paragraphs, image, reverse }) => (
  <div className={`story-block ${reverse ? 'reverse' : ''}`}>
    <div className="container">
      <div className="story-grid">
        <div className="story-img reveal" style={{
          backgroundImage: `url(${image})`,
          backgroundSize: 'cover',
          backgroundPosition: 'center'
        }} />
        <div className="story-text reveal">
          <div className="num">— {num}</div>
          <h3>{title}</h3>
          {paragraphs.map((p, i) => <p key={i}>{p}</p>)}
        </div>
      </div>
    </div>
  </div>
);

const Story = () => (
  <section style={{ padding: '60px 0' }}>
    <StoryBlock
      num="01"
      image="uploads/sobre-primeiros-eventos.png"
      title={<>Nasceu de um <em>chamado.</em></>}
      paragraphs={[
        'O Mãos Ungidas começou na cozinha de casa, com um pequeno grupo servindo eventos da comunidade. O que era um gesto de generosidade rapidamente se transformou em propósito — e o propósito virou profissão.',
        'Hoje, somos um buffet a domicílio referência em São Paulo, com a mesma essência de quando começamos: cozinhar com cuidado, servir com afeto e tornar cada celebração inesquecível.'
      ]}
    />
    <StoryBlock
      num="02"
      reverse
      image="uploads/sobre-cozinha.png"
      title={<>Sabor com <em>intenção.</em></>}
      paragraphs={[
        'Não acreditamos em cardápios genéricos. Cada evento é estudado: o estilo da celebração, o perfil dos convidados, restrições, gostos da família. O cardápio nasce dessa conversa.',
        'Trabalhamos com fornecedores selecionados, ingredientes frescos e receitas que combinam tradição brasileira com toques contemporâneos. O resultado é uma mesa que conta história — a sua.'
      ]}
    />
    <StoryBlock
      num="03"
      image="uploads/sobre-mesa-servida.png"
      title={<>Uma mesa que <em>fala por si.</em></>}
      paragraphs={[
        'Cada detalhe da nossa montagem é pensado para surpreender: dos pratos aquecidos na hora certa às travessas organizadas com precisão e cuidado estético.',
        'O resultado está na mesa — e na memória afetiva de quem senta ao redor dela. É isso que nos motiva a fazer bem feito em cada evento.'
      ]}
    />
  </section>
);

const Values = () => (
  <section className="values">
    <div className="container">
      <div className="section-head reveal">
        <span className="eyebrow">Nossos Valores</span>
        <h2 className="h2" style={{ marginTop: 28 }}>Aquilo que <em>nos move.</em></h2>
        <p className="lede">Quatro princípios guiam cada decisão — do primeiro contato à última taça servida.</p>
      </div>
      <div className="values-grid reveal">
        <div className="value-card">
          <div className="value-icon">i</div>
          <h3>Intenção</h3>
          <p>Cada prato carrega um propósito. Nada é feito no automático — tudo é pensado para a sua celebração específica.</p>
        </div>
        <div className="value-card">
          <div className="value-icon">e</div>
          <h3>Excelência</h3>
          <p>Padrão profissional em cada detalhe — da cozinha à apresentação, do uniforme à pontualidade.</p>
        </div>
        <div className="value-card">
          <div className="value-icon">a</div>
          <h3>Afeto</h3>
          <p>Servimos com calor humano. Eventos não são tarefas — são momentos da vida das pessoas.</p>
        </div>
      </div>
    </div>
  </section>
);

const Stats = () => (
  <section className="stats">
    <div className="container">
      <div className="section-head reveal">
        <span className="eyebrow">Em Números</span>
        <h2 className="h2" style={{ marginTop: 28 }}>Anos servindo <em>histórias.</em></h2>
      </div>
      <div className="stats-grid reveal">
        <div className="stat-card">
          <div className="stat-num">+10</div>
          <div className="stat-label">Anos de Experiência</div>
        </div>
        <div className="stat-card">
          <div className="stat-num">+8</div>
          <div className="stat-label">Tipos de Evento</div>
        </div>
        <div className="stat-card">
          <div className="stat-num">24h</div>
          <div className="stat-label">Para Responder</div>
        </div>
        <div className="stat-card">
          <div className="stat-num" style={{ fontSize: 'clamp(22px, 2.8vw, 40px)', lineHeight: 1.15 }}>Todo o Estado de SP</div>
          <div className="stat-label">A Domicílio</div>
        </div>
      </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">Vamos Conversar</span>
      <h2 className="h2" style={{ marginTop: 28 }}>Pronto para <em>fazer parte</em> da nossa história?</h2>
      <p className="lede" style={{ margin: '24px auto 40px' }}>Conte sobre o seu evento. Em até 24h enviamos um orçamento personalizado.</p>
      <div style={{ display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap' }}>
        <a href="orcamento.html" className="btn">Solicitar 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>Sobre Nós</span>}
        title={<>Nossa <em className="gold-text">história.</em></>}
        lede="Conheça a história e os valores do Mãos Ungidas — mais de uma década servindo com propósito, cuidado e sabor em todo o Estado de São Paulo."
      />
      <Story />
      <Values />
      <Stats />
      <CTAStrip />
      <Footer />
      <WhatsFab onClick={() => openWhats()} />
    </>
  );
}

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