// Landing / Hero, About, Library, Journal — non-reading screens.

const { useMemo: useMemo_s1, useState: useState_s1, useEffect: useEffect_s1 } = React;

// ────────────────────────────────────────────────────────────────
// Landing
// ────────────────────────────────────────────────────────────────
function LandingScreen({ onBegin, onRoute }) {
  return (
    <div>
      <section className="hero">
        <div className="hero-card-display left-2"><TarotCard card={MAJOR_ARCANA[17]} flipped size="lg"/></div>
        <div className="hero-card-display left"><TarotCard card={MAJOR_ARCANA[1]} flipped size="lg"/></div>
        <div className="hero-card-display right"><TarotCard card={MAJOR_ARCANA[18]} flipped size="lg"/></div>
        <div className="hero-card-display right-2"><TarotCard card={MAJOR_ARCANA[9]} flipped size="lg"/></div>

        <div className="hero-content">
          <span className="eyebrow">An Earnest Tarot Practice</span>
          <h1>The cards know <em>what you almost said.</em></h1>
          <p className="lead">A quiet room. A question you have been carrying. Seventy-eight cards on the table, waiting to be heard.</p>
          <div className="hero-cta">
            <button className="btn primary" onClick={onBegin}>
              Begin a Reading <Sigil name="chevron-right"/>
            </button>
            <button className="btn ghost" onClick={() => onRoute('about')}>How it works</button>
          </div>
        </div>
      </section>

      <div className="container narrow">
        <Divider glyph="mark"/>
        <div className="spacer-md"></div>

        <div className="steps">
          <div className="step">
            <div className="step-glyph"><Sigil name="hermit"/></div>
            <div className="step-numeral">I.</div>
            <h3>Bring the Question</h3>
            <p>Begin not with curiosity but with the thing you cannot stop turning over in your hands.</p>
          </div>
          <div className="step">
            <div className="step-glyph"><Sigil name="shuffle-icon"/></div>
            <div className="step-numeral">II.</div>
            <h3>Shuffle &amp; Cut</h3>
            <p>The deck is shuffled. You will cut it. The cards that surface are the cards that came for you.</p>
          </div>
          <div className="step">
            <div className="step-glyph"><Sigil name="star"/></div>
            <div className="step-numeral">III.</div>
            <h3>Read &amp; Reflect</h3>
            <p>Each card carries its long history. Beneath, a personal reading composed for the question you brought.</p>
          </div>
        </div>

        <Divider glyph="sigil-mark"/>

        <div className="panel" style={{textAlign:'center', marginTop:'2rem'}}>
          <PanelCorners/>
          <span className="eyebrow">A Note from the House</span>
          <h2 style={{marginTop:'1rem'}}>The cards will not predict.</h2>
          <p className="lead" style={{maxWidth:'620px', margin:'1.2rem auto 0'}}>
            They will, however, hold up a clean mirror. What you see is yours. The reader is only here to turn the cards over.
          </p>
        </div>
      </div>
      <div className="spacer-lg"></div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────────
// About / How it works
// ────────────────────────────────────────────────────────────────
function AboutScreen() {
  return (
    <div className="container narrow">
      <div className="center">
        <span className="eyebrow">The Practice</span>
        <h1 style={{marginTop:'1rem'}}>How a Reading Unfolds</h1>
        <p className="lead" style={{margin:'1.4rem auto', maxWidth:'620px'}}>
          Tarot, in this house, is not divination. It is a structured listening — a way of putting your own subconscious on the table, face up.
        </p>
      </div>

      <Divider glyph="mark"/>

      <div className="stack" style={{gap:'2.5rem', marginTop:'2rem'}}>
        <div>
          <h4>· One ·</h4>
          <h3 style={{marginTop:'0.5rem'}}>The Question</h3>
          <p>Tarot favors open questions. <em>"Will I be promoted?"</em> closes the deck. <em>"What is mine to do, here?"</em> opens it. Begin by writing the question you would not say aloud to anyone but yourself.</p>
        </div>
        <div>
          <h4>· Two ·</h4>
          <h3 style={{marginTop:'0.5rem'}}>The Voice</h3>
          <p>Choose the voice that will read to you. Each reader has a temperament — Madame Celeste is patient and warm; Mercury is keen and quick; Brother Silas, monastic and certain. The voice carries the reading aloud, in your earbuds or your study.</p>
        </div>
        <div>
          <h4>· Three ·</h4>
          <h3 style={{marginTop:'0.5rem'}}>The Shuffle</h3>
          <p>The deck is shuffled with intention — your intention. Hold the question in your mind as the cards move. When the deck is ready, you will cut it where you wish.</p>
        </div>
        <div>
          <h4>· Four ·</h4>
          <h3 style={{marginTop:'0.5rem'}}>The Spread</h3>
          <p>The deck holds many shapes. The <em>Career Spread</em> lays five for the working life; <em>Past · Present · Future</em> traces a single line through time; <em>The Celtic Cross</em> opens ten positions for a question that wants the cathedral; <em>The Lovers' Spread</em> reads the field between two; <em>A Single Card</em> answers fast and clean.</p>
        </div>
        <div>
          <h4>· Five ·</h4>
          <h3 style={{marginTop:'0.5rem'}}>Upright &amp; Reversed</h3>
          <p>A card drawn reversed is not a curse. It is the same card under a different light — the shadow of its meaning, the work the card is still doing. Roughly half the cards will fall reversed; this is the deck's intelligence.</p>
        </div>
        <div>
          <h4>· Six ·</h4>
          <h3 style={{marginTop:'0.5rem'}}>The Reading</h3>
          <p>Each card is given its traditional meaning, then woven into a personal synthesis for your question. The reading is yours to keep — saved to your Journal, returned to whenever the question still asks.</p>
        </div>
      </div>

      <Divider glyph="sigil-mark"/>

      <div className="panel" style={{marginTop:'2rem', textAlign:'center'}}>
        <PanelCorners/>
        <h3>If you are skeptical</h3>
        <p style={{marginTop:'1rem', maxWidth:'520px', margin:'1rem auto 0'}}>
          Good. So are we. The cards do not have to be magical to be useful. A random structure, met with attention, will surface things you would not otherwise let yourself say. That is enough.
        </p>
      </div>
      <div className="spacer-lg"></div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────────
// Card Library
// ────────────────────────────────────────────────────────────────
function LibraryScreen() {
  const [filter, setFilter] = useState_s1('all');
  const [selected, setSelected] = useState_s1(null);

  const filters = [
    { id: 'all', label: 'All Cards' },
    { id: 'major', label: 'Major Arcana' },
    { id: 'wands', label: 'Wands' },
    { id: 'cups', label: 'Cups' },
    { id: 'swords', label: 'Swords' },
    { id: 'pentacles', label: 'Pentacles' },
  ];

  const cards = useMemo_s1(() => {
    if (filter === 'all') return TAROT_DECK;
    return TAROT_DECK.filter(c => c.suitKey === filter);
  }, [filter]);

  return (
    <div className="container">
      <div className="center">
        <span className="eyebrow">The Compendium</span>
        <h1 style={{marginTop:'1rem'}}>Seventy-Eight Doors</h1>
        <p className="lead" style={{margin:'1.4rem auto', maxWidth:'600px'}}>
          The whole deck, laid open. Each card has a history older than its meaning. Touch any to read its long shape.
        </p>
      </div>

      <Divider glyph="mark"/>

      <div className="library-filters" style={{justifyContent:'center', marginTop:'2rem'}}>
        {filters.map(f => (
          <button key={f.id}
            className={`filter-chip ${filter === f.id ? 'active' : ''}`}
            onClick={() => setFilter(f.id)}>
            {f.label}
          </button>
        ))}
      </div>

      <div className="library-grid">
        {cards.map(card => (
          <div key={card.id} className="library-cell" onClick={() => setSelected(card)}>
            <TarotCard card={card} flipped size="sm" interactive/>
            <div className="lib-label">{card.name}</div>
          </div>
        ))}
      </div>

      {selected && <CardDetailModal card={selected} onClose={() => setSelected(null)}/>}
      <div className="spacer-lg"></div>
    </div>
  );
}

function CardDetailModal({ card, onClose }) {
  useEffect_s1(() => {
    const h = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, [onClose]);
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose}>×</button>
        <div>
          <TarotCard card={card} flipped size="lg"/>
        </div>
        <div>
          <span className="eyebrow">{card.suitKey === 'major' ? 'Major Arcana' : card.suit}</span>
          <h2 style={{marginTop:'0.6rem'}}>{card.name}</h2>
          <div style={{marginTop:'1.5rem'}}>
            <h4>Upright</h4>
            <p style={{marginTop:'0.4rem'}}>{card.upright}</p>
          </div>
          <div style={{marginTop:'1.2rem'}}>
            <h4>Reversed</h4>
            <p style={{marginTop:'0.4rem'}}>{card.reversed}</p>
          </div>
          <Divider glyph="mark"/>
          <p style={{fontStyle:'italic', color:'var(--ash)'}}>{card.long}</p>
        </div>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────────
// Journal
// ────────────────────────────────────────────────────────────────
function JournalScreen({ journal, onOpen, onRoute, onDelete }) {
  return (
    <div className="container narrow">
      <div className="center">
        <span className="eyebrow">The Long Memory</span>
        <h1 style={{marginTop:'1rem'}}>Your Reading Journal</h1>
        <p className="lead" style={{margin:'1.4rem auto', maxWidth:'600px'}}>
          Every reading lives here. Return often — the meaning of a card is sometimes only visible weeks later.
        </p>
      </div>
      <Divider glyph="mark"/>

      {journal.length === 0 ? (
        <div className="panel center" style={{marginTop:'2rem'}}>
          <PanelCorners/>
          <h3 style={{color:'var(--ash)'}}>No readings yet</h3>
          <p style={{marginTop:'1rem'}}>When you complete a reading it will be kept here for you to revisit.</p>
          <div style={{marginTop:'1.5rem'}}>
            <button className="btn primary" onClick={() => onRoute('spreads')}>Begin a Reading <Sigil name="chevron-right"/></button>
          </div>
        </div>
      ) : (
        <div className="journal-list">
          {journal.map(entry => {
            const d = new Date(entry.timestamp);
            const day = d.getDate();
            const mon = d.toLocaleDateString('en-US', { month:'short' }).toUpperCase();
            const yr = d.getFullYear();
            return (
              <div key={entry.id} className="journal-entry" onClick={() => onOpen(entry)}>
                <div className="journal-date">
                  <span className="day">{day}</span>
                  {mon} {yr}
                </div>
                <div>
                  <div className="journal-q">"{entry.question}"</div>
                  <div className="journal-meta">
                    {entry.spreadName} · Read by {entry.voiceName}
                  </div>
                </div>
                <div className="journal-thumbs">
                  {entry.draws.slice(0, 5).map((d, i) => <div key={i} className="micro"/>)}
                </div>
              </div>
            );
          })}
        </div>
      )}
      <div className="spacer-lg"></div>
    </div>
  );
}

Object.assign(window, { LandingScreen, AboutScreen, LibraryScreen, JournalScreen, CardDetailModal });