);
// ─── Services ─────────────────────────────────────────────────────────
const Services = ({ lang }) => {
const t = T[lang];
return (
);
};
// ─── Clients ──────────────────────────────────────────────────────────
const Clients = ({ lang }) => {
const label = { en:"Trusted by", de:"Unsere Kunden", ar:"عملاؤنا" }[lang] || "Trusted by";
const clients = ["Microsoft","Hostinger","WordPress","Google","Stripe","OpenAI"];
return (
{label}
{clients.map((c,i) => (
{c}
))}
);
};
// ─── Why ──────────────────────────────────────────────────────────────
const Why = ({ lang }) => {
const t = T[lang];
const icons = ["globe","shield","spark","flag"];
return (
{t.why.items.map((it,i) => (
))}
);
};
// ─── Microsoft ────────────────────────────────────────────────────────
const Microsoft = ({ lang, navigate }) => {
const t = T[lang];
return (
{t.ms.products.map((p,i) => (
))}
);
};
// ─── Stats ────────────────────────────────────────────────────────────
// Parses a stat value like "47+", "5+", "3", "DE"
// Returns { prefix: "", number: 47, suffix: "+", isText: false }
const parseStatValue = (raw) => {
if (!raw) return { isText: true, display: raw };
const str = String(raw).trim();
// Pure text (no digits) → render as-is
if (!/\d/.test(str)) return { isText: true, display: str };
// Arabic numerals with optional prefix/suffix
const match = str.match(/^([^\d]*)(\d+(?:\.\d+)?)([^\d]*)$/);
if (!match) return { isText: true, display: str };
return {
isText: false,
prefix: match[1],
number: parseFloat(match[2]),
suffix: match[3],
};
};
const AnimatedStatValue = ({ raw, triggered }) => {
const parsed = parseStatValue(raw);
const [displayed, setDisplayed] = useState(parsed.isText ? raw : 0);
const rafRef = useRef(null);
useEffect(() => {
if (!triggered || parsed.isText) return;
const duration = 1400;
const target = parsed.number;
const start = performance.now();
const tick = (now) => {
const elapsed = now - start;
const progress = Math.min(elapsed / duration, 1);
// Ease-out-cubic
const eased = 1 - Math.pow(1 - progress, 3);
const current = Math.round(eased * target);
setDisplayed(current);
if (progress < 1) rafRef.current = requestAnimationFrame(tick);
};
rafRef.current = requestAnimationFrame(tick);
return () => cancelAnimationFrame(rafRef.current);
}, [triggered, raw]);
if (parsed.isText) return
{raw};
return (
{parsed.prefix}{displayed}{parsed.suffix}
);
};
const Stats = ({ lang }) => {
const t = T[lang];
const sectionRef = useRef(null);
const [triggered, setTriggered] = useState(false);
useEffect(() => {
const node = sectionRef.current;
if (!node) return;
const observer = new IntersectionObserver(
([entry]) => { if (entry.isIntersecting) { setTriggered(true); observer.disconnect(); } },
{ threshold: 0.3 }
);
observer.observe(node);
return () => observer.disconnect();
}, []);
return (
{t.stats.map((s, i) => (
))}
);
};
// ─── Final CTA ────────────────────────────────────────────────────────
const FinalCta = ({ lang, navigate }) => {
const t = T[lang];
return (
);
};
// ─── Footer ────────────────────────────────────────────────────────────
const Footer = ({ lang, navigate }) => {
const t = T[lang];
const legal = (t.pages && t.pages.legalNav) || { impressum:"Impressum", datenschutz:"Privacy", cookies:"Cookies" };
const go = (r) => (e) => {
e.preventDefault();
const urlMap = {
home:"/", services:"/services", solutions:"/solutions",
microsoft:"/microsoft-solutions", ai:"/ai-solutions",
web:"/web-development", ecommerce:"/e-commerce",
about:"/about", contact:"/contact",
datenschutz:"/privacy-policy", privacy:"/privacy-policy",
impressum:"/impressum", cookies:"/cookies",
};
window.location.href = urlMap[r] || "/" + r;
};
const ctaTitle = { en:"Starting a new project or want to collaborate with us?", de:"Neues Projekt oder Zusammenarbeit?", ar:"هل تبدأ مشروعاً جديداً أو تريد التعاون معنا؟" }[lang];
const ctaLink = { en:"Let's talk →", de:"Jetzt sprechen →", ar:"تحدث إلينا ←" }[lang];
const compLabel = { en:"Company", de:"Unternehmen", ar:"الشركة" }[lang];
const companyLinks = [
["home", t.nav.home],
["about", t.nav.about],
["contact", t.nav.contact],
["impressum", "Impressum"],
["datenschutz","Privacy / Datenschutz"],
];
const serviceLinks = [
["web", t.nav.web],
["microsoft", t.nav.microsoft],
["ai", t.nav.ai],
["ecommerce", t.nav.ecommerce],
["solutions", t.nav.solutions],
];
return (
);
};
// ─── Section intro ────────────────────────────────────────────────────
const SectionIntro = ({ eyebrow, title, lede }) => (
{eyebrow}
{title}
{lede &&
{lede}
}
);
// ─── Floating WhatsApp Button ─────────────────────────────────────────
const WaFloat = () => (
💬
);
Object.assign(window, {
Icon, DM_Header: Header, DM_Hero: Hero, DM_Services: Services,
DM_Clients: Clients, DM_Why: Why, DM_Microsoft: Microsoft,
DM_Stats: Stats, DM_FinalCta: FinalCta, DM_Footer: Footer,
DM_WaFloat: WaFloat,
});