/* global React */
(function () {
const { useState, useEffect, useRef } = React;
const NS = window.AaronChowdhuryFaisalDesignSystem_418701;
const { NavBar, SectionHeading, Button, Input } = NS;
/* Nocturnal São Paulo skyline reel (Aaron's own, hot-linked from Pexels). */
const HERO_VID = 'https://videos.pexels.com/video-files/19910523/19910523-uhd_2560_1440_30fps.mp4';
const HERO_POSTER = 'https://images.pexels.com/videos/19910523/aerial-brazil-city-dji-19910523.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750';
const SC_PROFILE = 'https://soundcloud.com/shotbyfaisal';
/* ---------- scroll reveal (opacity always 1; only transform animates, so
content is never frozen hidden in a backgrounded preview iframe) ---------- */
const _cbs = new Set();
let _bound = false;
function check() {
const root = document.getElementById('scroll');
const vh = root ? root.clientHeight : window.innerHeight;
_cbs.forEach((e) => {
const el = e.ref.current; if (!el) { _cbs.delete(e); return; }
if (el.getBoundingClientRect().top < vh * 0.92) { e.go(); _cbs.delete(e); }
});
}
function bind() {
if (_bound) return; _bound = true;
const root = document.getElementById('scroll');
const h = () => requestAnimationFrame(check);
(root || window).addEventListener('scroll', h, { passive: true });
window.addEventListener('resize', h, { passive: true });
setTimeout(() => { _cbs.forEach((e) => e.go()); _cbs.clear(); }, 2500);
}
function Reveal({ children, delay = 0, motion = true, style = {}, as = 'div', className: extraCls = '', ...rest }) {
const ref = useRef(null);
const [pre, setPre] = useState(motion);
useEffect(() => {
if (!motion) { setPre(false); return; }
const el = ref.current; if (!el) return;
bind();
const e = { ref, go: () => setPre(false) };
_cbs.add(e); requestAnimationFrame(check);
return () => { _cbs.delete(e); };
}, [motion]);
const Tag = as;
const base = pre ? 'reveal is-pre' : (motion ? 'reveal anim' : 'reveal');
const cls = extraCls ? base + ' ' + extraCls : base;
return {children};
}
/* ---------- data ---------- */
const GENRES = ['Afro House', 'Tech House', 'Tribal', 'Circuit'];
const MIXES = [
{ t: 'Sunset Social', meta: 'Afro House', url: 'https://soundcloud.com/shotbyfaisal/sunset-social-afro-house' },
{ t: 'Workout Mix 77', meta: 'Tech House · High Energy', url: 'https://soundcloud.com/shotbyfaisal/workout-mix-77' },
{ t: 'Workout Mix 72', meta: 'Tech House · High Energy', url: 'https://soundcloud.com/shotbyfaisal/workout-mix-72' },
];
/* ---------- sections ---------- */
function BgVideo({ src, poster, style }) {
const ref = useRef(null);
useEffect(() => {
const v = ref.current;
if (!v) return;
const tryPlay = () => { const p = v.play(); if (p && p.catch) p.catch(() => {}); };
tryPlay();
v.addEventListener('canplay', tryPlay);
v.addEventListener('loadeddata', tryPlay);
const onInteract = () => tryPlay();
window.addEventListener('pointerdown', onInteract, { once: true });
window.addEventListener('touchstart', onInteract, { once: true });
const t = setTimeout(tryPlay, 400);
return () => {
clearTimeout(t);
v.removeEventListener('canplay', tryPlay);
v.removeEventListener('loadeddata', tryPlay);
window.removeEventListener('pointerdown', onInteract);
window.removeEventListener('touchstart', onInteract);
};
}, [src]);
return ;
}
function Hero({ motion }) {
return (
);
}
function Marquee() {
const items = [];
for (let i = 0; i < 4; i++) GENRES.forEach((g) => items.push(g));
return (
{items.concat(items).map((g, i) => (
{g}
))}
);
}
function MixRow({ m, open, onToggle }) {
const src = `https://w.soundcloud.com/player/?url=${encodeURIComponent(m.url)}&color=%237B2FFF&auto_play=${open ? 'true' : 'false'}&hide_related=true&show_comments=false&show_user=true&show_reposts=false&visual=false`;
return (
{open ? '❚❚' : '▶'}
{Array.from({ length: 28 }).map((_, k) => (
))}
{open ? 'Close' : 'Play'}
{open && (
)}
);
}
function Mixes({ motion }) {
const [open, setOpen] = useState(null);
return (
MIXES
{MIXES.map((m, i) => (
setOpen(open === i ? null : i)} />
))}
);
}
function Residency({ motion }) {
return (
Resident DJ
LIFE TIME
BUCKHEAD
Holding it down as resident — afro house to tech house, every set built for the room. Upcoming dates landing soon.
);
}
function Book({ motion }) {
return (
);
}
function Footer() {
return (
);
}
function MobileNav({ logo, links, scrolled }) {
const [open, setOpen] = useState(false);
return (
{logo}
{links.map((l, i) => (
setOpen(false)}
style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 17, fontWeight: 600, letterSpacing: '0.04em',
textTransform: 'uppercase', textDecoration: 'none', color: l.cta ? 'var(--accent)' : 'var(--text)',
padding: '15px 0', borderBottom: i < links.length - 1 ? '1px solid var(--border-soft)' : 'none' }}>{l.label}
))}
);
}
function FaisalApp() {
const [scrolled, setScrolled] = useState(false);
useEffect(() => {
const el = document.getElementById('scroll');
if (!el) return;
const onScroll = () => setScrolled(el.scrollTop > 40);
el.addEventListener('scroll', onScroll);
return () => el.removeEventListener('scroll', onScroll);
}, []);
const motion = window.matchMedia('(prefers-reduced-motion: reduce)').matches ? false : true;
const links = [
{ label: 'Mixes', href: '#mixes' },
{ label: 'Residency', href: '#residency' },
{ label: 'Book', href: '#book', cta: true },
];
return (
);
}
window.FaisalApp = FaisalApp;
})();