/* global React, Icon, nav */

// Counter Component for Statistics
function StatisticsCounter() {
  const [counts, setCounts] = React.useState({ years: 0, pathway: 0, benchmarks: 0 });
  const [hasAnimated, setHasAnimated] = React.useState(false);
  const counterRef = React.useRef(null);

  React.useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting && !hasAnimated) {
          setHasAnimated(true);
          
          // Animate Years (0 to 28)
          let yearCount = 0;
          const yearInterval = setInterval(() => {
            yearCount += 1;
            setCounts(prev => ({ ...prev, years: yearCount }));
            if (yearCount >= 28) clearInterval(yearInterval);
          }, 50);

          // Animate Pathway (0 to 7)
          let pathwayCount = 0;
          const pathwayInterval = setInterval(() => {
            pathwayCount += 1;
            setCounts(prev => ({ ...prev, pathway: pathwayCount }));
            if (pathwayCount >= 7) clearInterval(pathwayInterval);
          }, 150);

          // Animate Benchmarks (0 to 4)
          let benchmarkCount = 0;
          const benchmarkInterval = setInterval(() => {
            benchmarkCount += 1;
            setCounts(prev => ({ ...prev, benchmarks: benchmarkCount }));
            if (benchmarkCount >= 4) clearInterval(benchmarkInterval);
          }, 250);
        }
      },
      { threshold: 0.3 }
    );

    if (counterRef.current) {
      observer.observe(counterRef.current);
    }

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

  return (
    <div ref={counterRef} style={{marginTop:60, padding:'48px 0', borderTop:'2px solid rgba(201,162,74,0.2)'}}>
      <div className="grid-4">
        <div style={{textAlign:'center'}}>
          <div style={{fontFamily:'Cinzel,serif', fontSize:48, fontWeight:600, color:'var(--crimson)', marginBottom:8}}>
            {counts.years}+
          </div>
          <div style={{fontSize:14, color:'var(--warm-gold)', letterSpacing:'0.1em', textTransform:'uppercase'}}>Years of Faithful Ministry</div>
        </div>
        
        <div style={{textAlign:'center'}}>
          <div style={{fontFamily:'Cinzel,serif', fontSize:48, fontWeight:600, color:'var(--crimson)', marginBottom:8}}>
            {counts.pathway}
          </div>
          <div style={{fontSize:14, color:'var(--warm-gold)', letterSpacing:'0.1em', textTransform:'uppercase'}}>Pathway Steps</div>
        </div>
        
        <div style={{textAlign:'center'}}>
          <div style={{fontFamily:'Cinzel,serif', fontSize:48, fontWeight:600, color:'var(--crimson)', marginBottom:8}}>
            {counts.benchmarks}
          </div>
          <div style={{fontSize:14, color:'var(--warm-gold)', letterSpacing:'0.1em', textTransform:'uppercase'}}>Mission Benchmarks</div>
        </div>
        
        <div style={{textAlign:'center'}}>
          <div style={{fontFamily:'Cinzel,serif', fontSize:48, fontWeight:600, color:'var(--crimson)', marginBottom:8}}>∞</div>
          <div style={{fontSize:14, color:'var(--warm-gold)', letterSpacing:'0.1em', textTransform:'uppercase'}}>Lives Transformed</div>
        </div>
      </div>
    </div>
  );
}

// ============ HOME ============
function HomePage() {
  const [currentSlide, setCurrentSlide] = React.useState(0);
  const [isPaused, setIsPaused] = React.useState(false);
  const carouselRef = React.useRef(null);
  const SLIDE_DURATION = 6000;

  const slides = [
    {
      title: 'Welcome to <span class="gold">Broken Barriers</span> Church',
      subtitle: 'The No Barrier Way',
      description: 'A church built by Christ, governed by His Word, and moving entirely for His renown — reaching the lost, recovering the wandering, and forming the character of Jesus in every believer.',
      verse: '"For the Son of man is come to seek and to save that which was lost." — Luke 19:10',
      image: 'assets/home-hero-sermons.jpg',
      cta1: { text: 'Plan a Visit', icon: 'Cross', action: 'visit' },
      cta2: { text: 'About Us', icon: 'People', action: 'about-us' }
    },
    {
      title: 'Watch Our <span class="gold">Latest Sermons</span>',
      subtitle: 'Hear the Word Preached',
      description: 'Experience clear, biblical preaching that honors God and builds up believers. Catch up on messages you missed or revisit sermons that impacted your walk with Christ.',
      verse: '"Faith cometh by hearing, and hearing by the word of God." — Romans 10:17',
      image: 'assets/home-hero-worship.jpg',
      cta1: { text: 'Watch Sermons', icon: 'Play', action: 'sermons' },
      cta2: { text: 'Current Series', icon: 'Book', action: 'sermons' }
    },
    {
      title: 'Plan Your <span class="gold">First Visit</span>',
      subtitle: 'You Are Welcome Here',
      description: 'Join us for worship, prayer, and the preaching of God\'s Word. Every Sunday at 10:00 AM in Kempner, Texas. No pretense. No pressure. Just the gospel and the body of Christ.',
      verse: '"I was glad when they said unto me, Let us go into the house of the LORD." — Psalm 122:1',
      image: 'assets/home-hero-prayer.jpg',
      cta1: { text: 'Plan a Visit', icon: 'Cross', action: 'visit' },
      cta2: { text: 'What to Expect', icon: 'Book', action: 'visit' }
    },
    {
      title: 'Church <span class="gold">Announcements</span>',
      subtitle: 'Stay Connected',
      description: 'Stay informed about important updates, ministry opportunities, and ways to serve. Join us in the work of restoring the Kingdom as He designed it.',
      verse: '"Not forsaking the assembling of ourselves together." — Hebrews 10:25',
      image: 'assets/home-hero-cross-prayer.jpg',
      cta1: { text: 'View Updates', icon: 'Book', action: 'connect' },
      cta2: { text: 'Get Involved', icon: 'People', action: 'connect' }
    },
    {
      title: 'Upcoming <span class="gold">Events</span>',
      subtitle: 'Join Us',
      description: 'Discover opportunities to gather, grow, and serve together. From Bible studies to community outreach, find your place in the body of Christ at Broken Barriers Church.',
      verse: '"And let us consider one another to provoke unto love and to good works." — Hebrews 10:24',
      image: 'assets/home-hero-cross-sunset.jpg',
      cta1: { text: 'View Calendar', icon: 'Book', action: 'events' },
      cta2: { text: 'Connect', icon: 'People', action: 'connect' }
    }
  ];

  // Autoplay — restarts whenever currentSlide or pause state changes
  React.useEffect(() => {
    if (isPaused) return;
    const timer = setTimeout(() => {
      setCurrentSlide((prev) => (prev + 1) % slides.length);
    }, SLIDE_DURATION);
    return () => clearTimeout(timer);
  }, [currentSlide, isPaused, slides.length]);

  // Keyboard navigation when carousel is in view
  React.useEffect(() => {
    const onKey = (e) => {
      // only respond if focus isn't in a form field
      const tag = (document.activeElement && document.activeElement.tagName) || '';
      if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;
      if (e.key === 'ArrowRight') {
        setCurrentSlide((prev) => (prev + 1) % slides.length);
      } else if (e.key === 'ArrowLeft') {
        setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length);
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [slides.length]);

  // Vine section: scroll-triggered reveals + gentle parallax on devices
  React.useEffect(() => {
    const stage = document.querySelector('.vp-scroll-stage');
    const items = document.querySelectorAll('.vp-fx');
    const sections = document.querySelectorAll('.home-fade');
    if (!items.length && !sections.length) return;

    // Per-element reveals inside the platform section
    const ioFx = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
    items.forEach(el => ioFx.observe(el));

    // Whole-section fade-in
    const ioSection = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
    }, { threshold: 0.08, rootMargin: '0px 0px -4% 0px' });
    sections.forEach(el => ioSection.observe(el));

    // safety: ensure visibility after 3s no matter what
    const safety = setTimeout(() => {
      items.forEach(el => el.classList.add('in'));
      sections.forEach(el => el.classList.add('in'));
    }, 3000);

    // Parallax — measure section center vs viewport center and pass to CSS var
    let ticking = false;
    const onScroll = () => {
      if (!stage) return;
      if (ticking) return;
      ticking = true;
      requestAnimationFrame(() => {
        const rect = stage.getBoundingClientRect();
        const vh = window.innerHeight;
        // -1 above viewport, 0 centered, +1 below — clamp the influence
        const progress = (rect.top + rect.height / 2 - vh / 2);
        // bound the value so we never push devices off screen
        const bounded = Math.max(-220, Math.min(220, progress * 0.35));
        stage.style.setProperty('--vp-parallax', bounded);
        ticking = false;
      });
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();

    return () => {
      ioFx.disconnect();
      ioSection.disconnect();
      clearTimeout(safety);
      window.removeEventListener('scroll', onScroll);
    };
  }, []);

  const goToSlide = (index) => setCurrentSlide(index);
  const nextSlide = () => setCurrentSlide((prev) => (prev + 1) % slides.length);
  const prevSlide = () => setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length);

  const renderIcon = (name) => {
    if (name === 'Cross') return <Icon.Cross/>;
    if (name === 'Play') return <Icon.Play/>;
    if (name === 'Book') return <Icon.Book/>;
    return <Icon.People/>;
  };

  return (
    <>
      <section
        className="hero-carousel hero-vine"
        ref={carouselRef}
        onMouseEnter={() => setIsPaused(true)}
        onMouseLeave={() => setIsPaused(false)}
        aria-roledescription="carousel"
        aria-label="Featured pages"
      >
        {slides.map((slide, index) => {
          const isActive = index === currentSlide;
          // Split title into two parts — text before .gold span + the .gold span itself
          const goldMatch = slide.title.match(/^(.*?)<span class="gold">(.*?)<\/span>(.*)$/);
          const titlePre = goldMatch ? goldMatch[1].trim() : slide.title;
          const titleAccent = goldMatch ? goldMatch[2] : '';
          const titlePost = goldMatch ? goldMatch[3].trim() : '';
          return (
            <div
              key={index}
              className={`hero-slide ${isActive ? 'active' : ''}`}
              style={{backgroundImage: `url(${slide.image})`}}
              aria-hidden={!isActive}
              role="group"
              aria-roledescription="slide"
              aria-label={`${index + 1} of ${slides.length}`}
            >
              <div className="hero-content hero-vine-content">
                <div className="hero-pill">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                    <path d="M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 16.8 5.8 21.3l2.4-7.4L2 9.4h7.6z"/>
                  </svg>
                  <span>{slide.subtitle}</span>
                </div>
                <h1 className="hero-vine-title">
                  {titlePre && <span className="line line-dark">{titlePre}</span>}
                  {titleAccent && <span className="line line-accent">{titleAccent}{titlePost ? ' ' + titlePost : ''}.</span>}
                </h1>
                <p className="hero-vine-lede">{slide.description}</p>
                <div className="hero-vine-verse">{slide.verse}</div>
                <div className="hero-vine-cta">
                  <button
                    className="btn-pill btn-pill-primary"
                    onClick={() => nav(slide.cta1.action)}
                    tabIndex={isActive ? 0 : -1}
                  >
                    {slide.cta1.text}
                    <svg width="16" height="14" viewBox="0 0 16 14" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
                      <path d="M1 7h13M9 1l5 6-5 6"/>
                    </svg>
                  </button>
                  <button
                    className="btn-pill btn-pill-ghost"
                    onClick={() => nav(slide.cta2.action)}
                    tabIndex={isActive ? 0 : -1}
                  >
                    {slide.cta2.text}
                  </button>
                </div>
                <div className="hero-vine-trust">
                  <div className="trust-dots">
                    <span style={{background:'var(--crimson)'}} title="Worship"></span>
                    <span style={{background:'var(--rich-gold)'}} title="Word"></span>
                    <span style={{background:'#2d8b6a'}} title="Prayer"></span>
                    <span style={{background:'#7a4e8a'}} title="Witness"></span>
                  </div>
                  <span className="trust-text">A church gathered around Christ, His Word, and His people</span>
                </div>
              </div>
            </div>
          );
        })}

        <button
          className="carousel-arrow carousel-prev"
          onClick={prevSlide}
          aria-label="Previous slide"
        >
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <path d="M15 18l-6-6 6-6"/>
          </svg>
        </button>
        <button
          className="carousel-arrow carousel-next"
          onClick={nextSlide}
          aria-label="Next slide"
        >
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <path d="M9 18l6-6-6-6"/>
          </svg>
        </button>

        <div className="carousel-dots" role="tablist">
          {slides.map((_, index) => (
            <button
              key={index}
              className={`carousel-dot ${index === currentSlide ? 'active' : ''}`}
              onClick={() => goToSlide(index)}
              role="tab"
              aria-selected={index === currentSlide}
              aria-label={`Go to slide ${index + 1}`}
            />
          ))}
        </div>

        <div className="carousel-progress">
          <div
            key={currentSlide}
            className={`carousel-progress-fill run ${isPaused ? 'paused' : ''}`}
          />
        </div>
      </section>

      {/* ===== Welcome intro — calm, centered, with photo collage ===== */}
      <section className="home-intro home-fade">
        <div className="wrap-narrow center">
          <div className="ornament eyebrow">Welcome Home</div>
          <h2 className="home-intro-title">A church built by Christ.<br/>Governed by His Word.<br/>For His glory alone.</h2>
          <p className="home-intro-lede">No spectacle. No pressure. No barriers. Just the gospel of Jesus Christ, the body of believers, and the work of restoring the Kingdom as He designed it — in Kempner, Texas and beyond.</p>
          <div className="home-intro-meta">
            <span><span className="dot"></span>Sundays at 10:00 AM</span>
            <span><span className="dot"></span>Kempner, Texas</span>
            <span><span className="dot"></span>All are welcome</span>
          </div>
        </div>

        {/* Photo collage band */}
        <div className="wrap">
          <div className="home-intro-collage">
            <figure className="hic-tile hic-tall">
              <img loading="lazy" decoding="async" src="assets/intro-bible-hands.jpg" alt="Gathered worship"/>
              <figcaption><span>Gathered Worship</span></figcaption>
            </figure>
            <figure className="hic-tile">
              <img loading="lazy" decoding="async" src="assets/intro-word-reading.jpg" alt="The Word preached"/>
              <figcaption><span>The Word Preached</span></figcaption>
            </figure>
            <figure className="hic-tile">
              <img loading="lazy" decoding="async" src="assets/intro-praying-together.jpg" alt="Praying together"/>
              <figcaption><span>Praying Together</span></figcaption>
            </figure>
            <figure className="hic-tile hic-wide">
              <img loading="lazy" decoding="async" src="assets/intro-hope-prayer.jpg" alt="Hope in Christ"/>
              <figcaption><span>Hope in Christ</span></figcaption>
            </figure>
          </div>

          {/* Pastoral welcome row */}
          <div className="home-intro-welcome">
            <div className="hiw-text reveal reveal-left">
              <div className="eyebrow">A Word From Our Pastor</div>
              <p className="hiw-quote">&ldquo;Whoever you are, whatever you&rsquo;ve walked through, and however far you feel from God this morning &mdash; there is room for you here. Come as you are, and let&rsquo;s meet Jesus together.&rdquo;</p>
              <div className="hiw-attrib">
                <div className="hiw-avatar">BG</div>
                <div>
                  <div className="hiw-name">Pastor Brian Goodsby</div>
                  <div className="hiw-role">Senior Pastor &middot; Broken Barriers Church</div>
                </div>
              </div>
            </div>
            <div className="hiw-stats reveal reveal-right">
              <div className="hiw-stat">
                <div className="hiw-stat-num">2026</div>
                <div className="hiw-stat-label">Planted in Kempner, TX</div>
              </div>
              <div className="hiw-stat">
                <div className="hiw-stat-num">10 AM</div>
                <div className="hiw-stat-label">Every Sunday gathering</div>
              </div>
              <div className="hiw-stat">
                <div className="hiw-stat-num">All</div>
                <div className="hiw-stat-label">Are welcome at the table</div>
              </div>
              <div className="hiw-cta">
                <button className="btn btn-primary" onClick={() => nav('visit')}>Plan Your Visit</button>
                <button className="btn-text" onClick={() => nav('about-us')}>Our Story &rarr;</button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ===== Vine-style "One platform" section — devices showing how the church reaches you ===== */}
      <section className="vp-section home-fade">
        <div className="wrap">
          <div className="vp-grid">
            {/* LEFT — overlapping device mockups */}
            <div className="vp-devices vp-scroll-stage">
              {/* Laptop */}
              <div className="vp-laptop vp-fx" data-vp-fx="laptop">
                <div className="vp-laptop-screen">
                  <div className="vp-browser">
                    <div className="vp-browser-dots">
                      <span></span><span></span><span></span>
                    </div>
                    <div className="vp-browser-url">brokenbarriers.church/sermons</div>
                  </div>
                  <div className="vp-laptop-body">
                    <div className="vp-app-header">
                      <div className="vp-app-logo">
                        <div className="vp-app-mark">B</div>
                        <div>
                          <div className="vp-app-name">Broken Barriers</div>
                          <div className="vp-app-sub">Sermon Library</div>
                        </div>
                      </div>
                      <div className="vp-app-pill">
                        <span className="vp-live-dot"></span>
                        Currently Preaching
                      </div>
                    </div>
                    <div className="vp-app-welcome">Welcome back, friend</div>
                    <div className="vp-app-section-title">Recent Sermons</div>
                    <div className="vp-app-row">
                      <div className="vp-app-thumb" style={{backgroundImage:"url('assets/sunday-series-reading.jpg')"}}></div>
                      <div className="vp-app-info">
                        <div className="vp-app-title-sm">The Original Design</div>
                        <div className="vp-app-meta">Eph. 4:11–16 · Pastor Brian</div>
                      </div>
                      <div className="vp-app-tag vp-tag-crimson">New</div>
                    </div>
                    <div className="vp-app-row">
                      <div className="vp-app-thumb" style={{backgroundImage:"url('assets/serm-6b.jpg')"}}></div>
                      <div className="vp-app-info">
                        <div className="vp-app-title-sm">Tearing Down the Wall</div>
                        <div className="vp-app-meta">Eph. 2:11–22 · Pastor Brian</div>
                      </div>
                      <div className="vp-app-tag vp-tag-gold">45m</div>
                    </div>
                  </div>
                </div>
                <div className="vp-laptop-base"></div>
              </div>

              {/* Phone */}
              <div className="vp-phone vp-fx" data-vp-fx="phone">
                <div className="vp-phone-notch"></div>
                <div className="vp-phone-screen">
                  <div className="vp-phone-status">
                    <span>9:41</span>
                    <span className="vp-phone-status-icons">
                      <svg width="14" height="10" viewBox="0 0 14 10" fill="currentColor"><rect x="0" y="6" width="3" height="4"/><rect x="4" y="4" width="3" height="6"/><rect x="8" y="2" width="3" height="8"/></svg>
                    </span>
                  </div>
                  <div className="vp-phone-app">
                    <div className="vp-app-header" style={{padding:'8px 0 12px'}}>
                      <div className="vp-app-logo">
                        <div className="vp-app-mark">B</div>
                        <div className="vp-app-name" style={{fontSize:11}}>Broken Barriers</div>
                      </div>
                    </div>
                    <div className="vp-app-welcome" style={{fontSize:11}}>Good morning, friend</div>
                    <div className="vp-now-playing">
                      <div className="vp-now-art" style={{backgroundImage:"url('assets/sunday-series-reading.jpg')"}}></div>
                      <div className="vp-now-info">
                        <div className="vp-now-title">The Original Design</div>
                        <div className="vp-now-meta">Eph. 4:11–16</div>
                      </div>
                    </div>
                    <div className="vp-progress-bar">
                      <div className="vp-progress-fill" style={{width:'62%'}}></div>
                    </div>
                    <div className="vp-progress-time">
                      <span>27:42</span>
                      <span>45:00</span>
                    </div>
                    <div className="vp-play-controls">
                      <div className="vp-play-ctl">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M6 6h2v12H6zM9.5 12l8.5-6v12z"/></svg>
                      </div>
                      <div className="vp-play-ctl vp-play-main">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                      </div>
                      <div className="vp-play-ctl">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M16 6h2v12h-2zM6 18l8.5-6L6 6z"/></svg>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              {/* Tablet */}
              <div className="vp-tablet vp-fx" data-vp-fx="tablet">
                <div className="vp-tablet-screen">
                  <div className="vp-tablet-header">
                    <div className="vp-tablet-title">
                      <div className="vp-app-mark vp-app-mark-sm">B</div>
                      <div>
                        <div className="vp-tablet-name">This Sunday</div>
                        <div className="vp-tablet-sub">May 2026 · Live at 10 AM</div>
                      </div>
                    </div>
                    <div className="vp-app-pill" style={{fontSize:8.5, padding:'4px 9px'}}>
                      <span className="vp-live-dot"></span>
                      Live
                    </div>
                  </div>
                  <div className="vp-calendar">
                    <div className="vp-cal-row vp-cal-head">
                      <span>S</span><span>M</span><span>T</span><span>W</span><span>T</span><span>F</span><span>S</span>
                    </div>
                    <div className="vp-cal-row">
                      <span></span><span></span><span></span><span></span><span>1</span><span>2</span><span>3</span>
                    </div>
                    <div className="vp-cal-row">
                      <span>4</span><span>5</span><span>6</span><span className="vp-cal-active">7</span><span>8</span><span>9</span><span>10</span>
                    </div>
                    <div className="vp-cal-row">
                      <span>11</span><span>12</span><span>13</span><span className="vp-cal-active">14</span><span>15</span><span>16</span><span>17</span>
                    </div>
                  </div>
                  <div className="vp-tablet-events">
                    <div className="vp-tablet-event">
                      <span className="vp-event-dot" style={{background:'var(--crimson)'}}></span>
                      <span className="vp-event-title">Worship Gathering</span>
                      <span className="vp-event-time">10 AM</span>
                    </div>
                    <div className="vp-tablet-event">
                      <span className="vp-event-dot" style={{background:'var(--rich-gold)'}}></span>
                      <span className="vp-event-title">Baptism Sunday</span>
                      <span className="vp-event-time">May 24</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {/* RIGHT — content */}
            <div className="vp-content">
              <div className="vp-pill vp-fx" data-vp-fx="pill">
                <span className="vp-pill-dot"></span>
                Reach &amp; Resources
              </div>
              <h2 className="vp-title">
                <span className="vp-line vp-fx" data-vp-fx="title1">One gospel.</span>
                <span className="vp-line vp-line-accent vp-fx" data-vp-fx="title2">Many ways to receive it.</span>
              </h2>
              <p className="vp-lede vp-fx" data-vp-fx="lede1">Whether you&rsquo;re in the pew Sunday morning, on the road, or across the country &mdash; the preaching, prayer, and life of Broken Barriers Church can meet you right where you are.</p>
              <p className="vp-lede vp-lede-small vp-fx" data-vp-fx="lede2">Designed for real members, real seekers, and real families.</p>

              <ul className="vp-features">
                <li className="vp-fx" data-vp-fx="feat1">
                  <div className="vp-feature-icon">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                  </div>
                  <div className="vp-feature-text">
                    <b>Watch Live</b> &mdash; stream Sunday&rsquo;s gathering in real time, from anywhere
                  </div>
                </li>
                <li className="vp-fx" data-vp-fx="feat2">
                  <div className="vp-feature-icon">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
                  </div>
                  <div className="vp-feature-text">
                    <b>Sermon library</b> &mdash; every message archived, searchable, and free
                  </div>
                </li>
                <li className="vp-fx" data-vp-fx="feat3">
                  <div className="vp-feature-icon">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
                  </div>
                  <div className="vp-feature-text">
                    <b>Works on any device</b> &mdash; phone, tablet, laptop, or smart TV
                  </div>
                </li>
              </ul>

              <div className="vp-community vp-fx" data-vp-fx="community">
                <div className="vp-avatars">
                  <span style={{background:'linear-gradient(135deg,#9E1B32,#7C1426)'}}>BG</span>
                  <span style={{background:'linear-gradient(135deg,#C9A24A,#a07e2f)'}}>JN</span>
                  <span style={{background:'linear-gradient(135deg,#2d8b6a,#1f6249)'}}>MD</span>
                  <span style={{background:'linear-gradient(135deg,#7a4e8a,#583668)'}}>SR</span>
                  <span className="vp-avatars-more">+24</span>
                </div>
                <div className="vp-community-text">
                  <div className="vp-community-react">
                    <span>🙏</span>
                    <span>✝️</span>
                  </div>
                  <div>
                    <b>Members &amp; friends</b> listening this week
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* BOTTOM trust row */}
          <div className="vp-trust-row">
            <span><span className="vp-trust-dot" style={{background:'#2d8b6a'}}></span>Works on any device</span>
            <span><span className="vp-trust-dot" style={{background:'var(--crimson)'}}></span>Free and ad-free</span>
            <span><span className="vp-trust-dot" style={{background:'var(--rich-gold)'}}></span>Word-centered, Spirit-led</span>
          </div>
        </div>
      </section>

      {/* ===== Vine-style "How it works" — dark navy with 3 numbered steps ===== */}
      <section className="vp-howitworks home-fade">
        <div className="wrap">
          <div className="vp-howitworks-head">
            <h2>How to take your first step</h2>
            <p>From visitor to member of the body, in three simple steps.</p>
          </div>
          <div className="vp-steps">
            <div className="vp-step-line"></div>
            {[
              ['1', 'Visit a Sunday', 'Come worship with us at 10:00 AM. No reservation, no pressure \u2014 just hear the Word preached and meet the body of Christ.'],
              ['2', 'Meet a Pastor', 'Sit down for coffee. Ask any question. Get to know the elders who will love and pray for you by name.'],
              ['3', 'Plant Your Roots', 'Step into baptism, membership, and serving the church \u2014 finding your place in the family God has given you.'],
            ].map(([n, t, d]) => (
              <div key={n} className="vp-step">
                <div className="vp-step-num">{n}</div>
                <h3>{t}</h3>
                <p>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ===== Vine-style "Built for families" — light w/ stat cards ===== */}
      <section className="vp-built home-fade">
        <div className="wrap">
          <div className="vp-built-head">
            <h2>Built for families like yours</h2>
            <p>Broken Barriers understands the rhythm of a family\u2019s week \u2014 the soccer games, the long Mondays, the quiet seasons. We&rsquo;re a church that meets you where you are and walks with you over the long haul.</p>
          </div>
          <div className="vp-stats">
            <div className="vp-stat-card">
              <div className="vp-stat-num">10 AM</div>
              <div className="vp-stat-label">Every Sunday without fail</div>
            </div>
            <div className="vp-stat-card">
              <div className="vp-stat-num">100%</div>
              <div className="vp-stat-label">Bible-driven preaching</div>
            </div>
            <div className="vp-stat-card">
              <div className="vp-stat-num">0</div>
              <div className="vp-stat-label">Spectators in the body</div>
            </div>
          </div>
        </div>
      </section>

      {/* ===== Next Steps — 4 clean cards ===== */}
      <section className="section home-fade">
        <div className="wrap">
          <div className="section-head">
            <div className="ornament eyebrow">Where to Begin</div>
            <h2>Your Next Step</h2>
            <p className="sub">Four simple ways to connect — wherever you are on the journey.</p>
          </div>
          <div className="next-steps">
            {[
              {img:'assets/step-plan-visit.jpg', tag:'NEW HERE', title:'Plan a Visit', desc:'Walk in knowing what to expect on Sunday — and that you\u2019re welcome exactly as you are.', link:'visit', cta:'What to Expect'},
              {img:'assets/step-watch-sermon.jpg', tag:'GROW', title:'Watch a Sermon', desc:'Catch up on the current series or revisit a message that shaped your walk with Christ.', link:'sermons', cta:'Listen Now'},
              {img:'assets/step-share-request.jpg', tag:'PRAY', title:'Share a Request', desc:'Bring a burden, a praise, or a quiet word. Our elders are praying for you by name.', link:'prayer', cta:'Submit a Request'},
              {img:'assets/step-join-body.jpg', tag:'CONNECT', title:'Join the Body', desc:'Step into the rhythm of life together \u2014 membership, baptism, and serving the church.', link:'connect', cta:'Get Involved'},
            ].map(c => (
              <a key={c.title} href="#" className="next-step-card" onClick={(e) => {e.preventDefault(); nav(c.link);}}>
                <div className="next-step-art">
                  <img loading="lazy" decoding="async" src={c.img} alt={c.title}/>
                  <div className="next-step-tag">{c.tag}</div>
                </div>
                <div className="next-step-body">
                  <h3>{c.title}</h3>
                  <p>{c.desc}</p>
                  <div className="next-step-cta">
                    <span>{c.cta}</span>
                    <svg width="16" height="12" viewBox="0 0 16 12" fill="none" stroke="currentColor" strokeWidth="1.5">
                      <path d="M1 6h13M10 1l4 5-4 5"/>
                    </svg>
                  </div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* ===== Mission — two column, refined ===== */}
      <section className="section bg-cream home-fade">
        <div className="wrap">
          <div className="split">
            <div className="split-img reveal reveal-left">
              <img loading="lazy" decoding="async" src="assets/mission-path-cross.jpg" alt="Walking toward the cross"/>
            </div>
            <div className="reveal reveal-right">
              <div className="eyebrow">Our Mission</div>
              <h2 className="split-title-line">The No Barrier Way</h2>
              <p style={{fontSize:17, color:'#2a221a', lineHeight:1.8, marginBottom:18}}>
                Sin built the original wall between man and God. The cross of Jesus Christ tore it down forever. We exist to make sure nothing &mdash; religious, cultural, or personal &mdash; gets to put it back up.
              </p>
              <p style={{fontSize:16, color:'#4a4239', lineHeight:1.8, marginBottom:32}}>
                We are gathered around the Word and the table, reaching the lost, recovering the wandering, and forming the character of Jesus in every believer until He returns.
              </p>
              <div style={{display:'flex', gap:14, flexWrap:'wrap'}}>
                <button className="btn btn-primary" onClick={() => nav('about-us')}>About Our Church</button>
                <button className="btn btn-ghost" style={{color:'var(--crimson)', boxShadow:'0 0 0 1px var(--crimson) inset'}} onClick={() => nav('beliefs')}>What We Believe</button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ===== Three Rhythms trio (kept) ===== */}
      <section className="section home-fade">
        <div className="wrap">
          <div className="section-head">
            <div className="ornament eyebrow">Three Rhythms of Our Life Together</div>
            <h2>Worship &middot; Word &middot; Witness</h2>
            <p className="sub">Three rhythms the Spirit established in the early church, and three rhythms that still mark a healthy body today.</p>
          </div>
          <div className="trio">
            {[
              ['assets/rhythm-worship.jpg', 'WORSHIP', 'Worship', 'We gather as the people of God to lift our voices, open the Word, share at His table, and ascribe to Him the glory due His name.', '\u2014 Psalm 96:9'],
              ['assets/rhythm-word.jpg', 'WORD', 'The Word', 'Scripture, carefully preached and patiently studied \u2014 the only foundation strong enough to build a church and a soul that will stand.', '\u2014 2 Timothy 3:16\u201317'],
              ['assets/rhythm-witness.jpg', 'WITNESS', 'Witness', 'A church that has met Jesus cannot stay quiet. We carry the gospel into homes, neighborhoods, and the world \u2014 together.', '\u2014 Matthew 28:19\u201320'],
            ].map(([img, tag, title, body, ref]) => (
              <article key={title} className="trio-card reveal">
                <div className="trio-art">
                  <img loading="lazy" decoding="async" src={img} alt={title}/>
                  <div className="trio-art-tag">{tag}</div>
                </div>
                <div className="trio-body">
                  <h3>{title}</h3>
                  <p>{body}</p>
                  <div className="trio-verse">{ref}</div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* ===== Verse spotlight — large centered scripture, no box ===== */}
      <section className="verse-spotlight home-fade">
        <div className="wrap-narrow center">
          <div className="ornament eyebrow" style={{color:'var(--warm-gold)'}}>Ephesians 2:14, 18</div>
          <p className="verse-spotlight-text">
            &ldquo;For He is our peace, who hath made both one, and hath broken down the middle wall of partition between us... for through Him we both have access by one Spirit unto the Father.&rdquo;
          </p>
          <div className="verse-spotlight-attrib">The Charter of Our Church</div>
        </div>
      </section>

      {/* ===== This Sunday — clean schedule + current series ===== */}
      <section className="section bg-parchment home-fade">
        <div className="wrap">
          <div className="grid-2" style={{alignItems:'stretch', gap:48}}>
            <div className="sunday-schedule">
              <div className="eyebrow">This Sunday</div>
              <h2 style={{fontSize:'clamp(30px,3.8vw,46px)', margin:'14px 0 22px', fontFamily:'Cinzel,serif'}}>Gather With Us</h2>
              <p style={{fontSize:16, color:'#2a221a', marginBottom:28, lineHeight:1.8}}>Expect clear, careful preaching of the Bible, congregational singing, prayer, and a family that genuinely welcomes new faces.</p>
              <ul className="schedule-list">
                <li>
                  <div><b>Prayer &amp; Fellowship</b><span>Opens at 9:45 AM in the lobby</span></div>
                  <span className="schedule-time">9:45 AM</span>
                </li>
                <li>
                  <div><b>Worship Gathering</b><span>Singing, Scripture, prayer, preaching</span></div>
                  <span className="schedule-time">10:00 AM</span>
                </li>
                <li>
                  <div><b>Midweek Study</b><span>Wednesday — prayer and the Word</span></div>
                  <span className="schedule-time">Wed 7 PM</span>
                </li>
              </ul>
              <button className="btn btn-primary" style={{marginTop:28}} onClick={() => nav('visit')}>Plan Your Visit</button>
            </div>
            <div className="sunday-series">
              <div className="sunday-series-art">
                <img loading="lazy" decoding="async" src="assets/sunday-series-reading.jpg" alt="Current series"/>
                <div className="sunday-series-badge">Currently Preaching</div>
              </div>
              <div className="sunday-series-body">
                <div className="eyebrow">The Original Design</div>
                <h3>Ephesians 4:11&ndash;16</h3>
                <p>A verse-by-verse study returning the church to the pattern Christ revealed in His Word — building on the foundation no man can shake.</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ===== Gallery preview ===== */}
      <section className="section bg-cream home-fade">
        <div className="wrap">
          <div className="section-head">
            <div className="ornament eyebrow">Discover the Church</div>
            <h2>Life Together</h2>
            <p className="sub">Glimpses of worship, prayer, fellowship, and gospel work at Broken Barriers.</p>
          </div>
          <div className="gallery-grid">
            {[
              ['assets/life-1.jpg', 'Worship'],
              ['assets/life-2.jpg', 'The Word'],
              ['assets/life-3.jpg', 'Praise'],
              ['assets/life-4.jpg', 'Prayer'],
              ['assets/life-5.jpg', 'Surrender'],
              ['assets/life-6.jpg', 'Gathered'],
              ['assets/life-7.jpg', 'Humility'],
              ['assets/life-8.jpg', 'Hope'],
              ['assets/life-9.jpg', 'The Cross'],
            ].map(([src, cap]) => (
              <div key={cap} className="gallery-tile reveal reveal-zoom">
                <img loading="lazy" decoding="async" src={src} alt={cap}/>
                <div className="cap">{cap}</div>
              </div>
            ))}
          </div>
          <div className="center" style={{marginTop:40}}>
            <button className="btn btn-ghost" style={{color:'var(--crimson)', boxShadow:'0 0 0 1px var(--crimson) inset'}} onClick={() => nav('gallery')}>View Full Gallery</button>
          </div>
        </div>
      </section>

      {/* ===== Give band (kept, refined) ===== */}
      <section className="give-band home-fade" style={{background:"linear-gradient(180deg, rgba(13,13,15,0.62), rgba(13,13,15,0.82)), url('assets/give-band-field.jpg') center 40%/cover no-repeat, var(--obsidian)"}}>
        <div className="wrap-narrow">
          <div className="ornament eyebrow" style={{color:'var(--warm-gold)'}}>Partner in the Work</div>
          <h2>Generosity That Tears Down Walls</h2>
          <p>Every gift directly supports preaching, discipleship, benevolence, and the planting of the No Barrier Way wherever Christ sends us.</p>
          <button className="btn btn-gold" onClick={() => nav('give')}>Give Online</button>
        </div>
      </section>
    </>
  );
}

// ============ ABOUT US ============
function AboutUsPage() {
  return (
    <>
      <PageHero crumb="About" image="assets/about-hero-church.jpg" title="About Broken Barriers Church" verse="“Other foundation can no man lay than that is laid, which is Jesus Christ.” — 1 Corinthians 3:11"/>
      <section className="section">
        <div className="wrap-narrow prose">
          <div className="eyebrow center" style={{display:'block', marginBottom:14}}>Our Story</div>
          <h2 style={{fontSize:'clamp(30px,3.8vw,46px)', textAlign:'center', marginBottom:36}}>A Church Built by Christ</h2>
          <p>Broken Barriers Church was established in April 2026 in Kempner, Texas, as a Texas nonprofit religious corporation under the headship of Jesus Christ. We were planted out of a conviction that the church does not belong to founders, traditions, personalities, or trends — Christ alone has the right to define our doctrine, mission, worship, leadership, and direction.</p>
          <p>We are committed to clarity rather than confusion, faithfulness rather than novelty, and Christ-centered ministry rather than man-centered religion. We do not assume that people understand the gospel, the new birth, the authority of Scripture, or the call to discipleship. So we preach clearly, teach carefully, disciple intentionally, and test all things by the Word of God.</p>

          <h3>Our Mission</h3>
          <p>At Broken Barriers Church, our mission is to tear down every wall standing between people and Jesus Christ. Sin was the original barrier — but the sacrifice of Jesus demolished it completely, once and for all. What we refuse to allow is for man-made traditions, institutional pride, and religious complexity to erect new walls in its place, obscuring the very Gospel that sets people free.</p>
          <blockquote>Our ultimate aim in everything is the glory of God (1 Corinthians 10:31).</blockquote>
          <p>We exist to dismantle every obstruction so the Gospel moves in the No Barrier Way — reaching the lost, recovering the wandering, and building up every believer until the full character of Christ is formed in them.</p>

          <h3>Our Philosophy</h3>
          <p>We reject the lone-wolf model of ministry and any form of celebrity or personality-driven leadership. Leadership is shared, accountable, humble, and governed by the Word of God. No one man owns the church or leads apart from biblical accountability. Elder plurality exists to preserve unity, doctrinal faithfulness, pastoral care, and spiritual protection for the flock.</p>

          <div className="center" style={{marginTop:48}}>
            <button className="btn btn-primary" onClick={() => nav('beliefs')}>Read What We Believe</button>
          </div>
        </div>
      </section>

      {/* Three-column numbered story with images */}
      <section className="section">
        <div className="wrap">
          <div className="section-head">
            <div className="ornament eyebrow">The Story Behind the Name</div>
            <h2>Why &ldquo;Broken Barriers&rdquo;?</h2>
            <p className="sub">Three movements that gave shape to who we are, what we preach, and where we&rsquo;re going.</p>
          </div>
          <div className="num-col">
            <div className="num-col-item reveal">
              <div className="glyph">I.</div>
              <div className="num-art"><img loading="lazy" decoding="async" src="assets/about-barrier.jpg" alt="The original barrier"/></div>
              <h3>The Original Barrier</h3>
              <p>Sin set up the first wall between man and God — and no human effort, ritual, or religion could ever take it down. We were separated, lost, and dead in our trespasses.</p>
              <div className="ref">&mdash; Isaiah 59:2</div>
            </div>
            <div className="num-col-item reveal">
              <div className="glyph">II.</div>
              <div className="num-art"><img loading="lazy" decoding="async" src="assets/about-cross-tomb.jpg" alt="The cross that tore it down"/></div>
              <h3>The Cross That Tore It Down</h3>
              <p>At Calvary, the wall came down. The Son of God bore our sin, satisfied the wrath of God, and reconciled the unreconcilable — once for all, by His blood.</p>
              <div className="ref">&mdash; Ephesians 2:13&ndash;14</div>
            </div>
            <div className="num-col-item reveal">
              <div className="glyph">III.</div>
              <div className="num-art"><img loading="lazy" decoding="async" src="assets/about-church-lives.jpg" alt="The church that lives in it"/></div>
              <h3>The Church That Lives In It</h3>
              <p>What Christ has torn apart, no man dares rebuild. We are a church committed to keeping every wall down — between sinners and the gospel, between brothers and sisters in Christ.</p>
              <div className="ref">&mdash; Galatians 3:28</div>
            </div>
          </div>
        </div>
      </section>

      {/* Script-style pull quote */}
      <section className="section bg-cream">
        <div className="wrap-narrow">
          <div className="script-quote reveal">
            <div className="quote-text">
              For He is our peace, who hath made both one, and hath broken down the middle wall of partition between us; having abolished in His flesh the enmity... for through Him we both have access by one Spirit unto the Father.
            </div>
            <div className="quote-ref">Ephesians 2:14, 18 &middot; The Charter of Our Church</div>
          </div>
        </div>
      </section>

      {/* What Sets Us Apart — two column */}
      <section className="section bg-cream">
        <div className="wrap">
          <div className="section-head">
            <div className="ornament eyebrow">What Sets Us Apart</div>
            <h2>Not Loud. Not Trendy. Not Negotiable.</h2>
            <p className="sub">Six convictions that quietly shape every decision we make as a church family.</p>
          </div>
          <div className="grid-2" style={{gap:48, alignItems:'center'}}>
            <div className="reveal reveal-left">
              <div className="split-img" style={{aspectRatio:'4/5'}}>
                <img loading="lazy" decoding="async" src="assets/about-apart-cross.jpg" alt="Rejoicing at the cross"/>
              </div>
            </div>
            <div className="reveal reveal-right">
              <ul style={{listStyle:'none', padding:0, margin:0}}>
                {[
                  ['Christ-Centered', 'Every gathering, sermon, song, and ministry is anchored in the person and work of Jesus Christ.'],
                  ['Word-Driven', 'We preach books of the Bible, verse by verse — without skipping, softening, or sensationalizing.'],
                  ['Plurally Led', 'A team of biblically qualified elders leads together. No celebrity. No lone wolf. No platform games.'],
                  ['Family-Integrated', 'Children belong in the gathering with their parents. Worship is for the whole household.'],
                  ['Quietly Reverent', 'Awe before God shapes our music, our preaching, our prayer, and our pace.'],
                  ['Truly Welcoming', 'Every wall comes down at the cross. Whoever you are, you are welcome to come and meet Jesus.'],
                ].map(([k, v]) => (
                  <li key={k} style={{padding:'18px 0', borderBottom:'1px solid var(--rule)', display:'grid', gridTemplateColumns:'160px 1fr', gap:20, alignItems:'baseline'}}>
                    <b style={{fontFamily:'Cinzel,serif', color:'var(--crimson)', letterSpacing:'0.1em', textTransform:'uppercase', fontSize:13}}>{k}</b>
                    <span style={{color:'#2a221a', fontSize:15}}>{v}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Photo break — pull quote */}
      <section className="photo-break" style={{backgroundImage:"url('assets/about-heart-cross.jpg')"}}>
        <div className="photo-break-content">
          <div className="ornament eyebrow" style={{color:'var(--warm-gold)'}}>Our Heart</div>
          <div className="pull" style={{marginTop:24}}>
            “Sin built the original wall. The cross of Christ tore it down forever. We exist to make sure nothing — religious, cultural, or personal — gets to put it back up.”
          </div>
          <div className="attrib">— Broken Barriers Church</div>
        </div>
      </section>

      {/* Four pillars */}
      <section className="section">
        <div className="wrap">
          <div className="section-head">
            <div className="ornament eyebrow">How We Build</div>
            <h2 style={{marginTop:14}}>Four Pillars of a Restored Church</h2>
            <p className="sub">When the New Testament describes what the church does, four pillars rise up over and over. We are committed to all four.</p>
          </div>
          <div className="grid-4">
            {[
              ['01', 'Worship', 'Sundays gathered around the Word, song, prayer, and the Lord\'s table — exalting the Triune God.'],
              ['02', 'Word', 'Scripture preached, taught, memorized, and obeyed — the church\'s diet, not a side dish.'],
              ['03', 'Prayer', 'Devoted, congregational, and personal — because the Spirit moves where God\'s people pray.'],
              ['04', 'Mission', 'Reaching the lost, equipping the saints, and planting the gospel where Christ sends us.'],
            ].map(([n, t, d]) => (
              <div key={t} className="card" style={{textAlign:'center'}}>
                <div style={{fontFamily:'Cinzel,serif', fontSize:36, fontWeight:700, color:'var(--rich-gold)', marginBottom:8, lineHeight:1}}>{n}</div>
                <h3 style={{marginBottom:10}}>{t}</h3>
                <p>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Closing CTA band */}
      {/* Organization Information */}
      <section className="section bg-cream">
        <div className="wrap-narrow">
          <div className="section-head">
            <div className="ornament eyebrow">Organization Information</div>
            <h2>Who We Are, On the Record</h2>
          </div>
          <div className="org-info">
            <p><b>Broken Barriers Church</b> is a nonprofit Christian church serving Kempner, Texas and surrounding communities. Our mission is to help people encounter Christ, grow in faith, build meaningful relationships, and serve our community.</p>
            <p>Broken Barriers Church is recognized as a tax-exempt nonprofit organization under Section 501(c)(3) of the Internal Revenue Code.</p>
            <dl className="org-details">
              <div>
                <dt>EIN / Tax ID</dt>
                <dd>42-2040295</dd>
              </div>
              <div>
                <dt>Physical Location</dt>
                <dd>815 Private Road 4717, Kempner, TX 76539</dd>
              </div>
              <div>
                <dt>Official Website</dt>
                <dd><a href="https://www.brokenbarriers.church">www.brokenbarriers.church</a></dd>
              </div>
              <div>
                <dt>General Contact</dt>
                <dd><a href="mailto:hello@brokenbarriers.church">hello@brokenbarriers.church</a></dd>
              </div>
              <div>
                <dt>Administrative / Technical Contact</dt>
                <dd><a href="mailto:tech@brokenbarriers.church">tech@brokenbarriers.church</a></dd>
              </div>
            </dl>
          </div>
        </div>
      </section>

      <section className="give-band" style={{background:"linear-gradient(180deg, rgba(13,13,15,0.72), rgba(13,13,15,0.88)), url('assets/about-table-community.jpg') center/cover no-repeat, var(--obsidian)"}}>
        <div className="wrap-narrow">
          <div className="ornament eyebrow" style={{color:'var(--warm-gold)'}}>There Is Room at This Table</div>
          <h2>Come Find Your Place Among Us</h2>
          <p>You don&rsquo;t need the right words, the right history, or all the answers — only a willingness to come. Reach out with a question, or simply walk through the doors this Sunday.</p>
          <div style={{display:'flex', gap:14, justifyContent:'center', flexWrap:'wrap'}}>
            <button className="btn btn-primary" onClick={() => nav('contact')}>Contact Us</button>
            <button className="btn btn-ghost" onClick={() => nav('visit')}>Plan Your Visit</button>
          </div>
        </div>
      </section>
    </>
  );
}

// ============ BELIEFS ============
function BeliefsPage() {
  const items = [
    ['The Bible', 'We believe the Bible is the inspired, sufficient, trustworthy, and final authority for what we believe and how we live. Scripture is the foundation for our doctrine, worship, leadership, and life together as a church.'],
    ['God', 'There is one true and living God, eternally existing in three Persons: Father, Son, and Holy Spirit. God is holy, sovereign, all-wise, all-powerful, and worthy of all worship, obedience, and glory.'],
    ['Jesus Christ', 'Jesus Christ is fully God and fully man, born of a virgin, sinless in life, and the only Savior of sinners. He died on the cross for our sins, rose bodily from the grave, ascended to heaven, and now reigns as Lord and Head of the church.'],
    ['The Holy Spirit', 'The Holy Spirit convicts of sin, gives new life, indwells believers, sanctifies God\u2019s people, and empowers faithful Christian living. The Spirit always works in harmony with the Word — never in contradiction to it.'],
    ['Salvation', 'Salvation is by grace alone through faith alone in Christ alone. All people are sinners in need of repentance and forgiveness. Those who trust in Christ are forgiven, declared righteous, adopted into His family, and made new by His grace.'],
    ['The Church', 'The church belongs to Jesus Christ and exists to glorify God through worship, preaching, discipleship, fellowship, prayer, and gospel mission. The local church is essential to Christian growth, accountability, and service.'],
    ['Church Leadership', 'Christ leads His church through biblically qualified elders and deacons. Elders are called to shepherd, teach, protect, and lead the church faithfully under the authority of Scripture.'],
    ['Baptism & the Lord\u2019s Supper', 'Jesus gave two ordinances to His church: believer\u2019s baptism and the Lord\u2019s Supper. These are acts of obedience and visible testimonies of the gospel, though not the means of salvation.'],
    ['Marriage, Sexuality & Gender', 'God created humanity male and female. Marriage is a covenant union between one man and one woman. Sexual intimacy is reserved for marriage, and we seek to uphold God\u2019s design with both truth and compassion.'],
    ['Holy Living', 'Christians are called to holiness, repentance, and growing obedience to Christ. Church discipline is a biblical and loving process meant to protect the purity of the church and pursue the restoration of the sinner.'],
    ['Last Things', 'Jesus Christ will personally and visibly return. We believe in the resurrection of the dead, the final judgment, eternal life for the redeemed, and eternal punishment for the unrepentant.'],
    ['Our Conviction', 'We stand on the truths that make Christianity what it is: the holiness of God, the authority of Scripture, the gospel of Jesus Christ, the necessity of the new birth, the purity of the church, and the certainty of Christ\u2019s return.'],
  ];
  return (
    <>
      <PageHero crumb="About / What We Believe" image="assets/believe-hero.jpg" title="What We Believe" verse="“Earnestly contend for the faith which was once delivered unto the saints.” — Jude 1:3"/>
      <section className="section bg-cream">
        <div className="wrap-narrow center">
          <div className="ornament eyebrow">Our Foundation</div>
          <h2 style={{fontSize:'clamp(28px,3.4vw,40px)', margin:'18px 0 16px'}}>Built on Christ. Governed by Scripture. Empowered by the Spirit.</h2>
          <p style={{color:'#2a221a', fontSize:17}}>At Broken Barriers Church, we believe the church must be built on Jesus Christ, governed by the Word of God, and empowered by the Holy Spirit. We desire to honor God with a serious, gracious, and biblical faith that reflects the pattern of Christ, the apostles, and the early church.</p>
        </div>
      </section>
      <section className="section">
        <div className="wrap">
          <div className="grid-2" style={{gap:24}}>
            {items.map(([t,d]) => (
              <div key={t} className="card">
                <h3>{t}</h3>
                <p>{d}</p>
              </div>
            ))}
          </div>
          <div className="center" style={{marginTop:48}}>
            <p className="muted" style={{marginBottom:20}}>Read our full Doctrinal Statement for a more complete explanation of our beliefs and biblical convictions.</p>
            <button className="btn btn-primary" onClick={() => nav('contact')}>Request the Full Statement</button>
          </div>
        </div>
      </section>

      {/* Three Pillars trio */}
      <section className="section">
        <div className="wrap">
          <div className="section-head">
            <div className="ornament eyebrow">Three Pillars of Our Confession</div>
            <h2>Christ &middot; Scripture &middot; Spirit</h2>
            <p className="sub">Strip away the layers and three pillars hold up everything we believe and everything we do as a church.</p>
          </div>
          <div className="trio">
            {[
              ['assets/believe-christ.jpg', 'PILLAR I', 'Christ Alone', 'Jesus is the eternal Son of God, the only Savior of sinners, and the rightful Head of His church. There is no salvation outside of Him, no foundation but Him, and no glory greater than His.', '— Acts 4:12'],
              ['assets/believe-scripture.jpg', 'PILLAR II', 'Scripture Alone', 'The sixty-six books of the Bible are God-breathed, inerrant in their original writings, sufficient for life and doctrine, and the final authority over every council, tradition, and pastor.', '— 2 Timothy 3:16'],
              ['assets/believe-spirit.jpg', 'PILLAR III', 'Spirit Alone', 'No one comes to Christ apart from the regenerating, indwelling, sanctifying work of the Holy Spirit — who never speaks contrary to the Word He inspired.', '— John 16:13'],
            ].map(([img, tag, title, body, ref]) => (
              <article key={title} className="trio-card">
                <div className="trio-art">
                  <img loading="lazy" decoding="async" src={img} alt={title}/>
                  <div className="trio-art-tag">{tag}</div>
                </div>
                <div className="trio-body">
                  <h3>{title}</h3>
                  <p>{body}</p>
                  <div className="trio-verse">{ref}</div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* How We Read the Bible — two column */}
      <section className="section bg-parchment">
        <div className="wrap">
          <div className="grid-2" style={{gap:56, alignItems:'center'}}>
            <div className="reveal reveal-left">
              <div className="eyebrow">How We Read the Bible</div>
              <h2 style={{fontSize:'clamp(28px,3.4vw,42px)', margin:'14px 0 20px', color:'var(--crimson)', fontFamily:'Cinzel,serif'}}>Six Habits That Shape Every Sermon</h2>
              <p style={{color:'#2a221a', fontSize:16, marginBottom:24}}>We hold a high view of Scripture — not because we elevate a book, but because the Author is God Himself. That conviction shapes how we open the Bible together.</p>
              <ul style={{listStyle:'none', padding:0, margin:0}}>
                {[
                  ['Read it whole', 'We preach books of the Bible — Genesis to Revelation — not curated favorites.'],
                  ['Read it carefully', 'Context, grammar, history, and original languages are taken seriously, every week.'],
                  ['Read it humbly', 'We bring our questions to the text — not our culture\'s answers to the text.'],
                  ['Read it together', 'The Bible was written to a people. We learn it best in community, not in isolation.'],
                  ['Read it obediently', 'A passage is not done until it reaches our hands, our homes, and our hearts.'],
                  ['Read it Christ-ward', 'Every passage points to Jesus. We are not done until we have seen Him.'],
                ].map(([k, v]) => (
                  <li key={k} style={{padding:'14px 0', borderBottom:'1px solid var(--rule)'}}>
                    <b style={{fontFamily:'Cinzel,serif', color:'var(--crimson)', letterSpacing:'0.08em'}}>{k}</b>
                    <span style={{display:'block', marginTop:4, color:'#2a221a', fontSize:14.5}}>{v}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div className="reveal reveal-right">
              <div className="split-img" style={{aspectRatio:'4/5'}}>
                <img loading="lazy" decoding="async" src="assets/believe-habits.jpg" alt="Reading the Bible"/>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Where We Stand / Where We Refuse to Drift */}
      <section className="section">
        <div className="wrap">
          <div className="section-head">
            <div className="ornament eyebrow">Convictions, Plainly Stated</div>
            <h2>Where We Stand · Where We Refuse to Drift</h2>
            <p className="sub">A confessing church is a clarifying church. Here is what we hold to — and what we will not allow into the building.</p>
          </div>
          <div className="grid-2" style={{gap:24}}>
            <div className="card" style={{borderTop:'3px solid var(--crimson)'}}>
              <div className="eyebrow" style={{color:'var(--crimson)'}}>We Stand For</div>
              <ul style={{listStyle:'none', padding:0, marginTop:14}}>
                {[
                  'The full inspiration and sufficiency of Scripture',
                  'Salvation by grace alone, through faith alone, in Christ alone',
                  'The exclusive Lordship of Jesus Christ over His church',
                  'A regenerate, baptized, and committed membership',
                  'A plural eldership of qualified men shepherding together',
                  'Expository preaching that exalts the Author of the Word',
                  'Congregational singing rooted in biblical truth',
                  'Family worship, raising children in the fear of the Lord',
                ].map(s => (
                  <li key={s} style={{padding:'10px 0', borderBottom:'1px solid var(--rule)', display:'flex', gap:12, alignItems:'baseline'}}>
                    <span style={{color:'var(--rich-gold)', fontWeight:700, fontFamily:'Cinzel,serif'}}>✓</span>
                    <span style={{color:'#2a221a', fontSize:15}}>{s}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div className="card" style={{borderTop:'3px solid var(--obsidian)'}}>
              <div className="eyebrow" style={{color:'var(--obsidian)'}}>We Refuse to Drift Into</div>
              <ul style={{listStyle:'none', padding:0, marginTop:14}}>
                {[
                  'A celebrity- or personality-driven pulpit',
                  'Entertainment-style worship that obscures the gospel',
                  'A man-made tradition treated as binding doctrine',
                  'Topical sermons untethered from a biblical text',
                  'A consumer-membership model with no real commitment',
                  'A leadership culture without biblical accountability',
                  'Cultural drift on marriage, sexuality, or gender',
                  'Programs that replace prayer, preaching, and discipleship',
                ].map(s => (
                  <li key={s} style={{padding:'10px 0', borderBottom:'1px solid var(--rule)', display:'flex', gap:12, alignItems:'baseline'}}>
                    <span style={{color:'var(--obsidian)', fontWeight:700, fontFamily:'Cinzel,serif'}}>✕</span>
                    <span style={{color:'var(--muted)', fontSize:15}}>{s}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Photo break */}
      <section className="photo-break" style={{backgroundImage:"url('assets/believe-doctrine.jpg')"}}>
        <div className="photo-break-content">
          <div className="ornament eyebrow" style={{color:'var(--warm-gold)'}}>Doctrine For Discipleship</div>
          <div className="pull" style={{marginTop:24}}>
            “Sound doctrine is not a wall to hide behind. It is the soil from which a holy life grows — and a hospitable church flourishes.”
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="section bg-cream">
        <div className="wrap-narrow center">
          <div className="ornament eyebrow">Want to Talk it Through?</div>
          <h2 style={{margin:'18px 0 14px'}}>Have a Question About What We Believe?</h2>
          <p className="muted" style={{maxWidth:600, margin:'0 auto 30px'}}>If something on this page concerns you, encourages you, or raises a question — we would love to sit down and talk it through. There are no off-limits topics here.</p>
          <div style={{display:'flex', gap:14, justifyContent:'center', flexWrap:'wrap'}}>
            <button className="btn btn-primary" onClick={() => nav('prayer')}>Talk With a Pastor</button>
            <button className="btn btn-gold" onClick={() => nav('visit')}>Come This Sunday</button>
          </div>
        </div>
      </section>
    </>
  );
}

// ============ LEADERSHIP ============
function LeadershipPage() {
  const leaders = [
    ['BG', 'Brian Goodsby', 'Senior Pastor · Elder · President', 'Pastor Brian shepherds the flock through the preaching and teaching of the Word, laboring in prayer and pastoral oversight under the shared accountability of the Board of Elders.'],
    ['JN', 'Joshua Nixon', 'Deacon · Secretary · Transitional Director', 'Joshua serves the church in practical ministry, maintains the corporate records, and serves temporarily as a Transitional Director during the church\u2019s founding stage.'],
    ['MD', 'Michael Diaz', 'Deacon · Treasurer · Transitional Director', 'Michael oversees the custody and stewardship of the church\u2019s resources and serves as a Transitional Director during the founding stage.'],
  ];
  return (
    <>
      <PageHero crumb="About / Leadership" image="assets/leader-hero.jpg" title="Our Leadership" verse="“The elders which are among you I exhort... feed the flock of God which is among you.” — 1 Peter 5:1–2"/>
      <section className="section">
        <div className="wrap">
          <div className="section-head">
            <div className="ornament eyebrow">Shared. Accountable. Biblical.</div>
            <h2>A Plurality Under the Headship of Christ</h2>
            <p className="sub">Broken Barriers Church is governed under the headship of Christ by biblically qualified elders. The elders lead together as undershepherds, fully subject to the authority of Scripture.</p>
          </div>
          <div className="grid-3">
            {leaders.map(([i, n, r, b]) => (
              <div key={n} className="leader">
                <div className="leader-photo">{i}</div>
                <h4>{n}</h4>
                <div className="role">{r}</div>
                <p>{b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section bg-parchment">
        <div className="wrap">
          <div className="grid-2" style={{gap:48, alignItems:'start'}}>
            <div>
              <div className="eyebrow">Elder Plurality</div>
              <h3 style={{fontSize:30, margin:'14px 0 18px', color:'var(--crimson)', fontFamily:'Cinzel,serif'}}>One Office, Three Names</h3>
              <p style={{color:'#2a221a'}}>In our church, the terms <em>elder</em>, <em>pastor</em>, <em>shepherd</em>, and <em>overseer</em> refer to the same spiritual office, each highlighting a different aspect:</p>
              <ul style={{listStyle:'none', padding:0, marginTop:18}}>
                {[
                  ['Elder', 'Maturity, wisdom, and recognized qualification.'],
                  ['Pastor', 'Feeding, teaching, guiding, and caring for the flock.'],
                  ['Shepherd', 'Guarding, tending, and protecting God\u2019s people.'],
                  ['Overseer', 'Leadership, vigilance, and spiritual oversight.'],
                ].map(([k,v]) => (
                  <li key={k} style={{padding:'14px 0', borderBottom:'1px solid var(--rule)'}}>
                    <b style={{fontFamily:'Cinzel,serif', color:'var(--crimson)', letterSpacing:'0.1em'}}>{k}</b><span style={{marginLeft:14, color:'var(--muted)'}}>{v}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div style={{background:'#fff', padding:36, border:'1px solid var(--rule)'}}>
              <div className="eyebrow">Transitional Governance</div>
              <h3 style={{fontSize:24, margin:'12px 0 14px', color:'var(--obsidian)', fontFamily:'Cinzel,serif'}}>Why We Have Transitional Directors</h3>
              <p style={{color:'#2a221a', fontSize:15}}>Texas law requires a minimum number of directors for a nonprofit corporation. Until enough biblically qualified elders are examined and installed, faithful deacons serve temporarily as Transitional Directors to ensure the church operates lawfully and orderly.</p>
              <p style={{color:'#2a221a', fontSize:15}}>The transitional period continues until at least three biblically qualified elders are seated. A man may serve as a director for legal purposes without being recognized as a permanent elder.</p>
              <blockquote style={{margin:'18px 0 0'}}>A lawful bridge from startup governance to a fully functioning biblical eldership.</blockquote>
            </div>
          </div>
        </div>
      </section>

      {/* Script quote */}
      <section className="section bg-cream">
        <div className="wrap-narrow">
          <div className="script-quote">
            <div className="quote-text">
              The elders which are among you I exhort... feed the flock of God which is among you, taking the oversight thereof, not by constraint, but willingly; not for filthy lucre, but of a ready mind.
            </div>
            <div className="quote-ref">1 Peter 5:1&ndash;2 &middot; Our Charge</div>
          </div>
        </div>
      </section>

      {/* Elder Qualifications — two column */}
      <section className="section">
        <div className="wrap">
          <div className="section-head">
            <div className="ornament eyebrow">1 Timothy 3 · Titus 1</div>
            <h2>What We Look For in an Elder</h2>
            <p className="sub">Scripture is not silent about who shepherds the flock. We test every man called to this office against the standard the Holy Spirit gave us.</p>
          </div>
          <div className="grid-2" style={{gap:24}}>
            {[
              ['Character', ['Above reproach', 'Self-controlled', 'Hospitable', 'Gentle, not violent', 'Not a lover of money', 'Not given to drunkenness']],
              ['Conviction', ['Holds firmly to the faith', 'Able to teach sound doctrine', 'Refutes those who oppose it', 'Disciplined in the Word', 'Devoted to prayer', 'Tested over time']],
              ['Family', ['Faithful in marriage', 'Manages his own house well', 'Children walking in respect', 'A pattern of love at home', 'Honored by his wife', 'Known by his neighbors']],
              ['Calling', ['Desires the work', 'Recognized by the body', 'Affirmed by existing elders', 'Confirmed by gifting', 'Bears spiritual fruit', 'Not a new convert']],
            ].map(([t, items]) => (
              <div key={t} className="card">
                <h3>{t}</h3>
                <ul style={{listStyle:'none', padding:0, marginTop:14}}>
                  {items.map(i => (
                    <li key={i} style={{padding:'8px 0', borderBottom:'1px solid var(--rule)', display:'flex', gap:12, alignItems:'baseline'}}>
                      <span style={{color:'var(--rich-gold)', fontFamily:'Cinzel,serif', fontSize:11, letterSpacing:'0.2em'}}>·</span>
                      <span style={{color:'#2a221a', fontSize:15}}>{i}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Photo break */}
      <section className="photo-break" style={{backgroundImage:"url('assets/leader-charge.jpg')"}}>
        <div className="photo-break-content">
          <div className="ornament eyebrow" style={{color:'var(--warm-gold)'}}>The Charge</div>
          <div className="pull" style={{marginTop:24}}>
            “Take heed therefore unto yourselves, and to all the flock, over the which the Holy Ghost hath made you overseers, to feed the church of God.”
          </div>
          <div className="attrib">— Acts 20:28</div>
        </div>
      </section>

      {/* How decisions are made */}
      <section className="section bg-cream">
        <div className="wrap">
          <div className="grid-2" style={{gap:56, alignItems:'center'}}>
            <div className="reveal reveal-left">
              <div className="split-img" style={{aspectRatio:'4/5'}}>
                <img loading="lazy" decoding="async" src="assets/leader-decisions.jpg" alt="Elders praying together"/>
              </div>
            </div>
            <div className="reveal reveal-right">
              <div className="eyebrow">How Decisions Are Made</div>
              <h2 style={{fontSize:'clamp(28px,3.4vw,40px)', margin:'14px 0 18px', color:'var(--crimson)', fontFamily:'Cinzel,serif'}}>Together. Prayerfully. By the Word.</h2>
              <p style={{color:'#2a221a', fontSize:16}}>No single elder makes major decisions alone. We pray together, study Scripture together, debate honestly, and seek unity before we act.</p>
              <ol style={{listStyle:'none', padding:0, counterReset:'step', marginTop:24}}>
                {[
                  ['Hear the Concern', 'A matter is brought to the elders by a member, deacon, or pastor.'],
                  ['Pray Through It', 'We carry it before the Lord — individually and together — before talking through it.'],
                  ['Test by Scripture', 'Every decision is measured against what God\'s Word actually says, not what feels right.'],
                  ['Seek Unanimity', 'Plurality means we move together, not by majority vote. We labor toward unity.'],
                  ['Communicate Clearly', 'Once decided, we tell the body what was decided and why — no secret rooms.'],
                ].map(([t, d], i) => (
                  <li key={t} style={{display:'grid', gridTemplateColumns:'48px 1fr', gap:18, padding:'16px 0', borderBottom:'1px solid var(--rule)'}}>
                    <div style={{fontFamily:'Cinzel,serif', fontSize:24, fontWeight:700, color:'var(--rich-gold)', lineHeight:1}}>{String(i+1).padStart(2,'0')}</div>
                    <div>
                      <b style={{fontFamily:'Cinzel,serif', color:'var(--crimson)', letterSpacing:'0.08em', fontSize:15}}>{t}</b>
                      <div style={{color:'#2a221a', fontSize:14.5, marginTop:4}}>{d}</div>
                    </div>
                  </li>
                ))}
              </ol>
            </div>
          </div>
        </div>
      </section>

      {/* CTA — serve */}
      <section className="give-band" style={{background:"linear-gradient(180deg, rgba(13,13,15,0.78), rgba(13,13,15,0.88)), url('assets/leader-gifts.jpg') center/cover no-repeat, var(--obsidian)"}}>
        <div className="wrap-narrow">
          <div className="ornament eyebrow" style={{color:'var(--warm-gold)'}}>Every Member a Minister</div>
          <h2>Your Gifts Were Given for This Body</h2>
          <p>God has placed something in you that this church needs — a skill, a burden, a quiet faithfulness. Let&rsquo;s talk about where it fits and how you can begin serving alongside us.</p>
          <div style={{display:'flex', gap:14, justifyContent:'center', flexWrap:'wrap'}}>
            <button className="btn btn-primary" onClick={() => nav('contact')}>Contact Us</button>
            <button className="btn btn-ghost" onClick={() => nav('visit')}>Plan Your Visit</button>
          </div>
        </div>
      </section>
    </>
  );
}

window.HomePage = HomePage;
window.AboutUsPage = AboutUsPage;
window.BeliefsPage = BeliefsPage;
window.LeadershipPage = LeadershipPage;

// shared
const HERO_IMAGES = {
  'about-us':   'assets/about-hero-church.jpg',
  'beliefs':    'assets/believe-hero.jpg',
  'leadership': 'assets/leader-hero.jpg',
  'new-here':   'assets/newhere-1.jpg',
  'visit':      'assets/visit-1.jpg',
  'prayer':     'assets/prayer-1.jpg',
  'contact':    'assets/contact-1.jpg',
  'ministries': 'assets/min-1.jpg',
  'sermons':    'assets/serm-1.jpg',
  'events':     'assets/evt-1.jpg',
  'gallery':    'assets/gal-1.jpg',
  'give':       'assets/give-1.jpg',
};

function PageHero({ crumb, title, verse, image }) {
  const slug = (crumb || '').split('/').pop().trim().toLowerCase().replace(/\s+/g, '-');
  const bg = image || HERO_IMAGES[slug] || HERO_IMAGES['about-us'];
  return (
    <header className="page-hero" style={{ backgroundImage: `url('${bg}')` }}>
      <div className="crumb">{crumb}</div>
      <h1>{title}</h1>
      {verse && <div className="verse-ref">{verse}</div>}
    </header>
  );
}
window.PageHero = PageHero;
window.HERO_IMAGES = HERO_IMAGES;