// iso-hero.jsx
// Shared hero pieces (palettes + the two direction layouts) so both the live
// page and the side-by-side comparison canvas render the SAME components.
// Exposes: PALETTES, applyPalette, VoteChips, HeroCopy, Hero, ProductHero.

const PALETTES = {
  'Plum': { primary: '#8A4A86', blue: '#3C6E93', amber: '#D2954A', green: '#5A9A6F', purple: '#5E4B8B', plaza: '#E4D8C0', grass: '#B2BF90', road: '#AE9F82' },
  'Slate plum': { primary: '#7C4C8E', blue: '#43678C', amber: '#C99A57', green: '#5E8E84', purple: '#4F4A7E', plaza: '#E2D7C2', grass: '#AAB892', road: '#AA9C82' },
  'Clay': { primary: '#B25A4E', blue: '#4C6E8A', amber: '#CF9A4D', green: '#5E946C', purple: '#7A4F86', plaza: '#E6D9C1', grass: '#B6C094', road: '#B0A083' },
  'Riviera': { primary: '#E76F51', blue: '#264653', amber: '#E9C46A', green: '#2A9D8F', purple: '#3F7C82', plaza: '#E9DCC6', grass: '#CFC197', road: '#C7A87E' }
};
const BASE = { bg: '#F5F2EC', panel: '#F9F7F3', ink: '#2E2822' };

function applyPalette(name) {
  const p = PALETTES[name] || PALETTES.Plum;
  const r = document.documentElement;
  r.style.setProperty('--c-bg', BASE.bg);
  r.style.setProperty('--c-panel', BASE.panel);
  r.style.setProperty('--c-ink', BASE.ink);
  Object.entries(p).forEach(([k, v]) => r.style.setProperty('--c-' + k, v));
}

function VoteChips() {
  const chips = [
  { txt: '+1', left: '34%', top: '60%', delay: '0s', bg: 'var(--c-primary)' },
  { txt: '▲', left: '62%', top: '64%', delay: '2.1s', bg: 'var(--c-blue)' },
  { txt: 'vote', left: '48%', top: '70%', delay: '4s', bg: 'var(--c-green)' }];

  return (
    <div className="iso-floaties">
          {chips.map((c, i) =>
      <span key={i} className="vote-chip" style={{ left: c.left, top: c.top, animationDelay: c.delay, background: c.bg }}>{c.txt}</span>
      )}
        </div>);

}

function HeroCopy({ onOpen }) {
  return (
    <div className="hero-copy">
              <h1 style={{ fontFamily: "Poppins", fontWeight: "700" }}><span style={{ color: "#e76f51" }}>Create live</span> <span className="c1" style={{ fontFamily: "Poppins", fontWeight: 700 }}><br />content</span> in<br /><span className="c2" style={{ fontFamily: "Poppins", fontWeight: 700, color: "rgb(46, 40, 34)" }}>Google Slides.</span></h1>
              <p className="lede" style={{ fontFamily: "Poppins" }}>Bring your audience into the presentation.
They vote from their phones, results render live on your slides.
</p>
              <div className="hero-actions">
                <a href="#" className="btn primary">Install for Slides →</a>
                <button type="button" className="btn outline demo-btn" onClick={onOpen}><span className="pp">▶</span> Try the live demo</button>
              </div>
              <div className="hero-meta">
                <span style={{ fontFamily: "Poppins", fontSize: "15px" }}><i className="meta-mark" aria-hidden="true"></i>Your design stays intact.</span>
                <span style={{ fontFamily: "Poppins", fontSize: "15px" }}><i className="meta-mark" aria-hidden="true"></i>No window-switching, no apps, no nonsense.</span>
                <span style={{ fontFamily: "Poppins", fontSize: "15px" }}><i className="meta-mark" aria-hidden="true"></i>First poll in minutes.</span>
              </div>
            </div>);
}

function Hero({ scene, pal, ambient, chips, muted, onOpen }) {
  return (
    <section className="hero" data-screen-label="01 Hero">
          <div className="hero-grid">
            <HeroCopy onOpen={onOpen} />

            <div className="iso-stage" data-scene={scene}>
              <IsoWorld scene={scene} pal={pal} muted={muted} />
              {chips && ambient && <VoteChips />}
              <IsoMonitor onOpen={onOpen} ambient={ambient} />
              <IsoCrowd scene={scene} pal={pal} muted={muted} />
            </div>
          </div>
        </section>);
}

// Direction C — product-first. The live poll UI is the hero; the isometric
// world is a small signature flourish tucked into the corner.
function ProductHero({ pal, ambient, muted, onOpen }) {
  return (
    <section className="hero" data-screen-label="01 Hero">
          <div className="hero-grid">
            <HeroCopy onOpen={onOpen} />

            <div className="prod-stage">
              <div className="prod-window" role="button" tabIndex={0} onClick={onOpen} style={{ cursor: 'pointer' }}>
                <div className="prod-screen"><MiniEditor ambient={ambient} /></div>
              </div>
              <div className="iso-accent"><IsoAccent pal={pal} muted={muted} /></div>
            </div>
          </div>
        </section>);
}

Object.assign(window, { PALETTES, BASE, applyPalette, VoteChips, HeroCopy, Hero, ProductHero });