// sections.jsx — Games (Botanitech + Castle Defender), About, Devlog, Signup, Footer + Reveal helper
const { useRef: sUseRef, useEffect: sUseEffect, useState: sUseState } = React;

function Reveal({ children, className = '', delay = 0, tag = 'div', ...rest }) {
  const ref = sUseRef(null);
  sUseEffect(() => {
    const el = ref.current;
    if (!el) return;
    if (matchMedia('(prefers-reduced-motion: reduce)').matches) { el.classList.add('in'); return; }
    const io = new IntersectionObserver((es) => {
      es.forEach(e => { if (e.isIntersecting) { el.classList.add('in'); io.unobserve(el); } });
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  const Tag = tag;
  const dcls = delay ? ' d' + delay : '';
  return <Tag ref={ref} className={'reveal' + dcls + (className ? ' ' + className : '')} {...rest}>{children}</Tag>;
}

/* ---------------- Game one: Botanitech ---------------- */
const SPECIMENS = [
  { id: 'SP-01', name: 'Emberfern', desc: 'Drinks daylight through its fronds, breathes it back as a warm glow after dusk. The first plant I ever got working.' },
  { id: 'SP-02', name: 'Circuit Moss', desc: 'Low-voltage moss that carpets old machinery and quietly reroutes power as it creeps. Will absolutely overgrow your wiring if you let it.' },
  { id: 'SP-03', name: 'Lumen Pod', desc: 'A seed that boots like a tiny reactor. Crack one open and it can light a whole greenhouse — or blow your fuses. Ask me how I know.' },
];

function Botanitech() {
  return (
    <section className="section game" id="botanitech">
      <div className="container">
        <div className="game-head">
          <div>
            <Reveal className="eyebrow" tag="div">Now in development</Reveal>
            <Reveal tag="h2" className="game-title" delay={1}>Botanitech<span className="dot">.</span></Reveal>
          </div>
          <Reveal className="game-tag" tag="div" delay={2}>Cultivate the machine · grow the wild</Reveal>
        </div>

        <Reveal className="game-art" delay={1}>
          <img src="assets/botanitech-keyart.jpg" alt="Botanitech key art — a terraced greenhouse of brass pipes, glass domes and glowing blue flowers above a waterfall valley"/>
        </Reveal>
        <Reveal className="art-cap" tag="div" delay={2}>Key art, work in progress — the terrace gardens above the falls.</Reveal>

        <div className="game-grid">
          <Reveal className="game-desc" tag="p">
            A cosy bio-engineering garden sim aboard a drifting orbital arboretum. Splice circuitry into
            seedlings, tend a greenhouse that hums and blooms, and coax a quiet ecosystem back to life,
            one warm glowing specimen at a time.
          </Reveal>
          <Reveal tag="dl" className="game-meta" delay={1}>
            <div className="meta-item"><dt>Genre</dt><dd>Cosy bio-engineering sim</dd></div>
            <div className="meta-item"><dt>Platforms</dt><dd>PC · Switch · Steam Deck</dd></div>
            <div className="meta-item"><dt>Players</dt><dd>Solo or 2-player co-op</dd></div>
            <div className="meta-item"><dt>Status</dt><dd>In development · 2026</dd></div>
          </Reveal>
        </div>

        <Reveal className="fieldnotes" delay={1}>
          <div className="fieldnotes-head">From the specimen ledger</div>
          {SPECIMENS.map((s) => (
            <div className="fieldnote" key={s.id}>
              <span className="fieldnote-id">{s.id}</span>
              <span className="fieldnote-name">{s.name}</span>
              <span className="fieldnote-desc">{s.desc}</span>
            </div>
          ))}
        </Reveal>
      </div>
    </section>
  );
}

/* ---------------- Game two: Castle Defender ---------------- */
function CastleDefender() {
  return (
    <section className="section game game--castle" id="castle-defender">
      <div className="container">
        <Reveal className="castle-intro" tag="p">
          And now for something louder. The second game on my workbench started as a jam
          prototype about a very stubborn gate, and refused to stay small.
        </Reveal>

        <Reveal className="castle-art">
          <img src="assets/castle-defender-keyart.jpg" alt="Castle Defender key art — a moonlit stone castle firing cannons and frost magic at a horde of orcs, wolves and a stone golem"/>
          <div className="castle-title-block">
            <div className="castle-wt">Working title</div>
            <h2 className="castle-title">Castle Defender</h2>
          </div>
        </Reveal>
        <Reveal className="art-cap" tag="div">First key art — night three of the siege, wolves at the barricades.</Reveal>

        <div className="game-grid castle-grid">
          <Reveal tag="dl" className="game-meta">
            <div className="meta-item"><dt>Genre</dt><dd>Defender-incremental</dd></div>
            <div className="meta-item"><dt>Platforms</dt><dd>PC · Steam</dd></div>
            <div className="meta-item"><dt>Players</dt><dd>Solo</dd></div>
            <div className="meta-item"><dt>Status</dt><dd>Prototyping</dd></div>
          </Reveal>
          <Reveal className="game-desc" tag="p" delay={1}>
            A medieval defender-incremental. Actively command towers, troops, heroes and spells to
            hold a castle under endless siege — and when the walls finally give, prestige. Your
            fortress persists between runs, growing from a wooden keep into a god-tier citadel,
            with numbers to match.
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ---------------- About / philosophy ---------------- */
const PRINCIPLES = [
  { n: '01', t: 'Warmth first', d: 'Every system should feel like a hand on your shoulder, never a test you might fail. Yes, even the siege game.' },
  { n: '02', t: 'Curious tech', d: 'I treat technology as a material to shape with care — not a spectacle to flaunt.' },
  { n: '03', t: 'Slow craft', d: 'I would rather ship one small world that truly glows than ten that merely flicker.' },
];

function About() {
  return (
    <section className="section about" id="studio">
      <div className="container">
        <Reveal className="eyebrow" tag="div">The studio</Reveal>
        <Reveal tag="h2" className="sec-title" delay={1}>A solo studio with a long night ahead.</Reveal>
        <div className="about-grid" style={{ marginTop: '42px' }}>
          <Reveal className="about-copy">
            <p>I make games for the quiet hours — the ones you play with a blanket, a warm drink, and
              the lights turned low. No quotas, no noise. Just worlds you can sink into.</p>
            <p>I am drawn to the place where <span className="hl">technology and tenderness meet</span>:
              circuits that bloom, machines that breathe, and castles that remember every stone
              you ever laid.</p>
          </Reveal>
          <Reveal className="principles" delay={1}>
            {PRINCIPLES.map(p => (
              <div className="principle" key={p.n}>
                <span className="num">{p.n}</span>
                <h3>{p.t}</h3>
                <p>{p.d}</p>
              </div>
            ))}
          </Reveal>
        </div>
        <Reveal className="studio-note" tag="p" delay={1}>
          One indie dev, one shared lantern for everyone following along. I ship when it glows.
        </Reveal>
      </div>
    </section>
  );
}

/* ---------------- Devlog ---------------- */
const POSTS = [
  { date: 'Jun 2026', cat: 'Castle Defender', title: 'Why a cosy studio is building a siege', ex: 'It was supposed to be a weekend jam about holding one gate. Then the prestige loop clicked and nobody slept.' },
  { date: 'Apr 2026', cat: 'Botanitech', title: 'Wiring the first seedling', ex: 'How the splice system turns a humble sprout into a living circuit — and why we rebuilt it three times.' },
  { date: 'Feb 2026', cat: 'Studio', title: 'Notes from a solo campfire', ex: 'One indie dev, one stubborn lantern, and the rituals that keep the light on.' },
  { date: 'Jan 2026', cat: 'Tech', title: 'Lighting the greenhouse', ex: 'The soft volumetric glow that gives our nights their warmth, without melting your GPU.' },
];

function Devlog() {
  return (
    <section className="section devlog" id="devlog">
      <div className="container">
        <div className="game-head">
          <div>
            <Reveal className="eyebrow" tag="div">Devlog</Reveal>
            <Reveal tag="h2" className="sec-title" delay={1}>From the workbench.</Reveal>
          </div>
          <Reveal className="game-tag" tag="a" delay={2} href="#connect">All dispatches →</Reveal>
        </div>
        <div className="posts">
          {POSTS.map((p, i) => (
            <Reveal key={p.title} className="post" tag="article" delay={Math.min(i, 2)}>
              <div className="post-date">{p.date}<span className="post-cat">{p.cat}</span></div>
              <div className="post-body">
                <h3 className="post-title">{p.title}</h3>
                <p className="post-excerpt">{p.ex}</p>
              </div>
              <span className="post-more"><span className="arr">→</span></span>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Signup ---------------- */
function Signup() {
  const [email, setEmail] = sUseState('');
  const [done, setDone] = sUseState(false);
  function submit(e) {
    e.preventDefault();
    if (!email.trim()) return;
    setDone(true);
  }
  return (
    <section className="section signup" id="connect">
      <div className="container">
        <Reveal className="signup-card">
          <img className="signup-mark" src="assets/lantern.png" alt=""/>
          <div className="eyebrow" style={{ justifyContent: 'center' }}>Keep the light on</div>
          <h2>Follow the lantern.</h2>
          <p>Devlogs, early builds, the odd starlit screenshot. A few dispatches a year — this studio is
            far too small to spam you even if I wanted to.</p>
          {done ? (
            <div className="signup-ok">The lantern&rsquo;s lit — see you out there.</div>
          ) : (
            <form className="signup-form" onSubmit={submit}>
              <input className="field" type="email" placeholder="you@somewhere.space" value={email}
                onChange={(e) => setEmail(e.target.value)} aria-label="Email address" required/>
              <button className="btn btn-gold" type="submit"
                onMouseMove={(e) => { const r = e.currentTarget.getBoundingClientRect();
                  e.currentTarget.style.setProperty('--mx', (e.clientX - r.left) + 'px');
                  e.currentTarget.style.setProperty('--my', (e.clientY - r.top) + 'px'); }}>
                Subscribe
              </button>
            </form>
          )}
        </Reveal>
      </div>
    </section>
  );
}

/* ---------------- Footer ---------------- */
function ExtArrow() {
  return <svg className="ext" width="11" height="11" viewBox="0 0 11 11" fill="none" stroke="currentColor" strokeWidth="1.3"><path d="M3 8L8 3M8 3H4M8 3V7"/></svg>;
}
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="foot-top">
          <div className="foot-brand">
            <a className="brand" href="#top">
              <img className="brand-mark" src="assets/lantern.png" alt=""/>
              <span className="brand-name"><b>QUANTUM</b> LANTERN</span>
            </a>
            <p className="foot-tagline">Small worlds, warmly lit. Made by lantern-light, somewhere out past the dark.</p>
          </div>
          <div className="foot-col">
            <h4>Games</h4>
            <div className="socials">
              <a className="social" href="#botanitech">Botanitech</a>
              <a className="social" href="#castle-defender">Castle Defender</a>
            </div>
          </div>
          <div className="foot-col">
            <h4>Follow</h4>
            <div className="socials">
              <a className="social" href="#">Steam <ExtArrow/></a>
              <a className="social" href="#">Discord <ExtArrow/></a>
              <a className="social" href="#">Bluesky <ExtArrow/></a>
            </div>
          </div>
          <div className="foot-col">
            <h4>More</h4>
            <div className="socials">
              <a className="social" href="#">YouTube <ExtArrow/></a>
              <a className="social" href="#">Press kit <ExtArrow/></a>
            </div>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© 2026 Quantum Lantern Studios — all worlds reserved. <a className="foot-legal" href="Impressum.html">Impressum</a> <a className="foot-legal" href="Datenschutz.html">Datenschutz</a></span>
          <button className="to-top" onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
            Back to the top ↑
          </button>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Reveal, Botanitech, CastleDefender, About, Devlog, Signup, Footer });