/* TEN GROW — Company (会社概要) — standard corporate tone, photo-backed */
const DS_Company = window.TENGROWDesignSystem_8927da;

function TG_Company() {
  const { Breadcrumb } = DS_Company;
  const { Container, Section, Photo, GhostWord, Reveal, Marker } = window;

  const values = [
    "困難から逃げない",
    "仲間と勝つ",
    "結果にこだわる",
    "本質を追求する",
    "当事者意識を持つ",
    "挑戦を楽しむ",
    "常識を疑い、市場に「新しい一手」を創る",
  ];

  const jpHead = { fontFamily: "var(--font-jp-heading)", fontWeight: 800, letterSpacing: "-0.02em", lineHeight: 1.3 };

  // MVV block over a dark photo, with a giant ghost word (SARUCREW-like)
  const MVVBlock = ({ no, en, jp, ghost, photoLabel, children, flip }) => (
    <section style={{ position: "relative", background: "var(--ink-900)", color: "#fff", overflow: "hidden", padding: "var(--section-y) 0" }}>
      <span aria-hidden="true" style={{ position: "absolute", top: "50%", [flip ? "left" : "right"]: "-2%", transform: "translateY(-50%)", fontFamily: "var(--font-en-display)", fontWeight: 800, textTransform: "uppercase", fontSize: "clamp(6rem,4rem + 14vw,18rem)", lineHeight: 0.8, color: "#fff", opacity: 0.045, whiteSpace: "nowrap", pointerEvents: "none" }}>{ghost}</span>
      <Container size="wide" style={{ position: "relative", zIndex: 1 }}>
        <Reveal><Marker no={no} en={en} invert /></Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(2rem,4vw,4.5rem)", alignItems: "center" }} className="tg-2col">
          <Reveal style={{ order: flip ? 2 : 1 }}>
            <div style={{ position: "relative", aspectRatio: "4 / 3", overflow: "hidden", border: "1px solid rgba(255,255,255,0.12)" }}>
              <Photo ratio="auto" label={photoLabel} radius="0" style={{ position: "absolute", inset: 0, height: "100%" }} />
              <div aria-hidden="true" style={{ position: "absolute", inset: 0, background: "linear-gradient(160deg, rgba(25,22,19,0.15), rgba(25,22,19,0.55))" }} />
            </div>
          </Reveal>
          <Reveal delay={120} style={{ order: flip ? 1 : 2 }}>
            <div>
              <h2 style={{ ...jpHead, color: "#fff", fontSize: "clamp(1.5rem,1.1rem + 1.6vw,2.25rem)", margin: "0 0 var(--space-5)" }}>{jp}</h2>
              {children}
            </div>
          </Reveal>
        </div>
      </Container>
    </section>
  );

  return (
    <div>
      {/* ===================== HERO — logo on brand-washed ink ===================== */}
      <section style={{ position: "relative", background: "var(--ink-900)", color: "#fff", overflow: "hidden", minHeight: "clamp(340px, 48vh, 500px)", display: "flex", flexDirection: "column" }}>
        <div aria-hidden="true" style={{ position: "absolute", top: "-30%", right: "-8%", width: "55%", height: "90%", background: "var(--gradient-brand)", filter: "blur(130px)", opacity: 0.18, pointerEvents: "none" }} />
        <span aria-hidden="true" style={{ position: "absolute", bottom: "-0.16em", left: "-0.03em", fontFamily: "var(--font-en-display)", fontWeight: 800, textTransform: "uppercase", fontSize: "clamp(5rem, 3rem + 16vw,18rem)", lineHeight: 0.8, color: "#fff", opacity: 0.06, whiteSpace: "nowrap", pointerEvents: "none" }}>Company</span>

        <Container size="wide" style={{ position: "relative", zIndex: 1, paddingTop: "var(--space-7)" }}>
          <div style={{ opacity: 0.85 }}>
            <Breadcrumb items={[{ label: "HOME", href: "#home" }, { label: "Company" }]} style={{ ["--color-text-muted"]: "rgba(251,246,238,0.7)" }} />
          </div>
        </Container>

        <Container size="wide" style={{ position: "relative", zIndex: 1, flex: 1, display: "flex", flexDirection: "column", justifyContent: "center", paddingTop: "var(--space-6)", paddingBottom: "var(--space-8)" }}>
          <Reveal>
            <img src="./assets/logo-horizontal-white.png" alt="TEN GROW" style={{ height: "clamp(46px, 5vw, 84px)", width: "auto", display: "block", marginBottom: "var(--space-6)" }} />
          </Reveal>
          <Reveal delay={80}>
            <div style={{ display: "flex", alignItems: "baseline", gap: "var(--space-4)", flexWrap: "wrap" }}>
              <h1 style={{ fontFamily: "var(--font-en-display)", fontWeight: 800, textTransform: "uppercase", letterSpacing: "0.02em", color: "#fff", fontSize: "clamp(2.25rem,1.6rem + 3.4vw,4rem)", lineHeight: 1, margin: 0 }}>Company</h1>
              <span style={{ fontFamily: "var(--font-jp-heading)", fontWeight: 700, fontSize: "1rem", letterSpacing: ".1em", color: "rgba(251,246,238,0.7)" }}>会社情報</span>
            </div>
          </Reveal>
        </Container>
      </section>

      {/* ===================== MESSAGE ===================== */}
      <Section tone="cream" style={{ position: "relative", overflow: "hidden" }}>
        <div style={{ position: "relative", zIndex: 1 }}>
          <Reveal><Marker no="01" en="Message" /></Reveal>
          <div style={{ display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: "clamp(2rem,5vw,5rem)", alignItems: "start" }} className="tg-2col">
            <Reveal>
              <h2 style={{ ...jpHead, fontSize: "clamp(1.6rem,1.1rem + 1.9vw,2.5rem)", margin: 0, lineHeight: 1.45 }}>
                広告を「かけて終わり」に<br />しないために。
              </h2>
            </Reveal>
            <Reveal delay={120}>
              <div>
                <p style={{ color: "var(--color-text-secondary)", fontSize: "var(--fs-body)", lineHeight: "var(--lh-body)", marginTop: 0 }}>
                  TEN GROW は、2026年に新宿で歩みを始めた広告会社です。社名の「GROW」には、関わるすべての企業の売上と成長が、まっすぐ上へ伸びていけるように、という想いを込めています。
                </p>
                <p style={{ color: "var(--color-text-secondary)", fontSize: "var(--fs-body)", lineHeight: "var(--lh-body)" }}>
                  成果報酬型だからこそ、私たちはクライアントと同じ方向を見て、数字に責任を持ちます。困難から逃げず、結果にこだわり、市場に新しい一手を創り続ける。それが私たちの仕事です。
                </p>
                <div style={{ marginTop: "var(--space-6)", paddingTop: "var(--space-5)", borderTop: "1px solid var(--line)" }}>
                  <div style={{ fontFamily: "var(--font-en-ui)", fontSize: "0.6875rem", letterSpacing: ".18em", color: "var(--color-text-muted)", fontWeight: 700 }}>REPRESENTATIVE DIRECTOR</div>
                  <div style={{ fontFamily: "var(--font-jp-heading)", fontWeight: 700, fontSize: "1.25rem", marginTop: 4 }}>代表取締役　篠原 颯汰</div>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </Section>

      {/* ===================== PHILOSOPHY (MVV) ===================== */}
      <section style={{ position: "relative", background: "linear-gradient(180deg, var(--warm-white), var(--color-bg))", overflow: "hidden", padding: "var(--section-y) 0" }}>
        <div aria-hidden="true" style={{ position: "absolute", top: "-10%", right: "-6%", width: "42%", height: "80%", background: "var(--gradient-brand)", filter: "blur(150px)", opacity: 0.1, pointerEvents: "none" }} />
        <Container size="wide" style={{ position: "relative", zIndex: 1 }}>
          <div style={{ display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: "clamp(2.5rem,5vw,5.5rem)", alignItems: "start" }} className="tg-2col">
            {/* LEFT — intro */}
            <Reveal>
              <div>
                <div style={{ display: "inline-flex", alignItems: "center", gap: "0.6rem", marginBottom: "var(--space-5)" }}>
                  <span style={{ width: 8, height: 20, background: "var(--gradient-brand)", borderRadius: 2, display: "inline-block" }} />
                  <span style={{ fontFamily: "var(--font-en-ui)", fontWeight: 800, fontSize: "0.75rem", letterSpacing: ".2em", color: "var(--ink-500)" }}>COMPANY OVERVIEW</span>
                </div>
                <h2 style={{ ...jpHead, fontSize: "clamp(2rem,1.4rem + 2.8vw,3.5rem)", margin: 0 }}>TEN GROWの理念</h2>
                <div style={{ fontFamily: "var(--font-en-ui)", fontWeight: 700, fontSize: "0.9375rem", letterSpacing: ".18em", background: "var(--gradient-brand)", WebkitBackgroundClip: "text", backgroundClip: "text", WebkitTextFillColor: "transparent", marginTop: "var(--space-3)" }}>MISSION / VISION / VALUES</div>
                <div style={{ width: 64, height: 3, background: "var(--gradient-brand)", margin: "var(--space-5) 0 var(--space-7)" }} />
                <p style={{ ...jpHead, fontWeight: 700, fontSize: "clamp(1.5rem,1.1rem + 1.6vw,2.25rem)", lineHeight: 1.45, margin: "0 0 var(--space-5)" }}>
                  挑戦と成長を、<br />仕組みで再現する。
                </p>
                <p style={{ color: "var(--color-text-secondary)", fontSize: "var(--fs-body)", lineHeight: "var(--lh-body)", maxWidth: "28em" }}>
                  私たちは、マーケティングの力で企業の可能性を最大化し、クライアントと社員の未来を切り拓きます。変化を恐れず、成果にこだわり、社会に新しい価値を届ける。それが TEN GROW の存在意義です。
                </p>
                <img src="./assets/logo-horizontal.png" alt="TEN GROW" style={{ height: "clamp(40px, 4vw, 60px)", width: "auto", display: "block", marginTop: "var(--space-8)" }} />
              </div>
            </Reveal>

            {/* RIGHT — MVV cards */}
            <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-5)" }}>
              <Reveal delay={80}>
                <div style={{ display: "flex", alignItems: "center", gap: "clamp(1.25rem,3vw,2.25rem)", background: "var(--warm-white)", border: "1px solid var(--line)", borderRadius: "var(--radius-lg)", padding: "clamp(1.5rem,3vw,2.25rem)", boxShadow: "var(--shadow-sm)" }}>
                  <span style={{ flexShrink: 0, width: 72, height: 72, borderRadius: "50%", background: "var(--color-bg)", display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "var(--shadow-xs)" }}>
                    <svg width="34" height="34" viewBox="0 0 24 24" fill="none" style={{ color: "var(--flame-to)" }}><circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.6"/><circle cx="12" cy="12" r="5" stroke="currentColor" strokeWidth="1.6"/><circle cx="12" cy="12" r="1.4" fill="currentColor"/></svg>
                  </span>
                  <div>
                    <div style={{ fontFamily: "var(--font-en-ui)", fontWeight: 800, fontSize: "0.9375rem", letterSpacing: ".14em", color: "var(--flame-to)", marginBottom: "0.5rem" }}>MISSION</div>
                    <p style={{ ...jpHead, fontWeight: 700, fontSize: "clamp(1.0625rem,0.9rem + 0.6vw,1.3rem)", lineHeight: 1.6, margin: 0 }}>マーケティングの力で経営課題を解決し、クライアントと社員の人生が変わる転換点を創る。</p>
                  </div>
                </div>
              </Reveal>
              <Reveal delay={160}>
                <div style={{ display: "flex", alignItems: "center", gap: "clamp(1.25rem,3vw,2.25rem)", background: "var(--warm-white)", border: "1px solid var(--line)", borderRadius: "var(--radius-lg)", padding: "clamp(1.5rem,3vw,2.25rem)", boxShadow: "var(--shadow-sm)" }}>
                  <span style={{ flexShrink: 0, width: 72, height: 72, borderRadius: "50%", background: "var(--color-bg)", display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "var(--shadow-xs)" }}>
                    <svg width="34" height="34" viewBox="0 0 24 24" fill="none" style={{ color: "var(--flame-to)" }}><path d="M2 12s3.5-6.5 10-6.5S22 12 22 12s-3.5 6.5-10 6.5S2 12 2 12z" stroke="currentColor" strokeWidth="1.6"/><circle cx="12" cy="12" r="2.6" stroke="currentColor" strokeWidth="1.6"/></svg>
                  </span>
                  <div>
                    <div style={{ fontFamily: "var(--font-en-ui)", fontWeight: 800, fontSize: "0.9375rem", letterSpacing: ".14em", color: "var(--flame-to)", marginBottom: "0.5rem" }}>VISION</div>
                    <p style={{ ...jpHead, fontWeight: 700, fontSize: "clamp(1.0625rem,0.9rem + 0.6vw,1.3rem)", lineHeight: 1.6, margin: 0 }}>広告代理店という枠を超え、クライアントと伴走する利益創出パートナーとなる。</p>
                  </div>
                </div>
              </Reveal>
              <Reveal delay={240}>
                <div style={{ background: "var(--warm-white)", border: "1px solid var(--line)", borderRadius: "var(--radius-lg)", padding: "clamp(1.5rem,3vw,2.25rem)", boxShadow: "var(--shadow-sm)" }}>
                  <div style={{ fontFamily: "var(--font-en-ui)", fontWeight: 800, fontSize: "0.9375rem", letterSpacing: ".14em", color: "var(--flame-to)", marginBottom: "var(--space-4)" }}>VALUES</div>
                  <div className="tg-values-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.6rem 0.9rem" }}>
                    {values.map((v, i) => (
                      <div key={i} style={{ display: "flex", alignItems: "center", gap: "0.6rem", background: "var(--color-bg)", borderRadius: "var(--radius-sm)", padding: "0.7rem 0.9rem", gridColumn: i === values.length - 1 ? "1 / -1" : "auto" }}>
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" style={{ flexShrink: 0 }}><circle cx="12" cy="12" r="10" fill="var(--flame-to)"/><path d="M8 12.5l2.5 2.5 5.5-5.5" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
                        <span style={{ fontFamily: "var(--font-jp-heading)", fontWeight: 700, fontSize: "0.9375rem", letterSpacing: "-0.01em", color: "var(--ink-900)", lineHeight: 1.4 }}>{v}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </Reveal>
            </div>
          </div>
        </Container>
      </section>

      {/* ===================== OVERVIEW ===================== */}
      <Section tone="sand" style={{ position: "relative", overflow: "hidden" }}>
        <GhostWord style={{ bottom: "-1rem", right: "-1rem" }}>Company</GhostWord>
        <div style={{ position: "relative", zIndex: 1 }}>
          <Reveal><Marker no="05" en="Overview" /></Reveal>
          <div style={{ display: "grid", gridTemplateColumns: "0.8fr 1.2fr", gap: "var(--space-9)", alignItems: "start" }} className="tg-2col">
            <Reveal>
              <div>
                <h2 style={{ ...jpHead, fontSize: "var(--fs-h2)", margin: 0 }}>会社概要</h2>
                <p style={{ marginTop: "var(--space-5)", color: "var(--color-text-secondary)", fontSize: "var(--fs-body)", lineHeight: "var(--lh-body)", maxWidth: "24em" }}>
                  成果に向き合い、企業の成長に伴走する。TEN GROW はマーケティングを通じて、新しい事業機会を生み出します。
                </p>
                <div style={{ marginTop: "var(--space-8)" }}>
                  <div style={{ fontFamily: "var(--font-en-ui)", fontWeight: 800, fontSize: "0.625rem", letterSpacing: ".2em", color: "var(--ink-500)", marginBottom: "var(--space-3)" }}>GROUP COMPANIES</div>
                  <div style={{ display: "flex", flexDirection: "column" }}>
                    {[
                      { name: "株式会社fR", note: "再生可能エネルギー / ライフサポート", href: "https://frr.co.jp/" },
                      { name: "株式会社Fortech", note: "太陽光施工", href: "https://ffortech.co.jp/" },
                    ].map((g, i) => (
                      <a key={i} href={g.href} target="_blank" rel="noopener noreferrer" className="tg-group-link" style={{ display: "flex", alignItems: "center", gap: "0.6rem", padding: "0.85rem 0", borderTop: "1px solid var(--line)", textDecoration: "none", color: "var(--ink-900)", transition: "color var(--dur-fast) var(--ease-out)" }}>
                        <span style={{ fontFamily: "var(--font-jp-heading)", fontWeight: 700, fontSize: "1.0625rem", letterSpacing: "-0.01em" }}>{g.name}</span>
                        <span style={{ color: "var(--color-text-muted)", fontSize: "0.75rem", flex: 1 }}>{g.note}</span>
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style={{ color: "var(--flame-to)", flexShrink: 0 }}><path d="M7 17L17 7M17 7H9M17 7v8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
                      </a>
                    ))}
                  </div>
                </div>
              </div>
            </Reveal>
            <Reveal delay={120}>
              <dl style={{ margin: 0, borderTop: "1px solid var(--line-strong)" }}>
                {[
                  ["会社名", "株式会社TEN GROW"],
                  ["設立", "2026年7月3日"],
                  ["資本金", "3,000,000円"],
                  ["代表者", "代表取締役　篠原 颯汰"],
                  ["所在地", <>〒160-0022　東京都新宿区新宿1丁目2-9　JF新宿御苑ビル3F</>],
                  ["電話番号", "03-6384-1688"],
                  ["メール", "info@ten-grow.co.jp"],
                  ["事業内容", "成果報酬型広告運用 / 予算運用型広告運用 / SNSショート動画広告 / LP作成・CVR分析 / DX化支援 / HP作成"],
                ].map(([label, val], i) => (
                  <div key={i} className="tg-info-row" style={{ display: "grid", gridTemplateColumns: "minmax(7rem, 0.34fr) 1fr", gap: "var(--space-5)", alignItems: "start", padding: "clamp(1rem,2vw,1.4rem) var(--space-4)", borderBottom: "1px solid var(--line)", transition: "background var(--dur-fast) var(--ease-out)" }}>
                    <dt style={{ margin: 0, fontFamily: "var(--font-jp-heading)", fontWeight: 700, fontSize: "var(--fs-body-sm)", letterSpacing: "-0.01em", color: "var(--ink-900)", paddingTop: "0.1em" }}>{label}</dt>
                    <dd style={{ margin: 0, color: "var(--color-text-secondary)", fontSize: "var(--fs-body)", lineHeight: "var(--lh-body)" }}>{val}</dd>
                  </div>
                ))}
              </dl>
            </Reveal>
          </div>
        </div>
      </Section>

      {/* ===================== ACCESS ===================== */}
      <Section tone="cream" style={{ position: "relative", overflow: "hidden" }}>
        <div style={{ position: "relative", zIndex: 1 }}>
          <Reveal><Marker no="06" en="Access" /></Reveal>
          <div style={{ display: "grid", gridTemplateColumns: "0.85fr 1.15fr", gap: "var(--space-8)", alignItems: "center" }} className="tg-2col">
            <Reveal>
              <div>
                <h2 style={{ ...jpHead, fontSize: "var(--fs-h2)", margin: "0 0 var(--space-5)" }}>アクセス</h2>
                <p style={{ color: "var(--color-text-secondary)", lineHeight: "var(--lh-body)" }}>
                  〒160-0022<br />東京都新宿区新宿1丁目2-9<br />JF新宿御苑ビル3F<br /><br />東京メトロ 新宿御苑前駅 より徒歩圏
                </p>
                <a
                  href="https://www.google.com/maps/search/?api=1&query=%E6%9D%B1%E4%BA%AC%E9%83%BD%E6%96%B0%E5%AE%BF%E5%8C%BA%E6%96%B0%E5%AE%BF1%E4%B8%81%E7%9B%AE2-9+JF%E6%96%B0%E5%AE%BF%E5%BE%A1%E8%8B%91%E3%83%93%E3%83%AB"
                  target="_blank" rel="noopener noreferrer"
                  style={{ display: "inline-flex", alignItems: "center", gap: "0.6rem", marginTop: "var(--space-5)", fontFamily: "var(--font-jp-heading)", fontWeight: 700, fontSize: "0.9375rem", letterSpacing: ".04em", color: "var(--color-primary)", textDecoration: "none" }}
                >
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M12 21s7-6.2 7-11a7 7 0 10-14 0c0 4.8 7 11 7 11z" stroke="currentColor" strokeWidth="1.8"/><circle cx="12" cy="10" r="2.4" stroke="currentColor" strokeWidth="1.8"/></svg>
                  Googleマップで見る
                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </a>
              </div>
            </Reveal>
            <Reveal delay={120}>
              <div style={{ borderRadius: "var(--radius-lg)", overflow: "hidden", border: "1px solid var(--line)", boxShadow: "var(--shadow-sm)", aspectRatio: "16 / 10" }}>
                <iframe
                  title="TEN GROW 所在地 — Googleマップ"
                  src="https://maps.google.com/maps?q=%E6%9D%B1%E4%BA%AC%E9%83%BD%E6%96%B0%E5%AE%BF%E5%8C%BA%E6%96%B0%E5%AE%BF1%E4%B8%81%E7%9B%AE2-9&z=16&output=embed"
                  style={{ width: "100%", height: "100%", border: 0, display: "block" }}
                  loading="lazy"
                  referrerPolicy="no-referrer-when-downgrade"
                  allowFullScreen
                />
              </div>
            </Reveal>
          </div>
        </div>
      </Section>
    </div>
  );
}
window.TG_Company = TG_Company;