/* Cantinho Kids — seções: Eventos, Solicitações, Onde, Footer */

/* ---------------- EVENTOS ---------------- */
function Eventos() {
  const eventos = CFG.eventos || [];
  return (
    <section id="eventos" className="section section-pad">
      <div className="wrap">
        <div className="head-block reveal">
          <span className="eyebrow"><Icon name="calendar" style={{ width: 16, height: 16 }} /> Agenda da loja</span>
          <h2 className="section-title" style={{ marginTop: 14 }}>Eventos e bazares</h2>
          <p className="lead">Bazares, trocas e tardes especiais pra família. Anota na agenda e vem com a gente.</p>
        </div>

        {eventos.length === 0 ? (
          <div className="empty reveal">
            <HangerHeart className="mark" />
            <p>Nenhum evento marcado por enquanto. Fica de olho aqui 💚</p>
          </div>
        ) : (
          <div className="events">
            {eventos.map((ev, k) => (
              <article className="event reveal" key={k}>
                <div className="event__date">
                  <span className="d">{ev.dia}</span>
                  <span className="m">{ev.mes}</span>
                </div>
                <div className="event__body">
                  <h3>{ev.titulo}</h3>
                  <p>{ev.descricao}</p>
                  {ev.horario && <span className="event__when"><Icon name="clock" /> {ev.horario}</span>}
                </div>
              </article>
            ))}
          </div>
        )}
      </div>
    </section>
  );
}

/* ---------------- SOLICITAÇÕES (form → WhatsApp) ---------------- */
const PASSOS = [
  { t: 'Conte o que você quer', d: 'Escolha o tipo, deixe seu nome e WhatsApp e escreva sua dúvida ou pedido.' },
  { t: 'Abre o WhatsApp pronto', d: 'A gente monta a mensagem pra você. É só enviar pra loja.' },
  { t: 'A gente te responde', d: 'Respondemos pelo WhatsApp no horário da loja.' },
];
function Solicitacoes() {
  const tipos = CFG.tiposSolicitacao;
  const [form, setForm] = React.useState({ tipo: tipos[0], nome: '', whatsapp: '', mensagem: '' });
  const [errs, setErrs] = React.useState({});
  const [sent, setSent] = React.useState(false);

  const set = (k) => (e) => { setForm((f) => ({ ...f, [k]: e.target.value })); setErrs((x) => ({ ...x, [k]: false })); setSent(false); };

  const validate = () => {
    const e = {};
    if (!form.nome.trim()) e.nome = true;
    if (!form.whatsapp.trim() || form.whatsapp.replace(/\D/g, '').length < 8) e.whatsapp = true;
    if (!form.mensagem.trim()) e.mensagem = true;
    setErrs(e);
    return Object.keys(e).length === 0;
  };

  const submit = (e) => {
    e.preventDefault();
    if (!validate()) {
      // o DOM só reflete data-err depois do re-render
      requestAnimationFrame(() => {
        const first = document.querySelector('.field[data-err="true"] .control');
        if (first) first.focus();
      });
      return;
    }
    const msg =
      `*Nova solicitação · Cantinho Kids* 💚\n\n` +
      `• Tipo: ${form.tipo}\n` +
      `• Nome: ${form.nome}\n` +
      `• WhatsApp: ${form.whatsapp}\n\n` +
      `${form.mensagem}`;
    window.open(waLink(msg), '_blank', 'noopener');
    setSent(true);
  };

  return (
    <section id="solicitacoes" className="section section-pad">
      <div className="wrap">
        <div className="head-block reveal">
          <span className="eyebrow"><Icon name="tag" style={{ width: 16, height: 16 }} /> Dúvidas e pedidos</span>
          <h2 className="section-title" style={{ marginTop: 14 }}>Faça sua solicitação</h2>
          <p className="lead">Tem uma dúvida sobre uma peça ou quer pedir outra coisa? Preenche aqui e a gente abre o WhatsApp com tudo pronto.</p>
        </div>

        <div className="req-grid">
          <div className="req-side reveal">
            {PASSOS.map((p, k) => (
              <div className="step" key={k}>
                <span className="n">{k + 1}</span>
                <div><h4>{p.t}</h4><p>{p.d}</p></div>
              </div>
            ))}
          </div>

          <form className="form-card reveal" onSubmit={submit} noValidate>
            {sent && (
              <div className="form-sent" role="status">
                <Icon name="checkCircle" /> Abrimos o WhatsApp com sua mensagem. É só tocar em enviar! 💚
              </div>
            )}
            <div className="field">
              <label htmlFor="tipo">Tipo de solicitação</label>
              <select id="tipo" className="control" value={form.tipo} onChange={set('tipo')}>
                {tipos.map((t) => <option key={t} value={t}>{t}</option>)}
              </select>
            </div>
            <div className="field" data-err={!!errs.nome}>
              <label htmlFor="nome">Seu nome <span className="req">*</span></label>
              <input id="nome" className="control" type="text" value={form.nome} onChange={set('nome')}
                     placeholder="Como podemos te chamar?" aria-invalid={!!errs.nome} aria-describedby="err-nome" autoComplete="name" />
              <span className="err" id="err-nome">Conta pra gente seu nome 🙂</span>
            </div>
            <div className="field" data-err={!!errs.whatsapp}>
              <label htmlFor="zap">Seu WhatsApp <span className="req">*</span></label>
              <input id="zap" className="control" type="tel" inputMode="tel" value={form.whatsapp} onChange={set('whatsapp')}
                     placeholder="(22) 9 9999-9999" aria-invalid={!!errs.whatsapp} aria-describedby="err-zap" autoComplete="tel" />
              <span className="err" id="err-zap">Coloque um WhatsApp pra gente te responder</span>
            </div>
            <div className="field" data-err={!!errs.mensagem}>
              <label htmlFor="msg">Mensagem <span className="req">*</span></label>
              <textarea id="msg" className="control" value={form.mensagem} onChange={set('mensagem')}
                        placeholder="Conte o que você precisa (peça, tamanho, dúvida)…" aria-invalid={!!errs.mensagem} aria-describedby="err-msg" />
              <span className="err" id="err-msg">Escreva sua mensagem pra gente</span>
            </div>
            <button className="btn btn--cta btn--lg btn--block" type="submit">
              <BrandIcon name="whatsapp" /> Enviar pelo WhatsApp
            </button>
            <p className="form-hint"><Icon name="lock" /> Sem cadastro: a mensagem abre direto no seu WhatsApp.</p>
          </form>
        </div>
      </div>
    </section>
  );
}

/* ---------------- ONDE ESTAMOS ---------------- */
function MiniMap() {
  return (
    <svg className="mini-map" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
      <rect width="400" height="300" fill="#eef3e4" />
      <g stroke="#dbe6c6" strokeWidth="10" fill="none">
        <path d="M-20 90 H420" /><path d="M-20 210 H420" />
        <path d="M120 -20 V320" /><path d="M280 -20 V320" />
      </g>
      <g stroke="#cdddb2" strokeWidth="4" fill="none">
        <path d="M-20 150 H420" /><path d="M200 -20 V320" /><path d="M60 90 L120 210" />
      </g>
      <rect x="150" y="120" width="60" height="60" rx="6" fill="#e4eed3" />
      <rect x="300" y="100" width="50" height="40" rx="6" fill="#e4eed3" />
      <rect x="40" y="220" width="50" height="40" rx="6" fill="#e4eed3" />
    </svg>
  );
}
function Onde() {
  const e = CFG.endereco;
  return (
    <section id="onde" className="section section-pad">
      <div className="wrap">
        <div className="head-block reveal">
          <span className="eyebrow"><Icon name="mapPin" style={{ width: 16, height: 16 }} /> Vem nos visitar</span>
          <h2 className="section-title" style={{ marginTop: 14 }}>Onde a gente está</h2>
          <p className="lead">No coração do Centro de Nova Friburgo. Te esperamos pra um café!</p>
        </div>

        <div className="where-grid">
          <div className="where-card reveal">
            <div className="where-row">
              <span className="ic"><Icon name="mapPin" /></span>
              <div>
                <h4>Endereço</h4>
                <p>{e.linha1}<br />{e.linha2}<br />{e.linha3}</p>
                <span className="ref"><Icon name="info" style={{ width: 15, height: 15 }} /> {e.referencia}</span>
              </div>
            </div>
            <div className="where-row">
              <span className="ic"><Icon name="clock" /></span>
              <div><h4>Horário</h4><p>{CFG.horario}</p></div>
            </div>
            <div className="where-actions">
              <a className="btn btn--cta" href={CFG.mapaUrl} target="_blank" rel="noopener"><Icon name="navigation" /> Ver no mapa</a>
              <a className="btn btn--secondary" href={waLink('Oi! Queria saber como chegar na loja 💚')} target="_blank" rel="noopener"><BrandIcon name="whatsapp" /> WhatsApp</a>
              <a className="btn btn--secondary" href={instaLink} target="_blank" rel="noopener"><BrandIcon name="instagram" /> Instagram</a>
            </div>
          </div>

          <a className="map-card reveal" href={CFG.mapaUrl} target="_blank" rel="noopener" aria-label="Abrir endereço no Google Maps">
            <MiniMap />
            <span className="map-pin">
              <span className="dot"><Icon name="mapPin" /></span>
              <b>Cantinho Kids</b>
            </span>
          </a>
        </div>
      </div>
    </section>
  );
}

/* ---------------- FOOTER ---------------- */
function Footer() {
  const e = CFG.endereco;
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer__top">
          <div className="footer__about">
            <a className="brand" href="#inicio" onClick={(ev) => { ev.preventDefault(); scrollToId('inicio'); }} style={{ marginRight: 0 }}>
              <BrandLogo size={46} />
              <span className="brand__name">Cantinho Kids <small>Moda Circular</small></span>
            </a>
            <p>Moda circular infantil em Nova Friburgo. Peças únicas, escolhidas com carinho, a preço justo. 💚</p>
            <div className="footer__social">
              <a href={waLink('Oi! Vim pelo site 💚')} target="_blank" rel="noopener" aria-label="WhatsApp"><BrandIcon name="whatsapp" /></a>
              <a href={instaLink} target="_blank" rel="noopener" aria-label="Instagram"><BrandIcon name="instagram" /></a>
            </div>
          </div>

          <nav className="footer__col" aria-label="Mapa do site">
            <h4>Navegar</h4>
            {NAV.map((n) => (
              <a key={n.id} href={`#${n.id}`} onClick={(ev) => { ev.preventDefault(); scrollToId(n.id); }}>{n.label}</a>
            ))}
          </nav>

          <div className="footer__col">
            <h4>A loja</h4>
            <p className="footer__addr" style={{ color: 'rgba(255,255,255,.78)' }}>
              {e.linha1}<br />{e.linha2}<br />{e.linha3}<br />
              <span style={{ display: 'inline-block', marginTop: 10 }}>{CFG.horario}</span>
            </p>
            <a href={instaLink} target="_blank" rel="noopener" style={{ marginTop: 10 }}>@{CFG.instagram}</a>
          </div>
        </div>

        <div className="footer__bottom">
          <span>Feito com 💚 em Nova Friburgo · <a href={`https://${CFG.dominio}`} target="_blank" rel="noopener">{CFG.dominio}</a></span>
          <span>© {new Date().getFullYear()} Cantinho Kids · Moda Circular</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Eventos, Solicitacoes, Onde, Footer });