// Sub-page content — Ventures (registry), About, Contact.
// Each is mounted inside PageShell by its own HTML file.

function VenturesContent() {
  const { t } = useI18n();
  const [drawerOpen, setDrawerOpen] = React.useState(false);
  const v = t.ventures;
  return (
    <React.Fragment>
      <header className="page-head wrap">
        <h1 className="rv">{v.heading}<span style={{ color: 'var(--accent)' }}>_</span></h1>
      </header>
      <main className="wrap" style={{ paddingBottom: 60 }}>
        <div className="reg rv">
          <div className="reg-row head">
            <span>{v.head[0]}</span><span>{v.head[1]}</span>
            <span className="hide-sm">{v.head[2]}</span><span>{v.head[3]}</span>
            <span className="hide-sm">{v.head[4]}</span>
          </div>
          <div className="reg-row live" onClick={() => setDrawerOpen(true)}>
            <span className="reg-num">01</span>
            <span className="name">{v.bridge.name}</span>
            <span className="hide-sm" style={{ color: 'var(--muted)' }}>{v.bridge.sector}</span>
            <span><span style={{ color: 'var(--accent)' }}>●</span> {v.bridge.status}</span>
            <span className="reg-num hide-sm">{v.bridge.since}</span>
          </div>
          <div className="reg-row live" onClick={() => window.open(v.v02.url, '_blank', 'noopener')}>
            <span className="reg-num">02</span>
            <a className="name" href={v.v02.url} target="_blank" rel="noopener noreferrer"
              style={{ color: 'inherit', textDecoration: 'none' }} onClick={(e) => e.stopPropagation()}>{v.v02.name}</a>
            <span className="hide-sm" style={{ color: 'var(--muted)' }}>{v.v02.sector}</span>
            <span><span style={{ color: 'var(--accent)' }}>●</span> {v.v02.status}</span>
            <span className="reg-num hide-sm">{v.v02.since}</span>
          </div>
          {[
            { n: '03', label: v.reserved, open: false },
            { n: '04', label: v.openSlot, open: true },
            { n: '05', label: v.openSlot, open: true },
            { n: '06', label: v.openSlot, open: true },
          ].map((row) => (
            <div className={'reg-row ghost' + (row.open ? ' open' : '')} key={row.n}>
              <span className="reg-num">{row.n}</span>
              <span>{row.label}</span>
              <span className="hide-sm">·</span><span>·</span><span className="hide-sm">·</span>
            </div>
          ))}
        </div>
        <section style={{ padding: '60px 0 40px' }}>
          <div className="photo rv" style={{ height: 380 }}>
            <BridgeMark />
          </div>
          <div className="spot-meta rv">
            <div>
              <h3 style={{ margin: '0 0 4px', fontSize: 24, fontWeight: 600 }}>Bridge Web Design</h3>
              <span className="tag"><span className="dot">●</span> {t.spot.meta}</span>
            </div>
            <button className="btn btn-ghost" onClick={() => setDrawerOpen(true)}>{v.open}</button>
          </div>
        </section>
        <section style={{ padding: '20px 0 40px' }}>
          <div className="photo rv" style={{ height: 380 }}>
            <MisebaMark />
          </div>
          <div className="spot-meta rv">
            <div>
              <h3 style={{ margin: '0 0 4px', fontSize: 24, fontWeight: 600 }}>{v.v02.name}</h3>
              <span className="tag"><span className="dot">●</span> {v.v02.meta}</span>
            </div>
            <a className="btn btn-ghost" href={v.v02.url} target="_blank" rel="noopener noreferrer">{v.v02.visit}</a>
          </div>
          <p className="rv" style={{ color: 'var(--muted)', maxWidth: 560, margin: '18px 0 0', lineHeight: 1.8 }}>{v.v02.copy}</p>
        </section>
      </main>
      <VentureDrawer open={drawerOpen} onClose={() => setDrawerOpen(false)} />
    </React.Fragment>
  );
}

function AboutContent() {
  const { t } = useI18n();
  const a = t.about;
  return (
    <React.Fragment>
      <header className="page-head wrap">
        <h1 className="rv">{a.heading}<span style={{ color: 'var(--accent)' }}>_</span></h1>
      </header>
      <main className="wrap" style={{ paddingBottom: 80 }}>
        <div className="verbs rv">
          {a.verbs.map(([verb, desc], i) => (
            <div className="verb-row" key={i}>
              <h3>{verb}</h3>
              <p>{desc}</p>
            </div>
          ))}
        </div>
        <div className="about-quote rv">
          <blockquote>“{a.quote}”</blockquote>
          <span className="tag" style={{ display: 'block', marginTop: 16 }}>{a.quoteBy}</span>
        </div>
      </main>
    </React.Fragment>
  );
}

function ContactContent() {
  const { t } = useI18n();
  const c = t.contact;
  return (
    <React.Fragment>
      <header className="page-head wrap">
        <h1 className="rv">{c.heading}<span style={{ color: 'var(--accent)' }}>_</span></h1>
      </header>
      <main className="wrap contact-body">
        <p className="rv" style={{ color: 'var(--muted)', maxWidth: 480, margin: 0 }}>{c.sub}</p>
        <div className="rv rv2">
          <a className="contact-email" href={'mailto:' + VESKA_EMAIL}>{VESKA_EMAIL}</a>
        </div>
        <span className="tag rv rv2" style={{ display: 'block' }}>{c.reply}</span>
      </main>
    </React.Fragment>
  );
}

function TeamContent() {
  const { t } = useI18n();
  const m = t.team;
  return (
    <React.Fragment>
      <header className="page-head wrap">
        <h1 className="rv">{m.heading}<span style={{ color: 'var(--accent)' }}>_</span></h1>
      </header>
      <main className="wrap" style={{ paddingBottom: 80 }}>
        <p className="rv" style={{ color: 'var(--muted)', maxWidth: 460, margin: '12px 0 0' }}>{m.intro}</p>
        <div className="team-grid rv">
          <div className="team-card">
            <div className="photo">
              <img className="founder-photo" src="veska-site/img/founder.jpg" alt="大西風五 Hugo Onishi — founder of Veska" />
            </div>
            <div className="team-body">
              <h3>{m.founderName}</h3>
              <span className="tag">{m.founderRole}</span>
              <span className="team-tick"></span>
              <p>{m.founderBio}</p>
            </div>
          </div>
          <div className="team-card ghost">
            <div className="team-body">
              <h3 style={{ opacity: 0.75 }}>{m.nextTitle}</h3>
              <span className="team-tick" style={{ opacity: 0.5 }}></span>
              <p>{m.nextCopy}</p>
              <a className="btn btn-ghost" href={'mailto:' + VESKA_EMAIL} style={{ alignSelf: 'flex-start' }}>{m.nextBtn}</a>
            </div>
          </div>
        </div>
      </main>
    </React.Fragment>
  );
}

Object.assign(window, { VenturesContent, AboutContent, ContactContent, TeamContent });