"use client";

import { useEffect, useRef, useState } from "react";
import styles from "./meet-pastor.module.scss";
import Badge from "@/components/shared/HomePageBadge";

const MeetPastor = () => {
  const sectionRef = useRef<HTMLElement | null>(null);
  const [inView, setInView] = useState(false);

  useEffect(() => {
    const el = sectionRef.current;
    if (!el) return;

    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setInView(true);
          observer.unobserve(entry.target); // 🔥 animate once only
        }
      },
      { threshold: 0.25 }
    );

    observer.observe(el);

    return () => observer.disconnect();
  }, []);

  return (
    <section
      ref={sectionRef}
      className={`${styles.wrapper} ${inView ? styles.visible : ""}`}
    >
      <div className={styles.container}>
        
        {/* ================= LEFT ================= */}
        <div className={styles.left}>
          <Badge text="Meet Our Pastor" />

          <h2>A Shepherd Called to Transform Lives</h2>

          <p className={styles.mainText}>
            Pastor Ugochukwu Anike, is an international speaker, a revivalist, an author,  a dynamic preacher, and an excellent teacher. The cutting edge of his ministry is his unique prophetic and apostolic ministry. He is the senior/lead pastor of Censers Church Inc. worldwide, one of the fastest growing churches, emerging from the south east, with branches spread across different states in Nigeria, and making impact globally.
          </p>

          <p>
            With years of ministry experience, he continues to lead with
            wisdom, integrity, and a deep commitment to God’s Word.
            His teachings have impacted countless lives across nations,
            bringing clarity, direction, and transformation.
          </p>

          <button className={styles.cta}>
            Learn More →
          </button>
        </div>

        {/* ================= RIGHT ================= */}
        <div className={styles.right}>
          <div className={styles.imageWrapper}>
            <img src="/pastor-2.jpg" alt="Pastor" />
          </div>
        </div>

      </div>
    </section>
  );
};

export default MeetPastor;