// Company — 参照デザインに合わせてシンプル化。左：ロゴ、右：会社名・住所・代表者。
const COMPANY_ROWS = [
  { k: "会社名", v: "株式会社B-Steep" },
  {
    k: "所在地",
    v: "神奈川県藤沢市",
  },
  { k: "代表者", v: "武藤 匠吾" },
];

function Company() {
  return (
    <section id="company" style={{ background: "#fff", borderTop: "1px solid var(--sky-200)" }}>
      <div className="wrap" style={{ paddingTop: 56, paddingBottom: 80 }}>
        <div className="section-head">
          <span className="en">Company</span>
          <span className="ja">会社情報</span>
        </div>

        <div
          className="company-layout"
          style={{
            marginTop: 24,
            borderTop: "1px solid var(--navy-900)",
            display: "grid",
            gap: 0,
            alignItems: "stretch",
          }}
        >
          {/* Left: Logo showcase */}
          <div
            className="company-logo-cell"
            style={{
              background: "linear-gradient(135deg, #eaf4fb 0%, #dbeaf7 100%)",
              display: "flex", alignItems: "center", justifyContent: "center",
              padding: "56px 32px",
              minHeight: 220,
            }}
          >
            <img
              src="assets/b-steep-logo-full.png"
              alt="B-Steep"
              style={{
                maxWidth: "100%",
                width: 320,
                height: "auto",
                display: "block",
              }}
            />
          </div>

          {/* Right: info table */}
          <dl
            className="company-info-cell"
            style={{
              margin: 0, padding: 0,
              background: "#fff",
              display: "flex", flexDirection: "column",
              justifyContent: "center",
            }}
          >
            {COMPANY_ROWS.map((row, i) => (
              <div
                key={row.k}
                style={{
                  display: "grid",
                  gridTemplateColumns: "140px 1fr",
                  gap: 24,
                  padding: "22px 8px 22px 32px",
                  borderBottom: i === COMPANY_ROWS.length - 1 ? "none" : "1px solid var(--hair)",
                  alignItems: "baseline",
                }}
              >
                <dt style={{
                  fontSize: 12, color: "var(--ink-3)", fontWeight: 500, letterSpacing: "0.06em",
                }}>
                  {row.k}
                </dt>
                <dd style={{ margin: 0, fontSize: 13.5, color: "var(--navy-900)", fontWeight: 500, lineHeight: 1.75 }}>
                  {row.v}
                </dd>
              </div>
            ))}
          </dl>
        </div>
      </div>

      <style>{`
        .company-layout {
          grid-template-columns: 1fr;
        }
        @media (min-width: 900px) {
          .company-layout {
            grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
          }
        }
        @media (max-width: 899px) {
          .company-logo-cell {
            min-height: 120px !important;
            padding: 28px 24px !important;
          }
          .company-logo-cell img {
            width: 200px !important;
          }
        }
      `}</style>
    </section>
  );
}

window.Company = Company;