// Sections: Sobre, Services, Marquee, Footer

function useReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add('is-in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -50px 0px' });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  });
}

function Nav({ lang, setLang, t }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={"nav" + (scrolled ? " is-scrolled" : "")}>
      <div className="shell nav__inner">
        <a href="#top" className="brand">
          <img src="assets/logo-fermax.png" alt="FerMax" />
          <div>
            <div className="brand__word"><b>Fer</b>Max</div>
            <div className="brand__sub">tecnologia &amp; soluções</div>
          </div>
        </a>
        <div className="nav__menu">
          <a href="#sobre">{t.nav.sobre}</a>
          <a href="#servicos">{t.nav.servicos}</a>
          <a href="#salus">{t.nav.produto}</a>
          <a href="#contato">{t.nav.contato}</a>
        </div>
        <div className="nav__right">
          <div className="lang">
            <button className={lang === 'pt' ? 'is-active' : ''} onClick={() => setLang('pt')}>PT</button>
            <button className={lang === 'en' ? 'is-active' : ''} onClick={() => setLang('en')}>EN</button>
          </div>
          <a href="https://salusvitatech.com.br/" target="_blank" rel="noopener" className="btn btn--primary">
            SalusVita <Icon.ArrowOut />
          </a>
        </div>
      </div>
    </nav>
  );
}

function Hero({ t }) {
  return (
    <section className="hero" id="top">
      <div className="hero__grid" />
      <div className="hero__glow" />
      <div className="shell hero__inner">
        <div className="hero__tag reveal">
          <span className="pill">{t.hero.pill}</span>
          <span>{t.hero.tag}</span>
        </div>
        <h1 className="hero__title reveal" style={{ '--reveal-delay': '80ms' }}>
          {t.hero.title_a} <em>{t.hero.title_em}</em> {t.hero.title_b}
        </h1>
        <p className="hero__sub reveal" style={{ '--reveal-delay': '160ms' }}>{t.hero.sub}</p>
        <div className="hero__actions reveal" style={{ '--reveal-delay': '220ms' }}>
          <a href="#salus" className="btn btn--primary">
            {t.hero.ctaPrimary} <Icon.Arrow />
          </a>
          <a href="#contato" className="btn">
            {t.hero.ctaSecondary}
          </a>
        </div>
        <div className="hero__meta reveal" style={{ '--reveal-delay': '300ms' }}>
          {t.hero.meta.map((m, i) => (
            <div key={i}>
              <div className="hero__meta-k">{m.k}</div>
              <div className="hero__meta-v">{m.v}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Marquee({ items }) {
  const doubled = [...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee__track">
        {doubled.map((it, i) => (
          <span key={i} className="marquee__item">{it}</span>
        ))}
      </div>
    </div>
  );
}

function Sobre({ t }) {
  return (
    <section className="section" id="sobre">
      <div className="shell">
        <div className="s-head">
          <div className="reveal">
            <div className="eyebrow" style={{ marginBottom: 18 }}>{t.sobre.eyebrow}</div>
            <h2 className="s-head__title">{t.sobre.title}</h2>
          </div>
          <div className="s-head__lede reveal" style={{ '--reveal-delay': '80ms' }}>
            {t.sobre.lede}
          </div>
        </div>

        <div className="sobre">
          <div className="sobre__lead reveal">
            {t.sobre.lead}<span>{t.sobre.leadSpan}</span>
          </div>
          <div className="sobre__cols reveal" style={{ '--reveal-delay': '120ms' }}>
            {t.sobre.cols.map((c, i) => (
              <div className="sobre__col" key={i}>
                <h4>{c.h}</h4>
                <p>{c.p}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Services({ t }) {
  const icons = [<Icon.Code />, <Icon.Squad />, <Icon.Health />, <Icon.Legacy />];
  const sizes = ['svc--lg', 'svc--md', 'svc--sm', 'svc--md'];
  // Reorder to make a 6-6 / 4-8 grid
  const layout = [
    { cls: 'svc--lg' }, { cls: 'svc--md' },
    { cls: 'svc--sm' }, { cls: 'svc--md' }
  ];
  // Adjust to 12-col grid: lg(6) + md(6); sm(4) + md(8)
  const layout2 = [
    'svc--lg', 'svc--md', 'svc--sm', 'svc--md'
  ];
  // simpler: 6-6, 4-8
  return (
    <section className="section" id="servicos">
      <div className="shell">
        <div className="s-head">
          <div className="reveal">
            <div className="eyebrow" style={{ marginBottom: 18 }}>{t.services.eyebrow}</div>
            <h2 className="s-head__title">{t.services.title}</h2>
          </div>
          <div className="s-head__lede reveal" style={{ '--reveal-delay': '80ms' }}>
            {t.services.lede}
          </div>
        </div>

        <div className="services">
          {t.services.list.map((s, i) => {
            const klass = i === 0 ? 'svc--lg' : i === 1 ? 'svc--md' : i === 2 ? 'svc--sm' : 'svc--md';
            // Make 4-card grid: row1 6+6, row2 4+8
            const cls = i === 0 ? 'svc--lg' : i === 1 ? 'svc--md' : i === 2 ? 'svc--sm' : 'svc--md';
            return (
              <article className={"svc reveal " + cls} key={i} style={{ '--reveal-delay': (i * 60) + 'ms' }}>
                <div className="svc__decor" />
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                  <div className="svc__icon">{icons[i]}</div>
                  <span className="svc__num">{s.n}</span>
                </div>
                <h3 className="svc__title">{s.t}</h3>
                <p className="svc__desc">{s.d}</p>
                <div className="svc__tags">
                  {s.tags.map((tg, j) => <span className="svc__tag" key={j}>{tg}</span>)}
                </div>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function Footer({ t, lang }) {
  return (
    <footer className="foot" id="contato">
      <div className="shell">
        <div className="foot__top">
          <div className="foot__cta reveal">
            <h3>{t.foot.cta}</h3>
            <a href="https://salusvitatech.com.br/" target="_blank" rel="noopener" className="btn btn--primary">
              {t.foot.ctaBtn} <Icon.ArrowOut />
            </a>
            <div style={{ marginTop: 22, fontSize: 14, color: 'var(--text-soft)' }}>
              <a href={"mailto:" + t.foot.contato} style={{ color: 'var(--accent)' }}>{t.foot.contato}</a>
            </div>
          </div>
          {t.foot.cols.map((c, i) => (
            <div className="foot__col reveal" key={i} style={{ '--reveal-delay': (i * 60 + 60) + 'ms' }}>
              <h5>{c.h}</h5>
              <ul>
                {c.l.map((l, j) => <li key={j}><a href="#">{l}</a></li>)}
              </ul>
            </div>
          ))}
        </div>

        <div className="foot__big">FerMax</div>

        <div className="foot__base">
          <div>{t.foot.legal}</div>
          <div>{t.foot.year}</div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { useReveal, Nav, Hero, Marquee, Sobre, Services, Footer });