const { useState, useEffect, useRef } = React;

document.documentElement.classList.add('js');

/* Matérias da seção "Fique Por Dentro": cada uma abre a sua página. */
const NEWS = [
  {
    tab: 'DOWNLOADER: Como Instalar?',
    tag: 'Tutorial', author: 'DEX', date: 'Out 2026',
    img: 'assets/Publi/Downloader/logo.png', pos: '50% 50%',
    alt: 'Logotipo do aplicativo Downloader, letra D branca com seta de download sobre fundo laranja',
    href: 'downloader.html',
    text: 'O app essencial para quem usa TV Box: instale aplicativos de fora da loja oficial usando só um link ou código. Veja o passo a passo completo.',
  },
  {
    tab: 'Guia Instalação UNITV',
    tag: 'Tutorial', author: 'DEX', date: 'Out 2026',
    img: 'assets/Publi/UniTV/capa-home.webp', pos: '50% 50%',
    alt: 'Capa do tutorial Instalando UniTV: ícones do Downloader e do UniTV lado a lado sobre fundo escuro com brilho laranja',
    href: 'unitv.html',
    text: 'Aprenda o passo a passo completo de como baixar e instalar o aplicativo UniTV no seu dispositivo de forma rápida e fácil utilizando o app Downloader.',
  },
  {
    tab: 'Nuvio, o novo no pedaço',
    tag: 'Apps', author: 'DEX', date: 'Out 2026',
    img: 'assets/Publi/Nuvio/capa-home.webp', pos: '50% 50%',
    alt: 'Capa da matéria sobre o Nuvio: o nome do app em letras grandes ao lado de um mosaico de capas de filmes e um selo 4K',
    href: 'nuvio.html',
    text: 'App gratuito e de código aberto que toca filmes e séries em até 4K e funciona com serviços de debrid. Explicamos de um jeito simples o que ele faz.',
  },
  {
    tab: 'Firestick, de herói a vilão',
    tag: 'Opinião', author: 'DEX', date: 'Out 2026',
    img: 'assets/Publi/FireStick/capa-home.webp', pos: '50% 50%',
    alt: 'Capa sensacionalista: um Fire Stick desenhado como vilão, com chifres, olhos vermelhos, sorriso malvado e um cadeado, ao lado do título Fire Stick: de herói a vilão',
    href: 'firestick.html',
    text: 'Os Fire TV Sticks novos não instalam mais apps de fora da loja da Amazon. O aparelho que caiu na graça do povo virou as costas. Ainda vale comprar?',
  },
];

const ARTICLES = [
  { title: 'Qual aparelho comprar para a TV em 2026', href: 'qual-aparelho.html', min: 6,
    desc: 'TV Box, Fire Stick, streamer ou a própria Smart TV: o guia para escolher sem arrependimento.',
    img: 'assets/Publi/Artigos/aparelhos.webp', alt: 'Ilustração de uma TV Box, um Fire Stick com cadeado, um streamer e uma Smart TV lado a lado, com a pergunta: qual levar para a sala?',
    tag: 'Guia', tone: 'bg-ink text-paper', big: true },
  { title: 'Internet para 4K: quanto você precisa', href: 'internet-4k.html', min: 4,
    desc: 'Os megas certos para cada qualidade e cinco truques para o vídeo parar de travar.',
    tag: 'Conexão', tone: 'bg-sand text-ink' },
  { title: 'TV Box segura: 5 cuidados antes de instalar apps', href: 'tvbox-segura.html', min: 4,
    desc: 'Liberdade sem dor de cabeça: hábitos simples para proteger o aparelho e os seus dados.',
    tag: 'Segurança', tone: 'bg-white text-ink' },
];


/* Entrada ao rolar: cada parte da seção entra em sequência, uma única vez. */
function Reveal({ as: Tag = 'div', delay = 0, className = '', children, ...rest }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    if (!('IntersectionObserver' in window)) { el.classList.add('in'); return; }
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { el.classList.add('in'); io.disconnect(); }
    }, { threshold: 0.15 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return <Tag ref={ref} style={{ '--d': delay + 'ms' }} className={'rv ' + className} {...rest}>{children}</Tag>;
}

const btn = 'inline-flex min-h-[48px] items-center justify-center bg-fox px-7 text-base font-bold text-ink transition duration-200 hover:!bg-foxdark hover:!text-ink active:scale-[.98]';

function Nav() {
  return (
    <header className="flex items-center justify-between py-4">
      <a href="#top" className="flex min-h-[44px] items-center">
        <img src="assets/logo-dex-tech.png" width="988" height="126" alt="DEX-TECH" className="h-6 w-auto sm:h-8" />
      </a>
      <nav aria-label="Principal" className="flex items-center gap-1 sm:gap-3 text-base font-medium">
        <a href="#noticias" className="hidden min-h-[44px] items-center px-3 sm:flex">Notícias</a>
        <a href="#artigos" className="hidden min-h-[44px] items-center px-3 sm:flex">Artigos</a>
        <a href="#newsletter" className="flex min-h-[44px] items-center bg-ink px-5 font-semibold text-paper transition hover:!bg-fox hover:!text-ink">Newsletter</a>
      </nav>
    </header>
  );
}

function Hero() {
  return (
    <section id="top" className="bg-sand">
      <div className="flex flex-col px-4 pb-[2.1rem] sm:px-8 lg:pb-[2.8rem]">
        <Nav />
        <div className="flex flex-1 flex-col justify-center gap-[1.4rem] pt-[2.1rem] lg:pt-[1.4rem]">
          <h1 className="m-0 text-[clamp(31px,10.15vw,59px)] font-extrabold leading-[.92] tracking-[-.04em] lg:text-[clamp(50px,5.6vw,90px)]">
            <Reveal as="span" className="block">Conteúdo</Reveal>
            <Reveal as="span" delay={90} className="block">Sem Limites</Reveal>
          </h1>
          <Reveal delay={200}>
            <a href="#newsletter" className={btn}>Teste Agora!</a>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

const POSTERS = [
  ['minions.jpg', 'Minions & Monsters'],
  ['img.jpg', 'Spider-Man: Brand New Day'],
  ['img (6).jpg', 'Project Hail Mary'],
  ['toystory5.jpg', 'Toy Story 5'],
  ['img (11).jpg', 'The Punisher: One Last Kill'],
  ['img (10).jpg', 'Avatar Aang: The Last Airbender'],
  ['diad.jpg', 'Disclosure Day'],
  ['img (4).jpg', 'Coyote vs. Acme'],
  ['robin.jpg', 'The Death of Robin Hood'],
  ['img (7).jpg', 'The Uprising'],
  ['img (9).jpg', 'The End of Oak Street'],
  ['img (8).jpg', 'The Invite'],
  ['wheight.jpg', 'The Weight'],
];

/* Carrossel de capas: gira sozinho em loop, para com o mouse em cima, aceita arrastar
   e só anima quando está na tela. Com "reduzir movimento" ele começa parado. */
function Posters() {
  const wrap = useRef(null), track = useRef(null);
  const reduce = typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
  const [playing, setPlaying] = useState(!reduce);
  const s = useRef({ x: 0, v: 0, hover: false, drag: null, visible: true, glide: null, playing: !reduce });
  s.current.playing = playing;

  useEffect(() => {
    const st = s.current, el = track.current;
    const setW = () => el.scrollWidth / 2;
    const cardW = () => { const c = el.firstElementChild; return c ? c.getBoundingClientRect().width + 16 : 200; };
    const base = () => Math.max(28, innerWidth * 0.035); // px por segundo
    let raf, last = performance.now();
    const tick = now => {
      const dt = Math.min(now - last, 64) / 1000; last = now;
      if (st.glide) {
        const t = Math.min((now - st.glide.t0) / 450, 1), e = 1 - Math.pow(1 - t, 3);
        st.x = st.glide.from + (st.glide.to - st.glide.from) * e;
        if (t === 1) st.glide = null;
      } else if (!st.drag) {
        const target = st.playing && !st.hover && st.visible && !document.hidden ? base() : 0;
        st.v += (target - st.v) * Math.min(dt * 3, 1); // acelera e freia suave
        st.x += st.v * dt;
      }
      const w = setW();
      if (w > 0) st.x = ((st.x % w) + w) % w;
      el.style.transform = `translate3d(${-st.x}px,0,0)`;
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    st.step = d => { st.glide = { from: st.x, to: st.x + d * cardW(), t0: performance.now() }; };
    const io = 'IntersectionObserver' in window ? new IntersectionObserver(([e]) => { st.visible = e.isIntersecting; }) : null;
    io && io.observe(wrap.current);
    return () => { cancelAnimationFrame(raf); io && io.disconnect(); };
  }, []);

  const down = e => {
    if (e.button && e.button !== 0) return;
    s.current.drag = { x0: e.clientX, start: s.current.x, lx: e.clientX, lt: performance.now(), moved: false };
    s.current.glide = null;
    e.currentTarget.setPointerCapture(e.pointerId);
  };
  const move = e => {
    const d = s.current.drag; if (!d) return;
    const now = performance.now();
    s.current.v = -(e.clientX - d.lx) / Math.max((now - d.lt) / 1000, 0.001);
    d.lx = e.clientX; d.lt = now;
    if (Math.abs(e.clientX - d.x0) > 4) d.moved = true;
    s.current.x = d.start - (e.clientX - d.x0);
  };
  const up = () => { const st = s.current; if (!st.drag) return; st.drag = null; st.v = Math.max(-2500, Math.min(2500, st.v)); };
  const key = e => {
    if (e.key === 'ArrowRight') { e.preventDefault(); s.current.step(1); }
    if (e.key === 'ArrowLeft') { e.preventDefault(); s.current.step(-1); }
  };
  const ctl = 'grid h-12 w-12 place-items-center rounded-full border-2 border-paper/30 text-lg font-bold text-paper transition hover:border-fox hover:bg-fox hover:text-ink';

  return (
    <section id="filmes" aria-roledescription="carrossel" aria-label="Capas de filmes" className="overflow-hidden bg-ink py-[clamp(56px,7vw,112px)] text-paper">
      <div className="mx-auto flex max-w-[1280px] flex-wrap items-end justify-between gap-6 px-4 sm:px-8">
        <Reveal as="h2" className="m-0 text-[clamp(32px,4.4vw,64px)] font-extrabold leading-[.98] tracking-[-.03em]">
          Em destaque
        </Reveal>
        <div className="flex gap-3">
          <button type="button" aria-label="Filme anterior" className={ctl} onClick={() => s.current.step(-1)}>←</button>
          <button type="button" aria-label={playing ? 'Pausar carrossel' : 'Retomar carrossel'} className={ctl} onClick={() => setPlaying(p => !p)}>{playing ? '❚❚' : '▶'}</button>
          <button type="button" aria-label="Próximo filme" className={ctl} onClick={() => s.current.step(1)}>→</button>
        </div>
      </div>
      <div ref={wrap} tabIndex={0} onKeyDown={key}
        onMouseEnter={() => (s.current.hover = true)} onMouseLeave={() => (s.current.hover = false)}
        onFocus={() => (s.current.hover = true)} onBlur={() => (s.current.hover = false)}
        onPointerDown={down} onPointerMove={move} onPointerUp={up} onPointerCancel={up}
        className="poster-rail mt-10 cursor-grab touch-pan-y select-none focus:outline-none focus-visible:ring-2 focus-visible:ring-fox active:cursor-grabbing lg:mt-14">
        <ul ref={track} className="m-0 flex w-max list-none gap-4 p-0 will-change-transform">
          {[...POSTERS, ...POSTERS].map(([f, t], k) => (
            <li key={k} aria-hidden={k >= POSTERS.length || undefined}
              className="group relative w-[clamp(140px,17vw,230px)] shrink-0 overflow-hidden rounded-[10px] bg-[#2a2a2a]">
              <img src={'assets/Poster/' + f} alt={k < POSTERS.length ? 'Capa do filme ' + t : ''} width="300" height="450"
                loading="lazy" draggable="false" className="block aspect-[2/3] w-full object-cover transition duration-500 group-hover:scale-[1.06]" />
              <span className="pointer-events-none absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/85 to-transparent px-3 pb-3 pt-10 text-sm font-bold leading-tight opacity-0 transition duration-300 group-hover:opacity-100">{t}</span>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

/* A interação central: escolher uma notícia troca a matéria em destaque. */
function News() {
  const [i, setI] = useState(0);
  const refs = useRef([]);
  const n = NEWS[i];
  const onKey = e => {
    const d = e.key === 'ArrowDown' || e.key === 'ArrowRight' ? 1 : e.key === 'ArrowUp' || e.key === 'ArrowLeft' ? -1 : 0;
    if (!d) return;
    e.preventDefault();
    const next = (i + d + NEWS.length) % NEWS.length;
    setI(next);
    refs.current[next] && refs.current[next].focus();
  };
  return (
    <section id="noticias" className="px-4 py-[clamp(72px,10vw,160px)] sm:px-8">
      <div className="mx-auto max-w-[1280px]">
        <Reveal as="h2" className="m-0 max-w-[16ch] text-[clamp(36px,5vw,72px)] font-extrabold leading-[.98] tracking-[-.03em]">
          Fique Por Dentro
        </Reveal>
        <div className="mt-10 grid gap-6 lg:mt-14 lg:grid-cols-[minmax(0,5fr)_minmax(0,7fr)] lg:gap-10">
          <Reveal delay={80} role="tablist" aria-label="Notícias" aria-orientation="vertical" className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:flex lg:flex-col" onKeyDown={onKey}>
            {NEWS.map((x, k) => {
              const on = k === i;
              return (
                <button key={k} ref={el => (refs.current[k] = el)} role="tab" id={'tab-' + k}
                  aria-selected={on} aria-controls="painel-noticia" tabIndex={on ? 0 : -1}
                  onClick={() => setI(k)}
                  className={`cut-tl min-h-[88px] rounded-[14px] py-4 pl-12 pr-5 text-left font-disket text-base font-bold leading-snug transition duration-200 hover:translate-x-1 ${on ? 'bg-fox text-ink' : 'bg-[#2C3E50] text-paper hover:bg-[#E74C3C]'}`}>
                  {x.tab}
                </button>
              );
            })}
          </Reveal>
          <Reveal delay={160} role="tabpanel" id="painel-noticia" aria-labelledby={'tab-' + i} className="bg-white">
            <div key={i} className="swap">
              {n.img && (
                <img src={n.img} alt={n.alt} width="1920" height="1280" loading="lazy"
                  className="aspect-[3/2] w-full object-cover" style={{ objectPosition: n.pos }} />
              )}
              <div className="flex flex-col gap-4 bg-sand p-6 sm:p-9">
                <h3 className="m-0 text-[clamp(26px,3vw,40px)] font-extrabold leading-[1.05] tracking-[-.02em]">{n.tab}</h3>
                <p className="m-0 max-w-[60ch] text-lg leading-relaxed">{n.text}</p>
                {n.href && <a href={n.href} className={btn + ' self-start'}>Ler matéria completa</a>}
                <p className="m-0 flex flex-wrap items-center gap-x-5 gap-y-2 text-base">
                  <span className="rounded-[3px] bg-ink px-2.5 py-1 text-sm font-semibold text-paper">{n.tag}</span>
                  <span>Por <strong>{n.author}</strong></span>
                  <span>{n.date}</span>
                </p>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function Articles() {
  return (
    <section id="artigos" className="px-4 pb-[clamp(72px,10vw,160px)] sm:px-8">
      <div className="mx-auto max-w-[1280px]">
        <Reveal as="h2" className="m-0 max-w-[18ch] text-[clamp(36px,5vw,72px)] font-extrabold leading-[.98] tracking-[-.03em]">
          Artigos para ler com calma
        </Reveal>
        <div className="mt-10 grid gap-4 lg:mt-14 lg:grid-cols-[7fr_5fr] xl:grid-cols-[6fr_6fr] lg:grid-rows-2">
          {ARTICLES.map((a, k) => (
            <Reveal key={k} as="article" delay={k * 90}
              className={`group relative flex min-h-[220px] cursor-pointer flex-col justify-between gap-10 p-6 transition-transform duration-200 hover:-translate-y-1 sm:p-9 ${a.tone} ${a.big ? 'lg:row-span-2 lg:min-h-[480px]' : ''}`}>
              {a.img && <img src={a.img} alt={a.alt} width="1600" height="900" loading="lazy" className="-mx-6 -mt-6 mb-0 aspect-[16/9] w-[calc(100%+3rem)] max-w-none object-cover sm:-mx-9 sm:-mt-9 sm:w-[calc(100%+4.5rem)]" />}
              <div className="flex flex-col gap-3">
                <h3 className={`m-0 font-extrabold leading-[1.02] tracking-[-.02em] text-balance ${a.big ? 'max-w-[18ch] text-[clamp(34px,4.6vw,64px)]' : 'max-w-[24ch] text-[clamp(26px,2.4vw,32px)]'}`}>
                  <a href={a.href} className="after:absolute after:inset-0 hover:!text-inherit">{a.title}</a>
                </h3>
                <p className="m-0 max-w-[48ch] text-lg leading-relaxed">{a.desc}</p>
              </div>
              <p className="m-0 flex flex-wrap items-center gap-x-5 gap-y-2 text-base">
                <span className={`rounded-[3px] px-2.5 py-1 text-sm font-semibold ${a.big ? 'bg-fox text-ink' : 'bg-ink text-paper'}`}>{a.tag}</span>
                <span>Por <strong>DEX</strong></span>
                <span>{a.min} min de leitura</span>
                <span aria-hidden="true" className="ml-auto text-2xl font-extrabold transition-transform duration-200 group-hover:translate-x-1">→</span>
              </p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* Trilha do iniciante: liga os posts na ordem em que fazem sentido. */
const STEPS = [
  ['Escolha o aparelho', 'TV Box, stick ou streamer: qual combina com você.', 'qual-aparelho.html'],
  ['Instale o Downloader', 'O app que abre a porta para tudo o que vem depois.', 'downloader.html'],
  ['Escolha seu app', 'Do UniTV ao Nuvio, o novo no pedaço.', 'nuvio.html'],
];
const MOSAIC = ['img (6).jpg', 'minions.jpg', 'img.jpg', 'toystory5.jpg', 'robin.jpg', 'img (10).jpg', 'img (11).jpg', 'img (9).jpg', 'diad.jpg'];

function Banner() {
  return (
    <section className="px-4 pb-[clamp(72px,10vw,160px)] sm:px-8">
      <Reveal className="cut-banner mx-auto grid max-w-[1280px] overflow-hidden rounded-[14px] bg-ink text-paper lg:grid-cols-[1fr_1fr]">
        <div className="flex flex-col gap-8 p-[clamp(28px,4vw,56px)] pt-[clamp(72px,9vw,120px)]">
          <div className="flex flex-col gap-4">
            <p className="m-0 text-sm font-extrabold uppercase tracking-[.14em] text-fox">Novo por aqui?</p>
            <h2 className="m-0 max-w-[16ch] text-[clamp(32px,4.2vw,56px)] font-extrabold leading-[1] tracking-[-.03em]">Comece por aqui</h2>
            <p className="m-0 max-w-[40ch] text-lg leading-relaxed">Três passos para transformar qualquer TV numa central de filmes e séries.</p>
          </div>
          <ol className="m-0 flex list-none flex-col gap-3 p-0">
            {STEPS.map(([t, d, href], k) => (
              <li key={k}>
                <a href={href} className="group flex items-center gap-4 rounded-[10px] border border-paper/15 p-4 transition hover:!border-fox hover:!text-paper">
                  <span className="grid h-11 w-11 shrink-0 place-items-center bg-fox text-lg font-extrabold text-ink">{k + 1}</span>
                  <span className="flex flex-col">
                    <strong className="text-lg">{t}</strong>
                    <span className="text-base text-sand">{d}</span>
                  </span>
                  <span aria-hidden="true" className="ml-auto text-xl font-extrabold transition-transform duration-200 group-hover:translate-x-1">→</span>
                </a>
              </li>
            ))}
          </ol>
        </div>
        <div aria-hidden="true" className="relative min-h-[300px] overflow-hidden">
          <div className="absolute -inset-[20%] grid rotate-[8deg] grid-cols-3 gap-3">
            {MOSAIC.map(f => <img key={f} src={'assets/Poster/' + f} alt="" width="300" height="450" loading="lazy" className="aspect-[2/3] w-full rounded-[8px] object-cover" />)}
          </div>
          <div className="absolute inset-0 bg-gradient-to-r from-ink via-ink/40 to-transparent lg:from-ink/90" />
        </div>
      </Reveal>
    </section>
  );
}

function Newsletter() {
  const [form, setForm] = useState({ name: '', email: '' });
  const [err, setErr] = useState('');
  const [done, setDone] = useState(false);
  const set = k => e => { setForm(f => ({ ...f, [k]: e.target.value })); if (k === 'email') setErr(''); };
  const submit = e => {
    e.preventDefault();
    if (!/^\S+@\S+\.\S+$/.test(form.email)) { setErr('Digite um e-mail válido, como nome@dominio.com.'); return; }
    setDone(true);
  };
  const field = 'min-h-[48px] w-full bg-paper px-4 text-base text-ink placeholder:text-[#5f5750] focus:outline-none focus-visible:ring-2 focus-visible:ring-ink';
  return (
    <section id="newsletter" className="bg-fox px-4 py-[clamp(72px,10vw,140px)] text-ink sm:px-8">
      <div className="mx-auto grid max-w-[1280px] gap-10 lg:grid-cols-[1fr_1fr] lg:gap-20">
        <Reveal as="h2" className="m-0 max-w-[12ch] text-[clamp(40px,6vw,88px)] font-extrabold leading-[.95] tracking-[-.04em]">
          Novidades no seu e-mail
        </Reveal>
        <Reveal delay={120}>
          <p className="m-0 mb-4 max-w-[40ch] text-lg leading-relaxed">Um resumo por mês, sem spam. Cancele quando quiser.</p>
          <ul className="m-0 mb-6 flex list-none flex-col gap-2 p-0 text-lg font-semibold">
            <li>✓ Tutoriais novos, passo a passo</li>
            <li>✓ Apps que valem a pena (e os que não valem)</li>
            <li>✓ Alertas como o do Fire Stick, antes de você comprar</li>
          </ul>
          {done ? (
            <div role="status" className="bg-paper p-6 text-lg">Obrigado, {form.name || 'leitor'}! Inscrição confirmada. O próximo resumo chega no seu e-mail.</div>
          ) : (
            <form onSubmit={submit} noValidate className="flex flex-col gap-4">
              <label className="flex flex-col gap-1.5 text-base font-semibold">Nome
                <input autoComplete="name" value={form.name} onChange={set('name')} className={field} />
              </label>
              <label className="flex flex-col gap-1.5 text-base font-semibold">E-mail
                <input type="email" autoComplete="email" inputMode="email" value={form.email} onChange={set('email')}
                  aria-invalid={!!err} aria-describedby={err ? 'erro-email' : undefined} className={field} />
                {err && <span id="erro-email" role="alert" className="font-semibold">{err}</span>}
              </label>
              <button type="submit" className="mt-2 inline-flex min-h-[52px] items-center justify-center bg-ink px-7 text-base font-bold text-paper transition duration-200 hover:bg-[#3a3532] active:scale-[.98]">Assinar</button>
            </form>
          )}
        </Reveal>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="bg-paper px-4 pt-[clamp(56px,8vw,112px)] pb-8 sm:px-8">
      <img src="assets/logo-dex-tech.png" width="988" height="126" alt="DEX-TECH" className="mx-auto block h-auto w-full max-w-[1280px]" />
      <div className="mx-auto mt-10 max-w-[1280px] text-sm leading-relaxed">
        <p className="m-0">© {new Date().getFullYear()} DEX-TECH-LABS</p>
      </div>
    </footer>
  );
}

function App() {
  return (
    <div className="min-h-[100svh] overflow-x-hidden bg-paper">
      <a href="#conteudo" className="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-50 focus:bg-ink focus:px-4 focus:py-3 focus:text-paper">Pular para o conteúdo</a>
      <Hero /><main id="conteudo"><Posters /><News /><Articles /><Banner /><Newsletter /></main><Footer />
      <a href="https://wa.me/message/LMSCMAX6STYMM1?src=qr" target="_blank" rel="noopener noreferrer" aria-label="Falar no WhatsApp" className="fixed bottom-4 right-4 z-50 block h-16 w-16 transition duration-200 hover:scale-110">
        <img src="assets/whatsapp.png" width="600" height="600" alt="" className="h-full w-full" />
      </a>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);