/* global React */
const { useEffect, useRef, useState } = React;

/* Reusable miniature product screenshot. Variants render different
   parts of the app pulled into the hero or feature sections. */
function MiniApp({ variant = 'hero', showAnnotation = true, annotationTop = 140 }) {
  return (
    <div className="mini-app">
      <div className="mini-titlebar">
        <div className="mini-traffic"><span/><span/><span/></div>
        <div className="mini-toolbar-cluster">
          <button className="on">Writing</button>
          <button>Review</button>
          <button>Research</button>
        </div>
        <div className="mini-toolbar-cluster" style={{ marginLeft: 8 }}>
          <button>⌘ K</button>
        </div>
      </div>

      <div className="mini-body">
        {/* Navigator */}
        <div className="mini-panel mini-nav">
          <div className="mini-nav-title">Manuscript</div>
          <div className="mini-nav-item"><span className="mini-nav-chev">▸</span>Act I — Landfall</div>
          <div className="mini-nav-item sel"><span className="mini-nav-chev">▾</span>Act II — The Crossing</div>
          <div className="mini-nav-item child">Ch. 07 — Doldrums</div>
          <div className="mini-nav-item child sel">Ch. 08 — The Reckoning</div>
          <div className="mini-nav-item child2"><span className="mini-nav-dot"/>Scene 1</div>
          <div className="mini-nav-item child2"><span className="mini-nav-dot"/>Scene 2</div>
          <div className="mini-nav-item child">Ch. 09 — Albatross</div>
          <div className="mini-nav-item"><span className="mini-nav-chev">▸</span>Act III — Port</div>
          <div style={{ height: 10 }}/>
          <div className="mini-nav-title">Cutting Room</div>
          <div className="mini-nav-item" style={{ color: '#87878F' }}><span className="mini-nav-chev">▸</span>12 scraps</div>
        </div>

        {/* Editor */}
        <div className="mini-panel mini-editor">
          <div className="mini-bread">The Crossing / Act II / Ch. 08 — The Reckoning</div>
          <div className="mini-chap">Chapter 08</div>
          <div className="mini-title">The Reckoning</div>
          <div className="mini-prose">
            <p>By the fourth day the trade winds had collapsed into a kind of <span className="hl-q">prayerful silence</span>, and the sloop lay on the Pacific like a letter unopened. Mara climbed to the foredeck with her notebook and the kettle.</p>
            <p>She had not spoken aloud in six days. The <span className="hl">words on the page were the only ones that mattered now</span> — they had to be, because no one could hear them yet.</p>
            <p>She wrote: <span className="hl-sug">The horizon held the boat the way a cupped hand holds a small bird.</span></p>
            <p>Then she crossed it out, and wrote it again.</p>
          </div>
        </div>

        {/* Inspector */}
        <div className="mini-panel mini-insp">
          <div className="mini-insp-tabs">
            <button className="on">Analysis</button>
            <button>Format</button>
            <button>History</button>
          </div>
          <div className="mini-insp-card">
            <div className="mini-insp-h">Pacing</div>
            <div className="mini-insp-row"><span>Scene tempo</span><span className="m">Andante</span></div>
            <div className="mini-bar"><span style={{ width: '38%' }}/></div>
            <div className="mini-insp-row" style={{ marginTop: 6 }}><span>Dialogue ratio</span><span className="m">12%</span></div>
            <div className="mini-bar"><span style={{ width: '12%' }}/></div>
          </div>
          <div className="mini-insp-card">
            <div className="mini-insp-h">On Page</div>
            <div className="mini-insp-row"><span>Mara</span><span className="m">POV</span></div>
            <div className="mini-insp-row"><span>The sloop</span><span className="m">setting</span></div>
            <div className="mini-insp-row"><span>Silence</span><span className="m">motif</span></div>
          </div>
          <div className="mini-insp-card">
            <div className="mini-insp-h">Themes</div>
            <div className="mini-insp-row"><span>Isolation</span><span className="m">rising</span></div>
            <div className="mini-insp-row"><span>Devotion</span><span className="m">present</span></div>
          </div>
        </div>
      </div>

      {/* Annotation floating in the margin */}
      {showAnnotation && (
        <div className="mini-ann" style={{ top: annotationTop }}>
          <div className="mini-ann-h">
            <span className="mini-ann-dot" style={{ background: '#8AA074' }}/>
            Suggestion · You
          </div>
          <div className="mini-ann-body">Stronger image if the bird isn't "small" — try "trembling."</div>
        </div>
      )}

      <div className="mini-status">
        <span>Ch. 08 · Scene 2</span>
        <span className="mini-status-pill">Saved</span>
        <span className="sp"/>
        <span>2,847 words today</span>
        <span>· Local · M-series</span>
      </div>
    </div>
  );
}

window.MiniApp = MiniApp;