/* global React, ReactDOM, Nav, Footer, WhatsFab, Flourish, PageHero, useReveal, openWhats */
const { useState } = React;

const EVENT_TYPES = [
  'Casamento', 'Aniversário', 'Bodas', 'Corporativo',
  'Religioso', 'Formatura', 'Café Colonial', 'Confraternização', 'Festa Junina', 'Outro'
];

const SERVICE_TYPES = [
  { id: 'buffet',   label: 'Buffet montado',     desc: 'Mesa montada no local para autosserviço' },
  { id: 'junino',   label: 'Cardápio junino',    desc: 'Menu sazonal para festas juninas' },
  { id: 'bar',      label: 'Bar completo',       desc: 'Barman com bebidas alcoólicas e não alcoólicas' },
  { id: 'cascata',  label: 'Cascata de chocolate', desc: 'Serviço adicional junto da contratação do buffet' },
  { id: 'coffee',   label: 'Café colonial',      desc: 'Formato completo para encontros e celebrações' },
  { id: 'salgados', label: 'Comidas e salgados', desc: 'Cardápio variado para diferentes públicos' },
  { id: 'nao-sei',  label: 'Ainda não sei',      desc: 'A equipe pode me orientar' },
];

function App() {
  useReveal();
  const [submitted, setSubmitted] = useState(false);
  const [data, setData] = useState({
    nome: '', telefone: '', email: '',
    eventType: '', service: '', guests: '', dataEvento: '', mensagem: ''
  });

  const update = (k, v) => setData(d => ({ ...d, [k]: v }));

  const submit = (e) => {
    e.preventDefault();
    const lines = [
      `Olá! Gostaria de solicitar um orçamento:\n`,
      `👤 Nome: ${data.nome}`,
      `📱 WhatsApp: ${data.telefone}`,
      data.email     ? `📧 E-mail: ${data.email}`              : null,
      data.eventType ? `🎉 Tipo de evento: ${data.eventType}`  : null,
      data.service   ? `🍽️ Estilo de serviço: ${data.service}` : null,
      data.guests    ? `👥 Convidados (aprox.): ${data.guests}` : null,
      data.dataEvento ? `📅 Data prevista: ${data.dataEvento}` : null,
      data.mensagem  ? `💬 Detalhes: ${data.mensagem}`         : null,
    ].filter(Boolean).join('\n');
    openWhats('5511969219101', lines);
    setSubmitted(true);
  };

  return (
    <>
      <Nav onWhats={() => openWhats()} />
      <PageHero
        breadcrumb={<span>Orçamento</span>}
        title={<>Solicite seu <em className="gold-text">orçamento.</em></>}
        lede="Preencha as informações do seu evento e falaremos diretamente pelo WhatsApp para montar a proposta ideal para você."
      />

      <section className="quote-page">
        <div className="container">
          <div className="quote-layout">

            {/* FORMULÁRIO */}
            <div className="quote-form-wrap">
              {submitted ? (
                <div className="success-card reveal">
                  <div className="check-big">
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
                      <path d="M5 12l5 5L20 7" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                  </div>
                  <Flourish style={{ width: 180, margin: '20px auto 24px', display: 'block' }} />
                  <h2>Mensagem <em>enviada.</em></h2>
                  <p>O WhatsApp foi aberto com todas as informações do seu evento. Nossa equipe responderá em até 24h com uma proposta personalizada.</p>
                  <div style={{ marginTop: 32, display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
                    <button className="btn" onClick={() => openWhats('5511969219101', 'Olá! Gostaria de conversar sobre meu orçamento.')}>
                      Abrir WhatsApp novamente
                    </button>
                    <a href="index.html" className="btn btn-ghost">Voltar ao início</a>
                  </div>
                </div>
              ) : (
                <form className="quote-form" onSubmit={submit}>
                  <div className="form-section">
                    <div className="form-section-title">— Sobre você</div>
                    <div className="field">
                      <label>Nome completo *</label>
                      <input type="text" required placeholder="Como podemos te chamar?"
                        value={data.nome} onChange={e => update('nome', e.target.value)} />
                    </div>
                    <div className="field-row">
                      <div className="field">
                        <label>WhatsApp *</label>
                        <input type="tel" required placeholder="(11) 9 0000-0000"
                          value={data.telefone} onChange={e => update('telefone', e.target.value)} />
                      </div>
                      <div className="field">
                        <label>E-mail</label>
                        <input type="email" placeholder="seu@email.com"
                          value={data.email} onChange={e => update('email', e.target.value)} />
                      </div>
                    </div>
                  </div>

                  <div className="form-section">
                    <div className="form-section-title">— Sobre o evento</div>
                    <div className="field">
                      <label>Tipo de evento</label>
                      <div className="type-list">
                        {EVENT_TYPES.map(t => (
                          <label key={t} className={data.eventType === t ? 'checked' : ''}
                            onClick={() => update('eventType', t)}>
                            {t}
                          </label>
                        ))}
                      </div>
                    </div>
                    <div className="field-row" style={{ marginTop: 28 }}>
                      <div className="field">
                        <label>Convidados (aproximado)</label>
                        <input type="number" min="1" placeholder="Ex: 80"
                          value={data.guests} onChange={e => update('guests', e.target.value)} />
                      </div>
                      <div className="field">
                        <label>Data prevista</label>
                        <input type="date"
                          value={data.dataEvento} onChange={e => update('dataEvento', e.target.value)} />
                      </div>
                    </div>
                  </div>

                  <div className="form-section">
                    <div className="form-section-title">— Estilo de serviço</div>
                    <div className="svc-tiles">
                      {SERVICE_TYPES.map(s => (
                        <button key={s.id} type="button"
                          className={`svc-tile ${data.service === s.label ? 'selected' : ''}`}
                          onClick={() => update('service', s.label)}>
                          <div className="check">
                            <svg width="10" height="10" viewBox="0 0 24 24" fill="none">
                              <path d="M5 12l5 5L20 7" stroke="#0a0a0a" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
                            </svg>
                          </div>
                          <h4>{s.label}</h4>
                          <p>{s.desc}</p>
                        </button>
                      ))}
                    </div>
                  </div>

                  <div className="form-section">
                    <div className="form-section-title">— Detalhes adicionais</div>
                    <div className="field">
                      <label>Conte mais sobre o evento (opcional)</label>
                      <textarea rows="4" placeholder="Local, tema, cardápio que imagina, dúvidas…"
                        value={data.mensagem} onChange={e => update('mensagem', e.target.value)} />
                    </div>
                  </div>

                  <button type="submit" className="btn btn-submit">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                      <path d="M20.5 3.5A11.9 11.9 0 0 0 12 0C5.4 0 0 5.4 0 12c0 2.1.6 4.2 1.6 6L0 24l6.2-1.6c1.7.9 3.7 1.4 5.7 1.4h.1C18.6 23.8 24 18.4 24 11.9c0-3.2-1.2-6.2-3.5-8.4zM12 21.8h-.1c-1.8 0-3.6-.5-5.1-1.4l-.4-.2-3.7 1 1-3.6-.2-.4c-1-1.6-1.5-3.4-1.5-5.3 0-5.4 4.5-9.9 9.9-9.9 2.6 0 5.1 1 7 2.9s2.9 4.4 2.9 7c0 5.5-4.4 9.9-9.8 9.9zm5.5-7.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.7.1-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-1.7-.8-2.8-1.5-3.9-3.4-.3-.5.3-.5.8-1.5.1-.2.1-.3 0-.5 0-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.2.2 2.1 3.2 5.1 4.5.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.7-.7 2-1.4.2-.6.2-1.2.2-1.4-.1-.1-.3-.2-.5-.3z"/>
                    </svg>
                    Enviar pelo WhatsApp
                  </button>
                  <p className="form-note">Ao clicar, o WhatsApp abrirá com suas informações preenchidas.</p>
                </form>
              )}
            </div>

            {/* PAINEL LATERAL */}
            <aside className="quote-aside reveal">
              <Flourish style={{ width: 160, margin: '0 auto 28px', display: 'block' }} />
              <div className="aside-title">Por que falar direto com a gente?</div>
              <ul className="aside-list">
                <li>
                  <span className="aside-icon">◇</span>
                  <div><strong>Orçamento personalizado</strong><p>Cada evento é único. Os valores dependem de cardápio, logística, data e local — montamos a proposta ideal para você.</p></div>
                </li>
                <li>
                  <span className="aside-icon">◇</span>
                  <div><strong>Resposta em até 24h</strong><p>Nossa equipe responde rapidamente com uma proposta completa e detalhada.</p></div>
                </li>
                <li>
                  <span className="aside-icon">◇</span>
                  <div><strong>Sem compromisso</strong><p>Solicitar um orçamento é gratuito e sem nenhuma obrigação.</p></div>
                </li>
                <li>
                  <span className="aside-icon">◇</span>
                  <div><strong>Todo Estado de SP</strong><p>Atendemos em toda São Paulo, da capital ao interior.</p></div>
                </li>
              </ul>
              <div className="aside-contact">
                <div className="aside-contact-label">Prefere ligar ou escrever?</div>
                <a href="https://wa.me/5511969219101" target="_blank" rel="noreferrer" className="aside-whats">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M20.5 3.5A11.9 11.9 0 0 0 12 0C5.4 0 0 5.4 0 12c0 2.1.6 4.2 1.6 6L0 24l6.2-1.6c1.7.9 3.7 1.4 5.7 1.4h.1C18.6 23.8 24 18.4 24 11.9c0-3.2-1.2-6.2-3.5-8.4zM12 21.8h-.1c-1.8 0-3.6-.5-5.1-1.4l-.4-.2-3.7 1 1-3.6-.2-.4c-1-1.6-1.5-3.4-1.5-5.3 0-5.4 4.5-9.9 9.9-9.9 2.6 0 5.1 1 7 2.9s2.9 4.4 2.9 7c0 5.5-4.4 9.9-9.8 9.9zm5.5-7.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.7.1-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-1.7-.8-2.8-1.5-3.9-3.4-.3-.5.3-.5.8-1.5.1-.2.1-.3 0-.5 0-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.2.2 2.1 3.2 5.1 4.5.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.7-.7 2-1.4.2-.6.2-1.2.2-1.4-.1-.1-.3-.2-.5-.3z"/>
                  </svg>
                  (11) 96921-9101
                </a>
                <a href="mailto:buffetmaosungidas@outlook.com" className="aside-email">
                  buffetmaosungidas@outlook.com
                </a>
              </div>
              <div className="aside-payment">
                <div className="aside-payment-label">Formas de Pagamento</div>
                <div className="aside-payment-badges">
                  <span>PIX</span><span>Visa</span><span>Mastercard</span>
                  <span>Elo</span><span>Hipercard</span><span>Amex</span>
                  <span>PagSeguro</span>
                </div>
              </div>
            </aside>

          </div>
        </div>
      </section>

      <Footer />
      <WhatsFab onClick={() => openWhats()} />
    </>
  );
}

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