// Section components

// ====== NAV ======
function Nav() {
  return (
    <nav className="nav">
      <a href="#top" className="nav-brand">
        <span className="mark">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <path d="M12 3 L21 12 L12 21 L3 12 Z" />
            <circle cx="12" cy="12" r="3" fill="currentColor" />
          </svg>
        </span>
        Black Craft
      </a>
      <div className="nav-links">
        <a href="#game">The Game</a>
        <a href="#studio">The Team</a>
        <a href="#devlog">Devlog</a>
        <a href="#wishlist">Wishlist</a>
      </div>
    </nav>);
}

// ====== HERO ======
function Hero() {
  return (
    <header className="hero" id="top">
      <div className="hero-bg"></div>

      <ParticleField count={50} />

      <SparkBurst style={{ bottom: "15%", left: "15%" }} color="green" count={8} />
      <SparkBurst style={{ bottom: "12%", right: "18%" }} color="violet" count={8} />
      <SparkBurst style={{ top: "25%", right: "10%" }} color="green" count={5} />
      <SparkBurst style={{ top: "30%", left: "8%" }} color="violet" count={5} />

      {/* Eyes scattered around the hero, each blinking on its own clock */}
      <Eye eye={1} top="13%" left="2.5%"   rotate={-9}  blinkDelay={0.4} fadeDelay={2}  blinkPeriod={5.2} fadePeriod={13} />
      <Eye eye={2} top="33%" left="6%"     rotate={5}   blinkDelay={3.4} fadeDelay={10} blinkPeriod={4.7} fadePeriod={14} />
      <Eye eye={3} top="58%" left="3.5%"   rotate={-5}  blinkDelay={1.7} fadeDelay={6}  blinkPeriod={5.0} fadePeriod={15} />
      <Eye eye={2} bottom="10%" left="11%"  rotate={7}   blinkDelay={2.3} fadeDelay={4}  blinkPeriod={5.7} fadePeriod={16} />
      <Eye eye={3} top="9%"  right="3.5%"  rotate={6}   blinkDelay={2.1} fadeDelay={7}  blinkPeriod={6.8} fadePeriod={16} />
      <Eye eye={1} top="38%" right="2.5%"  rotate={-11} blinkDelay={1.2} fadeDelay={5}  blinkPeriod={6.2} fadePeriod={12} />
      <Eye eye={3} bottom="28%" right="6%" rotate={-6}  blinkDelay={3.0} fadeDelay={11} blinkPeriod={5.9} fadePeriod={13} />
      <Eye eye={2} bottom="11%" right="19%" rotate={9}  blinkDelay={2.8} fadeDelay={8}  blinkPeriod={4.4} fadePeriod={15} />
      <Eye eye={1} bottom="6%" left="33%"  rotate={4}   blinkDelay={0.9} fadeDelay={3}  blinkPeriod={5.6} fadePeriod={14} />

      <div className="hero-inner">
        <div className="hero-logo">
          <img src="assets/dd-logo.png" alt="Dimension Disrupt" style={{ width: "681px" }} />
          <h1 className="visually-hidden">Dimension Disrupt</h1>
        </div>

        <p className="hero-subtitle">
          A 2D toon survival RPG. Build a home, raid the dungeon, and try not
          to wake the things sleeping down there.
        </p>

        <div className="hero-tags">
          <span className="tag green">Survival RPG</span>
          <span className="tag violet">Dungeon Crawler</span>
          <span className="tag green">Base Building</span>
          <span className="tag violet">Single-Player</span>
        </div>

        <div className="hero-cta">
          <a href="#wishlist" className="btn btn-primary" style={{ display: "none" }}>
            Wishlist on Steam
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
              <path d="M5 12h14M13 5l7 7-7 7" />
            </svg>
          </a>
          <a href="#game" className="btn btn-ghost">See the Game</a>
        </div>

        <LoreRune
          shape={0}
          color="green"
          style={{ top: "22%", left: "10%" }}
          text="Day 41. The compass spins anti-clockwise now. We took it as decoration. It was a warning." />

        <LoreRune
          shape={2}
          color="violet"
          style={{ bottom: "32%", right: "12%" }}
          text="The bottles catch a wind no draught makes. The bubbles always rise toward whatever is watching." />
      </div>
    </header>);
}

// ====== GAME ======
function GameSection() {
  const pillars = [
  {
    n: "I",
    color: "p-green",
    icon:
    <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2">
          <path d="M32 8 L48 22 L42 56 L22 56 L16 22 Z" />
          <path d="M22 28 L42 28 M24 38 L40 38" />
          <circle cx="32" cy="20" r="3" fill="currentColor" />
        </svg>,
    title: "Survive",
    copy: "Hunger. Cold. Sanity. Whatever's in the cupboard. The world only pretends to sit still while you sleep."
  },
  {
    n: "II",
    color: "p-violet",
    icon:
    <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2">
          <path d="M8 56 L20 28 L32 40 L44 20 L56 56 Z" />
          <path d="M14 56 L14 40 M50 56 L50 44" />
          <circle cx="32" cy="14" r="2" fill="currentColor" />
        </svg>,
    title: "Disrupt",
    copy: "Procedural dungeons that hold a grudge. Loot is a polite word for what you bring back up."
  },
  {
    n: "III",
    color: "p-magenta",
    icon:
    <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2">
          <path d="M12 50 L12 26 L32 12 L52 26 L52 50 Z" />
          <path d="M22 50 L22 36 L42 36 L42 50" />
          <path d="M28 50 L28 44 M36 50 L36 44" />
        </svg>,
    title: "Build",
    copy: "Workshop, garden, shrine, fence. Decide what to put near the door — something out there is taking notes."
  }];


  const features = [
  { t: "Hand-drawn, hand-animated", c: "Every leaf, lantern and lurking horror toon-shaded frame by frame." },
  { t: "Sanity is a stat", c: "See too much, lose the thread. Your character will start to lie to you. The UI joins in eventually." },
  { t: "Dimensions, plural", c: "Five worlds bleed through one map. Find the seams. Don't pull on them." },
  { t: "A base that's yours", c: "Modular building, tools and traps. Lay it out, light it up, lock it down." },
  { t: "Pets that pull weight", c: "Companions that fight, fetch, and occasionally judge your choices." }];


  return (
    <section className="game-section" id="game">
      <ParticleField count={25} />
      <div className="container">
        <div className="section-label">The Game</div>
        <h2 className="section-title">
          Build by day.<br />
          <span className="pop-v">Dig by night.</span>
        </h2>
        <p className="section-lede">
          Dimension Disrupt is a 2D toon survival RPG with dungeon-crawler
          combat and base-building roots. Made by two people. Drawn by hand.
        </p>

        <div className="pillars">
          {pillars.map((p, i) =>
          <div className={`pillar ${p.color}`} key={i}>
              <div className="pillar-num">PILLAR {p.n}</div>
              <div className="pillar-icon">{p.icon}</div>
              <h3>{p.title}</h3>
              <p>{p.copy}</p>
            </div>
          )}
        </div>

        <div className="features">
          <div>
            <div className="section-label violet" style={{ marginBottom: 30 }}>Features</div>
            <ul className="feature-list">
              {features.map((f, i) =>
              <li key={i}>
                  <span className="num">0{i + 1}</span>
                  <div className="copy">
                    <h4>{f.t}</h4>
                    <p>{f.c}</p>
                  </div>
                </li>
              )}
            </ul>
          </div>

          <div className="placeholder keyart-placeholder">
            <div>
              KEY ART<br />
              [ HERO + DUNGEON MAW ]<br />
              <span style={{ opacity: 0.5 }}>2400 × 3000</span>
            </div>
            <SparkBurst style={{ bottom: "10%", left: "30%" }} color="green" count={6} />
            <SparkBurst style={{ top: "20%", right: "20%" }} color="violet" count={4} />
            <Eye eye={3} top="10%" left="8%"   rotate={-5} blinkDelay={1.6} fadeDelay={3} blinkPeriod={5.8} fadePeriod={15} />
            <Eye eye={1} bottom="22%" right="12%" rotate={8}  blinkDelay={3.2} fadeDelay={9} blinkPeriod={4.9} fadePeriod={13} />
            <LoreRune
              shape={4}
              color="green"
              style={{ top: "12%", right: "12%" }}
              text="The first thing the dungeon takes is your shadow. The second is your name. The third is negotiable." />
          </div>
        </div>
      </div>
    </section>);
}

// ====== STUDIO ======
function StudioSection() {
  return (
    <section className="studio-section" id="studio">
      <ParticleField count={20} />
      <div className="container">
        <div className="section-label">The Team</div>
        <h2 className="section-title">Two people. <br /><span className="pop-g">One small studio.</span></h2>
        <p className="section-lede">Black Craft is Charlie and Mabu. We work from our home, on our own hours, with our own pets at our feet. 



        </p>

        <div className="team">
          <div className="member">
            <div className="placeholder member-portrait">
              <span className="frame-corner fc-tl"></span>
              <span className="frame-corner fc-tr"></span>
              <span className="frame-corner fc-bl"></span>
              <span className="frame-corner fc-br"></span>
              <div>
                PORTRAIT — CHARLIE<br />
                <span style={{ opacity: 0.5 }}>1200 × 1600</span>
              </div>
              <SparkBurst style={{ bottom: "8%", left: "50%" }} color="green" count={5} />
              <Eye eye={2} top="12%" left="8%"    width={72} rotate={3}  blinkDelay={2.4} fadeDelay={4} blinkPeriod={5.1} fadePeriod={12} />
              <Eye eye={3} bottom="22%" right="14%" width={78} rotate={-2} blinkDelay={0.8} fadeDelay={7} blinkPeriod={4.6} fadePeriod={14} />
            </div>
            <h3 className="member-name">Charlie</h3>
            <div className="member-role">Developer · Technical Artist</div>
            <p className="member-bio">Writes the code, builds the tools, teaches sprites to behave. Charlie keeps the engine humming.



            </p>
            <div className="member-stats">
              <div><span className="k">MAINS </span> Engine, tools</div>
              <div><span className="k">FEARS </span> French lawyers</div>
            </div>
          </div>

          <div className="member violet">
            <div className="placeholder member-portrait">
              <span className="frame-corner fc-tl"></span>
              <span className="frame-corner fc-tr"></span>
              <span className="frame-corner fc-bl"></span>
              <span className="frame-corner fc-br"></span>
              <div>
                PORTRAIT — MABU<br />
                <span style={{ opacity: 0.5 }}>1200 × 1600</span>
              </div>
              <SparkBurst style={{ bottom: "8%", left: "50%" }} color="violet" count={5} />
              <Eye eye={1} bottom="22%" left="14%" width={72} rotate={-5} blinkDelay={3.6} fadeDelay={2} blinkPeriod={6.3} fadePeriod={16} />
              <LoreRune
                shape={3}
                color="violet"
                style={{ top: "10%", right: "10%" }}
                text="Mabu's first drawing of the protagonist had four eyes. Charlie said no. Mabu compromised at three. Two are usually closed." />
            </div>
            <h3 className="member-name">Mabu</h3>
            <div className="member-role">Artist · Animator · Writer</div>
            <p className="member-bio">Draws everything you see and writes everything you read. Painstakingly animates hand-drawn sprites, the old school way.



            </p>
            <div className="member-stats">
              <div><span className="k">MAINS </span> Art, anim, narrative</div>
              <div><span className="k">FEARS </span> Blank pages</div>
            </div>
          </div>
        </div>
      </div>
    </section>);
}

// ====== DEVLOG ======
function DevlogSection() {
  const posts = [
  {
    featured: true,
    date: "12 · 05 · 26",
    tag: "Patchwork",
    title: "Stitching a dungeon that remembers you",
    excerpt: "On procedural dungeons that aren't actually procedural — how rooms carry grudges between runs, and why we let the map keep a diary.",
    thumb: "DEVLOG IMG · DUNGEON TILES"
  },
  {
    date: "03 · 05 · 26",
    tag: "Art",
    title: "Sixty frames of one nervous slime",
    excerpt: "Mabu walks through the wobble-to-burst animation pipeline.",
    thumb: "DEVLOG IMG · SLIME ANIM"
  },
  {
    date: "21 · 04 · 26",
    tag: "Build",
    title: "Sanity, the worst stat we've ever shipped",
    excerpt: "Lies, hallucinations, and the UI elements that fight back.",
    thumb: "DEVLOG IMG · SANITY UI"
  }];


  return (
    <section className="devlog-section" id="devlog">
      <ParticleField count={20} />
      <Eye eye={1} top="7%"  right="3%"  rotate={7}  blinkDelay={1.4} fadeDelay={4} blinkPeriod={5.5} fadePeriod={14} />
      <Eye eye={3} bottom="9%" left="3.5%" rotate={-6} blinkDelay={2.9} fadeDelay={9} blinkPeriod={6.1} fadePeriod={15} />
      <Eye eye={2} bottom="20%" right="5%" rotate={4} blinkDelay={0.8} fadeDelay={6} blinkPeriod={4.9} fadePeriod={13} />
      <div className="container">
        <div className="devlog-head">
          <div>
            <div className="section-label">Devlog</div>
            <h2 className="section-title">Notes from<br /><span className="pop-g">the desk.</span></h2>
          </div>
          <a href="#all-posts" className="btn btn-ghost">All Entries
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
              <path d="M5 12h14M13 5l7 7-7 7" />
            </svg>
          </a>
        </div>

        <div className="devlog-grid">
          {posts.map((p, i) =>
          <a className={`entry ${p.featured ? "featured" : ""}`} key={i}>
              <div className="placeholder entry-thumb">
                <div>{p.thumb}</div>
                {i === 0 &&
              <>
                    <SparkBurst style={{ bottom: "12%", right: "20%" }} color="green" count={5} />
                    <Eye eye={2} top="14%" left="12%" width={72} rotate={4} blinkDelay={1.9} fadeDelay={6} blinkPeriod={5.4} fadePeriod={13} />
                    <LoreRune
                  shape={1}
                  color="green"
                  style={{ bottom: "14%", left: "10%" }}
                  text="The dungeon was supposed to forget. We left the variable in. We are leaving it in." />
                  </>
              }
                {i === 1 && <SparkBurst style={{ bottom: "10%", left: "50%" }} color="violet" count={4} />}
              </div>
              <div className="entry-meta">
                <span>{p.date}</span>
                <span className="dot"></span>
                <span className="tag-inline">{p.tag}</span>
              </div>
              <h3 className="entry-title">{p.title}</h3>
              <p className="entry-excerpt">{p.excerpt}</p>
            </a>
          )}
        </div>
      </div>
    </section>);
}

// ====== FOOTER ======
function Footer() {
  return (
    <footer id="wishlist">
      <Eye eye={3} top="20%" left="3%"   width={74} rotate={-7} blinkDelay={1.1} fadeDelay={3} blinkPeriod={5.6} fadePeriod={15} />
      <Eye eye={1} bottom="22%" right="4%" width={80} rotate={6}  blinkDelay={2.7} fadeDelay={8} blinkPeriod={6.0} fadePeriod={14} />
      <Eye eye={2} top="32%" left="46%"  width={60} rotate={5}  blinkDelay={0.6} fadeDelay={11} blinkPeriod={4.8} fadePeriod={16} />
      <div className="footer-inner">
        <div className="footer-brand">
          <h4>Black <span className="g">Craft</span></h4>
          <p>A two-person studio making small, stubborn games. Currently making Dimension Disrupt.</p>
        </div>
        <div className="footer-col">
          <h5>The Game</h5>
          <ul>
            <li><a>Pillars</a></li>
            <li><a>Features</a></li>
            <li><a>Press Kit</a></li>
            <li><a>Wishlist</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>Studio</h5>
          <ul>
            <li><a>About</a></li>
            <li><a>Devlog</a></li>
            <li><a>Contact</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>Follow</h5>
          <ul>
            <li><a>Twitter / X</a></li>
            <li><a>Bluesky</a></li>
            <li><a>Discord</a></li>
            <li><a>Mailing list</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 Black Craft. Made by hand.</span>
        <span>v0.0.1 · Pre-alpha</span>
      </div>
    </footer>);
}

Object.assign(window, { Nav, Hero, GameSection, StudioSection, DevlogSection, Footer });