// Page — Services (八つの事業) — 案01 Shihou direction

const PageServices = () => {
  const { theme } = useTheme();
  const { lang } = (window.useLang ? window.useLang() : { lang: 'jp' });
  const EN = lang === 'en';
  const pageRef = React.useRef(null);
  (window.useGsapPageEnter || ((_r) => {}))(pageRef);
  const v1 = {
    paper: theme.paper, paperDeep: theme.paperDeep, ink: theme.ink, sumi: theme.sumi,
    shu: theme.accent, muted: theme.muted, mutedLight: theme.mutedLight, line: theme.line,
    serif: theme.fonts.serif, sans: theme.fonts.sans, mono: theme.fonts.mono,
  };

  return (
    <div ref={pageRef} data-scroll-root style={{
      width: '100%',
      background: v1.paper, color: v1.ink, fontFamily: v1.sans,
      fontFeatureSettings: '"palt"',
    }}>
      {window.ScrollProgressBar ? <window.ScrollProgressBar /> : null}
      {window.MotionReady ? <window.MotionReady /> : null}
      {window.SiteNav ? <window.SiteNav active="services" /> : null}

      {/* PAGE HEAD */}
      <section style={{ padding: '100px 80px 60px', position: 'relative', overflow: 'hidden' }}>
        {window.DecorativeMotionField ? <window.DecorativeMotionField density={7} intensity={0.3} variant="score" /> : null}
        {window.MorphLineMotif ? <window.MorphLineMotif size={300} top={34} right={72} opacity={0.18} rotateDuration={42} delay={0.4} /> : null}
        {window.MorphLineMotif ? <window.MorphLineMotif size={120} bottom={34} left={90} opacity={0.14} rotateDuration={58} delay={1.6} reverse /> : null}
        <div style={{ fontFamily: v1.mono, fontSize: 10, letterSpacing: '0.3em', color: v1.shu, marginBottom: 40 }}>
          CHAP. 参 ／ SERVICES
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 80, alignItems: 'end', position: 'relative', zIndex: 1 }}>
          <div>
            <h1 style={{
              fontFamily: v1.serif, fontWeight: 400, fontSize: 'clamp(64px, 9vw, 140px)',
              lineHeight: 1.0, margin: 0, letterSpacing: '-0.02em',
            }}>
              {EN ? <>Eight concrete<br/><span style={{ color: v1.shu }}>services</span>.</> : <>八つの、<br/>具体的な<span style={{ color: v1.shu }}>伴走</span>。</>}
            </h1>
          </div>
          <div>
            <p style={{ fontFamily: v1.serif, fontSize: 17, lineHeight: 2.1, color: v1.sumi, margin: 0 }}>
              {EN
                ? <>Eight services that support the non-production side of makers' businesses.<br/>Culina works alongside teams from four directions: management, systems, marketing, and sales.</>
                : <>作り手の非生産領域を支える、<br/>八つのサービス。<br/>Culinaは経営・仕組み・集客・営業の4方向から伴走します。</>}
            </p>
          </div>
        </div>
      </section>

      {/* Category ribbon */}
      <section style={{
        padding: '20px 80px', borderTop: `1px solid ${v1.line}`, borderBottom: `1px solid ${v1.line}`,
        display: 'flex', gap: 24, flexWrap: 'wrap', fontFamily: v1.mono, fontSize: 11, letterSpacing: '0.2em', color: v1.muted,
      }}>
        <span style={{ color: v1.shu }}>● ALL (8)</span>
        <span>○ MANAGEMENT</span>
        <span>○ DEVELOPMENT</span>
        <span>○ MARKETING</span>
        <span>○ SALES</span>
      </section>

      {/* Service grid */}
      <section style={{ padding: '80px 80px 120px', position: 'relative', overflow: 'hidden' }}>
        {window.DecorativeMotionField ? <window.DecorativeMotionField density={5} intensity={0.18} variant="crest" /> : null}
        {window.MorphLineMotif ? <window.MorphLineMotif size={180} top={44} right={42} opacity={0.12} rotateDuration={48} delay={0.9} /> : null}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, border: `1px solid ${v1.line}` }}>
          {SERVICES.map((s, i) => (
            <article key={s.id} id={s.id} style={{
              padding: '48px 40px',
              borderRight: i % 2 === 0 ? `1px solid ${v1.line}` : 'none',
              borderBottom: i < SERVICES.length - 2 ? `1px solid ${v1.line}` : 'none',
              minHeight: 320, display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
              position: 'relative', cursor: 'pointer', transition: 'background 0.2s',
              background: 'transparent', scrollMarginTop: 80,
            }}
            onMouseEnter={(e) => e.currentTarget.style.background = v1.paperDeep}
            onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}>
                <div style={{ fontFamily: v1.mono, fontSize: 10, letterSpacing: '0.3em', color: v1.shu }}>
                  0{i+1} ／ 08
                </div>
                <div style={{ fontFamily: v1.mono, fontSize: 9, letterSpacing: '0.2em', color: v1.muted, border: `1px solid ${v1.line}`, padding: '4px 8px' }}>
                  SERVICE
                </div>
              </div>
              <div>
                <div style={{ fontFamily: v1.serif, fontSize: 48, lineHeight: 1.1, letterSpacing: '-0.01em' }}>
                  {s.name}
                </div>
                <div style={{ fontFamily: v1.serif, fontSize: 13, color: v1.muted, marginTop: 6 }}>
                  {s.kana}
                </div>
                <div style={{ fontSize: 11, color: v1.shu, letterSpacing: '0.15em', marginTop: 16, fontFamily: v1.sans }}>
                  {EN ? s.tagEn : s.tag}
                </div>
                {s.desc ? (
                  <p style={{ fontFamily: v1.serif, fontSize: 15, lineHeight: 2, marginTop: 16, color: v1.sumi, margin: '16px 0 0' }}>
                    {s.desc}
                  </p>
                ) : null}
              </div>
              <div style={{ fontSize: 11, letterSpacing: '0.2em', color: v1.ink, borderTop: `1px solid ${v1.line}`, paddingTop: 20, marginTop: 28 }}>
                {EN ? 'Learn more →' : '詳しく見る →'}
              </div>
            </article>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section style={{ padding: '100px 80px', borderTop: `1px solid ${v1.line}`, background: v1.paperDeep, textAlign: 'center' }}>
        <div style={{ fontFamily: v1.mono, fontSize: 11, color: v1.shu, letterSpacing: '0.3em', marginBottom: 32 }}>
          {EN ? 'Combine services into broader support' : '組み合わせて、より大きな伴走へ'}
        </div>
        <h3 style={{ fontFamily: v1.serif, fontWeight: 400, fontSize: 'clamp(40px, 5vw, 72px)', margin: 0, lineHeight: 1.25 }}>
          {EN ? <>Which service fits<br/>your next step?</> : <>どの事業が、あなたに<br/>合うでしょうか。</>}
        </h3>
        <div style={{ marginTop: 48, display: 'inline-flex', gap: 16, flexWrap: 'wrap' }}>
          <a href={((typeof window !== 'undefined' && window.__ASSET_BASE__) || './') + 'contact/'} style={{ textDecoration: 'none' }}>
            <button style={{
              background: v1.ink, color: v1.paper, border: 'none',
              padding: '20px 32px', fontSize: 13, letterSpacing: '0.2em', fontFamily: v1.sans, cursor: 'pointer',
            }}>{EN ? 'Consult us →' : '無料相談 →'}</button>
          </a>
          <a href={((typeof window !== 'undefined' && window.__ASSET_BASE__) || './') + 'contact/'} style={{ textDecoration: 'none' }}>
            <button style={{
              background: 'transparent', color: v1.ink, border: `1px solid ${v1.ink}`,
              padding: '20px 32px', fontSize: 13, letterSpacing: '0.2em', fontFamily: v1.sans, cursor: 'pointer',
            }}>{EN ? 'Download deck' : '会社資料 DL'}</button>
          </a>
        </div>
      </section>
      {window.SiteFooter ? <window.SiteFooter /> : <PageFooter />}
    </div>
  );
};
window.PageServices = PageServices;


// ── Page — Company (会社情報) ──────────────────────────────
const PageCompany = () => {
  const { theme } = useTheme();
  const { lang } = (window.useLang ? window.useLang() : { lang: 'jp' });
  const EN = lang === 'en';
  const pageRef = React.useRef(null);
  (window.useGsapPageEnter || ((_r) => {}))(pageRef);
  const v1 = {
    paper: theme.paper, paperDeep: theme.paperDeep, ink: theme.ink, sumi: theme.sumi,
    shu: theme.accent, muted: theme.muted, mutedLight: theme.mutedLight, line: theme.line,
    serif: theme.fonts.serif, sans: theme.fonts.sans, mono: theme.fonts.mono,
  };

  const company = [
    ...(EN ? [
      { k: 'Company Name', v: 'Culina, Inc. ／ キュリナ株式会社' },
      { k: 'Founded', v: 'November 11, 2019' },
      { k: 'Representative', v: 'Kazuyoshi Takahashi, Representative Director' },
      { k: 'Capital', v: 'JPY 8,800,000' },
      { k: 'Location', v: 'Aoba-ku, Yokohama, Kanagawa' },
      { k: 'Business', v: 'AX / DX for food and makers\nSupport for non-production operations from management, systems, marketing, and sales' },
      { k: 'Employees', v: '6' },
      { k: 'Outside Directors / External Partners', v: '28' },
      { k: 'Part-time Staff', v: '6' },
    ] : [
      { k: '会社名', v: 'キュリナ株式会社 ／ Culina, Inc.' },
      { k: '創業', v: '令和元年11月11日 ／ 2019年11月11日' },
      { k: '代表者', v: '代表取締役 高橋和義' },
      { k: '資本金', v: '8,800,000 円' },
      { k: '所在地', v: '神奈川県横浜市青葉区' },
      { k: '事業内容', v: '食と職人に関わる事業のAX／DX推進\n経営・仕組み・集客・営業の4方向からの非生産領域支援' },
      { k: '従業員数', v: '6名' },
      { k: '社外取締役・外部パートナー', v: '28名' },
      { k: 'パート', v: '6名' },
    ]),
  ];

  const history = [
    ...(EN ? [
      { y: '2019.11.11', ev: 'Culina, Inc. founded by two people, together with Hasegawa, then Associate Professor at the University of Tokyo Health Intelligence Center.' },
      { y: '2020', ev: 'Head office moved to Sakuragaoka-cho, Shibuya, Tokyo.' },
      { y: '2021', ev: 'Curecipe beta launched.' },
      { y: '2021', ev: 'Began system development and consulting services using subsidy programs.' },
      { y: '2021', ev: 'Started management support mainly for Michelin-awarded restaurants, later developing into Culi Manage.' },
      { y: '2022', ev: 'Invested in and joined management of a Toyosu seafood wholesaler, covering business planning, fundraising, recruiting, and back-office operations.' },
      { y: '2025.12', ev: 'Head office moved from Sakuragaoka, Shibuya to Aoba-ku, Yokohama.' },
      { y: '2025.12', ev: 'Culi NFC beta launched.' },
    ] : [
      { y: '2019.11.11', ev: 'キュリナ株式会社 創業。当時、東京大学ヘルスインテリジェンスセンター准教授の長谷川氏と2名で創業。' },
      { y: '2020', ev: '東京都渋谷区桜丘町に本店移転。' },
      { y: '2021', ev: 'Curecipe β版提供開始。' },
      { y: '2021', ev: '補助金を活用したシステム開発・コンサルティングの提供開始。' },
      { y: '2021', ev: 'ミシュラン取得店舗を中心に経営伴走を開始。のちの Culi Manage へ発展。' },
      { y: '2022', ev: '豊洲の水産仲卸事業に投資・経営参画。事業計画策定・資金調達・採用・バックオフィス業務全般を担当。' },
      { y: '2025.12', ev: '東京都渋谷区桜丘町から、神奈川県横浜市青葉区に本社移転。' },
      { y: '2025.12', ev: 'Culi NFC β版提供開始。' },
    ]),
  ];

  return (
    <div ref={pageRef} data-scroll-root style={{
      width: '100%',
      background: v1.paper, color: v1.ink, fontFamily: v1.sans,
    }}>
      {window.ScrollProgressBar ? <window.ScrollProgressBar /> : null}
      {window.MotionReady ? <window.MotionReady /> : null}
      {window.SiteNav ? <window.SiteNav active="company" /> : null}

      {/* HEAD */}
      <section style={{ padding: '100px 80px 60px', position: 'relative', overflow: 'hidden' }}>
        {window.DecorativeMotionField ? <window.DecorativeMotionField density={6} intensity={0.25} variant="crest" /> : null}
        {window.MorphLineMotif ? <window.MorphLineMotif size={250} top={38} right={72} opacity={0.18} rotateDuration={46} delay={0.5} /> : null}
        {window.MorphLineMotif ? <window.MorphLineMotif size={118} bottom={34} left={84} opacity={0.13} rotateDuration={60} delay={1.7} reverse /> : null}
        <div style={{ fontFamily: v1.mono, fontSize: 10, letterSpacing: '0.3em', color: v1.shu, marginBottom: 40 }}>
          CHAP. 伍 ／ COMPANY
        </div>
        <h1 style={{ fontFamily: v1.serif, fontWeight: 400, fontSize: 'clamp(64px, 9vw, 140px)', lineHeight: 1.0, margin: 0, letterSpacing: '-0.02em' }}>
          {EN ? 'Company.' : '会社について。'}
        </h1>
      </section>

      {/* Company table */}
      <section style={{ padding: '60px 80px 100px', borderTop: `1px solid ${v1.line}` }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80 }}>
          <div>
            <div style={{ fontFamily: v1.mono, fontSize: 10, letterSpacing: '0.3em', color: v1.muted, marginBottom: 12 }}>§ 01</div>
            <h2 style={{ fontFamily: v1.serif, fontWeight: 400, fontSize: 40, margin: 0 }}>{EN ? 'Overview' : '会社概要'}</h2>
          </div>
          <div style={{ borderTop: `1px solid ${v1.ink}` }}>
            {company.map((row, i) => (
              <div key={i} style={{
                display: 'grid', gridTemplateColumns: '200px 1fr',
                gap: 40, padding: '24px 0', borderBottom: `1px solid ${v1.line}`,
                fontSize: 15, fontFamily: v1.serif,
              }}>
                <div style={{ fontFamily: v1.mono, fontSize: 11, letterSpacing: '0.2em', color: v1.muted, paddingTop: 3 }}>
                  {row.k}
                </div>
                <div style={{ whiteSpace: 'pre-line', lineHeight: 1.9, color: v1.ink }}>{row.v}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Mission */}
      <section style={{ padding: '120px 80px', borderTop: `1px solid ${v1.line}`, background: v1.ink, color: v1.paper }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80 }}>
          <div>
            <div style={{ fontFamily: v1.mono, fontSize: 10, letterSpacing: '0.3em', color: v1.shu, marginBottom: 12 }}>§ 02</div>
            <h2 style={{ fontFamily: v1.serif, fontWeight: 400, fontSize: 40, margin: 0 }}>{EN ? 'Mission' : 'ミッション'}</h2>
          </div>
          <div>
            <p style={{ fontFamily: v1.serif, fontSize: 'clamp(28px, 3.2vw, 44px)', lineHeight: 1.7, margin: 0, fontWeight: 400 }}>
              {EN
                ? <>Technology alongside food <span style={{ color: v1.shu }}>(and its makers)</span>,<br/>realizing <span style={{ color: v1.shu, fontStyle: 'italic' }}>the four-way good</span> through AX.</>
                : <>Technology で 食<span style={{ color: v1.shu }}>（職人）</span>に寄り添い、<br/><span style={{ color: v1.shu, fontStyle: 'italic' }}>四方良し</span>のAXを実現する。</>}
            </p>
            <p style={{ fontFamily: v1.serif, fontSize: 16, lineHeight: 2.1, marginTop: 48, color: '#d8d2c2', maxWidth: 620 }}>
              {EN
                ? <>Beyond buyer, seller, and society, Culina places the maker's pride at the center. We carry a century-old commercial ethic into the next century with AI and DX.</>
                : <>買い手・売り手・世間に加え、作り手の矜持を中心に据えた四方良し。百年続いた商道徳を、AIとDXで次の百年へ運ぶ。それが私たちの役割です。</>}
            </p>
          </div>
        </div>
      </section>

      {/* History */}
      <section style={{ padding: '120px 80px', borderTop: `1px solid ${v1.line}` }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80 }}>
          <div>
            <div style={{ fontFamily: v1.mono, fontSize: 10, letterSpacing: '0.3em', color: v1.muted, marginBottom: 12 }}>§ 03</div>
            <h2 style={{ fontFamily: v1.serif, fontWeight: 400, fontSize: 40, margin: 0 }}>{EN ? 'History' : '沿革'}</h2>
          </div>
          <div>
            {history.map((h, i) => (
              <div key={i} style={{
                display: 'grid', gridTemplateColumns: '130px 1fr', gap: 40,
                padding: '28px 0', borderBottom: `1px solid ${v1.line}`,
                alignItems: 'baseline',
              }}>
                <div style={{ fontFamily: v1.serif, fontSize: 32, color: v1.shu, letterSpacing: '-0.01em' }}>{h.y}</div>
                <div style={{ fontFamily: v1.serif, fontSize: 16, lineHeight: 2, color: v1.sumi }}>{h.ev}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Access */}
      <section style={{ padding: '120px 80px', borderTop: `1px solid ${v1.line}`, background: v1.paperDeep }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80 }}>
          <div>
            <div style={{ fontFamily: v1.mono, fontSize: 10, letterSpacing: '0.3em', color: v1.muted, marginBottom: 12 }}>§ 04</div>
            <h2 style={{ fontFamily: v1.serif, fontWeight: 400, fontSize: 40, margin: 0 }}>{EN ? 'Access' : 'アクセス'}</h2>
          </div>
          <div>
            <div style={{
              aspectRatio: '16/7', background: v1.paper,
              border: `1px solid ${v1.line}`,
              backgroundImage: `repeating-linear-gradient(0deg, ${v1.line}, ${v1.line} 1px, transparent 1px, transparent 40px), repeating-linear-gradient(90deg, ${v1.line}, ${v1.line} 1px, transparent 1px, transparent 40px)`,
              position: 'relative',
            }}>
              <div style={{
                position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
                textAlign: 'center',
              }}>
                <div style={{ width: 16, height: 16, background: v1.shu, borderRadius: '50%', margin: '0 auto 12px' }}/>
                <div style={{ fontFamily: v1.serif, fontSize: 16 }}>横浜市青葉区</div>
                <div style={{ fontFamily: v1.mono, fontSize: 10, letterSpacing: '0.2em', color: v1.muted, marginTop: 4 }}>
                  [ MAP PLACEHOLDER ]
                </div>
              </div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 32, marginTop: 32, fontFamily: v1.serif, fontSize: 14, lineHeight: 2 }}>
              <div>
                <div style={{ fontFamily: v1.mono, fontSize: 10, letterSpacing: '0.2em', color: v1.shu, marginBottom: 8 }}>JR</div>
                神奈川県<br/>横浜市青葉区
              </div>
              <div>
                <div style={{ fontFamily: v1.mono, fontSize: 10, letterSpacing: '0.2em', color: v1.shu, marginBottom: 8 }}>METRO</div>
                本社移転<br/>2025年12月
              </div>
              <div>
                <div style={{ fontFamily: v1.mono, fontSize: 10, letterSpacing: '0.2em', color: v1.shu, marginBottom: 8 }}>CONTACT</div>
                03-XXXX-XXXX<br/>info@culina.jp
              </div>
            </div>
          </div>
        </div>
      </section>

      {window.SiteFooter ? <window.SiteFooter /> : <PageFooter />}
    </div>
  );
};
window.PageCompany = PageCompany;


// ── Shared Footer for page-level artboards ─────────────
const PageFooter = () => {
  const { theme } = useTheme();
  const v1 = {
    paper: theme.paper, paperDeep: theme.paperDeep, ink: theme.ink, sumi: theme.sumi,
    shu: theme.accent, muted: theme.muted, mutedLight: theme.mutedLight, line: theme.line,
    serif: theme.fonts.serif, sans: theme.fonts.sans, mono: theme.fonts.mono,
  };
  return (
    <footer style={{
      borderTop: `1px solid ${v1.ink}`, padding: '60px 80px 40px',
      display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 48,
      fontSize: 12, color: v1.muted, background: v1.paper,
    }}>
      <div>
        <CulinaWordmark color={v1.ink} size={16} />
        <div style={{ marginTop: 24, fontFamily: v1.serif, fontSize: 13, lineHeight: 1.9, color: v1.sumi }}>
          キュリナ株式会社<br/>
          神奈川県横浜市青葉区
        </div>
      </div>
      <div>
        <div style={{ fontFamily: v1.mono, fontSize: 10, letterSpacing: '0.2em', color: v1.ink, marginBottom: 14 }}>ABOUT</div>
        <div style={{ lineHeight: 2, fontFamily: v1.serif, fontSize: 13 }}>Philosophy<br/>Company<br/>Careers</div>
      </div>
      <div>
        <div style={{ fontFamily: v1.mono, fontSize: 10, letterSpacing: '0.2em', color: v1.ink, marginBottom: 14 }}>SERVICES</div>
        <div style={{ lineHeight: 2, fontFamily: v1.serif, fontSize: 13 }}>Curecipe<br/>CuliNFC<br/>Curegi<br/>CuliEC<br/>Culimanage<br/>Culimedia</div>
      </div>
      <div>
        <div style={{ fontFamily: v1.mono, fontSize: 10, letterSpacing: '0.2em', color: v1.ink, marginBottom: 14 }}>CONTACT</div>
        <div style={{ lineHeight: 2, fontFamily: v1.serif, fontSize: 13 }}>お問い合わせ<br/>資料請求<br/>採用エントリー</div>
      </div>
      <div style={{
        gridColumn: '1 / -1', display: 'flex', justifyContent: 'space-between',
        paddingTop: 28, borderTop: `1px solid ${v1.line}`,
        fontFamily: v1.mono, fontSize: 10, letterSpacing: '0.2em',
      }}>
        <span>© 2026 CULINA, INC.</span>
        <span>PRIVACY ／ TERMS</span>
        <span>TOKYO ／ JAPAN</span>
      </div>
    </footer>
  );
};
window.PageFooter = PageFooter;