// ============== VIDEO SECTION — Clog Busterz ==============
// Uses YouTube as host. To add a real video:
// 1. Upload to YouTube (unlisted is fine)
// 2. Copy the video ID from the URL (e.g. "dQw4w9WgXcQ" from youtube.com/watch?v=dQw4w9WgXcQ)
// 3. Replace the id: field below

const { useState: useStateV, useEffect: useEffectV, useRef: useRefV } = React;

// ─── VIDEO DATA ─────────────────────────────────────────────────────
// Replace id: 'PLACEHOLDER' with your real YouTube video IDs
window.CB_VIDEOS = [
  {
    id: 'PLACEHOLDER_MEET_CREW',
    title: 'Meet the Clog Busterz Crew',
    sub: 'Who shows up to your door',
    cat: 'ABOUT US',
    color: '#2473c4',
    placeholder: 'Coming soon: meet the Clog Busterz crew on real Central Kentucky jobs.',
  },
  {
    id: 'PLACEHOLDER_BLUELIGHT',
    title: 'Blue Light Pipe Lining in Action',
    sub: 'Hammerhead CIPP — no digging',
    cat: 'HAMMERHEAD',
    color: '#4ab3ff',
    placeholder: 'Official HammerHead footage and Clog Busterz field videos are being added.',
  },
  {
    id: 'PLACEHOLDER_WATER_HEATER',
    title: 'Water Heater Install — Start to Finish',
    sub: '50-gal replacement in 4 hours',
    cat: 'WATER HEATERS',
    color: '#d94545',
    placeholder: 'Coming soon: a real tank replacement walkthrough from old unit out to final test.',
  },
  {
    id: 'PLACEHOLDER_DRAIN',
    title: 'Drain Cleaning Before & After',
    sub: 'Hydro-jet vs. what was in there',
    cat: 'DRAIN CLEANING',
    color: '#1e9e5e',
    placeholder: 'Coming soon: camera footage, drain cleaning, and the clean-pipe result.',
  },
  {
    id: 'PLACEHOLDER_PB30',
    title: 'PB30 Pipe Bursting — Two Pits, One Day',
    sub: 'Full sewer line, no yard torn up',
    cat: 'TRENCHLESS',
    color: '#4ab3ff',
    placeholder: 'Coming soon: PB30 pipe bursting with the two-pit setup and yard-saving result.',
  },
  {
    id: 'PLACEHOLDER_REVIEW',
    title: 'What Richmond Homeowners Say',
    sub: 'Real customers, real jobs',
    cat: 'TESTIMONIALS',
    color: '#e08b00',
    placeholder: 'Coming soon: short customer stories from real Clog Busterz jobs.',
  },
];

// ─── VIDEO MODAL ──────────────────────────────────────────────────────
function VideoModal({ video, onClose }) {
  useEffectV(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, []);

  if (!video) return null;
  const isReal = !video.id.startsWith('PLACEHOLDER');

  return (
    <div className="vm-backdrop" onClick={onClose}>
      <div className="vm-modal" onClick={e => e.stopPropagation()}>
        <button className="vm-close" onClick={onClose} aria-label="Close">×</button>
        <div className="vm-player">
          {isReal ? (
            <iframe
              src={`https://www.youtube.com/embed/${video.id}?autoplay=1&rel=0&modestbranding=1`}
              title={video.title}
              frameBorder="0"
              allow="autoplay; fullscreen"
              allowFullScreen
              style={{width:'100%',height:'100%',display:'block'}}
            />
          ) : (
            <div className="vm-placeholder">
              <div className="vm-ph-tag">{video.cat}</div>
              <div className="vm-ph-title">{video.title}</div>
              <div className="vm-ph-note">{video.placeholder}</div>
              <div className="vm-ph-cta">
                <span>Want proof for a job like yours right now? Call dispatch and we'll share real photos and camera findings from jobs like it.</span>
                <a href="tel:8594083382" className="vm-ph-phone">● 859-408-3382</a>
              </div>
            </div>
          )}
        </div>
        <div className="vm-info">
          <div className="vm-cat">{video.cat}</div>
          <div className="vm-title">{video.title}</div>
          <div className="vm-sub">{video.sub}</div>
        </div>
      </div>
    </div>
  );
}

// ─── HERO VIDEO BACKGROUND ────────────────────────────────────────────
// Shows a muted looping YouTube video behind the hero
// Replace HERO_VIDEO_ID with your YouTube video ID
// Best for: truck arriving on job, crew working, time-lapse of a repair
window.HeroVideoBg = function HeroVideoBg() {
  const HERO_VIDEO_ID = 'PLACEHOLDER_HERO';
  if (HERO_VIDEO_ID.startsWith('PLACEHOLDER')) return null;
  return (
    <div className="hero-video-wrap">
      <iframe
        className="hero-video-iframe"
        src={`https://www.youtube.com/embed/${HERO_VIDEO_ID}?autoplay=1&mute=1&loop=1&playlist=${HERO_VIDEO_ID}&controls=0&showinfo=0&rel=0&modestbranding=1&iv_load_policy=3`}
        title="Hero background"
        frameBorder="0"
        allow="autoplay; fullscreen"
        allowFullScreen
      />
      <div className="hero-video-overlay" />
    </div>
  );
};

// ─── VIDEO SECTION ────────────────────────────────────────────────────
function VideoSection() {
  const [activeVideo, setActiveVideo] = useStateV(null);
  const videos = window.CB_VIDEOS;

  return (
    <>
      <section className="vid-section" id="videos" data-screen-label="videos">
        <div className="container">
          <div className="sec-head">
            <div>
              <div className="eyebrow"><span className="dot" /> 14 · WATCH US WORK</div>
              <h2>See it<br/>before you<br/><span className="accent">call.</span></h2>
            </div>
            <p>Real jobs. Real crews. Real results across Central Kentucky. Watch how we do it — from Blue Light pipe lining to a same-day water heater swap.</p>
          </div>

          <div className="vid-grid">
            {videos.map((v, i) => {
              const isReal = !v.id.startsWith('PLACEHOLDER');
              const thumb = isReal
                ? `https://img.youtube.com/vi/${v.id}/maxresdefault.jpg`
                : null;
              return (
                <button
                  key={v.id}
                  className={`vid-card ${!isReal ? 'vid-card-placeholder' : ''}`}
                  onClick={() => setActiveVideo(v)}
                  style={{'--vid-color': v.color}}
                >
                  <div className="vid-thumb">
                    {isReal ? (
                      <img src={thumb} alt={v.title} className="vid-img" />
                    ) : (
                      <div className="vid-thumb-placeholder">
                        <div className="vid-ph-label">{v.placeholder.substring(0, 60)}…</div>
                      </div>
                    )}
                    <div className="vid-play-btn" aria-hidden="true">
                      <svg viewBox="0 0 60 60" fill="none">
                        <circle cx="30" cy="30" r="29" fill="rgba(0,0,0,0.55)" stroke="rgba(255,255,255,0.7)" strokeWidth="1.5"/>
                        <path d="M23 18 L45 30 L23 42 Z" fill="#fff"/>
                      </svg>
                    </div>
                    <div className="vid-cat-badge" style={{background: v.color}}>{v.cat}</div>
                    {!isReal && <div className="vid-pending-badge">VIDEO COMING SOON</div>}
                  </div>
                  <div className="vid-body">
                    <div className="vid-title">{v.title}</div>
                    <div className="vid-sub">{v.sub}</div>
                  </div>
                </button>
              );
            })}
          </div>

          <div className="vid-cta">
            <div className="vid-cta-left">
              <div className="vid-cta-h">Want to see proof before you book?</div>
              <div className="vid-cta-sub">Ask dispatch for photos, camera findings, or equipment examples from jobs like yours before we send the crew.</div>
            </div>
            <div className="vid-cta-right">
              <a href="tel:8594083382" className="phone-pill"><span>●</span>859-408-3382</a>
            </div>
          </div>
        </div>
      </section>

      <VideoModal video={activeVideo} onClose={() => setActiveVideo(null)} />
    </>
  );
}

window.VideoSection = VideoSection;