/* global React, ReactDOM */
const { useState, useEffect, useRef } = React;

/* =================== IMAGE BANK ===================
   Stock church/worship imagery. If any of these fail to load,
   the CSS fallback gradients keep the design intact.
*/
const IMG = {
  logoMark: "assets/logo-mark.png",
  logoWordmark: "assets/logo-wordmark.png",
  hero1: "https://images.unsplash.com/photo-1438232992991-995b7058bbb3?w=2000&q=80",
  hero2: "https://images.unsplash.com/photo-1519892338195-9d4f3c0b6e7d?w=2000&q=80",
  hero3: "https://images.unsplash.com/photo-1517457373958-b7bdd4587205?w=2000&q=80",
  hero4: "https://images.unsplash.com/photo-1507692049790-de58290a4334?w=2000&q=80",
  about: "https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=1400&q=80",
  course1: "https://images.unsplash.com/photo-1504052434569-70ad5836ab65?w=1000&q=80",
  course2: "https://images.unsplash.com/photo-1455849318743-b2233052fcff?w=1000&q=80",
  course3: "https://images.unsplash.com/photo-1438962136829-452260720431?w=1000&q=80",
  course4: "https://images.unsplash.com/photo-1499209974431-9dddcece7f88?w=1000&q=80",
  app: "https://images.unsplash.com/photo-1571156425562-12341e7c9aae?w=800&q=80",
  testimony: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200&q=80",
  map: "https://images.unsplash.com/photo-1486325212027-8081e485255e?w=1200&q=80",
};

/* =================== UTILITIES =================== */
function useScrolled(threshold = 40) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > threshold);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, [threshold]);
  return scrolled;
}

function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    // Only hide elements that are offscreen at mount — keep above-the-fold visible
    const vh = window.innerHeight;
    els.forEach((el) => {
      const top = el.getBoundingClientRect().top;
      if (top > vh * 0.9) el.classList.add("reveal--init");
    });
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.remove("reveal--init");
            e.target.classList.add("in");
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12, rootMargin: "0px 0px -8% 0px" }
    );
    els.forEach((el) => io.observe(el));
    // Safety: after 6s, ensure everything is visible regardless
    const safety = setTimeout(() => {
      document.querySelectorAll(".reveal--init").forEach((el) => el.classList.remove("reveal--init"));
    }, 6000);
    return () => { io.disconnect(); clearTimeout(safety); };
  }, []);
}

/* =================== LOADER =================== */
function Loader() {
  const [phase, setPhase] = useState("show"); // show -> fading -> gone
  useEffect(() => {
    const t1 = setTimeout(() => setPhase("fading"), 1600);
    const t2 = setTimeout(() => setPhase("gone"), 2400);
    return () => { clearTimeout(t1); clearTimeout(t2); };
  }, []);
  if (phase === "gone") return null;
  return (
    <div className={`loader ${phase === "fading" ? "hidden" : ""}`}>
      <div className="loader__mark">
        <img src={IMG.logoMark} alt="Chosen House Church" />
      </div>
      <div className="loader__bar"></div>
    </div>
  );
}

/* =================== NAV =================== */
function Nav() {
  const scrolled = useScrolled(60);
  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
      <a href="#inicio" className="nav__logo">
        <img src={IMG.logoMark} alt="ch." className="nav__logo-mark" />
        <span className="nav__logo-text">
          <span>CHOSEN HOUSE</span>
          <span>Church · Kingston</span>
        </span>
      </a>
      <ul className="nav__links">
        <li><a href="#inicio">Início</a></li>
        <li><a href="#sobre">Sobre</a></li>
        <li><a href="#ministerios">Ministérios</a></li>
        <li><a href="#cursos">Cursos</a></li>
        <li><a href="#eventos">Eventos</a></li>
        <li><a href="#cgs">CGs</a></li>
        <li><a href="#midia">Mídia</a></li>
        <li><a href="#visite">Visite-nos</a></li>
        <li><a href="#contato">Contato</a></li>
      </ul>
      <a href="#doar" className="nav__cta">
        Doar
        <span>♥</span>
      </a>
      <button className="nav__mobile-btn" aria-label="menu">
        <span></span><span></span><span></span>
      </button>
    </nav>
  );
}

/* =================== HERO =================== */
function Hero() {
  const slides = [IMG.hero1, IMG.hero2, IMG.hero3, IMG.hero4];
  const [active, setActive] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setActive((i) => (i + 1) % slides.length), 5500);
    return () => clearInterval(t);
  }, []);
  const now = new Date();
  const counter = `${String(now.getHours()).padStart(2, "0")}:${String(now.getMinutes()).padStart(2, "0")} · LDN`;
  return (
    <section className="hero" id="inicio">
      <div className="hero__bg">
        {slides.map((src, i) => (
          <div
            key={i}
            className={`hero__slide ${i === active ? "active" : ""}`}
            style={{ backgroundImage: `url(${src})` }}
          ></div>
        ))}
      </div>
      <div className="hero__content">
        <div className="hero__top-row">
          <div className="hero__tag">
            <span className="dot"></span>
            Próximo culto · Sábado 19:30
          </div>
          <div className="hero__counter">{counter} / KINGSTON, UK / EST. 2024</div>
        </div>
        <h1 className="hero__h1 display">
          <div className="row"><span className="word">UM</span> <span className="word delay-2">LUGAR</span></div>
          <div className="row"><span className="word delay-3">PARA</span> <span className="word delay-4">CHAMAR</span></div>
          <div className="row"><span className="word delay-3">DE</span> <span className="word delay-4 italic italic-display">lar.</span></div>
        </h1>
        <div className="hero__sub-row">
          <p className="hero__lede">
            Somos uma família que ama a <em>Deus</em>, ama pessoas e transforma o
            mundo através do amor de Cristo.
          </p>
          <div className="hero__ctas">
            <a href="#visite" className="btn btn--primary">
              Visite-nos <span className="arrow">→</span>
            </a>
            <a href="#video" className="btn btn--ghost">
              <span className="play"></span> Assistir
            </a>
          </div>
        </div>
      </div>
      <div className="hero__scroll">
        <span>Scroll</span>
        <span className="line"></span>
      </div>
      <div className="hero__slide-indicators">
        {slides.map((_, i) => (
          <span key={i} className={i === active ? "active" : ""} onClick={() => setActive(i)}></span>
        ))}
      </div>
    </section>
  );
}

/* =================== MARQUEE =================== */
function Marquee({ items, variant = "cream" }) {
  const content = (
    <div className="marquee__item">
      {items.map((it, i) => (
        <React.Fragment key={i}>
          {it.italic ? <em>{it.text}</em> : <span>{it.text}</span>}
          <span className="star"></span>
        </React.Fragment>
      ))}
    </div>
  );
  return (
    <div className={`marquee ${variant === "dark" ? "marquee--dark" : variant === "accent" ? "marquee--accent" : ""}`}>
      <div className="marquee__track">
        {content}
        {content}
        {content}
      </div>
    </div>
  );
}

/* =================== PILARES =================== */
function Pilares() {
  const pillars = [
    { num: "01", title: "Amor", body: "Vivemos o amor de Cristo todos os dias.", icon: "♡" },
    { num: "02", title: "Palavra", body: "A Palavra é a nossa base e autoridade.", icon: "✦" },
    { num: "03", title: "Comunidade", body: "Somos família, caminhamos juntos em fé.", icon: "◐" },
    { num: "04", title: "Propósito", body: "Fomos escolhidos para fazer a diferença.", icon: "→" },
  ];
  return (
    <section className="section section--dark" id="pilares">
      <div className="section__inner">
        <div className="section__head reveal">
          <div>
            <div className="section__eyebrow">Nossos pilares · 4 valores</div>
            <h2 className="section__title display">
              No que <span className="italic italic-display">cremos.</span>
            </h2>
          </div>
          <p className="section__lede">
            Quatro fundamentos que sustentam tudo o que fazemos como igreja —
            do culto de domingo às pequenas conversas durante a semana.
          </p>
        </div>
        <div className="pillars">
          {pillars.map((p, i) => (
            <div className="pillar reveal" key={i} style={{ transitionDelay: `${i * 0.08}s` }}>
              <span className="pillar__icon">{p.icon}</span>
              <span className="pillar__num">{p.num} / 04</span>
              <h3 className="pillar__title">{p.title}</h3>
              <p className="pillar__body">{p.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* =================== NEXT SERVICE / COUNTDOWN =================== */
function NextService() {
  const [time, setTime] = useState(getNext());
  function getNext() {
    const now = new Date();
    const d = new Date(now);
    const day = d.getDay();
    // next Saturday at 19:30
    let daysToSat = (6 - day + 7) % 7;
    if (daysToSat === 0 && (now.getHours() > 19 || (now.getHours() === 19 && now.getMinutes() >= 30))) {
      daysToSat = 7;
    }
    d.setDate(d.getDate() + daysToSat);
    d.setHours(19, 30, 0, 0);
    const diff = Math.max(0, d - now);
    return {
      d: Math.floor(diff / 86400000),
      h: Math.floor((diff % 86400000) / 3600000),
      m: Math.floor((diff % 3600000) / 60000),
      s: Math.floor((diff % 60000) / 1000),
    };
  }
  useEffect(() => {
    const t = setInterval(() => setTime(getNext()), 1000);
    return () => clearInterval(t);
  }, []);
  return (
    <section className="next-service reveal">
      <div className="next-service__inner">
        <div>
          <div className="next-service__label">
            <span className="dot"></span>
            Próximo Culto
          </div>
          <h3 className="next-service__title">
            Sábado<br/><em>19:30</em>
          </h3>
        </div>
        <div className="next-service__meta">
          <div>
            <span>Onde</span>
            <span>Chosen House Church</span>
          </div>
          <div>
            <span>Endereço</span>
            <span>39 Ewel Road, KT6 6AF</span>
          </div>
          <div>
            <span>Também</span>
            <span>Pequenos Grupos</span>
          </div>
        </div>
        <div className="next-service__countdown">
          {[
            { n: time.d, l: "Dias" },
            { n: time.h, l: "Horas" },
            { n: time.m, l: "Min" },
            { n: time.s, l: "Seg" },
          ].map((c, i) => (
            <div className="countdown__cell" key={i}>
              <span className="countdown__num">{String(c.n).padStart(2, "0")}</span>
              <span className="countdown__label">{c.l}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* =================== SOBRE / QUEM SOMOS =================== */
function Sobre() {
  return (
    <section className="section section--cream" id="sobre">
      <div className="section__inner">
        <div className="section__head reveal">
          <div>
            <div className="section__eyebrow">Sobre nós · Capítulo 01</div>
            <h2 className="section__title display">
              Quem<br/><span className="italic italic-display">somos.</span>
            </h2>
          </div>
          <p className="section__lede">
            Uma comunidade brasileira em Londres, vivendo o evangelho de forma
            real, prática e ousada. Aqui ninguém é estranho.
          </p>
        </div>
        <div className="about__grid">
          <div className="about__media reveal">
            <div className="about__img" style={{ backgroundImage: `url(${IMG.about})` }}></div>
            <div className="about__img-tag">
              <span className="accent">●</span> Culto · Domingo 10:00 · Londres, UK
            </div>
          </div>
          <div className="about__copy reveal">
            <h3>
              Quem<br/><em>somos.</em>
            </h3>
            <p>
              A Chosen House Church existe para levar pessoas a um encontro real com
              Jesus, discipulá-las e capacitá-las a viver o propósito de Deus.
            </p>
            <p>
              Acreditamos que a <em>igreja</em> é um lugar de esperança, cura e restauração.
            </p>
            <div className="about__stats">
              <div className="about__stat">
                <span className="about__stat-num">+<em>500</em></span>
                <span className="about__stat-label">Pessoas alcançadas</span>
              </div>
              <div className="about__stat">
                <span className="about__stat-num">+<em>20</em></span>
                <span className="about__stat-label">Líderes e voluntários</span>
              </div>
              <div className="about__stat">
                <span className="about__stat-num">+<em>10</em></span>
                <span className="about__stat-label">Nações impactadas</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* =================== CURSOS =================== */
function Cursos() {
  const courses = [
    { title: "Fundamentos", italic: "da Fé.", desc: "Entenda os princípios essenciais da vida cristã.", aulas: "6 AULAS", img: IMG.course1 },
    { title: "Propósito", italic: "e Chamado.", desc: "Descubra o propósito de Deus para sua vida.", aulas: "8 AULAS", img: IMG.course2 },
    { title: "Espírito", italic: "Santo.", desc: "Uma jornada para uma vida cheia do Espírito.", aulas: "6 AULAS", img: IMG.course3 },
    { title: "Liderança", italic: "Servidora.", desc: "Seja um líder que inspira e transforma.", aulas: "6 AULAS", img: IMG.course4 },
  ];
  return (
    <section className="section section--dark" id="cursos">
      <div className="section__inner">
        <div className="section__head reveal">
          <div>
            <div className="section__eyebrow">Cursos · School of Faith</div>
            <h2 className="section__title display">
              Cresça na fé.<br/><span className="italic italic-display">Viva o propósito.</span>
            </h2>
          </div>
          <p className="section__lede">
            Cursos pensados para te equipar e te ajudar a viver tudo o que Deus tem para você.
            Online ou presencial — comece quando quiser.
          </p>
        </div>
        <div className="courses">
          {courses.map((c, i) => (
            <div className="course reveal" key={i} style={{ transitionDelay: `${i * 0.08}s` }}>
              <div className="course__img" style={{ backgroundImage: `url(${c.img})` }}></div>
              <div className="course__overlay"></div>
              <span className="course__num">{String(i + 1).padStart(2, "0")} / 04</span>
              <span className="course__tag">{c.aulas}</span>
              <div className="course__content">
                <h3 className="course__title">
                  {c.title}<br/><em>{c.italic}</em>
                </h3>
                <p className="course__desc">{c.desc}</p>
                <div className="course__cta">
                  Inscrever-se
                  <span className="arrow">↗</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* =================== EVENTOS =================== */
function Eventos() {
  const events = [
    { day: "SÁB", mo: "toda semana", title: "Culto de", italic: "Celebração", type: "Chosen House Church", time: "Sábado · 19:30" },
    { day: "QUA", mo: "toda semana", title: "CG", italic: "Kingston", type: "39 Ewel Road, KT6 6AF", time: "Quarta · 19:30" },
    { day: "QUI", mo: "toda semana", title: "CG", italic: "Sutton", type: "5 Elm Cl, Carshalton SM5 2AG", time: "Quinta · 20:00" },
    { day: "QUI", mo: "toda semana", title: "CG", italic: "Epsom", type: "405C Kingston Rd, KT19 0BT", time: "Quinta · 20:00" },
  ];
  return (
    <section className="section section--dark" id="eventos" style={{ paddingTop: 0 }}>
      <div className="section__inner">
        <div className="section__head reveal">
          <div>
            <div className="section__eyebrow">Agenda · Próximos eventos</div>
            <h2 className="section__title display">
              O que vem<br/><span className="italic italic-display">por aí.</span>
            </h2>
          </div>
          <p className="section__lede">
            Cultos, encontros, conferências e momentos especiais. Marca na sua agenda
            e traz quem você ama.
          </p>
        </div>
        <div className="events__list">
          {events.map((e, i) => (
            <div className="event reveal" key={i} style={{ transitionDelay: `${i * 0.05}s` }}>
              <div className="event__date">
                <span className="event__date-day">{e.day}</span>
                <span className="event__date-mo">{e.mo}</span>
              </div>
              <h3 className="event__title">
                {e.title} <em>{e.italic}</em>
              </h3>
              <div className="event__meta">
                <span>{e.type}</span>
                <span>{e.time}</span>
              </div>
              <div className="event__arrow">→</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* =================== CGs / PEQUENOS GRUPOS =================== */
function CGs() {
  const groups = [
    {
      name: "KINGSTON",
      addr1: "39 Ewel Road",
      addr2: "KT6 6AF",
      time: "07:30PM",
      img: IMG.hero3,
      tag: "CG 01"
    },
    {
      name: "SUTTON",
      addr1: "5 Elm Cl, Carshalton",
      addr2: "SM5 2AG",
      time: "08:00PM",
      img: IMG.hero2,
      tag: "CG 02"
    },
    {
      name: "EPSOM",
      addr1: "405C Kingston Rd, Epsom",
      addr2: "KT19 0BT",
      time: "08:00PM",
      img: IMG.hero4,
      tag: "CG 03"
    },
  ];
  return (
    <section className="section section--dark cgs" id="cgs">
      <div className="section__inner">
        <div className="section__head reveal">
          <div>
            <div className="section__eyebrow">Pequenos Grupos · CGs</div>
            <h2 className="section__title display">
              Comunidade<br/>de <span className="italic italic-display">verdade.</span>
            </h2>
          </div>
          <p className="section__lede">
            A igreja acontece também durante a semana, nas casas, em comunhão.
            Escolha um CG perto de você e venha pertencer.
          </p>
        </div>
        <div className="cgs__grid">
          {groups.map((g, i) => (
            <a href="#" className="cg-card reveal" key={i} style={{ transitionDelay: `${i * 0.08}s` }}>
              <div className="cg-card__img" style={{ backgroundImage: `url(${g.img})` }}></div>
              <div className="cg-card__name display">{g.name}</div>
              <div className="cg-card__info">
                <span className="cg-card__tag">{g.tag}</span>
                <div className="cg-card__addr">
                  <strong>CG {g.name.charAt(0) + g.name.slice(1).toLowerCase()}</strong>
                  <span>{g.addr1}</span>
                  <span>{g.addr2}</span>
                  <span className="cg-card__time">{g.time}</span>
                </div>
                <div className="cg-card__cta">
                  Participar <span>↗</span>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* =================== MINISTÉRIOS =================== */
function Ministerios() {
  const ministries = [
    { num: "01", title: "Chosen", italic: "Women", body: "Ministério de Mulheres — encontros, mentorias e comunhão.", glyph: "♕" },
    { num: "02", title: "Chosen", italic: "Men", body: "Ministério de Homens — discipulado e fraternidade.", glyph: "✝" },
    { num: "03", title: "Flame", italic: "· jovens", body: "Ministério de Jovens — propósito, fé e a próxima geração.", glyph: "▲" },
    { num: "04", title: "CH", italic: "Kids", body: "Ministério Infantil — domingos divertidos e cheios de Jesus.", glyph: "⊙" },
    { num: "05", title: "Welcome", italic: "· acolhimento", body: "Ministério de Acolhimento — você sempre será bem-vindo.", glyph: "❦" },
  ];
  return (
    <section className="section section--cream" id="ministerios">
      <div className="section__inner">
        <div className="section__head reveal">
          <div>
            <div className="section__eyebrow">Departamentos · 5 ministérios</div>
            <h2 className="section__title display">
              Departamentos<br/>da <span className="italic italic-display">igreja.</span>
            </h2>
          </div>
          <p className="section__lede">
            Conheça os ministérios que servem, acolhem, fortalecem e edificam a nossa casa.
            <br/><br/>
            <strong>Um lugar para servir, crescer e pertencer.</strong>
          </p>
        </div>
        <div className="ministries">
          {ministries.map((m, i) => (
            <div className="ministry reveal" key={i} style={{ transitionDelay: `${i * 0.05}s` }}>
              <div className="ministry__top">
                <span className="ministry__num">{m.num} / 05</span>
                <span className="ministry__icon">{m.glyph}</span>
              </div>
              <div>
                <h3 className="ministry__title">
                  {m.title}<br/><em>{m.italic}</em>
                </h3>
                <p className="ministry__body">{m.body}</p>
              </div>
              <span className="ministry__hover-arrow">→</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* =================== TESTIMONY =================== */
function Testimony() {
  return (
    <section className="testimony reveal">
      <div className="testimony__inner">
        <span className="testimony__quote-mark">"</span>
        <p className="testimony__quote">
          A Chosen me ensinou que <span className="highlight">novo começo</span> não é
          um discurso bonito — é uma decisão que Deus honra <em>todos os dias.</em>
        </p>
        <div className="testimony__author">
          <div
            className="testimony__avatar"
            style={{ backgroundImage: `url(${IMG.testimony})` }}
          ></div>
          <div className="testimony__name">
            <strong>Camila Ribeiro</strong>
            <span>Membro desde 2024 · Londres</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* =================== VISIT =================== */
function Visit() {
  return (
    <section className="section section--dark" id="visite">
      <div className="section__inner">
        <div className="section__head reveal">
          <div>
            <div className="section__eyebrow">Visite-nos · Estamos te esperando</div>
            <h2 className="section__title display">
              Vem<br/><span className="italic italic-display">com a gente.</span>
            </h2>
          </div>
          <p className="section__lede">
            Será um privilégio receber você e sua família. Chegue 15 minutos antes —
            tem café, sorriso e gente boa esperando.
          </p>
        </div>
        <div className="visit__grid">
          <div className="visit__copy reveal">
            <p style={{fontSize: 16, marginBottom: 32, opacity: 0.85}}>
              Será um privilégio receber você e sua família!
            </p>
            <div className="visit__times">
              <div className="visit__time">
                <span className="day">Sáb</span>
                <span className="name">Culto de Celebração</span>
                <span className="time">19:30</span>
              </div>
              <div className="visit__time">
                <span className="day">CGs</span>
                <span className="name">Pequenos Grupos</span>
                <span className="time">Semanal</span>
              </div>
            </div>
            <div className="visit__address">
              <strong>Chosen House Church</strong><br/>
              39 Ewel Road<br/>
              KT6 6AF · Kingston, UK<br/><br/>
              <span style={{ opacity: 0.6 }}>info@chosenhousechurch.co.uk</span>
            </div>
            <a href="#" className="btn btn--primary" style={{ marginTop: 32 }}>
              Como chegar <span className="arrow">→</span>
            </a>
          </div>
          <div className="visit__map reveal">
            <div className="visit__map-bg" style={{ backgroundImage: `url(${IMG.map})` }}></div>
            <div className="visit__map-label">Chosen House Church · Kingston, UK</div>
            <div className="visit__map-pin">❦</div>
            <div className="visit__map-coords">39 EWEL RD · KT6 6AF</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* =================== APP CTA =================== */
function AppCTA() {
  return (
    <section className="cta-banner reveal" id="app">
      <div className="cta-banner__inner">
        <div>
          <div className="section__eyebrow" style={{ marginBottom: 20 }}>
            <span style={{ width: 24, display: "inline-block" }}></span>
            Baixe nosso App
          </div>
          <h3>
            Tenha a Chosen<br/>sempre <em>com você.</em>
          </h3>
          <ul style={{listStyle:"none", padding:0, margin:"0 0 32px", display:"flex", flexDirection:"column", gap:10, fontSize:15, opacity:0.9}}>
            <li>✓ Assista mensagens</li>
            <li>✓ Veja eventos</li>
            <li>✓ Faça cursos</li>
            <li>✓ E muito mais!</li>
          </ul>
          <div style={{ display: "flex", gap: 12, marginBottom: 40, flexWrap: "wrap" }}>
            <a href="#" className="btn btn--primary">
               App Store
            </a>
            <a href="#" className="btn btn--ghost">
              ▶ Google Play
            </a>
          </div>
          <div id="contato">
            <div className="section__eyebrow" style={{ marginBottom: 16 }}>
              <span style={{ width: 24, display: "inline-block" }}></span>
              Newsletter · Receba novidades e mensagens exclusivas
            </div>
            <form className="newsletter-form" onSubmit={(e) => e.preventDefault()}>
              <input type="email" placeholder="Seu melhor e-mail" />
              <button type="submit">
                Inscrever <span>→</span>
              </button>
            </form>
          </div>
        </div>
        <div className="app-phone">
          <div className="app-phone__screen">
            <div className="app-phone__bg" style={{ backgroundImage: `url(${IMG.hero2})` }}></div>
            <div className="app-phone__overlay"></div>
            <div className="app-phone__content">
              <span className="app-phone__tag">Ao vivo · Domingo</span>
              <h4 className="app-phone__title">
                Chosen<br/><em>House Church.</em>
              </h4>
              <div className="app-phone__btns">
                <span className="app-phone__btn">Assistir</span>
                <span className="app-phone__btn secondary">Mais Tarde</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* =================== FOOTER =================== */
function Footer() {
  return (
    <footer className="footer" id="doar">
      <div className="footer__logo-row reveal">
        <img src={IMG.logoWordmark} alt="Chosen House Church" className="footer__logo-img" />
      </div>
      <div className="footer__grid">
        <div className="footer__brand">
          <img src={IMG.logoMark} alt="ch." className="footer__brand-mark" />
          <h4>CHOSEN HOUSE</h4>
          <p>Um lugar para chamar de lar. Servir, crescer e pertencer.</p>
          <div className="footer__socials" style={{marginTop: 24}}>
            <a href="#" aria-label="Instagram">IG</a>
            <a href="#" aria-label="Facebook">FB</a>
            <a href="#" aria-label="YouTube">YT</a>
          </div>
        </div>
        <div className="footer__col">
          <div className="footer__col-title">Navegação</div>
          <ul>
            <li><a href="#inicio">Início</a></li>
            <li><a href="#sobre">Sobre</a></li>
            <li><a href="#ministerios">Ministérios</a></li>
            <li><a href="#cursos">Cursos</a></li>
            <li><a href="#eventos">Eventos</a></li>
            <li><a href="#midia">Mídia</a></li>
            <li><a href="#visite">Visite-nos</a></li>
            <li><a href="#contato">Contato</a></li>
          </ul>
        </div>
        <div className="footer__col">
          <div className="footer__col-title">Ministérios</div>
          <ul>
            <li><a href="#">Chosen Women</a></li>
            <li><a href="#">Chosen Men</a></li>
            <li><a href="#">Flame · Jovens</a></li>
            <li><a href="#">CH Kids</a></li>
            <li><a href="#">Welcome</a></li>
          </ul>
        </div>
        <div className="footer__col">
          <div className="footer__col-title">Contato</div>
          <ul>
            <li><a href="#">39 Ewel Road, KT6 6AF</a></li>
            <li><a href="#">Kingston, UK</a></li>
            <li><a href="#">info@chosenhousechurch.co.uk</a></li>
            <li><a href="#">Culto: Sábado · 19:30</a></li>
          </ul>
        </div>
        <div className="footer__col">
          <div className="footer__col-title">Newsletter</div>
          <p style={{fontSize: 13, opacity: 0.7, lineHeight: 1.5, marginBottom: 16}}>Receba novidades e mensagens exclusivas.</p>
          <form className="newsletter-form" style={{borderColor:"rgba(244,241,232,0.3)"}} onSubmit={(e)=>e.preventDefault()}>
            <input type="email" placeholder="Seu melhor e-mail" />
            <button type="submit">→</button>
          </form>
        </div>
      </div>
      <div className="footer__bottom">
        <span>© 2026 Chosen House Church · Todos os direitos reservados</span>
        <span>Made with ♥ in London</span>
      </div>
    </footer>
  );
}

/* =================== APP =================== */
function App() {
  useReveal();

  const marquee1 = [
    { text: "CHOSEN HOUSE CHURCH" },
    { text: "• KINGSTON UK •", italic: true },
    { text: "SÁBADO 19:30" },
    { text: "• um lugar •", italic: true },
    { text: "PARA CHAMAR DE LAR" },
  ];
  const marquee2 = [
    { text: "SERVIR" },
    { text: "• crescer •", italic: true },
    { text: "PERTENCER" },
    { text: "• chosen house •", italic: true },
    { text: "CHURCH" },
  ];

  return (
    <React.Fragment>
      <Loader />
      <Nav />
      <Hero />
      <Marquee items={marquee1} variant="cream" />
      <Pilares />
      <NextService />
      <Sobre />
      <Marquee items={marquee2} variant="dark" />
      <Cursos />
      <Eventos />
      <Testimony />
      <Ministerios />
      <CGs />
      <Visit />
      <AppCTA />
      <Footer />
    </React.Fragment>
  );
}

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