/* MEXYFOR — Mobile Comps (390px) ／ All 5 pages */

const M = {
  paper: '#f5f3ec',
  paperDeep: '#ece9dd',
  ink: '#1a1a1c',
  ink2: '#3d3d40',
  ink3: '#8a8881',
  rule: '#c9c5b6',
  navy: '#15264e',
  orange: '#ec6a1e',
  dark: '#1a1a1c',
  serif: '"Shippori Mincho", serif',
  sans: '"Noto Sans JP", system-ui',
  en: '"Cormorant Garamond", serif',
  mono: '"JetBrains Mono", monospace',
};

/* ---------- Shared header ---------- */
const MHeader = ({ activeNav }) => (
  <header style={{
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: '18px 22px',
    borderBottom: `1px solid ${M.rule}`,
    background: M.paper,
  }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '11px 11px', gridTemplateRows: '11px 11px', gap: 1.5 }}>
        <div style={{ background: M.orange }}></div>
        <div style={{ background: M.navy }}></div>
        <div style={{ background: M.navy }}></div>
        <div style={{ background: M.orange }}></div>
      </div>
      <div style={{ fontFamily: M.serif, fontSize: 15, letterSpacing: '0.16em', color: M.ink }}>MEXYFOR</div>
    </div>
    <div style={{ fontFamily: M.mono, fontSize: 10, letterSpacing: '0.22em', color: M.ink }}>MENU</div>
  </header>
);

const MBreadcrumb = ({ current }) => (
  <div style={{
    fontFamily: M.mono, fontSize: 10, letterSpacing: '0.06em', color: M.ink3,
    padding: '12px 22px', borderBottom: `1px solid ${M.rule}`,
  }}>
    <a href="index.html" style={{ color: 'inherit', textDecoration: 'none' }}>Top</a>
    <span style={{ margin: '0 10px', color: M.rule }}>／</span>
    <span style={{ color: M.ink }}>{current}</span>
  </div>
);

const MFooter = () => (
  <footer style={{
    background: M.dark,
    color: '#9a9894',
    padding: '32px 22px 28px',
    fontFamily: M.mono,
    fontSize: 9,
    letterSpacing: '0.2em',
    lineHeight: 2,
  }}>
    <div style={{ display: 'grid', gridTemplateColumns: '11px 11px', gridTemplateRows: '11px 11px', gap: 1.5, marginBottom: 16 }}>
      <div style={{ background: M.orange }}></div>
      <div style={{ background: M.navy }}></div>
      <div style={{ background: M.navy }}></div>
      <div style={{ background: M.orange }}></div>
    </div>
    <div style={{ color: '#bcb9b3', fontSize: 11, fontFamily: M.serif, letterSpacing: '0.14em' }}>MEXYFOR INC.</div>
    <div style={{ marginTop: 24, paddingTop: 20, borderTop: '1px solid rgba(255,255,255,0.1)', display: 'flex', justifyContent: 'space-between' }}>
      <span>© 2025 MEXYFOR</span>
      <a href="pp.html" style={{ color: 'inherit', textDecoration: 'none' }}>PrivacyPolicy</a>
    </div>
  </footer>
);

const lbl9 = { fontFamily: M.mono, fontSize: 9, letterSpacing: '0.26em', color: M.ink3, textTransform: 'uppercase' };
const sectionPad = { padding: '64px 22px' };

/* ============================================================
   PAGE 01 — TOP
============================================================ */
const TopMobile = () => (
  <div style={{ background: M.paper, color: M.ink, fontFamily: M.sans, width: '100%', maxWidth: 540, margin: '0 auto' }}>
    <MHeader />

    {/* HERO */}
    <section style={{ padding: '40px 22px 60px', position: 'relative' }}>
      <div style={lbl9}>／ MEDICAL × MARKETING</div>
      <div style={{ marginTop: 16, fontFamily: M.sans, fontSize: 11.5, color: M.ink2, letterSpacing: '0.04em' }}>
        MEXYFOR — 医療政策の矛盾を解消するプラットフォーム
      </div>
      <div style={{ marginTop: 16, fontFamily: M.en, fontStyle: 'italic', fontSize: 18, color: M.ink3 }}>
        We support <span style={{ color: M.orange }}>clinical</span> management.
      </div>
      <h1 style={{
        margin: '24px 0 0',
        fontFamily: M.serif,
        fontWeight: 400,
        fontSize: 38,
        lineHeight: 1.45,
        letterSpacing: '0.02em',
      }}>
        削るだけの医療政策に、<br />もう一つの答えを
      </h1>
      <div style={{ marginTop: 36, fontSize: 12.5, lineHeight: 2.1, color: M.ink2, letterSpacing: '0.02em' }}>
        短期的な医療費削減は、長期的に医療費を増やす。この矛盾を解消するため、私たちは医療経営、引いては医療政策のあるべき姿をデータで支える会社です。
      </div>
    </section>

    {/* WHY WE EXIST */}
    <section style={{ ...sectionPad, background: M.paperDeep, borderTop: `1px solid ${M.rule}` }}>
      <div style={lbl9}>／ WHY WE EXIST</div>
      <div style={{ marginTop: 20, fontSize: 12.5, lineHeight: 2.1, color: M.ink2 }}>
        日本の医療費は、年間47兆円を超えました。<br />
        財政の持続性のため、診療報酬は引き下げ続けられています。
        <br /><br />
        しかし、目先の削減は、長期の損失を生みます。<br />
        受診を控えた患者は重症化し、結局はより多くの医療費を必要とする。<br />
        クリニックは経営難に陥り、地域医療が崩壊していく。
        <br /><br />
        私たちは、この矛盾をテクノロジーで解消します。
        <br /><br />
        患者の健康を長期的に守る仕組みを作り、<br />
        クリニックが健全に運営できる環境を整え、<br />
        医師が本来の医療業務に集中できる時間を取り戻す。
        <br /><br />
        結果として、社会全体の医療費を、長期的に抑える。
        <br /><br />
        それが我々が考える、矛盾の解消です。
      </div>
    </section>


    {/* SERVICE — LifeAware */}
    <section style={{ background: '#0e0e10', color: M.paper, padding: '64px 22px' }}>
      <div style={{ ...lbl9, color: '#7a7a7a' }}>／ SERVICE</div>
      <div style={{ marginTop: 24, fontFamily: M.en, fontStyle: 'italic', fontSize: 16, color: '#bdbcb8' }}>
        Our flagship product
      </div>
      <h2 style={{
        margin: '14px 0 0',
        fontFamily: M.serif,
        fontSize: 32,
        fontWeight: 500,
        lineHeight: 1.5,
        color: M.paper,
      }}>
        LifeAware
      </h2>
      <div style={{ marginTop: 14, fontFamily: M.serif, fontSize: 18, color: '#cfccc4' }}>
        患者様との関係性を<br />再構築する、CRM。
      </div>
      <div style={{ marginTop: 28, fontSize: 12.5, lineHeight: 2, color: '#bcb9b3' }}>
        電子カルテのデータをもとに、患者ひとりひとりの状態に合わせたフォロー連絡を半自動化。
        慢性疾患の継続通院、処置後の再来院、適切な自費診療の案内まで。
        現場の判断を残しながら、CRMで医療経営を支えます。
      </div>
      <a href="https://lifeaware.jp/" target="_blank" rel="noopener" style={{
        marginTop: 36,
        display: 'inline-flex',
        alignItems: 'center',
        gap: 10,
        padding: '14px 24px',
        background: M.orange,
        color: '#fff',
        fontFamily: M.mono,
        fontSize: 11,
        letterSpacing: '0.2em',
        textDecoration: 'none',
      }}>
        VISIT LIFEAWARE.JP <span>↗</span>
      </a>
    </section>


    {/* NEWS */}
    <section style={{ ...sectionPad, borderTop: `1px solid ${M.rule}`, background: M.paperDeep }}>
      <div style={lbl9}>／ NEWS</div>
      <div style={{ marginTop: 8, fontFamily: M.en, fontStyle: 'italic', fontSize: 14, color: M.ink3 }}>News & Updates</div>
      <div style={{ marginTop: 24, borderTop: `1px solid ${M.ink}` }}>
        {[
          ['2025.08.01', 'PRESS', 'LifeAware β版を提供開始しました'],
          ['2026.04.01', 'NEWS', 'LifeAware新バージョンを提供開始'],
        ].map(([d, t, ti], i) => (
          <div key={i} style={{ padding: '18px 0', borderBottom: `1px solid ${M.rule}` }}>
            <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
              <span style={{ fontFamily: M.mono, fontSize: 10, color: M.ink3 }}>{d}</span>
              <span style={{ fontFamily: M.mono, fontSize: 9, padding: '3px 8px', border: `1px solid ${M.ink}`, letterSpacing: '0.12em' }}>{t}</span>
            </div>
            <div style={{ marginTop: 8, fontSize: 13, color: M.ink, fontFamily: M.serif }}>{ti}</div>
          </div>
        ))}
      </div>
    </section>

    <MFooter />
  </div>
);

/* ============================================================
   PAGE 02 — BUSINESS
============================================================ */
const BusinessMobile = () => (
  <div style={{ background: M.paper, color: M.ink, fontFamily: M.sans, width: '100%', maxWidth: 540, margin: '0 auto' }}>
    <MHeader />
    <MBreadcrumb current="Business" />

    <section style={{ padding: '40px 22px 60px' }}>

      <div style={{ marginTop: 24, fontFamily: M.en, fontStyle: 'italic', fontSize: 18, color: M.ink3 }}>What we do.</div>
      <h1 style={{ margin: '14px 0 0', fontFamily: M.serif, fontWeight: 500, fontSize: 44, letterSpacing: '0.04em' }}>
        事業領域
      </h1>
      <div style={{ marginTop: 32, fontSize: 12.5, lineHeight: 2.1, color: M.ink2 }}>
        私たちは、医療経営をデータで支える3つの事業を展開しています。
      </div>
    </section>

    {/* 01 LifeAware — dark */}
    <section style={{ background: '#0e0e10', color: M.paper, padding: '60px 22px' }}>
      <div style={{ ...lbl9, color: '#7a7a7a' }}>01 ／ BUSINESS</div>
      <div style={{ marginTop: 14, fontFamily: M.serif, fontSize: 22, color: '#bdbcb8' }}>クリニックCRM事業</div>
      <div style={{ marginTop: 4, fontFamily: M.en, fontStyle: 'italic', color: '#7a7a7a', fontSize: 13 }}>Clinic CRM</div>
      <h2 style={{
        margin: '32px 0 0', fontFamily: M.serif, fontWeight: 500, fontSize: 32, lineHeight: 1.5, color: M.paper,
      }}>
        LifeAware
      </h2>
      <div style={{ marginTop: 14, fontFamily: M.serif, fontSize: 18, color: '#cfccc4' }}>
        患者様との関係性を<br />再構築する、CRM。
      </div>
      <div style={{ marginTop: 28, fontSize: 12.5, lineHeight: 2, color: '#bcb9b3' }}>
        電子カルテのデータを解析し、慢性疾患の継続通院から、処置後の再来院、適切な自費診療の案内まで、医療経営をCRMで支えます。
      </div>
      <a href="https://lifeaware.jp/" target="_blank" rel="noopener" style={{
        marginTop: 36, display: 'inline-flex', alignItems: 'center', gap: 10,
        padding: '14px 24px', background: M.orange, color: '#fff',
        fontFamily: M.mono, fontSize: 11, letterSpacing: '0.2em',
        textDecoration: 'none',
      }}>
        VISIT LIFEAWARE.JP <span>↗</span>
      </a>
    </section>

    {/* 02 Menu Dev */}
    <section style={{ background: M.paperDeep, padding: '60px 22px' }}>
      <div style={lbl9}>02 ／ BUSINESS</div>
      <div style={{ marginTop: 14, fontFamily: M.serif, fontSize: 22 }}>診療メニュー<br />開発支援事業</div>
      <div style={{ marginTop: 4, fontFamily: M.en, fontStyle: 'italic', color: M.ink3, fontSize: 13 }}>Menu Development</div>
      <h2 style={{
        margin: '32px 0 0', fontFamily: M.serif, fontWeight: 500, fontSize: 28, lineHeight: 1.5,
      }}>
        保険診療を基盤にし、<br />
        適切な自費診療も提供できる<span style={{ color: M.navy }}>体制を立ち上げる</span>。
      </h2>
      <div style={{ marginTop: 28, fontSize: 12.5, lineHeight: 2, color: M.ink2 }}>
        自費診療やオンライン診療を新たな収益軸として確立したいクリニックを、医療経営の現場知見で伴走支援します。
      </div>
      {/* Track A */}
      <div style={{ marginTop: 32 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, paddingBottom: 10, borderBottom: `1px solid ${M.ink}` }}>
          <span style={{ fontFamily: M.mono, fontSize: 9, color: M.navy, letterSpacing: '0.2em' }}>TRACK A</span>
          <span style={{ fontFamily: M.serif, fontSize: 16 }}>自費診療の導入支援</span>
        </div>
        {[
          ['メニュー設計', '自費メニューの選定・導入'],
          ['価格設計', '適正価格と患者像の設計'],
          ['コミュニケーション', '院内・患者向けの伝え方'],
        ].map(([k, v], i) => (
          <div key={i} style={{ padding: '16px 0', borderBottom: `1px solid ${M.rule}` }}>
            <div style={{ ...lbl9, fontSize: 9 }}>0{i + 1}</div>
            <div style={{ marginTop: 6, fontFamily: M.serif, fontSize: 15 }}>{k}</div>
            <div style={{ marginTop: 4, fontSize: 11.5, color: M.ink2, lineHeight: 1.8 }}>{v}</div>
          </div>
        ))}
        <div style={{ paddingTop: 20 }}>
          <a href="https://lifeaware.jp/private/index.html" target="_blank" rel="noopener noreferrer" style={{
            display: 'inline-flex',
            alignItems: 'center',
            gap: 8,
            padding: '12px 20px',
            background: 'transparent',
            color: M.navy,
            border: `1px solid ${M.navy}`,
            textDecoration: 'none',
            fontFamily: M.mono,
            fontSize: 10,
            letterSpacing: '0.18em',
          }}>
            取り扱い自費診療メニュー <span>↗</span>
          </a>
        </div>
      </div>
      {/* Track B */}
      <div style={{ marginTop: 28 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, paddingBottom: 10, borderBottom: `1px solid ${M.ink}` }}>
          <span style={{ fontFamily: M.mono, fontSize: 9, color: M.orange, letterSpacing: '0.2em' }}>TRACK B</span>
          <span style={{ fontFamily: M.serif, fontSize: 16 }}>オンライン診療の導入支援</span>
        </div>
        <div style={{ padding: '16px 0', borderBottom: `1px solid ${M.rule}`, fontSize: 12, color: M.ink2, lineHeight: 1.95 }}>
          立ち上げから運用までを一気通貫で支援。診療フロー・予約導線・服薬指導・決済・配送までを含めて、現場で回るオンライン診療を設計します。
        </div>
      </div>
    </section>

    {/* 03 Clinical Insight */}
    <section style={{ padding: '60px 22px' }}>
      <div style={lbl9}>03 ／ BUSINESS</div>
      <div style={{ marginTop: 14, fontFamily: M.serif, fontSize: 22 }}>クリニカル<br />インサイト事業</div>
      <div style={{ marginTop: 4, fontFamily: M.en, fontStyle: 'italic', color: M.ink3, fontSize: 13 }}>Clinical Insight</div>
      <h2 style={{
        margin: '32px 0 0', fontFamily: M.serif, fontWeight: 500, fontSize: 28, lineHeight: 1.5,
      }}>
        見えにくかった現場を、<br />
        <span style={{ color: M.orange }}>意思決定</span>に届ける。
      </h2>
      <div style={{ marginTop: 28, fontSize: 12.5, lineHeight: 2, color: M.ink2 }}>
        製薬企業・医療機器メーカー・ヘルスケア企業に対して、疾患領域や治療実態に関するインサイトを提供。医薬品開発・製品戦略・市販後調査などの意思決定を支援します。
      </div>
      <div style={{ marginTop: 24, fontFamily: M.mono, fontSize: 9, letterSpacing: '0.2em', color: M.ink3 }}>
        ／ FOR PHARMA, MEDICAL DEVICES &amp; HEALTHCARE COMPANIES
      </div>
    </section>

    <MFooter />
  </div>
);

/* ============================================================
   PAGE 03 — COMPANY
============================================================ */
const CompanyMobile = () => (
  <div style={{ background: M.paper, color: M.ink, fontFamily: M.sans, width: '100%', maxWidth: 540, margin: '0 auto' }}>
    <MHeader />
    <MBreadcrumb current="Company" />

    <section style={{ padding: '40px 22px 56px' }}>

      <h1 style={{ margin: '20px 0 0', fontFamily: M.serif, fontWeight: 500, fontSize: 44, letterSpacing: '0.04em' }}>
        Company
      </h1>
    </section>

    {/* COMPANY INFO */}
    <section style={{ borderTop: `1px solid ${M.rule}`, padding: '48px 22px' }}>
      <div style={lbl9}>01 ／ INFO</div>
      <div style={{ marginTop: 12, fontFamily: M.serif, fontSize: 22 }}>会社情報</div>
      <div style={{ marginTop: 28, borderTop: `1px solid ${M.ink}` }}>
        {[
          ['商号', '株式会社MEXYFOR'],
          ['事業開始', '2024年7月'],
          ['設立', '2025年4月4日'],
          ['代表者', 'Founder CEO ／ 金井 洋平'],
          ['所在地', '〒151-0066\n東京都渋谷区西原1-10-3'],
          ['事業内容', 'クリニックCRM事業／診療メニュー開発支援事業／クリニカルインサイト事業'],
        ].map(([k, v], i) => (
          <div key={i} style={{ padding: '18px 0', borderBottom: `1px solid ${M.rule}` }}>
            <div style={{ ...lbl9, fontSize: 9 }}>{k}</div>
            <div style={{ marginTop: 8, fontFamily: M.serif, fontSize: 14, lineHeight: 1.7, whiteSpace: 'pre-line' }}>{v}</div>
          </div>
        ))}
      </div>
    </section>

    {/* HISTORY */}
    <section style={{ borderTop: `1px solid ${M.rule}`, padding: '48px 22px', background: M.paperDeep }}>
      <div style={lbl9}>02 ／ HISTORY</div>
      <div style={{ marginTop: 12, fontFamily: M.serif, fontSize: 22 }}>沿革</div>
      <div style={{ marginTop: 28, borderTop: `1px solid ${M.ink}` }}>
        {[
          ['2024.07', 'クリニック向け事業開始'],
          ['2025.04', '株式会社MEXYFOR設立'],
          ['2025.08', 'LifeAwareβ版 提供開始'],
          ['2026.01', 'LifeAware新 バージョン提供開始'],
          ['2026.04', 'パートナー制度スタート'],
        ].map(([y, e], i) => (
          <div key={i} style={{ padding: '14px 0', borderBottom: `1px solid ${M.rule}`, display: 'grid', gridTemplateColumns: '70px 1fr', gap: 12, alignItems: 'baseline' }}>
            <span style={{ fontFamily: M.mono, fontSize: 11, color: M.ink3 }}>{y}</span>
            <span style={{ fontFamily: M.serif, fontSize: 14 }}>{e}</span>
          </div>
        ))}
      </div>
    </section>

    <MFooter />
  </div>
);

/* ============================================================
   PAGE 04 — MESSAGE
============================================================ */
const MessageMobile = () => (
  <div style={{ background: M.paper, color: M.ink, fontFamily: M.sans, width: '100%', maxWidth: 540, margin: '0 auto' }}>
    <MHeader />
    <MBreadcrumb current="Message" />

    {/* HERO */}
    <section style={{ padding: '60px 22px 80px' }}>

      <h1 style={{
        margin: '28px 0 0',
        fontFamily: M.serif, fontWeight: 500, fontSize: 36, lineHeight: 1.45, letterSpacing: '0.02em',
      }}>
        半径4メートルの人を、<br />笑顔にする。
      </h1>
    </section>

    {/* PORTRAIT + lead */}
    <section style={{ borderTop: `1px solid ${M.rule}`, padding: '48px 22px', background: M.paperDeep }}>
      <div style={{
        width: '100%',
        aspectRatio: '4/5',
        background: `url('assets/founder.jpg') center/cover no-repeat, ${M.ink}`,
      }}></div>
      <div style={{ marginTop: 24, ...lbl9 }}>FOUNDER &amp; CEO</div>
      <div style={{ marginTop: 8, fontFamily: M.serif, fontSize: 22, color: M.ink }}>金井 洋平</div>
      <div style={{ marginTop: 4, fontFamily: M.en, fontStyle: 'italic', fontSize: 13, color: M.ink3 }}>Yohei Kanai</div>
      <p style={{ marginTop: 32, fontFamily: M.serif, fontSize: 24, lineHeight: 1.55, color: M.ink, fontWeight: 500 }}>
        世界を変える前に、目の前を変える。
      </p>
      <p style={{ marginTop: 24, fontFamily: M.serif, fontSize: 14, lineHeight: 2, color: M.ink2 }}>
        素直に言いますが、世界を変えたいなどという大それたビジョンはありません。
        そんなことよりもまずは、自分の周囲にいる人達をいかに幸せにするか。── 仲間、家族、友人、目の前のお客様 ── まずはそれが起点だと思います。
      </p>
      <p style={{ marginTop: 18, fontFamily: M.serif, fontSize: 14, lineHeight: 2, color: M.ink2 }}>
        想いは伝播します。半径4メートルの人が笑顔でいれば、その先の人にも、きっと伝わっていく。大きなことはできなくても、そういう循環を生み出せる組織でありたいと思っています。
      </p>
    </section>

    {/* §I */}
    <section style={{ borderTop: `1px solid ${M.rule}`, padding: '60px 22px' }}>
      <div style={lbl9}>§ I</div>
      <h2 style={{ margin: '20px 0 0', fontFamily: M.serif, fontSize: 24, fontWeight: 500, lineHeight: 1.55 }}>
        なぜ医療領域なのか。
      </h2>
      <div style={{ marginTop: 24, fontFamily: M.serif, fontSize: 14, color: M.ink2, lineHeight: 2 }}>
        私は以前、ビッグデータを扱うマーケティングの仕事に携わっていました。データから何を見出せるか。データとデータを掛け合わせたとき、どんな可能性が立ち上がるか。そういうことを、ずっと考え続けてきました。
        <br /><br />
        ある時期から、クリニック向けの事業に関わるようになり、多くの医師との対話を重ねるなかで、クリニックの経営課題が、少しずつ自分のなかで像を結んでいきました。
        診療報酬制度の構造、日々の運営の難しさ、そして眠ったままの膨大な医療データ。
        これまでのマーケティングとデータビジネスの経験を、医療経営の現場に持ち込めば、そこに新しい支え方をつくれる。そう確信して、この事業を興しました。
      </div>
    </section>

    {/* §II */}
    <section style={{ borderTop: `1px solid ${M.rule}`, padding: '60px 22px', background: M.paperDeep }}>
      <div style={lbl9}>§ II</div>
      <h2 style={{ margin: '20px 0 0', fontFamily: M.serif, fontSize: 24, fontWeight: 500, lineHeight: 1.55 }}>
        私が、経営をする意味。
      </h2>
      <div style={{ marginTop: 24, fontFamily: M.serif, fontSize: 14, color: M.ink2, lineHeight: 2 }}>
        私が大切にしているのは、ともに働く仲間たちの満足度です。CSではなく、ES。この順番にこだわっています。
        <br />
        <br />
        健康と同じです。手足、筋肉、骨、内臓、自分の体を構成するそれぞれが健やかであって健やかであってはじめて、人は高いパフォーマンスを発揮できる。 組織も、同じではないでしょうか。
        <br />
        一緒に働く仲間がやりがいを感じ、健やかに働いている。 だからこそ、価値のある仕事ができ、 結果として、お客様にも満足していただき、社会的価値を生み出すことが出来る。
        <br />
        <br />
        そしてもうひとつ。ともに働く仲間達と常にお互いを高め合っていきたいと考えています。
        <br />
        <br />
        克己心、己に打ち克つ強い心。私が常に意識している言葉です。
        <br />
        <br />
        しかし、それだけでは自分本位になってしまう。 周囲の人々へ感謝し、一所懸命に努めることで、一隅を照らすことができ、それが人間力へとつながっていく。
        <br />
        <br />
        せっかくご縁あってともに働く人たちとこの想いを共有し、豊かな人生、引いては社会を築いていきたいと考えています。
        <br />
        <br />
        まずは半径4メートルの人たちを笑顔にすること。
        <br />
        それが、社会的価値を生み出す起点であると考えています。
      </div>
    </section>

    {/* Sign-off */}
    {/*<section style={{ borderTop: `1px solid ${M.rule}`, padding: '48px 22px', textAlign: 'right' }}>
      <div style={lbl9}>SIGNED</div>
      <div style={{ marginTop: 14, fontFamily: M.serif, fontSize: 18 }}>株式会社MEXYFOR</div>
      <div style={{ fontFamily: M.serif, fontSize: 18 }}>Founder CEO 金井 洋平</div>
      <div style={{ marginTop: 8, fontFamily: M.en, fontStyle: 'italic', fontSize: 13, color: M.ink3 }}>Yohei Kanai</div>
    </section>
    */}

    <MFooter />
  </div>
);

/* ============================================================
   PAGE 05 — CONTACT
============================================================ */
const ContactMobile = () => {
  const fieldLbl = { fontFamily: M.mono, fontSize: 10, letterSpacing: '0.18em', color: M.ink3, textTransform: 'uppercase' };
  const fieldInput = {
    width: '100%', padding: '12px 0', fontSize: 15, fontFamily: M.serif, color: M.ink,
    background: 'transparent', border: 'none', borderBottom: `1px solid ${M.rule}`, outline: 'none', boxSizing: 'border-box',
  };

  const initialForm = {
    inquiryType: '事業・サービスに関するお問い合わせ',
    name: '',
    company: '',
    email: '',
    message: '',
    privacyAgreed: false,
  };
  const [formData, setFormData] = React.useState(initialForm);
  const [status, setStatus] = React.useState('idle');
  const update = (key) => (e) => setFormData((p) => ({ ...p, [key]: e.target.value }));

  const ENDPOINT = 'https://script.google.com/macros/s/AKfycbxNs1sey8O6Y4PkIxH7nvio78v0SOael3Zb4lbVB1w97uwVuMxN6e9jCJOD3Rn8Dm-w/exec';

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (status === 'sending') return;
    if (!formData.privacyAgreed) {
      alert('プライバシーポリシーへの同意が必要です。');
      return;
    }
    setStatus('sending');
    try {
      const res = await fetch(ENDPOINT, {
        method: 'POST',
        body: JSON.stringify({
          inquiryType: formData.inquiryType,
          name: formData.name,
          company: formData.company,
          email: formData.email,
          message: formData.message || '記載なし',
        }),
      });
      const data = await res.json().catch(() => ({}));
      console.log('[Contact] response:', res.status, data);
      if (!res.ok || data.success !== true) {
        throw new Error(data.error || `HTTP ${res.status}`);
      }
      setStatus('success');
      setFormData(initialForm);
    } catch (err) {
      console.error('[Contact] submission failed:', err);
      setStatus('error');
    }
  };

  return (
    <div style={{ background: M.paper, color: M.ink, fontFamily: M.sans, width: '100%', maxWidth: 540, margin: '0 auto' }}>
      <MHeader />
      <MBreadcrumb current="お問い合わせ" />

      {/* HERO */}
      <section style={{ padding: '50px 22px 40px' }}>

        <div style={{ marginTop: 24, fontFamily: M.en, fontStyle: 'italic', fontSize: 18, color: M.ink3 }}>
          Get in <span style={{ color: M.orange }}>touch</span>.
        </div>
        <h1 style={{ margin: '14px 0 0', fontFamily: M.serif, fontWeight: 500, fontSize: 44, letterSpacing: '0.04em' }}>
          お問い合わせ
        </h1>
        <div style={{ marginTop: 28, fontSize: 13, color: M.ink2, lineHeight: 2 }}>
          事業・サービスに関するご相談、ご提携やアライアンスのご相談など、下記フォームよりお気軽にお問い合わせください。
        </div>
      </section>

      {/* FORM */}
      <section style={{ borderTop: `1px solid ${M.rule}`, padding: '40px 22px 60px' }}>

        <div style={{ marginTop: 12, fontFamily: M.serif, fontSize: 22 }}>フォーム</div>
        <div style={{ marginTop: 12, fontSize: 11, color: M.ink2, lineHeight: 1.9 }}>
          <span style={{ color: M.orange, fontFamily: M.mono, marginRight: 4 }}>*</span>
          印は必須項目です。
        </div>

        <form onSubmit={handleSubmit} data-mxf-bound="1">
          {/* Inquiry type */}
          <div style={{ marginTop: 32 }}>
            <div style={fieldLbl}>用件区分 <span style={{ color: M.orange }}>*</span></div>
            <div style={{ marginTop: 12, border: `1px solid ${M.rule}` }}>
              {[
                '事業・サービスに関するお問い合わせ',
                '提携・アライアンスご相談',
              ].map((t, i) => {
                const sel = formData.inquiryType === t;
                return (
                  <div
                    key={i}
                    onClick={() => setFormData((p) => ({ ...p, inquiryType: t }))}
                    style={{
                      padding: '16px 18px',
                      background: sel ? M.ink : 'transparent',
                      color: sel ? M.paper : M.ink2,
                      borderBottom: i === 0 ? `1px solid ${M.rule}` : 'none',
                      fontSize: 12, fontFamily: M.serif, display: 'flex', alignItems: 'center', gap: 10,
                      cursor: 'pointer', userSelect: 'none',
                    }}
                  >
                    <span style={{
                      display: 'inline-block', width: 12, height: 12, borderRadius: '50%',
                      border: `1.5px solid ${sel ? M.orange : M.rule}`,
                      background: sel ? M.orange : 'transparent', flexShrink: 0,
                    }}></span>
                    {t}
                  </div>
                );
              })}
            </div>
          </div>

          {/* Name */}
          <div style={{ marginTop: 32 }}>
            <div style={fieldLbl}>お名前 <span style={{ color: M.orange }}>*</span></div>
            <input style={fieldInput} placeholder="山田 太郎" required value={formData.name} onChange={update('name')} />
          </div>
          {/* Company */}
          <div style={{ marginTop: 28 }}>
            <div style={fieldLbl}>会社名・組織名 <span style={{ color: M.orange }}>*</span></div>
            <input style={fieldInput} placeholder="株式会社○○○" required value={formData.company} onChange={update('company')} />
          </div>
          {/* Email */}
          <div style={{ marginTop: 28 }}>
            <div style={fieldLbl}>メールアドレス <span style={{ color: M.orange }}>*</span></div>
            <input type="email" style={fieldInput} placeholder="name@example.com" required value={formData.email} onChange={update('email')} />
          </div>
          {/* Body */}
          <div style={{ marginTop: 28 }}>
            <div style={fieldLbl}>お問い合わせ内容 <span style={{ color: M.orange }}>*</span></div>
            <textarea
              style={{ ...fieldInput, resize: 'none', minHeight: 140, padding: '16px 0', lineHeight: 1.9 }}
              placeholder="お問い合わせ内容をご記入ください。"
              required
              value={formData.message}
              onChange={update('message')}
            ></textarea>
          </div>

          {/* Privacy */}
          <div
            onClick={() => setFormData((p) => ({ ...p, privacyAgreed: !p.privacyAgreed }))}
            style={{
              marginTop: 32, padding: '16px 18px', background: M.paperDeep,
              border: `1px solid ${formData.privacyAgreed ? M.orange : M.rule}`,
              fontSize: 11, color: M.ink2, lineHeight: 1.85, display: 'flex', alignItems: 'flex-start', gap: 10,
              cursor: 'pointer', userSelect: 'none',
            }}
          >
            <span style={{
              display: 'inline-block', width: 14, height: 14, border: `1.5px solid ${M.orange}`,
              background: formData.privacyAgreed ? M.orange : 'transparent', position: 'relative', flexShrink: 0, marginTop: 2,
            }}>
              {formData.privacyAgreed && (
                <span style={{ position: 'absolute', top: 0, left: 3, color: M.paper, fontSize: 11, lineHeight: 1 }}>✓</span>
              )}
            </span>
            <span>
              <a
                href="pp.html"
                target="_blank"
                rel="noopener"
                onClick={(e) => e.stopPropagation()}
                style={{ color: M.ink, borderBottom: `1px solid ${M.ink2}`, textDecoration: 'none' }}
              >プライバシーポリシー</a>
              に同意のうえ、送信します。
            </span>
          </div>

          {/* Status message */}
          {status === 'success' && (
            <div style={{
              marginTop: 24, padding: '14px 18px',
              borderLeft: `3px solid ${M.orange}`, background: M.paperDeep,
              fontSize: 12, color: M.ink, lineHeight: 1.7,
            }}>
              お問い合わせを受け付けました。担当者よりご返信いたします。
            </div>
          )}
          {status === 'error' && (
            <div style={{
              marginTop: 24, padding: '14px 18px',
              borderLeft: '3px solid #c5443a', background: M.paperDeep,
              fontSize: 12, color: M.ink, lineHeight: 1.7,
            }}>
              送信に失敗しました。時間をおいて再度お試しいただくか、kanai@mexyfor.co.jp まで直接ご連絡ください。
            </div>
          )}

          {/* Submit */}
          <button
            type="submit"
            disabled={status === 'sending'}
            style={{
              marginTop: 32, width: '100%', background: M.ink, color: M.paper, padding: '18px 0',
              border: 'none', fontFamily: M.mono, fontSize: 12, letterSpacing: '0.24em',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 14,
              cursor: status === 'sending' ? 'default' : 'pointer',
              opacity: status === 'sending' ? 0.6 : 1,
            }}
          >
            {status === 'sending'
              ? 'SENDING…'
              : <span>SEND MESSAGE <span style={{ color: M.orange }}>↗</span></span>}
          </button>
        </form>
      </section>

      <MFooter />
    </div>
  );
};

/* ============================================================
   PAGE 06 — NEWS
============================================================ */
const NewsMobile = () => {
  const newsItems = [
    { date: '2026.04.01', tag: 'NEWS', title: 'LifeAware 新バージョンを提供開始' },
    { date: '2025.08.01', tag: 'PRESS', title: 'LifeAware β版を提供開始しました' },
  ];
  return (
    <div style={{ background: M.paper, color: M.ink, fontFamily: M.sans, width: '100%', maxWidth: 540, margin: '0 auto' }}>
      <MHeader />
      <MBreadcrumb current="News" />

      {/* HERO */}
      <section style={{ padding: '50px 22px 40px' }}>

        <div style={{ marginTop: 24, fontFamily: M.en, fontStyle: 'italic', fontSize: 18, color: M.ink3 }}>
          Latest <span style={{ color: M.orange }}>updates</span>.
        </div>
        <h1 style={{ margin: '14px 0 0', fontFamily: M.serif, fontWeight: 500, fontSize: 44, letterSpacing: '0.04em' }}>
          News
        </h1>

      </section>

      {/* NEWS LIST */}
      <section style={{ borderTop: `1px solid ${M.rule}`, padding: '40px 22px 60px' }}>
        <div style={lbl9}>01 ／ NEWS</div>
        <div style={{ marginTop: 12, fontFamily: M.serif, fontSize: 22 }}>お知らせ一覧</div>
        <div style={{ marginTop: 28, borderTop: `1px solid ${M.ink}` }}>
          {newsItems.map((it, i) => (
            <div key={i} style={{ padding: '18px 0', borderBottom: `1px solid ${M.rule}` }}>
              <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
                <span style={{ fontFamily: M.mono, fontSize: 10, color: M.ink3 }}>{it.date}</span>
                <span style={{ fontFamily: M.mono, fontSize: 9, padding: '3px 8px', border: `1px solid ${M.ink}`, letterSpacing: '0.12em' }}>{it.tag}</span>
              </div>
              <div style={{ marginTop: 8, fontSize: 13, color: M.ink, fontFamily: M.serif }}>{it.title}</div>
            </div>
          ))}
        </div>
      </section>

      <MFooter />
    </div>
  );
};

window.MobilePages = {
  TopMobile, BusinessMobile, CompanyMobile, MessageMobile, ContactMobile, NewsMobile,
};