// pages.jsx — individual page content for the SAMURAI site

function HomePage({ t = {} }) {
  return (
    <section className="page home" data-screen-label="01 Home">
      <div className="home-text">
        <div className="eyebrow"><span className="line"></span> Hour 02:14 — Shibuya, west alley</div>
        <h1>
          {t.titleLine1 || "A silence"}<br/>
          <em>{t.titleLine2 || "observes the"}</em><br/>
          {t.titleLine3 || "city, calmly."}
          {t.kanjiOn !== false && <span className="jp">静 か な 観 察</span>}
        </h1>
        <p className="lede">
          {t.leadText || "The mask does not speak. It listens to the rain on the metal awnings and the slow exhale of a vending machine — and somehow, the room becomes calmer."}
        </p>
        <div className="home-actions">
          <button className="btn">Enter the room</button>
          <button className="btn ghost">Read the field notes</button>
        </div>
        <div className="crosshair" aria-hidden="true"></div>
      </div>

      <div className="mask-silhouette" aria-hidden="true"></div>
      <div className="brush-layer" aria-hidden="true">
        <div className="brush b1"></div>
        <div className="brush b2"></div>
        <div className="brush b3"></div>
        <div className="brush b4"></div>
      </div>
      <div className="mask-aura" aria-hidden="true"></div>
      <div className={"mask-wrap" + (t.maskBreath !== false ? " breath" : "")}>
        <img className="mask" src="assets/mask.png" alt="" />
      </div>



      <div className="dots">
        <span>Silence &nbsp; <b>01</b></span>
        <span className="bar" aria-hidden="true" style={{alignSelf:"flex-end"}}></span>
        <span style={{opacity:0.6}}>Memory &nbsp; 02</span>
        <span style={{opacity:0.45}}>Distance &nbsp; 03</span>
        <span style={{opacity:0.35}}>Return &nbsp; 04</span>
      </div>
    </section>
  );
}

function StoriesPage() {
  const stories = [
    { num: "I.",   title: "The lantern outside Asakusa",      meta: "Field note · 11 min" },
    { num: "II.",  title: "What the rain remembers",          meta: "Essay · 14 min" },
    { num: "III.", title: "Three colours of a Tokyo midnight", meta: "Field note · 8 min" },
    { num: "IV.",  title: "On not finishing the letter",      meta: "Essay · 19 min" },
  ];
  return (
    <section className="page stories" data-screen-label="02 Stories">
      <div className="quiet-mask" aria-hidden="true">
        <img src="assets/mask.png" alt="" />
      </div>

      <div className="col-left">
        <div>
          <div className="eyebrow"><span className="line"></span> Vol. III — Late Spring 2026</div>
          <h2>Quiet <em>stories</em><br/>from the<br/>edge of <em>the city.</em></h2>
        </div>
        <div className="note">
          Five short pieces, written between 23:00 and dawn. None of them resolve. They are meant to be read with the lights low and the windows open.
        </div>
      </div>

      <div className="story-list">
        {stories.map((s, i) => (
          <article className="story" key={i}>
            <div className="num">{s.num}</div>
            <div className="title">{s.title}</div>
            <div className="meta">{s.meta}</div>
          </article>
        ))}
      </div>
    </section>
  );
}

function AboutPage() {
  return (
    <section className="page about" data-screen-label="03 About">
      <div className="body">
        <h2>
          <span className="jp">沈黙 という 美学</span>
          A studio about <em>restraint,</em><br/>
          and the long pause<br/>
          between two breaths.
        </h2>
        <p>
          SAMURAI is a small, slow workshop. We make objects, films and rooms for people who prefer presence to performance.
        </p>
        <p>
          Founded in Setagaya, 2019. Six people. One philosophy: nothing should be louder than it needs to be.
        </p>
        <div className="sig">
          <span><b>Studio</b> Setagaya · Tokyo</span>
          <span><b>Established</b> 2019</span>
          <span><b>Hours</b> By appointment, after sundown</span>
        </div>
      </div>

      <div className="frame">
        <div className="frame-glow" aria-hidden="true"></div>
        <img src="assets/mask.png" alt="" />
      </div>
    </section>
  );
}

function ContactPage() {
  return (
    <section className="page contact" data-screen-label="04 Contact">
      <div className="corner-mask" aria-hidden="true">
        <img src="assets/mask.png" alt="" />
      </div>

      <div className="body">
        <div className="eyebrow"><span className="line"></span> Correspondence — please, in your own time</div>
        <h2>Write,<br/>and we will<br/><em>answer slowly.</em></h2>
        <p className="lede">
          We reply to most letters within seven days. Write the way you would write to someone awake at 3 AM — the way they would, if you had asked first.
        </p>

        <div className="contact-grid">
          <div className="item">
            <label>Letters</label>
            <div className="val">hello@Ghost.studio<small>read between 22:00 and 04:00 (JST)</small></div>
          </div>
          <div className="item">
            <label>Studio</label>
            <div className="val">3-12-7 Kamiuma, Setagaya<small>by appointment only</small></div>
          </div>
          <div className="item">
            <label>Press</label>
            <div className="val">koji@Ghost.studio<small>or via your editor, ideally</small></div>
          </div>
          <div className="item">
            <label>Quietly</label>
            <div className="val">@Ghost.studio<small>posts once a season</small></div>
          </div>
        </div>

        <div className="home-actions">
          <button className="btn">Begin a letter</button>
        </div>
      </div>
    </section>
  );
}

window.HomePage = HomePage;
window.StoriesPage = StoriesPage;
window.AboutPage = AboutPage;
window.ContactPage = ContactPage;