// app.jsx — Innchant landing page React shell.

function Glyph({ name }) {
  // hand-built minimal glyphs (line). One per feature.
  const stroke = { fill: "none", stroke: "currentColor", strokeWidth: 1.25, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "depth": return (
      <svg viewBox="0 0 32 32" {...stroke}>
        <circle cx="16" cy="11" r="4" />
        <path d="M8 26c1.5-4 5-6 8-6s6.5 2 8 6" />
        <path d="M16 15v3" opacity=".5" />
      </svg>);
    case "rel": return (
      <svg viewBox="0 0 32 32" {...stroke}>
        <circle cx="8" cy="10" r="2.4" />
        <circle cx="24" cy="10" r="2.4" />
        <circle cx="16" cy="23" r="2.4" />
        <path d="M10 11.5l12 0M9.5 12.2l5.4 8.4M22.5 12.2l-5.4 8.4" opacity=".7" />
      </svg>);
    case "memory": return (
      <svg viewBox="0 0 32 32" {...stroke}>
        <path d="M7 9c0-1.1.9-2 2-2h12l4 4v12a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2V9z" />
        <path d="M11 13h10M11 17h10M11 21h6" opacity=".55" />
      </svg>);
    case "skill": return (
      <svg viewBox="0 0 32 32" {...stroke}>
        <path d="M6 22l6-12 4 8 4-5 6 9" />
        <circle cx="12" cy="10" r="1.4" />
        <circle cx="20" cy="13" r="1.4" />
      </svg>);
    case "byo": return (
      <svg viewBox="0 0 32 32" {...stroke}>
        <rect x="6" y="9" width="20" height="14" rx="2" />
        <path d="M10 14h6M10 18h4" opacity=".6" />
        <circle cx="22" cy="16" r="1.6" />
      </svg>);
    case "voice": return (
      <svg viewBox="0 0 32 32" {...stroke}>
        <path d="M9 19V13a3 3 0 1 1 6 0v6a3 3 0 1 1-6 0z" />
        <path d="M19 16c0 4-3 7-7 7M12 23v3M9 26h6" opacity=".7" />
      </svg>);
    case "tabs": return (
      <svg viewBox="0 0 32 32" {...stroke}>
        <path d="M5 12h7l2-3h13v15a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V12z" />
        <path d="M11 17h12M11 21h8" opacity=".55" />
      </svg>);
    case "candle": return (
      <svg viewBox="0 0 32 32" {...stroke}>
        <path d="M16 6c-1.6 2-3 3.4-3 5.5a3 3 0 0 0 6 0C19 9.4 17.6 8 16 6z" />
        <rect x="13" y="14" width="6" height="10" rx="1.5" />
        <path d="M11 26h10" />
      </svg>);
    default: return null;
  }
}

function App() {
  // Set figure style to 'articulated' on first load.
  React.useEffect(() => {
    const id = setInterval(() => {
      if (window.InnchantHero && window.InnchantHero.current && window.InnchantHero.current.setFigureStyle) {
        window.InnchantHero.current.setFigureStyle('articulated');
        clearInterval(id);
      }
    }, 50);
    return () => clearInterval(id);
  }, []);

  // Reveal-on-scroll
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver(entries => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
    }, { threshold: 0.15 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <>
      <nav className="nav">
        <a className="brand brand-link" href="#top" aria-label="Innchant — back to top">
          <svg className="mark" viewBox="0 0 110 110" fill="none" aria-hidden>
            {/* Wax-seal sigil: thick outer band + inner band + 24 inscription ticks,
                with the candle "I" mark inside (flame + bracket-serif stem). */}
            <circle cx="55" cy="55" r="46" stroke="currentColor" strokeWidth="3"/>
            <circle cx="55" cy="55" r="38" stroke="currentColor" strokeWidth="2"/>
            <g stroke="currentColor" strokeWidth="1.6">
              {Array.from({length: 24}, (_, i) => (
                <g key={i} transform={`translate(55 55) rotate(${i * 15})`}>
                  <line x1="0" y1="-44" x2="0" y2="-40"/>
                </g>
              ))}
            </g>
            {/* candle flame */}
            <path d="M55 24 C51 30, 49 34, 49 39 a6 6 0 0 0 12 0 C61 34, 59 30, 55 24z" fill="currentColor"/>
            <path d="M55 28 C53 33, 52 36, 52 39 a3 3 0 0 0 6 0 C58 36, 57 33, 55 28z" fill="#f4d9a8"/>
            {/* candle stem with bracket serifs */}
            <path d="M50 49 H60 V48 H50 Z M52 49 H58 V78 H52 Z M48 78 H62 V80 H48 Z M48 80 H62 V82 H48 Z" fill="#ece2cf"/>
          </svg>
          Innchant
        </a>
        <div className="nav-links">
          <a href="#how">How it works</a>
          <a href="#features">Features</a>
          <a href="#about">About</a>
        </div>
      </nav>

      <main id="top">
        <section className="hero" data-screen-label="01 Hero">
          <h1 className="reveal in">Every NPC has a story.<br/><em>Soon, they will be<br/>able to tell it.</em></h1>
          <span className="hero-badge">Coming soon</span>
          <a className="hero-foot scroll-cue" href="#how" aria-label="Scroll for more">
            <span className="cue-label">More below</span>
            <svg className="cue-chevron" viewBox="0 0 24 12" fill="none" aria-hidden>
              <path d="M3 3 L12 9 L21 3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </a>
        </section>

        <section className="section" id="how" data-screen-label="02 How it works">
          <div className="section-tag">A session, in three movements</div>
          <h2 className="reveal">From a sketch of a character <em>to a voice at the table.</em></h2>
          <p className="lede reveal">Innchant sits beside you while you run a session — a quiet companion that knows who your NPCs are, what they remember, and how they ought to sound.</p>

          <div className="steps">
            <div className="step reveal">
              <div className="num">i.</div>
              <h3>Compose the character</h3>
              <p>Personality, backstory, what they know, what they'll never tell. Behaviour sliders shape their voice — terse to talkative, forgetful to sharp.</p>
            </div>
            <div className="step reveal">
              <div className="num">ii.</div>
              <h3>Run the table</h3>
              <p>When players speak to an NPC, type the question. Tag the player asking. Read the in-character reply aloud. Apply skill checks to nudge the next response.</p>
            </div>
            <div className="step reveal">
              <div className="num">iii.</div>
              <h3>They remember</h3>
              <p>End a chat and the NPC forms memories — what was promised, who was rude, which secret slipped. Next session, they'll act like it.</p>
            </div>
          </div>
        </section>

        <section className="section" id="features" data-screen-label="03 Features">
          <div className="section-tag">Built for the table</div>
          <h2 className="reveal">Small details, <em>quietly attended to.</em></h2>

          <div className="features">
            <div className="feature reveal">
              <Glyph name="depth" />
              <div className="body">
                <h4>Layered NPCs</h4>
                <p>Personality, knowledge, secrets, boundaries, relationships. The shopkeeper, the queen's spy, the haunted child — each as deep as you need them to be.</p>
              </div>
            </div>

            <div className="feature reveal">
              <Glyph name="rel" />
              <div className="body">
                <h4>Relationships between NPCs</h4>
                <p>Friends with, enemies of, scared of, in love with. The web of who-knows-whom shapes every conversation.</p>
              </div>
            </div>

            <div className="feature reveal">
              <Glyph name="memory" />
              <div className="body">
                <h4>Lasting memory</h4>
                <p>NPCs remember what was said and form opinions you didn't have to write.</p>
              </div>
            </div>

            <div className="feature reveal">
              <Glyph name="skill" />
              <div className="body">
                <h4>Skill check modifiers</h4>
                <p>Persuasion ✓, Intimidation ✗ — nudge the next response without breaking the scene.</p>
              </div>
            </div>

            <div className="feature reveal">
              <Glyph name="tabs" />
              <div className="body">
                <h4>Multi-NPC tabs</h4>
                <p>The party splits. Speak to the innkeeper in one tab, the guard captain in another. Switch as the table turns.</p>
              </div>
            </div>

            <div className="feature reveal">
              <Glyph name="voice" />
              <div className="body">
                <h4>Voice tuned for the table</h4>
                <p>Replies you can read aloud — paced, in-character, unforced. No house-style filler, no narrator drift.</p>
              </div>
            </div>
          </div>
        </section>

        <footer className="foot" id="about">
          <div>© 2026 · Innchant · MMXXVI</div>
        </footer>
      </main>

    </>
  );
}

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