// Page — Contact & News combined const PageContact = () => { 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 Field = ({ label, required, type = 'text', placeholder }) => (

{label} {required && ＊}

{type === 'textarea' ?

: <input type={type} placeholder={placeholder} style={{
            width: '100%', background: 'transparent', border: 'none',
            borderBottom: `1px solid ${v1.line}`, padding: '8px 0',
            fontFamily: v1.serif, fontSize: 16, color: v1.ink, outline: 'none',
          }} />
      }
    </label>
  );

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="contact" /> : null}

<section style={{ padding: '100px 80px 40px', position: 'relative', overflow: 'hidden' }}>
        {window.DecorativeMotionField ? <window.DecorativeMotionField density={6} intensity={0.25} variant="crest" /> : null}
        {window.MorphLineMotif ? <window.MorphLineMotif size={240} top={38} right={80} opacity={0.17} rotateDuration={48} delay={0.6} /> : null}
        {window.MorphLineMotif ? <window.MorphLineMotif size={112} bottom={24} left={96} opacity={0.13} rotateDuration={60} delay={1.5} reverse /> : null}
        <div style={{ fontFamily: v1.mono, fontSize: 10, letterSpacing: '0.3em', color: v1.shu, marginBottom: 40 }}>
          CHAP. 漆 ／ CONTACT
        </div>
        <h1 style={{ fontFamily: v1.serif, fontWeight: 400, fontSize: 'clamp(64px, 9vw, 140px)', lineHeight: 1.0, margin: 0, letterSpacing: '-0.02em' }}>
          {EN ? 'Contact.' : 'お問い合わせ。'}
        </h1>
      </section>

<section style={{ padding: '60px 80px 120px', borderTop: `1px solid ${v1.line}` }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80 }}>
          {/* Left panel */}
          <div>
            <p style={{ fontFamily: v1.serif, fontSize: 17, lineHeight: 2.2, color: v1.sumi, margin: 0 }}>
              {EN
                ? <>For business consultation, service implementation, interviews, media requests,<br/>or any other inquiry, please contact us here.</>
                : <>事業のご相談、導入のご検討、取材・メディアのご依頼、<br/>その他、どのようなお問い合わせでも、<br/>こちらから承ります。</>}
            </p>
            <div style={{ marginTop: 56, borderTop: `1px solid ${v1.line}` }}>
              {[
                { k: 'サービス全般', v: 'info@culina.jp' },
                { k: '採用関連', v: 'careers@culina.jp' },
                { k: 'プレス・取材', v: 'press@culina.jp' },
                { k: 'パートナーシップ', v: 'biz@culina.jp' },
              ].map((c, i) => (
                <div key={i} style={{
                  display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16,
                  padding: '20px 0', borderBottom: `1px solid ${v1.line}`,
                }}>
                  <div style={{ fontFamily: v1.mono, fontSize: 10, letterSpacing: '0.2em', color: v1.muted }}>{c.k}</div>
                  <a href={`mailto:${c.v}`} style={{ fontFamily: v1.serif, fontSize: 14, color: v1.shu, textDecoration: 'none' }}>{c.v}</a>
                </div>
              ))}
            </div>
          </div>

{/* Form */}
          <div>
            {window.ContactForm ? <window.ContactForm /> : (
              <div style={{ border: `1px solid ${v1.line}`, padding: 48, background: v1.paperDeep }}>
                <div style={{ fontFamily: v1.mono, fontSize: 10, letterSpacing: '0.3em', color: v1.shu, marginBottom: 32 }}>
                  FORM ／ GENERAL INQUIRY
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
                  <Field label="お名前" required placeholder="山田 太郎" />
                  <Field label="会社名" placeholder="株式会社〇〇" />
                  <Field label="メール" required type="email" placeholder="name@example.com" />
                  <Field label="電話番号" type="tel" placeholder="03-0000-0000" />
                  <div style={{ gridColumn: '1 / -1' }}>
                    <Field label="お問い合わせの種類" required placeholder="サービス導入相談 / 採用 / その他" />
                  </div>
                  <div style={{ gridColumn: '1 / -1' }}>
                    <Field label="ご相談内容" required type="textarea" placeholder="できるだけ具体的にお書きください" />
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </section>
      {window.SiteFooter ? <window.SiteFooter /> : <PageFooter />}
    </div>
  );
};
window.PageContact = PageContact;

// ── Page — News List ────────────────────────────────────
const PageNews = () => {
  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 allNews = EN ? [
    { date: '2026.04.18', tag: 'Product', title: 'Curecipe v3.2 — AI nutrition estimation engine released', excerpt: 'More accurate nutrition calculations aligned with food labeling requirements, now with ingredient recognition from images.' },
    { date: '2026.03.24', tag: 'News', title: 'CuliNFC introduced at long-established confectioner Shogetsudo', excerpt: 'NFC-based authenticity proof for a 120-year-old maker, balancing anti-counterfeit measures and sales data.' },
    { date: '2026.03.02', tag: 'Event', title: 'Restaurant launch seminar report', excerpt: 'Thirty-eight future operators joined us to discuss funding plans, interior design, and launch operations.' },
    { date: '2026.02.14', tag: 'Product', title: 'Curegi case study at a Michelin-starred restaurant', excerpt: 'Precise accounting operations and an interface that does not interrupt the maker’s flow.' },
    { date: '2026.01.20', tag: 'Company', title: 'Head office relocation notice', excerpt: 'Culina has relocated its head office as part of our next stage of growth.' },
    { date: '2025.12.05', tag: 'News', title: 'AI operations consulting reached 100 annual clients', excerpt: 'After two years of work, we have systematized methods from consultation cases across industries.' },
    { date: '2025.11.10', tag: 'Event', title: 'Four-way good management symposium held', excerpt: 'A discussion between academic and practical perspectives on sustainable maker-centered business.' },
    { date: '2025.10.01', tag: 'Company', title: 'New operating structure announced', excerpt: 'Culina shifted to two divisions: consulting and product.' },
  ] : [
    { date: '2026.04.18', tag: 'Product', title: 'Curecipe v3.2 — AI栄養素推定エンジンをリリース', excerpt: '食品表示法に準拠した栄養計算をさらに高精度に。画像からの食材自動認識にも対応しました。' },
    { date: '2026.03.24', tag: 'News',    title: 'CuliNFC、老舗和菓子屋「松月堂」に導入', excerpt: '120年続く老舗の真贋判定をNFCで実装。偽造品対策と販売データの両立を実現。' },
    { date: '2026.03.02', tag: 'Event',   title: '飲食店開業セミナー @ 渋谷 開催報告', excerpt: '38名の予備開業者の方々にお越しいただき、開業時の資金計画から内装設計まで議論しました。' },
    { date: '2026.02.14', tag: 'Product', title: 'Curegi、ミシュラン一つ星店での導入事例公開', excerpt: '精緻な会計オペレーションと、職人の流れを邪魔しないUI。実際の現場の声を公開しました。' },
    { date: '2026.01.20', tag: 'Company', title: '本社オフィスを渋谷桜丘へ移転いたしました', excerpt: '住友不動産渋谷インフォスアネックス 4F。事業拡大に伴い、広々としたスペースに。' },
    { date: '2025.12.05', tag: 'News',    title: 'AI業務改善コンサルティング 年間 100社達成', excerpt: '事業開始から2年、業種を問わない相談事例を積み重ね、メソッドを体系化しました。' },
    { date: '2025.11.10', tag: 'Event',   title: '「四方良し経営」シンポジウム開催', excerpt: '東京大学大学院経営学研究科との共催。学術と実務の両観点から議論しました。' },
    { date: '2025.10.01', tag: 'Company', title: '令和7年度 新体制のお知らせ', excerpt: 'コンサルティング事業本部、プロダクト事業本部の2本部制に移行。' },
  ];

<section style={{ padding: '100px 80px 60px', position: 'relative', overflow: 'hidden' }}>
        {window.DecorativeMotionField ? <window.DecorativeMotionField density={7} intensity={0.25} variant="score" /> : null}
        {window.MorphLineMotif ? <window.MorphLineMotif size={260} top={34} right={70} opacity={0.17} rotateDuration={44} delay={0.4} /> : null}
        {window.MorphLineMotif ? <window.MorphLineMotif size={118} bottom={36} left={86} opacity={0.13} rotateDuration={58} delay={1.5} reverse /> : null}
        <div style={{ fontFamily: v1.mono, fontSize: 10, letterSpacing: '0.3em', color: v1.shu, marginBottom: 40 }}>
          CHAP. 肆 ／ NEWS
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'end', gap: 40 }}>
          <h1 style={{ fontFamily: v1.serif, fontWeight: 400, fontSize: 'clamp(64px, 9vw, 140px)', lineHeight: 1.0, margin: 0, letterSpacing: '-0.02em' }}>
            {EN ? 'News.' : 'お知らせ。'}
          </h1>
          <div style={{ display: 'flex', gap: 20, fontFamily: v1.mono, fontSize: 11, letterSpacing: '0.2em', color: v1.muted, paddingBottom: 12 }}>
            <span style={{ color: v1.shu }}>● ALL</span>
            <span>○ PRODUCT</span><span>○ NEWS</span><span>○ EVENT</span><span>○ COMPANY</span>
          </div>
        </div>
      </section>

{/* Featured (first item) */}
      <section style={{ padding: '40px 80px', borderTop: `1px solid ${v1.ink}` }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 60, alignItems: 'center' }}>
          <ImgPH label="featured news image" ratio="4/3" tone="warm" />
          <div>
            <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
              <span style={{ fontFamily: v1.mono, fontSize: 11, letterSpacing: '0.25em', color: v1.shu, border: `1px solid ${v1.shu}60`, padding: '4px 12px' }}>
                FEATURED
              </span>
              <span style={{ fontFamily: v1.mono, fontSize: 12, color: v1.muted, letterSpacing: '0.1em' }}>
                {allNews[0].date} ／ {allNews[0].tag.toUpperCase()}
              </span>
            </div>
            <h2 style={{ fontFamily: v1.serif, fontWeight: 400, fontSize: 'clamp(32px, 4vw, 56px)', margin: '24px 0 20px', lineHeight: 1.3, letterSpacing: '-0.01em' }}>
              {allNews[0].title}
            </h2>
            <p style={{ fontFamily: v1.serif, fontSize: 16, lineHeight: 2, color: v1.sumi, margin: 0 }}>
              {allNews[0].excerpt}
            </p>
            <div style={{ marginTop: 32, fontFamily: v1.mono, fontSize: 11, letterSpacing: '0.2em', color: v1.ink, borderBottom: `1px solid ${v1.ink}`, display: 'inline-block', paddingBottom: 4 }}>
              {EN ? 'READ MORE →' : 'READ MORE →'}
            </div>
          </div>
        </div>
      </section>

{/* List */}
      <section style={{ padding: '60px 80px 120px', borderTop: `1px solid ${v1.line}` }}>
        {allNews.slice(1).map((n, i) => (
          <article key={i} style={{
            display: 'grid', gridTemplateColumns: '140px 120px 1fr 60px',
            gap: 32, padding: '32px 0', borderBottom: `1px solid ${v1.line}`,
            alignItems: 'center', cursor: 'pointer',
          }}>
            <span style={{ fontFamily: v1.mono, fontSize: 13, color: v1.muted, letterSpacing: '0.05em' }}>{n.date}</span>
            <span style={{
              fontFamily: v1.mono, fontSize: 10, letterSpacing: '0.25em', color: v1.shu,
              border: `1px solid ${v1.shu}40`, padding: '6px 12px', textAlign: 'center',
            }}>{n.tag.toUpperCase()}</span>
            <div>
              <div style={{ fontFamily: v1.serif, fontSize: 22, lineHeight: 1.5 }}>{n.title}</div>
              <div style={{ fontFamily: v1.serif, fontSize: 14, color: v1.muted, marginTop: 6, lineHeight: 1.8 }}>
                {n.excerpt}
              </div>
            </div>
            <span style={{ textAlign: 'right', color: v1.muted, fontSize: 18 }}>→</span>
          </article>
        ))}

<div style={{ textAlign: 'center', marginTop: 72 }}>
          <button style={{
            background: 'transparent', color: v1.ink, border: `1px solid ${v1.ink}`,
            padding: '18px 36px', fontSize: 12, letterSpacing: '0.25em', fontFamily: v1.sans, cursor: 'pointer',
          }}>
            {EN ? 'LOAD MORE →' : 'さらに読む →'}
          </button>
        </div>
      </section>

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