/* ============================================================
   Speed Assessment — Landing page composer
   Three page-depth variants + sport tweak, via Tweaks panel.
   ============================================================ */

const VARIANTS = {
  oneScreen: { label: 'One-screen', desc: 'Hero + single CTA' },
  midLength: { label: 'Mid-length', desc: 'Hero → 5 tests → proof → CTA' },
  longForm:  { label: 'Long-form',  desc: 'Everything from the PDF' },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "variant": "longForm",
  "sport": "basketball",
  "samplePrefill": false,
  "forceVipUnlock": false,
  "showVipHint": false,
  "showTweaks": false
}/*EDITMODE-END*/;

function useTweaks() {
  const [tweaks, setTweaks] = React.useState(TWEAK_DEFAULTS);
  React.useEffect(() => {
    const handler = (e) => {
      if (!e.data) return;
      if (e.data.type === '__activate_edit_mode') setTweaks(t => ({ ...t, showTweaks: true }));
      if (e.data.type === '__deactivate_edit_mode') setTweaks(t => ({ ...t, showTweaks: false }));
    };
    window.addEventListener('message', handler);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', handler);
  }, []);
  const update = (patch) => {
    const next = { ...tweaks, ...patch };
    setTweaks(next);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*');
  };
  return [tweaks, update];
}

function LandingPage() {
  const [tweaks, setTweaks] = useTweaks();
  const { variant, sport, showTweaks, samplePrefill, forceVipUnlock, showVipHint } = tweaks;

  const demo = (
    <TryItNow
      sport={sport}
      samplePrefill={samplePrefill}
      showVipHint={showVipHint}
      forceVipUnlock={forceVipUnlock}
    />
  );

  return (
    <div>
      <Nav sport={sport} />
      <Hero sport={sport} />

      {variant === 'oneScreen' && (
        <>
          {demo}
          <TrustStrip />
          <CTA compact />
          <Footer />
        </>
      )}

      {variant === 'midLength' && (
        <>
          {demo}
          <TrustStrip />
          <Tests sport={sport} />
          <CaseStudy />
          <CTA />
          <Footer />
        </>
      )}

      {variant === 'longForm' && (
        <>
          {demo}
          <TrustStrip />
          <Mistakes />
          <Tests sport={sport} />
          <CaseStudy />
          <Coach />
          <SevenDay />
          <CTA />
          <Footer />
        </>
      )}

      {showTweaks && <TweaksPanel tweaks={tweaks} setTweaks={setTweaks} />}
    </div>
  );
}

function TweaksPanel({ tweaks, setTweaks }) {
  return (
    <div style={{
      position: 'fixed', right: 24, bottom: 24, zIndex: 100,
      background: '#0a0a0a', color: '#fff',
      border: '1px solid rgba(255,255,255,0.1)',
      borderRadius: 14,
      padding: 20, minWidth: 260, maxWidth: 300,
      maxHeight: 'calc(100vh - 48px)', overflowY: 'auto',
      boxShadow: '0 20px 50px rgba(0,0,0,0.35)',
      fontFamily: 'var(--font-body)',
    }}>
      <div style={{
        fontFamily: 'var(--font-speed)', fontWeight: 700,
        fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase',
        color: 'var(--p2a-teal)', marginBottom: 14,
        display: 'flex', alignItems: 'center', gap: 8,
      }}>
        <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--p2a-orange)' }} />
        Tweaks
      </div>

      <div style={{ marginBottom: 16 }}>
        <div style={{ fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)', fontWeight: 700, marginBottom: 8 }}>Page depth</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
          {Object.entries(VARIANTS).map(([k, v]) => (
            <button key={k} onClick={() => setTweaks({ variant: k })}
              style={{
                background: tweaks.variant === k ? 'rgba(246,147,14,0.15)' : 'transparent',
                border: `1px solid ${tweaks.variant === k ? 'var(--p2a-orange)' : 'rgba(255,255,255,0.08)'}`,
                color: tweaks.variant === k ? 'var(--p2a-orange)' : '#fff',
                padding: '8px 10px', borderRadius: 6, textAlign: 'left',
                fontSize: 12, fontFamily: 'inherit', cursor: 'pointer',
              }}>
              <div style={{ fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.06em', fontSize: 11 }}>{v.label}</div>
              <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.5)', marginTop: 2 }}>{v.desc}</div>
            </button>
          ))}
        </div>
      </div>

      <div>
        <div style={{ fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)', fontWeight: 700, marginBottom: 8 }}>Featured sport</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 4 }}>
          {Object.entries(SPORTS).map(([k, s]) => (
            <button key={k} onClick={() => setTweaks({ sport: k })}
              style={{
                background: tweaks.sport === k ? 'rgba(255,255,255,0.08)' : 'transparent',
                border: `1px solid ${tweaks.sport === k ? s.accent : 'rgba(255,255,255,0.08)'}`,
                color: tweaks.sport === k ? s.accent : '#fff',
                padding: '8px 4px', borderRadius: 6,
                fontSize: 10, fontWeight: 700, fontFamily: 'inherit', cursor: 'pointer',
                textTransform: 'uppercase', letterSpacing: '0.08em',
              }}>
              {s.label}
            </button>
          ))}
        </div>
      </div>

      <div style={{ marginTop: 16, paddingTop: 16, borderTop: '1px solid rgba(255,255,255,0.08)' }}>
        <div style={{ fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)', fontWeight: 700, marginBottom: 8 }}>Live demo</div>
        {[
          { k: 'samplePrefill',  label: 'Pre-fill sample result',   desc: 'Show a live gauge on load' },
          { k: 'forceVipUnlock', label: 'Unlock VIP tests',         desc: 'Skip the paywall for the demo' },
          { k: 'showVipHint',    label: 'Show VIP code hint',       desc: '"Try code: VIPSKOOL"' },
        ].map(opt => (
          <button key={opt.k} onClick={() => setTweaks({ [opt.k]: !tweaks[opt.k] })}
            style={{
              display: 'flex', alignItems: 'center', gap: 10,
              width: '100%', textAlign: 'left',
              background: 'transparent',
              border: '1px solid rgba(255,255,255,0.08)',
              borderRadius: 6, padding: '8px 10px', marginBottom: 4,
              color: '#fff', fontFamily: 'inherit', cursor: 'pointer',
            }}>
            <span style={{
              width: 14, height: 14, borderRadius: 3, flexShrink: 0,
              border: `1px solid ${tweaks[opt.k] ? 'var(--p2a-teal)' : 'rgba(255,255,255,0.2)'}`,
              background: tweaks[opt.k] ? 'var(--p2a-teal)' : 'transparent',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 9, fontWeight: 900, color: '#0a0a0a',
            }}>{tweaks[opt.k] ? '✓' : ''}</span>
            <span>
              <span style={{ display: 'block', fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.06em' }}>{opt.label}</span>
              <span style={{ display: 'block', fontSize: 10, color: 'rgba(255,255,255,0.5)', marginTop: 2 }}>{opt.desc}</span>
            </span>
          </button>
        ))}
      </div>
    </div>
  );
}

window.LandingPage = LandingPage;