/* ============ Member / Company / Footer ============ */

function Member() {
  const skills = ["Product Design", "Mobile App Development", "AI", "Robotics", "Business Development"];
  return (
    <section className="member section wrap" id="member">
      <div className="sec-head">
        <div className="eyebrow"><span className="idx">05</span> Member</div>
        <div className="mono sec-co">FOUNDING TEAM / 01</div>
      </div>
      <div className="member-grid">
        <Reveal cls="member-photo">
          <div className="member-photo-frame">
            <img src="assets/member-satoshi.png" alt="中本 慧思 — Founder / CEO" loading="lazy" />
            <div className="member-ph-hud mono"><span>Satoshi NAKAMOTO</span><span>FOUNDER / CEO</span></div>
            <span className="member-corner tl"></span><span className="member-corner tr"></span>
            <span className="member-corner bl"></span><span className="member-corner br"></span>
          </div>
        </Reveal>
        <div className="member-info">
          <Reveal d1>
            <div className="mono member-role">FOUNDER / CEO</div>
            <h2 className="member-name">中本 慧思<span className="mono">Satoshi Nakamoto</span></h2>
          </Reveal>
          <Reveal d2 cls="member-bio">
            <p>HASHBIT株式会社 Founder / CEO。ソフトウェア開発、AI、ロボティクス、プロダクト設計を横断し、現場の課題を実際に使える仕組みに変える。</p>
            <p>教育、地域、スポーツ、業務DXなど、複数領域でプロダクト開発と実証実験に取り組む。</p>
          </Reveal>
          <Reveal d3 cls="member-skills">
            <div className="mono ms-label">得意分野 / EXPERTISE</div>
            <div className="kicker-row">{skills.map(s => <span key={s} className="tag dot">{s}</span>)}</div>
          </Reveal>
          <Reveal d4 cls="member-links">
            <a href="https://x.com/osatoosi" target="_blank" rel="noreferrer" className="member-link">X (Twitter) <span className="mono">↗</span></a>
            <a href="https://github.com/osato07" target="_blank" rel="noreferrer" className="member-link">GitHub <span className="mono">↗</span></a>
            <a href="https://note.com/sato4n" target="_blank" rel="noreferrer" className="member-link">note <span className="mono">↗</span></a>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function Company() {
  const rows = [
    ["会社名", "HASHBIT株式会社（ハッシュビット株式会社）"],
    ["英語表記", "HASHBIT Inc."],
    ["代表者", "中本 慧思（Founder / CEO）"],
    ["所在地", "徳島県名西郡神山町神領字大埜地299番地1\u3000神山まるごと高専 ROOMS・Base"],
    ["設立", "2026年6月5日"],
    ["法人番号", "6480001013195"],
    ["DUNS番号", "699568093"],
  ];
  const biz = [
    "アプリケーションソフトの企画、開発、設計、配信、製造、販売及びコンサルティング",
    "IoT（モノのインターネット）デバイス、ウェアラブル端末、電子機器及び関連ハードウェアの企画、開発、設計、製造、販売及びコンサルティング",
    "自動運転技術及びモビリティシステムに関する企画、開発、設計、製造、販売及びコンサルティング",
    "国、地方自治体及び公共団体に対する、前各号の技術を活用した地域課題解決支援及びコンサルティング",
    "過疎地域等における移動、物流、生活支援に関するモビリティサービスの提供及び機器の販売",
    "人工知能（AI）を活用したソフトウェア・システムの企画、開発、設計、製造、販売及びコンサルティング",
    "インターネットを利用した各種情報提供サービス及び各種情報収集サービス",
    "ステーブルコイン、暗号資産に関する企画、開発、設計、製造、販売及びコンサルティング",
    "旅館業法に基づく宿泊施設の経営、受託運営及び管理（無人・省人化ホテル等を含む）",
    "住宅宿泊事業法に基づく住宅宿泊事業、住宅宿泊管理業及び住宅宿泊仲介業",
    "イベント、教育授業に関する企画、開発、設計、製造、販売及びコンサルティング",
    "上記に関する福祉事業者向けの事業の企画、開発、設計、製造、販売及びコンサルティング",
    "映像、音声その他の音響等によるデジタルコンテンツの企画、制作、配信及び販売",
    "特許権、実用新案権、商標権、意匠権、著作権等の知的財産権の取得、譲渡、使用許諾及び管理",
    "コンピューターシステム及びハードウェアの受託開発、保守、運用及び管理",
    "広告業、広告宣伝に関する企画及び制作並びにマーケティングリサーチ業務",
    "人材紹介、人材派遣等の人材関連事業",
    "前各号に附帯関連する一切の事業"
  ];
  return (
    <section className="company section" id="company">
      <div className="wrap">
        <div className="sec-head">
          <div className="eyebrow"><span className="idx">06</span> Company</div>
          <div className="mono sec-co">CORPORATE PROFILE</div>
        </div>
        <div className="company-grid">
          <div className="company-info">
            {rows.map((r,i) => (
              <Reveal key={r[0]} cls="company-row">
                <span className="company-k mono">{r[0]}</span>
                <span className="company-v">{r[1]}</span>
              </Reveal>
            ))}
          </div>
          <div className="company-biz">
            <div className="company-biz-head">
              <div>
                <div className="mono ms-label">事業内容 / BUSINESS</div>
                <p>登記上の事業目的は幅広いため、LPでは主要領域だけを抜粋しています。</p>
              </div>
              <a className="btn ghost company-more" href="company.html">全てを見る <span className="arr">→</span></a>
            </div>
            <ul>
              {biz.slice(0, 5).map((b,i) => (
                <Reveal key={b} tag="li" cls="company-biz-item">
                  <span className="mono">{String(i+1).padStart(2,"0")}</span>{b}
                </Reveal>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer({ go }) {
  const sitemap = [
    ["home", "Home", "トップ"],
    ["works", "Works", "制作実績"],
    ["member", "Member", "メンバー"],
    ["company", "Company", "会社情報"],
    ["contact", "Contact", "お問い合わせ"]
  ];
  const services = ["Web / App Development", "AI Integration", "IoT / Hardware", "DX Consulting", "Prototype Build"];
  const social = [
    ["X (Twitter)", "https://x.com/osatoosi"],
    ["GitHub", "https://github.com/osato07"],
    ["note", "https://note.com/sato4n"]
  ];
  const jump = (id) => {
    if (window.location.pathname.replace(/\/$/, "") !== "") {
      window.location.href = `/#${id}`;
      return;
    }
    go(id);
  };
  return (
    <footer className="footer" id="footer">
      <div className="wrap">
        <div className="footer-hero">
          <div>
            <img className="footer-logo" src="assets/logo/lockup-green-h.png" alt="HASHBIT" />
            <p>ハードウェアとソフトウェアを横断して、誰かの日常のインフラになるものをつくります。</p>
          </div>
          <div className="footer-cta">
            <span className="mono">READY TO BUILD?</span>
            <h3>アイデア段階から、<br/>一緒に形にしましょう。</h3>
            <button className="btn accent" onClick={() => jump("contact")}>Contact Us <span className="arr">→</span></button>
          </div>
        </div>

        <div className="footer-map">
          <div className="footer-col footer-site">
            <span className="mono">SITEMAP</span>
            <div className="footer-link-grid">
              {sitemap.map(([id, en, ja]) => (
                <button key={id} onClick={() => jump(id)}>
                  <b>{en}</b><small>{ja}</small>
                </button>
              ))}
            </div>
          </div>
          <div className="footer-col">
            <span className="mono">SERVICE</span>
            {services.map(s => <span key={s} className="footer-text-link">{s}</span>)}
          </div>
          <div className="footer-col">
            <span className="mono">COMPANY</span>
            <a href="company.html">Corporate Profile ↗</a>
            <a href="company.html#business">Business Detail ↗</a>
            <a href="mailto:thankyou@hashbit.co.jp">thankyou@hashbit.co.jp</a>
          </div>
          <div className="footer-col">
            <span className="mono">SOCIAL</span>
            {social.map(([label, href]) => <a key={label} href={href} target="_blank" rel="noreferrer">{label} ↗</a>)}
          </div>
          <div className="footer-col footer-addr">
            <span className="mono">OFFICE</span>
            <p>徳島県名西郡神山町神領字大埜地299-1<br/>神山まるごと高専 ROOMS・Base</p>
            <a href="https://maps.google.com/?q=徳島県名西郡神山町神領字大埜地299-1" target="_blank" rel="noreferrer">Google Maps ↗</a>
          </div>
        </div>

        <div className="footer-bottom mono">
          <span>© 2026 HASHBIT Inc.</span>
          <span>HARDWARE × SOFTWARE</span>
          <span>法人番号 6480001013195</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Member, Company, Footer });