// LOUD direction — toxic yellow, manifesto, marquees
const { useState, useEffect, useRef } = React;
const LANG_NAMES = { tr: "TR", en: "EN", ru: "RU" };
function useTimer() {
const [t, setT] = useState(0);
useEffect(() => {
const start = Date.now();
const i = setInterval(() => setT(Math.floor((Date.now() - start) / 1000)), 100);
return () => clearInterval(i);
}, []);
const m = Math.floor(t / 60).toString().padStart(2, '0');
const s = (t % 60).toString().padStart(2, '0');
const ms = (t % 1000).toString().padStart(2, '0');
return `${m}:${s}:${ms}`;
}
function LangSwitcher({ lang, setLang }) {
return (
{['tr', 'en', 'ru'].map(l => (
setLang(l)}
style={{
background: lang === l ? 'var(--ink)' : 'transparent',
color: lang === l ? 'var(--yellow)' : 'var(--ink)',
border: '2px solid var(--ink)',
padding: '6px 10px',
cursor: 'pointer',
fontFamily: 'inherit',
fontWeight: 700,
letterSpacing: 'inherit'
}}
>{LANG_NAMES[l]}
))}
);
}
function BananaLogo({ size = 56, onClick }) {
// Real logo PNG. Black artwork on transparent — invert/recolor via filter on dark surfaces.
return (
{content.map((it, i) => (
{it}
★
))}
);
}
function Hero({ t, lang }) {
const timer = useTimer();
return (
● MUZDOLABI / DEVELOPMENT
{t.timer_label} {timer} — {t.timer_suffix}
İSTANBUL · 41.0082°N
{t.hero_main}
);
}
function Services({ t }) {
const items = [
{ n: '🍌', title: t.s1_title, desc: t.s1_desc },
{ n: '🍌🍌', title: t.s2_title, desc: t.s2_desc },
{ n: '🍌🍌🍌', title: t.s3_title, desc: t.s3_desc }
];
return (
{t.services_title}
{t.services_kicker}
{items.map((it, i) => (
))}
);
}
function Work({ t, lang }) {
return (
{t.work_title}
{t.work_kicker} — 06
{window.PORTFOLIO.map((p, i) => {
// editorial layout: vary spans
const spans = [
{ col: 'span 7', tall: false },
{ col: 'span 5', tall: true },
{ col: 'span 5', tall: false },
{ col: 'span 7', tall: false },
{ col: 'span 6', tall: false },
{ col: 'span 6', tall: false }
];
const sp = spans[i] || { col: 'span 6', tall: false };
const isTall = p.aspect === 'tall';
return (
{'🍌'.repeat(i+1)} / {p.industry[lang]}
{p.year}
);
})}
);
}
function Enjoy({ t }) {
return (
{t.enjoy_main}
{t.enjoy_sub}
);
}
function BananaClicker({ t }) {
const [count, setCount] = useState(0);
const [shake, setShake] = useState(0);
const [open, setOpen] = useState(false);
const [sent, setSent] = useState(false);
const [status, setStatus] = useState('idle');
const [error, setError] = useState('');
const [form, setForm] = useState({ name: '', email: '', what: '', company: '' });
const need = 5;
const taunt = t.banana_taunts[Math.min(count, t.banana_taunts.length - 1)];
const onClick = () => {
const n = count + 1;
setCount(n);
setShake(s => s + 1);
if (n >= need) {
setTimeout(() => setOpen(true), 250);
}
};
const submit = async (e) => {
e.preventDefault();
setStatus('sending');
setError('');
try {
const response = await fetch('/api/leads', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
...form,
language: document.documentElement.lang || '',
page: window.location.pathname
})
});
const result = await response.json().catch(() => ({}));
if (!response.ok || !result.ok) {
throw new Error(result.error || 'Request failed');
}
setSent(true);
setStatus('sent');
setForm({ name: '', email: '', what: '', company: '' });
} catch (err) {
setStatus('error');
setError(true);
}
};
const close = () => {
setOpen(false);
setCount(0);
setSent(false);
setStatus('idle');
setError('');
setForm({ name: '', email: '', what: '', company: '' });
};
return (
{t.banana_title}
{t.banana_sub}
{t.banana_count}
{Array.from({ length: need }).map((_, i) => (
🍌
))}
{count}/{need}
{taunt}
{open && (
e.stopPropagation()} style={{
background: 'var(--yellow)',
color: 'var(--ink)',
border: '4px solid var(--ink)',
padding: 'clamp(32px, 4vw, 56px)',
maxWidth: 720, width: '100%',
position: 'relative',
boxShadow: '12px 12px 0 var(--ink)'
}}>
{t.form_close} ✕
{!sent ? (
{t.form_title}
{t.form_sub}
);
}
function Marquee({ items, speed = 30, direction = 'left', big = false }) {
const content = items.concat(items).concat(items);
return (
{t.visit} ↗
);
})}