const { useState, useEffect, useCallback } = React;

/* ============================================================
   WIZARD DATA
   ============================================================ */
const WZ_EVENTS = [
  { id: 'casamento', label: 'Casamento' },
  { id: 'aniversario', label: 'Aniversário' },
  { id: '15anos', label: '15 Anos' },
  { id: 'corporativo', label: 'Corporativo' },
  { id: 'confraternizacao', label: 'Confraternização' },
  { id: 'privativo', label: 'Evento Privativo' },
];

const WZ_GUESTS = ['Até 50', '50 – 100', '100 – 200', '200+'];

const WZ_SPACES = [
  'Jardim e área verde', 'Piscina', 'Salão coberto',
  'Área gourmet', 'Estacionamento',
];

const WZ_GASTRO = [
  'Buffet completo', 'Finger food', 'Churrasco',
  'Bar de drinks', 'Bolo e doces', 'Sem gastronomia',
];

const WZ_TITLES = [
  'Que tipo de evento você está planejando?',
  'Quando e para quantas pessoas?',
  'O que você gostaria para o evento?',
  'Quase lá! Seus dados de contato',
];

/* ============================================================
   PROGRESS DOTS — animated step indicator
   ============================================================ */
function WzProgress({ step }) {
  return (
    <div className="wz-progress">
      {[0,1,2,3].map(i => (
        <React.Fragment key={i}>
          <div className={`wz-dot${i < step ? ' done' : ''}${i === step ? ' current' : ''}`}>
            {i < step ? (
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round"><path d="M3 7l2.5 2.5L11 4.5"/></svg>
            ) : (
              <span>{i + 1}</span>
            )}
          </div>
          {i < 3 && <div className={`wz-line${i < step ? ' filled' : ''}`}></div>}
        </React.Fragment>
      ))}
    </div>
  );
}

/* ============================================================
   STEP 1 — Event Type
   ============================================================ */
function WzStep1({ form, set }) {
  return (
    <div className="wz-body">
      <div className="wz-type-grid">
        {WZ_EVENTS.map(ev => (
          <button key={ev.id} type="button"
            className={`wz-type-card${form.tipo === ev.id ? ' sel' : ''}`}
            onClick={() => set('tipo', ev.id)}>
            <span className="wz-type-label">{ev.label}</span>
          </button>
        ))}
      </div>
    </div>
  );
}

/* ============================================================
   STEP 2 — Date & Guests
   ============================================================ */
function WzStep2({ form, set }) {
  return (
    <div className="wz-body">
      <div className="wz-field">
        <label className="wz-flabel">Data prevista</label>
        <input type="date" className="wz-input"
          value={form.data} onChange={e => set('data', e.target.value)} />
      </div>
      <div className="wz-field">
        <label className="wz-flabel">Número de convidados</label>
        <div className="wz-pill-row">
          {WZ_GUESTS.map(g => (
            <button key={g} type="button"
              className={`wz-pill${form.convidados === g ? ' sel' : ''}`}
              onClick={() => set('convidados', g)}>{g}</button>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   STEP 3 — Details (space + gastronomy)
   ============================================================ */
function WzStep3({ form, set }) {
  const toggle = (field, item) => {
    const list = form[field] || [];
    set(field, list.includes(item) ? list.filter(x => x !== item) : [...list, item]);
  };
  return (
    <div className="wz-body">
      <div className="wz-detail-cols">
        <div>
          <label className="wz-flabel">Espaços desejados</label>
          <div className="wz-pill-wrap">
            {WZ_SPACES.map(s => (
              <button key={s} type="button"
                className={`wz-pill${(form.espacos||[]).includes(s) ? ' sel' : ''}`}
                onClick={() => toggle('espacos', s)}>{s}</button>
            ))}
          </div>
        </div>
        <div>
          <label className="wz-flabel">Gastronomia</label>
          <div className="wz-pill-wrap">
            {WZ_GASTRO.map(g => (
              <button key={g} type="button"
                className={`wz-pill${(form.gastronomia||[]).includes(g) ? ' sel' : ''}`}
                onClick={() => toggle('gastronomia', g)}>{g}</button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   STEP 4 — Contact info
   ============================================================ */
function WzStep4({ form, set, errors }) {
  return (
    <div className="wz-body">
      <div className="wz-field">
        <label className="wz-flabel">Nome completo *</label>
        <input className={`wz-input${errors.nome ? ' err' : ''}`} value={form.nome}
          onChange={e => set('nome', e.target.value)} placeholder="Seu nome" />
        {errors.nome && <span className="wz-err">{errors.nome}</span>}
      </div>
      <div className="wz-field">
        <label className="wz-flabel">WhatsApp *</label>
        <input className={`wz-input${errors.celular ? ' err' : ''}`} value={form.celular}
          onChange={e => set('celular', e.target.value)} placeholder="(21) 99999-9999" />
        {errors.celular && <span className="wz-err">{errors.celular}</span>}
      </div>
      <div className="wz-field">
        <label className="wz-flabel">Algo mais? (opcional)</label>
        <textarea className="wz-input wz-ta" value={form.mensagem} rows={3}
          onChange={e => set('mensagem', e.target.value)} placeholder="Conte mais sobre seu evento..."></textarea>
      </div>
    </div>
  );
}

/* ============================================================
   WIZARD MODAL — orchestrator
   ============================================================ */
function WizardModal({ isOpen, onClose, whatsapp }) {
  const [step, setStep] = useState(0);
  const [errors, setErrors] = useState({});
  const INIT = { tipo: '', data: '', convidados: '', espacos: [], gastronomia: [], nome: '', celular: '', mensagem: '' };
  const [form, setForm] = useState(INIT);

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

  const canNext = step === 0 ? !!form.tipo : true;

  const goNext = () => {
    if (step === 3) { submit(); return; }
    if (canNext) setStep(s => Math.min(s + 1, 3));
  };
  const goBack = () => setStep(s => Math.max(s - 1, 0));

  const submit = () => {
    const e = {};
    if (!form.nome.trim()) e.nome = 'Informe seu nome';
    if (!form.celular.trim()) e.celular = 'Informe seu WhatsApp';
    if (Object.keys(e).length) { setErrors(e); return; }

    const ev = WZ_EVENTS.find(x => x.id === form.tipo)?.label || form.tipo;
    const lines = [
      'Olá! Gostaria de solicitar um orçamento.', '',
      `*Evento:* ${ev}`,
      `*Data:* ${form.data || 'A definir'}`,
      `*Convidados:* ${form.convidados || 'A definir'}`,
    ];
    if (form.espacos.length) lines.push(`*Espaços:* ${form.espacos.join(', ')}`);
    if (form.gastronomia.length) lines.push(`*Gastronomia:* ${form.gastronomia.join(', ')}`);
    lines.push('', `*Nome:* ${form.nome}`, `*WhatsApp:* ${form.celular}`);
    if (form.mensagem) lines.push(`*Obs:* ${form.mensagem}`);

    if (window.trackConversion) window.trackConversion();
    window.open(`https://wa.me/${whatsapp}?text=${encodeURIComponent(lines.join('\n'))}`, '_blank');
    onClose();
    setTimeout(() => { setStep(0); setForm(INIT); setErrors({}); }, 400);
  };

  useEffect(() => {
    if (!isOpen) return;
    const fn = e => { if (e.key === 'Escape') onClose(); };
    document.body.style.overflow = 'hidden';
    window.addEventListener('keydown', fn);
    return () => { document.body.style.overflow = ''; window.removeEventListener('keydown', fn); };
  }, [isOpen]);

  if (!isOpen) return null;

  const Steps = [WzStep1, WzStep2, WzStep3, WzStep4];

  return (
    <div className="wz-overlay" onClick={e => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="wz-card">
        <button className="wz-close" onClick={onClose} aria-label="Fechar">
          <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
            <line x1="4" y1="4" x2="14" y2="14"/><line x1="14" y1="4" x2="4" y2="14"/>
          </svg>
        </button>

        <WzProgress step={step} />
        <h3 className="wz-title">{WZ_TITLES[step]}</h3>

        <div className="wz-track-clip">
          <div className="wz-track" style={{ transform: `translateX(-${step * 25}%)` }}>
            {Steps.map((C, i) => (
              <div key={i} className="wz-panel">
                <C form={form} set={set} errors={errors} />
              </div>
            ))}
          </div>
        </div>

        <div className="wz-nav">
          {step > 0 ? (
            <button type="button" className="wz-back" onClick={goBack}>
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M9 2L4 7l5 5"/></svg>
              Voltar
            </button>
          ) : <div></div>}
          <button type="button" className={`wz-next${!canNext ? ' off' : ''}${step === 3 ? ' submit' : ''}`} onClick={goNext} disabled={!canNext}>
            {step === 3 ? (
              <><WhatsAppIcon size={16} /> Enviar pelo WhatsApp</>
            ) : (
              <>Continuar <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M5 2l5 5-5 5"/></svg></>
            )}
          </button>
        </div>
      </div>
    </div>
  );
}


/* ============================================================
   CONTEXTUAL CTA — mini-cards between sections
   ============================================================ */
const CTA_DATA = {
  about: {
    tag: 'Agende Sua Visita',
    head: 'Quer conhecer o espaço pessoalmente?',
    desc: 'Agende uma visita e sinta a energia do lugar. Sem compromisso.',
    btn: 'Montar Orçamento',
    alt: 'Agendar Visita',
  },
  gallery: {
    tag: 'Próximo Passo',
    head: 'Imaginou seu evento aqui?',
    desc: 'Transforme essa visão em realidade. Solicite um orçamento em poucos cliques.',
    btn: 'Solicitar Orçamento',
  },
  testimonials: {
    tag: 'Celebre Aqui',
    head: 'Pronto para criar memórias?',
    desc: 'Junte-se a quem já viveu momentos especiais na Casa da Mãe Joana.',
    btn: 'Começar Agora',
  },
};

const ctaStyles = {
  section: { padding: '44px 0', position: 'relative' },
  inner: {
    display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: '36px',
    padding: '36px 40px',
    background: 'linear-gradient(135deg, #EDF5F0 0%, #F4F8F5 50%, #F9F6F0 100%)',
    borderRadius: 18, border: '1px solid rgba(45,95,74,0.08)',
  },
  text: { flex: '1 1 300px' },
  tag: {
    display: 'block', fontFamily: 'var(--font-body)', fontSize: '11.5px',
    fontWeight: 600, letterSpacing: '2px', textTransform: 'uppercase',
    color: 'var(--gold)', marginBottom: 8,
  },
  head: {
    fontFamily: 'var(--font-display)', fontSize: 'clamp(1.3rem, 2.8vw, 1.7rem)',
    fontWeight: 500, color: 'var(--forest)', marginBottom: 8, lineHeight: 1.15,
  },
  desc: { fontSize: '14.5px', color: 'var(--stone)', lineHeight: 1.65 },
  btns: { display: 'flex', flexDirection: 'column', gap: 10, flex: '1 1 200px', minWidth: '200px', maxWidth: '350px' },
};

function ContextualCTA({ variant, onOpenWizard, whatsapp }) {
  const d = CTA_DATA[variant] || CTA_DATA.about;
  const wa = `https://wa.me/${whatsapp}?text=${encodeURIComponent('Olá! Gostaria de agendar uma visita ao sítio.')}`;
  return (
    <section style={ctaStyles.section} className="fade-up">
      <div className="container">
        <div style={ctaStyles.inner}>
          <div style={ctaStyles.text}>
            <span style={ctaStyles.tag}>{d.tag}</span>
            <h3 style={ctaStyles.head}>{d.head}</h3>
            <p style={ctaStyles.desc}>{d.desc}</p>
          </div>
          <div style={ctaStyles.btns}>
            <button className="btn-pill btn-pill-green btn-pill-lg" onClick={onOpenWizard}>
              <WhatsAppIcon size={16} /> {d.btn}
            </button>
            {d.alt && (
              <a href={wa} className="btn-pill btn-pill-outline btn-pill-lg"
                onClick={e => { e.preventDefault(); if (window.trackConversion) window.trackConversion(); window.open(wa, '_blank'); }}>
                {d.alt}
              </a>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { WizardModal, ContextualCTA });