/* global React, EsIcon, STRINGS */ const { useState, useEffect, useRef, useMemo } = React; // ── YouTube channel handle/id ─────────────────────────── // We use the handle URL — the channel's RSS feed needs a channel ID. // We'll attempt multiple strategies: noembed, RSS via CORS proxy. const CHANNEL_HANDLE = "Esmandautech"; const CHANNEL_URL = `https://www.youtube.com/@${CHANNEL_HANDLE}`; const CHANNEL_ID = "UCzm0XVnwnkm7ZfmGlFv515w"; // ── Reveal-on-scroll hook ─────────────────────────────── // We arm the reveal system AFTER first paint by adding `.reveal-ready` to . // In-viewport elements get `.in` immediately so the hero is never blank; // off-screen elements wait for IntersectionObserver. function useReveal() { useEffect(() => { const els = document.querySelectorAll('.reveal'); // Mark already-visible elements as 'in' BEFORE arming the hidden state — so they never flash empty const inView = (el) => { const r = el.getBoundingClientRect(); return r.top < window.innerHeight * 0.95 && r.bottom > 0; }; els.forEach(el => { if (inView(el)) el.classList.add('in'); }); // Now arm the system document.documentElement.classList.add('reveal-ready'); const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }); }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' }); els.forEach(el => { if (!el.classList.contains('in')) io.observe(el); }); return () => io.disconnect(); }, []); } // ── Floating tech icons backdrop ──────────────────────── function FloatIcons() { const items = useMemo(() => ([ { I: EsIcon.Controller, top: '12%', left: '6%', size: 56, dur: 18, delay: 0 }, { I: EsIcon.Smartphone, top: '20%', right: '8%', size: 44, dur: 22, delay: 2 }, { I: EsIcon.Headphones, top: '60%', left: '4%', size: 60, dur: 20, delay: 4 }, { I: EsIcon.Wifi, top: '70%', right: '10%', size: 48, dur: 24, delay: 1 }, { I: EsIcon.Laptop, top: '38%', left: '52%', size: 52, dur: 26, delay: 3 }, { I: EsIcon.Power, top: '85%', left: '40%', size: 40, dur: 19, delay: 5 }, ]), []); return ( ); } // ── Hero rings (chevron motif) ────────────────────────── function HeroRings() { const rings = []; for (let i = 0; i < 8; i++) { const size = 240 + i * 110; rings.push( ); } return ( ); } // ── Nav ───────────────────────────────────────────────── function Nav({ lang, setLang, t }) { return (
ES Esmandau
); } // ── Hero ──────────────────────────────────────────────── function Hero({ t, heroImage }) { return (

{t.hero.title1}
{t.hero.title2}

{t.hero.lede}

{heroImage ? ( Hernán — Esmandau ) : (
[ portrait · drop image here ]
)}
{t.hero.live}
); } // ── About ─────────────────────────────────────────────── function About({ t }) { return (

{t.about.title1}
{t.about.titleAccent}

{t.about.copy}

{t.about.feats.map((f, i) => (
{f.lbl}
{f.val}
))}
{t.about.featureMark}
100K+
{t.about.featureSub}
@esmandautech
); } // ── Videos slider with live YouTube fetch ─────────────── function Videos({ t, lang }) { const [videos, setVideos] = useState(null); // null = loading, [] = error const [index, setIndex] = useState(0); const trackRef = useRef(null); const [perView, setPerView] = useState(3); useEffect(() => { const update = () => { const w = window.innerWidth; if (w < 700) setPerView(1); else if (w < 1180) setPerView(2); else setPerView(3); }; update(); window.addEventListener('resize', update); return () => window.removeEventListener('resize', update); }, []); useEffect(() => { let cancelled = false; async function fetchVideos() { // file:// protocol breaks CORS proxy fetches; warn + show fallback immediately. if (location.protocol === 'file:') { console.warn('[Esmandau] Videos slider needs to be served over http(s); CORS proxies are blocked under file://. Use a local server or open via the design tab.'); if (!cancelled) setVideos([]); return; } const rssUrl = `https://www.youtube.com/feeds/videos.xml?channel_id=${CHANNEL_ID}`; const proxies = [ `https://api.allorigins.win/raw?url=${encodeURIComponent(rssUrl)}`, `https://corsproxy.io/?${encodeURIComponent(rssUrl)}`, `https://api.codetabs.com/v1/proxy/?quest=${encodeURIComponent(rssUrl)}`, ]; for (const url of proxies) { try { const res = await fetch(url); if (!res.ok) continue; const text = await res.text(); const doc = new DOMParser().parseFromString(text, 'text/xml'); const entries = [...doc.getElementsByTagName('entry')].slice(0, 5); if (!entries.length) continue; const list = entries.map(e => { const id = e.getElementsByTagName('yt:videoId')[0]?.textContent || ''; const title = e.getElementsByTagName('title')[0]?.textContent || ''; const published = e.getElementsByTagName('published')[0]?.textContent || ''; return { id, title, published, url: `https://www.youtube.com/watch?v=${id}`, thumb: `https://i.ytimg.com/vi/${id}/hqdefault.jpg`, }; }); if (!cancelled) setVideos(list); return; } catch (e) { console.warn('[Esmandau] proxy failed:', url, e); } } if (!cancelled) setVideos([]); } fetchVideos(); return () => { cancelled = true; }; }, []); const formatAgo = (iso) => { if (!iso) return ''; const ago = STRINGS[lang].videos.ago; const diff = (Date.now() - new Date(iso).getTime()) / 1000; if (diff < 60) return ago.just; if (diff < 3600) return `${Math.floor(diff/60)} ${ago.min}`; if (diff < 86400) return `${Math.floor(diff/3600)} ${ago.hour}`; if (diff < 86400*7) return `${Math.floor(diff/86400)} ${ago.day}`; if (diff < 86400*30) return `${Math.floor(diff/86400/7)} ${ago.week}`; if (diff < 86400*365) return `${Math.floor(diff/86400/30)} ${ago.month}`; return `${Math.floor(diff/86400/365)} ${ago.year}`; }; const cardWidth = 360 + 24; // card + gap const totalCards = videos ? videos.length + 1 : 0; // Measure the actual visible track width so the last step lands flush with the right edge. const [trackVisibleWidth, setTrackVisibleWidth] = useState(0); useEffect(() => { if (!trackRef.current) return; const wrap = trackRef.current.parentElement; // .track-wrap const measure = () => { const cs = getComputedStyle(wrap); const padL = parseFloat(cs.paddingLeft) || 0; const padR = parseFloat(cs.paddingRight) || 0; setTrackVisibleWidth(wrap.clientWidth - padL - padR); }; measure(); const ro = new ResizeObserver(measure); ro.observe(wrap); return () => ro.disconnect(); }, []); // total content width: N cards * 360 + (N-1) * 24 gap const trackContentWidth = totalCards > 0 ? (totalCards * 360 + (totalCards - 1) * 24) : 0; const maxOffset = Math.max(0, trackContentWidth - trackVisibleWidth); // Index-based step still drives navigation, but we cap the actual translate to maxOffset. const stepIndexMax = Math.max(0, totalCards - perView); const safeIndex = Math.min(index, stepIndexMax); const desiredOffset = safeIndex * cardWidth; const offset = Math.min(desiredOffset, maxOffset); const transform = `translateX(-${offset}px)`; const atEnd = offset >= maxOffset - 1; const prev = () => setIndex(i => Math.max(0, i - 1)); const next = () => setIndex(i => Math.min(stepIndexMax, i + 1)); return (

{t.videos.title1} {t.videos.titleAccent}

{t.videos.kicker}

{videos === null && ( [...Array(5)].map((_, i) => (
 
 
)) )} {videos && videos.length > 0 && videos.map(v => (
{v.title}
{v.title}
● {formatAgo(v.published)}
 ))} {videos && videos.length > 0 && (
{t.videos.ctaTitle}
{t.videos.ctaSub}
{t.videos.visitChannel}
)} {videos && videos.length === 0 && (
{t.videos.error} {t.videos.visitChannel}
)}
); } // ── Collaborations ────────────────────────────────────── function Collab({ t }) { const brands = [ { name: 'Apple', src: 'assets/brand-apple.png', invert: true, bigger: true }, { name: 'Samsung', src: 'assets/brand-samsung.png', invert: false }, { name: 'Motorola', src: 'assets/brand-motorola.png', invert: true }, { name: 'Claro', src: 'assets/brand-claro.png', invert: false }, { name: 'Anker', src: 'assets/brand-anker.png', invert: false }, { name: 'abxylute', src: 'assets/brand-abxylute.png', invert: false }, { name: 'AT&T', src: 'assets/brand-att.png', invert: false }, { name: 'T-Mobile', src: 'assets/brand-tmobile.png', invert: false, bigger: true }, ]; // Duplicate for seamless infinite scroll const looped = [...brands, ...brands]; return (

{t.collab.title1} {t.collab.titleAccent}

{looped.map((b, i) => ( {b.name} ))}
); } // ── Contact form ──────────────────────────────────────── function Contact({ t }) { const [form, setForm] = useState({ name: '', email: '', message: '' }); const [sent, setSent] = useState(false); const [sending, setSending] = useState(false); const [error, setError] = useState(false); const submit = async (e) => { e.preventDefault(); setSending(true); setError(false); try { const body = new FormData(); Object.entries(form).forEach(([k, v]) => body.append(k, v)); const res = await fetch('/contact', { method: 'POST', body }); if (!res.ok) throw new Error('Network error'); setSent(true); } catch { setError(true); } finally { setSending(false); } }; const u = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value })); return (

{t.contact.title1} {t.contact.titleAccent}

{t.contact.kicker}

{t.contact.emailLabel}
{t.contact.youtubeLabel}
{!sent ? (