/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakColor, TweakRadio, TweakSelect, SpawnData */

const { useState, useEffect } = React;

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#B5FF00",
  "heroVariant": "split",
  "studioCard": "editorial",
  "typePair": "instrument"
} /*EDITMODE-END*/;

function PinMark({ size = 32, className = '' }) {
  return (
    <span className={`spawn-mark ${className}`} style={{ width: size, height: size }}>
      <img src={window.SPAWN_MARK_SRC} alt="Spawnpoint" style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block' }} />
    </span>);

}

function Nav() {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="#" className="nav-brand">
          <PinMark size={28} />
          <span className="nav-brand-name">SPAWNPOINT / TRONDHEIM</span>
        </a>
        <div className="nav-links">
          <a href="#about">About</a>
          <a href="#studios" className="active">Game Studios</a>
          <a href="#pitch">The Pitch</a>
          <a href="#news">News</a>
        </div>
        <a href="#apply" className="nav-cta">Apply ↗</a>
      </div>
    </nav>);

}

function Hero() {
  return (
    <section className="hero" data-screen-label="Hero">
      <div className="hero-bg">
        <img src={window.SPAWN_MARK_SRC} alt="" className="hero-mark" />
      </div>
      <div className="container">
        <div className="hero-grid">
          <div>
            <h1 className="display">
              An accelerator<br />
              for studios building<br />
              <em>games from</em> the north.
            </h1>
          </div>
          <div className="hero-side">
            <p className="lead">
              Spawnpoint is a six-month programme &amp; business network for game studios in Norway —
              built to grow sustainable, professional teams shipping games the world wants to play.
            </p>
            <div className="hero-cta">
              <a href="#apply" className="btn btn-primary">
                Apply for Spawnpoint III
                <span className="arrow">→</span>
              </a>
              <a href="#studios" className="btn btn-ghost">
                Meet the studios
              </a>
            </div>
          </div>
        </div>
        <div className="hero-marquee">
          <div className="marquee-track">
            {[...Array(2)].map((_, i) =>
            <span key={i} className="marquee-group">
                <span>Spawnpoint II — now active</span><span className="dot-sep">●</span>
                <span>Five studios in cohort</span><span className="dot-sep">●</span>
                <span>The Pitch · Jan 8, 2026</span><span className="dot-sep">●</span>
                <span>Workshops · Pitch training · Funding</span><span className="dot-sep">●</span>
                <span>Made in Trondheim</span><span className="dot-sep">●</span>
              </span>
            )}
          </div>
        </div>
      </div>
    </section>);

}

function About() {
  return (
    <section id="about" className="section section-paper" data-screen-label="About">
      <div className="container">
        <div className="section-head">
          <div className="section-head-left">
            <span className="eyebrow"><span className="dot"></span>About / 01</span>
            <h2 className="display">A vibrant <em>Tr&oslash;ndelag</em> for game-makers.</h2>
          </div>
          <div>
            <p className="lead">
              Spawnpoint Trondheim is a vision created by the founders of Work-Work and Kick-Ass Invest.
              Together with local partners across Tr&oslash;ndelag, we&rsquo;re building a sustainable game-development scene
              with successful, internationally recognised studios coming out of Norway.
            </p>
          </div>
        </div>
        <div className="about-grid">
          <div className="about-card">
            <span className="num">01 / Apply</span>
            <h4>A cohort of five</h4>
            <p>Each summer we open applications. After interviews and evaluations, we select five studios
              for the next programme.</p>
          </div>
          <div className="about-card">
            <span className="num">02 / Programme</span>
            <h4>Six months in Trondheim</h4>
            <p>Studios visit Trondheim once a month for hands-on workshops on operations, business strategy,
              marketing, sales and funding.</p>
          </div>
          <div className="about-card">
            <span className="num">03 / Network</span>
            <h4>Publishers &amp; investors</h4>
            <p>We bring publishers, project investors and our Valkyrian Council to the table — so studios pitch
              the people who matter.</p>
          </div>
        </div>
        <div className="stats-row">
          <div className="stat">
            <span className="num"><em>10</em></span>
            <span className="label">Studios supported</span>
          </div>
          <div className="stat">
            <span className="num"><em>II</em></span>
            <span className="label">Cohorts run</span>
          </div>
          <div className="stat">
            <span className="num">100k<em>+</em></span>
            <span className="label">Players reached</span>
          </div>
          <div className="stat">
            <span className="num"><em>6</em></span>
            <span className="label">Months per programme</span>
          </div>
        </div>
      </div>
    </section>);

}

function StudioRow({ s, idx }) {
  return (
    <a href={s.site || '#'} target="_blank" rel="noopener noreferrer" className="studio-row">
      <span className="index">/ {String(idx + 1).padStart(2, '0')}</span>
      <div className="logo">
        <div className={`logo-img ${s.logo ? '' : 'placeholder'}`}>
          {s.logo ? <img src={s.logo} alt={s.name} /> : <span>{s.glyph}</span>}
        </div>
        <div className="name-block">
          <span className="name">{s.name}</span>
          <span className="city">{s.city}</span>
        </div>
      </div>
      <div className="game">
        <em>{s.game}</em>
        {s.blurb}
      </div>
      <div className="meta">
        <span className="tag">{s.tag}</span>
        <span className="arrow-pill">→</span>
      </div>
    </a>);

}

function StudioCard({ s, idx }) {
  return (
    <a href={s.site || '#'} target="_blank" rel="noopener noreferrer" className="studio-card">
      <div className="card-header">
        <span className="id">/ STUDIO {String(idx + 1).padStart(2, '0')}</span>
        <span>{s.tag}</span>
      </div>
      <div className="card-art">
        {s.logo ? <img src={s.logo} alt={s.name} /> : <span className="placeholder-glyph">{s.glyph}</span>}
      </div>
      <div>
        <div className="card-name">{s.name}</div>
        <div className="card-game"><em>{s.game}</em> — {s.blurb}</div>
      </div>
      <div className="card-footer">
        <span className="pin">{s.city}</span>
        <span>Visit ↗</span>
      </div>
    </a>);

}

function StudioTile({ s, idx }) {
  return (
    <a href={s.site || '#'} target="_blank" rel="noopener noreferrer" className="studio-tile">
      <span className="tile-num">/ {String(idx + 1).padStart(2, '0')}</span>
      <div className="tile-name">{s.name}</div>
      <div className="tile-game"><em>{s.game}</em> — {s.blurb}</div>
      <div className="tile-meta">
        <span>{s.city}</span>
        <span className="tile-arrow">→</span>
      </div>
    </a>);

}

function Studios({ cardStyle }) {
  const [cohort, setCohort] = useState('II');
  const list = cohort === 'II' ? SpawnData.COHORT_II : SpawnData.COHORT_I;

  return (
    <section id="studios" className="studios-section" data-screen-label="Studios">
      <div className="container">
        <div className="section-head">
          <div className="section-head-left">
            <span className="eyebrow"><span className="dot"></span>Studios / 02</span>
            <h2 className="display">Ten studios.<br /><em>One trajectory.</em></h2>
          </div>
          <div>
            <p className="lead">
              Across two cohorts, Spawnpoint has supported ten Norwegian studios shipping
              everything from cozy summer adventures to fast-paced roguelikes — each rooted in a
              distinctive sense of place.
            </p>
          </div>
        </div>

        <div className="studios-tabs">
          <button className={`studios-tab ${cohort === 'II' ? 'active' : ''}`} onClick={() => setCohort('II')}>
            Spawnpoint II — 2025/26
          </button>
          <button className={`studios-tab ${cohort === 'I' ? 'active' : ''}`} onClick={() => setCohort('I')}>
            Spawnpoint I — 2024/25
          </button>
        </div>

        <div className={`studios-grid ${cardStyle}`}>
          {list.map((s, i) => {
            if (cardStyle === 'cards') return <StudioCard key={s.name} s={s} idx={i} />;
            if (cardStyle === 'minimal') return <StudioTile key={s.name} s={s} idx={i} />;
            return <StudioRow key={s.name} s={s} idx={i} />;
          })}
        </div>
      </div>
    </section>);

}

function PitchEvent() {
  return (
    <section id="pitch" className="event-section" data-screen-label="Pitch Event">
      <div className="container">
        <div className="event-grid">
          <div className="event-poster">
            <div className="top">
              <span className="label">The Spawnpoint Pitch</span>
              <span>Trondheim</span>
            </div>
            <div className="poster-art">
              <img src="assets/pitch-poster.png" alt="Game On Norway — January 8, 2026" />
            </div>
            <div className="bottom">
              <div className="title-line">Five studios. One stage.</div>
              <div>Doors 18:00</div>
            </div>
          </div>
          <div className="event-info">
            <span className="eyebrow"><span className="dot"></span>Event / 03</span>
            <h2 className="display">Pitches, polished and live.</h2>
            <p className="lead">
              After three months of pitch training, our five studios present their latest games to the Valkyrian
              Council — a panel of publishers and project investors. You&rsquo;re invited as audience.
            </p>
            <div className="schedule">
              <div className="schedule-row">
                <span className="time">18:00</span>
                <span className="what">Doors &amp; welcome reception</span>
              </div>
              <div className="schedule-row">
                <span className="time">18:45</span>
                <span className="what"><em>Five pitches</em>, fifteen minutes each</span>
              </div>
              <div className="schedule-row">
                <span className="time">20:30</span>
                <span className="what">Panel feedback &amp; Q&amp;A</span>
              </div>
              <div className="schedule-row">
                <span className="time">21:30</span>
                <span className="what">Mingle with the Valkyrian Council</span>
              </div>
            </div>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <a href="https://luma.com/l8sphf4o" className="btn btn-primary">Get tickets <span className="arrow">→</span></a>
              <a href="#" className="btn btn-ghost">Meet the council</a>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function Apply() {
  return (
    <section id="apply" className="apply-section" data-screen-label="Apply">
      <div className="container">
        <div className="apply-inner">
          <span className="eyebrow"><span className="dot"></span>Apply / 04</span>
          <h2 className="display">
            Spawnpoint III<br />opens <em>summer 2026.</em>
          </h2>
          <p className="lead">
            Five Norwegian studios will join us for six months of workshops, mentorship and
            access to the publisher and investor networks that move games into market.
          </p>
          <div className="apply-cta">
            <a href="#" className="btn btn-primary">
              Apply for Spawnpoint III
              <span className="arrow">→</span>
            </a>
            <span className="deadline">Applications open · <strong>June 2026</strong></span>
          </div>
        </div>
        <div className="container">
          <div className="apply-timeline">
            <div className="timeline-step active">
              <div className="when">Jun 2026</div>
              <h5>Applications open</h5>
              <p>Studios submit a short profile, current project, and what they need most.</p>
            </div>
            <div className="timeline-step">
              <div className="when">Aug 2026</div>
              <h5>Interviews</h5>
              <p>Shortlisted teams meet our partners across two rounds of conversation.</p>
            </div>
            <div className="timeline-step">
              <div className="when">Sep 2026</div>
              <h5>Five selected</h5>
              <p>Five studios join the cohort and begin onboarding workshops in Trondheim.</p>
            </div>
            <div className="timeline-step">
              <div className="when">Mar 2027</div>
              <h5>The Pitch</h5>
              <p>Spawnpoint III presents to the Valkyrian Council and a public audience.</p>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <PinMark size={48} />
            <p>An accelerator and business network for game studios in Norway. Founded by
              Work-Work and Kick-Ass Invest, in partnership with Tr&oslash;ndelag.</p>
          </div>
          <div className="footer-col">
            <h6>Programme</h6>
            <ul>
              <li><a href="#about">About</a></li>
              <li><a href="#studios">Game Studios</a></li>
              <li><a href="#pitch">The Pitch</a></li>
              <li><a href="#apply">Apply</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h6>Connect</h6>
            <ul>
              <li><a href="#">Discord</a></li>
              <li><a href="#">Newsletter</a></li>
              <li><a href="#">LinkedIn</a></li>
              <li><a href="#">Press kit</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h6>Founded by</h6>
            <ul>
              <li><a href="#">Work-Work</a></li>
              <li><a href="#">Kick-Ass Invest</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Spawnpoint Trondheim</span>
          <span>Made in Tr&oslash;ndelag</span>
        </div>
      </div>
    </footer>);

}

function App() {
  const [tweaks, setTweak] = useTweaks(DEFAULTS);

  useEffect(() => {
    document.documentElement.style.setProperty('--lime', tweaks.accent);
    document.body.dataset.typePair = tweaks.typePair;
    document.body.dataset.hero = tweaks.heroVariant;
  }, [tweaks]);

  return (
    <>
      <Nav />
      <main>
        <Hero />
        <About />
        <Studios cardStyle={tweaks.studioCard} />
        <PitchEvent />
        <Apply />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Color">
          <TweakColor
            label="Accent"
            value={tweaks.accent}
            onChange={(v) => setTweak('accent', v)}
            options={['#B5FF00', '#FF5A2C', '#7C5BFF', '#00E0C7', '#F2C200']} />
          
        </TweakSection>
        <TweakSection title="Hero">
          <TweakRadio
            label="Layout"
            value={tweaks.heroVariant}
            onChange={(v) => setTweak('heroVariant', v)}
            options={[
            { value: 'split', label: 'Split' },
            { value: 'centered', label: 'Centered' },
            { value: 'minimal', label: 'Minimal' }]
            } />
          
        </TweakSection>
        <TweakSection title="Studio cards">
          <TweakRadio
            label="Style"
            value={tweaks.studioCard}
            onChange={(v) => setTweak('studioCard', v)}
            options={[
            { value: 'editorial', label: 'Editorial' },
            { value: 'cards', label: 'Cards' },
            { value: 'minimal', label: 'Grid' }]
            } />
          
        </TweakSection>
        <TweakSection title="Type pairing">
          <TweakSelect
            label="Display family"
            value={tweaks.typePair}
            onChange={(v) => setTweak('typePair', v)}
            options={[
            { value: 'instrument', label: 'Instrument Serif + Space Grotesk' },
            { value: 'grotesk', label: 'Space Grotesk only' },
            { value: 'mono', label: 'JetBrains Mono display' }]
            } />
          
        </TweakSection>
      </TweaksPanel>
    </>);

}

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