// Mission, Reason, Business, Stats, Insights, Careers CTA, Contact

function MissionSection() {
  const isMobile = useMediaQuery("(max-width: 768px)");
  return (
    <section id="mission" style={{ padding: isMobile ? "80px 20px" : "160px 48px", background: "#FFFFFF", position: "relative" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1.4fr", gap: isMobile ? 36 : 96, alignItems: "start" }}>
          <Reveal>
            <div>
              <SectionLabel>MISSION</SectionLabel>
              <h2 style={{
                fontFamily: 'var(--font-serif)',
                fontSize: isMobile ? 38 : 56,
                fontWeight: 400,
                color: "#1A1A1A",
                margin: "24px 0 32px",
                letterSpacing: "-0.01em",
                lineHeight: 1.15,
              }}>
                私たちの<em style={{ fontFamily: 'var(--font-serif)', fontStyle: "normal" }}>使命</em>
              </h2>
              <div style={{
                fontFamily: 'var(--font-mono-label)',
                fontSize: 11,
                letterSpacing: "0.2em",
                color: "var(--purple)",
                fontWeight: 500,
              }}>
                FROM "DISPATCH" TO "CO-CREATION"
              </div>
              <Button variant="secondary" href="about.html" style={{ marginTop: 40 }}>詳しく見る</Button>
              {/* Team photo anchor */}
              <div style={{
                marginTop: 48,
                borderRadius: 12,
                overflow: "hidden",
                position: "relative",
                aspectRatio: "4 / 3",
                boxShadow: "0 12px 32px rgba(124,92,255,0.12)",
              }}>
                <img src="uploads/photos/team-formal.jpg" alt="日本AIセンターのチーム" style={{
                  width: "100%", height: "100%", objectFit: "cover", objectPosition: "50% 35%", display: "block",
                }} />
                <div style={{
                  position: "absolute", bottom: 0, left: 0, right: 0,
                  padding: "32px 20px 16px",
                  background: "linear-gradient(180deg, transparent 0%, rgba(26,21,48,0.75) 100%)",
                  color: "#fff",
                }}>
                  <div style={{ fontFamily: 'var(--font-mono-label)', fontSize: 10, letterSpacing: "0.2em", color: "#E8E0FF", fontWeight: 500 }}>
                    — OUR TEAM —
                  </div>
                </div>
              </div>
            </div>
          </Reveal>

          <Reveal delay={100}>
            <div style={{ position: "relative" }}>
              <div style={{
                position: "absolute", left: isMobile ? -8 : -24, top: -16,
                fontFamily: 'var(--font-serif)', fontStyle: "italic",
                fontSize: isMobile ? 100 : 180, color: "var(--purple-light)",
                opacity: 0.7, lineHeight: 1, pointerEvents: "none",
                zIndex: 0,
              }}>"</div>
              <p style={{
                fontFamily: 'var(--font-serif)',
                fontSize: 22,
                lineHeight: 2,
                color: "#1A1A1A",
                margin: 0,
                fontWeight: 400,
                letterSpacing: "0.01em",
                position: "relative",
                zIndex: 1,
              }}>
                人材業界は、多重の中間業者と不透明な評価のなかで、エンジニアの価値を正当に届けられずにいます。<br /><br />
                私たち日本AIセンターは、<span style={{ color: "var(--purple)" }}>自社の業務をAIエージェントと人で動かす実例</span>を示しながら、人とAIが共に価値を生む新しい現場の形をつくります。<br /><br />
                <em style={{ fontFamily: 'var(--font-serif)', fontStyle: "italic" }}>"</em>派遣する<em style={{ fontFamily: 'var(--font-serif)', fontStyle: "italic" }}>"</em> から <em style={{ fontFamily: 'var(--font-serif)', fontStyle: "italic" }}>"</em>共に創る<em style={{ fontFamily: 'var(--font-serif)', fontStyle: "italic" }}>"</em> へ。<br />
                AI時代の人材のあり方を、ここから再定義します。
              </p>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function AIerSection() {
  const isMobile = useMediaQuery("(max-width: 768px)");
  return (
    <section id="aier" style={{ padding: isMobile ? "80px 20px" : "160px 48px", background: "#1A1530", color: "#fff", position: "relative", overflow: "hidden" }}>
      <div style={{
        position: "absolute", top: "-15%", right: "-8%", width: 520, height: 520, borderRadius: "50%",
        background: "radial-gradient(circle at center, rgba(124,92,255,0.25) 0%, transparent 70%)", pointerEvents: "none",
      }} />
      <div style={{ maxWidth: 1280, margin: "0 auto", position: "relative" }}>
        <Reveal>
          <SectionLabel dark>WHAT IS AIer</SectionLabel>
          <h2 style={{
            fontFamily: 'var(--font-serif)', fontSize: isMobile ? 38 : 56, fontWeight: 400,
            margin: "24px 0 24px", lineHeight: 1.18, letterSpacing: "-0.01em",
          }}>
            AI時代の、新しい<em style={{ fontFamily: 'var(--font-serif)', fontStyle: "normal", color: "#E8E0FF" }}>SI</em>。
          </h2>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 17, lineHeight: 1.9, color: "#B0A8CC", maxWidth: 640, margin: "0 0 56px" }}>
            システムを統合して企業に届けるのがSIerなら、<br />
            AIエージェントを企業に導入し、人と協働させるのが <strong style={{ color: "#fff" }}>AIer</strong> です。
          </p>
        </Reveal>
        <Reveal delay={100}>
          <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: isMobile ? 20 : 28 }}>
            <div style={{ padding: isMobile ? "32px 24px" : "40px 36px", borderRadius: 16, background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.12)" }}>
              <div style={{ fontFamily: 'var(--font-mono-label)', fontSize: 12, letterSpacing: "0.2em", color: "#8A82AA", fontWeight: 500 }}>SIer</div>
              <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, color: "#8A82AA", marginTop: 4 }}>System Integrator</div>
              <p style={{ fontFamily: 'var(--font-serif)', fontSize: 22, lineHeight: 1.7, color: "#D8D2EC", margin: "20px 0 0" }}>
                システムを統合し、<br />企業に導入する。
              </p>
            </div>
            <div style={{ padding: isMobile ? "32px 24px" : "40px 36px", borderRadius: 16, background: "linear-gradient(135deg, rgba(124,92,255,0.35) 0%, rgba(107,72,240,0.18) 100%)", border: "1px solid rgba(124,92,255,0.6)" }}>
              <div style={{ fontFamily: 'var(--font-mono-label)', fontSize: 12, letterSpacing: "0.2em", color: "#E8E0FF", fontWeight: 500 }}>AIer</div>
              <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, color: "#C9B7F3", marginTop: 4 }}>Agent Integrator</div>
              <p style={{ fontFamily: 'var(--font-serif)', fontSize: 22, lineHeight: 1.7, color: "#fff", margin: "20px 0 0" }}>
                AIエージェントを導入し、<br />人と協働させる。
              </p>
            </div>
          </div>
        </Reveal>
        <Reveal delay={180}>
          <div style={{ marginTop: isMobile ? 36 : 56, display: "flex", alignItems: "center", gap: isMobile ? 24 : 32, flexWrap: "wrap" }}>
            <p style={{ fontFamily: 'var(--font-serif)', fontSize: 24, lineHeight: 1.6, color: "#fff", margin: 0, flex: "1 1 420px" }}>
              私たちは、AIを使いこなす<em style={{ fontFamily: 'var(--font-serif)', fontStyle: "normal", color: "#E8E0FF" }}>人材</em>を育て、現場へ送り出していく。
            </p>
            <Button variant="primary" href="recruit/index.html">採用情報を見る</Button>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function NameOrigin() {
  const isMobile = useMediaQuery("(max-width: 768px)");
  return (
    <section id="name" style={{ padding: isMobile ? "80px 20px" : "160px 48px", background: "var(--bg-base)" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "0.85fr 1.15fr", gap: isMobile ? 36 : 80, alignItems: "center" }}>
          <Reveal>
            <div>
              <SectionLabel>OUR NAME</SectionLabel>
              <h2 style={{
                fontFamily: 'var(--font-serif)', fontSize: isMobile ? 32 : 44, fontWeight: 400, color: "#1A1A1A",
                margin: "24px 0 0", letterSpacing: "-0.01em", lineHeight: 1.3,
              }}>
                社名に込めた、<em style={{ fontFamily: 'var(--font-serif)', fontStyle: "normal", color: "var(--purple)" }}>思い</em>
              </h2>
              <img src="assets/logo-vertical.png" alt="日本AIセンター" style={{
                height: isMobile ? 160 : 220, width: "auto", display: "block", margin: isMobile ? "36px 0 0 0" : "56px 0 0 40px",
              }} />
            </div>
          </Reveal>
          <Reveal delay={100}>
            <p style={{ fontFamily: 'var(--font-serif)', fontSize: 22, lineHeight: 2.1, color: "#1A1A1A", margin: 0, fontWeight: 400 }}>
              日本AIセンター。創業時から、すべてが見えていたわけではありません。<br /><br />
              ただ、これからの会社はAIエージェントと人が一緒に働くようになる、という確信はありました。<br /><br />
              私たちはまず自社で、AIエージェントを業務に組み込み、人と協働する形をつくってきました。その実践を、これから<span style={{ color: "var(--purple)" }}>日本に広げていく</span>。<br /><br />
              それが、この社名に込めた思いです。
            </p>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function ReasonSection() {
  const reasons = [
    {
      n: "01",
      title: "AI活用率 約90%",
      desc: "ほぼ全てのエンジニアがClaude Code等の生成AIツールを業務で活用。AI前提の開発がスタンダードです。",
      stat: "約90%",
    },
    {
      n: "02",
      title: "中間マージン最小化",
      desc: "エンドクライアントとの直接取引を最大化。エンジニアの価値が正当に評価される構造です。",
      stat: "Direct",
    },
    {
      n: "03",
      title: "案件選択制度",
      desc: "会社都合のアサインは原則なし。エンジニア自身が案件を選べる、主体性ある働き方。",
      stat: "Your Choice",
    },
    {
      n: "04",
      title: "社内システムをAIで内製",
      desc: "稼働・契約・顧客管理の社内システムを、AIエージェントと人で内製・実運用。AIを“使う”だけでなく“作って回す”会社です。",
      stat: "Built with AI",
    },
    {
      n: "05",
      title: "オープンな技術スタック",
      desc: "Claude Code・Cloudflare・Notion・Slack — ツール選定は現場と経営で一緒に。実運用で効果が出たものを採用します。",
      stat: "Open",
    },
    {
      n: "06",
      title: "案件プールの厚み",
      desc: "常時紹介可能な案件は約2,000件。経験・希望スキル・稼働条件が合う案件から選んでいただけます。",
      stat: "約2,000件",
    },
  ];
  const isMobile = useMediaQuery("(max-width: 768px)");
  return (
    <section id="reason" style={{ padding: isMobile ? "80px 20px" : "160px 48px", background: "var(--bg-base)" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <Reveal>
          <div style={{ display: "flex", alignItems: "end", justifyContent: "space-between", flexWrap: "wrap", gap: 24, marginBottom: isMobile ? 40 : 80 }}>
            <div>
              <SectionLabel>REASON</SectionLabel>
              <h2 style={{
                fontFamily: 'var(--font-serif)',
                fontSize: isMobile ? 38 : 56,
                fontWeight: 400,
                color: "#1A1A1A",
                margin: "24px 0 0",
                letterSpacing: "-0.01em",
                lineHeight: 1.15,
              }}>
                選ばれる<em style={{ fontFamily: 'var(--font-serif)', fontStyle: "normal" }}>理由</em>
              </h2>
            </div>
            <p style={{ fontFamily: 'var(--font-sans)', fontSize: 16, color: "#6B6B6B", maxWidth: 420, lineHeight: 1.8, margin: 0 }}>
              私たちが「AI時代のAIer」として選ばれる、<br />6つの理由があります。
            </p>
          </div>
        </Reveal>

        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: isMobile ? 20 : 24 }}>
          {reasons.map((r, i) => <ReasonCard key={r.n} r={r} delay={i * 80} />)}
        </div>

        <Reveal delay={200}>
          <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 48 }}>
            <Button variant="ghost" href="strengths.html">選ばれる理由一覧へ</Button>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function ReasonCard({ r, delay }) {
  const isMobile = useMediaQuery("(max-width: 768px)");
  const [hover, setHover] = React.useState(false);
  return (
    <Reveal delay={delay}>
      <div
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        style={{
          background: "var(--glass-bg)",
          backdropFilter: "var(--glass-blur)",
          WebkitBackdropFilter: "var(--glass-blur)",
          border: "var(--glass-border)",
          borderRadius: "var(--radius-lg)",
          padding: isMobile ? "28px 22px" : 40,
          minHeight: isMobile ? 0 : 260,
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "auto 1fr",
          gap: isMobile ? 16 : 32,
          alignItems: "start",
          transition: "all 320ms cubic-bezier(0.22,1,0.36,1)",
          transform: hover ? "translateY(-4px)" : "translateY(0)",
          boxShadow: hover ? "var(--glass-shadow-hover)" : "var(--glass-shadow)",
          cursor: "default",
        }}
      >
        <div style={{
          fontFamily: 'var(--font-mono-label)',
          fontSize: 13,
          letterSpacing: "0.15em",
          color: "var(--purple)",
          fontWeight: 500,
          writingMode: isMobile ? "horizontal-tb" : "vertical-rl",
          transform: isMobile ? "none" : "rotate(180deg)",
        }}>
          REASON / {r.n}
        </div>
        <div>
          <div style={{
            fontFamily: 'var(--font-serif)',
            fontStyle: "italic",
            fontSize: 28,
            color: "var(--purple)",
            fontWeight: 400,
            marginBottom: 16,
            letterSpacing: "-0.01em",
          }}>
            {r.stat}
          </div>
          <h3 style={{
            fontFamily: 'var(--font-serif)',
            fontSize: 26,
            fontWeight: 500,
            color: "#1A1A1A",
            margin: "0 0 16px",
            lineHeight: 1.4,
          }}>
            {r.title}
          </h3>
          <p style={{
            fontFamily: 'var(--font-sans)',
            fontSize: 14.5,
            color: "#6B6B6B",
            lineHeight: 1.85,
            margin: 0,
          }}>
            {r.desc}
          </p>
        </div>
      </div>
    </Reveal>
  );
}

function BusinessSection() {
  const items = [
    {
      k: "AI TALENT",
      t: "AI人材事業",
      sub: "Engineering Talent",
      b: "AIネイティブなエンジニアリング人材の提供。大手からスタートアップまで、幅広い企業様の開発現場をサポートします。",
    },
    {
      k: "AI × DEV",
      t: "AI内製・開発支援",
      sub: "AI-native Development",
      b: "生成AIを前提にした開発・内製化支援。Claude Codeを使いこなすエンジニアが、既存チームの生産性を底上げします。",
    },
    {
      k: "AI TRAINING",
      t: "AI研修事業",
      sub: "Executive Training",
      b: "経営層・非エンジニア組織向けのAI活用研修。自社での実運用ノウハウをベースに、業務にAIを組み込む方法を伝えます。",
    },
  ];
  const isMobile = useMediaQuery("(max-width: 768px)");
  return (
    <section id="business" style={{ padding: isMobile ? "80px 20px" : "160px 48px", background: "#FFFFFF" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <Reveal>
          <div style={{ marginBottom: isMobile ? 40 : 72 }}>
            <SectionLabel>BUSINESS</SectionLabel>
            <h2 style={{
              fontFamily: 'var(--font-serif)',
              fontSize: isMobile ? 38 : 56,
              fontWeight: 400,
              color: "#1A1A1A",
              margin: "24px 0 0",
              letterSpacing: "-0.01em",
              lineHeight: 1.15,
            }}>
              事業<em style={{ fontFamily: 'var(--font-serif)', fontStyle: "normal" }}>内容</em>
            </h2>
          </div>
        </Reveal>

        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 20 : 24 }}>
          {items.map((it, i) => <BusinessCard key={it.k} it={it} idx={i} delay={i * 80} />)}
        </div>

        <Reveal delay={300}>
          <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 48 }}>
            <Button variant="ghost" href="business.html">事業内容の詳細へ</Button>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function BusinessCard({ it, idx, delay }) {
  const isMobile = useMediaQuery("(max-width: 768px)");
  const [hover, setHover] = React.useState(false);
  return (
    <Reveal delay={delay}>
      <a
        href="business.html"
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        style={{
          display: "block",
          background: hover ? "rgba(255,255,255,0.72)" : "var(--glass-bg)",
          backdropFilter: "var(--glass-blur)",
          WebkitBackdropFilter: "var(--glass-blur)",
          border: "var(--glass-border)",
          borderRadius: "var(--radius-lg)",
          padding: isMobile ? "32px 24px" : 40,
          minHeight: isMobile ? 0 : 380,
          position: "relative",
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-between",
          textDecoration: "none",
          color: "inherit",
          transition: "all 320ms cubic-bezier(0.22,1,0.36,1)",
          transform: hover ? "translateY(-4px)" : "translateY(0)",
          boxShadow: hover ? "var(--glass-shadow-hover)" : "var(--glass-shadow)",
          overflow: "hidden",
        }}
      >
        {/* number backdrop */}
        <div style={{
          position: "absolute",
          top: 24, right: 28,
          fontFamily: 'var(--font-serif)',
          fontStyle: "italic",
          fontSize: 84,
          color: hover ? "var(--purple-light)" : "#F0ECE8",
          lineHeight: 1,
          fontWeight: 400,
          transition: "color 320ms",
          pointerEvents: "none",
        }}>
          0{idx + 1}
        </div>

        <div>
          <div style={{
            fontFamily: 'var(--font-mono-label)',
            fontSize: 11,
            letterSpacing: "0.2em",
            color: "var(--purple)",
            fontWeight: 500,
            marginBottom: 32,
          }}>
            — {it.k} —
          </div>
          <h3 style={{
            fontFamily: 'var(--font-serif)',
            fontSize: 30,
            fontWeight: 500,
            color: "#1A1A1A",
            margin: "0 0 8px",
            lineHeight: 1.3,
          }}>
            {it.t}
          </h3>
          <div style={{
            fontFamily: 'var(--font-serif)',
            fontStyle: "italic",
            fontSize: 15,
            color: "#6B6B6B",
            marginBottom: 24,
          }}>
            {it.sub}
          </div>
          <p style={{
            fontFamily: 'var(--font-sans)',
            fontSize: 14,
            color: "#6B6B6B",
            lineHeight: 1.85,
            margin: 0,
          }}>
            {it.b}
          </p>
        </div>

        <div style={{
          marginTop: 40,
          fontFamily: 'var(--font-mono-label)',
          fontSize: 12,
          letterSpacing: "0.15em",
          color: hover ? "var(--purple)" : "#1A1A1A",
          fontWeight: 500,
          transition: "color 160ms",
        }}>
          詳しく見る <span style={{ display: "inline-block", transform: hover ? "translateX(4px)" : "translateX(0)", transition: "transform 160ms" }}>→</span>
        </div>
      </a>
    </Reveal>
  );
}

function StatsSection() {
  const stats = [
    { v: "29", suffix: "名", l: "ACTIVE ENGINEERS", sub: "稼働エンジニア数" },
    { v: "25", suffix: "社", l: "CLIENTS", sub: "取引企業数" },
    { v: "2,000", suffix: "件", l: "OPEN PROJECTS", sub: "常時紹介可能な案件数" },
    { v: "90", suffix: "%", l: "AI USAGE", sub: "AI活用率", highlight: true },
  ];
  const isMobile = useMediaQuery("(max-width: 768px)");
  return (
    <section id="numbers" style={{
      padding: isMobile ? "72px 20px" : "140px 48px",
      background: "#1A1530",
      color: "#fff",
      position: "relative",
      overflow: "hidden",
    }}>
      {/* decorative element */}
      <div style={{
        position: "absolute",
        top: "-10%", right: "-5%",
        width: 480, height: 480,
        borderRadius: "50%",
        background: "radial-gradient(circle at center, rgba(124,92,255,0.2) 0%, transparent 70%)",
        pointerEvents: "none",
      }} />

      <div style={{ maxWidth: 1280, margin: "0 auto", position: "relative" }}>
        <Reveal>
          <SectionLabel dark>NUMBERS</SectionLabel>
          <h2 style={{
            fontFamily: 'var(--font-serif)',
            fontSize: isMobile ? 36 : 56,
            fontWeight: 400,
            margin: "24px 0 16px",
            letterSpacing: "-0.01em",
            lineHeight: 1.15,
          }}>
            数字で見る、<em style={{ fontFamily: 'var(--font-serif)', fontStyle: "normal", color: "#E8E0FF" }}>日本AIセンター</em>
          </h2>
          <p style={{
            fontFamily: 'var(--font-sans)',
            fontSize: 15,
            color: "#B0A8CC",
            lineHeight: 1.85,
            maxWidth: 560,
            margin: 0,
          }}>
            創業から着実に。数字は、私たちが選ばれ続けている証です。<br />
            <span style={{ fontFamily: 'var(--font-mono-label)', fontSize: 11, letterSpacing: "0.15em", opacity: 0.7 }}>* AS OF 2026 Q1</span>
          </p>
        </Reveal>

        <div style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "repeat(2, 1fr)" : "repeat(4, 1fr)",
          gap: 0,
          borderTop: "1px solid rgba(255,255,255,0.14)",
          marginTop: isMobile ? 40 : 72,
        }}>
          {stats.map((s, i) => (
            <Reveal key={s.l} delay={i * 80}>
              <div style={isMobile ? {
                padding: "32px 0 28px",
                borderRight: i % 2 === 0 ? "1px solid rgba(255,255,255,0.14)" : "none",
                paddingLeft: i % 2 === 0 ? 0 : 24,
              } : {
                padding: "56px 32px 48px 0",
                borderRight: i < stats.length - 1 ? "1px solid rgba(255,255,255,0.14)" : "none",
                paddingLeft: i === 0 ? 0 : 32,
              }}>
                <div style={{ display: "flex", alignItems: "baseline", gap: 6 }}>
                  <span style={{
                    fontFamily: 'var(--font-mono-label)',
                    fontSize: isMobile ? 52 : 88,
                    fontWeight: 500,
                    color: s.highlight ? "var(--purple-light)" : "#fff",
                    letterSpacing: "-0.04em",
                    lineHeight: 1,
                  }}>
                    {s.v}
                  </span>
                  <span style={{
                    fontFamily: 'var(--font-serif)',
                    fontSize: 22,
                    color: s.highlight ? "var(--purple-light)" : "#fff",
                    fontWeight: 400,
                  }}>
                    {s.suffix}
                  </span>
                </div>
                <div style={{
                  fontFamily: 'var(--font-mono-label)',
                  fontSize: 11,
                  letterSpacing: "0.2em",
                  color: s.highlight ? "var(--purple-light)" : "#fff",
                  marginTop: 24,
                  fontWeight: 500,
                }}>
                  {s.l}
                </div>
                <div style={{
                  fontFamily: 'var(--font-sans)',
                  fontSize: 13,
                  color: "#B0A8CC",
                  marginTop: 6,
                }}>
                  {s.sub}
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function InsightsSection() {
  const posts = [
    {
      date: "2026.03.18",
      cat: "ENGINEERING",
      title: "AIエージェントで社内システムを内製した話",
      excerpt: "稼働・契約・顧客管理の社内システムを、AIエージェントと人で内製・実運用してきた記録。",
    },
    {
      date: "2026.02.24",
      cat: "INDUSTRY",
      title: "AIer — AI時代の、新しいSIとは何か",
      excerpt: "中間マージン、不透明な評価、受け身のアサイン。古い人材業界の構造を、AIエージェントがどう解体していくか。",
    },
    {
      date: "2026.01.30",
      cat: "COMPANY",
      title: "East Venturesから資金調達。私たちの次の一手",
      excerpt: "シードラウンドを完了。調達した資金で、エンジニアファーストな組織をさらに広げていきます。",
    },
  ];
  const isMobile = useMediaQuery("(max-width: 768px)");
  return (
    <section id="insights" style={{ padding: isMobile ? "80px 20px" : "160px 48px", background: "var(--bg-base)" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <Reveal>
          <div style={{ display: "flex", alignItems: "end", justifyContent: "space-between", flexWrap: "wrap", gap: 24, marginBottom: isMobile ? 40 : 72 }}>
            <div>
              <SectionLabel>INSIGHTS</SectionLabel>
              <h2 style={{
                fontFamily: 'var(--font-serif)',
                fontSize: isMobile ? 38 : 56,
                fontWeight: 400,
                color: "#1A1A1A",
                margin: "24px 0 16px",
                letterSpacing: "-0.01em",
                lineHeight: 1.15,
              }}>
                <em style={{ fontFamily: 'var(--font-serif)', fontStyle: "normal" }}>発信</em>
              </h2>
              <p style={{ fontFamily: 'var(--font-sans)', fontSize: 16, color: "#6B6B6B", margin: 0 }}>
                AIエージェントと人で会社をつくる過程を、発信しています。
              </p>
            </div>
          </div>
        </Reveal>

        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 20 : 24 }}>
          {posts.map((p, i) => <InsightCard key={p.title} p={p} idx={i} delay={i * 80} />)}
        </div>

        <Reveal delay={240}>
          <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 48 }}>
            <Button variant="ghost" href="insights.html">発信一覧へ</Button>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function InsightCard({ p, idx, delay }) {
  const [hover, setHover] = React.useState(false);
  const thumbs = [
    { img: "uploads/photos/team-working.jpg", label: "CLAUDE CODE", tint: "rgba(124,92,255,0.2)" },
    { img: "uploads/photos/team-discussion.jpg", label: "AIer", tint: "rgba(26,21,48,0.35)" },
    { img: "uploads/photos/team-cheer.jpg", label: "FUNDING", tint: "rgba(124,92,255,0.25)" },
  ];
  const th = thumbs[idx % thumbs.length];
  return (
    <Reveal delay={delay}>
      <a
        href="insights.html"
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        style={{
          display: "block",
          background: "var(--glass-bg-strong)",
          backdropFilter: "var(--glass-blur)",
          WebkitBackdropFilter: "var(--glass-blur)",
          border: "var(--glass-border)",
          borderRadius: "var(--radius-lg)",
          overflow: "hidden",
          textDecoration: "none",
          color: "inherit",
          transform: hover ? "translateY(-4px)" : "translateY(0)",
          boxShadow: hover ? "var(--glass-shadow-hover)" : "var(--glass-shadow)",
          transition: "all 320ms cubic-bezier(0.22,1,0.36,1)",
        }}
      >
        <div style={{
          aspectRatio: "16 / 10",
          background: "#1A1530",
          position: "relative",
          overflow: "hidden",
        }}>
          <img src={th.img} alt={th.label} style={{
            position: "absolute", inset: 0,
            width: "100%", height: "100%", objectFit: "cover",
            transform: hover ? "scale(1.05)" : "scale(1)",
            transition: "transform 600ms cubic-bezier(0.22,1,0.36,1)",
          }} />
          <div style={{ position: "absolute", inset: 0, background: `linear-gradient(180deg, ${th.tint} 0%, transparent 40%, rgba(26,21,48,0.55) 100%)` }} />
          <div style={{
            position: "absolute",
            top: 18, left: 18,
            fontFamily: 'var(--font-mono-label)',
            fontSize: 10,
            letterSpacing: "0.2em",
            color: "rgba(255,255,255,0.95)",
            fontWeight: 500,
            textShadow: "0 1px 4px rgba(0,0,0,0.3)",
          }}>
            — {th.label} —
          </div>
          <div style={{
            position: "absolute",
            bottom: 16, right: 18,
            fontFamily: 'var(--font-serif)',
            fontStyle: "italic",
            fontSize: 64,
            color: "rgba(255,255,255,0.5)",
            lineHeight: 1,
            fontWeight: 400,
            textShadow: "0 2px 12px rgba(0,0,0,0.25)",
          }}>
            0{idx + 1}
          </div>
        </div>
        <div style={{ padding: "28px 28px 32px" }}>
          <div style={{ display: "flex", gap: 14, alignItems: "center", marginBottom: 16 }}>
            <span style={{ fontFamily: 'var(--font-mono-label)', fontSize: 11, letterSpacing: "0.15em", color: "var(--purple)", fontWeight: 500 }}>{p.date}</span>
            <span style={{ width: 3, height: 3, borderRadius: "50%", background: "#C0C0C0" }} />
            <span style={{ fontFamily: 'var(--font-mono-label)', fontSize: 10, letterSpacing: "0.2em", color: "#6B6B6B", fontWeight: 500 }}>{p.cat}</span>
          </div>
          <h3 style={{
            fontFamily: 'var(--font-serif)',
            fontSize: 19,
            fontWeight: 500,
            color: "#1A1A1A",
            margin: "0 0 14px",
            lineHeight: 1.55,
          }}>
            {p.title}
          </h3>
          <p style={{
            fontFamily: 'var(--font-sans)',
            fontSize: 13.5,
            color: "#6B6B6B",
            lineHeight: 1.8,
            margin: 0,
          }}>
            {p.excerpt}
          </p>
        </div>
      </a>
    </Reveal>
  );
}

function CareersCTA() {
  const isMobile = useMediaQuery("(max-width: 768px)");
  return (
    <section id="careers" style={{
      padding: isMobile ? "72px 20px" : "140px 48px",
      background: "#1A1530",
      color: "#fff",
      position: "relative",
      overflow: "hidden",
    }}>
      {/* team photo background */}
      <img src="uploads/photos/team-cheer.jpg" alt="" style={{
        position: "absolute", inset: 0,
        width: "100%", height: "100%", objectFit: "cover",
        opacity: 0.45,
      }} />
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(100deg, rgba(26,21,48,0.95) 0%, rgba(58,42,106,0.75) 45%, rgba(124,92,255,0.35) 100%)",
      }} />
      <div style={{
        position: "absolute",
        bottom: "-30%", right: "-5%",
        width: 600, height: 600,
        borderRadius: "50%",
        background: "radial-gradient(circle at center, rgba(124,92,255,0.3) 0%, transparent 70%)",
        pointerEvents: "none",
      }} />

      <div style={{ maxWidth: 1280, margin: "0 auto", position: "relative" }}>
        <Reveal>
          <SectionLabel dark>CAREERS</SectionLabel>
        </Reveal>
        <Reveal delay={80}>
          <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1.3fr 1fr", gap: isMobile ? 36 : 72, alignItems: "end", marginTop: 32 }}>
            <div>
              <h2 style={{
                fontFamily: 'var(--font-serif)',
                fontSize: isMobile ? "clamp(36px, 9vw, 48px)" : "clamp(48px, 5.5vw, 84px)",
                fontWeight: 400,
                margin: 0,
                letterSpacing: "-0.02em",
                lineHeight: 1.1,
              }}>
                エンジニアを、<br />
                <em style={{ fontFamily: 'var(--font-serif)', fontStyle: "normal", color: "#E8E0FF" }}>募集</em>しています<em style={{ fontFamily: 'var(--font-serif)', fontStyle: "italic", color: "#E8E0FF" }}>.</em>
              </h2>
              <p style={{
                fontFamily: 'var(--font-serif)',
                fontSize: 22,
                color: "#E8E0FF",
                marginTop: 28,
                lineHeight: 1.7,
                fontWeight: 400,
              }}>
                AIと共に働く、次世代のエンジニアへ。
              </p>
            </div>
            <div>
              <div style={isMobile ? {
                borderTop: "1px solid rgba(255,255,255,0.2)",
                paddingTop: 28,
              } : {
                borderLeft: "1px solid rgba(255,255,255,0.2)",
                paddingLeft: 32,
              }}>
                <p style={{
                  fontFamily: 'var(--font-sans)',
                  fontSize: 14.5,
                  color: "rgba(255,255,255,0.85)",
                  lineHeight: 1.85,
                  margin: "0 0 32px",
                }}>
                  Claude Codeを日常的に使いこなし、案件を自ら選び、AIと共に価値をつくる。<br />
                  そんな働き方に共感するエンジニアの方、お話しさせてください。
                </p>
                <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                  <Button variant="primary" href="recruit/index.html" style={{ background: "#fff", color: "#1A1530", justifyContent: "space-between", padding: "18px 28px" }}>
                    <span>採用サイトへ</span>
                  </Button>
                  <Button variant="onDark" href="recruit/entry.html" style={{ justifyContent: "space-between", padding: "16px 28px" }}>
                    <span>カジュアル面談を申し込む</span>
                  </Button>
                </div>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function ContactSection() {
  const isMobile = useMediaQuery("(max-width: 768px)");
  return (
    <section id="contact" style={{ padding: isMobile ? "72px 20px" : "140px 48px", background: "#FFFFFF" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr",
          gap: isMobile ? 36 : 72,
          alignItems: "center",
          padding: isMobile ? "40px 24px" : "72px 64px",
          background: "var(--bg-base)",
          borderRadius: 16,
          border: "1px solid #E5E5E5",
          position: "relative",
          overflow: "hidden",
        }}>
          {/* accent corner */}
          <div style={{
            position: "absolute",
            top: -80, right: -80,
            width: 240, height: 240,
            borderRadius: "50%",
            background: "radial-gradient(circle at center, rgba(124,92,255,0.16) 0%, transparent 65%)",
          }} />

          <Reveal>
            <div style={{ position: "relative" }}>
              <SectionLabel>CONTACT</SectionLabel>
              <h2 style={{
                fontFamily: 'var(--font-serif)',
                fontSize: isMobile ? 32 : 44,
                fontWeight: 400,
                color: "#1A1A1A",
                margin: "24px 0 24px",
                letterSpacing: "-0.01em",
                lineHeight: 1.25,
              }}>
                AI人材・AI研修の<br /><em style={{ fontFamily: 'var(--font-serif)', fontStyle: "normal" }}>ご相談</em>
              </h2>
              <p style={{
                fontFamily: 'var(--font-sans)',
                fontSize: 15,
                color: "#6B6B6B",
                lineHeight: 1.85,
                margin: 0,
                maxWidth: 460,
              }}>
                エンジニアリング人材のご相談、AI内製化の伴走、経営層向け研修まで。<br />
                まずは一度、お話を伺わせてください。
              </p>
            </div>
          </Reveal>

          <Reveal delay={100}>
            <div style={{ display: "flex", flexDirection: "column", gap: 20, position: "relative" }}>
              <Button variant="primary" href="contact.html" style={{ justifyContent: "space-between", padding: "20px 28px", fontSize: 16 }}>
                <span>お問い合わせフォームへ</span>
              </Button>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                <ContactMeta k="EMAIL" v="kanri@ai-center.co.jp" />
                <ContactMeta k="HOURS" v="平日 10:00–18:00" />
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function ContactMeta({ k, v }) {
  return (
    <div style={{
      background: "#fff",
      border: "1px solid #E5E5E5",
      borderRadius: 8,
      padding: 16,
    }}>
      <div style={{ fontFamily: 'var(--font-mono-label)', fontSize: 10, letterSpacing: "0.2em", color: "var(--purple)", fontWeight: 500 }}>{k}</div>
      <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, color: "#1A1A1A", marginTop: 6 }}>{v}</div>
    </div>
  );
}

Object.assign(window, { MissionSection, ReasonSection, BusinessSection, StatsSection, InsightsSection, CareersCTA, ContactSection });
