/* @jsx React.createElement */
const { useState: useWState } = React;

const _sb = supabase.createClient(
  'https://yjlmaagsddjgyxnnvhgi.supabase.co',
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InlqbG1hYWdzZGRqZ3l4bm52aGdpIiwicm9sZSI6ImFub24iLCJpYXQiOjE3Nzc2ODY3ODgsImV4cCI6MjA5MzI2Mjc4OH0.3tl2Ib9oTgPM3nSHl0VL5KhZ3RF97lqjIjo5pwz3omQ'
);

function WaitlistPage() {
  const [step, setStep] = useWState('form');
  const [name, setName] = useWState('');
  const [email, setEmail] = useWState('');
  const [petName, setPetName] = useWState('');
  const [interests, setInterests] = useWState([]);
  const [loading, setLoading] = useWState(false);
  const [errorMsg, setErrorMsg] = useWState('');

  const toggle = (k) => setInterests(p => p.includes(k) ? p.filter(x => x !== k) : [...p, k]);

  const submit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setErrorMsg('');
    const { error } = await _sb.from('waitlist').insert({
      nome: name,
      nome_pet: petName || null,
      email: email,
      interesse: interests.length > 0 ? interests : null,
    });
    setLoading(false);
    if (error) {
      if (error.code === '23505') {
        setErrorMsg('Este e-mail já está na lista. Te avisaremos em breve!');
      } else {
        setErrorMsg('Algo deu errado. Tente novamente.');
      }
      return;
    }
    setStep('success');
  };

  if (step === 'success') {
    return (
      <main style={S.successWrap}>
        <div style={S.successCard}>
          <div style={S.successMark}>
            <svg width="56" height="56" viewBox="0 0 56 56" fill="none">
              <circle cx="28" cy="28" r="27" stroke="currentColor" strokeWidth="1.5" opacity="0.4" />
              <path d="M17 28.5 L25 36.5 L40 20" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </div>
          <div style={S.eyebrowDark}>— VOCÊ ESTÁ NA LISTA —</div>
          <h1 style={S.successTitle}>Pronto, {name.split(' ')[0] || 'tutor'}.<br/><span style={S.flair}>{petName ? `O ${petName} agradece.` : 'A gente avisa.'}</span></h1>
          <p style={S.successLede}>
            Te avisaremos por e-mail assim que abrirmos as primeiras encomendas. Os primeiros da lista ganham <strong>10% off</strong> no kit completo.
          </p>
          <div style={S.successDivider}></div>
          <div style={S.successFoot}>
            Te avisaremos por aqui assim que abrirmos as primeiras encomendas.
          </div>
        </div>
      </main>
    );
  }

  return (
    <main>
      <div style={S.brandBar}>
        <div style={S.brandMark}>BAZZO <span style={S.brandSub}>PET CARE</span></div>
      </div>

      <section style={S.wrap}>
        <div style={S.copy}>
          <div style={S.eyebrow}>— EM BREVE · LANÇAMENTO 2026 —</div>
          <h1 style={S.title}>
            Cosméticos para o cachorro<br/>
            <span style={S.flair}>que vive como cachorro.</span>
          </h1>
          <p style={S.lede}>
            A Bazzo nasce em 2026 com três lançamentos: shampoo em barra, condicionador em barra e banho a seco. Fórmulas naturais, aprovadas por veterinários. Deixe seu e-mail e seja avisado em primeira mão quando abrirmos as encomendas.
          </p>

          <form onSubmit={submit} style={S.form}>
            <div style={S.twoCol}>
              <label style={S.label}>
                <span style={S.labelText}>Seu nome</span>
                <input type="text" required value={name} onChange={e => setName(e.target.value)} placeholder="Como podemos te chamar?" style={S.input} />
              </label>
              <label style={S.label}>
                <span style={S.labelText}>Nome do pet <span style={S.optional}>(opcional)</span></span>
                <input type="text" value={petName} onChange={e => setPetName(e.target.value)} placeholder="Ex.: Athena" style={S.input} />
              </label>
            </div>

            <label style={S.label}>
              <span style={S.labelText}>E-mail</span>
              <input type="email" required value={email} onChange={e => setEmail(e.target.value)} placeholder="seu@email.com.br" style={S.input} />
            </label>

            <div style={S.fieldset}>
              <div style={S.legend}>O que mais te interessa? <span style={S.optional}>(escolha quantas quiser)</span></div>
              <div style={S.chipsRow}>
                {[
                  { k: 'shampoo', l: 'Shampoo em barra' },
                  { k: 'cond', l: 'Condicionador em barra' },
                  { k: 'spray', l: 'Banho a seco spray' },
                  { k: 'kit', l: 'Kit completo' },
                ].map(c => (
                  <button type="button" key={c.k} onClick={() => toggle(c.k)} style={interests.includes(c.k) ? S.chipOn : S.chip}>
                    {c.l}
                  </button>
                ))}
              </div>
            </div>

            {errorMsg && <div style={S.error}>{errorMsg}</div>}
            <div style={S.ctaRow}>
              <button type="submit" disabled={loading} style={loading ? S.submitDisabled : S.submit}>
                {loading ? 'Enviando…' : 'Entrar na lista de espera'}
              </button>
              <div style={S.fineprint}>
                Sem spam. Você pode descadastrar com um clique.
              </div>
            </div>
          </form>

          <div style={S.proof}>
            <div style={S.proofItem}><strong style={S.proofNum}>3</strong><span style={S.proofLbl}>produtos no lançamento</span></div>
            <div style={S.proofDiv}></div>
            <div style={S.proofItem}><strong style={S.proofNum}>10%</strong><span style={S.proofLbl}>off para os primeiros</span></div>
            <div style={S.proofDiv}></div>
            <div style={S.proofItem}><strong style={S.proofNum}>2026</strong><span style={S.proofLbl}>previsão de estreia</span></div>
          </div>
        </div>

        <aside style={S.photo} aria-hidden="true">
          <img src="assets/photos/athena-lama.png" alt="Athena, nossa border collie" style={S.photoImg} />
          <div style={S.photoTint}></div>
          <div style={S.photoCaption}>— Athena, nossa border collie</div>
        </aside>
      </section>
    </main>
  );
}

const S = {
  brandBar: { maxWidth: 1280, margin: '0 auto', padding: '32px 32px 0', display: 'flex', alignItems: 'center' },
  brandMark: { fontFamily: 'var(--font-display)', fontSize: 22, letterSpacing: '0.32em', color: 'var(--bz-mucuna)', display: 'flex', alignItems: 'baseline', gap: 12 },
  brandSub: { fontFamily: 'var(--font-sans)', fontSize: 10, fontWeight: 600, letterSpacing: '0.32em', color: 'var(--fg-soft)' },

  wrap: { maxWidth: 1280, margin: '0 auto', padding: '48px 32px 96px', display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 64, alignItems: 'center' },

  copy: { order: 1 },
  eyebrow: { fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 600, letterSpacing: '0.22em', color: 'var(--fg-soft)', marginBottom: 24 },
  title: { fontFamily: 'var(--font-sans)', fontSize: 60, fontWeight: 700, lineHeight: 1.02, letterSpacing: '-0.02em', color: 'var(--bz-mucuna)', margin: '0 0 24px' },
  flair: { fontFamily: 'var(--font-flair)', fontStyle: 'italic', fontWeight: 500, color: 'var(--bz-mucuna)' },
  lede: { fontFamily: 'var(--font-sans)', fontSize: 16, lineHeight: 1.6, color: 'var(--fg-soft)', maxWidth: 520, margin: '0 0 32px', textWrap: 'pretty' },

  form: { display: 'flex', flexDirection: 'column', gap: 18, maxWidth: 540 },
  twoCol: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 },
  label: { display: 'flex', flexDirection: 'column', gap: 8 },
  labelText: { fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--bz-mucuna)' },
  optional: { color: 'var(--fg-soft)', fontWeight: 500, textTransform: 'none', letterSpacing: '0.02em', fontSize: 11, fontStyle: 'italic' },
  input: { padding: '12px 14px', borderRadius: 12, border: '1px solid var(--border-strong)', background: 'var(--bz-baguacu-soft)', color: 'var(--bz-mucuna)', fontFamily: 'var(--font-sans)', fontSize: 14, outline: 'none' },

  fieldset: { display: 'flex', flexDirection: 'column', gap: 10, marginTop: 4 },
  legend: { fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--bz-mucuna)' },
  chipsRow: { display: 'flex', flexWrap: 'wrap', gap: 8 },
  chip: { background: 'transparent', color: 'var(--bz-mucuna)', border: '1px solid var(--border-strong)', borderRadius: 9999, padding: '8px 14px', fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600, cursor: 'pointer' },
  chipOn: { background: 'var(--bz-mucuna)', color: 'var(--bz-baguacu)', border: '1px solid var(--bz-mucuna)', borderRadius: 9999, padding: '8px 14px', fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600, cursor: 'pointer' },

  ctaRow: { display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap', marginTop: 6 },
  submit: { background: 'var(--bz-mucuna)', color: 'var(--bz-baguacu)', border: 'none', padding: '16px 28px', borderRadius: 16, fontFamily: 'var(--font-sans)', fontSize: 15, fontWeight: 600, letterSpacing: '0.02em', cursor: 'pointer' },
  submitDisabled: { background: 'var(--fg-soft)', color: 'var(--bz-baguacu)', border: 'none', padding: '16px 28px', borderRadius: 16, fontFamily: 'var(--font-sans)', fontSize: 15, fontWeight: 600, letterSpacing: '0.02em', cursor: 'not-allowed', opacity: 0.6 },
  error: { fontFamily: 'var(--font-sans)', fontSize: 13, color: '#b04040', background: 'rgba(176,64,64,0.08)', border: '1px solid rgba(176,64,64,0.2)', borderRadius: 10, padding: '10px 14px' },
  fineprint: { fontFamily: 'var(--font-sans)', fontSize: 12, lineHeight: 1.5, color: 'var(--fg-muted)', flex: 1, minWidth: 200 },

  proof: { display: 'flex', alignItems: 'center', gap: 24, marginTop: 48, paddingTop: 24, borderTop: '1px solid var(--border)' },
  proofItem: { display: 'flex', flexDirection: 'column', gap: 4 },
  proofNum: { fontFamily: 'var(--font-display)', fontSize: 28, color: 'var(--bz-mucuna)', lineHeight: 1, letterSpacing: '0.02em' },
  proofLbl: { fontFamily: 'var(--font-sans)', fontSize: 11, color: 'var(--fg-soft)', textTransform: 'uppercase', letterSpacing: '0.12em', fontWeight: 600 },
  proofDiv: { width: 1, height: 28, background: 'var(--border)' },

  photo: { position: 'relative', aspectRatio: '4/5', borderRadius: 24, overflow: 'hidden', background: '#3A2D20', order: 2 },
  photoImg: { position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' },
  photoTint: { position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(73,57,42,0) 60%, rgba(73,57,42,0.5) 100%)' },
  photoCaption: { position: 'absolute', left: 24, bottom: 24, fontFamily: 'var(--font-sans)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(237,228,219,0.85)', fontWeight: 600 },

  successWrap: { minHeight: '100vh', background: 'var(--bz-mucuna)', color: 'var(--bz-baguacu)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 32 },
  successCard: { maxWidth: 640, textAlign: 'center' },
  successMark: { color: 'var(--bz-sun)', display: 'flex', justifyContent: 'center', marginBottom: 32 },
  eyebrowDark: { fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 600, letterSpacing: '0.32em', opacity: 0.55, marginBottom: 24 },
  successTitle: { fontFamily: 'var(--font-sans)', fontSize: 64, fontWeight: 700, lineHeight: 1.02, letterSpacing: '-0.025em', margin: '0 0 28px', textWrap: 'pretty' },
  successLede: { fontFamily: 'var(--font-sans)', fontSize: 17, lineHeight: 1.6, opacity: 0.85, margin: '0 auto', maxWidth: 520, textWrap: 'pretty' },
  successDivider: { width: 48, height: 1, background: 'rgba(237,228,219,0.32)', margin: '40px auto' },
  successFoot: { fontFamily: 'var(--font-sans)', fontSize: 14, opacity: 0.7 },
};

window.WaitlistPage = WaitlistPage;