/* global React */ const DC = { bg: '#0B0C0E', bg1: '#141518', bg2: '#191A1D', bone: '#E6DCCB', softBone: 'rgba(230,220,203,0.72)', grey: '#8A8A86', mute: '#52524F', border: '#1F2024', borderHi: '#33353A', cyan: '#59A3B3', cyanHi: '#7EBFCD', brass: '#B9A37E', brassHi: '#D4BC95', ok: '#6FB89B', }; const DF = { display: "'Manrope', system-ui, sans-serif", sans: "'Inter', system-ui, sans-serif", mono: "'Inter', system-ui, sans-serif", serif: "'Cormorant Garamond', Georgia, serif", }; const dease = 'cubic-bezier(0.2,0.7,0.2,1)'; const dwrap = { width: 'min(1160px, calc(100% - 48px))', margin: '0 auto' }; function useIsNarrow(breakpoint = 900) { const getValue = () => (typeof window !== 'undefined' ? window.innerWidth < breakpoint : false); const [isNarrow, setIsNarrow] = React.useState(getValue); React.useEffect(() => { function onResize() { setIsNarrow(getValue()); } onResize(); window.addEventListener('resize', onResize); return () => window.removeEventListener('resize', onResize); }, [breakpoint]); return isNarrow; } const pageData = { 'how-it-works': { navLabel: 'How It Works', eyebrow: 'Workflow', title: 'Stop sorting. Start using.', intro: 'Your audience is already filming the show. But without a system, that footage ends up scattered across DMs and social tags, making it impossible to use for your next campaign. Showgaze gives you a clean, organized folder of synced footage, ready to cut.', facts: ['Organized folders', 'Synced to desk audio', 'Production-ready'], heroPanel: { kicker: 'The Outcome', title: 'A clean handover package, not an inbox full of Google Drive links.', body: 'We collect the raw clips, filter out the dark and shaky ones, and deliver a timeline that your editor can actually use. You get the crowd energy without the administrative mess.', }, flow: [ { step: 'Collect', note: 'A dedicated, frictionless upload path for the audience' }, { step: 'Sort', note: 'Incoming clips are manually reviewed and filtered' }, { step: 'Sync', note: 'Every usable clip is aligned to your reference audio' }, { step: 'Deliver', note: 'A production-ready folder handed directly to your editor' }, ], cards: [ { title: 'Reduce the after-show scramble.', body: 'Stop chasing clips across platforms. We set up a dedicated collection path that automatically sorts incoming footage before you even look at it.', image: '/assets/images/industrial_aperture.png', imageAlt: 'Flat vector industrial aperture infrastructure sorting incoming footage streams', }, { title: 'Everything is synced.', body: 'Every clip is aligned to the reference audio using our custom sync engine. Your editor doesn\'t waste hours matching waveforms.', }, { title: 'Built for repeatable runs.', body: 'When you are managing multiple dates, consistency matters. This infrastructure is designed to scale quietly behind the scenes without adding friction to your existing team.', }, ], splitSections: [ { title: 'Organized from the ground up', body: 'We turn chaotic audience behavior into a structured asset delivery. You receive neatly arranged files that fit directly into professional post-production workflows.', stat: 'Better event follow-up starts with better collection discipline.', graphic: 'future-mosaic', }, { title: 'Useful when the room is part of the story', body: 'If the energy in the crowd matters to the way the show is remembered, it makes sense to build a better path for the footage that captures it. Phone footage stays central, with any planned capture sitting around it rather than replacing it.', stat: 'Some of the most memorable event footage is not captured from the cleanest angle.', graphic: 'venue-space', }, ], board: { title: 'What we need to get started', intro: 'The intent is to keep the input simple. We only need a few basics from the organiser side.', items: [ 'Basic event details and expected use', 'Permission to share the upload path at the event', 'Reference or desk audio when it helps the job', 'A clear sense of what the output is meant to do after the show', ], }, }, }; const navItems = [ { href: '/how-it-works', label: 'How it works', key: 'how-it-works' }, ]; function dAccentTone(pageKey) { return pageKey === 'pricing' ? { color: DC.brass, glow: 'rgba(185,163,126,0.14)', line: 'rgba(185,163,126,0.32)' } : { color: DC.cyan, glow: 'rgba(89,163,179,0.14)', line: 'rgba(89,163,179,0.32)' }; } function DMark({ size = 20 }) { return ( Showgaze mark ); } /* ─── Nav ────────────────────────────────────────────────────────────────── */ function DHeader({ currentKey }) { const [logoHover, setLogoHover] = React.useState(false); return (
setLogoHover(true)} onMouseLeave={() => setLogoHover(false)} >
Showgaze
); } function DFactRow({ facts, accent }) { return (
{facts.map((fact, i) => ( {i > 0 && ))}
); } /* ─── Hero ───────────────────────────────────────────────────────────────── */ function DHero({ pageKey, page }) { const accent = dAccentTone(pageKey); const isNarrow = useIsNarrow(880); return (
); } /* ─── Editorial block ────────────────────────────────────────────────────── */ function DEditorialBlock({ pageKey, page }) { const accent = dAccentTone(pageKey); const isNarrow = useIsNarrow(760); const [primary, ...supporting] = page.cards; return (
The case
{primary.image ? (

{primary.title}

{primary.body}

{primary.imageAlt
) : ( <>

{primary.title}

{primary.body}

)}
{supporting.map((card, i) => (

{card.title}

{card.body}

))}
); } /* ─── Flow layout (how-it-works) ─────────────────────────────────────────── */ function DFlow({ pageKey, page }) { const accent = dAccentTone(pageKey); const isNarrow = useIsNarrow(900); return (
The process
{page.flow.map((s, i) => (
{i + 1}
{s.step}
{s.note}
))}
Technical process pipeline blueprint
{page.cards.map((card, i) => (

{card.title}

{card.body}

))}
); } /* ─── Pricing document rows ──────────────────────────────────────────────── */ function DPricingMatrix({ page }) { return (
Package direction
{page.pricing.map((plan) => { const tone = plan.accent === 'brass' ? DC.brass : plan.accent === 'cyan' ? DC.cyan : DC.bone; return (

{plan.tier}

{plan.body}

{plan.bullets.map((bullet, i) => ( {i > 0 && ·} {bullet} ))}
); })}
); } /* ─── Interactive Showcase (Replaces stacked DSplitSections) ─────────────── */ function DInteractiveShowcase({ pageKey, sections }) { const [activeIndex, setActiveIndex] = React.useState(0); const accent = dAccentTone(pageKey); const isNarrow = useIsNarrow(900); if (!sections || sections.length === 0) return null; const activeSection = sections[activeIndex]; return (
{/* Navigation / Tabs */}
Key Features
{sections.map((sec, idx) => { const isActive = idx === activeIndex; return ( ); })}
{/* Active Content Area */}

{activeSection.title}

{activeSection.body}

{activeSection.stat && (
{activeSection.stat}
)}
{activeSection.graphic ? : (
{activeSection.imageAlt}
) }
); } /* ─── CSS visual panels — animated, no product screenshots ──────────────── */ /* Scattered text fragments — each fragment floats on its own slow cycle */ function GPromoScatter({ accent }) { const frags = [ { t: '37 clips', x: '10%', y: '14%', size: 36, op: 0.88, font: DF.display, upper: false, cls: 'dp-float-b', delay: '0s' }, { t: 'UNTAGGED', x: '58%', y: '10%', size: 8, op: 0.38, font: DF.mono, upper: true, cls: 'dp-float-a', delay: '1.2s' }, { t: '4 days late', x: '54%', y: '28%', size: 13, op: 0.42, font: DF.sans, upper: false, cls: 'dp-float-c', delay: '0.6s' }, { t: 'still arriving', x: '6%', y: '52%', size: 10, op: 0.30, font: DF.mono, upper: true, cls: 'dp-float-a', delay: '3.1s' }, { t: 'from 3 channels', x: '38%', y: '65%', size: 12, op: 0.40, font: DF.sans, upper: false, cls: 'dp-float-b', delay: '2.0s' }, { t: 'which cut?', x: '12%', y: '80%', size: 11, op: 0.28, font: DF.sans, upper: false, cls: 'dp-float-c', delay: '4.3s' }, { t: 'TAGGED WRONG', x: '62%', y: '74%', size: 8, op: 0.25, font: DF.mono, upper: true, cls: 'dp-float-b', delay: '1.7s' }, { t: 'not synced yet', x: '30%', y: '44%', size: 10, op: 0.22, font: DF.sans, upper: false, cls: 'dp-float-a', delay: '5.0s' }, ]; return (