// Octocrew tweaks — controls hero variant, density, headline, founder tone
// Gated to pages that opt in with ; otherwise no-op.
if (!document.body.hasAttribute('data-tweakable')) {
// eslint-disable-next-line no-console
console.log('[tweaks] page is not tweakable; skipping');
} else {
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"headline": "primary",
"heroVariant": "split",
"density": "default",
"tone": "matter-of-fact"
}/*EDITMODE-END*/;
const HEADLINES = {
primary: {
h1: 'Three agents. Four weeks. $10–15k/mo of ops cost replaced.',
sub: "A coordinated crew of agents that runs your daily ops — support, e-commerce, ads, email — across the stack you already have. Drafts the work. You approve in Slack. Built on a real D2C brand running it for 90+ days."
},
replace: {
h1: 'Replace your underperforming layer. Keep the team you love.',
sub: "A coordinated crew of agents that frees your team from click-work — drafting tickets, scraping KPIs, building campaigns from scratch. Live in 4 weeks. Approve every move in Slack."
},
connective: {
h1: 'The connective tissue between your store, your inbox, your ads, and your support.',
sub: "Native AI tools optimize one platform. They don't talk to each other. We're the layer that does — workflows that span your stack and report back in one Slack thread."
},
outlives: {
h1: 'Your ops layer outlives your team.',
sub: "Headcount churns. The agents don't. A coordinated layer that drafts tickets, watches inventory, surfaces anomalies, and ships campaigns — under your approval, every time."
}
};
const TONE_TWEAKS = {
// matter-of-fact: leave defaults
'matter-of-fact': {
proofLead: 'Running today on a real D2C brand. Not a pilot. Not a slide. The fleet has been processing tickets, surfacing anomalies, and drafting campaigns for 90+ days before we offered it to anyone else.',
finalSub: "30-min discovery call. We'll walk through your stack and tell you whether it's a fit. No deck."
},
sharper: {
proofLead: 'This isn\u2019t a pilot. A real D2C brand has been running this fleet for 90+ days. 250+ tickets a month. One attribution bug humans missed for months, caught. Campaigns from a Slack brief in 30 seconds.',
finalSub: "30 minutes. We pull up your stack on the call and tell you, on the spot, whether it\u2019s a fit. No deck. No follow-up sequence."
},
drier: {
proofLead: 'Boring on purpose. A real D2C brand runs this fleet today. Ticket drafts, daily pulses, anomaly callouts — the workflows your CX lead doesn\u2019t want to do at 9pm on a Sunday.',
finalSub: "30-min call. Your stack, our questions. We\u2019ll tell you whether it\u2019s a fit before the call ends. No follow-ups."
}
};
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
// Apply density to body
React.useEffect(() => {
document.body.dataset.density = t.density;
}, [t.density]);
// Apply hero variant
React.useEffect(() => {
const hero = document.getElementById('hero');
if (hero) hero.dataset.variant = t.heroVariant;
}, [t.heroVariant]);
// Apply headline
React.useEffect(() => {
const h = document.getElementById('hero-headline');
const s = document.getElementById('hero-sub');
if (h && HEADLINES[t.headline]) h.innerHTML = HEADLINES[t.headline].h1;
if (s && HEADLINES[t.headline]) s.textContent = HEADLINES[t.headline].sub;
}, [t.headline]);
// Apply tone
React.useEffect(() => {
const cfg = TONE_TWEAKS[t.tone] || TONE_TWEAKS['matter-of-fact'];
const proof = document.querySelector('.proof .lead-line');
if (proof) proof.innerHTML = cfg.proofLead;
const finalSub = document.querySelector('.final-cta .lead');
if (finalSub) finalSub.textContent = cfg.finalSub;
}, [t.tone]);
return (
setTweak('heroVariant', v)}
/>
setTweak('headline', v)}
/>
setTweak('density', v)}
/>
setTweak('tone', v)}
/>
);
}
const __mount = document.createElement('div');
document.body.appendChild(__mount);
ReactDOM.createRoot(__mount).render();
} // end data-tweakable gate