// Getfiit DS Landing — body sections
// Reads theme + copy + visibility from window.useGf()

const useGf2 = () => React.useContext(window.GfCtx);

// Surface card style helper
const cardStyle = (t) => ({
  background: t.surface, borderRadius: 20,
  boxShadow: `inset 0 0 0 1px ${t.surfaceLine}`,
});

// Section heading helper
function SectionHeading({ children, max = 800 }) {
  const { t } = useGf2();
  return (
    <h2 style={{
      fontFamily: "'Bricolage Grotesque', Inter, sans-serif",
      fontWeight: 800, fontSize: 'clamp(40px, 5vw, 72px)',
      lineHeight: 0.95, letterSpacing: '-0.03em',
      color: t.text, margin: '20px 0 0', maxWidth: max,
    }}>{children}</h2>
  );
}

// ═══════════════════════════════════════════════════════════
// SECTION: Why no app needed
// ═══════════════════════════════════════════════════════════
function GfNoApp() {
  const { t, copy, bp } = useGf2();
  const { isMobile, isTablet } = bp;
  const { StatusLabel } = window.GF;
  return (
    <section style={{
      padding: isMobile ? '48px 16px' : isTablet ? '64px 32px' : '80px 48px',
      maxWidth: 1320, margin: '0 auto',
    }}>
      <div style={{
        ...cardStyle(t),
        padding: isMobile ? '32px 24px' : isTablet ? '40px 32px' : '64px 56px',
        position: 'relative', overflow: 'hidden',
      }}>
        <StatusLabel>WHY GETFIIT</StatusLabel>
        <div style={{
          marginTop: 20,
          display: 'grid',
          gridTemplateColumns: isMobile || isTablet ? '1fr' : 'minmax(0,1fr) 380px',
          gap: isMobile ? 32 : 64, alignItems: 'center',
        }}>
          <div>
            <h2 style={{
              fontFamily: "'Bricolage Grotesque', Inter, sans-serif",
              fontWeight: 800, fontSize: 'clamp(36px, 6vw, 88px)',
              lineHeight: 0.95, letterSpacing: '-0.03em',
              color: t.text, margin: 0,
            }}>
              {copy.noAppLine1}<br/>
              {copy.noAppLine2}<br/>
              <span style={{ color: t.accent }}>{copy.noAppLine3}</span>
            </h2>
            <p style={{
              fontFamily: 'Inter', fontSize: isMobile ? 16 : 18, lineHeight: 1.55,
              color: t.muted, maxWidth: 520, marginTop: 28,
            }}>{copy.noAppBody}</p>
            <div style={{ marginTop: 28, display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {['Photo logging', 'Voice notes', 'Plain text', 'Macros breakdown', 'Weekly recaps', 'Streak tracking'].map(c => (
                <span key={c} style={{
                  padding: '8px 14px', borderRadius: 999,
                  border: `1px solid ${t.line}`, color: t.muted,
                  fontFamily: 'Inter', fontSize: 13, fontWeight: 500,
                }}>{c}</span>
              ))}
            </div>
          </div>
          <div><ComparisonStack/></div>
        </div>
      </div>
    </section>
  );
}

function ComparisonStack() {
  const { t } = useGf2();
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <div style={{
        background: t.bg, border: `1px solid ${t.line}`,
        borderRadius: 14, padding: 18,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <div>
          <div style={{ fontFamily: 'Inter', fontSize: 11, fontWeight: 600, letterSpacing: '0.12em', color: t.muted, textTransform: 'uppercase' }}>OTHER APPS</div>
          <div style={{ fontFamily: 'Inter', fontSize: 15, fontWeight: 600, color: t.muted, marginTop: 4, textDecoration: 'line-through' }}>
            Sign up · onboard · scan barcode · find food · adjust grams · save…
          </div>
        </div>
        <div style={{
          fontFamily: "'Bricolage Grotesque', Inter, sans-serif",
          fontWeight: 800, fontSize: 22, color: t.muted, fontVariantNumeric: 'tabular-nums',
        }}>3m+</div>
      </div>
      <div style={{
        background: t.surface, border: `1px solid ${t.accent}55`,
        borderRadius: 14, padding: 18,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        boxShadow: `0 0 0 1px ${t.accent}22`,
      }}>
        <div>
          <div style={{ fontFamily: 'Inter', fontSize: 11, fontWeight: 600, letterSpacing: '0.12em', color: t.accentInk, textTransform: 'uppercase' }}>GETFIIT</div>
          <div style={{ fontFamily: 'Inter', fontSize: 15, fontWeight: 600, color: t.text, marginTop: 4 }}>
            Snap. Send. Done.
          </div>
        </div>
        <div style={{
          fontFamily: "'Bricolage Grotesque', Inter, sans-serif",
          fontWeight: 800, fontSize: 36, color: t.accentInk, letterSpacing: '-0.02em', fontVariantNumeric: 'tabular-nums',
        }}>5s</div>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════
// SECTION: Logging methods
// ═══════════════════════════════════════════════════════════
function GfMethods() {
  const { t, copy, bp } = useGf2();
  const { isMobile, isTablet } = bp;
  const { StatusLabel } = window.GF;
  return (
    <section id="log" style={{
      padding: isMobile ? '48px 16px' : isTablet ? '64px 32px' : '80px 48px',
      maxWidth: 1320, margin: '0 auto',
    }}>
      <div style={{
        display: 'flex',
        flexDirection: isMobile ? 'column' : 'row',
        justifyContent: 'space-between',
        alignItems: isMobile ? 'flex-start' : 'flex-end',
        marginBottom: 40, gap: 24, flexWrap: 'wrap',
      }}>
        <div>
          <StatusLabel>LOG IT YOUR WAY</StatusLabel>
          <h2 style={{
            fontFamily: "'Bricolage Grotesque', Inter, sans-serif",
            fontWeight: 800, fontSize: 'clamp(40px, 5vw, 72px)',
            lineHeight: 0.95, letterSpacing: '-0.03em',
            color: t.text, margin: '20px 0 0', maxWidth: 720,
          }}>
            {copy.methodsLine1}<br/><span style={{ color: t.accent }}>{copy.methodsLine2}</span>
          </h2>
        </div>
        <p style={{ fontFamily: 'Inter', fontSize: 16, color: t.muted, maxWidth: 360, lineHeight: 1.55, margin: 0 }}>
          {copy.methodsSub}
        </p>
      </div>

      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : isTablet ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)',
        gap: 20,
      }}>
        <MethodCard n="01" tag="PHOTO" title="Snap your plate." body="Auto-detects portion, ingredients, macros. Even mixed plates." accent="#9DEE2A" visual={<PhotoVisual/>}/>
        <MethodCard n="02" tag="VOICE" title="Just speak it." body="Record a 5-second voice note. Transcribed and logged in real time." accent="#F8A4A0" visual={<VoiceVisual/>}/>
        <MethodCard n="03" tag="TEXT" title="Type a sentence." body={`"2 eggs, toast, black coffee" — that's all the syntax we need.`} accent="#F4B72E" visual={<TextVisual/>}/>
      </div>
    </section>
  );
}

function MethodCard({ n, tag, title, body, accent, visual }) {
  const { t } = useGf2();
  return (
    <div style={{ ...cardStyle(t), padding: 28, display: 'flex', flexDirection: 'column', gap: 24, minHeight: 460 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <span style={{
          fontFamily: 'Inter', fontSize: 11, letterSpacing: '0.12em',
          color: t.muted, fontWeight: 600, textTransform: 'uppercase',
          display: 'inline-flex', alignItems: 'center', gap: 8,
        }}>
          <span style={{ width: 8, height: 8, borderRadius: '50%', background: accent }}/>
          {tag}
        </span>
        <span style={{
          fontFamily: "'Bricolage Grotesque', Inter, sans-serif",
          fontWeight: 800, fontSize: 16, color: t.dim,
        }}>{n}</span>
      </div>
      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{visual}</div>
      <div>
        <h3 style={{
          fontFamily: "'Bricolage Grotesque', Inter, sans-serif",
          fontWeight: 800, fontSize: 28, lineHeight: 1.05,
          letterSpacing: '-0.02em', color: t.text, margin: 0,
        }}>{title}</h3>
        <p style={{ fontFamily: 'Inter', fontSize: 14, lineHeight: 1.5, color: t.muted, margin: '10px 0 0' }}>{body}</p>
      </div>
    </div>
  );
}

function PhotoVisual() {
  const { t } = useGf2();
  return (
    <div style={{
      width: '100%', aspectRatio: '4/3', borderRadius: 12,
      background: t.dark
        ? 'repeating-linear-gradient(135deg, #181818 0 1px, transparent 1px 16px), #050505'
        : 'repeating-linear-gradient(135deg, #E5E2DA 0 1px, transparent 1px 16px), #EFEAE0',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      position: 'relative',
    }}>
      <span style={{ color: t.dim, fontSize: 11, letterSpacing: '0.3em', fontFamily: 'Inter', fontWeight: 500 }}>[ MEAL PHOTO ]</span>
      <div style={{
        position: 'absolute', bottom: 12, left: 12,
        background: `${t.accent}22`, color: t.accentInk,
        padding: '6px 12px', borderRadius: 999,
        fontFamily: 'Inter', fontSize: 12, fontWeight: 700,
        display: 'flex', alignItems: 'center', gap: 6,
      }}>
        <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="6"/></svg>
        AUTO-DETECTED · 480 KCAL
      </div>
    </div>
  );
}

function VoiceVisual() {
  const { t } = useGf2();
  const bars = [4,8,14,22,30,24,16,28,38,30,20,14,24,32,42,30,22,16,10,18,26,18,10,6,4,8,12];
  return (
    <div style={{ width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 2, height: 56 }}>
        {bars.map((h, i) => (
          <div key={i} style={{
            width: 3, height: h, borderRadius: 2,
            background: i < bars.length * 0.6 ? '#F8A4A0' : t.line,
          }}/>
        ))}
      </div>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 10,
        background: t.bg, border: `1px solid ${t.line}`,
        padding: '10px 14px', borderRadius: 999,
      }}>
        <span style={{
          width: 28, height: 28, borderRadius: '50%', background: '#F8A4A0',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <svg width="11" height="13" viewBox="0 0 12 14" fill="#0A1100"><path d="M0 0 L12 7 L0 14 Z"/></svg>
        </span>
        <span style={{ fontFamily: 'Inter', fontSize: 12, fontWeight: 600, color: t.muted, letterSpacing: '0.06em' }}>0:14 · "I had a bowl of greek yogurt…"</span>
      </div>
    </div>
  );
}

function TextVisual() {
  const { t } = useGf2();
  return (
    <div style={{
      background: t.bg, border: `1px solid ${t.line}`,
      borderRadius: 12, padding: 20, width: '100%',
      fontFamily: 'Inter', fontSize: 14, color: t.text, lineHeight: 1.55,
    }}>
      <span style={{ color: t.muted }}>You:</span>{' '}
      2 eggs, toast,<br/>black coffee
      <div style={{ marginTop: 14, paddingTop: 14, borderTop: `1px solid ${t.line}` }}>
        <span style={{ color: t.accentInk, fontWeight: 700 }}>Coach:</span>{' '}
        Logged. <span style={{ fontVariantNumeric: 'tabular-nums', fontWeight: 700 }}>~290 kcal</span>{' '}
        <span style={{ color: t.muted }}>· 18g P · 24g C · 14g F</span>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════
// SECTION: How it works
// ═══════════════════════════════════════════════════════════
function GfHow() {
  const { t, copy, bp } = useGf2();
  const { isMobile, isTablet } = bp;
  const { StatusLabel } = window.GF;
  return (
    <section id="how" style={{
      padding: isMobile ? '48px 16px' : isTablet ? '64px 32px' : '80px 48px',
      maxWidth: 1320, margin: '0 auto',
    }}>
      <StatusLabel>HOW IT WORKS</StatusLabel>
      <h2 style={{
        fontFamily: "'Bricolage Grotesque', Inter, sans-serif",
        fontWeight: 800, fontSize: 'clamp(40px, 5vw, 72px)',
        lineHeight: 0.95, letterSpacing: '-0.03em',
        color: t.text, margin: '20px 0 56px', maxWidth: 800,
      }}>
        {copy.howLine1} <span style={{ color: t.accent }}>{copy.howLine2}</span>
      </h2>
      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : isTablet ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)',
        gap: 24,
      }}>
        <Step n="1" title="Save the number" body="Add Getfiit to WhatsApp. One tap, no signup form, no app store." accent={t.accent}/>
        <Step n="2" title="Tell us your goal" body="Lose weight. Build muscle. Eat better. The coach calibrates from your first message." accent="#9DEE2A"/>
        <Step n="3" title="Just live" body="Log when you remember, ignore when you don't. The coach picks back up from wherever you left off." accent="#F4B72E"/>
      </div>
    </section>
  );
}

function Step({ n, title, body, accent }) {
  const { t } = useGf2();
  return (
    <div style={{ ...cardStyle(t), padding: 32, position: 'relative', minHeight: 280 }}>
      <div style={{
        fontFamily: "'Bricolage Grotesque', Inter, sans-serif",
        fontWeight: 800, fontSize: 120, lineHeight: 0.85,
        letterSpacing: '-0.04em', color: accent,
        fontVariantNumeric: 'tabular-nums',
      }}>{n}</div>
      <div style={{ marginTop: 24 }}>
        <h3 style={{
          fontFamily: "'Bricolage Grotesque', Inter, sans-serif",
          fontWeight: 800, fontSize: 24, letterSpacing: '-0.02em',
          color: t.text, margin: 0,
        }}>{title}</h3>
        <p style={{ fontFamily: 'Inter', fontSize: 15, color: t.muted, lineHeight: 1.55, margin: '10px 0 0' }}>{body}</p>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════
// SECTION: Stories
// ═══════════════════════════════════════════════════════════
function GfStories() {
  const { t, copy, bp } = useGf2();
  const { isMobile, isTablet } = bp;
  const { StatusLabel, Pill } = window.GF;
  const quotes = [
    { number: '–6.4', unit: 'kg', label: '12 WEEKS', name: 'Camille M.', role: 'Product designer',
      quote: '"I was tracking on three different apps. Now I just text my lunch and forget about it."',
      portrait: 'camille', skin: '#E5B499', hair: '#3A2418', accent: '#F8A4A0' },
    { number: '+8', unit: 'kg lean', label: '6 MONTHS', name: 'Marc T.', role: 'Engineer',
      quote: '"The voice-note logging during my commute is the only reason I stayed consistent."',
      portrait: 'marc', skin: '#D6A88A', hair: '#1F1B16', accent: '#9DEE2A' },
    { number: '14', unit: '', label: 'WEEK STREAK', name: 'Aïcha D.', role: 'Nurse',
      quote: '"It feels like texting a friend who happens to know exactly what I need to eat."',
      portrait: 'aicha', skin: '#A8754A', hair: '#1A0F08', accent: '#F4B72E' },
  ];
  return (
    <section id="proof" style={{
      padding: isMobile ? '48px 16px' : isTablet ? '64px 32px' : '80px 48px',
      maxWidth: 1320, margin: '0 auto',
    }}>
      <div style={{
        display: 'flex',
        flexDirection: isMobile ? 'column' : 'row',
        justifyContent: 'space-between',
        alignItems: isMobile ? 'flex-start' : 'flex-end',
        marginBottom: 40, gap: 24, flexWrap: 'wrap',
      }}>
        <div>
          <StatusLabel>STORIES · REAL USERS</StatusLabel>
          <h2 style={{
            fontFamily: "'Bricolage Grotesque', Inter, sans-serif",
            fontWeight: 800, fontSize: 'clamp(40px, 5vw, 72px)',
            lineHeight: 0.95, letterSpacing: '-0.03em',
            color: t.text, margin: '20px 0 0',
          }}>
            {copy.storiesLine1} <span style={{ color: t.accent }}>{copy.storiesLine2}</span>
          </h2>
        </div>
        <Pill icon={<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M12 2 L15 8 L22 9 L17 14 L18 21 L12 18 L6 21 L7 14 L2 9 L9 8 Z"/></svg>}>
          4.8 / 5 · 2,300+ early users
        </Pill>
      </div>
      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : isTablet ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)',
        gap: 24,
      }}>
        {quotes.map((q, i) => <StoryCard key={i} {...q}/>)}
      </div>
    </section>
  );
}

function StoryCard({ number, unit, label, name, role, quote, portrait, skin, hair, accent }) {
  const { t } = useGf2();
  const { StatusLabel } = window.GF;
  return (
    <div style={{ ...cardStyle(t), padding: 28, display: 'flex', flexDirection: 'column', minHeight: 380, gap: 24 }}>
      <StatusLabel>{label}</StatusLabel>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, whiteSpace: 'nowrap' }}>
        <span style={{
          fontFamily: "'Bricolage Grotesque', Inter, sans-serif",
          fontWeight: 800, fontSize: 76, lineHeight: 0.9,
          letterSpacing: '-0.035em', color: t.text,
          fontVariantNumeric: 'tabular-nums',
        }}>{number}</span>
        {unit && <span style={{
          fontFamily: "'Bricolage Grotesque', Inter, sans-serif",
          fontWeight: 800, fontSize: 22, color: t.muted,
        }}>{unit}</span>}
      </div>
      <p style={{ fontFamily: 'Inter', fontSize: 15, lineHeight: 1.55, color: t.muted, margin: 0, flex: 1 }}>{quote}</p>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, paddingTop: 16, borderTop: `1px solid ${t.line}` }}>
        <Portrait kind={portrait} skin={skin} hair={hair} accent={accent}/>
        <div>
          <div style={{ fontFamily: 'Inter', fontSize: 14, fontWeight: 600, color: t.text }}>{name}</div>
          <div style={{ fontFamily: 'Inter', fontSize: 12, color: t.muted }}>{role}</div>
        </div>
      </div>
    </div>
  );
}

// Stylized SVG portraits — placeholders standing in for real user photography.
function Portrait({ kind, skin, hair, accent }) {
  const size = 40;
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" style={{ borderRadius: '50%', flexShrink: 0, display: 'block' }}>
      <defs>
        <clipPath id={`pclip-${kind}`}><circle cx="20" cy="20" r="20"/></clipPath>
      </defs>
      <g clipPath={`url(#pclip-${kind})`}>
        <rect width="40" height="40" fill={accent}/>
        {kind === 'camille' && (
          <g>
            <path d="M2 40 Q2 28 12 26 L28 26 Q38 28 38 40 Z" fill="#1F1F1F"/>
            <rect x="17" y="22" width="6" height="6" fill={skin}/>
            <path d="M8 22 Q8 8 20 8 Q32 8 32 22 L32 28 L28 28 L28 18 Q28 14 20 14 Q12 14 12 18 L12 28 L8 28 Z" fill={hair}/>
            <ellipse cx="20" cy="18" rx="8" ry="9" fill={skin}/>
            <path d="M12 14 Q14 10 20 10 Q26 10 28 14 Q24 13 20 13 Q16 13 12 14 Z" fill={hair}/>
            <circle cx="17" cy="19" r="0.9" fill="#1F1410"/>
            <circle cx="23" cy="19" r="0.9" fill="#1F1410"/>
            <path d="M18 23 Q20 24 22 23" stroke="#A04848" strokeWidth="1" fill="none" strokeLinecap="round"/>
          </g>
        )}
        {kind === 'marc' && (
          <g>
            <path d="M2 40 Q2 28 12 26 L28 26 Q38 28 38 40 Z" fill="#23332A"/>
            <rect x="17" y="22" width="6" height="6" fill={skin}/>
            <path d="M11 16 Q11 9 20 9 Q29 9 29 16 L29 18 Q26 14 20 14 Q14 14 11 18 Z" fill={hair}/>
            <ellipse cx="20" cy="19" rx="8" ry="9" fill={skin}/>
            <path d="M13 22 Q20 28 27 22 Q26 26 20 27 Q14 26 13 22 Z" fill={hair} opacity="0.45"/>
            <circle cx="17" cy="20" r="0.9" fill="#1F1410"/>
            <circle cx="23" cy="20" r="0.9" fill="#1F1410"/>
            <path d="M15 17 L19 17" stroke={hair} strokeWidth="1.2" strokeLinecap="round"/>
            <path d="M21 17 L25 17" stroke={hair} strokeWidth="1.2" strokeLinecap="round"/>
            <path d="M18 24 L22 24" stroke="#7B4848" strokeWidth="1" strokeLinecap="round"/>
          </g>
        )}
        {kind === 'aicha' && (
          <g>
            <path d="M2 40 Q2 28 12 26 L28 26 Q38 28 38 40 Z" fill="#FAFAFA"/>
            <rect x="17" y="22" width="6" height="5" fill={skin}/>
            <path d="M7 20 Q7 6 20 6 Q33 6 33 20 L33 28 Q33 26 30 25 L10 25 Q7 26 7 28 Z" fill="#C68B5C"/>
            <ellipse cx="20" cy="19" rx="7.5" ry="8.5" fill={skin}/>
            <path d="M12 17 Q12 12 20 12 Q28 12 28 17" fill="none" stroke="#A56C42" strokeWidth="0.6" opacity="0.6"/>
            <circle cx="17" cy="20" r="0.9" fill="#1F1410"/>
            <circle cx="23" cy="20" r="0.9" fill="#1F1410"/>
            <path d="M18 24 Q20 25 22 24" stroke="#7B3838" strokeWidth="1" fill="none" strokeLinecap="round"/>
          </g>
        )}
      </g>
      <circle cx="20" cy="20" r="19.5" fill="none" stroke="rgba(0,0,0,0.15)" strokeWidth="0.5"/>
    </svg>
  );
}

// ═══════════════════════════════════════════════════════════
// SECTION: FAQ
// ═══════════════════════════════════════════════════════════
function GfFaq() {
  const { t, copy, bp } = useGf2();
  const { isMobile, isTablet } = bp;
  const { StatusLabel } = window.GF;
  const faqs = [
    { q: 'Do I need to install anything?', a: 'No. Getfiit lives entirely inside WhatsApp. Save the number, and you\'re in.' },
    { q: 'How accurate is photo-based macro detection?', a: 'Within ~10% on most homemade meals. The coach asks one clarifying question if the photo is ambiguous (e.g. "olive oil or butter?").' },
    { q: 'Is my data private?', a: 'End-to-end encrypted in transit via WhatsApp. We store only what you log, and you can wipe everything with one command.' },
    { q: 'What does it cost?', a: 'Free for basic logging and weekly recaps. Premium (€9/month) unlocks custom plans, deeper analysis, and shareable progress cards.' },
    { q: 'Can I track workouts and weight too?', a: 'Yes. Same chat. Send "ran 5k" or "weighed in 78.4" and the coach handles the rest.' },
    { q: 'What if I forget for a few days?', a: 'Nothing happens. The coach picks back up where you left off without guilt-tripping.' },
  ];
  return (
    <section id="faq" style={{
      padding: isMobile ? '48px 16px' : isTablet ? '64px 32px' : '80px 48px',
      maxWidth: 1320, margin: '0 auto',
    }}>
      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile || isTablet ? '1fr' : '380px minmax(0,1fr)',
        gap: isMobile ? 32 : 64, alignItems: 'flex-start',
      }}>
        <div style={{ position: isMobile || isTablet ? 'static' : 'sticky', top: 100 }}>
          <StatusLabel>QUESTIONS</StatusLabel>
          <h2 style={{
            fontFamily: "'Bricolage Grotesque', Inter, sans-serif",
            fontWeight: 800, fontSize: 'clamp(40px, 5vw, 64px)',
            lineHeight: 0.95, letterSpacing: '-0.03em',
            color: t.text, margin: '20px 0 16px',
          }}>{copy.faqHeading}</h2>
          <p style={{ fontFamily: 'Inter', fontSize: 15, color: t.muted, lineHeight: 1.55 }}>
            Real ones from real users.<br/>Ask the coach anything once you start.
          </p>
        </div>
        <div style={{ ...cardStyle(t), padding: isMobile ? '4px 20px' : '8px 32px' }}>
          {faqs.map((f, i) => <FaqItem key={i} {...f} last={i === faqs.length - 1}/>)}
        </div>
      </div>
    </section>
  );
}

function FaqItem({ q, a, last }) {
  const { t, bp } = useGf2();
  const { isMobile } = bp;
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{ borderBottom: last ? 'none' : `1px solid ${t.line}` }}>
      <button onClick={() => setOpen(!open)} style={{
        width: '100%', textAlign: 'left', padding: '24px 0',
        background: 'transparent', border: 'none', cursor: 'pointer',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16,
        fontFamily: "'Bricolage Grotesque', Inter, sans-serif",
        fontWeight: 700, fontSize: isMobile ? 18 : 22, letterSpacing: '-0.015em', color: t.text,
      }}>
        <span>{q}</span>
        <span style={{
          width: 32, height: 32, borderRadius: '50%',
          border: `1px solid ${t.line}`, flexShrink: 0,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: open ? t.accentInk : t.muted,
          transition: 'transform 200ms', transform: open ? 'rotate(45deg)' : 'rotate(0)',
        }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M12 5v14M5 12h14"/></svg>
        </span>
      </button>
      {open && (
        <p style={{ fontFamily: 'Inter', fontSize: 15, color: t.muted, lineHeight: 1.6, margin: 0, padding: '0 0 24px', maxWidth: 720 }}>{a}</p>
      )}
    </div>
  );
}

// ═══════════════════════════════════════════════════════════
// SECTION: Final CTA
// ═══════════════════════════════════════════════════════════
function GfCta({ waLink }) {
  const { t, copy, bp } = useGf2();
  const { isMobile, isTablet } = bp;
  const { StatusLabel } = window.GF;
  const [a, b, c] = splitCtaTitle(copy.ctaTitle, copy.ctaAccent);
  return (
    <section style={{
      padding: isMobile ? '48px 16px' : isTablet ? '64px 32px' : '80px 48px',
      maxWidth: 1320, margin: '0 auto',
    }}>
      <div style={{
        ...cardStyle(t),
        padding: isMobile ? '40px 24px' : isTablet ? '56px 40px' : '80px 56px',
        position: 'relative', overflow: 'hidden',
      }}>
        <CtaConfetti/>
        <div style={{ position: 'relative', zIndex: 2 }}>
          <StatusLabel>READY · APR 2026</StatusLabel>
          <h2 style={{
            fontFamily: "'Bricolage Grotesque', Inter, sans-serif",
            fontWeight: 800, fontSize: 'clamp(44px, 9vw, 144px)',
            lineHeight: 0.9, letterSpacing: '-0.035em',
            color: t.text, margin: '24px 0 0', maxWidth: 1100,
          }}>
            {a}{a && <br/>}{b}{c && ' '}<span style={{ color: t.accent }}>{c}</span>
          </h2>
          <p style={{
            fontFamily: 'Inter', fontSize: isMobile ? 16 : 20,
            color: t.muted, lineHeight: 1.5, marginTop: 28, maxWidth: 580,
          }}>
            {copy.ctaSub}
          </p>
          <div style={{
            marginTop: 48,
            display: 'flex',
            flexDirection: isMobile ? 'column' : 'row',
            alignItems: isMobile ? 'flex-start' : 'center',
            gap: isMobile ? 20 : 32, flexWrap: 'wrap',
          }}>
            <a href={waLink} style={{
              display: 'inline-flex', alignItems: 'center', gap: 12,
              background: t.accent, color: t.onAccent,
              padding: isMobile ? '16px 24px' : '22px 32px', borderRadius: 999,
              fontFamily: 'Inter', fontWeight: 700, fontSize: isMobile ? 16 : 18,
              textDecoration: 'none',
            }}>
              <window.WhatsappGlyph size={isMobile ? 18 : 22} ink={t.onAccent}/>
              {copy.ctaButton}
            </a>
            {!isMobile && (
              <div style={{
                display: 'flex', alignItems: 'center', gap: 16,
                padding: '14px 16px 14px 14px',
                background: t.bg, border: `1px solid ${t.line}`, borderRadius: 16,
              }}>
                <window.GF.RealQrCode size={72}/>
                <div>
                  <div style={{ fontFamily: 'Inter', fontSize: 11, fontWeight: 600, letterSpacing: '0.12em', color: t.muted, textTransform: 'uppercase' }}>SCAN · DESKTOP</div>
                  <div style={{ fontFamily: 'Inter', fontSize: 14, fontWeight: 600, color: t.text, marginTop: 4 }}>Open WhatsApp on your phone</div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function splitCtaTitle(full, accent) {
  if (!full) return ['', '', accent || ''];
  const parts = full.split('\n').map(s => s.trim()).filter(Boolean);
  if (parts.length >= 2) return [parts[0], parts.slice(1).join(' '), accent || ''];
  return ['', full, accent || ''];
}

function CtaConfetti() {
  const colors = ['#C6FF3D', '#F8A4A0', '#F08A2A', '#F4B72E', '#9DEE2A'];
  const pieces = Array.from({ length: 28 }).map((_, i) => {
    const seed = (i * 9301 + 49297) % 233280 / 233280;
    const seed2 = (i * 4321 + 12345) % 23456 / 23456;
    return {
      x: seed * 100, y: seed2 * 100,
      r: (seed - 0.5) * 80,
      c: colors[i % colors.length],
      w: 8 + seed2 * 8, h: 4 + seed * 6,
      o: 0.35 + seed2 * 0.45,
    };
  });
  return (
    <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none"
         style={{ position: 'absolute', inset: 0, opacity: 0.55, zIndex: 1 }}>
      {pieces.map((p, i) => (
        <rect key={i} x={p.x} y={p.y} width={p.w * 0.3} height={p.h * 0.3}
              fill={p.c} opacity={p.o}
              transform={`rotate(${p.r} ${p.x + p.w * 0.15} ${p.y + p.h * 0.15})`} rx="0.3"/>
      ))}
    </svg>
  );
}

// ═══════════════════════════════════════════════════════════
// FOOTER
// ═══════════════════════════════════════════════════════════
function GfFooter() {
  const { t, bp } = useGf2();
  const { isMobile } = bp;
  return (
    <footer style={{
      padding: isMobile ? '32px 20px 48px' : '48px 48px 64px',
      borderTop: `1px solid ${t.line}`,
      maxWidth: 1320, margin: '0 auto',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 24 }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color: t.muted, fontSize: 13, fontFamily: 'Inter' }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: t.dim }}/>
          getfiit · 2026
        </span>
        <div style={{ display: 'flex', gap: isMobile ? 20 : 32, fontSize: 13, color: t.muted, fontFamily: 'Inter' }}>
          <a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>Privacy</a>
          <a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>Terms</a>
          <a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>hello@getfiit.app</a>
        </div>
      </div>
    </footer>
  );
}

window.GfNoApp = GfNoApp;
window.GfMethods = GfMethods;
window.GfHow = GfHow;
window.GfStories = GfStories;
window.GfFaq = GfFaq;
window.GfCta = GfCta;
window.GfFooter = GfFooter;