const { useState, useRef } = React;

/* === TESTIMONIALS === */
const TESTIMONIALS = [
  { text: 'Fizemos nosso casamento na Casa da Mãe Joana e superou todas as expectativas. O espaço é lindo, a comida incrível e a equipe cuidou de cada detalhe.', name: '[Nome do cliente]', event: 'Casamento' },
  { text: 'Lugar perfeito para quem quer um evento com natureza e boa estrutura. Nossos convidados adoraram o ambiente e a comida.', name: '[Nome do cliente]', event: 'Aniversário' },
  { text: 'A confraternização da empresa foi um sucesso. Ambiente acolhedor, boa comida e fácil acesso. Voltaremos com certeza.', name: '[Nome do cliente]', event: 'Confraternização Corporativa' },
];

function Stars() {
  return (
    <div style={{ display: 'flex', gap: 3 }}>
      {[...Array(5)].map((_, i) => (
        <svg key={i} width="16" height="16" viewBox="0 0 16 16" fill="var(--gold)">
          <path d="M8 0l2.35 4.76 5.25.76-3.8 3.7.9 5.24L8 12.08l-4.7 2.38.9-5.24-3.8-3.7 5.25-.76z"/>
        </svg>
      ))}
    </div>
  );
}

function Testimonials() {
  return (
    <section className="section section-green-soft" id="depoimentos">
      <div className="container">
        <div className="text-center fade-up">
          <span className="section-label">Prova Social</span>
          <h2 className="section-title" style={{ color: 'var(--forest)' }}>
            O Que Dizem Sobre o Espaço
          </h2>
        </div>
        <div className="testimonials-grid">
          {TESTIMONIALS.map((t, i) => (
            <div key={i} className="testimonial-card fade-up" style={{ transitionDelay: `${i * 0.1}s` }}>
              <Stars />
              <p className="testimonial-text">"{t.text}"</p>
              <div className="testimonial-author">
                <div className="testimonial-avatar">{t.name[0] === '[' ? '?' : t.name[0]}</div>
                <div>
                  <p className="testimonial-name">{t.name}</p>
                  <p className="testimonial-event">{t.event}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
        <p className="text-center fade-up" style={{ color: 'var(--mist)', fontSize: 13, marginTop: 24 }}>
          Depoimentos ilustrativos — substitua por avaliações reais dos clientes.
        </p>
      </div>
    </section>
  );
}

/* === FAQ === */
const FAQ_DATA = [
  { q: 'Quais tipos de evento podem ser realizados no espaço?', a: 'A Casa da Mãe Joana recebe casamentos, aniversários, festas de 15 anos, confraternizações, eventos corporativos e celebrações privativas em geral.' },
  { q: 'Como solicito um orçamento?', a: 'Você pode solicitar seu orçamento pelo WhatsApp. A equipe responde com agilidade e monta uma proposta de acordo com seu evento.' },
  { q: 'É possível visitar o espaço antes de fechar?', a: 'Sim. Recomendamos que você agende uma visita para conhecer a estrutura, os ambientes e conversar pessoalmente com a equipe.' },
  { q: 'O espaço pode ser personalizado para meu evento?', a: 'Sim. A equipe trabalha com flexibilidade para adaptar o espaço de acordo com o estilo e as necessidades do seu evento.' },
  { q: 'Com quanta antecedência devo reservar?', a: 'Recomendamos entrar em contato com antecedência, especialmente para datas de alta procura como finais de semana e feriados prolongados.' },
  { q: 'O atendimento é feito por WhatsApp?', a: 'Sim. O contato principal é pelo WhatsApp. A equipe está disponível para tirar dúvidas, agendar visitas e enviar orçamentos.' },
];

function FAQSection() {
  const [openIdx, setOpenIdx] = useState(null);
  return (
    <section className="section section-white" id="faq">
      <div className="container" style={{ maxWidth: 780 }}>
        <div className="text-center fade-up">
          <span className="section-label">Dúvidas Frequentes</span>
          <h2 className="section-title">Perguntas e Respostas</h2>
        </div>
        <div className="faq-list fade-up">
          {FAQ_DATA.map((item, i) => (
            <div key={i} className="faq-item">
              <button className="faq-question" onClick={() => setOpenIdx(openIdx === i ? null : i)}>
                <span>{item.q}</span>
                <span className={`faq-icon ${openIdx === i ? 'open' : ''}`}>
                  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
                    <line x1="9" y1="3" x2="9" y2="15"/><line x1="3" y1="9" x2="15" y2="9"/>
                  </svg>
                </span>
              </button>
              <div className={`faq-answer ${openIdx === i ? 'open' : ''}`}>
                <p>{item.a}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* === CONTACT FORM === */
const EVENT_TYPES = ['Casamento', 'Aniversário', '15 Anos', 'Corporativo', 'Confraternização', 'Evento Privativo', 'Outro'];

function ContactForm({ tweaks }) {
  const [form, setForm] = useState({ nome: '', whatsapp: '', tipo: '', data: '', convidados: '', mensagem: '' });
  const [errors, setErrors] = useState({});
  const [sent, setSent] = useState(false);

  const set = (k, v) => { setForm(f => ({ ...f, [k]: v })); setErrors(e => ({ ...e, [k]: '' })); };

  const validate = () => {
    const e = {};
    if (!form.nome.trim()) e.nome = 'Informe seu nome';
    if (!form.whatsapp.trim()) e.whatsapp = 'Informe seu WhatsApp';
    if (!form.tipo) e.tipo = 'Selecione o tipo de evento';
    return e;
  };

  const submit = (ev) => {
    ev.preventDefault();
    const e = validate();
    if (Object.keys(e).length) { setErrors(e); return; }
    const msg = `Olá! Meu nome é ${form.nome}.\nEvento: ${form.tipo}\nData: ${form.data || 'A definir'}\nConvidados: ${form.convidados || 'A definir'}\n${form.mensagem ? 'Obs: ' + form.mensagem : ''}`;
    if (window.trackConversion) window.trackConversion();
    window.open(`https://wa.me/${tweaks.whatsapp}?text=${encodeURIComponent(msg)}`, '_blank');
    setSent(true);
  };

  if (sent) {
    return (
      <section className="section section-cream" id="contato">
        <div className="container" style={{ maxWidth: 600, textAlign: 'center' }}>
          <div className="fade-up visible">
            <div style={{ fontSize: 48, marginBottom: 16 }}>✓</div>
            <h2 className="section-title">Mensagem Enviada</h2>
            <p className="section-subtitle mx-auto">
              Sua solicitação foi encaminhada pelo WhatsApp. A equipe entrará em contato em breve.
            </p>
            <button className="btn btn-primary" style={{ marginTop: 24 }} onClick={() => setSent(false)}>
              Enviar Nova Solicitação
            </button>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section className="section section-cream" id="contato">
      <div className="container">
        <div className="contact-grid">
          <div className="contact-info fade-up">
            <span className="section-label">Contato</span>
            <h2 className="section-title">Solicite Seu Orçamento</h2>
            <p style={{ color: 'var(--stone)', lineHeight: 1.7, marginBottom: 32 }}>
              Preencha o formulário ao lado ou entre em contato diretamente
              pelo WhatsApp. A equipe responde com agilidade para montar
              a proposta ideal para seu evento.
            </p>
            <div className="contact-detail">
              <WhatsAppIcon size={20} color="var(--sage)"/>
              <span>WhatsApp: (21) 99676-2299</span>
            </div>
            <div className="contact-detail">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="var(--sage)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                <path d="M10 10.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z"/><path d="M10 18s-6-5.34-6-9.5a6 6 0 1112 0c0 4.16-6 9.5-6 9.5z"/>
              </svg>
              <span>Estrada do Pau da Fome, 117<br/>Taquara / Jacarepaguá — Rio de Janeiro</span>
            </div>
          </div>
          <form className="contact-form card fade-up delay-2" onSubmit={submit}>
            <div className="form-group">
              <label className="form-label">Nome completo *</label>
              <input className={`form-input ${errors.nome ? 'error' : ''}`} value={form.nome}
                onChange={e => set('nome', e.target.value)} placeholder="Seu nome"/>
              {errors.nome && <span className="form-error">{errors.nome}</span>}
            </div>
            <div className="form-group">
              <label className="form-label">WhatsApp / Telefone *</label>
              <input className={`form-input ${errors.whatsapp ? 'error' : ''}`} value={form.whatsapp}
                onChange={e => set('whatsapp', e.target.value)} placeholder="(21) 99999-9999"/>
              {errors.whatsapp && <span className="form-error">{errors.whatsapp}</span>}
            </div>
            <div className="form-group">
              <label className="form-label">Tipo de evento *</label>
              <select className={`form-select ${errors.tipo ? 'error' : ''}`} value={form.tipo}
                onChange={e => set('tipo', e.target.value)}>
                <option value="">Selecione...</option>
                {EVENT_TYPES.map(t => <option key={t} value={t}>{t}</option>)}
              </select>
              {errors.tipo && <span className="form-error">{errors.tipo}</span>}
            </div>
            <div className="form-row">
              <div className="form-group">
                <label className="form-label">Data estimada</label>
                <input className="form-input" type="date" value={form.data}
                  onChange={e => set('data', e.target.value)}/>
              </div>
              <div className="form-group">
                <label className="form-label">Nº de convidados</label>
                <input className="form-input" value={form.convidados}
                  onChange={e => set('convidados', e.target.value)} placeholder="Ex: 80"/>
              </div>
            </div>
            <div className="form-group">
              <label className="form-label">Mensagem (opcional)</label>
              <textarea className="form-textarea" value={form.mensagem}
                onChange={e => set('mensagem', e.target.value)} placeholder="Conte mais sobre seu evento..." rows="3"></textarea>
            </div>
            <button type="submit" className="btn btn-primary" style={{ width: '100%', padding: '14px 0', fontSize: 16 }}>
              Enviar Solicitação
            </button>
          </form>
        </div>
      </div>
    </section>
  );
}

/* === FINAL CTA === */
function FinalCTA({ tweaks }) {
  const wa = `https://wa.me/${tweaks.whatsapp}?text=${encodeURIComponent('Olá! Gostaria de solicitar um orçamento para evento no sítio.')}`;
  return (
    <section className="cta-final">
      <div className="cta-final-bg"></div>
      <div className="container" style={{ position: 'relative', zIndex: 2, textAlign: 'center', maxWidth: 700 }}>
        <div className="fade-up">
          <span className="section-label" style={{ color: 'var(--gold-light)' }}>Próximo Passo</span>
          <h2 style={{ color: 'white', fontFamily: 'var(--font-display)', fontSize: 'clamp(1.8rem, 4vw, 2.8rem)', fontWeight: 500, lineHeight: 1.2, marginBottom: 20 }}>
            Pronto para Realizar Seu Evento em um Lugar Especial?
          </h2>
          <p style={{ color: 'rgba(255,255,255,0.8)', fontSize: 17, lineHeight: 1.7, marginBottom: 36 }}>
            Se você procura um sítio com charme, natureza e estrutura para seu
            evento em Jacarepaguá, fale com a equipe e dê o próximo passo.
          </p>
          <div style={{ display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap' }}>
            <a href={wa} onClick={e => { e.preventDefault(); if (window.trackConversion) window.trackConversion(); window.open(wa, '_blank'); }} className="btn btn-whatsapp btn-lg">
              <WhatsAppIcon size={18}/> Solicitar Orçamento
            </a>
            <a href="#contato" className="btn btn-outline-light btn-lg">Agendar Visita</a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* === WHATSAPP FLOATING BUTTON === */
function WhatsAppFloat({ tweaks }) {
  const wa = `https://wa.me/${tweaks.whatsapp}?text=${encodeURIComponent('Olá! Gostaria de informações sobre aluguel do sítio para evento.')}`;
  return (
    <a href={wa} onClick={e => { e.preventDefault(); if (window.trackConversion) window.trackConversion(); window.open(wa, '_blank'); }} className="whatsapp-float" aria-label="WhatsApp">
      <WhatsAppIcon size={28} color="white"/>
    </a>
  );
}

/* === FOOTER === */
function SiteFooter() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-inner">
          <div>
            <p className="footer-brand">
              <img src="images/logo.png" alt="Casa da Mãe Joana" style={{ height: 36, borderRadius: '50%', display: 'inline-block', verticalAlign: 'middle', marginRight: 10 }}/>
              Casa da Mãe Joana
            </p>
            <p className="footer-addr">Estrada do Pau da Fome, 117 — Taquara / Jacarepaguá<br/>Rio de Janeiro — RJ</p>
          </div>
          <div className="footer-links">
            <a href="#sobre">O Espaço</a>
            <a href="#eventos">Eventos</a>
            <a href="#como-funciona">Como Funciona</a>
            <a href="#contato">Contato</a>
          </div>
        </div>
        <div className="footer-bottom">
          <p>© 2026 Casa da Mãe Joana. Todos os direitos reservados.</p>
          <p className="footer-seo">Sítio para eventos em Jacarepaguá · Aluguel de espaço para casamentos, aniversários e confraternizações no Rio de Janeiro</p>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Testimonials, FAQSection, ContactForm, FinalCTA, WhatsAppFloat, SiteFooter });