// Landing page sections
const { useState: useStateP, useEffect: useEffectP } = React;

/* ---------------- NAV ---------------- */
function Nav() {
  const [scrolled, setScrolled] = useStateP(false);
  const [open, setOpen] = useStateP(false);
  useEffectP(() => {
    const on = () => setScrolled(window.scrollY > 16);
    on();
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  return (
    <header className={"nav" + (scrolled ? " is-scrolled" : "")}>
      <div className="nav__in container">
        <Logo />
        <nav className="nav__links">
          {NE.nav.map((l) => <a key={l.href} href={l.href}>{l.label}</a>)}
        </nav>
        <div className="nav__actions">
          <Button size="sm" href="#demo">Demonstração</Button>
        </div>
        <button className="nav__burger" onClick={() => setOpen(!open)} aria-label="Menu">
          <span /><span /><span />
        </button>
      </div>
      {open && (
        <div className="nav__mobile">
          {NE.nav.map((l) => <a key={l.href} href={l.href} onClick={() => setOpen(false)}>{l.label}</a>)}
          <Button size="md" href="#demo" className="nav__mobilecta">Demonstração gratuita</Button>
        </div>
      )}
    </header>
  );
}

/* ---------------- HERO ---------------- */
function Hero() {
  const h = NE.hero;
  return (
    <section className="hero" id="top">
      <div className="hero__bg" aria-hidden="true" />
      <div className="container hero__in">
        <div className="hero__copy">
          <Reveal><Eyebrow>{h.eyebrow}</Eyebrow></Reveal>
          <Reveal delay={60} as="h1" className="hero__title">
            {h.title.map((line, i) => (
              <span key={i} className={"hero__line" + (i === h.title.length - 1 ? " hero__line--accent" : "")}>{line}</span>
            ))}
          </Reveal>
          <Reveal delay={140} as="p" className="hero__sub">{h.sub}</Reveal>
          <Reveal delay={220} className="hero__ctas">
            <Button size="lg" href="#demo">{h.cta}</Button>
            <span className="hero__micro"><Icon name="check" size={15} stroke={2.4} />{h.microcopy}</span>
          </Reveal>
        </div>
        <Reveal delay={180} y={36} className="hero__visual">
          <div className="hero__phone">
            <img src={(window.__resources && window.__resources.heroImg) || "assets/app-agenda-clean.png"} alt="App Na Escala — agenda mensal de plantões com escala definitiva e pré-escala" />
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------------- PAIN ---------------- */
function Pain() {
  const p = NE.pain;
  return (
    <section className="pain section" id="problema">
      <div className="container">
        <div className="pain__head">
          <Reveal><Eyebrow>{p.eyebrow}</Eyebrow></Reveal>
          <Reveal delay={60} as="h2" className="section__title">{p.title}</Reveal>
          <Reveal delay={120} as="p" className="section__sub">{p.sub}</Reveal>
        </div>
        <div className="pain__grid">
          {p.items.map((it, i) => (
            <Reveal key={i} delay={i * 60} className="pain__card">
              <span className="pain__x">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" /></svg>
              </span>
              <p>{it}</p>
            </Reveal>
          ))}
        </div>
        <Reveal delay={120} className="pain__closer">
          <Icon name="bolt" size={20} stroke={2} />
          <p>{p.closer}</p>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------------- SOLUTION / FEATURES ---------------- */
function Solution() {
  const s = NE.solution;
  return (
    <section className="solution section" id="solucao">
      <div className="container">
        <div className="solution__head">
          <Reveal><Eyebrow>{s.eyebrow}</Eyebrow></Reveal>
          <Reveal delay={60} as="h2" className="section__title">{s.title}</Reveal>
          <Reveal delay={120} as="p" className="section__sub">{s.sub}</Reveal>
        </div>
        <div className="feat__grid" id="recursos">
          {s.features.map((f, i) => (
            <Reveal key={f.title} delay={(i % 3) * 70} className="feat__card">
              <span className="feat__icon"><Icon name={f.icon} size={24} stroke={1.9} /></span>
              <h3>{f.title}</h3>
              <p>{f.desc}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- DEMO band (interactive) ---------------- */
function Demo() {
  return (
    <section className="demo section" id="demo">
      <div className="container demo__in">
        <div className="demo__copy">
          <Reveal><Eyebrow light>Veja na prática</Eyebrow></Reveal>
          <Reveal delay={60} as="h2" className="section__title section__title--light">Toda a sua escala na palma da mão.</Reveal>
          <Reveal delay={120} as="p" className="section__sub section__sub--light">
            Acompanhe a <b>pré-escala</b>, conteste dentro do prazo e baixe a <b>escala definitiva</b> por setor, tudo pelo celular, em tempo real.
          </Reveal>
          <Reveal delay={180} className="demo__points">
            {["Pré-escala com prazo para contestação", "Escala definitiva publicada por setor", "Plantões, trocas e ausências num só lugar"].map((t) => (
              <span key={t} className="demo__point"><Icon name="check" size={16} stroke={2.4} />{t}</span>
            ))}
          </Reveal>
          <Reveal delay={240}>
            <Button size="lg" variant="invert" href="#oferta">Quero testar grátis</Button>
          </Reveal>
        </div>
        <Reveal delay={120} y={36} className="demo__visual">
          <div className="hero__phone demo__phone">
            <img src={(window.__resources && window.__resources.demoImg) || "assets/app-agenda-light-clean.png"} alt="App Na Escala — agenda mensal de plantões com pré-escala e escala definitiva" />
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------------- DIFERENCIAIS ---------------- */
function Diferenciais() {
  const d = NE.diferenciais;
  return (
    <section className="diff section" id="diferenciais">
      <div className="container">
        <div className="diff__head">
          <Reveal><Eyebrow>{d.eyebrow}</Eyebrow></Reveal>
          <Reveal delay={60} as="h2" className="section__title">{d.title}</Reveal>
          <Reveal delay={120} as="p" className="section__sub">{d.sub}</Reveal>
        </div>
        <div className="diff__grid">
          {d.items.map((it, i) => (
            <Reveal key={it.title} delay={(i % 2) * 70} className="diff__item">
              <span className="diff__ico"><Icon name={it.icon} size={22} stroke={1.9} /></span>
              <div className="diff__txt">
                <h3>{it.title}</h3>
                <p>{it.desc}</p>
              </div>
            </Reveal>
          ))}
        </div>
        <Reveal delay={80} className="diff__closer">
          <div className="diff__closertxt">
            <h3>{d.closer.title}</h3>
            <p>{d.closer.text}</p>
          </div>
          <Button size="lg" variant="invert" href="Planos.html" className="diff__closercta">{d.closer.cta}</Button>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------------- BENEFITS / STATS ---------------- */
function Benefits() {
  const b = NE.benefits;
  return (
    <section className="benefits section" id="resultados">
      <div className="container">
        <div className="benefits__head">
          <Reveal><Eyebrow>{b.eyebrow}</Eyebrow></Reveal>
          <Reveal delay={60} as="h2" className="section__title">{b.title}</Reveal>
        </div>
        <div className="stat__row">
          {b.items.map((s, i) => (
            <Reveal key={i} delay={i * 80} className="stat">
              <b className={"stat__num" + (s.sm ? " stat__num--sm" : "")}>{s.stat}</b>
              <span className="stat__label">{s.label}</span>
            </Reveal>
          ))}
        </div>
        <div className="benefits__list">
          {b.list.map((it, i) => (
            <Reveal key={i} delay={(i % 3) * 60} className="benefits__item">
              <Icon name="check" size={18} stroke={2.4} /> {it}
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- SOCIAL PROOF ---------------- */
function Social() {
  const s = NE.social;
  const items = s.testimonials;
  const [i, setI] = useStateP(0);
  const [paused, setPaused] = useStateP(false);
  const go = (n) => setI((n + items.length) % items.length);
  useEffectP(() => {
    if (paused) return;
    const t = setInterval(() => setI((p) => (p + 1) % items.length), 6500);
    return () => clearInterval(t);
  }, [paused, items.length]);
  const t = items[i];
  return (
    <section className="social section">
      <div className="container">
        <Reveal className="social__head">
          <Eyebrow>{s.eyebrow}</Eyebrow>
          <h2 className="section__title">{s.title}</h2>
        </Reveal>
        <div
          className="social__quote-wrap"
          onMouseEnter={() => setPaused(true)}
          onMouseLeave={() => setPaused(false)}
        >
          <button className="social__arrow social__arrow--prev" onClick={() => go(i - 1)} aria-label="Anterior">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M15 6l-6 6 6 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </button>

          <div className="social__quote" key={i}>
            <span className="social__mark">”</span>
            <blockquote>{t.quote}</blockquote>
            <div className="social__author">
              <span className={"social__av tone-" + t.tone}>{t.init}</span>
              <span><b>{t.author}</b><em>{t.role}</em></span>
            </div>
          </div>

          <button className="social__arrow social__arrow--next" onClick={() => go(i + 1)} aria-label="Próximo">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M9 6l6 6-6 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </button>
        </div>
        <div className="social__dots">
          {items.map((_, n) => (
            <button
              key={n}
              className={"social__dot" + (n === i ? " is-on" : "")}
              onClick={() => go(n)}
              aria-label={"Depoimento " + (n + 1)}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- OFFER ---------------- */
function Offer() {
  const o = NE.offer;
  return (
    <section className="offer section" id="oferta">
      <div className="container offer__in">
        <Reveal className="offer__included">
          <Eyebrow>{o.eyebrow}</Eyebrow>
          <h2 className="section__title">{o.title}</h2>
          <ul className="offer__list">
            {o.included.map((it) => (
              <li key={it}><Icon name="check" size={17} stroke={2.4} />{it}</li>
            ))}
          </ul>
        </Reveal>
        <Reveal delay={120} y={30} className="offer__card">
          <span className="offer__badge">Oferta especial</span>
          <h3 className="offer__cardtitle">{o.trialTitle}</h3>
          <p className="offer__carddesc">{o.trialDesc}</p>
          <div className="offer__points">
            {o.trialPoints.map((t) => (
              <span key={t}><Icon name="check" size={15} stroke={2.6} />{t}</span>
            ))}
          </div>
          <Button size="lg" href="#demo" className="offer__cta">{o.cta}</Button>
          <span className="offer__fine">Sem cartão de crédito · cancele quando quiser</span>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------------- FAQ ---------------- */
function Faq() {
  const f = NE.faq;
  const [open, setOpen] = useStateP(0);
  return (
    <section className="faq section" id="faq">
      <div className="container faq__in">
        <div className="faq__head">
          <Reveal><Eyebrow>{f.eyebrow}</Eyebrow></Reveal>
          <Reveal delay={60} as="h2" className="section__title">{f.title}</Reveal>
        </div>
        <div className="faq__list">
          {f.items.map((it, i) => {
            const isOpen = open === i;
            return (
              <Reveal key={i} delay={(i % 3) * 50} className={"faq__item" + (isOpen ? " is-open" : "")}>
                <button className="faq__q" onClick={() => setOpen(isOpen ? -1 : i)}>
                  <span>{it.q}</span>
                  <span className="faq__icon"><Icon name={isOpen ? "minus" : "plus"} size={18} stroke={2.4} /></span>
                </button>
                <div className="faq__a" style={{ maxHeight: isOpen ? 420 : 0 }}>
                  <p>{it.a}</p>
                </div>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ---------------- FINAL CTA ---------------- */
function FinalCta() {
  const c = NE.finalCta;
  return (
    <section className="finalcta section">
      <div className="container">
        <Reveal className="finalcta__card">
          <div className="finalcta__bg" aria-hidden="true" />
          <Eyebrow light>{c.eyebrow}</Eyebrow>
          <h2 className="finalcta__title">{c.title}</h2>
          <p className="finalcta__sub">{c.sub}</p>
          <Button size="lg" variant="invert" href="Planos.html">{c.cta}</Button>
          <span className="finalcta__micro"><Icon name="check" size={15} stroke={2.4} />{c.microcopy}</span>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------------- FOOTER ---------------- */
function Footer() {
  const f = NE.footer;
  return (
    <footer className="footer">
      <div className="container footer__in">
        <div className="footer__brand">
          <Logo light />
          <p className="footer__tag">{f.tagline}</p>
        </div>
        <nav className="footer__nav">
          <h4>Navegação</h4>
          {NE.nav.map((l) => <a key={l.href} href={l.href}>{l.label}</a>)}
        </nav>
        <div className="footer__contact">
          <a className="footer__cline" href={f.site.href} target="_blank" rel="noopener noreferrer">
            <Icon name="globe" size={18} stroke={1.8} />{f.site.label}
          </a>
          <a className="footer__cline" href={"mailto:" + f.email}>
            <Icon name="mail" size={18} stroke={1.8} />{f.email}
          </a>
          <a className="footer__cline" href={f.whatsapp.href} target="_blank" rel="noopener noreferrer">
            <Icon name="whatsapp" size={18} stroke={1.8} />{f.whatsapp.label}
          </a>
          <a className="footer__cline" href={f.instagram} target="_blank" rel="noopener noreferrer">
            <Icon name="instagram" size={18} stroke={1.8} />@appnaescala
          </a>
        </div>
      </div>
      <div className="container footer__bottom">
        <span>© 2026 Na Escala. Todos os direitos reservados.</span>
      </div>
    </footer>
  );
}

/* ---------------- BACK TO TOP ---------------- */
function BackToTop() {
  const [show, setShow] = useStateP(false);
  useEffectP(() => {
    const on = () => {
      const sc = window.scrollY || document.documentElement.scrollTop;
      const vh = window.innerHeight || document.documentElement.clientHeight;
      setShow(sc > vh * 0.5);
    };
    on();
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  const toTop = () => window.scrollTo({ top: 0, behavior: "smooth" });
  return (
    <button
      className={"totop" + (show ? " is-show" : "")}
      onClick={toTop}
      aria-label="Voltar ao topo"
    >
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
        <path d="M12 19V6M6 12l6-6 6 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    </button>
  );
}

Object.assign(window, { Nav, Hero, Pain, Solution, Demo, Diferenciais, Benefits, Social, Offer, Faq, FinalCta, Footer, BackToTop });