// Studio · Process · Journal · Contact · Footer
const { useState: useStateB, useEffect: useEffectB } = React;

function Studio({ lang }) {
  const h = CONTENT.studioHeading[lang];
  const s = CONTENT.studio;
  return (
    <section id="studio" data-screen-label="Studio">
      <SectionHead num={h.num} label={h.label}
                   meta={lang === 'ja' ? '事務所 / 主宰' : 'Office / Principal'} />
      <div className="studio-grid">
        <div>
          <div className={`studio-lead reveal ${lang === 'en' ? 'en' : ''}`}>
            {s.lead[lang]}
          </div>
          <div className="principal-block reveal d1">
            <div className="type-micro" style={{marginBottom: 14}}>
              — {lang === 'ja' ? '主宰' : 'Principal'}
            </div>
            <div className="name">{s.principal.name[lang]}</div>
            <div className={`bio ${lang === 'ja' ? 'jp' : ''}`} style={{whiteSpace: 'pre-line'}}>
              {s.principal.bio[lang]}
            </div>
          </div>
        </div>
        <div className="studio-portrait reveal d2">
          <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=1400&q=90&auto=format&fit=crop" alt="Principal portrait" />
        </div>
      </div>

      {/* Team */}
      <div className="team-table">
        <div className="edge" style={{padding: '24px 0 36px', display:'flex', justifyContent:'space-between'}}>
          <div className="type-micro">— {lang === 'ja' ? 'チーム／ 8名' : 'Team / 8'}</div>
          <div className="type-micro">2026</div>
        </div>
        {s.team.map((m, i) => (
          <div className="row reveal" key={i} data-cursor data-cursor-label={m.name}>
            <div className="idx">{String(i + 1).padStart(2, '0')}</div>
            <div className="role">{m.role[lang]}</div>
            <div className="name">{m.name}</div>
            <div className="arr">→</div>
          </div>
        ))}
      </div>

      {/* Awards */}
      <div className="awards-table">
        <div className="edge" style={{padding: '60px 0 36px', display:'flex', justifyContent:'space-between'}}>
          <div className="type-micro">— {lang === 'ja' ? '受賞' : 'Selected Recognition'}</div>
          <div className="type-micro">2016 — 2024</div>
        </div>
        {s.awards.map((a, i) => (
          <div className="row reveal" key={i}>
            <div className="y">{a.y}</div>
            <div>{a.t[lang]}</div>
            <div className="w">{a.w}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Process({ lang }) {
  const h = CONTENT.processHeading[lang];
  return (
    <section id="process" data-screen-label="Process">
      <SectionHead num={h.num} label={h.label}
                   meta={lang === 'ja' ? '設計の7段階' : 'Seven Phases'} />
      <div className="process-grid">
        {CONTENT.process.map((p) => (
          <div className="process-row reveal" key={p.no}>
            <div className="no">— {p.no}</div>
            <div className="ttl">
              {p.title.en}
              <span className="jp">{p.title.ja}</span>
            </div>
            <div className={`body ${lang === 'ja' ? 'jp' : ''}`}>{p.body[lang]}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Journal({ lang }) {
  const h = CONTENT.journalHeading[lang];
  return (
    <section id="journal" data-screen-label="Journal">
      <SectionHead num={h.num} label={h.label}
                   meta={lang === 'ja' ? '近況・エッセイ' : 'Recent · Essays'} />
      <div className="journal-grid">
        {CONTENT.journal.map((j, i) => (
          <a className="journal-card reveal" key={i} href="#journal"
             data-cursor data-cursor-label={lang === 'ja' ? '読む' : 'Read'}>
            <div className="row1">
              <span>{j.date}</span>
              <span>{j.tag[lang]}</span>
            </div>
            <div className={`ttl ${lang === 'ja' ? 'jp' : ''}`}>{j.title[lang]}</div>
            <div className={`lead ${lang === 'ja' ? 'jp' : ''}`}>{j.lead[lang]}</div>
            <div className="arr">
              <span className="line"></span>
              <span>{lang === 'ja' ? '続きを読む' : 'Continue'}</span>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}

function Contact({ lang }) {
  const h = CONTENT.contactHeading[lang];
  const c = CONTENT.contact;
  return (
    <section id="contact" data-screen-label="Contact">
      <SectionHead num={h.num} label={h.label}
                   meta={lang === 'ja' ? 'ご依頼について' : 'Commissions' } />
      <div className="contact-wrap">
        <div className={`contact-lead reveal ${lang === 'en' ? 'en' : ''}`}>
          {c.lead[lang]}
        </div>
        <div>
          <div className="contact-lines reveal d1">
            {c.lines.map((ln, i) => (
              <div className="ln" key={i}>
                <div className="k">{typeof ln.k === 'string' ? ln.k : ln.k[lang]}</div>
                <div className={`v ${ln.k === 'Email' ? 'email' : ''}`}>
                  {typeof ln.v === 'string' ? ln.v : ln.v[lang]}
                </div>
              </div>
            ))}
          </div>
          <a href="mailto:studio@kirima-a.jp" className="contact-cta reveal d2"
             data-cursor data-cursor-label={lang === 'ja' ? '書く' : 'Write'}>
            <span className="copper-mark"></span>
            <span>{lang === 'ja' ? 'studio@kirima-a.jp 宛に書く' : 'Write to the studio'}</span>
            <span className="arr"></span>
          </a>
        </div>
      </div>
    </section>
  );
}

function Footer({ lang }) {
  const f = CONTENT.footer;
  return (
    <footer className="site-foot">
      <div className={`quote reveal ${lang === 'en' ? 'en' : ''}`}>
        “{f.quote[lang]}”
      </div>
      <div className="line reveal d1">
        <div>{f.line[lang]}</div>
        <div style={{marginTop: 8, opacity: 0.6}}>TOKYO · DAIKANYAMA</div>
        <div style={{marginTop: 2, opacity: 0.6}}>35.6489° N  ·  139.7031° E</div>
      </div>
    </footer>
  );
}

Object.assign(window, { Studio, Process, Journal, Contact, Footer });