// LitStage v3 — Hero & TopNav
// Direction: "One upload, a complete course" — light, editorial-display headline
// + 3-up bento with one-click generation, multimedia formats, and 3D scene.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "Lessons that",
  "headlineEm": "come alive.",
  "subhead": "Upload a course plan, deploy an interactive multimedia course.",
  "showHeroBento": false,
  "showCohort": true,
  "seatsClaimed": 2,
  "darkPricing": true
}/*EDITMODE-END*/;

const I3 = {
  arrow: <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7h8m0 0L7.5 3.5M11 7l-3.5 3.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  arrowDown: <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 3v8m0 0L3.5 7.5M7 11l3.5-3.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  cube: <svg viewBox="0 0 24 24" fill="none"><path d="M12 3l8 4.5v9L12 21l-8-4.5v-9z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/><path d="M12 21V12M4 7.5l8 4.5 8-4.5" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/></svg>,
};

function TopNav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 6);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const links = [['Product', '#product'], ['Pricing', '#pricing'], ['About', '#about']];
  return (
    <header className={`topnav ${scrolled ? 'is-scrolled' : ''}`}>
      <div className="shell topnav-inner">
        <a className="brand" href="#top">
          <span className="brand-mark"/>
          <span>LitStage</span>
        </a>
        <nav className="topnav-links">
          {links.map(([l, h]) => <a key={h} href={h} className="topnav-link">{l}</a>)}
        </nav>
        <div className="topnav-cta">
          <a href="https://app.litstage.ai" className="btn btn-ghost-dark btn-sm">Log in</a>
          <a href="#contact" className="btn btn-ink btn-sm">Talk to us {I3.arrow}</a>
        </div>
        <button className="topnav-burger" aria-label="Menu">
          <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M3 5h12M3 9h12M3 13h12" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>
        </button>
      </div>
    </header>
  );
}

function Hero({ tweaks }) {
  const [trailerOpen, setTrailerOpen] = React.useState(false);
  React.useEffect(() => {
    if (!trailerOpen) return;
    const onKey = (e) => { if (e.key === 'Escape') setTrailerOpen(false); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [trailerOpen]);
  return (
    <section className="hero" id="top">
      <div className="shell hero-inner hero-grid-2">
        <div className="hero-text">
          <h1 className="hero-headline">
            {tweaks.headline} <em>{tweaks.headlineEm}</em>
          </h1>
          <p className="hero-sub">{tweaks.subhead}</p>
          <div className="hero-cta">
            <a href="https://app.litstage.ai" className="btn btn-lime btn-lg">Join now {I3.arrow}</a>
            <button type="button" className="btn btn-ghost-dark btn-lg" onClick={() => setTrailerOpen(true)}>
              <svg width="13" height="13" viewBox="0 0 14 14" fill="currentColor" aria-hidden="true"><path d="M3.5 2.5l8 4.5-8 4.5z"/></svg>
              Watch trailer
            </button>
          </div>
        </div>

        <div className="hero-stage" aria-hidden="true">
          <iframe
            className="hero-stage-iframe"
            src="plant-cell/plant-cell.html?autostart=explore&embed=1"
            title="Live 3D plant cell anatomy preview"
            loading="lazy"
            tabIndex="-1"
          />
        </div>

        {tweaks.showHeroBento && <HeroBento/>}
      </div>

      {trailerOpen && (
        <div onClick={() => setTrailerOpen(false)}
          style={{position:'fixed', inset:0, zIndex:2000, background:'rgba(8,10,7,0.84)', backdropFilter:'blur(6px)', WebkitBackdropFilter:'blur(6px)', display:'flex', alignItems:'center', justifyContent:'center', padding:'4vmin'}}>
          <div onClick={(e) => e.stopPropagation()}
            style={{position:'relative', width:'min(1080px, 92vw)', aspectRatio:'16 / 9', borderRadius:16, overflow:'hidden', background:'#000', boxShadow:'0 30px 90px rgba(0,0,0,0.55)'}}>
            <iframe
              src="https://www.youtube.com/embed/GFL7YXtOB0A?autoplay=1&rel=0&modestbranding=1"
              title="LitStage trailer"
              allow="autoplay; encrypted-media; picture-in-picture; fullscreen"
              allowFullScreen
              style={{width:'100%', height:'100%', border:0, display:'block'}}
            />
          </div>
          <button type="button" onClick={() => setTrailerOpen(false)} aria-label="Close trailer"
            style={{position:'absolute', top:'3.2vmin', right:'3.2vmin', width:46, height:46, borderRadius:'50%', border:'1px solid rgba(255,255,255,0.32)', background:'rgba(0,0,0,0.45)', color:'#fff', fontSize:24, lineHeight:1, cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center'}}>×</button>
        </div>
      )}
    </section>
  );
}

function HeroBento() {
  return (
    <div className="hero-grid reveal">
      {/* Tile 1 — photo to 3D */}
      <div className="tile">
        <div className="tile-tag"><span className="dot live"/> Faculty pipeline · Live</div>
        <h4>Photo → 3D model in minutes.</h4>
        <p>Snap a phone photo of an engine part, a heart model, a leaf. Litstage returns a sim-ready 3D mesh — no Blender, no consultants.</p>
        <div className="tile-vis">
          <div className="p23-pipeline">
            <div className="p23-card p23-photo-card">
              <div className="p23-photo"/>
              <div className="p23-card-tag">photo · 2.4 MB</div>
            </div>
            <div className="p23-flow">
              <span className="p23-flow-line"/>
              <span className="p23-flow-pulse"/>
              <span className="p23-flow-label">AI · reconstructing</span>
            </div>
            <div className="p23-card p23-mesh-card">
              <svg className="p23-mesh" viewBox="-30 -30 60 60" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
                <g className="p23-mesh-spin">
                  {/* iso wireframe heart-ish blob */}
                  <polygon points="0,-18 16,-6 14,12 0,18 -14,12 -16,-6" fill="#CFFF81" stroke="#2D5016" strokeWidth="1.2" strokeLinejoin="round"/>
                  <line x1="0" y1="-18" x2="0" y2="18" stroke="#2D5016" strokeWidth="0.7" opacity="0.6"/>
                  <line x1="-16" y1="-6" x2="16" y2="-6" stroke="#2D5016" strokeWidth="0.7" opacity="0.6"/>
                  <line x1="-14" y1="12" x2="14" y2="12" stroke="#2D5016" strokeWidth="0.7" opacity="0.6"/>
                  <circle cx="0" cy="-18" r="1.6" fill="#0B0D0A"/>
                  <circle cx="16" cy="-6" r="1.6" fill="#0B0D0A"/>
                  <circle cx="14" cy="12" r="1.6" fill="#0B0D0A"/>
                  <circle cx="0" cy="18" r="1.6" fill="#0B0D0A"/>
                  <circle cx="-14" cy="12" r="1.6" fill="#0B0D0A"/>
                  <circle cx="-16" cy="-6" r="1.6" fill="#0B0D0A"/>
                </g>
              </svg>
              <div className="p23-card-tag">mesh · .glb · 312 KB</div>
            </div>
          </div>
          <div className="p23-steps">
            <span className="p23-step done">UPLOAD</span>
            <span className="p23-step done">ANALYZE</span>
            <span className="p23-step active">RECONSTRUCT</span>
            <span className="p23-step">RIG</span>
          </div>
          <div className="p23-time">
            <svg viewBox="0 0 24 24" fill="none" width="12" height="12" aria-hidden="true"><circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.8"/><path d="M12 7v5l3 2" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>
            <b>04:12</b><span> · 3D mesh ready for sim</span>
          </div>
        </div>
      </div>

      {/* Tile 2 — worldbuild palette */}
      <div className="tile">
        <div className="tile-tag">Worldbuild · Drag and drop</div>
        <h4>Build a scene like Lego.</h4>
        <p>Snap primitives into rooms, labs, and shop floors. Drop characters, embed quizzes, publish to your students — no game engine, no Unity license.</p>
        <div className="tile-vis">
          <div className="wb-stage">
            <svg className="wb-scene" viewBox="0 0 200 130" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
              <defs>
                <linearGradient id="wb-floor" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0" stopColor="#F0FDE4"/>
                  <stop offset="1" stopColor="#E5F5C9"/>
                </linearGradient>
              </defs>
              {/* iso grid */}
              <g stroke="#2D5016" strokeWidth="0.4" opacity="0.18">
                {[0,1,2,3,4,5,6,7,8].map(i => (
                  <line key={'gx'+i} x1={20 + i*20} y1="40" x2={20 + i*20 - 30} y2="110"/>
                ))}
                {[0,1,2,3,4].map(i => (
                  <line key={'gy'+i} x1={20 - i*7} y1={40 + i*16} x2={180 - i*7} y2={40 + i*16}/>
                ))}
              </g>
              {/* floor */}
              <polygon points="20,40 180,40 150,110 -10,110" fill="url(#wb-floor)" stroke="#2D5016" strokeWidth="0.6" opacity="0.5"/>
              {/* wall cube A */}
              <g>
                <polygon points="60,30 90,30 90,75 60,75" fill="#CFFF81" stroke="#2D5016" strokeWidth="1"/>
                <polygon points="90,30 105,18 105,63 90,75" fill="#A8CC68" stroke="#2D5016" strokeWidth="1"/>
                <polygon points="60,30 75,18 105,18 90,30" fill="#EAFFCC" stroke="#2D5016" strokeWidth="1"/>
              </g>
              {/* wall cube B */}
              <g>
                <polygon points="105,40 130,40 130,80 105,80" fill="#F0FDE4" stroke="#2D5016" strokeWidth="1"/>
                <polygon points="130,40 142,30 142,70 130,80" fill="#CFFF81" stroke="#2D5016" strokeWidth="1"/>
                <polygon points="105,40 117,30 142,30 130,40" fill="#FFFFFF" stroke="#2D5016" strokeWidth="1"/>
              </g>
              {/* cylinder NPC */}
              <g>
                <ellipse cx="42" cy="95" rx="6" ry="2" fill="#14532D" opacity="0.18"/>
                <rect x="36" y="70" width="12" height="24" rx="6" fill="#2D5016" stroke="#0B0D0A" strokeWidth="1"/>
                <circle cx="42" cy="66" r="5" fill="#CFFF81" stroke="#0B0D0A" strokeWidth="1"/>
              </g>
              {/* hotspot marker */}
              <g>
                <circle cx="118" cy="54" r="4" fill="#0B0D0A"/>
                <circle cx="118" cy="54" r="4" fill="none" stroke="#CFFF81" strokeWidth="1.4"/>
                <text x="118" y="56.5" textAnchor="middle" fontSize="5" fontFamily="JetBrains Mono, monospace" fill="#CFFF81" fontWeight="700">Q1</text>
              </g>
            </svg>
            <div className="wb-toolbar">
              <div className="wb-tool active" title="Cube"><svg viewBox="0 0 24 24" fill="none" width="12" height="12"><rect x="5" y="5" width="14" height="14" rx="1" stroke="currentColor" strokeWidth="1.8"/></svg></div>
              <div className="wb-tool" title="Sphere"><svg viewBox="0 0 24 24" fill="none" width="12" height="12"><circle cx="12" cy="12" r="7" stroke="currentColor" strokeWidth="1.8"/></svg></div>
              <div className="wb-tool" title="NPC"><svg viewBox="0 0 24 24" fill="none" width="12" height="12"><circle cx="12" cy="9" r="3" stroke="currentColor" strokeWidth="1.8"/><path d="M5 21a7 7 0 0114 0" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg></div>
              <div className="wb-tool" title="Question"><svg viewBox="0 0 24 24" fill="none" width="12" height="12"><circle cx="12" cy="12" r="8" stroke="currentColor" strokeWidth="1.8"/><path d="M10 10a2 2 0 114 0c0 1-2 1.5-2 3M12 17v.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg></div>
            </div>
            <div className="wb-status"><span className="dot"/> Autosaved · 14s ago</div>
          </div>
          <div className="wb-mat"><i/><i/><i/><i/><i/><i/><i/><i/></div>
        </div>
      </div>

      {/* Tile 3 — AR phone */}
      <div className="tile">
        <div className="tile-tag">Mobile AR · No app required</div>
        <h4>From simulator to AR card.</h4>
        <p>Same simulation. Drop it onto the kitchen table. WebXR — students scan a QR code, walk around a heart, label parts.</p>
        <div className="tile-vis" style={{display: 'flex', justifyContent: 'center'}}>
          <div className="ar-phone">
            <div className="ar-notch"/>
            <div className="ar-phone-scene">
              <div className="ar-heart"/>
              <div className="ar-anchor" style={{top: '22%', left: '24%'}}/>
              <div className="ar-anchor" style={{top: '38%', right: '20%'}}/>
              <div className="ar-anchor" style={{bottom: '28%', left: '34%'}}/>
              <div className="ar-tag">LIVE · 1.0× SCALE</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

const PARTNERS = [
  { src: 'logos/las-positas.png', alt: 'Las Positas College',          cls: 'pl-lpc' },
  { src: 'logos/canada.png',      alt: 'Cañada College',               cls: 'pl-canada' },
  { src: 'logos/folsom-lake.svg', alt: 'Folsom Lake College',          cls: 'pl-folsom' },
  { src: 'logos/la-mission.png',  alt: 'Los Angeles Mission College',  cls: 'pl-lamc' },
];

function PartnerStrip() {
  const row = [...PARTNERS, ...PARTNERS, ...PARTNERS, ...PARTNERS];
  return (
    <section className="partners" aria-label="Partner colleges">
      <div className="shell">
        <div className="partners-label">Developed by California Community College faculty and students</div>
      </div>
      <div className="partners-marquee">
        <div className="partners-track">
          {row.map((p, i) => (
            <span className="partner-logo" key={i}>
              <img src={p.src} alt={p.alt} className={p.cls}/>
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

function Ticker() {
  const items = [
    ['Browser-only', 'no headsets'],
    ['One-click generation', 'PDF → course'],
    ['Faculty-authored', 'not consultant decks'],
    ['Workforce Pell-ready', 'July 2026'],
    ['Photo → 3D', '< 5 min'],
    ['AI grounded in textbook', 'no hallucinations'],
    ['Mobile AR', 'WebXR'],
    ['Open standards', 'glTF · USDZ · WebXR'],
  ];
  return (
    <div className="ticker">
      <div className="ticker-track">
        {[...items, ...items, ...items].map((it, i) => (
          <span className="ticker-item" key={i}><b>{it[0]}</b><span>·</span>{it[1]}</span>
        ))}
      </div>
    </div>
  );
}

window.TopNav = TopNav;
window.Hero = Hero;
window.PartnerStrip = PartnerStrip;
window.Ticker = Ticker;
window.TWEAK_DEFAULTS = TWEAK_DEFAULTS;