/* global React */ const { useState, useEffect, useRef } = React; // ============================================ // HERO // ============================================ window.Hero = function Hero({ t }) { const [rotatorIdx, setRotatorIdx] = useState(0); useEffect(() => { const i = setInterval(() => { setRotatorIdx(prev => (prev + 1) % t.hero.rotators.length); }, 2200); return () => clearInterval(i); }, [t]); return (
{t.hero.meta.map((m, i) => ( {i > 0 && ◆} {m} ))}

{t.hero.title1}{" "} {t.hero.rotators[rotatorIdx]}
{t.hero.title2}

{t.hero.desc}

{t.hero.cta1} → {t.hero.cta2} ↓
{t.hero.stats.map((s, i) => (
{s.label}
))}
); }; // ============================================ // MARQUEE // ============================================ window.Marquee = function Marquee({ t }) { return (
{[...t.marquee, ...t.marquee].map((m, i) => {m})}
); }; // ============================================ // SERVICE ICONS // ============================================ const SvcIcon = ({ kind }) => { if (kind === "software") return ( ); if (kind === "integrations") return ( ); return ( ); }; // ============================================ // SERVICES // ============================================ window.Services = function Services({ t }) { const kinds = ["software", "integrations", "automation"]; return (
{t.services.tag}

{t.services.title}

{t.services.desc}

{t.services.items.map((s, i) => (
{s.num} / 03 {s.tag}

{s.title}

{s.body}

    {s.list.map((l, j) =>
  • {l}
    • )}
))}
); }; // ============================================ // PROCESS // ============================================ window.Process = function Process({ t }) { return (
{t.process.tag}

{t.process.title}

{t.process.desc}

{t.process.steps.map((s, i) => (
{s.num}
// {s.code}

{s.title}

{s.body}

DURATION {s.dur}
))}
); }; // ============================================ // TECH STACK ICONS // ============================================ const StackIcon = ({ kind }) => { const icons = { react: <>, next: <>, ts: <>, node: <>N, py: <>, pg: <>, openai: <>, anthropic: <>, n8n: <>, aws: <>aws, docker: <>, api: <>API, }; return ( {icons[kind] || icons.api} ); }; window.Stack = function Stack({ t }) { const cells = [ { kind: "react", name: "React" }, { kind: "next", name: "Next.js" }, { kind: "ts", name: "TypeScript" }, { kind: "node", name: "Node.js" }, { kind: "py", name: "Python" }, { kind: "pg", name: "Postgres" }, { kind: "openai", name: "OpenAI" }, { kind: "anthropic", name: "Anthropic" }, { kind: "n8n", name: "n8n" }, { kind: "aws", name: "AWS" }, { kind: "docker", name: "Docker" }, { kind: "api", name: "REST/GraphQL" }, ]; return (
{t.stack.tag}

{t.stack.title}

{t.stack.desc}

{cells.map((c, i) => (
{c.name}
))}
{t.stack.counters.map((c, i) => (
{c.label}
))}
); }; // ============================================ // CTA FINAL + CONTACT // ============================================ window.CtaFinal = function CtaFinal({ t }) { return (
{t.cta.tag}

{t.cta.pre}
{t.cta.mid} {t.cta.accent}
{t.cta.post}

{t.cta.contact.map((c, i) => (
{c.k}
{c.href ? {c.v} :
{c.v}
}
))}
); }; window.Footer = function Footer({ t }) { return ( ); };