/* global React, Reveal */
const { useState: useState4 } = React;

/* ============================================================
   MARQUEE — auto-scrolling client strip
   ============================================================ */
function Marquee() {
  const clients = [
    { name: "Aletex", seg: "Têxtil · Indústria", c: "#1c4f6b", i: "AL" },
    { name: "Alta Baviera", seg: "Restaurante · Eventos", c: "#7a3a1f", i: "AB" },
    { name: "Arena Viva", seg: "Casa de festas · Baumann", c: "#5a3a6b", i: "AV" },
    { name: "Armazém das Motos", seg: "Motocicletas", c: "#8b1f1f", i: "AM" },
    { name: "Bless Eventos", seg: "Eventos & cerimonial", c: "#a4476a", i: "BE" },
    { name: "Chip Truck", seg: "Automotivo · Caminhões", c: "#0c1f17", i: "CT" },
    { name: "Espaço Piscinas", seg: "Piscinas · Joinville", c: "#2a5d8f", i: "EP" },
    { name: "Fast Multas", seg: "Jurídico · Trânsito", c: "#3a3a3a", i: "FM" },
    { name: "Ferramentaria Betta", seg: "Indústria · Ferramentas", c: "#7a5a3a", i: "FB" },
    { name: "Join Glass", seg: "Vidraçaria", c: "#3f6b3a", i: "JG" },
    { name: "LS Frota", seg: "Locação de veículos", c: "#1f3a2e", i: "LS" },
    { name: "Lucrando com Academias", seg: "Consultoria fitness", c: "#496f7e", i: "LA" },
    { name: "MA Serviços", seg: "Serviços especializados", c: "#5d4a2a", i: "MA" },
    { name: "Nascon Serviços", seg: "Serviços", c: "#2a2a28", i: "NS" },
    { name: "Revoo Studio", seg: "Estúdio criativo", c: "#1c4f6b", i: "RS" },
    { name: "Simm Imobiliária", seg: "Negócios imobiliários", c: "#3f6b3a", i: "SI" },
    { name: "Starecia Brinquedos", seg: "Varejo infantil", c: "#a4476a", i: "SB" },
    { name: "Tecmarc", seg: "Assistência técnica", c: "#0c1f17", i: "TA" },
    { name: "Tevetec", seg: "Tecnologia", c: "#1c4f6b", i: "TV" },
  ];
  const all = [...clients, ...clients];
  return (
    <section className="marquee">
      <div className="container marquee-head">
        <span className="eyebrow">Quem já confia</span>
        <p>
          Alguns dos negócios que estruturaram sua presença digital com a Athera. <b>+50 empresas atendidas.</b>
        </p>
      </div>
      <div className="marquee-track">
        {all.map((c, i) => (
          <div key={i} className="logo-chip">
            <span className="mark" style={{ background: c.c }}>{c.i}</span>
            <div className="who">
              <span className="name">{c.name}</span>
              <span className="seg">{c.seg}</span>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ============================================================
   CITIES
   ============================================================ */
function Cities() {
  const cities = [
    { tag: "Sede & Operação", name: "Joinville", note: "SC · Base local", primary: true },
    { tag: "Equipe regional", name: "Florianópolis", note: "SC · Atendimento mensal" },
    { tag: "Equipe regional", name: "Curitiba", note: "PR · Visita sob demanda" },
    { tag: "Brasil inteiro", name: "Remoto", note: "WhatsApp + call · todo país" },
  ];
  return (
    <section className="cities">
      <div className="container">
        <div className="section-head">
          <div>
            <Reveal><span className="eyebrow">Onde atendemos</span></Reveal>
            <Reveal as="h2" className="display-2" delay={100} style={{ marginTop: 16 }}>
              Base em Joinville. <span style={{ fontStyle: "italic", color: "var(--accent)" }}>Atendimento no Brasil inteiro.</span>
            </Reveal>
          </div>
          <Reveal delay={200}>
            <p className="lead">
              Para clientes da região, reunião presencial quando faz sentido. Para o resto do país, WhatsApp e call dão conta do recado.
            </p>
          </Reveal>
        </div>

        <Reveal className="cities-grid" delay={150}>
          {cities.map((c, i) => (
            <div key={i} className="city">
              <span className={`tag ${c.primary ? "primary" : ""}`}>{c.tag}</span>
              <h4>{c.name}</h4>
              <p>{c.note}</p>
              {c.primary && <span className="pin" />}
            </div>
          ))}
        </Reveal>
      </div>
    </section>
  );
}

/* ============================================================
   WHATSAPP CHAT MOCKUP — briefing → preview → approval
   ============================================================ */
function Chat() {
  const [step, setStep] = useState4(0);
  const ref = React.useRef(null);

  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          // animate messages one by one
          let i = 0;
          const tick = () => {
            setStep((s) => Math.min(s + 1, 7));
            i++;
            if (i < 7) setTimeout(tick, 700);
          };
          setTimeout(tick, 400);
          io.unobserve(el);
        }
      });
    }, { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  return (
    <section id="fluxo" className="chat-section">
      <div className="container chat-grid">
        <Reveal className="chat-copy">
          <span className="eyebrow">O fluxo em tempo real</span>
          <h2>
            Tudo acontece <em>no WhatsApp.</em><br />
            Sem plataforma. Sem login.
          </h2>
          <p>
            Da primeira mensagem até a aprovação do site, você só precisa de uma conversa. A gente cuida do briefing, do design, da entrega — e te avisa quando estiver pronto.
          </p>
          <div className="chat-features">
            <div className="row">
              <span className="tick">
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round"><polyline points="20 6 9 17 4 12"/></svg>
              </span>
              <div>
                <b>Briefing em até 15 minutos</b>
                <p>Pelo WhatsApp, sem formulário longo. Conta sobre o negócio em texto ou áudio.</p>
              </div>
            </div>
            <div className="row">
              <span className="tick">
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round"><polyline points="20 6 9 17 4 12"/></svg>
              </span>
              <div>
                <b>Prévia funcional em até 24h</b>
                <p>Esboço real do seu site, no domínio definitivo. Você abre, navega e decide. Versão final publicada em até 5 dias úteis.</p>
              </div>
            </div>
            <div className="row">
              <span className="tick">
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round"><polyline points="20 6 9 17 4 12"/></svg>
              </span>
              <div>
                <b>Aprovou? Aí paga.</b>
                <p>R$ 197 parcela única via Pix. Não aprovou? Não paga nada e a gente desliga o link.</p>
              </div>
            </div>
          </div>
        </Reveal>

        <Reveal delay={250}>
          <div className="phone-mock" ref={ref}>
            <div className="phone-screen">
              <div className="wa-header">
                <span className="ava">
                  <img src="assets/athera-logo.png" alt="" />
                </span>
                <div>
                  <div className="who">Athera · Vitor</div>
                  <span className="status">online · digitando…</span>
                </div>
              </div>
              <div className="wa-body">
                {step >= 1 && (
                  <div className="wa-msg me">
                    Oi! Vi o anúncio. Tenho uma marcenaria, queria entender melhor.
                    <span className="t">09:14</span>
                  </div>
                )}
                {step >= 2 && (
                  <div className="wa-msg them">
                    Boa! Me conta rapidão: nome da empresa, cidade e o que vocês fazem?
                    <span className="t">09:14</span>
                  </div>
                )}
                {step >= 3 && (
                  <div className="wa-msg me">
                    Lazaretti Carnes, Joinville. Açougue premium, cortes especiais.
                    <span className="t">09:16</span>
                  </div>
                )}
                {step >= 4 && (
                  <div className="wa-msg them">
                    Perfeito. Já começo aqui. Te mando a prévia amanhã cedo — em até 24h ✅
                    <span className="t">09:16</span>
                  </div>
                )}
                {step >= 5 && step < 6 && (
                  <div className="wa-msg them">
                    <span className="typing"><span /><span /><span /></span>
                  </div>
                )}
                {step >= 6 && (
                  <div className="wa-msg preview-card">
                    <div className="pcard">
                      <img src="https://image.thum.io/get/width/800/crop/500/https://lazaretticarnes.com.br" alt="Prévia" />
                      <div className="pmeta">
                        <div className="ptitle">Prévia · Lazaretti Carnes</div>
                        <div className="purl">lazaretticarnes.com.br</div>
                      </div>
                    </div>
                    <span className="t" style={{ marginTop: 4, marginLeft: 6 }}>menos de 24h depois · 09:42</span>
                  </div>
                )}
                {step >= 7 && (
                  <div className="wa-msg me">
                    Ficou TOP demais. Vou aprovar agora e pagar 🚀
                    <span className="t">16:48</span>
                  </div>
                )}
              </div>
              <div className="wa-input">
                <div className="field">Mensagem</div>
                <span className="send" aria-hidden="true">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M2 21l21-9L2 3v7l15 2-15 2v7z"/></svg>
                </span>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Marquee, Cities, Chat });