// Getfiit DS Landing — nav + hero
// Reads theme + copy + visibility from window.GfCtx (React Context).
const GfCtx = React.createContext(null);
window.GfCtx = GfCtx;
const useGf = () => React.useContext(GfCtx);
// ─────────── NAV ───────────
function GfNav({ waLink }) {
const { t, copy, bp } = useGf();
const { isMobile } = bp;
return (
);
}
function WhatsappGlyph({ size = 16, ink = '#0A1100' }) {
return (
);
}
// ─────────── HERO ───────────
// Layouts: 'split' (panel right), 'stacked' (panel below), 'centered' (text only, no panel)
const CYCLING_WORDS = ['meal', 'weight', 'workout'];
function GfHero({ waLink }) {
const { t, copy, tweaks, bp } = useGf();
const { isMobile, isTablet } = bp;
const layout = tweaks.heroLayout;
const [wordIdx, setWordIdx] = React.useState(0);
const [visible, setVisible] = React.useState(true);
React.useEffect(() => {
const id = setInterval(() => {
setVisible(false);
setTimeout(() => {
setWordIdx(i => (i + 1) % CYCLING_WORDS.length);
setVisible(true);
}, 300);
}, 5000);
return () => clearInterval(id);
}, []);
const [titleA, titleB, titleC] = splitTitle(copy.heroTitle, copy.heroAccent);
const cycleMatch = titleA.match(/^(.*?)(meal|weight|workout)(.*)$/i);
const heroPadding = isMobile
? '40px 20px 48px'
: isTablet
? '60px 32px 48px'
: '80px 48px 64px';
const titleEl = (
{cycleMatch ? (
<>
{cycleMatch[1].trim()}
{CYCLING_WORDS[wordIdx]}
{cycleMatch[3]}
) : <>{titleA}}
{titleB}{titleC && ' '}
{titleC}
);
const subEl = (
{copy.heroSub}
);
const ctasEl = (
);
const qrEl = (
SCAN TO START
Open WhatsApp on your phone
);
const statsEl = (
);
// Layout assembly
if (layout === 'centered') {
return (
GETFIIT · LIVE COACH
{titleEl}
{subEl}
{ctasEl}
{!isMobile && qrEl}
{statsEl}
);
}
if (layout === 'stacked') {
return (
GETFIIT · LIVE COACH
{titleEl}
{subEl}
{ctasEl}
{!isMobile && qrEl}
{statsEl}
{!isMobile &&
}
);
}
// split — mobile: stacked text only; tablet: stacked text + chat panel below; desktop: side-by-side
if (isMobile) {
return (
GETFIIT · LIVE COACH
{titleEl}
{subEl}
{ctasEl}
{statsEl}
);
}
if (isTablet) {
return (
GETFIIT · LIVE COACH
{titleEl}
{subEl}
{ctasEl}
{qrEl}
{statsEl}
);
}
return (
GETFIIT · LIVE COACH
{titleEl}
{subEl}
{ctasEl}
{qrEl}
{statsEl}
);
}
// Splits "Log a meal\nin 5 seconds." into [lineA, lineB, accent]
// where accent is the trailing user-supplied phrase.
function splitTitle(full, accent) {
if (!full) return ['', '', accent || ''];
let main = full;
if (accent) {
const lc = full.toLowerCase();
const ai = lc.lastIndexOf(accent.toLowerCase());
if (ai >= 0) main = full.slice(0, ai).trim();
}
const parts = main.split('\n').map(s => s.trim()).filter(Boolean);
if (parts.length >= 2) return [parts[0], parts.slice(1).join(' '), accent || ''];
const words = main.split(/\s+/);
if (words.length > 3) {
const half = Math.ceil(words.length / 2);
return [words.slice(0, half).join(' '), words.slice(half).join(' '), accent || ''];
}
return ['', main, accent || ''];
}
function HeroStat({ value, label }) {
const { t, bp } = useGf();
const { isMobile } = bp;
return (
);
}
function HeroChatPanel() {
const { t } = useGf();
return (
[ MEAL PHOTO ]
lunch 🥗
Logged: Greek salad + grilled chicken
Solid choice. You're at 62% of today's protein — aim for fish or eggs at dinner.
ok 👍
);
}
function UserBubble({ children, compact }) {
const { t } = useGf();
return (
{children}
);
}
function CoachBubble({ children }) {
const { t } = useGf();
return (
{children}
);
}
function BubbleMeta({ time, sent }) {
const { t } = useGf();
return (
);
}
function MiniRing({ value, suffix, color, pct }) {
const { t } = useGf();
const size = 44, stroke = 3;
const r = (size - stroke) / 2;
const c = 2 * Math.PI * r;
const off = c - (pct / 100) * c;
return (
);
}
window.GfNav = GfNav;
window.GfHero = GfHero;
window.WhatsappGlyph = WhatsappGlyph;
window.useGf = useGf;