/* sections.jsx — section components, exported to window */

const { useEffect, useRef, useState } = React;

// WhatsApp link helper (43 9641-5702 = +55 43 96415702)
const WA = (msg) => `https://wa.me/554396415702?text=${encodeURIComponent(msg || "Olá! Quero garantir minha vaga no Eleva Clean Floripa.")}`;
const WA_GENERIC = WA("Olá! Quero garantir minha vaga no Eleva Clean Floripa.");

// Link de pagamento oficial
const KIWIFY = "https://pay.kiwify.com.br/PLXlSgT";

// ===== Logomark =====
const Logomark = () => (
  <div className="logomark">
    <div className="logo-eleva">ELEVA</div>
    <div className="logo-clean">CLEAN</div>
  </div>
);

// ===== Announcement bar =====
const Announce = () => (
  <div className="announce">
    ✨ 01 de Agosto · Hotel Majestic Palace · Floripa &nbsp;·&nbsp; INSCRIÇÕES ABERTAS — VAGAS LIMITADAS
  </div>
);

// ===== Sticky CTA =====
const StickyCTA = () => {
  const [show, setShow] = useState(false);
  useEffect(() => {
    const onScroll = () => setShow(window.scrollY > window.innerHeight * 0.7);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <div className={"sticky-cta " + (show ? "show" : "")}>
      <div className="meta"><b>Eleva Clean Floripa</b><br/>01/08 · 13h–22h · Majestic Palace</div>
      <a className="btn" href={KIWIFY} target="_blank" rel="noopener">Garantir meu lugar →</a>
    </div>
  );
};

// ===== Hero =====
const Hero = () => (
  <section className="sec hero">
    <div className="wrap">
      <div className="hero-grid">
        <div className="reveal in">
          <Logomark />
          <h1 className="display hero-h1">
            <span className="grad-text">01 de Agosto, Floripa</span>:<br/>
            o encontro que vai <em style={{fontStyle:"italic",fontFamily:"var(--f-display)"}} className="pink">elevar</em> profissionais e empresas de limpeza ao próximo nível de faturamento.
          </h1>
          <p className="hero-sub">
            Um dia inteiro de imersão presencial no Hotel Majestic Palace, ao lado dos maiores nomes do mercado de limpeza e desenvolvimento empresarial — para você sair com mais clareza, estratégia e um plano de ação pronto para elevar seus resultados ao próximo nível.
          </p>
          <div className="hero-meta">
            <span className="chip"><I.cal/> 01 · Ago · 2026</span>
            <span className="chip"><I.clock/> 13h às 22h</span>
            <span className="chip"><I.pin/> Hotel Majestic Palace · Floripa</span>
          </div>
          <div className="hero-cta-row">
            <a className="btn btn-lg" href={KIWIFY} target="_blank" rel="noopener"><I.spark style={{width:18,height:18}}/> Quero garantir meu lugar</a>
            <a className="btn btn-ghost" href="#oferta">Ver ingressos</a>
          </div>
          <div className="hero-microcopy">✨ Vagas limitadas · Ingresso Simple e Diamond · Pagamento seguro</div>
        </div>
        <div className="hero-art reveal in d2">
          <img className="poster" src="assets/poster-floripa-new.jpg" alt="ELEVA CLEAN — Floripa 01 de Agosto"/>
        </div>
      </div>
    </div>
  </section>
);

// ===== Opening value =====
const ValueOpening = () => (
  <section className="sec sec-tight">
    <div className="wrap">
      <div className="value-grid">
        <div className="reveal">
          <span className="eyebrow">A virada de chave</span>
          <h2 className="display h-lg" style={{marginTop:14}}>
            Você domina a operação. <span className="grad-text">Mas o lucro não reflete o esforço.</span>
          </h2>
        </div>
        <div className="value-copy reveal d1">
          <p>Sua equipe entrega um serviço impecável. Mas no fim do mês a sensação é de que <strong>você trabalha cada vez mais para ganhar quase o mesmo</strong>.</p>
          <p>Na maioria das vezes, o problema <em>não</em> é a qualidade do serviço. É a forma como a sua empresa se posiciona, precifica e é conduzida no dia a dia.</p>
          <p>O <strong>Eleva Clean Floripa</strong> existe para virar essa chave. Em um único dia de imersão, você sai da rotina de “apagar incêndio” e constrói um plano claro para transformar a sua empresa em um negócio <strong>lucrativo, com marca forte e crescimento previsível</strong>.</p>
          <p className="value-kicker">Existem eventos. E existem experiências que mudam destinos. Este é do segundo tipo.</p>
        </div>
      </div>
    </div>
  </section>
);

// ===== Pain section =====
const Pain = () => (
  <section className="sec" id="dor">
    <div className="wrap">
      <div className="sec-head center reveal">
        <span className="eyebrow">Identificação</span>
        <h2 className="display h-lg" style={{marginTop:14}}>Se você vive do mercado de limpeza, <span className="grad-text">provavelmente já passou por isso.</span></h2>
        <div className="divider-line"></div>
      </div>
      <div className="pain-list">
        {DATA.pains.map((p,i) => (
          <div className="pain reveal" key={i} style={{transitionDelay:`${i*40}ms`}}>
            <div className="x">✕</div>
            <p>{p}</p>
          </div>
        ))}
      </div>
      <p className="pain-note reveal">Se você se reconheceu em pelo menos <b className="grad-text">duas dessas frases</b>, o Eleva Clean foi feito para você.</p>
    </div>
  </section>
);

// ===== Pillars =====
const Pillars = () => (
  <section className="sec" id="metodo">
    <div className="wrap">
      <div className="sec-head center reveal">
        <span className="eyebrow">A solução</span>
        <h2 className="display h-lg" style={{marginTop:14}}>Os <span className="grad-text">3 pilares</span> que separam quem sobrevive de quem constrói uma empresa de limpeza de verdade.</h2>
      </div>
      <div className="pillars">
        {DATA.pillars.map((p,i) => (
          <div className="pillar reveal" key={i} style={{transitionDelay:`${i*80}ms`}}>
            <span className="num">0{i+1}</span>
            <div className="ico">{I[p.icon]({})}</div>
            <h3>{p.t}</h3>
            <p>{p.d}</p>
          </div>
        ))}
      </div>
      <div className="stat-band reveal d1">
        <div className="big grad-text">9h</div>
        <p>de imersão presencial em que você não vai só assistir a palestras — você vai <b style={{color:"#fff"}}>construir, na prática, um planejamento emocional e estratégico completo</b>. Entra com a dúvida “qual o próximo passo?” e sai com um plano pronto para executar.</p>
      </div>
    </div>
  </section>
);

// ===== Benefits =====
const Benefits = () => (
  <section className="sec" id="beneficios">
    <div className="wrap">
      <div className="sec-head reveal" style={{maxWidth:920}}>
        <span className="eyebrow">Ao sair do Eleva Clean, você estará pronto para</span>
        <h2 className="display h-lg" style={{marginTop:14}}>Resultado real. <span className="grad-text">Não mais teoria.</span></h2>
      </div>
      <div className="benefits">
        {DATA.benefits.map(([b,rest],i) => (
          <div className="benefit reveal" key={i} style={{transitionDelay:`${(i%4)*60}ms`}}>
            <div className="ck"><I.check/></div>
            <p><b>{b}</b>{rest}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ===== Numbers =====
const Numbers = () => (
  <section className="sec-tight">
    <div className="wrap">
      <div className="numbers">
        {DATA.numbers.map((n,i) => (
          <div className="n reveal" key={i} style={{transitionDelay:`${i*80}ms`}}>
            <div className="v grad-text">{n.v}</div>
            <div className="l">{n.l}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ===== Carousel hook =====
const useCarousel = () => {
  const trackRef = useRef(null);
  const scrollBy = (dir) => {
    const t = trackRef.current; if (!t) return;
    const card = t.querySelector(":scope > *");
    const w = card ? card.getBoundingClientRect().width + 20 : t.clientWidth * 0.8;
    t.scrollBy({ left: dir * w, behavior: "smooth" });
  };
  return [trackRef, scrollBy];
};

// ===== Speakers =====
const Speakers = () => (
  <section className="sec" id="palestrantes">
    <div className="wrap">
      <div className="sec-head center reveal">
        <span className="eyebrow">Quem vai te guiar</span>
        <h2 className="display h-lg" style={{marginTop:14}}>Palestrantes que vivem o que ensinam.</h2>
        <div className="divider-line"></div>
      </div>
      <div className="spk-stack">
        {DATA.speakers.map((s,i) => (
          <article className="spk-row reveal" key={i} style={{transitionDelay:`${i*70}ms`}}>
            <div className="spk-photo">
              {s.img
                ? <img src={s.img} alt={s.name} loading="eager"/>
                : <div className="ph">retrato · {s.name.split(" ")[0]}</div>}
            </div>
            <div className="spk-body">
              {i === 0 && <span className="star">★ Atração principal</span>}
              <div className="tag">{s.role}</div>
              <h3>{s.name}</h3>
              <p>{s.bio}</p>
            </div>
          </article>
        ))}
      </div>
    </div>
  </section>
);

// ===== Testimonials =====
const Testimonials = () => {
  const [trackRef, scrollBy] = useCarousel();
  return (
    <section className="sec" id="depoimentos">
      <div className="wrap">
        <div className="sec-head center reveal">
          <span className="eyebrow">Histórias do palco</span>
          <h2 className="display h-lg" style={{marginTop:14}}>Quem viveu, <span className="grad-text">virou o jogo.</span></h2>
        </div>
        <div className="carousel reveal">
          <div className="carousel-track" ref={trackRef}>
            {DATA.testimonials.map((t,i) => (
              <article className="tst" key={i}>
                <div className="stars">★★★★★</div>
                <div className="quote">"{t.q[0]}<span className="hl">{t.q[1]}</span>{t.q[2]}"</div>
                <div className="who"><div className="av"></div><div><b>{t.n}</b><span>{t.c}</span></div></div>
              </article>
            ))}
          </div>
          <div className="carousel-nav">
            <button className="cbtn" onClick={()=>scrollBy(-1)} aria-label="anterior"><I.arrowL/></button>
            <button className="cbtn" onClick={()=>scrollBy(1)} aria-label="próximo"><I.arrowR/></button>
          </div>
        </div>
      </div>
    </section>
  );
};

// ===== Offer =====
const Offer = () => (
  <section className="sec" id="oferta">
    <div className="wrap">
      <div className="offer-urgency-banner reveal">
        ⚠️ As vagas são limitadas. Garanta seu ingresso antes que o próximo lote esgote.
      </div>
      <div className="offer-grid">
        <div className="tier reveal">
          <div className="lote-tag">1º LOTE PROMOCIONAL</div>
          <div className="price">
            <span className="now">R$ <span>110</span><small>,00</small></span>
          </div>
          <div className="lote-perk" style={{color:"var(--green-b)", fontWeight:700}}>✓ Mesmo acesso completo · preço promocional até esgotar</div>
          <ul>
            {DATA.loteItems.map((s,i) => <li key={i}><I.check/>{s}</li>)}
          </ul>
          <a className="btn" href={KIWIFY} target="_blank" rel="noopener">Garantir 1º Lote</a>
        </div>
        <div className="tier reveal d1">
          <div className="lote-tag">🎟️ 2º LOTE</div>
          <div className="price">
            <span className="now">R$ <span>150</span><small>,00</small></span>
          </div>
          <div className="lote-perk">Disponível após esgotamento do 1º lote</div>
          <ul>
            {DATA.loteItems.map((s,i) => <li key={i}><I.check/>{s}</li>)}
          </ul>
          <a className="btn" href={KIWIFY} target="_blank" rel="noopener">Garantir meu lugar</a>
        </div>
      </div>
    </div>
  </section>
);

// ===== Objections accordion =====
const Objections = () => {
  const [open, setOpen] = useState(0);
  return (
    <section className="sec" id="duvidas">
      <div className="wrap">
        <div className="sec-head center reveal">
          <span className="eyebrow">Quebra de objeções</span>
          <h2 className="display h-lg" style={{marginTop:14}}>"<span className="grad-text">Mas e se</span>…?"</h2>
        </div>
        <div className="acc">
          {DATA.objections.map((o,i) => (
            <AccItem key={i} item={o} open={open===i} onClick={()=>setOpen(open===i?-1:i)} />
          ))}
        </div>
      </div>
    </section>
  );
};

const AccItem = ({item, open, onClick}) => {
  const innerRef = useRef(null);
  return (
    <div className={"acc-item reveal " + (open ? "open" : "")}>
      <button className="acc-q" onClick={onClick}>
        <span><span className="q-emoji" style={{marginRight:10}}>{item.e}</span>{item.q}</span>
        <span className="qi">+</span>
      </button>
      <div className="acc-a" style={{maxHeight: open ? (innerRef.current?.scrollHeight || 400) + "px" : 0}}>
        <div className="acc-a-inner" ref={innerRef}>{item.a}</div>
      </div>
    </div>
  );
};

// ===== Guarantee =====
const Guarantee = () => (
  <section className="sec">
    <div className="wrap">
      <div className="guarantee reveal">
        <div className="shield"><I.shield/></div>
        <span className="eyebrow">Garantia</span>
        <h2 className="display h-md" style={{marginTop:10}}>Sua decisão sem risco.</h2>
        <p style={{marginTop:14}}>
          Participe do primeiro bloco do Eleva Clean. Se você sentir que a experiência não é capaz de elevar a sua empresa, fale com a nossa equipe ainda durante o evento e devolvemos <b style={{color:"#fff"}}>100% do valor do seu ingresso</b>. O risco é nosso — a transformação é sua.
        </p>
      </div>
    </div>
  </section>
);

// ===== Urgency =====
const Urgency = () => (
  <section className="sec-tight">
    <div className="wrap">
      <div className="urgency">
        <div className="urg reveal">
          <div className="ico"><I.fire/></div>
          <h4>Capacidade limitada</h4>
          <p>Limite físico do Hotel Majestic Palace. Quando lotar, encerramos as inscrições — sem exceção.</p>
        </div>
        <div className="urg reveal d1">
          <div className="ico"><I.clock/></div>
          <h4>Lotes com preço crescente</h4>
          <p>O valor de hoje é o menor que o ingresso terá. A cada lote esgotado, o preço sobe.</p>
        </div>
        <div className="urg reveal d2">
          <div className="ico"><I.gem/></div>
          <h4>Diamond limitado</h4>
          <p>Coffee, assento prioritário e networking exclusivo têm número restrito de lugares.</p>
        </div>
      </div>
    </div>
  </section>
);

// ===== FAQ =====
const FAQ = () => {
  const [open, setOpen] = useState(0);
  return (
    <section className="sec" id="faq">
      <div className="wrap">
        <div className="sec-head center reveal">
          <span className="eyebrow">FAQ</span>
          <h2 className="display h-lg" style={{marginTop:14}}>Perguntas <span className="grad-text">frequentes</span></h2>
        </div>
        <div className="acc">
          {DATA.faq.map((f,i) => (
            <AccItem key={i} item={{e:"›", q:f.q, a:f.a}} open={open===i} onClick={()=>setOpen(open===i?-1:i)} />
          ))}
        </div>
      </div>
    </section>
  );
};

// ===== Final CTA + form =====
const FinalCTA = () => {
  const [data, setData] = useState({ name:"", email:"", whats:"", tier:"diamond" });
  const [errs, setErrs] = useState({});
  const [sent, setSent] = useState(false);

  const validate = () => {
    const e = {};
    if (data.name.trim().length < 2) e.name = "Informe seu nome.";
    if (!/^\S+@\S+\.\S+$/.test(data.email)) e.email = "E-mail inválido.";
    const digits = data.whats.replace(/\D/g,"");
    if (digits.length < 10) e.whats = "Telefone incompleto (DDD + número).";
    setErrs(e);
    return Object.keys(e).length === 0;
  };

  const submit = (ev) => {
    ev.preventDefault();
    if (!validate()) return;
    setSent(true);
    const msg = `Olá! Quero garantir minha vaga no Eleva Clean Floripa.%0AIngresso: ${data.tier.toUpperCase()}%0ANome: ${data.name}%0AE-mail: ${data.email}%0AWhatsApp: ${data.whats}`;
    setTimeout(() => { window.open(`https://wa.me/554396415702?text=${msg}`, "_blank"); }, 600);
  };

  const fmtPhone = (v) => {
    const d = v.replace(/\D/g,"").slice(0,11);
    if (d.length <= 2) return d;
    if (d.length <= 6) return `(${d.slice(0,2)}) ${d.slice(2)}`;
    if (d.length <= 10) return `(${d.slice(0,2)}) ${d.slice(2,6)}-${d.slice(6)}`;
    return `(${d.slice(0,2)}) ${d.slice(2,7)}-${d.slice(7)}`;
  };

  return (
    <section className="sec final" id="garantir">
      <div className="wrap">
        <div className="sec-head center reveal">
          <span className="eyebrow">Última chamada</span>
          <h2 className="display h-xl" style={{marginTop:14}}>Floripa, <span className="grad-text">01 de agosto.</span><br/>O seu lugar vai estar lá?</h2>
          <p className="lead" style={{marginTop:20, maxWidth:"60ch", marginInline:"auto"}}>
            Você pode terminar 2026 igual começou — trabalhando demais e competindo por centavos. Ou reservar um dia para voltar para casa com um plano que muda o seu próximo ano.
          </p>
        </div>

        {sent ? (
          <div className="form-card reveal">
            <div className="form-ok">
              <div className="big grad-text">Pronto, {data.name.split(" ")[0]}! ✨</div>
              <p>Estamos te direcionando para o WhatsApp da equipe do Eleva Clean para finalizar sua inscrição. Se a janela não abrir,&nbsp;
                <a href={WA_GENERIC} target="_blank" rel="noopener" style={{color:"var(--pink-soft)", textDecoration:"underline"}}>clique aqui</a>.
              </p>
            </div>
          </div>
        ) : (
          <form className="form-card reveal" onSubmit={submit} noValidate>
            <div className="field">
              <label>Nome completo</label>
              <div className={"input-wrap " + (errs.name ? "err":"")}>
                <input type="text" placeholder="Como você quer ser chamado(a)" value={data.name} onChange={e=>setData({...data, name:e.target.value})}/>
              </div>
              <div className="err-msg">{errs.name||""}</div>
            </div>
            <div className="field">
              <label>E-mail</label>
              <div className={"input-wrap " + (errs.email ? "err":"")}>
                <I.mail style={{color:"#7e539b"}}/>
                <input type="email" placeholder="voce@email.com" value={data.email} onChange={e=>setData({...data, email:e.target.value})}/>
              </div>
              <div className="err-msg">{errs.email||""}</div>
            </div>
            <div className="field">
              <label>WhatsApp</label>
              <div className={"input-wrap " + (errs.whats ? "err":"")}>
                <span className="flag">🇧🇷</span>
                <input type="tel" placeholder="(00) 00000-0000" value={data.whats} onChange={e=>setData({...data, whats: fmtPhone(e.target.value)})}/>
              </div>
              <div className="err-msg">{errs.whats||""}</div>
            </div>
            <div className="field">
              <label>Ingresso de interesse</label>
              <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:10}}>
                {["simple","diamond"].map(t => (
                  <button type="button" key={t}
                    onClick={()=>setData({...data, tier:t})}
                    style={{
                      padding:"14px", borderRadius:14, border:"none", cursor:"pointer",
                      fontFamily:"var(--f-body)", fontWeight:700, fontSize:".95rem",
                      color: data.tier===t ? "#1a0322" : "#fff",
                      background: data.tier===t ? "linear-gradient(100deg,var(--accent),var(--accent-2))" : "transparent",
                      boxShadow: data.tier===t ? "0 10px 24px -10px oklch(50% 0.2 330 / .7)" : "inset 0 0 0 1.5px var(--panel-line)",
                      transition:".2s",
                    }}>
                    {t==="simple" ? "💜 1º Lote — R$ 110" : "🎟️ 2º Lote — R$ 150"}
                  </button>
                ))}
              </div>
            </div>
            <button type="submit" className="btn btn-full btn-lg" style={{marginTop:8}}>
              <I.lock style={{width:18,height:18}}/> Sim, quero garantir meu lugar
            </button>
            <div className="consent">Vagas limitadas · Ingresso Simple e Diamond · Pagamento seguro</div>
          </form>
        )}
      </div>
    </section>
  );
};

// ===== PS / Footer =====
const PS = () => (
  <section className="sec-tight">
    <div className="wrap">
      <div className="ps reveal">
        <div className="label">P.S.</div>
        <p style={{margin:"8px 0 0", color:"var(--ink-dim)"}}>
          O mercado de limpeza está cheio de gente que trabalha muito e ganha pouco porque <b>nunca aprendeu a tratar o próprio negócio como empresa</b>. O Eleva Clean Floripa é o dia em que isso vira o jogo: excelência, posicionamento e cabeça de dono, no mesmo lugar, com Humberto Celanti e o time que mais entende do setor. As vagas são limitadas pela capacidade do Majestic — e o ingresso está no <b>menor valor de todos os lotes</b> hoje. Garanta o seu antes que feche.
        </p>
      </div>
    </div>
  </section>
);

// ===== Sponsors =====
const Sponsors = () => (
  <section className="sec sponsors-sec">
    <div className="wrap">
      <div className="sec-head center reveal">
        <span className="eyebrow">Quem apoia este movimento</span>
        <h2 className="display h-md" style={{marginTop:14}}>Patrocinadores</h2>
        <div className="divider-line"></div>
      </div>
      <div className="sponsors-row reveal d1">
        {[
          { src: "assets/sponsor-takimaro.jpg", name: "Takimaro" },
          { src: "assets/sponsor-pisoclean.jpg", name: "Pisoclean" },
          { src: "assets/sponsor-safaxinas.jpg", name: "S.A Faxinas" },
        ].map((s,i) => (
          <div className="sponsor-logo" key={i}>
            <img src={s.src} alt={s.name} loading="eager"/>
          </div>
        ))}
      </div>
    </div>
  </section>
);


const Foot = () => (
  <footer className="foot">
    <div className="wrap">
      <div className="logo-clean">ELEVA · CLEAN · FLORIPA</div>
      <div>© 2026 Eleva Clean Floripa · Realização Humberto Celanti</div>
    </div>
  </footer>
);

Object.assign(window, {
  Announce, StickyCTA, Hero, ValueOpening, Pain, Pillars, Benefits,
  Numbers, Speakers, Testimonials, Offer, Objections, Guarantee,
  Urgency, FAQ, FinalCTA, PS, Foot, Sponsors
});