/* Tutorials — Site A (orange / quiet) */

// ════════════════════════════════════════════════════════════════
//  TUTORIALS LOCK TOGGLE
//  Flip to false once the video library is shot and edited.
// ════════════════════════════════════════════════════════════════
const TUTORIALS_LOCKED = true;

const TUTORIALS_A = [
  {
    id: 'getting-started',
    label: '01 / Getting Started',
    blurb: 'Set Up Ghost on TradingView and Walk Through the Dashboard for the First Time.',
    videos: [
      { id: '', title: 'Add GHOST to Your Chart', length: '— —', desc: 'Search the script, add it to favorites, and accept the disclaimer.' },
      { id: '', title: 'Read the Dashboard in 60 Seconds', length: '— —', desc: 'Push, Score, Status, Signal — what each cell tells you and how to react.' },
    ],
  },
  {
    id: 'the-stack',
    label: '02 / The Confluence Stack',
    blurb: 'Five Layers, Top to Bottom. Why the Order Matters.',
    videos: [
      { id: '', title: 'Push, Score & Status — Top of Stack', length: '— —', desc: 'How direction, agreement, and regime combine to gate every trade.' },
      { id: '', title: 'Bias & Trigger — Bottom of Stack', length: '— —', desc: 'Supply / demand context and the entry trigger bar.' },
      { id: '', title: 'Stacking Confluences for Entries (with Chop Zones + No-Trade ✕)', length: '7:30', desc: 'The full top-to-bottom dashboard read in real time — how Push, Score, Status, and Signal compound, why a yellow Chop Zone collapses the whole stack into a gray ✕, and what a clean stack looks like before you click.' },
    ],
  },
  {
    id: 'live-reads',
    label: '03 / Live Chart Reads',
    blurb: 'Real Charts, Real Reads. See the Framework Applied Bar-By-Bar.',
    videos: [
      { id: '', title: 'BTC 5m — Clean Trending Long', length: '— —', desc: 'A textbook 9/10 buy with full stack alignment.' },
      { id: '', title: 'ES 1h — Chop Zone Veto', length: '— —', desc: 'Why this seemingly clean signal was a stand-down.' },
      { id: '', title: 'EUR/USD 4h — Ghost Signal Early Entry', length: '— —', desc: 'Reading B+ capsules ahead of the main BUY label.' },
    ],
  },
  {
    id: 'advanced',
    label: '04 / Advanced',
    blurb: 'Tutorial Mode, Reversal Reads, and Session Lockout.',
    videos: [
      { id: '', title: 'Tutorial Mode Walkthrough', length: '— —', desc: 'The optional second dashboard with live, contextual explanations.' },
      { id: '', title: 'Reading Volume-Based Reversal Bubbles & Tags', length: '6:00', desc: 'How to size up swing-pivot reversals with the Volume style — what tiny vs huge bubbles tell you about exhaustion, when to switch to Tag style, and how Tag Directional Color speeds up read time.' },
      { id: '', title: 'Using the Session Lockout Override', length: '5:45', desc: 'When (and when not) to override an active 🔒 LOCKOUT window — how to read the active session reason, the small set of contexts where an override is justified, and the playbook for sizing down if you ever do.' },
    ],
  },
];

function VideoCard({ v }) {
  const hasId = v.id && v.id.trim();
  return (
    <div className="tut-card">
      <div className="tut-frame">
        {hasId ? (
          <iframe
            src={`https://www.youtube.com/embed/${v.id}`}
            title={v.title}
            frameBorder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowFullScreen
          />
        ) : (
          <div className="tut-placeholder">
            <div className="tut-play">▶</div>
            <div className="tut-placeholder-label">VIDEO COMING SOON</div>
          </div>
        )}
      </div>
      <div className="tut-meta">
        <div className="tut-len">{v.length}</div>
        <h4 className="tut-title">{v.title}</h4>
        <p className="tut-desc">{v.desc}</p>
      </div>
    </div>
  );
}

function Tutorials() {
  return (
    <>
      {TUTORIALS_LOCKED && <StoreLockOverlay config={{
        staticMascot: true,
        eyebrow: 'Coming Soon',
        title: 'Tutorials In Production.',
        deck: 'The Tutorial Library is being filmed and edited right now. Modules drop one at a time as each one is finalized — no drip walls, no paywall.',
        points: [
          'Short, Focused Walkthroughs — Built to Rewatch',
          'Released Module by Module as They Finish',
          'Free to Watch — No Subscription Required',
        ],
        actions: [
          { label: 'Start the Course Free', href: 'course.html', primary: true },
          { label: 'Read the Guide', href: 'guide.html' },
        ],
        foot: 'Tutorials are free forever. We\u2019re building them right.',
      }} />}
      <Nav current="tutorials" />

      <section className="hero" style={{ paddingBottom: 32 }}>
        <div className="hero-eyebrow"><span className="accent">●</span> Video Tutorials</div>
        <h1 style={{ fontSize: 'clamp(36px, 5.5vw, 56px)', margin: '0 0 20px', letterSpacing: '-0.02em', display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
          <span>Watch</span>
          <span className="hero-logo-mark" role="img" aria-label="GHOST"></span>
          <span>In Action.</span>
        </h1>
        <p style={{ color: 'var(--ink-2)', fontSize: 18, maxWidth: 640, lineHeight: 1.6 }}>
          Short, focused videos that walk through the framework on real charts. Pair them with the
          {' '}<a href="guide.html" style={{ color: 'var(--orange)' }}>Guide</a> and
          {' '}<a href="course.html" style={{ color: 'var(--orange)' }}>Learning Edition</a> for the full picture.
        </p>
      </section>

      {TUTORIALS_A.map(mod => (
        <section key={mod.id} className="section" style={{ paddingTop: 32, paddingBottom: 32 }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, flexWrap: 'wrap', marginBottom: 6 }}>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.18em', color: 'var(--orange)', textTransform: 'uppercase' }}>
              {mod.label}
            </div>
          </div>
          <p style={{ color: 'var(--ink-2)', fontSize: 16, maxWidth: 640, margin: '0 0 28px' }}>{mod.blurb}</p>
          <div className="tut-grid">
            {mod.videos.map((v, i) => <VideoCard key={i} v={v} />)}
          </div>
        </section>
      ))}

      <section className="section" style={{ paddingTop: 24 }}>
        <div className="cta-strip">
          <div>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.18em', color: 'var(--orange)', textTransform: 'uppercase', marginBottom: 8 }}>
              MORE COMING
            </div>
            <h3 style={{ fontSize: 24, margin: 0, letterSpacing: '-0.015em' }}>
              New Tutorials Added Regularly.
            </h3>
            <p style={{ color: 'var(--ink-2)', margin: '8px 0 0', fontSize: 15 }}>
              Have a Request? <a href="contact.html" style={{ color: 'var(--orange)' }}>Send a Topic.</a>
            </p>
          </div>
          <a href="course.html" className="btn btn-primary">Open the Course →</a>
        </div>
      </section>

      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<Tutorials />);