// components/HeroSlideshow.jsx
//
// This file used to hold the in-place, two-slide sliding hero shell
// (Non-Lethal Response slide <-> WrapShield slide, sliding within the
// homepage). That's retired: the nav bar's active state and the URL were both
// tracking `page` in App.jsx, but the slideshow changed what was on screen
// without changing `page` — so clicking the WrapShield slide showed WrapShield
// content while the nav still highlighted "Non-Lethal Response™". Confusing.
//
// Replacement: App.jsx now owns a real auto-cycle timer that navigates
// between the 'home' and 'wrapshield' *pages* every 5s (see
// autoCyclePaused / pauseAutoCycle there), so the nav bar, the URL hash, and
// what's on screen are always in sync. A single click on either the
// Non-Lethal Response / WrapShield nav items, or either dot below, pauses the
// auto-cycle for the rest of the session (resumes only on reload).
//
// What's left in this file:
//  - WrapShieldHeroBg: shared hero backdrop, still used by the dedicated
//    WrapShield page's own hero (WrapShieldPage.jsx's WSHero).
//  - HeroCycleDots: the 2-dot indicator/control, now shared between the home
//    hero (HomePage.jsx's HeroSection) and the WrapShield hero
//    (WrapShieldPage.jsx's WSHero) instead of living inside a slide shell.

// Shared WrapShield hero backdrop — the TPiCore® demo frame on the right, faded
// into the dark panel with a CSS mask + gradient so there is NO hard seam.
function WrapShieldHeroBg() {
    const isMobile = useMobile();
    const maskR = 'linear-gradient(to right, transparent 0%, rgba(0,0,0,0.15) 28%, rgba(0,0,0,1) 60%)';
    const maskB = 'linear-gradient(to bottom, rgba(0,0,0,1) 0%, transparent 85%)';
    const mask = isMobile ? maskB : maskR;
    return (
        <React.Fragment>
            {/* Demo frame, faded in from the left (desktop) / top (mobile) via a mask */}
            <div style={{
                position: 'absolute', top: 0, right: 0, bottom: 0,
                width: isMobile ? '100%' : '80%',
                backgroundImage: 'url(assets/wrapshield-cars-enhanced.webp)',
                backgroundSize: 'cover', backgroundPosition: 'center',
                backgroundRepeat: 'no-repeat',
                opacity: isMobile ? 0.18 : 0.85,
                WebkitMaskImage: mask, maskImage: mask,
                zIndex: 1, pointerEvents: 'none',
            }} />
            {/* Dark gradient for text legibility — fades to transparent, so no seam */}
            <div style={{
                position: 'absolute', inset: 0, zIndex: 1, pointerEvents: 'none',
                background: isMobile
                    ? 'linear-gradient(to bottom, rgba(6,12,28,0.82) 0%, rgba(6,12,28,0.92) 100%)'
                    : 'linear-gradient(to right, var(--bg) 0%, var(--bg) 30%, rgba(6,12,28,0.5) 56%, rgba(6,12,28,0.1) 80%, rgba(6,12,28,0) 100%)',
            }} />
            {/* Bottom fade into the page background */}
            <div style={{
                position: 'absolute', inset: 0, zIndex: 1, pointerEvents: 'none',
                background: 'linear-gradient(to bottom, transparent 56%, var(--bg) 100%)',
            }} />
        </React.Fragment>
    );
}

// 2-dot indicator + control shared by the home hero and the WrapShield hero.
// Clicking a dot jumps straight to that page (real navigation — the nav bar
// updates too) and permanently stops App.jsx's auto-cycle for the session.
function HeroCycleDots({ currentPage, navigate, pauseAutoCycle }) {
    if (!(window.WRAP_FLAGS && window.WRAP_FLAGS.wrapshieldEnabled)) return null;
    const pages = ['home', 'wrapshield'];
    return (
        <div style={{ position: 'absolute', bottom: 28, left: 0, right: 0, display: 'flex', justifyContent: 'center', gap: 10, zIndex: 6 }}>
            {pages.map((p) => (
                <button
                    key={p}
                    onClick={() => { pauseAutoCycle && pauseAutoCycle(); if (p !== currentPage) navigate(p); }}
                    aria-label={p === 'home' ? 'Show Non-Lethal Response page' : 'Show WrapShield page'}
                    aria-current={currentPage === p}
                    style={{
                        width: currentPage === p ? 30 : 10, height: 10, borderRadius: 6,
                        background: currentPage === p ? 'var(--accent)' : 'rgba(255,255,255,0.35)',
                        border: 'none', cursor: 'pointer', padding: 0,
                        transition: 'width 0.3s ease, background 0.3s ease',
                    }}
                />
            ))}
        </div>
    );
}

Object.assign(window, { WrapShieldHeroBg, HeroCycleDots });