// ─── Company page ──────────────────────────────────────────────

function Company({ go }) {
  return (
    <div className="page">
      <PageHeader
        eyebrow="COMPANY"
        num="01"
        title={<><span style={{ color: "var(--accent-strong)" }}>技術を、手段</span>として<br />使える会社であること。</>}
        lead="2022年創業。少数精鋭の体制で、深く長く続く関係を優先してきました。" />

      <CompanyInfo />
      <CompanyMission />
      <CompanyTeam />
      <BigCTA go={go} />
    </div>);

}

function CompanyInfo() {
  const rows = [
  { k: "会社名", v: "UIARB合同会社 / UIARB LLC" },
  { k: "設立", v: "2022年2月" },
  { k: "代表社員", v: "伊良部　雅洋" },
  { k: "所在地", v: "〒900-0013 沖縄県那覇市牧志2－17－27－401" },
  { k: "資本金", v: "300万円" },
  { k: "事業内容", v: "Webサイト・システム開発、保守運用、SEO対策、ITコンサルティング" },
  { k: "取引銀行", v: "沖縄銀行 / GMOあおぞらネット銀行" },
  { k: "主要取引先", v: "製造業 / SaaS / 医療法人 / 小売・EC / 公共団体" }];

  return (
    <section className="section" style={{ paddingTop: 40 }}>
      <div className="wrap stack-mobile company-info__grid">
        <div>
          <Eyebrow num="01">CORPORATE PROFILE</Eyebrow>
          <h2 className="h1 company-info__title">会社概要</h2>
        </div>
        <dl className="company-info__dl">
          {rows.map((r, i) =>
          <div key={i} className="info-row">
              <dt className="info-row__key">{r.k}</dt>
              <dd className="info-row__val">{r.v}</dd>
            </div>
          )}
        </dl>
      </div>
    </section>);

}

function CompanyMission() {
  return (
    <section className="section" style={{ background: "var(--bg-dark)", color: "#fff" }}>
      <div className="wrap" style={{ maxWidth: 980 }}>
        <Eyebrow num="02"><span style={{ color: "var(--accent)" }}>MISSION</span></Eyebrow>
        <h2 className="h-display" style={{ marginTop: 32, color: "#fff" }}>
          作って終わる会社ではなく、<br />
          <span style={{ color: "var(--accent)" }}>育てる会社</span>でありたい。
        </h2>
        <p className="lead" style={{ marginTop: 40, color: "rgba(255,255,255,0.7)", maxWidth: 720 }}>
          Webは、公開した瞬間から劣化が始まります。世の中の変化・技術の変化・ユーザーの変化に、静かに、確実に、追従し続ける。それが私たちUIARBの仕事です。技術は、事業のゴールに到達するための手段。目的ではありません。
        </p>
      </div>
    </section>);

}

function CompanyTeam() {
  const members = [
  { n: "伊良部 雅洋", r: "代表 / テックリード", b: "Web業25年。WordPress / Next.js / AWS", avatar: 222 },
  { n: "伊敷 和哉", r: "UIデザイナー", b: "情報設計・UX。", avatar: 340 },
  { n: "小林 俊介", r: "バックエンドエンジニア", b: "PHP / Node.js / Go。大規模EC運用", avatar: 160 },
  { n: "森下 綾乃", r: "SEOコンサルタント", b: "テクニカルSEO/コンテンツ戦略/BtoB領域", avatar: 30 }];

  return (
    <section className="section">
      <div className="wrap">
        <SectionHeader eyebrowNum="03" eyebrow="TEAM" title="少人数で、深く。" lead="プロジェクトに関わる顔が見える体制。大人数の下請けに流す構造を採りません。" />
        <div className="team-grid">
          {members.map((m, i) =>
          <div key={i}>
              <div className="team-member__avatar" style={{ background: `linear-gradient(135deg, oklch(0.82 0.08 ${m.avatar}), oklch(0.58 0.2 ${m.avatar}))` }}>
                <div className="team-member__avatar-overlay" />
                <div className="mono team-member__avatar-label">
                  UIARB · {String(i + 1).padStart(2, "0")}
                </div>
              </div>
              <h3 className="serif team-member__name">{m.n}</h3>
              <div className="team-member__role">{m.r}</div>
              <p className="team-member__bio">{m.b}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

Object.assign(window, { Company });