// Shared scroll-reveal hook — defined once, used across all components window.useInView = (threshold = 0.15) => { const ref = React.useRef(null); const [inView, setInView] = React.useState(false); React.useEffect(() => { const el = ref.current; if (!el) return; const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setInView(true); obs.disconnect(); } }, { threshold }); obs.observe(el); return () => obs.disconnect(); }, []); return [ref, inView]; }; // Header.jsx — Sticky Nav + Hero + Lead Form const Header = ({ onNav }) => { const [scrolled, setScrolled] = React.useState(false); const [formData, setFormData] = React.useState({ name: '', business: '', email: '', phone: '', setup: '' }); const [submitted, setSubmitted] = React.useState(false); const [focused, setFocused] = React.useState(''); React.useEffect(() => { const handler = () => setScrolled(window.scrollY > 40); window.addEventListener('scroll', handler); return () => window.removeEventListener('scroll', handler); }, []); const navLinks = [ { label: 'Line Cleaning', href: 'index.html#line-cleaning' }, { label: 'Why It Matters', href: 'index.html#why-it-matters' }, { label: 'Service Area', href: 'index.html#service-area' }, { label: 'SkyTab POS', href: 'skytab.html' }, { label: 'All Services', href: 'services.html' }, ]; const handleSubmit = (e) => { e.preventDefault(); setSubmitted(true); }; const inputStyle = (key) => ({ padding: '11px 14px', fontFamily: "'Raleway', sans-serif", fontSize: 14, background: focused === key ? 'rgba(255,255,255,0.14)' : 'rgba(255,255,255,0.08)', border: focused === key ? '1px solid rgba(232,180,34,0.6)' : '1px solid rgba(255,255,255,0.18)', borderRadius: 3, color: '#fff', outline: 'none', boxSizing: 'border-box', width: '100%', transition: 'all 0.2s', }); return (
{/* Real photography background */}
{/* Dark overlay — heavy left for text legibility, lighter right to show photo */}
{/* Gold glow orb */}
{/* Red glow bottom left */}
{/* ── NAV ── */} {/* ── HERO ── */}
{/* Left */}
{/* Eyebrow */}
Draught Line Specialists

Better Beer
Starts
at the Line

Cleaner lines. Better taste. Happier customers.

Premium draught beer services for bars, restaurants and hospitality venues across Southwestern Ontario.

{ e.currentTarget.style.borderColor = 'rgba(255,255,255,0.65)'; e.currentTarget.style.color = '#fff'; }} onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(255,255,255,0.30)'; }} >Book a Service Call
{/* Trust strip */}
{[ { icon: '📍', text: 'Locally Owned' }, { icon: '✓', text: 'Quality Guaranteed' }, { icon: '⚡', text: 'Fast Response' }, { icon: '🤝', text: 'Real Relationships' }, ].map(t => (
{t.icon} {t.text}
))}
{/* Right — Lead Form */}
{submitted ? (
✓
You're All Set!
We'll be in touch shortly to arrange your free line assessment.
) : (
Free Consultation
Get Your Free
Line Check
We'll assess your system, look for issues, and give you honest recommendations.
setFormData({...formData, name: e.target.value})} onFocus={() => setFocused('name')} onBlur={() => setFocused('')} style={inputStyle('name')} /> setFormData({...formData, business: e.target.value})} onFocus={() => setFocused('business')} onBlur={() => setFocused('')} style={inputStyle('business')} />
setFormData({...formData, email: e.target.value})} onFocus={() => setFocused('email')} onBlur={() => setFocused('')} style={inputStyle('email')} /> setFormData({...formData, phone: e.target.value})} onFocus={() => setFocused('phone')} onBlur={() => setFocused('')} style={inputStyle('phone')} />