// CREST Guided Tour — main shell + cards + deep-dive panel.
// Owns layout, navigation, gestures, and renders module mocks from tour-mocks.jsx.

const { useState, useEffect, useRef, useMemo, useCallback } = React;

const TourTheme = window.TOUR_THEME;
const TourCards = window.TOUR_CARDS;
const TourDeep = window.TOUR_DEEP_DIVE;

// ─── Tweaks ──────────────────────────────────────────────────────────────────

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "transition": "slide",
  "tilt": 8,
  "bannerCopy": "New to CREST? Take the 3-min tour →",
  "accent": "blue",
  "tourLength": "full",
  "anim": "lively"
}/*EDITMODE-END*/;

const ACCENTS = {
  blue: { accent: '#3B82F6', accentSoft: 'rgba(59,130,246,0.18)' },
  gold: { accent: '#F59E0B', accentSoft: 'rgba(245,158,11,0.18)' },
  custom: { accent: '#8B5CF6', accentSoft: 'rgba(139,92,246,0.18)' },
};

// ─── Hero (card 1) ───────────────────────────────────────────────────────────

function HeroCard({ card, accent, onAdvance }) {
  return (
    <div className="card card-hero" onClick={onAdvance}>
      <div className="hero-grain" aria-hidden="true"></div>

      <div className="hero-inner">
        <div className="hero-pulse" style={{ animationDelay: '0ms' }}>
          <span className="hero-pulse-ring" style={{borderColor:accent}}></span>
          <span className="hero-pulse-ring delay" style={{borderColor:accent}}></span>
          <img src="assets/crest_logo.png" alt="CREST" className="hero-logo" draggable="false"/>
        </div>

        <div className="hero-chip" style={{ animationDelay: '90ms' }}>
          <span className="hero-chip-dot"></span>
          <span className="hero-chip-label">{card.eyebrow}</span>
          <span className="hero-chip-sep"></span>
          <span className="hero-chip-meta">8 MENUS · ~5 MIN</span>
        </div>

        <h1 className="hero-tagline" style={{ animationDelay: '180ms' }}>
          <span className="hero-tagline-line">See how</span>
          <span className="hero-tagline-line hero-tagline-line-2"><em>CREST</em> works.</span>
        </h1>

        <p className="hero-body" style={{ animationDelay: '260ms' }}>{card.body}</p>

        <button className="hero-cta" style={{ animationDelay: '340ms' }} onClick={onAdvance}>
          <span className="hero-cta-shine" aria-hidden="true"></span>
          <span className="hero-cta-label">Begin tour</span>
          <span className="hero-cta-arrow">
            <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <path d="M5 12h14M13 6l6 6-6 6"/>
            </svg>
          </span>
        </button>

        <div className="hero-foot" style={{ animationDelay: '420ms' }}>
          <span>Tap anywhere</span>
          <span className="hero-foot-dot"></span>
          <span>or use → to advance</span>
        </div>
      </div>
    </div>
  );
}

// ─── Module card (cards 2–5) ─────────────────────────────────────────────────

function ModuleCard({ card, idx, total, tilt, onAdvance, onLearnMore, hasDeepDive }) {
  const Mock = window.MockByKey[card.moduleKey];
  const explainers = (window.TOUR_EXPLAINERS || {})[card.moduleKey] || [];
  const [tabId, setTabId] = useState(explainers[0]?.id);
  const exp = explainers.find(e => e.id === tabId) || explainers[0];
  const isLandscape = !!(window.LANDSCAPE_MODULES && window.LANDSCAPE_MODULES.has(card.moduleKey));
  const isTabless = !!(window.NOTAB_MODULES && window.NOTAB_MODULES.has(card.moduleKey));
  // Rail side is FIXED for landscape (all on the left) so the tablet/rail/logo
  // never flip sides as you page. Portrait keeps its index-based reverse.
  const railSide = isLandscape ? 'rail-left' : (idx % 2 === 1 ? 'rail-right' : 'rail-left');

  // Split a "what" string into (head, body).
  //   1. " — " separator (name — description), head ≤ 40 chars
  //   2. first ". " under 110 chars
  //   3. Fallback — no head, whole string becomes body
  const splitWhat = (s) => {
    if (!s) return [null, null];
    const em = s.indexOf(' — ');
    if (em > 0 && em < 40) {
      return [s.slice(0, em).trim(), s.slice(em + 3).trim()];
    }
    const dot = s.indexOf('. ');
    if (dot > 0 && dot < 110) {
      return [s.slice(0, dot + 1).trim(), s.slice(dot + 1).trim()];
    }
    return [null, s];
  };

  return (
    <div className={`card card-module ${idx % 2 === 1 && !isLandscape ? 'card-module-reverse' : ''} ${isLandscape ? 'card-module-landscape' : ''} ${isLandscape && idx % 2 === 1 ? 'mod-flip' : ''} ${railSide}`}>
      <img
        src="assets/crest_logo.png"
        alt=""
        aria-hidden="true"
        draggable="false"
        className="card-corner-logo"
      />
      <div className="mod-left">
        <div className="mod-eyebrow">
          <span>{card.eyebrow}</span>
          {card.elite && <span className="mod-elite">★ ELITE</span>}
        </div>

        {exp && (
          <div className="mod-exp" key={exp.id}>
            <h2 className="mod-exp-title">{exp.title}</h2>
            {exp.intro && <p className="mod-exp-intro">{exp.intro}</p>}

            {exp.what && exp.what.length > 0 && (
              <div className="mod-exp-cards">
                {exp.what.slice(0, 2).map((w, i) => {
                  const [head, body] = splitWhat(w);
                  return (
                    <div key={i} className={`mod-exp-card ${!head ? 'mod-exp-card-headless' : ''}`}>
                      <div className="mod-exp-card-num">{String(i + 1).padStart(2,'0')}</div>
                      <div className="mod-exp-card-body">
                        {head && <div className="mod-exp-card-head">{head}</div>}
                        {body && <div className="mod-exp-card-sub">{body}</div>}
                      </div>
                    </div>
                  );
                })}
              </div>
            )}

            {exp.note && (
              <div className="mod-exp-note">
                <span className="mod-exp-note-mark">★</span>
                <span>{exp.note}</span>
              </div>
            )}
          </div>
        )}

        <div className="mod-actions">
          {hasDeepDive && (
            <button className="mod-learn" onClick={() => onLearnMore && onLearnMore(card.moduleKey)}>
              <span className="mod-learn-icon">+</span> Learn more
            </button>
          )}
        </div>
      </div>

      <div className="mod-mock-wrap" style={{ '--tilt': `${tilt}deg` }}>
        <div
          className={`mod-mock-stage ${isLandscape ? 'is-landscape' : ''}`}
          onClick={(e)=>e.stopPropagation()}
        >
          {Mock && <Mock onTabChange={setTabId} />}
        </div>
        {!isLandscape && <div className="mod-tap-hint" aria-hidden="true"></div>}
        <div className="mod-mock-glow"></div>
      </div>
    </div>
  );
}

// ─── Finish (card N) ─────────────────────────────────────────────────────────

const FINISH_MENUS = [
  { k: 'HOME',     t: 'Identity'    },
  { k: 'DUGOUT',   t: 'Snapshot'    },
  { k: 'MATCH',    t: 'Live + Past' },
  { k: 'ROSTER',   t: 'Profiles'    },
  { k: 'SQUADS',   t: 'Training'    },
  { k: 'STATS',    t: 'Leaders'     },
  { k: 'INTEL',    t: 'Insights', elite: true },
  { k: 'SETTINGS', t: 'White-label' },
];

function FinishCard({ card, accent, onFinish, onRestart, onStartTest }) {
  return (
    <div className="card card-finish">
      <img
        src="assets/crest_logo.png"
        alt=""
        aria-hidden="true"
        draggable="false"
        className="card-corner-logo"
      />
      <div className="finish-grid">
        <div className="finish-left">
          <div className="finish-eyebrow">
            <span className="finish-eyebrow-dot"></span>
            {card.eyebrow}
          </div>
          <h2 className="finish-title">
            Cricket Intelligence.
            <span className="finish-title-accent"> Redefined.</span>
          </h2>
          <p className="finish-body">
            That's the whole platform — eight menus, one workflow.
            Built for clubs that take their cricket seriously.
          </p>
          <div className="finish-actions">
            <button
              className="finish-cta finish-cta-test"
              onClick={onStartTest}
            >
              <span>★ TAKE THE CERTIFICATION DRILL</span>
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <path d="M5 12h14M13 6l6 6-6 6"/>
              </svg>
            </button>
            <button
              className="finish-cta finish-cta-secondary"
              style={{ background: accent }}
              onClick={onFinish}
            >
              <span>{card.cta || 'LAUNCH CREST'}</span>
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <path d="M5 12h14M13 6l6 6-6 6"/>
              </svg>
            </button>
            <button className="finish-restart" onClick={onRestart}>
              <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <path d="M3 12a9 9 0 0 1 15.5-6.3L21 8M21 3v5h-5"/>
              </svg>
              Restart tour
            </button>
          </div>
          <div className="finish-test-hint">
            ★ Score a live 5-over match end-to-end &amp; earn a shareable badge.
          </div>
        </div>

        <div className="finish-right">
          <div className="finish-map-head">
            <span className="finish-map-label">PLATFORM MAP</span>
            <span className="finish-map-status">
              <span className="finish-map-dot"></span>
              ALL MODULES REVIEWED
            </span>
          </div>
          <div className="finish-map">
            {FINISH_MENUS.map((m, i) => (
              <div key={m.k} className={`finish-tile ${m.elite ? 'finish-tile-elite' : ''}`}>
                <div className="finish-tile-idx">{String(i + 1).padStart(2,'0')}</div>
                <div className="finish-tile-k">{m.k}</div>
                <div className="finish-tile-t">{m.t}</div>
                <svg className="finish-tile-tick" viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                  <path d="M5 13l4 4L19 7"/>
                </svg>
                {m.elite && <span className="finish-tile-elite-mark">★</span>}
              </div>
            ))}
          </div>
          <div className="finish-tagline">— Every ball tells a story.</div>
        </div>
      </div>
    </div>
  );
}

// ─── Deep-Dive Panel ─────────────────────────────────────────────────────────

function DeepDive({ moduleKey, onClose }) {
  const data = TourDeep[moduleKey];
  const sheetRef = useRef(null);

  // Lock scroll on parent while open
  useEffect(() => {
    document.body.classList.add('dd-open');
    return () => document.body.classList.remove('dd-open');
  }, []);

  if (!data) return null;
  return (
    <div className="dd-overlay" onClick={onClose}>
      <div
        className="dd-sheet"
        ref={sheetRef}
        onClick={(e) => e.stopPropagation()}
      >
        <div className="dd-handle"></div>
        <div className="dd-header">
          <div>
            <div className="dd-eyebrow">DEEP DIVE</div>
            <div className="dd-title">
              {data.title}
              {data.elite && <span className="dd-elite">★ ELITE</span>}
            </div>
          </div>
          <button className="dd-close" onClick={onClose} aria-label="Close">✕</button>
        </div>

        <div className="dd-scroll">
          {data.sections.map((sec, i) => (
            <div key={i} className="dd-section">
              <div className="dd-section-head" style={{ '--sec-accent': sec.accent }}>
                <span className="dd-section-name">{sec.name}</span>
                {sec.elite && <span className="dd-elite-pill">★ ELITE</span>}
              </div>
              <div className="dd-features">
                {sec.features.map((f, j) => (
                  <div key={j} className={`dd-feat ${f.highlight ? 'dd-feat-highlight' : ''}`}>
                    <div className="dd-feat-icon" aria-hidden="true">
                      <svg viewBox="0 0 24 24" width="9" height="9" aria-hidden="true">
                        <rect x="7" y="7" width="10" height="10" rx="2" transform="rotate(45 12 12)" fill="currentColor"/>
                      </svg>
                    </div>
                    <div className="dd-feat-body">
                      <div className="dd-feat-name">
                        {f.name}
                        {f.highlight && <span className="dd-avail-chip">AVAILABILITY</span>}
                      </div>
                      <div className="dd-feat-desc">{f.desc}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}
          <div className="dd-bottom-spacer"></div>
        </div>
      </div>
    </div>
  );
}

// ─── Tour Shell ──────────────────────────────────────────────────────────────

function Tour() {
  const [t, setTweak] = window.useTweaks
    ? window.useTweaks(TWEAK_DEFAULTS)
    : [TWEAK_DEFAULTS, () => {}];

  // Resolve effective card list. "full" = all 10 cards. "core" = hero + 4 essentials + finish.
  const cards = useMemo(() => {
    if (t.tourLength === 'core') {
      const coreKeys = ['dashboard', 'match', 'roster', 'intel'];
      return TourCards.filter(c =>
        c.kind !== 'module' || coreKeys.includes(c.moduleKey)
      );
    }
    return TourCards;
  }, [t.tourLength]);

  const [i, setI] = useState(0);
  const [dir, setDir] = useState(1); // 1 forward, -1 back
  const [deepKey, setDeepKey] = useState(null);
  const [finished, setFinished] = useState(false);
  const [testActive, setTestActive] = useState(false);

  const accent = ACCENTS[t.accent || 'blue'].accent;
  const accentSoft = ACCENTS[t.accent || 'blue'].accentSoft;

  // Sub-cards (e.g. Scorebook deep-dive) don't count toward the main
  // progress total. Build a parallel index for counter display.
  // The bottom counter mirrors the "MENU N OF 8" eyebrows: only the eight real
  // menus are numbered. Hero (intro) and finish (outro) are not menus, and
  // deep-dive sub-cards inherit their parent menu's number.
  const menuCount = useMemo(
    () => cards.filter(c => c.kind === 'module' && !c.sub).length,
    [cards]
  );
  const counterIndex = useMemo(() => {
    let n = 0;
    return cards.map(c => {
      if (c.kind === 'module' && !c.sub) n += 1;
      return n;
    });
  }, [cards]);

  const go = useCallback((next) => {
    if (next < 0 || next >= cards.length) return;
    setDir(next > i ? 1 : -1);
    setI(next);
  }, [i, cards.length]);

  const advance = useCallback(() => {
    if (deepKey) return;
    if (i < cards.length - 1) go(i + 1);
  }, [deepKey, i, cards.length, go]);

  const skip = useCallback(() => {
    setDir(1);
    setI(cards.length - 1); // jump to finish
  }, [cards.length]);

  // Keyboard
  useEffect(() => {
    const onKey = (e) => {
      if (deepKey) {
        if (e.key === 'Escape') setDeepKey(null);
        return;
      }
      if (e.key === 'ArrowRight' || e.key === ' ') { e.preventDefault(); advance(); }
      else if (e.key === 'ArrowLeft') { e.preventDefault(); go(i - 1); }
      else if (e.key === 'Escape') skip();
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [advance, go, i, skip, deepKey]);

  // Touch swipe
  const touchStart = useRef(null);
  const onTouchStart = (e) => { touchStart.current = e.touches[0].clientX; };
  const onTouchEnd = (e) => {
    if (touchStart.current == null) return;
    const dx = e.changedTouches[0].clientX - touchStart.current;
    if (Math.abs(dx) > 50) {
      if (dx < 0) advance();
      else go(i - 1);
    }
    touchStart.current = null;
  };

  if (finished) {
    return (
      <div className="tour-done">
        <div className="tour-done-card">
          <img src="assets/crest_logo.png" alt="CREST" className="tour-done-logo"/>
          <div className="tour-done-text">CREST is loading…</div>
          <div className="tour-done-sub">(In production this would route to the Home screen.)</div>
          <div className="tour-done-actions">
            <button className="tour-done-restart" onClick={() => { setFinished(false); setI(0); }}>
              Restart tour
            </button>
            <a className="tour-done-restart" href="/">Back to site</a>
          </div>
        </div>
      </div>
    );
  }

  const card = cards[i];
  const isModule = card.kind === 'module';
  const isHero = card.kind === 'hero';
  const isFinish = card.kind === 'finish';

  return (
    <div
      className={`tour anim-${t.anim || 'lively'}`}
      style={{
        '--accent': accent,
        '--accent-soft': accentSoft,
      }}
      onTouchStart={onTouchStart}
      onTouchEnd={onTouchEnd}
    >
      <div className="tour-fx" aria-hidden="true">
        <svg className="tfx" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
          {/* Field boundary + pitch — faint wagon-wheel context */}
          <ellipse className="tfx-boundary" cx="960" cy="772" rx="940" ry="610"/>
          <ellipse className="tfx-boundary tfx-boundary-inner" cx="960" cy="772" rx="470" ry="305"/>
          <path className="tfx-pitch" d="M905,772 L1015,772 L1046,1120 L874,1120 Z"/>
          {/* Shot trajectories radiating from the batting point, each tracked by a travelling ball */}
          <g className="tfx-shots">
            <path id="tfxs1" className="tfx-shot" d="M960,772 Q900,460 940,180"/>
            <path id="tfxs2" className="tfx-shot tfx-shot-gold" d="M960,772 Q640,560 380,380"/>
            <path id="tfxs3" className="tfx-shot" d="M960,772 Q520,700 180,620"/>
            <path id="tfxs4" className="tfx-shot" d="M960,772 Q1300,540 1480,360"/>
            <path id="tfxs5" className="tfx-shot tfx-shot-gold" d="M960,772 Q1420,700 1740,600"/>
            <path id="tfxs6" className="tfx-shot" d="M960,772 Q1140,460 1180,200"/>
            {[
              { p: 'tfxs1', d: '9s',  b: '0s'   },
              { p: 'tfxs2', d: '11s', b: '-3s'  },
              { p: 'tfxs3', d: '8s',  b: '-5s'  },
              { p: 'tfxs4', d: '10s', b: '-1.5s'},
              { p: 'tfxs5', d: '12s', b: '-7s'  },
              { p: 'tfxs6', d: '9.5s',b: '-4s'  },
            ].map((s, i) => (
              <circle key={i} className={`tfx-ball ${s.p === 'tfxs2' || s.p === 'tfxs5' ? 'tfx-ball-gold' : ''}`} r="5">
                <animateMotion dur={s.d} begin={s.b} repeatCount="indefinite" calcMode="spline" keyTimes="0;1" keySplines="0.25 0 0.4 1">
                  <mpath href={`#${s.p}`}/>
                </animateMotion>
                <animate attributeName="opacity" values="0;0.9;0.9;0" keyTimes="0;0.15;0.7;1" dur={s.d} begin={s.b} repeatCount="indefinite"/>
              </circle>
            ))}
          </g>
        </svg>
      </div>

      {/* Top bar — progress dots + skip */}
      <div className="tour-top">
        <div className="tour-progress">
          {cards.map((c, j) => (
            <button
              key={j}
              className={`tour-dot ${c.sub ? 'tour-dot-sub' : ''} ${j === i ? 'active' : ''} ${j < i ? 'done' : ''}`}
              onClick={() => go(j)}
              aria-label={`Go to card ${j + 1}`}
            />
          ))}
        </div>
        {!isFinish && (
          <button className="tour-skip" onClick={skip}>
            SKIP <span aria-hidden>›</span>
          </button>
        )}
      </div>

      {/* Card stack — slide / fade / flip */}
      <div className={`tour-stage tour-trans-${t.transition || 'slide'}`}>
        <div
          className="tour-track"
          style={
            t.transition === 'slide'
              ? { transform: `translate3d(${-i * 100}%, 0, 0)` }
              : t.transition === 'flip'
              ? { transform: 'none', position: 'relative' }
              : { transform: 'none' }
          }
        >
        {cards.map((c, j) => {
          const offset = j - i;
          let style;
          if (t.transition === 'fade') {
            style = { opacity: offset === 0 ? 1 : 0, pointerEvents: offset === 0 ? 'auto' : 'none' };
          } else if (t.transition === 'flip') {
            style = {
              position: 'absolute', inset: 0,
              transform: `translate3d(${offset * 8}%, 0, 0) rotateY(${offset * -45}deg) scale(${offset === 0 ? 1 : 0.85})`,
              opacity: Math.abs(offset) > 1 ? 0 : 1,
              pointerEvents: offset === 0 ? 'auto' : 'none',
              zIndex: 100 - Math.abs(offset),
            };
          } else {
            // slide — track handles X, slot stays in flow
            style = {
              opacity: Math.abs(offset) > 1 ? 0 : 1,
              pointerEvents: offset === 0 ? 'auto' : 'none',
            };
          }
          return (
            <div
              key={c.id}
              className="tour-slot"
              style={style}
              data-active={offset === 0 ? '' : undefined}
              aria-hidden={offset !== 0}
              {...(offset !== 0 ? { inert: '' } : {})}
            >
              {c.kind === 'hero' && (
                <HeroCard card={c} accent={accent} onAdvance={advance} />
              )}
              {c.kind === 'module' && (
                <ModuleCard
                  card={c}
                  idx={j}
                  total={cards.length}
                  tilt={t.tilt}
                  onAdvance={advance}
                  onLearnMore={(k) => setDeepKey(k)}
                  hasDeepDive={!!(TourDeep[c.moduleKey])}
                />
              )}
              {c.kind === 'finish' && (
                <FinishCard
                  card={c}
                  accent={accent}
                  onFinish={() => { window.location.href = '/'; }}
                  onRestart={() => { setDir(-1); setI(0); }}
                  onStartTest={() => setTestActive(true)}
                />
              )}
            </div>
          );
        })}
        </div>
      </div>

      {/* Side nav arrows — glass-circle chevrons */}
      <button
        className="tour-nav tour-nav-prev"
        onClick={() => go(i - 1)}
        disabled={i === 0}
        aria-label="Previous card"
      >
        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <path d="M15 6l-6 6 6 6"/>
        </svg>
      </button>
      <button
        className="tour-nav tour-nav-next"
        onClick={advance}
        disabled={i >= cards.length - 1}
        aria-label="Next card"
      >
        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <path d="M9 6l6 6-6 6"/>
        </svg>
      </button>

      {/* Bottom — current card # */}
      <div className="tour-bottom">
        <span className="tour-counter">
          {isHero ? (
            <span className="tour-counter-label">INTRO</span>
          ) : isFinish ? (
            <span className="tour-counter-label">COMPLETE</span>
          ) : (
            <React.Fragment>
              {String(counterIndex[i]).padStart(2, '0')} <span className="tour-counter-sep">/</span> {String(menuCount).padStart(2, '0')}
              {card.sub && <span className="tour-counter-sub">· {card.title.toUpperCase()}</span>}
            </React.Fragment>
          )}
        </span>
        {!isHero && !isFinish && i < cards.length - 1 && (
          <span className="tour-hint">tap or swipe →</span>
        )}
      </div>

      {/* Deep dive */}
      {deepKey && (
        <DeepDive moduleKey={deepKey} onClose={() => setDeepKey(null)} />
      )}

      {/* Certification test (fullscreen overlay) */}
      {testActive && window.CrestCertificationTest && (
        <window.CrestCertificationTest onExit={() => setTestActive(false)} />
      )}

      {/* Tweaks panel */}
      {window.TweaksPanel && (
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection title="Tour">
            <window.TweakRadio
              label="Length"
              value={t.tourLength}
              onChange={(v) => setTweak('tourLength', v)}
              options={[{ value: 'core', label: 'Core (6)' }, { value: 'full', label: 'Full (10)' }]}
            />
            <window.TweakSelect
              label="Card transition"
              value={t.transition}
              onChange={(v) => setTweak('transition', v)}
              options={[
                { value: 'slide', label: 'Horizontal slide' },
                { value: 'fade', label: 'Cross-fade' },
                { value: 'flip', label: '3D flip' },
              ]}
            />
            <window.TweakSlider
              label="Mock tilt (°)"
              value={t.tilt}
              min={0}
              max={20}
              step={1}
              onChange={(v) => setTweak('tilt', v)}
            />
            <window.TweakRadio
              label="Animation"
              value={t.anim}
              onChange={(v) => setTweak('anim', v)}
              options={[{ value: 'calm', label: 'Calm' }, { value: 'lively', label: 'Lively' }]}
            />
          </window.TweakSection>
          <window.TweakSection title="Accent">
            <window.TweakRadio
              label="Accent"
              value={t.accent}
              onChange={(v) => setTweak('accent', v)}
              options={[
                { value: 'blue', label: 'Blue' },
                { value: 'gold', label: 'Gold' },
                { value: 'custom', label: 'Violet' },
              ]}
            />
          </window.TweakSection>
          <window.TweakSection title="Entry point">
            <window.TweakText
              label="Banner copy"
              value={t.bannerCopy}
              onChange={(v) => setTweak('bannerCopy', v)}
            />
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </div>
  );
}

window.Tour = Tour;