/* eslint-disable */
/**
* marketing-sections.jsx — globale Komponenten window.HowIWork und window.FAQ
*
* Geladen vor app.jsx via
* Wird im App-Return per React.createElement(window.HowIWork) bzw. window.FAQ verwendet.
*/
(function (global) {
const { useState } = React;
const t = window.t || function(de, en){ return de; };
// ===== HOW I WORK — 4-Schritte-Workflow-Infografik =====
function HowIWork() {
const steps = [
{
n: "01",
title: t("Gespräch", "Conversation"),
text: t("30–60 Min. vor Ort, online oder telefonisch. Festpreis direkt danach.", "30–60 min on-site, online or by phone. Fixed price right after."),
svg: (
),
},
{
n: "02",
title: t("Technische Aufgabe", "Technical Specification"),
text: t("KI erstellt eine verbindliche Spec — Sie sehen vor der Zahlung, was geliefert wird.", "AI drafts a binding spec — you see what's delivered before you pay."),
svg: (
),
},
{
n: "03",
title: t("Umsetzung", "Delivery"),
text: t("Wir bauen die Lösung. 50 % vorab, 50 % nach Abnahme.", "We build the solution. 50% upfront, 50% on acceptance."),
svg: (
),
},
{
n: "04",
title: t("Übergabe", "Handover"),
text: t("Live-Demo, Schulung, Code + Doku gehören Ihnen. 30 Tage Bug-Garantie.", "Live demo, training, code + docs are yours. 30-day bug warranty."),
svg: (
),
},
];
return (
{t("Wie ich arbeite", "How I work")}
{t("Vier Schritte — keine Überraschungen.", "Four steps — no surprises.")}
{t("Jeder Auftrag durchläuft denselben Prozess — Sie wissen immer, was als Nächstes kommt und was es kostet.", "Every project follows the same process — you always know what's next and what it costs.")}
{steps.map((s, i) => (
{s.svg}
{s.n}
{s.title}
{s.text}
{i < steps.length - 1 && (
)}
))}
);
}
// ===== FAQ — Accordion =====
const FAQ_ITEMS = [
{
q: t("Was kostet eine Beratung?", "What does a consultation cost?"),
a: t("CHF 50/h netto (54.05 brutto). Mindestens 1 Stunde. Bei Vor-Ort-Terminen kommen Wegspesen ab Balberstrasse 58, 8038 Zürich dazu. Entsteht aus dem Gespräch ein Auftrag, wird das Honorar mit dem Auftragspreis verrechnet — die Beratung kostet Sie dann effektiv nichts.", "CHF 50/h net (54.05 gross). 1 hour minimum. For on-site appointments, travel expenses apply from Balberstrasse 58, 8038 Zurich. If the meeting leads to a project, the consultation fee is credited against the project price — the consultation effectively costs you nothing."),
},
{
q: t("Wer ist Vertragspartner?", "Who is the contracting party?"),
a: t("Maksym Liakhov, Einzelunternehmen unter der Marke Liakhov Group. UID CHE-294.177.807. Sitz: Balberstrasse 58, 8038 Zürich. Schweizer Recht, Gerichtsstand Zürich.", "Maksym Liakhov, sole proprietorship trading as Liakhov Group. UID CHE-294.177.807. Registered office: Balberstrasse 58, 8038 Zurich. Swiss law, jurisdiction Zurich."),
},
{
q: t("Wie sieht der Vertrag aus?", "What does the contract look like?"),
a: t("Werkvertrag nach Schweizer OR. Die KI-generierte Technische Aufgabe ist Vertragsgegenstand. Im Festpreis enthalten: max. 2 kleine Anpassungen. Fundamentale Änderungen erfordern eine neue Bestellung — schützt Sie und mich vor Scope-Creep.", "Work contract under Swiss CO. The AI-generated technical specification is the contractual scope. Included in the fixed price: up to 2 small adjustments. Fundamental changes require a new order — protects both you and me from scope creep."),
},
{
q: t("Wie ist es um den Datenschutz bestellt?", "How is data protection handled?"),
a: t("DSG (Schweiz) und DSGVO (EU). Auf Wunsch unterschreibe ich einen separaten NDA (Vorlage liegt im Footer). Daten werden nur soweit verarbeitet, wie für die Erbringung der Leistung nötig — keine Weitergabe an Dritte ohne Ihre Zustimmung.", "Swiss FADP and EU GDPR. On request I sign a separate NDA (template available in the footer). Data is processed only to the extent required to deliver the service — never shared with third parties without your consent."),
},
{
q: t("Welche Erfahrung bringen Sie mit?", "What experience do you bring?"),
a: t("20+ Jahre Berufserfahrung an der Schnittstelle Digitalisierung, Gastronomie, Marketing und Logistik. Diplom-Hotelier (Belvoirpark Zürich). 2+ Jahre fokussiert auf KI-Integration und Prozessautomatisierung (n8n, Make, Claude AI). Erfahrung in 6 Ländern, 5 Sprachen fließend (DE, EN, UA, RU, PL).", "20+ years of professional experience at the intersection of digitalization, hospitality, marketing and logistics. Certified hotelier (Belvoirpark Zurich). 2+ years focused on AI integration and process automation (n8n, Make, Claude AI). Experience in 6 countries, fluent in 5 languages (DE, EN, UA, RU, PL)."),
},
{
q: t("Welche Sprachen sprechen Sie?", "Which languages do you speak?"),
a: t("Deutsch (C2), Ukrainisch und Russisch (Muttersprache), Englisch (B2–C1), Polnisch (A1–A2). Bedeutet: Sie können mit Ihren russischsprachigen Mitarbeitern direkt kommunizieren, ich übersetze keine technischen Termini ungenau.", "German (C2), Ukrainian and Russian (native), English (B2–C1), Polish (A1–A2). Meaning: you can communicate directly with your Russian-speaking staff — I won't mistranslate technical terms."),
},
{
q: t("Welche Zahlungsmethoden akzeptieren Sie?", "Which payment methods do you accept?"),
a: t("Kreditkarte (Visa/Mastercard/Amex via Stripe), PayPal, TWINT (in Vorbereitung), Banküberweisung (SEPA/SIC mit Schweizer QR-Rechnung), XRP für Kryptozahler, Bargeld vor Ort nach Vereinbarung. 50% Vorauskasse, 50% nach Abnahme.", "Credit card (Visa/Mastercard/Amex via Stripe), PayPal, TWINT (in preparation), bank transfer (SEPA/SIC with Swiss QR-bill), XRP for crypto payers, cash on-site by arrangement. 50% prepayment, 50% on acceptance."),
},
{
q: t("Wie schnell können Sie starten?", "How quickly can you start?"),
a: t("Üblicherweise innerhalb von 1–5 Werktagen nach Bezahlung. Die genaue Timeline steht in der Technischen Aufgabe vor der Bezahlung. Bei Dringlichkeit (Same-Day, Wochenende, Feiertag) gilt der Express-Aufschlag des Pricers.", "Usually within 1–5 business days after payment. The exact timeline is in the technical specification before you pay. For urgent jobs (same-day, weekend, holiday) the pricer's express surcharge applies."),
},
{
q: t("Was passiert, wenn ich mit der Arbeit nicht zufrieden bin?", "What happens if I'm not satisfied with the work?"),
a: t("Im Festpreis enthalten sind bis zu 2 kleine Anpassungen (Texte, Farben, kleine UI-Korrekturen). Fundamentale Probleme klären wir an einem gemeinsamen Termin. Garantie: 30 Tage kostenfreie Bug-Behebung nach Abnahme. Bei nicht-erfüllbarer Spec gibt es die Vorauskasse anteilig zurück.", "Up to 2 small adjustments are included in the fixed price (text, colors, minor UI fixes). We clarify fundamental issues in a joint meeting. Guarantee: 30 days of free bug fixes after acceptance. If the spec turns out to be unworkable, the prepayment is refunded pro-rata."),
},
{
q: t("Bieten Sie auch Wartung / Support nach der Übergabe?", "Do you also offer maintenance / support after handover?"),
a: t("Auf Anfrage. Eigene Wartungs-Verträge ab CHF 200/Monat (deckt monatliche Updates, Monitoring, kleinere Anpassungen). Reine Bug-Fixes sind 30 Tage kostenfrei. Größere Erweiterungen werden als separate Bestellung über den Pricer neu kalkuliert.", "On request. Maintenance contracts from CHF 200/month (covers monthly updates, monitoring, minor adjustments). Pure bug fixes are free for 30 days. Larger extensions are re-quoted as a separate order via the pricer."),
},
];
function FAQ() {
const [openIdx, setOpenIdx] = useState(null);
return React.createElement(
"section",
{
id: "faq",
className: "wrap",
style: { paddingTop: 80, paddingBottom: 80, borderTop: "1px solid var(--line, #2a2620)" },
},
React.createElement(
"div",
{
style: {
fontFamily: "var(--mono)",
fontSize: 10,
letterSpacing: "0.16em",
color: "var(--gold, #d9a441)",
marginBottom: 12,
textTransform: "uppercase",
},
},
"FAQ"
),
React.createElement(
"h2",
{ className: "h-section", style: { marginBottom: 12 } },
t("Häufige Fragen.", "Common Questions.")
),
React.createElement(
"p",
{
style: {
color: "var(--ink-dim)",
fontSize: 16,
maxWidth: 720,
marginBottom: 36,
lineHeight: 1.6,
},
},
t("Antworten auf die zehn Fragen, die Kunden vor jeder Beauftragung stellen. Wenn etwas fehlt — fragen Sie direkt im Chat oder buchen Sie ein 30-Minuten-Gespräch.", "Answers to the ten questions clients ask before every engagement. If anything is missing — ask directly in the chat or book a 30-minute conversation.")
),
React.createElement(
"div",
{ style: { maxWidth: 860 } },
FAQ_ITEMS.map((item, i) => {
const isOpen = openIdx === i;
return React.createElement(
"div",
{
key: i,
style: {
borderTop: i === 0 ? "1px solid var(--line, #2a2620)" : "none",
borderBottom: "1px solid var(--line, #2a2620)",
},
},
React.createElement(
"button",
{
type: "button",
onClick: () => setOpenIdx(isOpen ? null : i),
style: {
display: "flex",
alignItems: "center",
justifyContent: "space-between",
width: "100%",
padding: "18px 4px",
background: "transparent",
border: "none",
cursor: "pointer",
textAlign: "left",
color: "var(--ink)",
fontSize: 16,
fontWeight: 600,
fontFamily: "inherit",
transition: "color .15s",
},
},
React.createElement("span", { style: { flex: 1, paddingRight: 16 } }, item.q),
React.createElement(
"span",
{
style: {
fontSize: 20,
color: "var(--gold, #d9a441)",
fontFamily: "var(--mono)",
transition: "transform .2s",
transform: isOpen ? "rotate(45deg)" : "rotate(0deg)",
display: "inline-block",
},
},
"+"
)
),
isOpen &&
React.createElement(
"div",
{
style: {
padding: "0 4px 18px 4px",
color: "var(--ink-dim)",
fontSize: 14,
lineHeight: 1.7,
},
},
item.a
)
);
})
),
// FAQPage JSON-LD schema injected once mounted
React.createElement("script", {
type: "application/ld+json",
dangerouslySetInnerHTML: {
__html: JSON.stringify({
"@context": "https://schema.org",
"@type": "FAQPage",
mainEntity: FAQ_ITEMS.map((it) => ({
"@type": "Question",
name: it.q,
acceptedAnswer: { "@type": "Answer", text: it.a },
})),
}),
},
})
);
}
// ===== TESTIMONIALS — automatischer Endlos-Slider =====
function Testimonials() {
const items = [
{
quote: t("Maksym hält, was er verspricht — und zwar schneller als erwartet. Es kam alles genau so, wie vereinbart. Keine bösen Überraschungen, was bei einem grossen Unternehmen fast immer der Fall ist (laut meiner Erfahrung). Hier aber — keine versteckten Kosten. Genau das, was man von einem Profi erwartet.", "Maksym delivers what he promises — and faster than expected. Everything came exactly as agreed. No nasty surprises, which is almost always the case with a big company (in my experience). But here — no hidden costs. Exactly what you expect from a professional."),
name: "René",
role: "Realtreat",
initial: "R",
},
{
quote: t("Ich hatte einen Arbeitsablauf, der mich jede Woche Stunden gekostet hat. Maksym hat das mit einer Automatisierung gelöst, die einfach läuft. Er versteht sowohl die Technik als auch das eigentliche Geschäft dahinter — diese Kombination ist selten.", "I had a workflow that cost me hours every week. Maksym solved it with an automation that just runs. He understands both the technology and the actual business behind it — that combination is rare."),
name: "Olexandr",
role: t("Einzelunternehmer, Musiker", "Sole proprietor, musician"),
initial: "O",
},
{
quote: t("Was ich an der Zusammenarbeit mit Maksym schätze: Er erklärt komplizierte Dinge so, dass man sie wirklich versteht — ohne Fachchinesisch. Man weiß immer, woran man ist und was als Nächstes kommt. Coole Kommunikation, Danke Max.", "What I appreciate about working with Maksym: he explains complicated things so you really understand them — no jargon. You always know where you stand and what comes next. Great communication, thanks Max."),
name: "Alina",
role: t("Künstlerin, EU", "Artist, EU"),
initial: "A",
},
{
quote: t("Am Ende zählt das Resultat — und das hat gestimmt. Die Lösung von Maksym spart uns spürbar Zeit im Alltag, und die Investition hat sich schnell gerechnet. Klare Empfehlung.", "In the end what counts is the result — and it was right. Maksym's solution noticeably saves us time day to day, and the investment paid off quickly. Clear recommendation."),
name: "GvB",
role: "CEO, Anaptanium AG",
initial: "G",
},
{
quote: t("Maksym arbeitet nicht einfach eine Liste ab — er denkt mit. Er hat Vorschläge gemacht, auf die ich selbst nicht gekommen wäre, und dabei immer mein Budget im Blick behalten. Unkompliziert, ehrlich, professionell. Kann ihn nur empfehlen — von solchen müsste es mehr geben. 😊", "Maksym doesn't just work through a list — he thinks along. He made suggestions I wouldn't have come up with myself, always keeping my budget in mind. Straightforward, honest, professional. I can only recommend him — we need more people like him. 😊"),
name: "Liana",
role: "CEO, Dictys Holding Ltd",
initial: "L",
},
];
const card = (t, key) =>
React.createElement(
"div",
{
key: key,
style: {
flex: "0 0 360px",
width: 360,
marginRight: 18,
padding: "24px 24px 20px 24px",
borderRadius: 14,
background: "var(--bg-elev, #14110c)",
border: "1px solid var(--line, #2a2620)",
display: "flex",
flexDirection: "column",
gap: 16,
boxSizing: "border-box",
},
},
React.createElement(
"div",
{ style: { fontFamily: "Georgia, serif", fontSize: 48, color: "var(--gold, #d9a441)", lineHeight: 0.5, height: 24, opacity: 0.55 } },
"\u201C"
),
React.createElement(
"div",
{ style: { color: "var(--ink, #e6e1d5)", fontSize: 14.5, lineHeight: 1.65, flex: 1 } },
t.quote
),
React.createElement(
"div",
{ style: { display: "flex", alignItems: "center", gap: 12, paddingTop: 14, borderTop: "1px solid var(--line, #2a2620)" } },
React.createElement(
"div",
{
style: {
width: 42, height: 42, borderRadius: "50%",
background: "linear-gradient(135deg, #d9a441, #b8862e)",
color: "#1a1408",
display: "flex", alignItems: "center", justifyContent: "center",
fontWeight: 800, fontSize: 18, flex: "0 0 auto",
},
},
t.initial
),
React.createElement(
"div",
null,
React.createElement(
"div",
{ style: { color: "var(--ink)", fontWeight: 700, fontSize: 14 } },
t.name
),
React.createElement(
"div",
{ style: { color: "var(--ink-mute, #9b937e)", fontSize: 12, marginTop: 1 } },
t.role
)
)
)
);
return React.createElement(
"section",
{
id: "testimonials",
style: { paddingTop: 80, paddingBottom: 80, borderTop: "1px solid var(--line, #2a2620)", overflow: "hidden" },
},
React.createElement(
"div",
{ className: "wrap" },
React.createElement(
"div",
{ style: { fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.16em", color: "var(--gold, #d9a441)", marginBottom: 12, textTransform: "uppercase" } },
t("Kundenstimmen", "Testimonials")
),
React.createElement(
"h2",
{ className: "h-section", style: { marginBottom: 12 } },
t("Was Kunden über die Zusammenarbeit sagen.", "What clients say about working with me.")
),
React.createElement(
"p",
{ style: { color: "var(--ink-dim)", fontSize: 16, maxWidth: 720, marginBottom: 0, lineHeight: 1.6 } },
t("Echte Rückmeldungen von Menschen, mit denen Maksym gearbeitet hat — über Verlässlichkeit, Technik-Know-how und das, was am Ende zählt: das Ergebnis.", "Real feedback from people Maksym has worked with — about reliability, technical know-how, and what ultimately matters: the result.")
)
),
React.createElement(
"div",
{
className: "tm-marquee",
style: {
marginTop: 36,
overflow: "hidden",
WebkitMaskImage: "linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)",
maskImage: "linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)",
},
},
React.createElement(
"div",
{ className: "tm-track", style: { display: "flex", width: "max-content", alignItems: "stretch" } },
items.map((t, i) => card(t, "a" + i)),
items.map((t, i) => card(t, "b" + i))
)
),
React.createElement("style", {
dangerouslySetInnerHTML: {
__html:
"@keyframes tmScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}" +
".tm-track{animation:tmScroll 55s linear infinite}" +
".tm-marquee:hover .tm-track{animation-play-state:paused}" +
"@media (max-width:720px){.tm-track{animation-duration:36s}}",
},
})
);
}
// ===== LEAD-MAGNET — KI-Audit-Checkliste mit E-Mail-Capture =====
function LeadMagnet() {
const [email, setEmail] = useState("");
const [name, setName] = useState("");
const [status, setStatus] = useState("idle");
const [errorMsg, setErrorMsg] = useState("");
function emailLooksValid(v) {
var at = v.indexOf("@");
var dot = v.lastIndexOf(".");
return at > 0 && dot > at + 1 && dot < v.length - 1 && v.length < 200;
}
const submit = async (e) => {
e.preventDefault();
if (status === "sending") return;
if (!emailLooksValid(email)) {
setStatus("error"); setErrorMsg(t("Bitte eine gültige E-Mail-Adresse eingeben.", "Please enter a valid email address."));
return;
}
setStatus("sending"); setErrorMsg("");
try {
const r = await fetch("/api/request-audit", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ email: email, name: name, lang: window.__lang || "de" }),
});
const d = await r.json();
if (r.ok && d.ok) { setStatus("done"); }
else { setStatus("error"); setErrorMsg(d.error || t("Etwas ist schiefgelaufen.", "Something went wrong.")); }
} catch (err) {
setStatus("error"); setErrorMsg(t("Netzwerk-Fehler. Bitte später erneut versuchen.", "Network error. Please try again later."));
}
};
return React.createElement(
"section",
{ id: "lead-magnet", className: "wrap", style: { paddingTop: 80, paddingBottom: 80, borderTop: "1px solid var(--line, #2a2620)" } },
React.createElement("div", { style: { maxWidth: 760 } },
React.createElement("div", { style: { fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.16em", color: "var(--gold, #d9a441)", marginBottom: 12, textTransform: "uppercase" } }, t("Kostenlose Checkliste", "Free Checklist")),
React.createElement("h2", { className: "h-section", style: { marginBottom: 12 } }, t("Das 10-Punkte-KI-Audit für Ihr Unternehmen.", "The 10-point AI Audit for your business.")),
React.createElement("p", { style: { color: "var(--ink-dim)", fontSize: 16, lineHeight: 1.6, marginBottom: 24 } }, t("In zehn ehrlichen Fragen finden Sie heraus, wo Künstliche Intelligenz und Automatisierung Ihrem Betrieb am meisten Zeit und Geld sparen — bevor Sie einen Franken investieren. Tragen Sie Ihre E-Mail ein, die Checkliste kommt sofort.", "In ten honest questions you'll find out where AI and automation save your business the most time and money — before you invest a single franc. Enter your email and the checklist comes right away.")),
status === "done"
? React.createElement("div", { style: { padding: "24px 26px", borderRadius: 12, background: "rgba(217,164,65,0.08)", border: "1px solid var(--gold, #d9a441)" } },
React.createElement("div", { style: { fontSize: 17, fontWeight: 700, color: "var(--ink)", marginBottom: 6 } }, t("\u2713 Checkliste unterwegs.", "\u2713 Checklist on its way.")),
React.createElement("div", { style: { fontSize: 14, color: "var(--ink-dim)", lineHeight: 1.55 } }, t("Schauen Sie in Ihr Postfach — die E-Mail mit dem 10-Punkte-KI-Audit ist gerade rausgegangen. Falls nichts ankommt, prüfen Sie bitte den Spam-Ordner.", "Check your inbox — the email with the 10-point AI Audit just went out. If nothing arrives, please check your spam folder."))
)
: React.createElement("form", { onSubmit: submit, style: { display: "flex", flexWrap: "wrap", gap: 10, padding: "22px 24px", borderRadius: 12, background: "var(--bg-elev, #14110c)", border: "1px solid var(--line-strong, #3a3528)" } },
React.createElement("input", { type: "text", value: name, onChange: (e) => setName(e.target.value), placeholder: t("Ihr Name (optional)", "Your name (optional)"), style: { flex: "1 1 180px", padding: "11px 14px", borderRadius: 8, border: "1px solid var(--line-strong, #3a3528)", background: "var(--bg, #0e0c08)", color: "var(--ink)", fontSize: 14, fontFamily: "inherit" } }),
React.createElement("input", { type: "email", value: email, onChange: (e) => setEmail(e.target.value), placeholder: t("ihre@email.ch", "your@email.com"), required: true, "data-required": !email, style: { flex: "2 1 220px", padding: "11px 14px", borderRadius: 8, border: "1px solid var(--line-strong, #3a3528)", background: "var(--bg, #0e0c08)", color: "var(--ink)", fontSize: 14, fontFamily: "inherit" } }),
React.createElement("button", { type: "submit", className: "btn btn-primary btn-arrow", disabled: status === "sending", style: { flex: "1 1 200px", opacity: status === "sending" ? 0.6 : 1, cursor: status === "sending" ? "wait" : "pointer" } }, status === "sending" ? t("Wird gesendet…", "Sending…") : t("Checkliste gratis erhalten", "Get the free checklist")),
status === "error" && React.createElement("div", { style: { flex: "1 1 100%", color: "#ff9999", fontSize: 13, marginTop: 4 } }, errorMsg),
React.createElement("div", { style: { flex: "1 1 100%", color: "var(--ink-mute, #9b937e)", fontSize: 11, marginTop: 6, lineHeight: 1.5 } }, t("Kein Spam, keine Weitergabe. Sie erhalten die Checkliste und gelegentlich — wenn überhaupt — einen kurzen, nützlichen Hinweis. Abmeldung jederzeit.", "No spam, no sharing. You get the checklist and — occasionally, if at all — a short useful note. Unsubscribe anytime."))
)
)
);
}
global.HowIWork = HowIWork;
global.FAQ = FAQ;
global.Testimonials = Testimonials;
global.LeadMagnet = LeadMagnet;
})(window);